Teams/shanghaigangxiangtuzhuangVUE
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

echarts

Browse Source
This commit is contained in:
赵正易
2024-10-15 12:12:44 +08:00
parent bedc4b4f07
commit d119a6a7aa
6 changed files with 198 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/business/Top3缺陷零件.vue → src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/business/近一周缺陷最多零件top3.vue
View File

@@ -20,10 +20,10 @@ export default {
query: {
// 1-首检报表 2-抛光报表 3-包装报表 4-总报表
reportType: 1,
// 报表类别 0-工单统计 1-工单统计 2-Top3缺陷数 3-Top10零件合格数
chartType: 2,
// 报表类别
chartType: 3,
// 时间类型 0-自定义 1-本月 2-本日 3-本周 4-本季度 5-本年
timeType: 1,
timeType: 3,
startTime: '',
endTime: '',
Partnumber: '',

87
src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/business/近一周缺陷率top3.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<div @click="getData" v-loading="loading" style="width: 100%;height: 100%;" ref="chartRef"></div>
</template>
<script>
import * as echarts from 'echarts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([CanvasRenderer]);
import theme from '../theme/dark.json';
echarts.registerTheme('theme', theme);
import { GetFQCQualityOptions } from '@/api/echarts/index.js'
export default {
name: 'Top3缺陷零件',
data() {
return {
chartRef: null,
loading: false,
chart: null,
query: {
// 1-首检报表 2-抛光报表 3-包装报表 4-总报表
reportType: 1,
// 报表类别
chartType: 1,
// 时间类型 0-自定义 1-本月 2-本日 3-本周 4-本季度 5-本年
timeType: 1,
startTime: '',
endTime: '',
Partnumber: '',
Description: ''
},
// 基础options配置
options: {
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
data: [],
axisLabel: {
width: '100px',
overflow: 'break'
},
nameTextStyle: {
fontSize: 20
}
},
grid: {
// 减少右侧空白
left: '260px',
},
series: []
}
};
},
methods: {
setOptions(options) {
this.chart && this.chart.setOption(options);
},
initChart() {
this.chart = echarts.init(this.$refs.chartRef, 'theme');
this.setOptions(this.options);
this.getData();
},
resizeChart() {
this.chart && this.chart.resize();
},
getData() {
this.loading = true;
GetFQCQualityOptions(this.query).then(res => {
if (res.code === 200) {
this.setOptions(res.data);
this.loading = false;
}
})
}
},
mounted() {
this.initChart();
window.addEventListener('resize', this.resizeChart);
},
destroyed() {
window.removeEventListener('resize', this.resizeChart);
},
};
</script>

87
src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/business/近一周缺陷类别Top3.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<div @click="getData" v-loading="loading" style="width: 100%;height: 100%;" ref="chartRef"></div>
</template>
<script>
import * as echarts from 'echarts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([CanvasRenderer]);
import theme from '../theme/dark.json';
echarts.registerTheme('theme', theme);
import { GetFQCQualityOptions } from '@/api/echarts/index.js'
export default {
name: 'Top3缺陷零件',
data() {
return {
chartRef: null,
loading: false,
chart: null,
query: {
// 1-首检报表 2-抛光报表 3-包装报表 4-总报表
reportType: 1,
// 报表类别
chartType: 2,
// 时间类型 0-自定义 1-本月 2-本日 3-本周 4-本季度 5-本年
timeType: 1,
startTime: '',
endTime: '',
Partnumber: '',
Description: ''
},
// 基础options配置
options: {
xAxis: {
type: 'value',
},
yAxis: {
type: 'category',
data: [],
axisLabel: {
width: '100px',
overflow: 'break'
},
nameTextStyle: {
fontSize: 20
}
},
grid: {
// 减少右侧空白
left: '260px',
},
series: []
}
};
},
methods: {
setOptions(options) {
this.chart && this.chart.setOption(options);
},
initChart() {
this.chart = echarts.init(this.$refs.chartRef, 'theme');
this.setOptions(this.options);
this.getData();
},
resizeChart() {
this.chart && this.chart.resize();
},
getData() {
this.loading = true;
GetFQCQualityOptions(this.query).then(res => {
if (res.code === 200) {
this.setOptions(res.data);
this.loading = false;
}
})
}
},
mounted() {
this.initChart();
window.addEventListener('resize', this.resizeChart);
},
destroyed() {
window.removeEventListener('resize', this.resizeChart);
},
};
</script>

6
src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/theme/dark.json
View File

@@ -45,6 +45,12 @@
"smooth": false
},
"bar": {
"label": {
"show": true,
"color": "#ffffff",
"fontSize": "16",
"overflow": "break"
},
"itemStyle": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"

4
src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/index.css
View File

@@ -56,8 +56,8 @@
.card-1 {
padding-top: 50px;
padding-left: 10px;
padding-right: 10px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
width: 33%;
height: 400px;

23
src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/index.vue
View File

@@ -12,23 +12,24 @@
</div>
</div>
<div class="row">
<dv-border-box-11 class="card-1" title="昨日工单统计">
<dv-border-box-11 class="card-1" title="近一周缺陷率Top3(%)">
<barChart1></barChart1>
</dv-border-box-11>
<dv-border-box-11 class="card-1" title="本周工单统计">
<dv-border-box-11 class="card-1" title="近一周缺陷类别Top3">
<barChart2></barChart2>
</dv-border-box-11>
<dv-border-box-11 class="card-1" title="Top3缺陷零件">
<Top3缺陷零件></Top3缺陷零件>
<dv-border-box-11 class="card-1" title="近一周缺陷最多零件Top3">
<pieChart1>
</pieChart1>
</dv-border-box-11>
</div>
<div class="row">
<div class="card-2">
<dv-border-box-11 title="本月工单统计">
<dv-border-box-11 title="近一月废品率趋势">
</dv-border-box-11>
</div>
<dv-border-box-11 class="card-1" title="Top10零件合格数">
<dv-border-box-11 class="card-1" title="近一周废品率趋势">
</dv-border-box-11>
</div>
</div>
@@ -37,9 +38,11 @@
<script>
import kbHeader from './components/kbHeader.vue';
import kbTime from './components/kbTime.vue';
import Top3缺陷零件 from './charts/business/Top3缺陷零件.vue';
import pieChart1 from './charts/business/近一周缺陷最多零件top3.vue';
import barChart1 from './charts/business/近一周缺陷率top3.vue';
import barChart2 from './charts/business/近一周缺陷类别Top3.vue';
export default {
components: { kbHeader, kbTime, Top3缺陷零件 },
components: { kbHeader, kbTime, pieChart1, barChart1, barChart2 },
data() {
return {
screenWidth: null,