mt-fe-group/yudao-init
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

projects/mescc/zhp #82

Merged
juzi merged 2 commits from projects/mescc/zhp into projects/mescc/develop 2024-07-03 16:59:10 +08:00
Conversation 0 Commits 2 Files Changed 19 +286 -143
19 changed files with 286 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/views/copilot/components/BarChartBase.vue
View File

@ -62,7 +62,32 @@ export default {
top: "15%", top: "15%",
containLabel: true, 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 = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
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 +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
xAxis: { xAxis: {
axisTick: { axisTick: {
show: false, show: false,
@ -188,13 +213,13 @@ export default {
this.canvasReset() this.canvasReset()
}, },
isFullscreen(val) { isFullscreen(val) {
this.actualOptions.series.map((item) => { this.options.series.map((item) => {
item.barWidth = val ? 18 : 12; item.barWidth = val ? 18 : 12;
}); });
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions); this.initChart(this.options);
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12; // item.barWidth = val ? 18 : 12;
// }); // });
@ -209,14 +234,14 @@ export default {
this.initChart(this.options); this.initChart(this.options);
return; return;
} }
const actualOptions = JSON.parse(JSON.stringify(this.options)); // const actualOptions = JSON.parse(JSON.stringify(this.options));
console.log('actualOptions', this.options) // console.log('actualOptions', this.options)
actualOptions.series[0].data = val[0].data; this.options.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name; this.options.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data || []; this.options.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || ""; this.options.series[1].name = val?.[1]?.name || "";
this.actualOptions = actualOptions; // this.actualOptions = actualOptions;
this.initChart(actualOptions); this.initChart(this.options);
}, },
}, },
mounted() { mounted() {
@ -225,7 +250,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen; this.isFullscreen = screenfull.isFullscreen;
}); });
} }
this.actualOptions = this.options // this.actualOptions = this.options
this.canvasReset(); this.canvasReset();
window.addEventListener("resize", this.canvasReset); window.addEventListener("resize", this.canvasReset);
}, },
@ -249,7 +274,7 @@ export default {
this.chart.dispose(); this.chart.dispose();
} }
this.chart = echarts.init(this.$refs.chart); this.chart = echarts.init(this.$refs.chart);
this.chart.setOption(this.actualOptions); this.chart.setOption(this.options);
}, },
}, },
}; };

59
src/views/copilot/components/ftoBarChartBase.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-23 15:49:14 * @Date: 2024-05-23 15:49:14
* @LastEditTime: 2024-06-04 08:54:10 * @LastEditTime: 2024-07-03 14:08:52
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -63,7 +63,32 @@ export default {
top: "15%", top: "15%",
containLabel: true, 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 = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
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 +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
xAxis: { xAxis: {
axisTick: { axisTick: {
show: false, show: false,
@ -189,13 +214,13 @@ export default {
this.canvasReset() this.canvasReset()
}, },
isFullscreen(val) { isFullscreen(val) {
this.actualOptions.series.map((item) => { this.options.series.map((item) => {
item.barWidth = val ? 18 : 12; item.barWidth = val ? 18 : 12;
}); });
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions); this.initChart(this.options);
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12; // item.barWidth = val ? 18 : 12;
// }); // });
@ -210,14 +235,14 @@ export default {
this.initChart(this.options); this.initChart(this.options);
return; return;
} }
const actualOptions = JSON.parse(JSON.stringify(this.options)); // const actualOptions = JSON.parse(JSON.stringify(this.options));
console.log('actualOptions', this.options) // console.log('actualOptions', this.options)
actualOptions.series[0].data = val[0].data; this.options.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name; this.options.series[0].name = val[0].name;
actualOptions.series[1].data = val[1].data; this.options.series[1].data = val[1].data;
actualOptions.series[1].name = val[1].name; this.options.series[1].name = val[1].name;
this.actualOptions = actualOptions; // this.actualOptions = actualOptions;
this.initChart(actualOptions); this.initChart(this.options);
}, },
}, },
mounted() { mounted() {
@ -226,7 +251,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen; this.isFullscreen = screenfull.isFullscreen;
}); });
} }
this.actualOptions = this.options // this.actualOptions = this.options
this.canvasReset(); this.canvasReset();
window.addEventListener("resize", this.canvasReset); window.addEventListener("resize", this.canvasReset);
}, },
@ -250,7 +275,7 @@ export default {
this.chart.dispose(); this.chart.dispose();
} }
this.chart = echarts.init(this.$refs.ftoChart); this.chart = echarts.init(this.$refs.ftoChart);
this.chart.setOption(this.actualOptions); this.chart.setOption(this.options);
}, },
}, },
}; };

49
src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-07 13:22:43 * @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-06-17 09:22:17 * @LastEditTime: 2024-07-03 14:08:44
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -62,7 +62,32 @@ export default {
top: "15%", top: "15%",
containLabel: true, 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 = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
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 +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
xAxis: { xAxis: {
axisTick: { axisTick: {
show: false, show: false,
@ -241,7 +266,7 @@ export default {
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions) this.initChart(this.options)
this.canvasReset() this.canvasReset()
}, },
series(val) { series(val) {
@ -252,14 +277,14 @@ export default {
// console.log('val', val) // console.log('val', val)
const actualOptions = JSON.parse(JSON.stringify(this.options)) const actualOptions = JSON.parse(JSON.stringify(this.options))
console.log(actualOptions) console.log(actualOptions)
actualOptions.series[0].data = val[0].data; this.options.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name; this.options.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data; this.options.series[1].data = val?.[1]?.data;
actualOptions.series[1].name = val?.[1]?.name; this.options.series[1].name = val?.[1]?.name;
actualOptions.series[2].data = val?.[2]?.data || []; this.options.series[2].data = val?.[2]?.data || [];
actualOptions.series[2].name = val?.[2]?.name || ""; this.options.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions; this.actualOptions = actualOptions;
this.initChart(actualOptions); this.initChart(this.options);
}, },
}, },
mounted() { mounted() {
@ -273,7 +298,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen; this.isFullscreen = screenfull.isFullscreen;
}); });
} }
this.actualOptions = this.options // this.actualOptions = this.options
this.canvasReset(); this.canvasReset();
window.addEventListener("resize", this.canvasReset); window.addEventListener("resize", this.canvasReset);
}, },
@ -296,7 +321,7 @@ export default {
this.chart.dispose(); this.chart.dispose();
} }
this.chart = echarts.init(this.$refs.oeeChart); this.chart = echarts.init(this.$refs.oeeChart);
this.chart.setOption(this.actualOptions); this.chart.setOption(this.options);
}, },
}, },
}; };

53
src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-23 15:50:44 * @Date: 2024-05-23 15:50:44
* @LastEditTime: 2024-06-17 09:23:39 * @LastEditTime: 2024-07-03 14:08:12
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -62,7 +62,32 @@ export default {
top: "15%", top: "15%",
containLabel: true, 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 = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
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 +=
"<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
},
xAxis: { xAxis: {
axisTick: { axisTick: {
show: false, show: false,
@ -241,7 +266,7 @@ export default {
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions) this.initChart(this.options)
this.canvasReset() this.canvasReset()
}, },
series(val) { series(val) {
@ -250,15 +275,15 @@ export default {
return; return;
} }
console.log(val) console.log(val)
const actualOptions = JSON.parse(JSON.stringify(this.options)) // const actualOptions = JSON.parse(JSON.stringify(this.options))
actualOptions.series[0].data = val[0].data; this.options.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name; this.options.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data || []; this.options.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || ""; this.options.series[1].name = val?.[1]?.name || "";
actualOptions.series[2].data = val?.[2]?.data || []; this.options.series[2].data = val?.[2]?.data || [];
actualOptions.series[2].name = val?.[2]?.name || ""; this.options.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions; // this.actualOptions = actualOptions;
this.initChart(actualOptions); this.initChart(this.options);
}, },
}, },
mounted() { mounted() {
@ -272,7 +297,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen; this.isFullscreen = screenfull.isFullscreen;
}); });
} }
this.actualOptions = this.options // this.actualOptions = this.options
this.canvasReset(); this.canvasReset();
window.addEventListener("resize", this.canvasReset); window.addEventListener("resize", this.canvasReset);
}, },
@ -295,7 +320,7 @@ export default {
this.chart.dispose(); this.chart.dispose();
} }
this.chart = echarts.init(this.$refs.oeeChart); this.chart = echarts.init(this.$refs.oeeChart);
this.chart.setOption(this.actualOptions); this.chart.setOption(this.options);
}, },
}, },
}; };

4
src/views/copilot/efficiency/components/sub/chip/ChipRateItem.vue
View File

@ -318,6 +318,8 @@ export default {
.legend-item { .legend-item {
margin-left: 15px; margin-left: 15px;
display: flex; display: flex;
font-size: 16px;
// font-weight: 600;
flex-direction: column; flex-direction: column;
// align-items: center; // align-items: center;
align-items: flex-start; align-items: flex-start;
@ -371,8 +373,6 @@ export default {
background: #003982; background: #003982;
} }
.legend-item__value { .legend-item__value {
font-size: 24px;
font-weight: 600;
} }
} }
</style> </style>

3
src/views/copilot/factoryData/components/BarChartBase.vue
View File

@ -80,7 +80,7 @@ export default {
res += res +=
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` + `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value + '片'}</span>`; `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
} }
return res; return res;
}, },
@ -117,6 +117,7 @@ export default {
yAxis: { yAxis: {
type: "value", type: "value",
name: "单位/片", name: "单位/片",
position: 'left',
nameTextStyle: { nameTextStyle: {
color: "rgba(255, 255, 255, 0.7)", color: "rgba(255, 255, 255, 0.7)",
fontSize: 12, fontSize: 12,

8
src/views/copilot/factoryData/components/BarChartChipOEE.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-30 08:58:39 * @Date: 2024-05-30 08:58:39
* @LastEditTime: 2024-07-02 10:53:34 * @LastEditTime: 2024-07-03 14:10:06
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -110,7 +110,7 @@ export default {
"<br/>" + "<br/>" +
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` + `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value + '片'}</span>`; `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
} }
return res; return res;
}, },
@ -132,6 +132,7 @@ export default {
}, },
yAxis: { yAxis: {
name: "单位/片", name: "单位/片",
position: 'left',
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
@ -337,6 +338,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.bar-chart-base { .bar-chart-base {
// position: relative; // position: relative;
@ -350,7 +352,7 @@ export default {
position: relative; position: relative;
// font-size: 12px; // font-size: 12px;
margin-right:1.2vw; margin-right:1.2vw;
color: #DFF1FE;
&::before { &::before {
content: ""; content: "";
display: inline-block; display: inline-block;

7
src/views/copilot/factoryData/components/Order.vue
View File

@ -40,6 +40,7 @@ export default {
evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)", evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
data: [], data: [],
rowNum: 12, rowNum: 12,
fontSize:14,
waitTime: 3000, waitTime: 3000,
columnWidth: [150], columnWidth: [150],
align: ["left"], align: ["left"],
@ -113,19 +114,19 @@ export default {
`<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || "" `<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
}</span>`, }</span>`,
`<span style="display:inline-block;width:45px;">${this.prodOrder[i].productionProgress `<span style="display:inline-block;width:45px;">${this.prodOrder[i].productionProgress
? this.prodOrder[i].productionProgress.toFixed(0) + "%" ? this.prodOrder[i].productionProgress.toFixed(0) * 100 + "%"
: "0%" : "0%"
}</span> }</span>
<div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;"> <div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20"> <svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
<circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/> <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
<circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${this.prodOrder[i].productionProgress <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${this.prodOrder[i].productionProgress
? this.prodOrder[i].productionProgress.toFixed(0) * ? this.prodOrder[i].productionProgress.toFixed(0) *100 *
37.68 * 37.68 *
0.01 + 0.01 +
"," + "," +
(1 - (1 -
this.prodOrder[i].productionProgress.toFixed(0) * 0.01) * this.prodOrder[i].productionProgress.toFixed(0) * 0.01) * 100 *
37.68 37.68
: 0 + "," + 37.68 : 0 + "," + 37.68
}"/> }"/>

2
src/views/copilot/factoryData/components/ProdMonitor.vue
View File

@ -249,7 +249,7 @@ export default {
// width: 5vw; // width: 5vw;
color: #FFFFFF; color: #FFFFFF;
line-height: 24px; line-height: 24px;
text-align: left; // text-align: left;
font-style: normal; font-style: normal;
display: inline-block; display: inline-block;
} }

4
src/views/copilot/factoryData/components/button.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-06 14:22:56 * @Date: 2024-06-06 14:22:56
* @LastEditTime: 2024-06-07 10:53:39 * @LastEditTime: 2024-07-02 13:54:08
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -62,7 +62,7 @@ button {
font-size: 16px; font-size: 16px;
color: #FFFFFF; color: #FFFFFF;
line-height: 22px; line-height: 22px;
letter-spacing: 5px; /* letter-spacing: 5px; */
text-align: center; text-align: center;
font-style: normal; font-style: normal;
letter-spacing: 10px; letter-spacing: 10px;

7
src/views/copilot/factoryData/components/leftContainer.vue
View File

@ -116,7 +116,12 @@ export default {
border-radius: 2px; border-radius: 2px;
left: 8%; left: 8%;
bottom: 0; bottom: 0;
background: linear-gradient(to right, #024798, transparent); background: radial-gradient(
circle at center,
#024798 2%,
#024798 30%,
transparent
);
z-index: 0; z-index: 0;
} }

3
src/views/copilot/factoryData/components/rightContainer.vue
View File

@ -79,14 +79,13 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 100%;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
box-shadow: inset 0 0 20px 1px #fff1; box-shadow: inset 0 0 20px 1px #fff1;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;

2
src/views/copilot/factoryData/index.vue
View File

@ -196,7 +196,7 @@ export default {
gap: 16px; gap: 16px;
.flex { .flex {
display: flex; display: flex;
gap: 20px; gap: 16px;
flex: 1; flex: 1;
} }
.top > div, .top > div,

83
src/views/dashboard/charts/ChipYieldChart.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-04-28 13:42:51 * @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-06-14 09:03:26 * @LastEditTime: 2024-07-03 15:56:48
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -53,7 +53,32 @@ export default {
top: 0, top: 0,
containLabel: true, containLabel: true,
}, },
tooltip: {}, tooltip: {
trigger: "item",
// 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 = ``;
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 +=
// `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
console.log('res',res)
return res;
},
},
title: { title: {
text: "0%", text: "0%",
left: "48%", left: "48%",
@ -223,40 +248,49 @@ export default {
actualOptions() { actualOptions() {
console.log('this.output.current / this.output.target', this.output.current/this.output.target); console.log('this.output.current / this.output.target', this.output.current/this.output.target);
const year = new Date().getFullYear() const year = new Date().getFullYear()
const options = JSON.parse(JSON.stringify(this.options)); const options = this.options
// console.log('options', options); // console.log('options', options);
// 标题 // 标题
if (!this.output.target) options.title.text = "0%"; if (!this.output.target && !this.output.current) options.title.text = "0%";
else else if (!this.output.target && this.output.current) options.title.text = "100%";
options.title.text = else options.title.text =
((this.output.current / this.output.target).toFixed(2)) * 100 + "%"; ((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
// 外环 // 外环
if ( if (
this.output.current == this.output.target && this.output.current == this.output.target &&
this.output.current == 0 this.output.current == 0
) { ) {
options.series[1].data[0].value = 0; this.options.series[1].data[0].value = 0;
options.series[1].data[1].value = 1; this.options.series[1].data[1].value = 1;
options.series[1].data[0].tooltip.formatter = year + '累计完成:0'; this.options.series[1].data[0].tooltip.formatter =
options.series[1].data[1].tooltip.formatter = year + '累计完成:0'; `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
} else { } else {
options.series[1].data[0].value = this.output.current; this.options.series[1].data[0].value = this.output.current;
options.series[1].data[1].value = this.options.series[1].data[1].value =
this.output.target - this.output.current; this.output.target - this.output.current;
options.series[1].data[0].tooltip.formatter = year + '累计完成:' + this.output.current; this.options.series[1].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
options.series[1].data[1].tooltip.formatter = year + '累计完成:' + this.output.current; `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`;
this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`;
} }
// 内环 // 内环
if (this.output.previous == 0) { if (this.output.previous == 0) {
options.series[2].data[0].value = 0; this.options.series[2].data[0].value = 0;
options.series[2].data[1].value = 1; this.options.series[2].data[1].value = 1;
options.series[2].data[0].tooltip.formatter = year-1 + '累计完成:' + 0; this.options.series[2].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
options.series[2].data[1].tooltip.formatter = year-1 + '累计完成:' + 0; `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
} else { } else {
options.series[2].data[0].value = this.output.previous; this.options.series[2].data[0].value = this.output.previous;
options.series[2].data[1].value = 0; this.options.series[2].data[1].value = 0;
options.series[2].data[0].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous; this.options.series[2].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
options.series[2].data[1].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous; `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`;
this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year - 1 + '累计完成'}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`;
} }
console.log('options', options); console.log('options', options);
return options; return options;
@ -274,6 +308,9 @@ export default {
factory(val) { factory(val) {
this.initOptions(this.actualOptions); this.initOptions(this.actualOptions);
}, },
actualOptions() {
this.initOptions(this.actualOptions);
}
}, },
mounted() { mounted() {
console.log("mounted", this.actualOptions); console.log("mounted", this.actualOptions);

36
src/views/dashboard/charts/LeftChartBase.vue
View File

@ -73,27 +73,23 @@ export default {
color: "rgba(237,237,237,0.5)", color: "rgba(237,237,237,0.5)",
}, },
}, },
// backgroundColor: '#000000', extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
// textStyle: { backgroundColor: '#001829',
// color: '#ffff' borderColor: '#001829',
// }
formatter: params => { formatter: params => {
// console.log(params); console.log('params', params)
// 获取xAxis data中的数据 var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>` for (var i = 0, l = params.length; i < l; i++) {
params.forEach(item => { let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
let color = item.color.colorStops ? item.color.colorStops[0].color : '' // console.log(item.color, color);
console.log(item.color, color); res +=
dataStr += `<div> "<br/>" +
<div style="margin: 0 8px;"> `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color.colorStops[0].color};"></span> `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
<span>${item.seriesName}</span> `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
<span style="float:right;color:#000000;margin-left:20px;">${item.data}</span> }
</div> return res;
</div>` },
})
return dataStr
}
}, },
xAxis: { xAxis: {
axisTick: { axisTick: {

33
src/views/dashboard/charts/RightChartBase.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-04-28 13:42:51 * @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-06-28 09:28:56 * @LastEditTime: 2024-07-03 14:13:59
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -79,22 +79,23 @@ export default {
color: "rgba(237,237,237,0.5)", 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 => { formatter: params => {
// 获取xAxis data中的数据 console.log('params', params)
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>` var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
params.forEach(item => { for (var i = 0, l = params.length; i < l; i++) {
let color = Object.prototype.toString.call(item.color) == "[object String]" ? item.color : item.color.colorStops ? item.color.colorStops[0].color : '' 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); // console.log(item.color, color);
dataStr += `<div> res +=
<div style="margin: 0 8px;"> "<br/>" +
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${color};"></span> `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
<span>${item.seriesName}</span> `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
<span style="float:right;color:#000000;margin-left:20px;">${item.data}</span> `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
</div> }
</div>` return res;
}) },
return dataStr
}
}, },
xAxis: { xAxis: {
axisTick: { axisTick: {

3
src/views/produce/data/lineChart.vue
View File

@ -111,6 +111,7 @@ export default {
<div style="width: 60px; text-align: right">${factoryListabbr[1]}</div> <div style="width: 60px; text-align: right">${factoryListabbr[1]}</div>
</div>` </div>`
const newArray = params.map(p => { const newArray = params.map(p => {
console.log(factoryListabbr[p.seriesName.split('-')[1]], p.seriesName.split('-')[0])
return { return {
glass: p.seriesName.split('-')[0], // 玻璃类型 glass: p.seriesName.split('-')[0], // 玻璃类型
factoryName: factoryListabbr[p.seriesName.split('-')[1]], // 工厂名称 factoryName: factoryListabbr[p.seriesName.split('-')[1]], // 工厂名称
@ -156,7 +157,7 @@ export default {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
name: '单位：个' name: '单位：片'
} }
], ],
grid: { grid: {

8
src/views/report/components/produceLineYieldBarTarget.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-21 09:05:14 * @Date: 2024-06-21 09:05:14
* @LastEditTime: 2024-07-02 08:33:22 * @LastEditTime: 2024-07-03 16:07:42
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -51,7 +51,7 @@ export default {
}, },
}, },
formatter: function (params) { formatter: function (params) {
// console.log('params', params) console.log('params', params)
let arr = [] let arr = []
var res = ``; var res = ``;
// for (var i = 0, l = params.length; i < l; i++) { // for (var i = 0, l = params.length; i < l; i++) {
@ -64,7 +64,7 @@ export default {
? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%" ? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%"
: params[0].name === "转化效率" : params[0].name === "转化效率"
? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%" ? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%"
: params[0].seriesName.search('总功率') != -1 : params[0].axisValueLabel.search('总功率') != -1
? (params[0].value ? params[0].value : 0) + "MW" ? (params[0].value ? params[0].value : 0) + "MW"
: (params[0].value ? params[0].value : 0) + "片" : (params[0].value ? params[0].value : 0) + "片"
}</span>`; }</span>`;
@ -78,7 +78,7 @@ export default {
? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%" ? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%"
: params[1].name === "转化效率" : params[1].name === "转化效率"
? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%" ? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%"
: params[1].seriesName.search('总功率') != -1 : params[1].axisValueLabel.search('总功率') != -1
? (params[1].value ? params[1].value : 0) + "MW" ? (params[1].value ? params[1].value : 0) + "MW"
: (params[1].value ? params[1].value : 0) + "片" : (params[1].value ? params[1].value : 0) + "片"
}</span>`; }</span>`;

8
src/views/report/produceConversion.vue
View File

@ -215,7 +215,7 @@ export default {
barWidth: 20, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [0, -16],
color: "#68C483", color: "#68C483",
formatter: function (params) { formatter: function (params) {
return params.value return params.value
@ -230,7 +230,7 @@ export default {
barWidth: 20, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-18, -16], position: [0, -16],
color: "#68C483", color: "#68C483",
formatter: function (params) { formatter: function (params) {
return params.value return params.value
@ -290,7 +290,7 @@ export default {
barWidth: 20, barWidth: 20,
label: { label: {
show: true, show: true,
position: [-20, -16], position: [-0, -16],
color: "#68C483", color: "#68C483",
formatter: function (params) { formatter: function (params) {
return params.value.toFixed(2) return params.value.toFixed(2)
@ -305,7 +305,7 @@ export default {
barWidth: 20, barWidth: 20,
label: { label: {
show: true, show: true,
position: [10, -16], position: [0, -16],
color: "#288AFF", color: "#288AFF",
formatter: function (params) { formatter: function (params) {
return params.value.toFixed(2) return params.value.toFixed(2)