From 81c4af0cc8dda00d57ce1dc8777d0dd0a50f86f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98937886381=E2=80=99?= <‘937886381@qq.com’>
Date: Wed, 3 Jul 2024 16:28:41 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/copilot/components/BarChartBase.vue | 57 +++++++++----
.../copilot/components/ftoBarChartBase.vue | 59 +++++++++----
.../components/sub/bar/BarChartChipOEE.vue | 49 ++++++++---
.../components/sub/bar/BarChartChipTrans.vue | 53 ++++++++----
.../components/sub/chip/ChipRateItem.vue | 4 +-
.../factoryData/components/BarChartBase.vue | 3 +-
.../components/BarChartChipOEE.vue | 8 +-
.../copilot/factoryData/components/Order.vue | 7 +-
.../factoryData/components/ProdMonitor.vue | 2 +-
.../copilot/factoryData/components/button.vue | 4 +-
.../factoryData/components/leftContainer.vue | 7 +-
.../factoryData/components/rightContainer.vue | 3 +-
src/views/copilot/factoryData/index.vue | 2 +-
src/views/dashboard/charts/ChipYieldChart.vue | 83 ++++++++++++++-----
src/views/dashboard/charts/LeftChartBase.vue | 36 ++++----
src/views/dashboard/charts/RightChartBase.vue | 33 ++++----
src/views/produce/data/lineChart.vue | 10 ++-
.../components/produceLineYieldBarTarget.vue | 8 +-
src/views/report/produceConversion.vue | 8 +-
19 files changed, 290 insertions(+), 146 deletions(-)
diff --git a/src/views/copilot/components/BarChartBase.vue b/src/views/copilot/components/BarChartBase.vue
index 0707453..633ad01 100644
--- a/src/views/copilot/components/BarChartBase.vue
+++ b/src/views/copilot/components/BarChartBase.vue
@@ -62,7 +62,32 @@ export default {
top: "15%",
containLabel: true,
},
- tooltip: {},
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ // type: "cross",
+ crossStyle: {
+ color: "rgba(237,237,237,0.5)",
+ },
+ },
+ extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
+ backgroundColor: '#001829',
+ borderColor: '#001829',
+ formatter: params => {
+ console.log('params', params)
+ var res = `${params[0].axisValueLabel}`;
+ for (var i = 0, l = params.length; i < l; i++) {
+ let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+ // console.log(item.color, color);
+ res +=
+ "
" +
+ `` +
+ `${params[i].seriesName}` +
+ `${params[i].value ? params[i].value + '片' : 0 + '片'}`;
+ }
+ return res;
+ },
+ },
xAxis: {
axisTick: {
show: false,
@@ -188,13 +213,13 @@ export default {
this.canvasReset()
},
isFullscreen(val) {
- this.actualOptions.series.map((item) => {
+ this.options.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
- this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
- this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
- this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
- this.initChart(this.actualOptions);
+ this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
+ this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
+ this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+ this.initChart(this.options);
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
@@ -209,14 +234,14 @@ export default {
this.initChart(this.options);
return;
}
- const actualOptions = JSON.parse(JSON.stringify(this.options));
- console.log('actualOptions', this.options)
- actualOptions.series[0].data = val[0].data;
- actualOptions.series[0].name = val[0].name;
- actualOptions.series[1].data = val?.[1]?.data || [];
- actualOptions.series[1].name = val?.[1]?.name || "";
- this.actualOptions = actualOptions;
- this.initChart(actualOptions);
+ // const actualOptions = JSON.parse(JSON.stringify(this.options));
+ // console.log('actualOptions', this.options)
+ this.options.series[0].data = val[0].data;
+ this.options.series[0].name = val[0].name;
+ this.options.series[1].data = val?.[1]?.data || [];
+ this.options.series[1].name = val?.[1]?.name || "";
+ // this.actualOptions = actualOptions;
+ this.initChart(this.options);
},
},
mounted() {
@@ -225,7 +250,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
- this.actualOptions = this.options
+ // this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@@ -249,7 +274,7 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.chart);
- this.chart.setOption(this.actualOptions);
+ this.chart.setOption(this.options);
},
},
};
diff --git a/src/views/copilot/components/ftoBarChartBase.vue b/src/views/copilot/components/ftoBarChartBase.vue
index 5021f78..ccf405e 100644
--- a/src/views/copilot/components/ftoBarChartBase.vue
+++ b/src/views/copilot/components/ftoBarChartBase.vue
@@ -1,7 +1,7 @@
@@ -63,7 +63,32 @@ export default {
top: "15%",
containLabel: true,
},
- tooltip: {},
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ // type: "cross",
+ crossStyle: {
+ color: "rgba(237,237,237,0.5)",
+ },
+ },
+ extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
+ backgroundColor: '#001829',
+ borderColor: '#001829',
+ formatter: params => {
+ console.log('params', params)
+ var res = `${params[0].axisValueLabel}`;
+ for (var i = 0, l = params.length; i < l; i++) {
+ let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+ // console.log(item.color, color);
+ res +=
+ "
" +
+ `` +
+ `${params[i].seriesName}` +
+ `${params[i].value ? params[i].value + '片' : 0 + '片'}`;
+ }
+ return res;
+ },
+ },
xAxis: {
axisTick: {
show: false,
@@ -189,13 +214,13 @@ export default {
this.canvasReset()
},
isFullscreen(val) {
- this.actualOptions.series.map((item) => {
+ this.options.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
- this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
- this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
- this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
- this.initChart(this.actualOptions);
+ this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
+ this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
+ this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
+ this.initChart(this.options);
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
@@ -210,14 +235,14 @@ export default {
this.initChart(this.options);
return;
}
- const actualOptions = JSON.parse(JSON.stringify(this.options));
- console.log('actualOptions', this.options)
- actualOptions.series[0].data = val[0].data;
- actualOptions.series[0].name = val[0].name;
- actualOptions.series[1].data = val[1].data;
- actualOptions.series[1].name = val[1].name;
- this.actualOptions = actualOptions;
- this.initChart(actualOptions);
+ // const actualOptions = JSON.parse(JSON.stringify(this.options));
+ // console.log('actualOptions', this.options)
+ this.options.series[0].data = val[0].data;
+ this.options.series[0].name = val[0].name;
+ this.options.series[1].data = val[1].data;
+ this.options.series[1].name = val[1].name;
+ // this.actualOptions = actualOptions;
+ this.initChart(this.options);
},
},
mounted() {
@@ -226,7 +251,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
- this.actualOptions = this.options
+ // this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@@ -250,7 +275,7 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.ftoChart);
- this.chart.setOption(this.actualOptions);
+ this.chart.setOption(this.options);
},
},
};
diff --git a/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue b/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
index 6d7f58f..6ae8025 100644
--- a/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
+++ b/src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
@@ -1,7 +1,7 @@
@@ -62,7 +62,32 @@ export default {
top: "15%",
containLabel: true,
},
- tooltip: {},
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ // type: "cross",
+ crossStyle: {
+ color: "rgba(237,237,237,0.5)",
+ },
+ },
+ extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
+ backgroundColor: '#001829',
+ borderColor: '#001829',
+ formatter: params => {
+ console.log('params', params)
+ var res = `${params[0].axisValueLabel}`;
+ for (var i = 0, l = params.length; i < l; i++) {
+ let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+ // console.log(item.color, color);
+ res +=
+ "
" +
+ `` +
+ `${params[i].seriesName}` +
+ `${params[i].value ? params[i].value + '片' : 0 + '片'}`;
+ }
+ return res;
+ },
+ },
xAxis: {
axisTick: {
show: false,
@@ -241,7 +266,7 @@ export default {
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
- this.initChart(this.actualOptions)
+ this.initChart(this.options)
this.canvasReset()
},
series(val) {
@@ -252,14 +277,14 @@ export default {
// console.log('val', val)
const actualOptions = JSON.parse(JSON.stringify(this.options))
console.log(actualOptions)
- actualOptions.series[0].data = val[0].data;
- actualOptions.series[0].name = val[0].name;
- actualOptions.series[1].data = val?.[1]?.data;
- actualOptions.series[1].name = val?.[1]?.name;
- actualOptions.series[2].data = val?.[2]?.data || [];
- actualOptions.series[2].name = val?.[2]?.name || "";
+ this.options.series[0].data = val[0].data;
+ this.options.series[0].name = val[0].name;
+ this.options.series[1].data = val?.[1]?.data;
+ this.options.series[1].name = val?.[1]?.name;
+ this.options.series[2].data = val?.[2]?.data || [];
+ this.options.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions;
- this.initChart(actualOptions);
+ this.initChart(this.options);
},
},
mounted() {
@@ -273,7 +298,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
- this.actualOptions = this.options
+ // this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@@ -296,7 +321,7 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.oeeChart);
- this.chart.setOption(this.actualOptions);
+ this.chart.setOption(this.options);
},
},
};
diff --git a/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue b/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue
index 848f32d..4a60f44 100644
--- a/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue
+++ b/src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue
@@ -1,7 +1,7 @@
@@ -62,7 +62,32 @@ export default {
top: "15%",
containLabel: true,
},
- tooltip: {},
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ // type: "cross",
+ crossStyle: {
+ color: "rgba(237,237,237,0.5)",
+ },
+ },
+ extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
+ backgroundColor: '#001829',
+ borderColor: '#001829',
+ formatter: params => {
+ console.log('params', params)
+ var res = `${params[0].axisValueLabel}`;
+ for (var i = 0, l = params.length; i < l; i++) {
+ let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
+ // console.log(item.color, color);
+ res +=
+ "
" +
+ `` +
+ `${params[i].seriesName}` +
+ `${params[i].value ? params[i].value + '片' : 0 + '片'}`;
+ }
+ return res;
+ },
+ },
xAxis: {
axisTick: {
show: false,
@@ -241,7 +266,7 @@ export default {
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
- this.initChart(this.actualOptions)
+ this.initChart(this.options)
this.canvasReset()
},
series(val) {
@@ -250,15 +275,15 @@ export default {
return;
}
console.log(val)
- const actualOptions = JSON.parse(JSON.stringify(this.options))
- actualOptions.series[0].data = val[0].data;
- actualOptions.series[0].name = val[0].name;
- actualOptions.series[1].data = val?.[1]?.data || [];
- actualOptions.series[1].name = val?.[1]?.name || "";
- actualOptions.series[2].data = val?.[2]?.data || [];
- actualOptions.series[2].name = val?.[2]?.name || "";
- this.actualOptions = actualOptions;
- this.initChart(actualOptions);
+ // const actualOptions = JSON.parse(JSON.stringify(this.options))
+ this.options.series[0].data = val[0].data;
+ this.options.series[0].name = val[0].name;
+ this.options.series[1].data = val?.[1]?.data || [];
+ this.options.series[1].name = val?.[1]?.name || "";
+ this.options.series[2].data = val?.[2]?.data || [];
+ this.options.series[2].name = val?.[2]?.name || "";
+ // this.actualOptions = actualOptions;
+ this.initChart(this.options);
},
},
mounted() {
@@ -272,7 +297,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
- this.actualOptions = this.options
+ // this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@@ -295,7 +320,7 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.oeeChart);
- this.chart.setOption(this.actualOptions);
+ this.chart.setOption(this.options);
},
},
};
diff --git a/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue b/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue
index cee0804..40c8a68 100644
--- a/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue
+++ b/src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue
@@ -318,6 +318,8 @@ export default {
.legend-item {
margin-left: 15px;
display: flex;
+ font-size: 16px;
+ // font-weight: 600;
flex-direction: column;
// align-items: center;
align-items: flex-start;
@@ -371,8 +373,6 @@ export default {
background: #003982;
}
.legend-item__value {
- font-size: 24px;
- font-weight: 600;
}
}
diff --git a/src/views/copilot/factoryData/components/BarChartBase.vue b/src/views/copilot/factoryData/components/BarChartBase.vue
index 2e118e5..76c4f9f 100644
--- a/src/views/copilot/factoryData/components/BarChartBase.vue
+++ b/src/views/copilot/factoryData/components/BarChartBase.vue
@@ -80,7 +80,7 @@ export default {
res +=
`` +
`${params[0].axisValueLabel}` +
- `${params[i].value + '片'}`;
+ `${params[i].value ? params[i].value + '片' : 0 + '片'}`;
}
return res;
},
@@ -117,6 +117,7 @@ export default {
yAxis: {
type: "value",
name: "单位/片",
+ position: 'left',
nameTextStyle: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
diff --git a/src/views/copilot/factoryData/components/BarChartChipOEE.vue b/src/views/copilot/factoryData/components/BarChartChipOEE.vue
index 513c740..de0191e 100644
--- a/src/views/copilot/factoryData/components/BarChartChipOEE.vue
+++ b/src/views/copilot/factoryData/components/BarChartChipOEE.vue
@@ -1,7 +1,7 @@
@@ -110,7 +110,7 @@ export default {
"
" +
`` +
`${params[i].seriesName}` +
- `${params[i].value + '片'}`;
+ `${params[i].value ? params[i].value + '片' : 0 + '片'}`;
}
return res;
},
@@ -132,6 +132,7 @@ export default {
},
yAxis: {
name: "单位/片",
+ position: 'left',
nameTextStyle: {
color: "#fff",
fontSize: 12,
@@ -337,6 +338,7 @@ export default {