Compare commits

..

No commits in common. "486cffd64e8f7ad6ad5e2c84d17c1abd68593964" and "aa6ae82607ddd8195f2916c063ce740fe7ce7e9a" have entirely different histories.

22 changed files with 161 additions and 333 deletions

View File

@ -62,32 +62,7 @@ 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,
@ -213,13 +188,13 @@ export default {
this.canvasReset() this.canvasReset()
}, },
isFullscreen(val) { isFullscreen(val) {
this.options.series.map((item) => { this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12; item.barWidth = val ? 18 : 12;
}); });
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12; this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12; this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12; this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.options); this.initChart(this.actualOptions);
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12; // item.barWidth = val ? 18 : 12;
// }); // });
@ -234,14 +209,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)
this.options.series[0].data = val[0].data; actualOptions.series[0].data = val[0].data;
this.options.series[0].name = val[0].name; actualOptions.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data || []; actualOptions.series[1].data = val?.[1]?.data || [];
this.options.series[1].name = val?.[1]?.name || ""; actualOptions.series[1].name = val?.[1]?.name || "";
// this.actualOptions = actualOptions; this.actualOptions = actualOptions;
this.initChart(this.options); this.initChart(actualOptions);
}, },
}, },
mounted() { mounted() {
@ -250,7 +225,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);
}, },
@ -274,7 +249,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.options); this.chart.setOption(this.actualOptions);
}, },
}, },
}; };

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-07-03 14:08:52 * @LastEditTime: 2024-06-04 08:54:10
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -63,32 +63,7 @@ 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,
@ -214,13 +189,13 @@ export default {
this.canvasReset() this.canvasReset()
}, },
isFullscreen(val) { isFullscreen(val) {
this.options.series.map((item) => { this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12; item.barWidth = val ? 18 : 12;
}); });
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12; this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12; this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12; this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.options); this.initChart(this.actualOptions);
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12; // item.barWidth = val ? 18 : 12;
// }); // });
@ -235,14 +210,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)
this.options.series[0].data = val[0].data; actualOptions.series[0].data = val[0].data;
this.options.series[0].name = val[0].name; actualOptions.series[0].name = val[0].name;
this.options.series[1].data = val[1].data; actualOptions.series[1].data = val[1].data;
this.options.series[1].name = val[1].name; actualOptions.series[1].name = val[1].name;
// this.actualOptions = actualOptions; this.actualOptions = actualOptions;
this.initChart(this.options); this.initChart(actualOptions);
}, },
}, },
mounted() { mounted() {
@ -251,7 +226,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);
}, },
@ -275,7 +250,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.options); this.chart.setOption(this.actualOptions);
}, },
}, },
}; };

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-07-03 14:08:44 * @LastEditTime: 2024-06-17 09:22:17
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -62,32 +62,7 @@ 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,
@ -266,7 +241,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.options) this.initChart(this.actualOptions)
this.canvasReset() this.canvasReset()
}, },
series(val) { series(val) {
@ -277,14 +252,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)
this.options.series[0].data = val[0].data; actualOptions.series[0].data = val[0].data;
this.options.series[0].name = val[0].name; actualOptions.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data; actualOptions.series[1].data = val?.[1]?.data;
this.options.series[1].name = val?.[1]?.name; actualOptions.series[1].name = val?.[1]?.name;
this.options.series[2].data = val?.[2]?.data || []; actualOptions.series[2].data = val?.[2]?.data || [];
this.options.series[2].name = val?.[2]?.name || ""; actualOptions.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions; this.actualOptions = actualOptions;
this.initChart(this.options); this.initChart(actualOptions);
}, },
}, },
mounted() { mounted() {
@ -298,7 +273,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);
}, },
@ -321,7 +296,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.options); this.chart.setOption(this.actualOptions);
}, },
}, },
}; };

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-07-03 14:08:12 * @LastEditTime: 2024-06-17 09:23:39
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -62,32 +62,7 @@ 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,
@ -266,7 +241,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.options) this.initChart(this.actualOptions)
this.canvasReset() this.canvasReset()
}, },
series(val) { series(val) {
@ -275,15 +250,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))
this.options.series[0].data = val[0].data; actualOptions.series[0].data = val[0].data;
this.options.series[0].name = val[0].name; actualOptions.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data || []; actualOptions.series[1].data = val?.[1]?.data || [];
this.options.series[1].name = val?.[1]?.name || ""; actualOptions.series[1].name = val?.[1]?.name || "";
this.options.series[2].data = val?.[2]?.data || []; actualOptions.series[2].data = val?.[2]?.data || [];
this.options.series[2].name = val?.[2]?.name || ""; actualOptions.series[2].name = val?.[2]?.name || "";
// this.actualOptions = actualOptions; this.actualOptions = actualOptions;
this.initChart(this.options); this.initChart(actualOptions);
}, },
}, },
mounted() { mounted() {
@ -297,7 +272,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);
}, },
@ -320,7 +295,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.options); this.chart.setOption(this.actualOptions);
}, },
}, },
}; };

View File

@ -318,8 +318,6 @@ 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;
@ -373,6 +371,8 @@ export default {
background: #003982; background: #003982;
} }
.legend-item__value { .legend-item__value {
font-size: 24px;
font-weight: 600;
} }
} }
</style> </style>

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 ? params[i].value + '片' : 0 + '片'}</span>`; `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value + '片'}</span>`;
} }
return res; return res;
}, },
@ -117,7 +117,6 @@ 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,

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-03 14:10:06 * @LastEditTime: 2024-07-02 10:53:34
* @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 ? params[i].value + '片' : 0 + '片'}</span>`; `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value + '片'}</span>`;
} }
return res; return res;
}, },
@ -132,7 +132,6 @@ export default {
}, },
yAxis: { yAxis: {
name: "单位/片", name: "单位/片",
position: 'left',
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
@ -338,7 +337,6 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.bar-chart-base { .bar-chart-base {
// position: relative; // position: relative;
@ -352,7 +350,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;

View File

@ -40,7 +40,6 @@ 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"],
@ -114,19 +113,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) * 100 + "%" ? this.prodOrder[i].productionProgress.toFixed(0) + "%"
: "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) *100 * ? this.prodOrder[i].productionProgress.toFixed(0) *
37.68 * 37.68 *
0.01 + 0.01 +
"," + "," +
(1 - (1 -
this.prodOrder[i].productionProgress.toFixed(0) * 0.01) * 100 * this.prodOrder[i].productionProgress.toFixed(0) * 0.01) *
37.68 37.68
: 0 + "," + 37.68 : 0 + "," + 37.68
}"/> }"/>

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;
} }

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-07-02 13:54:08 * @LastEditTime: 2024-06-07 10:53:39
* @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;

View File

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

View File

@ -79,13 +79,14 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 100%; height: 0;
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;

View File

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

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-07-03 15:56:48 * @LastEditTime: 2024-06-14 09:03:26
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -53,32 +53,7 @@ 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%",
@ -248,49 +223,40 @@ 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 = this.options const options = JSON.parse(JSON.stringify(this.options));
// console.log('options', options); // console.log('options', options);
// //
if (!this.output.target && !this.output.current) options.title.text = "0%"; if (!this.output.target) options.title.text = "0%";
else if (!this.output.target && this.output.current) options.title.text = "100%"; else
else options.title.text = 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
) { ) {
this.options.series[1].data[0].value = 0; options.series[1].data[0].value = 0;
this.options.series[1].data[1].value = 1; options.series[1].data[1].value = 1;
this.options.series[1].data[0].tooltip.formatter = options.series[1].data[0].tooltip.formatter = year + '累计完成:0';
`<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 + '累计完成:0';
`<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 {
this.options.series[1].data[0].value = this.output.current; options.series[1].data[0].value = this.output.current;
this.options.series[1].data[1].value = options.series[1].data[1].value =
this.output.target - this.output.current; this.output.target - 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[0].tooltip.formatter = year + '累计完成:' + this.output.current;
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`; options.series[1].data[1].tooltip.formatter = year + '累计完成:' + this.output.current;
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) {
this.options.series[2].data[0].value = 0; options.series[2].data[0].value = 0;
this.options.series[2].data[1].value = 1; options.series[2].data[1].value = 1;
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[0].tooltip.formatter = year-1 + '累计完成:' + 0;
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`; options.series[2].data[1].tooltip.formatter = year-1 + '累计完成:' + 0;
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 {
this.options.series[2].data[0].value = this.output.previous; options.series[2].data[0].value = this.output.previous;
this.options.series[2].data[1].value = 0; options.series[2].data[1].value = 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[0].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`; options.series[2].data[1].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
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;
@ -308,9 +274,6 @@ 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);

View File

@ -73,23 +73,27 @@ 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: '#000000',
backgroundColor: '#001829', // textStyle: {
borderColor: '#001829', // color: '#ffff'
// }
formatter: params => { formatter: params => {
console.log('params', params) // console.log(params);
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`; // xAxis data
for (var i = 0, l = params.length; i < l; i++) { let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' params.forEach(item => {
// console.log(item.color, color); let color = item.color.colorStops ? item.color.colorStops[0].color : ''
res += console.log(item.color, color);
"<br/>" + dataStr += `<div>
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + <div style="margin: 0 8px;">
`<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;margin-right:5px;width:10px;height:10px;background-color:${item.color.colorStops[0].color};"></span>
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`; <span>${item.seriesName}</span>
<span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
</div>
</div>`
})
return dataStr
} }
return res;
},
}, },
xAxis: { xAxis: {
axisTick: { axisTick: {

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-07-03 14:13:59 * @LastEditTime: 2024-06-28 09:28:56
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -79,23 +79,22 @@ 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 => {
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 = Object.prototype.toString.call(item.color) == "[object String]" ? item.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:${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>
</div>`
})
return dataStr
} }
return res;
},
}, },
xAxis: { xAxis: {
axisTick: { axisTick: {

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-04-15 10:49:13 * @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-07-02 16:33:59 * @LastEditTime: 2024-06-27 14:56:20
* @LastEditors: DY * @LastEditors: DY
* @Description: * @Description:
--> -->
@ -16,8 +16,8 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime"> <el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime">
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="" <el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator=""
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期" :picker-options="{ }"> start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期">
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime"> <el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime">
@ -234,7 +234,7 @@ export default {
{ {
prop: 'goodRatio', prop: 'goodRatio',
label: '良品率%', label: '良品率%',
filter: (val) => val.toFixed(2) + '%' filter: (val) => val + '%'
}, },
], ],
tableData: [], tableData: [],
@ -535,23 +535,11 @@ export default {
}; };
</script> </script>
<style> <style scoped>
/* .blueTip { */ /* .blueTip { */
/* padding-bottom: 10px; */ /* padding-bottom: 10px; */
/* } */ /* } */
/* .blueTi */ /* .blueTi */
.blueTip .el-date-editor .el-range__icon {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-date {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-time {
font-size: 16px;
color: #0b58ff;
}
.blueTip::before{ .blueTip::before{
display: inline-block; display: inline-block;
content: ''; content: '';

View File

@ -2,7 +2,7 @@
* @Author: zwq * @Author: zwq
* @Date: 2022-01-21 14:43:06 * @Date: 2022-01-21 14:43:06
* @LastEditors: DY * @LastEditors: DY
* @LastEditTime: 2024-07-01 16:54:41 * @LastEditTime: 2024-06-24 11:13:48
* @Description: * @Description:
--> -->
<template> <template>
@ -74,6 +74,7 @@ export default {
}, },
methods: { methods: {
initChart(xAxis, seriesList) { initChart(xAxis, seriesList) {
console.log('2', xAxis, seriesList)
if (xAxis.length === 0) { if (xAxis.length === 0) {
this.chart.clear() this.chart.clear()
} }
@ -99,35 +100,27 @@ export default {
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: {
type: 'shadow',
color: "rgba(237,237,237,0.5)"
},
formatter: function(params) { formatter: function(params) {
let result = ` let result = `
<div style="width: 270px; display: flex"> <div style="width: 270px; display: flex">
<div style="width: 150px">${params[0].name}</div> <div style="width: 150px">${params[0].name}</div>
<div style="width: 60px; text-align: right">${factoryListabbr[0]}</div> <div style="width: 60px">${factoryListabbr[0]}</div>
<div style="width: 60px; text-align: right">${factoryListabbr[1]}</div> <div style="width: 60px">${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]], //
value: p.value, value: p.value,
name: p.name, name: p.name,
marker: p.marker, marker: p.marker
color: p.color
} }
}) })
const analyzeList = Object.groupBy(newArray, (member) => member.glass) const analyzeList = Object.groupBy(newArray, (member) => member.glass)
for (let g in analyzeList) { for (let g in analyzeList) {
// date => // date =>
let oneData = `<div style="width: 270px; display: flex"> let oneData = `<div style="width: 270px; display: flex">
<div style="width: 150px; display: flex; align-items: center"> <div style="width: 150px">${analyzeList[g][0].marker} ${g}</div>`
<div style="background-color: ${analyzeList[g][0].color}; width: 10px; height: 10px; margin-right: 5px"></div>
<div>${g}</div></div>`
for (let fac of factoryListabbr) { for (let fac of factoryListabbr) {
let goodNum = 0 let goodNum = 0
for (let ana of analyzeList[g]) { for (let ana of analyzeList[g]) {
@ -135,7 +128,7 @@ export default {
goodNum = ana.value goodNum = ana.value
} }
} }
oneData += `<div style="width: 60px; text-align: right">${goodNum}</div>` oneData += `<div style="width: 60px">${goodNum}</div>`
} }
result = result + oneData + '</div>' result = result + oneData + '</div>'
} }
@ -157,12 +150,12 @@ export default {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
name: '单位:' name: '单位:'
} }
], ],
grid: { grid: {
top: '10%', top: '10%',
left: "2%", left: "1%",
right: "5%", right: "5%",
bottom: "0%", bottom: "0%",
containLabel: true containLabel: true

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-04-15 10:49:13 * @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-07-02 16:35:01 * @LastEditTime: 2024-06-20 16:41:48
* @LastEditors: DY * @LastEditors: DY
* @Description: * @Description:
--> -->
@ -691,22 +691,11 @@ export default {
}; };
</script> </script>
<style> <style scoped>
/* .blueTip { */ /* .blueTip { */
/* padding-bottom: 10px; */ /* padding-bottom: 10px; */
/* } */ /* } */
.blueTip .el-date-editor .el-range__icon { /* .blueTi */
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-date {
font-size: 16px;
color: #0b58ff;
}
.blueTip .el-input__prefix .el-icon-time {
font-size: 16px;
color: #0b58ff;
}
.blueTip::before{ .blueTip::before{
display: inline-block; display: inline-block;
content: ''; content: '';

View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-04-15 10:49:13 * @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-07-01 17:06:29 * @LastEditTime: 2024-06-24 15:08:34
* @LastEditors: DY * @LastEditors: DY
* @Description: * @Description:
--> -->
@ -242,7 +242,7 @@ export default {
{ {
prop: 'productionProgress', prop: 'productionProgress',
label: '生产进度', label: '生产进度',
filter: (val) => (val * 100).toFixed(2) + '%' filter: (val) => (val * 100) + '%'
}, },
{ {
prop: 'orderStatus', prop: 'orderStatus',

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-03 16:07:42 * @LastEditTime: 2024-07-02 08:33:22
* @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].axisValueLabel.search('总功率') != -1 : params[0].seriesName.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].axisValueLabel.search('总功率') != -1 : params[1].seriesName.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>`;

View File

@ -215,7 +215,7 @@ export default {
barWidth: 20, barWidth: 20,
label: { label: {
show: true, show: true,
position: [0, -16], position: [-18, -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: [0, -16], position: [-18, -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: [-0, -16], position: [-20, -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: [0, -16], position: [10, -16],
color: "#288AFF", color: "#288AFF",
formatter: function (params) { formatter: function (params) {
return params.value.toFixed(2) return params.value.toFixed(2)