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

lb #19

Merged
g7hoo merged 80 commits from lb into test 2023-09-11 15:05:16 +08:00
Conversation 0 Commits 80 Files Changed 89 +93 -105
2 changed files with 93 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ccfc4eacba - Show all commits

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

@ -16,15 +16,19 @@ export default {
name: 'LineDataChart',
components: {},
props: {
xProps: {
type: Array,
default: () => [],
},
legend: {
type: Array,
default: () => [],
}
},
xProps: {
type: Array,
default: () => [],
},
legend: {
type: Array,
default: () => [],
},
series: {
type: Array,
default: () => [],
},
},
data() {
return {
chart: null,
@ -51,89 +55,50 @@ export default {
// '产线8',
// '产线9',
// ],
series: [
{
name: '检测内容1',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210, 120, 132],
},
{
name: '检测内容2',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310, 220, 182],
},
{
name: '检测内容3',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410, 150, 232],
},
{
name: '检测内容4',
type: 'line',
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],
},
],
// series: [
// {
// name: 'a',
// type: 'line',
// data: [120, 132, 101, 134, 90, 230, 210, 120, 132],
// },
// {
// name: 'lkj',
// type: 'line',
// data: [220, 182, 191, 234, 290, 330, 310, 220, 182],
// },
// {
// name: '测试11',
// type: 'line',
// data: [150, 232, 201, 154, 190, 330, 410, 150, 232],
// },
// {
// name: '测试22',
// type: 'line',
// data: [320, 332, 301, 334, 390, 330, 320, 332, 301],
// },
// ],
};
},
computed: {},
mounted() {
this.init();
},
methods: {
init() {
if (!this.chart) this.chart = echarts.init(this.$refs['line-chart']);
this.setOption();
},
setOption(option) {
console.log("legend", this.legend)
const defaultOption = {
computed: {
config() {
return {
// title: {
// text: '折线图',
// },
grid: {
top: '24%',
left: '3%',
right: '5%',
bottom: '5%',
containLabel: true,
},
grid: {
top: '24%',
left: '3%',
right: '5%',
bottom: '5%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
},
legend: {
data: this.legend,
top: '5%',
icon: 'circle'
top: '5%',
icon: 'circle',
},
// toolbox: {
// feature: {
@ -148,9 +113,30 @@ export default {
yAxis: {
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" />
</DetailGraph>
<DetailGraph id="dg2" key="dg2" ref="dg2" title="检测内容数据">
<LineGraph
:x-props="lineData.xProps"
:legend="legend"
:series="lineData.list.map(buildSeries)" />
<LineGraph :x-props="lineData.xProps" :legend="legend" :series="series" />
</DetailGraph>
<!-- <DetailGraph id="dg3" key="dg3" ref="dg3" />
<DetailGraph id="dg4" key="dg4" ref="dg4" /> -->
@ -42,35 +39,40 @@ export default {
data() {
return {
legend: [],
series: [],
};
},
computed: {},
mounted() {
this.buildLegend();
this.$nextTick(() => {
this.series = this.lineData.list.map(this.buildSeries);
console.log('this.series', this.series);
});
},
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', {
console.log('this.list', this.lineData.list, this.lineData.xProps);
const seriesItem = {
name: item.inspectionContent,
type: 'line',
data: data,
});
return {
name: item.inspectionContent,
type: 'line',
data: data,
data: [],
};
this.lineData.xProps.forEach((prop) => {
if (prop in item) {
seriesItem.data.push(item[prop]);
} else {
seriesItem.data.push(null);
}
});
return seriesItem;
},
buildLegend() {
this.legend = this.lineData.list
.map((item) => item.inspectionContent)
.sort();
// this.legend.push('检测总数', '比例%')
console.log('buliding legend', this.legend);
},
},
};