TODO: fix graphPage build*()

This commit is contained in:
lb 2023-08-07 17:05:09 +08:00
parent 6852bc8c85
commit 4c829d21f5
3 changed files with 80 additions and 31 deletions

View File

@ -15,33 +15,42 @@ import * as echarts from 'echarts';
export default { export default {
name: 'LineDataChart', name: 'LineDataChart',
components: {}, components: {},
props: {}, props: {
xProps: {
type: Array,
default: () => [],
},
legend: {
type: Array,
default: () => [],
}
},
data() { data() {
return { return {
chart: null, chart: null,
inspectionContents: [ // inspectionContents: [
'检测内容1', // '1',
'检测内容2', // '2',
'检测内容3', // '3',
'检测内容4', // '4',
'检测内容5', // '5',
'检测内容6', // '6',
'检测内容7', // '7',
'检测内容8', // '8',
'检测总数', // '',
'比例%', // '%',
], // ],
xProps: [ // xProps: [
'产线1', // '线1',
'产线2', // '线2',
'产线3', // '线3',
'产线4', // '线4',
'产线5', // '线5',
'产线6', // '线6',
'产线7', // '线7',
'产线8', // '线8',
'产线9', // '线9',
], // ],
series: [ series: [
{ {
name: '检测内容1', name: '检测内容1',
@ -106,6 +115,7 @@ export default {
this.setOption(); this.setOption();
}, },
setOption(option) { setOption(option) {
console.log("legend", this.legend)
const defaultOption = { const defaultOption = {
// title: { // title: {
// text: '线', // text: '线',
@ -121,7 +131,7 @@ export default {
trigger: 'axis', trigger: 'axis',
}, },
legend: { legend: {
data: this.inspectionContents, data: this.legend,
top: '5%', top: '5%',
icon: 'circle' icon: 'circle'
}, },

View File

@ -11,8 +11,11 @@
<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
</DetailGraph> :x-props="lineData.xProps"
:legend="legend"
:series="lineData.list.map(buildSeries)" />
</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" /> -->
</div> </div>
@ -21,7 +24,7 @@
<script> <script>
import DetailGraph from './components/detailGraph.vue'; import DetailGraph from './components/detailGraph.vue';
import TotalGraph from './components/graphs/total.vue'; import TotalGraph from './components/graphs/total.vue';
import LineGraph from './components/graphs/line.vue' import LineGraph from './components/graphs/line.vue';
export default { export default {
name: 'GraphPage', name: 'GraphPage',
@ -31,12 +34,45 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
lineData: {
type: Object,
default: () => ({}),
},
}, },
data() { data() {
return {}; return {
legend: [],
};
}, },
computed: {}, computed: {},
methods: {}, methods: {
buildSeries(item) {
if (!this.legend.length) this.buildLegend();
const data = [];
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,
type: 'line',
data: data,
});
return {
name: item.inspectionContent,
type: 'line',
data: data,
};
},
buildLegend() {
this.legend = this.lineData.list
.map((item) => item.inspectionContent)
.sort();
// this.legend.push('', '%')
console.log('buliding legend', this.legend);
},
},
}; };
</script> </script>

View File

@ -33,7 +33,10 @@
</base-table> </base-table>
</template> </template>
<GraphPage v-else :summary-list="summaryList" /> <GraphPage
v-else
:summary-list="summaryList"
:line-data="{ list: list, xProps: dynamicProps.map((v) => v.prop) }" />
</transition> </transition>
<!-- todo: 数据总览用弹窗包裹的 table 实现 --> <!-- todo: 数据总览用弹窗包裹的 table 实现 -->