projects/mescc/zhp
into projects/mescc/develop
2 months ago
@@ -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); | |||
}, | |||
}, | |||
}; | |||
@@ -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); | |||
}, | |||
}, | |||
}; | |||
@@ -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); | |||
}, | |||
}, | |||
}; | |||
@@ -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); | |||
}, | |||
}, | |||
}; | |||
@@ -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> | |||
@@ -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, | |||
@@ -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; | |||
@@ -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 | |||
}"/> | |||
@@ -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; | |||
} | |||
@@ -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; | |||
@@ -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; | |||
} | |||
@@ -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; | |||
@@ -196,7 +196,7 @@ export default { | |||
gap: 16px; | |||
.flex { | |||
display: flex; | |||
gap: 20px; | |||
gap: 16px; | |||
flex: 1; | |||
} | |||
.top > div, | |||
@@ -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 = | |||
((this.output.current / this.output.target).toFixed(2)) * 100 + "%"; | |||
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); | |||
@@ -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: { | |||
@@ -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: { | |||
@@ -111,6 +111,7 @@ export default { | |||
<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]], // 工厂名称 | |||
@@ -156,7 +157,7 @@ export default { | |||
yAxis: [ | |||
{ | |||
type: 'value', | |||
name: '单位:个' | |||
name: '单位:片' | |||
} | |||
], | |||
grid: { | |||
@@ -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>`; | |||
@@ -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) | |||