Compare commits

...

6 Commits

Author SHA1 Message Date
‘937886381’
486cffd64e 解决冲突 2024-07-03 16:30:14 +08:00
‘937886381’
81c4af0cc8 修改ui 2024-07-03 16:28:41 +08:00
db113cdba9 Merge pull request 'projects/mescc/dy' (#81) from projects/mescc/dy into projects/mescc/develop
Some checks are pending
continuous-integration/drone/push Build is pending
Reviewed-on: #81
2024-07-03 08:52:56 +08:00
helloDy
af52db4a37 Merge branch 'projects/mescc/develop' into projects/mescc/dy 2024-07-03 08:52:07 +08:00
helloDy
e0ca435014 ui 2024-07-03 08:51:32 +08:00
affe8ec026 Merge pull request 'projects/mescc/zhp' (#80) from projects/mescc/zhp into projects/mescc/develop
All checks were successful
continuous-integration/drone/push Build is passing
Reviewed-on: #80
2024-07-02 13:42:35 +08:00
22 changed files with 333 additions and 161 deletions

View File

@ -62,7 +62,32 @@ export default {
top: "15%",
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<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: {
axisTick: {
show: false,
@ -188,13 +213,13 @@ export default {
this.canvasReset()
},
isFullscreen(val) {
this.actualOptions.series.map((item) => {
this.options.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions);
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.options);
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
@ -209,14 +234,14 @@ export default {
this.initChart(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options));
console.log('actualOptions', this.options)
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || "";
this.actualOptions = actualOptions;
this.initChart(actualOptions);
// const actualOptions = JSON.parse(JSON.stringify(this.options));
// console.log('actualOptions', this.options)
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data || [];
this.options.series[1].name = val?.[1]?.name || "";
// this.actualOptions = actualOptions;
this.initChart(this.options);
},
},
mounted() {
@ -225,7 +250,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
// this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@ -249,7 +274,7 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.chart);
this.chart.setOption(this.actualOptions);
this.chart.setOption(this.options);
},
},
};

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:49:14
* @LastEditTime: 2024-06-04 08:54:10
* @LastEditTime: 2024-07-03 14:08:52
* @LastEditors: zhp
* @Description:
-->
@ -63,7 +63,32 @@ export default {
top: "15%",
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<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: {
axisTick: {
show: false,
@ -189,13 +214,13 @@ export default {
this.canvasReset()
},
isFullscreen(val) {
this.actualOptions.series.map((item) => {
this.options.series.map((item) => {
item.barWidth = val ? 18 : 12;
});
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions);
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.options);
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
@ -210,14 +235,14 @@ export default {
this.initChart(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options));
console.log('actualOptions', this.options)
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val[1].data;
actualOptions.series[1].name = val[1].name;
this.actualOptions = actualOptions;
this.initChart(actualOptions);
// const actualOptions = JSON.parse(JSON.stringify(this.options));
// console.log('actualOptions', this.options)
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val[1].data;
this.options.series[1].name = val[1].name;
// this.actualOptions = actualOptions;
this.initChart(this.options);
},
},
mounted() {
@ -226,7 +251,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
// this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@ -250,7 +275,7 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.ftoChart);
this.chart.setOption(this.actualOptions);
this.chart.setOption(this.options);
},
},
};

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-06-17 09:22:17
* @LastEditTime: 2024-07-03 14:08:44
* @LastEditors: zhp
* @Description:
-->
@ -62,7 +62,32 @@ export default {
top: "15%",
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<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: {
axisTick: {
show: false,
@ -241,7 +266,7 @@ export default {
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions)
this.initChart(this.options)
this.canvasReset()
},
series(val) {
@ -252,14 +277,14 @@ export default {
// console.log('val', val)
const actualOptions = JSON.parse(JSON.stringify(this.options))
console.log(actualOptions)
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data;
actualOptions.series[1].name = val?.[1]?.name;
actualOptions.series[2].data = val?.[2]?.data || [];
actualOptions.series[2].name = val?.[2]?.name || "";
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data;
this.options.series[1].name = val?.[1]?.name;
this.options.series[2].data = val?.[2]?.data || [];
this.options.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions;
this.initChart(actualOptions);
this.initChart(this.options);
},
},
mounted() {
@ -273,7 +298,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
// this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@ -296,7 +321,7 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.oeeChart);
this.chart.setOption(this.actualOptions);
this.chart.setOption(this.options);
},
},
};

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:50:44
* @LastEditTime: 2024-06-17 09:23:39
* @LastEditTime: 2024-07-03 14:08:12
* @LastEditors: zhp
* @Description:
-->
@ -62,7 +62,32 @@ export default {
top: "15%",
containLabel: true,
},
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
// type: "cross",
crossStyle: {
color: "rgba(237,237,237,0.5)",
},
},
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => {
console.log('params', params)
var res = `<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: {
axisTick: {
show: false,
@ -241,7 +266,7 @@ export default {
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.actualOptions)
this.initChart(this.options)
this.canvasReset()
},
series(val) {
@ -250,15 +275,15 @@ export default {
return;
}
console.log(val)
const actualOptions = JSON.parse(JSON.stringify(this.options))
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val?.[1]?.data || [];
actualOptions.series[1].name = val?.[1]?.name || "";
actualOptions.series[2].data = val?.[2]?.data || [];
actualOptions.series[2].name = val?.[2]?.name || "";
this.actualOptions = actualOptions;
this.initChart(actualOptions);
// const actualOptions = JSON.parse(JSON.stringify(this.options))
this.options.series[0].data = val[0].data;
this.options.series[0].name = val[0].name;
this.options.series[1].data = val?.[1]?.data || [];
this.options.series[1].name = val?.[1]?.name || "";
this.options.series[2].data = val?.[2]?.data || [];
this.options.series[2].name = val?.[2]?.name || "";
// this.actualOptions = actualOptions;
this.initChart(this.options);
},
},
mounted() {
@ -272,7 +297,7 @@ export default {
this.isFullscreen = screenfull.isFullscreen;
});
}
this.actualOptions = this.options
// this.actualOptions = this.options
this.canvasReset();
window.addEventListener("resize", this.canvasReset);
},
@ -295,7 +320,7 @@ export default {
this.chart.dispose();
}
this.chart = echarts.init(this.$refs.oeeChart);
this.chart.setOption(this.actualOptions);
this.chart.setOption(this.options);
},
},
};

View File

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

View File

@ -80,7 +80,7 @@ export default {
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 + '片'}</span>`;
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
}
return res;
},
@ -117,6 +117,7 @@ export default {
yAxis: {
type: "value",
name: "单位/片",
position: 'left',
nameTextStyle: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,

View File

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

View File

@ -40,6 +40,7 @@ export default {
evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
data: [],
rowNum: 12,
fontSize:14,
waitTime: 3000,
columnWidth: [150],
align: ["left"],
@ -113,19 +114,19 @@ export default {
`<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
}</span>`,
`<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%"
}</span>
<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">
<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
? this.prodOrder[i].productionProgress.toFixed(0) *
? this.prodOrder[i].productionProgress.toFixed(0) *100 *
37.68 *
0.01 +
"," +
(1 -
this.prodOrder[i].productionProgress.toFixed(0) * 0.01) *
this.prodOrder[i].productionProgress.toFixed(0) * 0.01) * 100 *
37.68
: 0 + "," + 37.68
}"/>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-06-14 09:03:26
* @LastEditTime: 2024-07-03 15:56:48
* @LastEditors: zhp
* @Description:
-->
@ -53,7 +53,32 @@ export default {
top: 0,
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: {
text: "0%",
left: "48%",
@ -223,40 +248,49 @@ export default {
actualOptions() {
console.log('this.output.current / this.output.target', this.output.current/this.output.target);
const year = new Date().getFullYear()
const options = JSON.parse(JSON.stringify(this.options));
const options = this.options
// console.log('options', options);
//
if (!this.output.target) options.title.text = "0%";
else
options.title.text =
if (!this.output.target && !this.output.current) options.title.text = "0%";
else if (!this.output.target && this.output.current) options.title.text = "100%";
else options.title.text =
((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
//
if (
this.output.current == this.output.target &&
this.output.current == 0
) {
options.series[1].data[0].value = 0;
options.series[1].data[1].value = 1;
options.series[1].data[0].tooltip.formatter = year + '累计完成:0';
options.series[1].data[1].tooltip.formatter = year + '累计完成:0';
this.options.series[1].data[0].value = 0;
this.options.series[1].data[1].value = 1;
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>` +
`<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 {
options.series[1].data[0].value = this.output.current;
options.series[1].data[1].value =
this.options.series[1].data[0].value = this.output.current;
this.options.series[1].data[1].value =
this.output.target - this.output.current;
options.series[1].data[0].tooltip.formatter = year + '累计完成:' + this.output.current;
options.series[1].data[1].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>` +
`<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) {
options.series[2].data[0].value = 0;
options.series[2].data[1].value = 1;
options.series[2].data[0].tooltip.formatter = year-1 + '累计完成:' + 0;
options.series[2].data[1].tooltip.formatter = year-1 + '累计完成:' + 0;
this.options.series[2].data[0].value = 0;
this.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>` +
`<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 {
options.series[2].data[0].value = this.output.previous;
options.series[2].data[1].value = 0;
options.series[2].data[0].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
options.series[2].data[1].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
this.options.series[2].data[0].value = this.output.previous;
this.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>` +
`<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);
return options;
@ -274,6 +308,9 @@ export default {
factory(val) {
this.initOptions(this.actualOptions);
},
actualOptions() {
this.initOptions(this.actualOptions);
}
},
mounted() {
console.log("mounted", this.actualOptions);

View File

@ -73,27 +73,23 @@ export default {
color: "rgba(237,237,237,0.5)",
},
},
// backgroundColor: '#000000',
// textStyle: {
// color: '#ffff'
// }
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);
// xAxis data
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
params.forEach(item => {
let color = item.color.colorStops ? item.color.colorStops[0].color : ''
console.log(item.color, color);
dataStr += `<div>
<div style="margin: 0 8px;">
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color.colorStops[0].color};"></span>
<span>${item.seriesName}</span>
<span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
</div>
</div>`
})
return dataStr
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: {
axisTick: {

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-28 13:42:51
* @LastEditTime: 2024-06-28 09:28:56
* @LastEditTime: 2024-07-03 14:13:59
* @LastEditors: zhp
* @Description:
-->
@ -79,22 +79,23 @@ export default {
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 => {
// xAxis data
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
params.forEach(item => {
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);
dataStr += `<div>
<div style="margin: 0 8px;">
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${color};"></span>
<span>${item.seriesName}</span>
<span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
</div>
</div>`
})
return dataStr
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: {
axisTick: {

View File

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

View File

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

View File

@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-04-15 10:49:13
* @LastEditTime: 2024-06-20 16:41:48
* @LastEditTime: 2024-07-02 16:35:01
* @LastEditors: DY
* @Description:
-->
@ -691,11 +691,22 @@ export default {
};
</script>
<style scoped>
<style>
/* .blueTip { */
/* padding-bottom: 10px; */
/* } */
/* .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{
display: inline-block;
content: '';

View File

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

View File

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

View File

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