|
|
@@ -11,8 +11,11 @@ |
|
|
|
<TotalGraph :summary-list="summaryList" /> |
|
|
|
</DetailGraph> |
|
|
|
<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据"> |
|
|
|
<LineGraph /> |
|
|
|
</DetailGraph> |
|
|
|
<LineGraph |
|
|
|
:x-props="lineData.xProps" |
|
|
|
:legend="legend" |
|
|
|
:series="lineData.list.map(buildSeries)" /> |
|
|
|
</DetailGraph> |
|
|
|
<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" /> |
|
|
|
<DetailGraph id="dg4" key="dg4" ref="dg4" /> --> |
|
|
|
</div> |
|
|
@@ -21,7 +24,7 @@ |
|
|
|
<script> |
|
|
|
import DetailGraph from './components/detailGraph.vue'; |
|
|
|
import TotalGraph from './components/graphs/total.vue'; |
|
|
|
import LineGraph from './components/graphs/line.vue' |
|
|
|
import LineGraph from './components/graphs/line.vue'; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'GraphPage', |
|
|
@@ -31,12 +34,45 @@ export default { |
|
|
|
type: Array, |
|
|
|
default: () => [], |
|
|
|
}, |
|
|
|
lineData: { |
|
|
|
type: Object, |
|
|
|
default: () => ({}), |
|
|
|
}, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return {}; |
|
|
|
return { |
|
|
|
legend: [], |
|
|
|
}; |
|
|
|
}, |
|
|
|
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> |
|
|
|
|
|
|
|