Compare commits

..

No commits in common. "165722d67d6c4f7e9746d4b33788c01e288978ca" and "db113cdba955899aa3cdf8668412c3c9acef3ea4" have entirely different histories.

19 changed files with 143 additions and 286 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>
return res; </div>
}, </div>`
})
return dataStr
}
}, },
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>
return res; </div>`
}, })
return dataStr
}
}, },
xAxis: { xAxis: {
axisTick: { axisTick: {

View File

@ -111,7 +111,6 @@ 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]], //
@ -157,7 +156,7 @@ export default {
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
name: '单位:' name: '单位:'
} }
], ],
grid: { grid: {

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)