修改ui
This commit is contained in:
		| @@ -62,7 +62,32 @@ export default { | |||||||
|           top: "15%", |           top: "15%", | ||||||
|           containLabel: true, |           containLabel: true, | ||||||
|         }, |         }, | ||||||
|         tooltip: {}, |         tooltip: { | ||||||
|  |           trigger: "axis", | ||||||
|  |           axisPointer: { | ||||||
|  |             // type: "cross", | ||||||
|  |             crossStyle: { | ||||||
|  |               color: "rgba(237,237,237,0.5)", | ||||||
|  |             }, | ||||||
|  |           }, | ||||||
|  |           extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', | ||||||
|  |           backgroundColor: '#001829', | ||||||
|  |           borderColor: '#001829', | ||||||
|  |           formatter: params => { | ||||||
|  |             console.log('params', params) | ||||||
|  |             var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`; | ||||||
|  |             for (var i = 0, l = params.length; i < l; i++) { | ||||||
|  |               let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' | ||||||
|  |               // console.log(item.color, color); | ||||||
|  |               res += | ||||||
|  |                 "<br/>" + | ||||||
|  |                 `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + | ||||||
|  |                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` + | ||||||
|  |                 `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`; | ||||||
|  |             } | ||||||
|  |             return res; | ||||||
|  |           }, | ||||||
|  |         }, | ||||||
|         xAxis: { |         xAxis: { | ||||||
|           axisTick: { |           axisTick: { | ||||||
|             show: false, |             show: false, | ||||||
| @@ -188,13 +213,13 @@ export default { | |||||||
|       this.canvasReset() |       this.canvasReset() | ||||||
|     }, |     }, | ||||||
|     isFullscreen(val) { |     isFullscreen(val) { | ||||||
|       this.actualOptions.series.map((item) => { |       this.options.series.map((item) => { | ||||||
|         item.barWidth = val ? 18 : 12; |         item.barWidth = val ? 18 : 12; | ||||||
|       }); |       }); | ||||||
|       this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; |       this.options.xAxis.axisLabel.fontSize = val ? 18 : 12; | ||||||
|       this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; |       this.options.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||||
|       this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; |       this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||||
|       this.initChart(this.actualOptions); |       this.initChart(this.options); | ||||||
|       // this.actualOptions.series.map((item) => { |       // this.actualOptions.series.map((item) => { | ||||||
|       //   item.barWidth = val ? 18 : 12; |       //   item.barWidth = val ? 18 : 12; | ||||||
|       // }); |       // }); | ||||||
| @@ -209,14 +234,14 @@ export default { | |||||||
|         this.initChart(this.options); |         this.initChart(this.options); | ||||||
|         return; |         return; | ||||||
|       } |       } | ||||||
|       const actualOptions = JSON.parse(JSON.stringify(this.options)); |       // const actualOptions = JSON.parse(JSON.stringify(this.options)); | ||||||
|       console.log('actualOptions', this.options) |       // console.log('actualOptions', this.options) | ||||||
|       actualOptions.series[0].data = val[0].data; |       this.options.series[0].data = val[0].data; | ||||||
|       actualOptions.series[0].name = val[0].name; |       this.options.series[0].name = val[0].name; | ||||||
|       actualOptions.series[1].data = val?.[1]?.data || []; |       this.options.series[1].data = val?.[1]?.data || []; | ||||||
|       actualOptions.series[1].name = val?.[1]?.name || ""; |       this.options.series[1].name = val?.[1]?.name || ""; | ||||||
|       this.actualOptions = actualOptions; |       // this.actualOptions = actualOptions; | ||||||
|       this.initChart(actualOptions); |       this.initChart(this.options); | ||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
|   mounted() { |   mounted() { | ||||||
| @@ -225,7 +250,7 @@ export default { | |||||||
|         this.isFullscreen = screenfull.isFullscreen; |         this.isFullscreen = screenfull.isFullscreen; | ||||||
|       }); |       }); | ||||||
|     } |     } | ||||||
|     this.actualOptions = this.options |     // this.actualOptions = this.options | ||||||
|     this.canvasReset(); |     this.canvasReset(); | ||||||
|     window.addEventListener("resize", this.canvasReset); |     window.addEventListener("resize", this.canvasReset); | ||||||
|   }, |   }, | ||||||
| @@ -249,7 +274,7 @@ export default { | |||||||
|         this.chart.dispose(); |         this.chart.dispose(); | ||||||
|       } |       } | ||||||
|       this.chart = echarts.init(this.$refs.chart); |       this.chart = echarts.init(this.$refs.chart); | ||||||
|       this.chart.setOption(this.actualOptions); |       this.chart.setOption(this.options); | ||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
|   | |||||||
| @@ -1,7 +1,7 @@ | |||||||
| <!-- | <!-- | ||||||
|  * @Author: zhp |  * @Author: zhp | ||||||
|  * @Date: 2024-05-23 15:49:14 |  * @Date: 2024-05-23 15:49:14 | ||||||
|  * @LastEditTime: 2024-06-04 08:54:10 |  * @LastEditTime: 2024-07-03 14:08:52 | ||||||
|  * @LastEditors: zhp |  * @LastEditors: zhp | ||||||
|  * @Description: |  * @Description: | ||||||
| --> | --> | ||||||
| @@ -63,7 +63,32 @@ export default { | |||||||
|           top: "15%", |           top: "15%", | ||||||
|           containLabel: true, |           containLabel: true, | ||||||
|         }, |         }, | ||||||
|         tooltip: {}, |         tooltip: { | ||||||
|  |           trigger: "axis", | ||||||
|  |           axisPointer: { | ||||||
|  |             // type: "cross", | ||||||
|  |             crossStyle: { | ||||||
|  |               color: "rgba(237,237,237,0.5)", | ||||||
|  |             }, | ||||||
|  |           }, | ||||||
|  |           extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', | ||||||
|  |           backgroundColor: '#001829', | ||||||
|  |           borderColor: '#001829', | ||||||
|  |           formatter: params => { | ||||||
|  |             console.log('params', params) | ||||||
|  |             var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`; | ||||||
|  |             for (var i = 0, l = params.length; i < l; i++) { | ||||||
|  |               let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' | ||||||
|  |               // console.log(item.color, color); | ||||||
|  |               res += | ||||||
|  |                 "<br/>" + | ||||||
|  |                 `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + | ||||||
|  |                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` + | ||||||
|  |               `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`; | ||||||
|  |             } | ||||||
|  |             return res; | ||||||
|  |           }, | ||||||
|  |         }, | ||||||
|         xAxis: { |         xAxis: { | ||||||
|           axisTick: { |           axisTick: { | ||||||
|             show: false, |             show: false, | ||||||
| @@ -189,13 +214,13 @@ export default { | |||||||
|       this.canvasReset() |       this.canvasReset() | ||||||
|     }, |     }, | ||||||
|     isFullscreen(val) { |     isFullscreen(val) { | ||||||
|       this.actualOptions.series.map((item) => { |       this.options.series.map((item) => { | ||||||
|         item.barWidth = val ? 18 : 12; |         item.barWidth = val ? 18 : 12; | ||||||
|       }); |       }); | ||||||
|       this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; |       this.options.xAxis.axisLabel.fontSize = val ? 18 : 12; | ||||||
|       this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; |       this.options.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||||
|       this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; |       this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||||
|       this.initChart(this.actualOptions); |       this.initChart(this.options); | ||||||
|       // this.actualOptions.series.map((item) => { |       // this.actualOptions.series.map((item) => { | ||||||
|       //   item.barWidth = val ? 18 : 12; |       //   item.barWidth = val ? 18 : 12; | ||||||
|       // }); |       // }); | ||||||
| @@ -210,14 +235,14 @@ export default { | |||||||
|         this.initChart(this.options); |         this.initChart(this.options); | ||||||
|         return; |         return; | ||||||
|       } |       } | ||||||
|       const actualOptions = JSON.parse(JSON.stringify(this.options)); |       // const actualOptions = JSON.parse(JSON.stringify(this.options)); | ||||||
|       console.log('actualOptions', this.options) |       // console.log('actualOptions', this.options) | ||||||
|       actualOptions.series[0].data = val[0].data; |       this.options.series[0].data = val[0].data; | ||||||
|       actualOptions.series[0].name = val[0].name; |       this.options.series[0].name = val[0].name; | ||||||
|       actualOptions.series[1].data = val[1].data; |       this.options.series[1].data = val[1].data; | ||||||
|       actualOptions.series[1].name = val[1].name; |       this.options.series[1].name = val[1].name; | ||||||
|       this.actualOptions = actualOptions; |       // this.actualOptions = actualOptions; | ||||||
|       this.initChart(actualOptions); |       this.initChart(this.options); | ||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
|   mounted() { |   mounted() { | ||||||
| @@ -226,7 +251,7 @@ export default { | |||||||
|         this.isFullscreen = screenfull.isFullscreen; |         this.isFullscreen = screenfull.isFullscreen; | ||||||
|       }); |       }); | ||||||
|     } |     } | ||||||
|     this.actualOptions = this.options |     // this.actualOptions = this.options | ||||||
|     this.canvasReset(); |     this.canvasReset(); | ||||||
|     window.addEventListener("resize", this.canvasReset); |     window.addEventListener("resize", this.canvasReset); | ||||||
|   }, |   }, | ||||||
| @@ -250,7 +275,7 @@ export default { | |||||||
|         this.chart.dispose(); |         this.chart.dispose(); | ||||||
|       } |       } | ||||||
|       this.chart = echarts.init(this.$refs.ftoChart); |       this.chart = echarts.init(this.$refs.ftoChart); | ||||||
|       this.chart.setOption(this.actualOptions); |       this.chart.setOption(this.options); | ||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
|   | |||||||
| @@ -1,7 +1,7 @@ | |||||||
| <!-- | <!-- | ||||||
|  * @Author: zhp |  * @Author: zhp | ||||||
|  * @Date: 2024-05-07 13:22:43 |  * @Date: 2024-05-07 13:22:43 | ||||||
|  * @LastEditTime: 2024-06-17 09:22:17 |  * @LastEditTime: 2024-07-03 14:08:44 | ||||||
|  * @LastEditors: zhp |  * @LastEditors: zhp | ||||||
|  * @Description: |  * @Description: | ||||||
| --> | --> | ||||||
| @@ -62,7 +62,32 @@ export default { | |||||||
|           top: "15%", |           top: "15%", | ||||||
|           containLabel: true, |           containLabel: true, | ||||||
|         }, |         }, | ||||||
|         tooltip: {}, |         tooltip: { | ||||||
|  |           trigger: "axis", | ||||||
|  |           axisPointer: { | ||||||
|  |             // type: "cross", | ||||||
|  |             crossStyle: { | ||||||
|  |               color: "rgba(237,237,237,0.5)", | ||||||
|  |             }, | ||||||
|  |           }, | ||||||
|  |           extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', | ||||||
|  |           backgroundColor: '#001829', | ||||||
|  |           borderColor: '#001829', | ||||||
|  |           formatter: params => { | ||||||
|  |             console.log('params', params) | ||||||
|  |             var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`; | ||||||
|  |             for (var i = 0, l = params.length; i < l; i++) { | ||||||
|  |               let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' | ||||||
|  |               // console.log(item.color, color); | ||||||
|  |               res += | ||||||
|  |                 "<br/>" + | ||||||
|  |                 `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + | ||||||
|  |                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` + | ||||||
|  |               `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`; | ||||||
|  |             } | ||||||
|  |             return res; | ||||||
|  |           }, | ||||||
|  |         }, | ||||||
|         xAxis: { |         xAxis: { | ||||||
|           axisTick: { |           axisTick: { | ||||||
|             show: false, |             show: false, | ||||||
| @@ -241,7 +266,7 @@ export default { | |||||||
|       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; |       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | ||||||
|       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; |       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||||
|       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; |       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||||
|       this.initChart(this.actualOptions) |       this.initChart(this.options) | ||||||
|       this.canvasReset() |       this.canvasReset() | ||||||
|     }, |     }, | ||||||
|     series(val) { |     series(val) { | ||||||
| @@ -252,14 +277,14 @@ export default { | |||||||
|       // console.log('val', val) |       // console.log('val', val) | ||||||
|       const actualOptions = JSON.parse(JSON.stringify(this.options)) |       const actualOptions = JSON.parse(JSON.stringify(this.options)) | ||||||
|       console.log(actualOptions) |       console.log(actualOptions) | ||||||
|       actualOptions.series[0].data = val[0].data; |       this.options.series[0].data = val[0].data; | ||||||
|       actualOptions.series[0].name = val[0].name; |       this.options.series[0].name = val[0].name; | ||||||
|       actualOptions.series[1].data = val?.[1]?.data; |       this.options.series[1].data = val?.[1]?.data; | ||||||
|       actualOptions.series[1].name = val?.[1]?.name; |       this.options.series[1].name = val?.[1]?.name; | ||||||
|       actualOptions.series[2].data = val?.[2]?.data || []; |       this.options.series[2].data = val?.[2]?.data || []; | ||||||
|       actualOptions.series[2].name = val?.[2]?.name || ""; |       this.options.series[2].name = val?.[2]?.name || ""; | ||||||
|       this.actualOptions = actualOptions; |       this.actualOptions = actualOptions; | ||||||
|       this.initChart(actualOptions); |       this.initChart(this.options); | ||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
|   mounted() { |   mounted() { | ||||||
| @@ -273,7 +298,7 @@ export default { | |||||||
|         this.isFullscreen = screenfull.isFullscreen; |         this.isFullscreen = screenfull.isFullscreen; | ||||||
|       }); |       }); | ||||||
|     } |     } | ||||||
|     this.actualOptions = this.options |     // this.actualOptions = this.options | ||||||
|     this.canvasReset(); |     this.canvasReset(); | ||||||
|     window.addEventListener("resize", this.canvasReset); |     window.addEventListener("resize", this.canvasReset); | ||||||
|   }, |   }, | ||||||
| @@ -296,7 +321,7 @@ export default { | |||||||
|         this.chart.dispose(); |         this.chart.dispose(); | ||||||
|       } |       } | ||||||
|       this.chart = echarts.init(this.$refs.oeeChart); |       this.chart = echarts.init(this.$refs.oeeChart); | ||||||
|       this.chart.setOption(this.actualOptions); |       this.chart.setOption(this.options); | ||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
|   | |||||||
| @@ -1,7 +1,7 @@ | |||||||
| <!-- | <!-- | ||||||
|  * @Author: zhp |  * @Author: zhp | ||||||
|  * @Date: 2024-05-23 15:50:44 |  * @Date: 2024-05-23 15:50:44 | ||||||
|  * @LastEditTime: 2024-06-17 09:23:39 |  * @LastEditTime: 2024-07-03 14:08:12 | ||||||
|  * @LastEditors: zhp |  * @LastEditors: zhp | ||||||
|  * @Description: |  * @Description: | ||||||
| --> | --> | ||||||
| @@ -62,7 +62,32 @@ export default { | |||||||
|           top: "15%", |           top: "15%", | ||||||
|           containLabel: true, |           containLabel: true, | ||||||
|         }, |         }, | ||||||
|         tooltip: {}, |         tooltip: { | ||||||
|  |           trigger: "axis", | ||||||
|  |           axisPointer: { | ||||||
|  |             // type: "cross", | ||||||
|  |             crossStyle: { | ||||||
|  |               color: "rgba(237,237,237,0.5)", | ||||||
|  |             }, | ||||||
|  |           }, | ||||||
|  |           extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', | ||||||
|  |           backgroundColor: '#001829', | ||||||
|  |           borderColor: '#001829', | ||||||
|  |           formatter: params => { | ||||||
|  |             console.log('params', params) | ||||||
|  |             var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`; | ||||||
|  |             for (var i = 0, l = params.length; i < l; i++) { | ||||||
|  |               let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' | ||||||
|  |               // console.log(item.color, color); | ||||||
|  |               res += | ||||||
|  |                 "<br/>" + | ||||||
|  |                 `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + | ||||||
|  |                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` + | ||||||
|  |               `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`; | ||||||
|  |             } | ||||||
|  |             return res; | ||||||
|  |           }, | ||||||
|  |         }, | ||||||
|         xAxis: { |         xAxis: { | ||||||
|           axisTick: { |           axisTick: { | ||||||
|             show: false, |             show: false, | ||||||
| @@ -241,7 +266,7 @@ export default { | |||||||
|       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; |       // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12; | ||||||
|       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; |       // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; | ||||||
|       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; |       // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; | ||||||
|       this.initChart(this.actualOptions) |       this.initChart(this.options) | ||||||
|       this.canvasReset() |       this.canvasReset() | ||||||
|     }, |     }, | ||||||
|     series(val) { |     series(val) { | ||||||
| @@ -250,15 +275,15 @@ export default { | |||||||
|         return; |         return; | ||||||
|       } |       } | ||||||
|       console.log(val) |       console.log(val) | ||||||
|       const actualOptions = JSON.parse(JSON.stringify(this.options)) |       // const actualOptions = JSON.parse(JSON.stringify(this.options)) | ||||||
|       actualOptions.series[0].data = val[0].data; |       this.options.series[0].data = val[0].data; | ||||||
|       actualOptions.series[0].name = val[0].name; |       this.options.series[0].name = val[0].name; | ||||||
|       actualOptions.series[1].data = val?.[1]?.data || []; |       this.options.series[1].data = val?.[1]?.data || []; | ||||||
|       actualOptions.series[1].name = val?.[1]?.name || ""; |       this.options.series[1].name = val?.[1]?.name || ""; | ||||||
|       actualOptions.series[2].data = val?.[2]?.data || []; |       this.options.series[2].data = val?.[2]?.data || []; | ||||||
|       actualOptions.series[2].name = val?.[2]?.name || ""; |       this.options.series[2].name = val?.[2]?.name || ""; | ||||||
|       this.actualOptions = actualOptions; |       // this.actualOptions = actualOptions; | ||||||
|       this.initChart(actualOptions); |       this.initChart(this.options); | ||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
|   mounted() { |   mounted() { | ||||||
| @@ -272,7 +297,7 @@ export default { | |||||||
|         this.isFullscreen = screenfull.isFullscreen; |         this.isFullscreen = screenfull.isFullscreen; | ||||||
|       }); |       }); | ||||||
|     } |     } | ||||||
|     this.actualOptions = this.options |     // this.actualOptions = this.options | ||||||
|     this.canvasReset(); |     this.canvasReset(); | ||||||
|     window.addEventListener("resize", this.canvasReset); |     window.addEventListener("resize", this.canvasReset); | ||||||
|   }, |   }, | ||||||
| @@ -295,7 +320,7 @@ export default { | |||||||
|         this.chart.dispose(); |         this.chart.dispose(); | ||||||
|       } |       } | ||||||
|       this.chart = echarts.init(this.$refs.oeeChart); |       this.chart = echarts.init(this.$refs.oeeChart); | ||||||
|       this.chart.setOption(this.actualOptions); |       this.chart.setOption(this.options); | ||||||
|     }, |     }, | ||||||
|   }, |   }, | ||||||
| }; | }; | ||||||
|   | |||||||
| @@ -318,6 +318,8 @@ export default { | |||||||
|   .legend-item { |   .legend-item { | ||||||
|     margin-left: 15px; |     margin-left: 15px; | ||||||
|     display: flex; |     display: flex; | ||||||
|  |     font-size: 16px; | ||||||
|  |     // font-weight: 600; | ||||||
|     flex-direction: column; |     flex-direction: column; | ||||||
|     // align-items: center; |     // align-items: center; | ||||||
|     align-items: flex-start; |     align-items: flex-start; | ||||||
| @@ -371,8 +373,6 @@ export default { | |||||||
|   background: #003982; |   background: #003982; | ||||||
| } | } | ||||||
|   .legend-item__value { |   .legend-item__value { | ||||||
|     font-size: 24px; |  | ||||||
|     font-weight: 600; |  | ||||||
|   } |   } | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
|   | |||||||
| @@ -80,7 +80,7 @@ export default { | |||||||
|               res += |               res += | ||||||
|                 `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + |                 `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + | ||||||
|               `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` + |               `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` + | ||||||
|               `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value + '片'}</span>`; |               `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`; | ||||||
|             } |             } | ||||||
|             return res; |             return res; | ||||||
|           }, |           }, | ||||||
| @@ -117,6 +117,7 @@ export default { | |||||||
|         yAxis: { |         yAxis: { | ||||||
|             type: "value", |             type: "value", | ||||||
|             name: "单位/片", |             name: "单位/片", | ||||||
|  |             position: 'left', | ||||||
|             nameTextStyle: { |             nameTextStyle: { | ||||||
|               color: "rgba(255, 255, 255, 0.7)", |               color: "rgba(255, 255, 255, 0.7)", | ||||||
|               fontSize: 12, |               fontSize: 12, | ||||||
|   | |||||||
| @@ -1,7 +1,7 @@ | |||||||
| <!-- | <!-- | ||||||
|  * @Author: zhp |  * @Author: zhp | ||||||
|  * @Date: 2024-05-30 08:58:39 |  * @Date: 2024-05-30 08:58:39 | ||||||
|  * @LastEditTime: 2024-07-02 10:53:34 |  * @LastEditTime: 2024-07-03 14:10:06 | ||||||
|  * @LastEditors: zhp |  * @LastEditors: zhp | ||||||
|  * @Description: |  * @Description: | ||||||
| --> | --> | ||||||
| @@ -110,7 +110,7 @@ export default { | |||||||
|                   "<br/>" + |                   "<br/>" + | ||||||
|                   `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + |                   `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + | ||||||
|                   `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` + |                   `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` + | ||||||
|                   `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value + '片'}</span>`; |                   `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`; | ||||||
|               } |               } | ||||||
|               return res; |               return res; | ||||||
|             }, |             }, | ||||||
| @@ -132,6 +132,7 @@ export default { | |||||||
|         }, |         }, | ||||||
|         yAxis: { |         yAxis: { | ||||||
|           name: "单位/片", |           name: "单位/片", | ||||||
|  |           position: 'left', | ||||||
|           nameTextStyle: { |           nameTextStyle: { | ||||||
|             color: "#fff", |             color: "#fff", | ||||||
|             fontSize: 12, |             fontSize: 12, | ||||||
| @@ -337,6 +338,7 @@ export default { | |||||||
| </script> | </script> | ||||||
|  |  | ||||||
| <style scoped lang="scss"> | <style scoped lang="scss"> | ||||||
|  |  | ||||||
| .bar-chart-base { | .bar-chart-base { | ||||||
|   // position: relative; |   // position: relative; | ||||||
|  |  | ||||||
| @@ -350,7 +352,7 @@ export default { | |||||||
|     position: relative; |     position: relative; | ||||||
|     // font-size: 12px; |     // font-size: 12px; | ||||||
|     margin-right:1.2vw; |     margin-right:1.2vw; | ||||||
|  |     color: #DFF1FE; | ||||||
|     &::before { |     &::before { | ||||||
|       content: ""; |       content: ""; | ||||||
|       display: inline-block; |       display: inline-block; | ||||||
|   | |||||||
| @@ -40,6 +40,7 @@ export default { | |||||||
|         evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)", |         evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)", | ||||||
|         data: [], |         data: [], | ||||||
|         rowNum: 12, |         rowNum: 12, | ||||||
|  |         fontSize:14, | ||||||
|         waitTime: 3000, |         waitTime: 3000, | ||||||
|         columnWidth: [150], |         columnWidth: [150], | ||||||
|         align: ["left"], |         align: ["left"], | ||||||
| @@ -113,19 +114,19 @@ export default { | |||||||
|               `<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || "" |               `<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || "" | ||||||
|               }</span>`, |               }</span>`, | ||||||
|               `<span style="display:inline-block;width:45px;">${this.prodOrder[i].productionProgress |               `<span style="display:inline-block;width:45px;">${this.prodOrder[i].productionProgress | ||||||
|                 ? this.prodOrder[i].productionProgress.toFixed(0) + "%" |                 ? this.prodOrder[i].productionProgress.toFixed(0) * 100 + "%" | ||||||
|                 : "0%" |                 : "0%" | ||||||
|               }</span> |               }</span> | ||||||
|             <div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;"> |             <div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;"> | ||||||
|             <svg xmlns="http://www.w3.org/200/svg" height="20" width="20"> |             <svg xmlns="http://www.w3.org/200/svg" height="20" width="20"> | ||||||
|               <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/> |               <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/> | ||||||
|               <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${this.prodOrder[i].productionProgress |               <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${this.prodOrder[i].productionProgress | ||||||
|                 ? this.prodOrder[i].productionProgress.toFixed(0) * |                 ? this.prodOrder[i].productionProgress.toFixed(0) *100 * | ||||||
|                 37.68 * |                 37.68 * | ||||||
|                 0.01 + |                 0.01 + | ||||||
|                 "," + |                 "," + | ||||||
|                 (1 - |                 (1 - | ||||||
|                   this.prodOrder[i].productionProgress.toFixed(0) * 0.01) * |                   this.prodOrder[i].productionProgress.toFixed(0) * 0.01) * 100 * | ||||||
|                 37.68 |                 37.68 | ||||||
|                 : 0 + "," + 37.68 |                 : 0 + "," + 37.68 | ||||||
|               }"/> |               }"/> | ||||||
|   | |||||||
| @@ -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; | ||||||
|       } |       } | ||||||
|   | |||||||
| @@ -1,7 +1,7 @@ | |||||||
| <!-- | <!-- | ||||||
|  * @Author: zhp |  * @Author: zhp | ||||||
|  * @Date: 2024-06-06 14:22:56 |  * @Date: 2024-06-06 14:22:56 | ||||||
|  * @LastEditTime: 2024-06-07 10:53:39 |  * @LastEditTime: 2024-07-02 13:54:08 | ||||||
|  * @LastEditors: zhp |  * @LastEditors: zhp | ||||||
|  * @Description: |  * @Description: | ||||||
| --> | --> | ||||||
| @@ -62,7 +62,7 @@ button { | |||||||
|   font-size: 16px; |   font-size: 16px; | ||||||
|   color: #FFFFFF; |   color: #FFFFFF; | ||||||
|   line-height: 22px; |   line-height: 22px; | ||||||
|   letter-spacing: 5px; |   /* letter-spacing: 5px; */ | ||||||
|   text-align: center; |   text-align: center; | ||||||
|   font-style: normal; |   font-style: normal; | ||||||
|   letter-spacing: 10px; |   letter-spacing: 10px; | ||||||
|   | |||||||
| @@ -116,7 +116,12 @@ export default { | |||||||
|     border-radius: 2px; |     border-radius: 2px; | ||||||
|     left: 8%; |     left: 8%; | ||||||
|     bottom: 0; |     bottom: 0; | ||||||
|     background: linear-gradient(to right, #024798, transparent); |      background: radial-gradient( | ||||||
|  |       circle at center, | ||||||
|  |       #024798 2%, | ||||||
|  |       #024798 30%, | ||||||
|  |       transparent | ||||||
|  |     ); | ||||||
|     z-index: 0; |     z-index: 0; | ||||||
|   } |   } | ||||||
|  |  | ||||||
|   | |||||||
| @@ -79,14 +79,13 @@ export default { | |||||||
|  |  | ||||||
| <style scoped lang="scss"> | <style scoped lang="scss"> | ||||||
| .copilot-container { | .copilot-container { | ||||||
|   height: 0; |   height: 100%; | ||||||
|   flex: 1; |   flex: 1; | ||||||
|   display: flex; |   display: flex; | ||||||
|   flex-direction: column; |   flex-direction: column; | ||||||
|   position: relative; |   position: relative; | ||||||
|   box-shadow: inset 0 0 20px 1px #fff1; |   box-shadow: inset 0 0 20px 1px #fff1; | ||||||
|   backdrop-filter: blur(4px); |   backdrop-filter: blur(4px); | ||||||
|  |  | ||||||
|   &::before { |   &::before { | ||||||
|     content: ""; |     content: ""; | ||||||
|     position: absolute; |     position: absolute; | ||||||
|   | |||||||
| @@ -196,7 +196,7 @@ export default { | |||||||
|     gap: 16px; |     gap: 16px; | ||||||
|     .flex { |     .flex { | ||||||
|       display: flex; |       display: flex; | ||||||
|       gap: 20px; |       gap: 16px; | ||||||
|       flex: 1; |       flex: 1; | ||||||
|     } |     } | ||||||
|     .top > div, |     .top > div, | ||||||
|   | |||||||
| @@ -1,7 +1,7 @@ | |||||||
| <!-- | <!-- | ||||||
|  * @Author: zhp |  * @Author: zhp | ||||||
|  * @Date: 2024-04-28 13:42:51 |  * @Date: 2024-04-28 13:42:51 | ||||||
|  * @LastEditTime: 2024-06-14 09:03:26 |  * @LastEditTime: 2024-07-03 15:56:48 | ||||||
|  * @LastEditors: zhp |  * @LastEditors: zhp | ||||||
|  * @Description: |  * @Description: | ||||||
| --> | --> | ||||||
| @@ -53,7 +53,32 @@ export default { | |||||||
|           top: 0, |           top: 0, | ||||||
|           containLabel: true, |           containLabel: true, | ||||||
|         }, |         }, | ||||||
|         tooltip: {}, |         tooltip: { | ||||||
|  |           trigger: "item", | ||||||
|  |           // axisPointer: { | ||||||
|  |           //   // type: "cross", | ||||||
|  |           //   crossStyle: { | ||||||
|  |           //     color: "rgba(237,237,237,0.5)", | ||||||
|  |           //   }, | ||||||
|  |           // }, | ||||||
|  |           extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', | ||||||
|  |           backgroundColor: '#001829', | ||||||
|  |           borderColor: '#001829', | ||||||
|  |           formatter: params => { | ||||||
|  |             console.log('params', params) | ||||||
|  |             var res = ``; | ||||||
|  |             for (var i = 0, l = params.length; i < l; i++) { | ||||||
|  |               let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' | ||||||
|  |               // console.log(item.color, color); | ||||||
|  |               res += | ||||||
|  |                 // `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + | ||||||
|  |                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` + | ||||||
|  |                 `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`; | ||||||
|  |             } | ||||||
|  |             console.log('res',res) | ||||||
|  |             return res; | ||||||
|  |           }, | ||||||
|  |         }, | ||||||
|         title: { |         title: { | ||||||
|           text: "0%", |           text: "0%", | ||||||
|           left: "48%", |           left: "48%", | ||||||
| @@ -223,40 +248,49 @@ export default { | |||||||
|     actualOptions() { |     actualOptions() { | ||||||
|       console.log('this.output.current / this.output.target', this.output.current/this.output.target); |       console.log('this.output.current / this.output.target', this.output.current/this.output.target); | ||||||
|       const year = new Date().getFullYear() |       const year = new Date().getFullYear() | ||||||
|       const options = JSON.parse(JSON.stringify(this.options)); |       const options = this.options | ||||||
|       // console.log('options', options); |       // console.log('options', options); | ||||||
|       // 标题 |       // 标题 | ||||||
|       if (!this.output.target) options.title.text = "0%"; |       if (!this.output.target && !this.output.current) options.title.text = "0%"; | ||||||
|       else |       else if (!this.output.target && this.output.current) options.title.text = "100%"; | ||||||
|         options.title.text = |       else options.title.text = | ||||||
|           ((this.output.current / this.output.target).toFixed(2)) * 100 + "%"; |         ((this.output.current / this.output.target).toFixed(2)) * 100 + "%"; | ||||||
|       // 外环 |       // 外环 | ||||||
|       if ( |       if ( | ||||||
|         this.output.current == this.output.target && |         this.output.current == this.output.target && | ||||||
|         this.output.current == 0 |         this.output.current == 0 | ||||||
|       ) { |       ) { | ||||||
|         options.series[1].data[0].value = 0; |         this.options.series[1].data[0].value = 0; | ||||||
|         options.series[1].data[1].value = 1; |         this.options.series[1].data[1].value = 1; | ||||||
|         options.series[1].data[0].tooltip.formatter = year + '累计完成:0'; |         this.options.series[1].data[0].tooltip.formatter = | ||||||
|         options.series[1].data[1].tooltip.formatter = year + '累计完成:0'; |           `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` + | ||||||
|  |           `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`; | ||||||
|  |         this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` + | ||||||
|  |           `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`; | ||||||
|       } else { |       } else { | ||||||
|         options.series[1].data[0].value = this.output.current; |         this.options.series[1].data[0].value = this.output.current; | ||||||
|         options.series[1].data[1].value = |         this.options.series[1].data[1].value = | ||||||
|           this.output.target - this.output.current; |           this.output.target - this.output.current; | ||||||
|         options.series[1].data[0].tooltip.formatter = year + '累计完成:' + this.output.current; |         this.options.series[1].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` + | ||||||
|         options.series[1].data[1].tooltip.formatter = year + '累计完成:' + this.output.current; |           `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`; | ||||||
|  |         this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` + | ||||||
|  |           `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`; | ||||||
|       } |       } | ||||||
|       // 内环 |       // 内环 | ||||||
|       if (this.output.previous == 0) { |       if (this.output.previous == 0) { | ||||||
|         options.series[2].data[0].value = 0; |         this.options.series[2].data[0].value = 0; | ||||||
|         options.series[2].data[1].value = 1; |         this.options.series[2].data[1].value = 1; | ||||||
|         options.series[2].data[0].tooltip.formatter = year-1 + '累计完成:' + 0; |         this.options.series[2].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` + | ||||||
|         options.series[2].data[1].tooltip.formatter = year-1 + '累计完成:' + 0; |           `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`; | ||||||
|  |         this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` + | ||||||
|  |           `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`; | ||||||
|       } else { |       } else { | ||||||
|         options.series[2].data[0].value = this.output.previous; |         this.options.series[2].data[0].value = this.output.previous; | ||||||
|         options.series[2].data[1].value = 0; |         this.options.series[2].data[1].value = 0; | ||||||
|         options.series[2].data[0].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous; |         this.options.series[2].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` + | ||||||
|         options.series[2].data[1].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous; |           `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`; | ||||||
|  |         this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year - 1 + '累计完成'}</span>` + | ||||||
|  |           `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`; | ||||||
|       } |       } | ||||||
|       console.log('options', options); |       console.log('options', options); | ||||||
|       return options; |       return options; | ||||||
| @@ -274,6 +308,9 @@ export default { | |||||||
|     factory(val) { |     factory(val) { | ||||||
|       this.initOptions(this.actualOptions); |       this.initOptions(this.actualOptions); | ||||||
|     }, |     }, | ||||||
|  |     actualOptions() { | ||||||
|  |       this.initOptions(this.actualOptions); | ||||||
|  |     } | ||||||
|   }, |   }, | ||||||
|   mounted() { |   mounted() { | ||||||
|     console.log("mounted", this.actualOptions); |     console.log("mounted", this.actualOptions); | ||||||
|   | |||||||
| @@ -73,27 +73,23 @@ export default { | |||||||
|               color: "rgba(237,237,237,0.5)", |               color: "rgba(237,237,237,0.5)", | ||||||
|             }, |             }, | ||||||
|           }, |           }, | ||||||
|           // backgroundColor: '#000000', |           extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', | ||||||
|           // textStyle: { |           backgroundColor: '#001829', | ||||||
|           //   color: '#ffff' |           borderColor: '#001829', | ||||||
|           // } |  | ||||||
|           formatter: params => { |           formatter: params => { | ||||||
|             // console.log(params); |             console.log('params', params) | ||||||
|             // 获取xAxis data中的数据 |             var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`; | ||||||
|             let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>` |             for (var i = 0, l = params.length; i < l; i++) { | ||||||
|             params.forEach(item => { |               let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' | ||||||
|               let color = item.color.colorStops ? item.color.colorStops[0].color : '' |               // console.log(item.color, color); | ||||||
|               console.log(item.color, color); |               res += | ||||||
|               dataStr += `<div> |                 "<br/>" + | ||||||
|           <div style="margin: 0 8px;"> |                 `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + | ||||||
|             <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color.colorStops[0].color};"></span> |                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` + | ||||||
|             <span>${item.seriesName}</span> |                 `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`; | ||||||
|             <span style="float:right;color:#000000;margin-left:20px;">${item.data}</span> |             } | ||||||
|           </div> |             return res; | ||||||
|         </div>` |           }, | ||||||
|             }) |  | ||||||
|             return dataStr |  | ||||||
|           } |  | ||||||
|         }, |         }, | ||||||
|         xAxis: { |         xAxis: { | ||||||
|           axisTick: { |           axisTick: { | ||||||
|   | |||||||
| @@ -1,7 +1,7 @@ | |||||||
| <!-- | <!-- | ||||||
|  * @Author: zhp |  * @Author: zhp | ||||||
|  * @Date: 2024-04-28 13:42:51 |  * @Date: 2024-04-28 13:42:51 | ||||||
|  * @LastEditTime: 2024-06-28 09:28:56 |  * @LastEditTime: 2024-07-03 14:13:59 | ||||||
|  * @LastEditors: zhp |  * @LastEditors: zhp | ||||||
|  * @Description: |  * @Description: | ||||||
| --> | --> | ||||||
| @@ -79,22 +79,23 @@ export default { | |||||||
|               color: "rgba(237,237,237,0.5)", |               color: "rgba(237,237,237,0.5)", | ||||||
|             }, |             }, | ||||||
|           }, |           }, | ||||||
|  |           extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);', | ||||||
|  |           backgroundColor: '#001829', | ||||||
|  |           borderColor: '#001829', | ||||||
|           formatter: params => { |           formatter: params => { | ||||||
|             // 获取xAxis data中的数据 |             console.log('params', params) | ||||||
|             let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>` |             var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`; | ||||||
|             params.forEach(item => { |             for (var i = 0, l = params.length; i < l; i++) { | ||||||
|               let color = Object.prototype.toString.call(item.color) == "[object String]" ? item.color : item.color.colorStops ? item.color.colorStops[0].color : '' |               let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : '' | ||||||
|               console.log(item.color, color); |               // console.log(item.color, color); | ||||||
|               dataStr += `<div> |               res += | ||||||
|           <div style="margin: 0 8px;"> |                 "<br/>" + | ||||||
|             <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${color};"></span> |                 `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` + | ||||||
|             <span>${item.seriesName}</span> |                 `<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` + | ||||||
|             <span style="float:right;color:#000000;margin-left:20px;">${item.data}</span> |                 `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`; | ||||||
|           </div> |             } | ||||||
|         </div>` |             return res; | ||||||
|             }) |           }, | ||||||
|             return dataStr |  | ||||||
|           } |  | ||||||
|         }, |         }, | ||||||
|         xAxis: { |         xAxis: { | ||||||
|           axisTick: { |           axisTick: { | ||||||
|   | |||||||
| @@ -1,8 +1,8 @@ | |||||||
| <!-- | <!-- | ||||||
|  * @Author: zwq |  * @Author: zwq | ||||||
|  * @Date: 2022-01-21 14:43:06 |  * @Date: 2022-01-21 14:43:06 | ||||||
|  * @LastEditors: DY |  * @LastEditors: zhp | ||||||
|  * @LastEditTime: 2024-06-24 11:13:48 |  * @LastEditTime: 2024-07-03 09:10:05 | ||||||
|  * @Description: |  * @Description: | ||||||
| --> | --> | ||||||
| <template> | <template> | ||||||
| @@ -100,7 +100,8 @@ export default { | |||||||
|         }, |         }, | ||||||
|         tooltip: { |         tooltip: { | ||||||
|           trigger: 'axis', |           trigger: 'axis', | ||||||
|           formatter: function(params) { |           formatter: function (params) { | ||||||
|  |             console.log(params); | ||||||
|             let result = ` |             let result = ` | ||||||
|             <div style="width: 270px; display: flex"> |             <div style="width: 270px; display: flex"> | ||||||
|               <div style="width: 150px">${params[0].name}</div> |               <div style="width: 150px">${params[0].name}</div> | ||||||
| @@ -108,6 +109,7 @@ export default { | |||||||
|               <div style="width: 60px">${factoryListabbr[1]}</div> |               <div style="width: 60px">${factoryListabbr[1]}</div> | ||||||
|             </div>` |             </div>` | ||||||
|             const newArray = params.map(p => { |             const newArray = params.map(p => { | ||||||
|  |               console.log(factoryListabbr[p.seriesName.split('-')[1]], p.seriesName.split('-')[0]) | ||||||
|               return { |               return { | ||||||
|                 glass: p.seriesName.split('-')[0], // 玻璃类型 |                 glass: p.seriesName.split('-')[0], // 玻璃类型 | ||||||
|                 factoryName: factoryListabbr[p.seriesName.split('-')[1]], // 工厂名称 |                 factoryName: factoryListabbr[p.seriesName.split('-')[1]], // 工厂名称 | ||||||
| @@ -150,7 +152,7 @@ export default { | |||||||
|         yAxis: [ |         yAxis: [ | ||||||
|           { |           { | ||||||
|             type: 'value', |             type: 'value', | ||||||
|             name: '单位:个' |             name: '单位:片' | ||||||
|           } |           } | ||||||
|         ], |         ], | ||||||
|         grid: { |         grid: { | ||||||
|   | |||||||
| @@ -1,7 +1,7 @@ | |||||||
| <!-- | <!-- | ||||||
|  * @Author: zhp |  * @Author: zhp | ||||||
|  * @Date: 2024-06-21 09:05:14 |  * @Date: 2024-06-21 09:05:14 | ||||||
|  * @LastEditTime: 2024-07-02 08:33:22 |  * @LastEditTime: 2024-07-03 16:07:42 | ||||||
|  * @LastEditors: zhp |  * @LastEditors: zhp | ||||||
|  * @Description: |  * @Description: | ||||||
| --> | --> | ||||||
| @@ -51,7 +51,7 @@ export default { | |||||||
|             }, |             }, | ||||||
|           }, |           }, | ||||||
|           formatter: function (params) { |           formatter: function (params) { | ||||||
|             // console.log('params', params) |             console.log('params', params) | ||||||
|             let arr = [] |             let arr = [] | ||||||
|             var res = ``; |             var res = ``; | ||||||
|             // for (var i = 0, l = params.length; i < l; i++) { |             // for (var i = 0, l = params.length; i < l; i++) { | ||||||
| @@ -64,7 +64,7 @@ export default { | |||||||
|                   ? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%" |                   ? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%" | ||||||
|                 : params[0].name === "转化效率" |                 : params[0].name === "转化效率" | ||||||
|                     ? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%" |                     ? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%" | ||||||
|                   : params[0].seriesName.search('总功率') != -1 |                   : params[0].axisValueLabel.search('总功率') != -1 | ||||||
|                     ? (params[0].value ? params[0].value : 0) + "MW" |                     ? (params[0].value ? params[0].value : 0) + "MW" | ||||||
|                     : (params[0].value ? params[0].value : 0) + "片" |                     : (params[0].value ? params[0].value : 0) + "片" | ||||||
|                 }</span>`; |                 }</span>`; | ||||||
| @@ -78,7 +78,7 @@ export default { | |||||||
|                 ? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%" |                 ? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%" | ||||||
|                 : params[1].name === "转化效率" |                 : params[1].name === "转化效率" | ||||||
|                   ? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%" |                   ? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%" | ||||||
|                   : params[1].seriesName.search('总功率') != -1 |                   : params[1].axisValueLabel.search('总功率') != -1 | ||||||
|                     ? (params[1].value ? params[1].value : 0) + "MW" |                     ? (params[1].value ? params[1].value : 0) + "MW" | ||||||
|                     : (params[1].value ? params[1].value : 0) + "片" |                     : (params[1].value ? params[1].value : 0) + "片" | ||||||
|                 }</span>`; |                 }</span>`; | ||||||
|   | |||||||
| @@ -215,7 +215,7 @@ export default { | |||||||
|             barWidth: 20, |             barWidth: 20, | ||||||
|             label: { |             label: { | ||||||
|               show: true, |               show: true, | ||||||
|               position: [-18, -16], |               position: [0, -16], | ||||||
|               color: "#68C483", |               color: "#68C483", | ||||||
|               formatter: function (params) { |               formatter: function (params) { | ||||||
|                 return params.value |                 return params.value | ||||||
| @@ -230,7 +230,7 @@ export default { | |||||||
|             barWidth: 20, |             barWidth: 20, | ||||||
|             label: { |             label: { | ||||||
|               show: true, |               show: true, | ||||||
|               position: [-18, -16], |               position: [0, -16], | ||||||
|               color: "#68C483", |               color: "#68C483", | ||||||
|               formatter: function (params) { |               formatter: function (params) { | ||||||
|                 return params.value |                 return params.value | ||||||
| @@ -290,7 +290,7 @@ export default { | |||||||
|             barWidth: 20, |             barWidth: 20, | ||||||
|             label: { |             label: { | ||||||
|               show: true, |               show: true, | ||||||
|               position: [-20, -16], |               position: [-0, -16], | ||||||
|               color: "#68C483", |               color: "#68C483", | ||||||
|               formatter: function (params) { |               formatter: function (params) { | ||||||
|                 return params.value.toFixed(2) |                 return params.value.toFixed(2) | ||||||
| @@ -305,7 +305,7 @@ export default { | |||||||
|             barWidth: 20, |             barWidth: 20, | ||||||
|             label: { |             label: { | ||||||
|               show: true, |               show: true, | ||||||
|               position: [10, -16], |               position: [0, -16], | ||||||
|               color: "#288AFF", |               color: "#288AFF", | ||||||
|               formatter: function (params) { |               formatter: function (params) { | ||||||
|                 return params.value.toFixed(2) |                 return params.value.toFixed(2) | ||||||
|   | |||||||
		Referens i nytt ärende
	
	Block a user