mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 检测统计数据

Browse Source
This commit is contained in:
lb 2023-08-08 10:16:53 +08:00
parent 4c829d21f5
commit ccfc4eacba
2 changed files with 93 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

154
src/views/quality/monitoring/qualityStatistics/components/graphs/line.vue
View File

@ -16,15 +16,19 @@ export default {
name: 'LineDataChart', name: 'LineDataChart',
components: {}, components: {},
props: { props: {
xProps: { xProps: {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
legend: { legend: {
type: Array, type: Array,
default: () => [], default: () => [],
} },
}, series: {
type: Array,
default: () => [],
},
},
data() { data() {
return { return {
chart: null, chart: null,
@ -51,89 +55,50 @@ export default {
// '产线8', // '产线8',
// '产线9', // '产线9',
// ], // ],
series: [ // series: [
{ // {
name: '检测内容1', // name: 'a',
type: 'line', // type: 'line',
data: [120, 132, 101, 134, 90, 230, 210, 120, 132], // data: [120, 132, 101, 134, 90, 230, 210, 120, 132],
}, // },
{ // {
name: '检测内容2', // name: 'lkj',
type: 'line', // type: 'line',
data: [220, 182, 191, 234, 290, 330, 310, 220, 182], // data: [220, 182, 191, 234, 290, 330, 310, 220, 182],
}, // },
{ // {
name: '检测内容3', // name: '测试11',
type: 'line', // type: 'line',
data: [150, 232, 201, 154, 190, 330, 410, 150, 232], // data: [150, 232, 201, 154, 190, 330, 410, 150, 232],
}, // },
{ // {
name: '检测内容4', // name: '测试22',
type: 'line', // type: 'line',
data: [320, 332, 301, 334, 390, 330, 320, 332, 301], // data: [320, 332, 301, 334, 390, 330, 320, 332, 301],
}, // },
{ // ],
name: '检测内容5',
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320, 932, 901],
},
{
name: '检测内容6',
type: 'line',
data: [920, 932, 901, 934, 1290, 1330, 1320, 932, 901],
},
{
name: '检测内容7',
type: 'line',
data: [1020, 932, 901, 934, 1290, 1330, 1320, 932, 901],
},
{
name: '检测内容8',
type: 'line',
data: [1120, 932, 901, 934, 1290, 1330, 1320, 932, 901],
},
{
name: '检测总数',
type: 'line',
data: [1220, 932, 901, 934, 1290, 1330, 1320, 932, 901],
},
{
name: '比例%',
type: 'line',
data: [1320, 932, 901, 934, 1290, 1330, 1320, 932, 901],
},
],
}; };
}, },
computed: {}, computed: {
mounted() { config() {
this.init(); return {
},
methods: {
init() {
if (!this.chart) this.chart = echarts.init(this.$refs['line-chart']);
this.setOption();
},
setOption(option) {
console.log("legend", this.legend)
const defaultOption = {
// title: { // title: {
// text: '折线图', // text: '折线图',
// }, // },
grid: { grid: {
top: '24%', top: '24%',
left: '3%', left: '3%',
right: '5%', right: '5%',
bottom: '5%', bottom: '5%',
containLabel: true, containLabel: true,
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
}, },
legend: { legend: {
data: this.legend, data: this.legend,
top: '5%', top: '5%',
icon: 'circle' icon: 'circle',
}, },
// toolbox: { // toolbox: {
// feature: { // feature: {
@ -148,9 +113,30 @@ export default {
yAxis: { yAxis: {
type: 'value', type: 'value',
}, },
series: this.series series: this.series,
}; };
this.chart.setOption(defaultOption); },
},
mounted() {
this.init();
},
watch: {
config(val) {
this.$nextTick(() => {
this.init();
});
},
},
methods: {
init() {
if (!this.chart) this.chart = echarts.init(this.$refs['line-chart']);
this.$nextTick(() => {
this.setOption();
});
},
setOption() {
this.chart.setOption(this.config);
}, },
}, },
}; };

44
src/views/quality/monitoring/qualityStatistics/graphPage.vue
View File

@ -11,10 +11,7 @@
<TotalGraph :summary-list="summaryList" /> <TotalGraph :summary-list="summaryList" />
</DetailGraph> </DetailGraph>
<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据"> <DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
<LineGraph <LineGraph :x-props="lineData.xProps" :legend="legend" :series="series" />
:x-props="lineData.xProps"
:legend="legend"
:series="lineData.list.map(buildSeries)" />
</DetailGraph> </DetailGraph>
<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" /> <!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
<DetailGraph id="dg4" key="dg4" ref="dg4" /> --> <DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
@ -42,35 +39,40 @@ export default {
data() { data() {
return { return {
legend: [], legend: [],
series: [],
}; };
}, },
computed: {}, mounted() {
this.buildLegend();
this.$nextTick(() => {
this.series = this.lineData.list.map(this.buildSeries);
console.log('this.series', this.series);
});
},
methods: { methods: {
buildSeries(item) { buildSeries(item) {
if (!this.legend.length) this.buildLegend(); console.log('this.list', this.lineData.list, this.lineData.xProps);
const data = []; const seriesItem = {
this.legend.forEach((key) => {
console.log('key item.key', item, key, item[key]);
if (item[key] == null) item[key] = null;
data.push(item[key]);
});
console.log('buildSeries', {
name: item.inspectionContent, name: item.inspectionContent,
type: 'line', type: 'line',
data: data, data: [],
});
return {
name: item.inspectionContent,
type: 'line',
data: data,
}; };
this.lineData.xProps.forEach((prop) => {
if (prop in item) {
seriesItem.data.push(item[prop]);
} else {
seriesItem.data.push(null);
}
});
return seriesItem;
}, },
buildLegend() { buildLegend() {
this.legend = this.lineData.list this.legend = this.lineData.list
.map((item) => item.inspectionContent) .map((item) => item.inspectionContent)
.sort(); .sort();
// this.legend.push('检测总数', '比例%')
console.log('buliding legend', this.legend);
}, },
}, },
}; };