From 4bf7afc94dcd4aec29d51708146e8dcbb8027ee1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Mon, 2 Sep 2024 17:42:53 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/model/dataCentre.vue | 3522 ++++++++++++++++++++++++++++++-- 1 file changed, 3354 insertions(+), 168 deletions(-) diff --git a/src/views/model/dataCentre.vue b/src/views/model/dataCentre.vue index 1d07877..41ed125 100644 --- a/src/views/model/dataCentre.vue +++ b/src/views/model/dataCentre.vue @@ -12,6 +12,11 @@ 合计：{{ hj }} +
+ 产线1 + 产线2 + 合并 +
@@ -101,7 +106,8 @@ export default { }, data() { return { - hj: 501273, + nowLine: 2, + hj: 0, title: [ '三日清单', '产品发布', @@ -162,27 +168,3276 @@ export default { left: 52.7 }, { - top: 70.4, - left: 76.4 + top: 70.4, + left: 76.4 + }, + ], + time: '', + date: '', + RequestDataSet: [ + { + e: 'data-01', + i: "scada_aq_pro_three_02('CX_01')", + t: 1, + f: (e) => { + let data = { + yNameOne: [], + yData: [] + } + e.forEach((i, k) => { + data.yNameOne.push(i['订单号'] || i.COLUMN_B) + data.yData.push(i['完成率'] || Math.min(((i.COLUMN_E == 0 ? 0 : (i.COLUMN_D / i.COLUMN_E)) * 100), 100).toFixed(2)) + }) + const chart1Option = (data, id) => { + clearInterval(time1) + let bgBar = [] + data.yData.forEach(() => { + bgBar.push(100) + }) + let option = { + grid: { + left: "0%", + right: "15%", + bottom: "0%", + top: "0%", + containLabel: true, + }, + dataZoom: [], + xAxis: { + show: false, + }, + yAxis: [ + { + show: true, + data: data.yNameOne, + inverse: true, + axisLine: { + show: false, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + interval: 0, + color: "#fff", + // margin:150, + fontSize: 0.75 * vw, + textStyle: { + textAlign: 'center' + }, + }, + }, + ], + series: [ + { + name: "条", + type: "bar", + yAxisIndex: 0, + data: data.yData, + barWidth: '80%', + itemStyle: { + normal: { + barBorderRadius: 30, + color: function (params) { + return 'green' + }, + }, + }, + }, + { + name: "框", + type: "bar", + yAxisIndex: 0, + barGap: "-100%", + data: bgBar, + barWidth: '80%', + label: { + show: true, + position: "right", + textStyle: { + color: "#fff", + fontSize: 0.75 * vw + }, + formatter: function (val, index, e) { + return data.yData[val.dataIndex] + '%' + } + }, + itemStyle: { + normal: { + color: "none", + borderColor: "#00c1de", + borderWidth: 1, + barBorderRadius: 15, + }, + }, + }, + ], + }; + + if (data.yNameOne.length > 8) { + option.dataZoom.push({ + show: false, + type: 'slider', + bottom: '0%', + yAxisIndex: 0, + height: 12, + start: 0, + end: 1 / (data.yNameOne.length / 9) * 100, + textStyle: { + fontSize: 0, + color: 'rgba(0,0,0,0)' + } + }) + + let step = 1 / (data.yNameOne.length / 9) * 100 + time1 = setInterval(() => { + option.dataZoom[0].end += step + option.dataZoom[0].start += step + if (option.dataZoom[0].start >= 100) { + option.dataZoom[0].start = 0 + option.dataZoom[0].end = step + } + if (option.dataZoom[0].end >= 100) { + option.dataZoom[0].end = 100 + option.dataZoom[0].start = option.dataZoom[0].end - step + } + this.$refs.chart1 && this.$refs.chart1.setData(option); + }, 6000) + // time() + } + return option + } + this.$refs.chart1 && this.$refs.chart1.setData(chart1Option(data)); + } + }, + { + e: 'data-02', + i: "scada_aq_zj_gx_01('CX_01')", + t: 1, + f: (e) => { + + this.$refs.chart4.setData({ + tooltip: {}, + grid: { + top: "25%", + left: "5%", + right: "5%", + bottom: "8%", + containLabel: true, + }, + legend: { + itemGap: 50, + top: "2%", + textStyle: { + color: "#f9f9f9", + borderColor: "#fff", + }, + }, + xAxis: [ + { + type: "category", + boundaryGap: true, + axisLine: { + //坐标轴轴线相关设置。数学上的x轴 + show: true, + lineStyle: { + color: "#f9f9f9", + }, + }, + axisLabel: { + interval: 0, + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + }, + }, + axisTick: { + show: false, + }, + data: e.map(v => v['工序名称']), + }, + ], + yAxis: [ + { + type: "value", + min: 0, + // max: 140, + splitNumber: 7, + splitLine: { + show: true, + lineStyle: { + color: "#0a3256", + }, + }, + axisLine: { + show: false, + }, + axisLabel: { + margin: 5, + textStyle: { + fontSize: 0.5 * vw, + color: "#d1e6eb", + }, + }, + axisTick: { + show: false, + }, + }, + { + type: "value", + min: 90, + max: 100, + splitLine: { + show: true, + lineStyle: { + color: "#0a3256", + }, + }, + axisLine: { + show: false, + }, + axisLabel: { + margin: 5, + textStyle: { + fontSize: 0.5 * vw, + color: "#d1e6eb", + }, + formatter: '{value}%' + }, + axisTick: { + show: false, + }, + }, + ], + series: [ + { + name: "质检数量", + type: "bar", + barWidth: 20, + tooltip: { + show: false, + }, + label: { + show: true, + position: "top", + textStyle: { + fontSize: 0.5 * vw, + color: "#fff", + }, + }, + itemStyle: { + normal: { + color: '#72b3fe' + }, + }, + data: e.map(v => v['质检数量']), + }, + { + name: "合格率", + type: "line", + yAxisIndex: 1, + // smooth: true, //是否平滑曲线显示 + // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 + showAllSymbol: true, + symbol: "emptyCircle", + symbolSize: 6, + lineStyle: { + normal: { + color: "#ecf3ff", // 线条颜色 + }, + borderColor: "#6d88bf", + }, + label: { + show: true, + position: "top", + textStyle: { + fontSize: 0.5 * vw, + color: "#fff", + }, + formatter: '{c}%' + }, + itemStyle: { + normal: { + color: "#28ffb3", + }, + }, + tooltip: { + show: false, + }, + data: e.map(v => v['合格率']), + }, + ], + }) + } + }, + { + e: 'data-03', + i: "scada_dsj_dd_lly_01('CX_01')", + t: 1, + f: (e) => { + this.$refs.chart5.setData({ + tooltip: {}, + grid: { + top: "25%", + left: "5%", + right: "5%", + bottom: "8%", + containLabel: true, + }, + legend: { + itemGap: 50, + top: "2%", + textStyle: { + color: "#f9f9f9", + borderColor: "#fff", + }, + }, + xAxis: [ + { + type: "category", + boundaryGap: true, + axisLine: { + //坐标轴轴线相关设置。数学上的x轴 + show: true, + lineStyle: { + color: "#f9f9f9", + }, + }, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + }, + }, + axisTick: { + show: false, + }, + data: e.map(v => v['日期'] || v.X_VALUE), + }, + ], + yAxis: [ + { + type: "value", + // min: 0, + // max: 140, + splitNumber: 7, + splitLine: { + show: true, + lineStyle: { + color: "#0a3256", + }, + }, + axisLine: { + show: false, + }, + axisLabel: { + margin: 5, + textStyle: { + fontSize: 0.5 * vw, + color: "#d1e6eb", + }, + }, + axisTick: { + show: false, + }, + }, + { + type: "value", + // min: 90, + max: 100, + splitLine: { + show: true, + lineStyle: { + color: "#0a3256", + }, + }, + axisLine: { + show: false, + }, + axisLabel: { + margin: 5, + textStyle: { + fontSize: 0.5 * vw, + color: "#d1e6eb", + }, + formatter: '{value}%' + }, + axisTick: { + show: false, + }, + }, + ], + series: [ + { + name: "产量", + type: "bar", + barWidth: 20, + tooltip: { + show: false, + }, + label: { + show: true, + position: "top", + textStyle: { + fontSize: 0.5 * vw, + color: "#fff", + }, + }, + itemStyle: { + normal: { + color: '#9fe080' + }, + }, + data: e.map(v => v['产量'] || v.Y_VALUE_ONE), + }, + { + name: "订单履约率", + type: "line", + yAxisIndex: 1, + // smooth: true, //是否平滑曲线显示 + // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 + showAllSymbol: true, + symbol: "emptyCircle", + symbolSize: 6, + lineStyle: { + normal: { + color: "#ecf3ff", // 线条颜色 + }, + borderColor: "#6d88bf", + }, + label: { + show: true, + position: "top", + textStyle: { + fontSize: 0.5 * vw, + color: "#fff", + }, + formatter: '{c}%' + }, + itemStyle: { + normal: { + color: "#28ffb3", + }, + }, + tooltip: { + show: false, + }, + data: e.map(v => v['履约率'] || v.Y_VALUE_TWO), + }, + ], + }) + } + }, + { + e: 'data-04', + t: 4, + f: (e) => { + let points = [ + {value: [118.8062, 31.9208], itemStyle: {color: "#4ab2e5"}}, + {value: [127.9688, 45.368], itemStyle: {color: "#4fb6d2"}}, + {value: [110.3467, 41.4899], itemStyle: {color: "#52b9c7"}}, + {value: [125.8154, 44.2584], itemStyle: {color: "#5abead"}}, + {value: [116.4551, 40.2539], itemStyle: {color: "#f34e2b"}}, + {value: [123.1238, 42.1216], itemStyle: {color: "#f56321"}}, + {value: [114.4995, 38.1006], itemStyle: {color: "#f56f1c"}}, + {value: [117.4219, 39.4189], itemStyle: {color: "#f58414"}}, + {value: [112.3352, 37.9413], itemStyle: {color: "#f58f0e"}}, + {value: [109.1162, 34.2004], itemStyle: {color: "#f5a305"}}, + {value: [103.5901, 36.3043], itemStyle: {color: "#e7ab0b"}}, + {value: [106.3586, 38.1775], itemStyle: {color: "#dfae10"}}, + {value: [101.4038, 36.8207], itemStyle: {color: "#d5b314"}}, + {value: [103.9526, 30.7617], itemStyle: {color: "#c1bb1f"}}, + {value: [108.384366, 30.439702], itemStyle: {color: "#b9be23"}}, + {value: [113.0823, 28.2568], itemStyle: {color: "#a6c62c"}}, + {value: [102.9199, 25.46639], itemStyle: {color: "#96cc34"}}, + {value: [115.179594, 34.647758]}, + ]; + this.$refs.chart6.setData({ + + geo: { + map: "china", + aspectScale: 0.75, //长宽比 + zoom: 1.1, + roam: false, + label: { + normal: { + show: false, + }, + }, + itemStyle: { + normal: { + areaColor: { + type: "radial", + x: 0.5, + y: 0.5, + r: 0.8, + colorStops: [ + { + offset: 0, + color: "#09132c", // 0% 处的颜色 + }, + { + offset: 1, + color: "#274d68", // 100% 处的颜色 + }, + ], + globalCoord: true, // 缺省为 false + }, + shadowColor: "rgb(58,115,192)", + shadowOffsetX: 2, + shadowOffsetY: 2.3, + }, + emphasis: { + areaColor: "#2AB8FF", + borderWidth: 0, + color: "green", + label: { + show: false, + }, + }, + }, + regions: [ + { + name: "南海诸岛", + itemStyle: { + areaColor: "rgba(0, 10, 52, 1)", + + borderColor: "rgba(0, 10, 52, 1)", + normal: { + opacity: 0, + label: { + show: false, + color: "#009cc9", + }, + }, + }, + }, + ], + }, + series: [ + { + type: "map", + roam: false, + label: { + normal: { + show: false, + }, + }, + + itemStyle: { + normal: { + borderColor: "rgb(147, 235, 248)", + borderWidth: 1, + areaColor: { + type: "radial", + x: 0.5, + y: 0.5, + r: 0.8, + colorStops: [ + { + offset: 0, + color: "#09132c", // 0% 处的颜色 + }, + { + offset: 1, + color: "#274d68", // 100% 处的颜色 + }, + ], + globalCoord: true, // 缺省为 false + }, + }, + emphasis: { + areaColor: "rgb(46,229,206)", + // shadowColor: 'rgb(12,25,50)', + borderWidth: 0.1, + }, + }, + zoom: 1.1, + // roam: false, + map: "china", //使用 + // data: this.difficultData //热力图数据 不同区域 不同的底色 + }, + { + type: "effectScatter", + coordinateSystem: "geo", + showEffectOn: "render", + zlevel: 1, + rippleEffect: { + period: 15, + scale: 4, + brushType: "fill", + }, + hoverAnimation: true, + label: { + normal: { + formatter: "{b}", + position: "right", + offset: [15, 0], + color: "#1DE9B6", + show: true, + }, + }, + itemStyle: { + normal: { + color: "#1DE9B6", + shadowBlur: 10, + shadowColor: "#333", + }, + }, + symbolSize: 2, + data: points, + }, + { + type: "lines", + zlevel: 2, + effect: { + show: true, + period: 2, //箭头指向速度，值越小速度越快 + trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重 + symbol: "arrow", //箭头图标 + symbolSize: 5, //图标大小 + }, + lineStyle: { + normal: { + color: "#1DE9B6", + width: 1, //线条宽度 + opacity: 0.1, //尾迹线条透明度 + curveness: 0.3, //尾迹线条曲直度 + }, + }, + data: [ + { + coords: [ + [115.179594, 34.647758], + [118.8062, 31.9208], + ], + lineStyle: {color: "#4ab2e5"}, + }, + { + coords: [ + [115.179594, 34.647758], + [127.9688, 45.368], + ], + lineStyle: {color: "#4fb6d2"}, + }, + { + coords: [ + [115.179594, 34.647758], + [110.3467, 41.4899], + ], + lineStyle: {color: "#52b9c7"}, + }, + { + coords: [ + [115.179594, 34.647758], + [125.8154, 44.2584], + ], + lineStyle: {color: "#5abead"}, + }, + { + coords: [ + [115.179594, 34.647758], + [116.4551, 40.2539], + ], + lineStyle: {color: "#f34e2b"}, + }, + { + coords: [ + [115.179594, 34.647758], + [123.1238, 42.1216], + ], + lineStyle: {color: "#f56321"}, + }, + { + coords: [ + [115.179594, 34.647758], + [114.4995, 38.1006], + ], + lineStyle: {color: "#f56f1c"}, + }, + { + coords: [ + [115.179594, 34.647758], + [117.4219, 39.4189], + ], + lineStyle: {color: "#f58414"}, + }, + { + coords: [ + [115.179594, 34.647758], + [112.3352, 37.9413], + ], + lineStyle: {color: "#f58f0e"}, + }, + { + coords: [ + [115.179594, 34.647758], + [109.1162, 34.2004], + ], + lineStyle: {color: "#f5a305"}, + }, + { + coords: [ + [115.179594, 34.647758], + [103.5901, 36.3043], + ], + lineStyle: {color: "#e7ab0b"}, + }, + { + coords: [ + [115.179594, 34.647758], + [106.3586, 38.1775], + ], + lineStyle: {color: "#dfae10"}, + }, + { + coords: [ + [115.179594, 34.647758], + [101.4038, 36.8207], + ], + lineStyle: {color: "#d5b314"}, + }, + { + coords: [ + [115.179594, 34.647758], + [103.9526, 30.7617], + ], + lineStyle: {color: "#c1bb1f"}, + }, + { + coords: [ + [115.179594, 34.647758], + [108.384366, 30.439702], + ], + lineStyle: {color: "#b9be23"}, + }, + { + coords: [ + [115.179594, 34.647758], + [113.0823, 28.2568], + ], + lineStyle: {color: "#a6c62c"}, + }, + { + coords: [ + [115.179594, 34.647758], + [102.9199, 25.46639], + ], + lineStyle: {color: "#96cc34"}, + }, + ], + }, + ], + }) + } + }, + { + e: 'data-05', + t: 4, + f: (e) => { + let plantCap = [ + { + name: "外观时尚", + value: "24231", + }, + { + name: "低碳环保", + value: "36232", + }, + { + name: "高端智能", + value: "45423", + }, + { + name: "老品牌", + value: "24542", + }, + ]; + + let datalist = [ + { + offset: [56, 48], + symbolSize: 120, + opacity: 0.95, + color: "#f467ce", + }, + { + offset: [35, 80], + symbolSize: 95, + opacity: 0.88, + color: "#7aabe2", + }, + { + offset: [20, 43], + symbolSize: 90, + opacity: 0.84, + color: "#ff7123", + }, + { + offset: [83, 30], + symbolSize: 90, + opacity: 0.8, + color: "#ffc400", + }, + { + offset: [36, 20], + symbolSize: 65, + opacity: 0.75, + color: "#5e333f", + }, + { + offset: [64, 10], + symbolSize: 70, + opacity: 0.7, + color: "#6b3442", + }, + { + offset: [75, 75], + symbolSize: 60, + opacity: 0.68, + color: "#8a3647", + }, + { + offset: [88, 62], + symbolSize: 50, + opacity: 0.6, + color: "#68333f", + }, + ]; + let datas = []; + for (var i = 0; i < plantCap.length; i++) { + var item = plantCap[i]; + var itemToStyle = datalist[i]; + datas.push({ + name: item.value + "\n" + item.name, + value: itemToStyle.offset, + symbolSize: itemToStyle.symbolSize, + label: { + normal: { + textStyle: { + fontSize: 11, + }, + }, + }, + itemStyle: { + normal: { + color: itemToStyle.color, + opacity: itemToStyle.opacity, + }, + }, + }); + } + this.$refs.chart7.setData({ + grid: { + show: false, + top: 10, + bottom: 10, + }, + xAxis: [ + { + gridIndex: 0, + type: "value", + show: false, + min: 0, + max: 100, + nameLocation: "middle", + nameGap: 5, + }, + ], + yAxis: [ + { + gridIndex: 0, + min: 0, + show: false, + max: 100, + nameLocation: "middle", + nameGap: 30, + }, + ], + series: [ + { + type: "scatter", + symbol: "circle", + symbolSize: 120, + label: { + normal: { + show: true, + formatter: "{b}", + color: "#fff", + textStyle: { + fontSize: "20", + }, + }, + }, + itemStyle: { + normal: { + color: "#00acea", + }, + }, + data: datas, + }, + ], + }) + } + }, + { + e: 'data-06', + i: "scada_dsj_zl_fx_01('CX_01')", + t: 1, + f: (v) => { + let e = v.map(vv => { + return { + name: vv['缺陷名称'] || vv.X_VALUE, + value: vv['缺陷数量'] || vv.Y_VALUE, + } + }) + + this.$refs.chart8.setData({ + tooltip: { + trigger: "item", + formatter: "{b} : {c} ({d}%)", + }, + polar: {}, + angleAxis: { + interval: 1, + type: "category", + data: [], + z: 10, + axisLine: { + show: false, + lineStyle: { + color: "#0B4A6B", + width: 1, + type: "solid", + }, + }, + axisLabel: { + interval: 0, + show: true, + color: "#0B4A6B00", + margin: 8, + fontSize: 16, + }, + }, + radiusAxis: { + min: 40, + max: 120, + interval: 20, + axisLine: { + show: false, + lineStyle: { + color: "#0B3E5E", + width: 1, + type: "solid", + }, + }, + axisLabel: { + formatter: "{value} %", + show: false, + padding: [0, 0, 20, 0], + color: "#0B3E5E", + fontSize: 16, + }, + splitLine: { + lineStyle: { + color: "#0B3E5E00", + width: 2, + type: "solid", + }, + }, + }, + calculable: true, + series: [ + { + stack: "a", + type: "pie", + radius: ["0%", "80%"], + roseType: "area", + zlevel: 10, + label: { + normal: { + show: true, + formatter: "{b}\n{d}%", + textStyle: { + fontSize: 12, + color: '#fff' + }, + position: "outside", + }, + emphasis: { + show: true, + }, + }, + labelLine: { + normal: { + show: true, + length: 20, + length2: 55, + }, + emphasis: { + show: false, + }, + }, + data: e + }, + ], + }) + } + }, + { + e: 'data-07', + i: "scada_dsj_cl_tj_01('CX_01')", + t: 1, + f: (e) => { + console.log(e) + this.hj = e.map(v => v['产量'] || v.Y_VALUE).reduce((a, b) => a + b) + + this.$refs.chart9.setData({ + tooltip: { + textStyle: { + fontSize: 0.8 * vw + } + }, + grid: { + top: "10%", + left: "1%", + right: "1%", + bottom: "1%", + containLabel: true, + }, + xAxis: { + data: e.map(v => v['日期'] || v.X_VALUE), + axisLine: { + lineStyle: { + color: "#0177d4", + }, + }, + axisLabel: { + color: "#fff", + fontSize: 0.8 * vw, + interval: 0, + }, + }, + yAxis: { + nameTextStyle: { + color: "#fff", + fontSize: 0.8 * vw, + }, + axisLine: { + lineStyle: { + color: "#0177d4", + }, + }, + axisLabel: { + color: "#fff", + fontSize: 0.8 * vw, + }, + splitLine: { + show: false, + lineStyle: { + color: "#0177d4", + }, + }, + }, + series: [ + { + type: "bar", + barWidth: '60%', + label: { + show: true, + position: 'top', + textStyle: { + fontSize: 0.6 * vw, + color: '#fff' + }, + }, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00b0ff", + }, + { + offset: 0.8, + color: "#7052f4", + }, + ], + false + ), + }, + }, + data: e.map(v => v['产量'] || v.Y_VALUE), + } + ], + }) + } + }, + { + e: 'data-08', + t: 4, + f: (e) => { + this.$refs.chart10_1.setData({ + series: [ + { + type: "pie", + clockWise: false, + radius: ['60%', '75%'], + itemStyle: { + normal: { + label: { + show: false, + }, + labelLine: { + show: false, + }, + shadowBlur: 0, + shadowColor: "#ff8c37", + }, + }, + hoverAnimation: false, + center: ["50%", "50%"], + data: [ + { + value: e?.[0]?.['数值'], + label: { + normal: { + rich: { + a: { + color: "#ff8c37", + align: "center", + fontSize: 1.1 * vw, + fontWeight: "bold", + }, + b: { + color: "#fff", + align: "center", + fontSize: 0.9 * vw, + }, + }, + formatter: function (params) { + return ( + "{a|" + + params.value + + "}" + + "\n{b|" + e?.[0]?.['名称'] + "}" + ); + }, + position: "center", + show: true, + textStyle: { + fontSize: "14", + fontWeight: "normal", + color: "#fff", + }, + }, + }, + itemStyle: { + normal: { + color: "#ff8c37", + shadowColor: "#ff8c37", + shadowBlur: 0, + }, + }, + }, + { + value: 0, + name: "invisible", + itemStyle: { + normal: { + color: "#412a4e", + }, + emphasis: { + color: "#412a4e", + }, + }, + }, + ], + }, + ], + }) + this.$refs.chart10_2.setData({ + series: [ + { + type: "pie", + clockWise: false, + radius: ['60%', '75%'], + itemStyle: { + normal: { + label: { + show: false, + }, + labelLine: { + show: false, + }, + shadowBlur: 0, + shadowColor: "#389af4", + }, + }, + hoverAnimation: false, + center: ["50%", "50%"], + data: [ + { + value: e?.[1]?.['数值'], + label: { + normal: { + rich: { + a: { + color: "#389af4", + align: "center", + fontSize: 1.1 * vw, + fontWeight: "bold", + }, + b: { + color: "#fff", + align: "center", + fontSize: 0.9 * vw, + }, + }, + formatter: function (params) { + return ( + "{a|" + + params.value + + "}" + + "\n{b|" + e?.[1]?.['名称'] + "}" + ); + }, + position: "center", + show: true, + textStyle: { + fontSize: "14", + fontWeight: "normal", + color: "#fff", + }, + }, + }, + itemStyle: { + normal: { + color: "#389af4", + shadowColor: "#389af4", + shadowBlur: 0, + }, + }, + }, + { + value: 0, + name: "invisible", + itemStyle: { + normal: { + color: "#412a4e", + }, + emphasis: { + color: "#412a4e", + }, + }, + }, + ], + }, + ], + }) + this.$refs.chart10_3.setData({ + series: [ + { + type: "pie", + clockWise: false, + radius: ['60%', '75%'], + itemStyle: { + normal: { + label: { + show: false, + }, + labelLine: { + show: false, + }, + shadowBlur: 0, + shadowColor: "#ffc257", + }, + }, + hoverAnimation: false, + center: ["50%", "50%"], + data: [ + { + value: e?.[2]?.['数值'], + label: { + normal: { + rich: { + a: { + color: "#ffc257", + align: "center", + fontSize: 1.1 * vw, + fontWeight: "bold", + }, + b: { + color: "#fff", + align: "center", + fontSize: 0.9 * vw, + }, + }, + formatter: function (params) { + return ( + "{a|" + + params.value + + "%}" + + "\n{b|" + e?.[2]?.['名称'] + "}" + ); + }, + position: "center", + show: true, + textStyle: { + fontSize: "14", + fontWeight: "normal", + color: "#fff", + }, + }, + }, + itemStyle: { + normal: { + color: "#ffc257", + shadowColor: "#ffc257", + shadowBlur: 0, + }, + }, + }, + { + value: 0, + name: "invisible", + itemStyle: { + normal: { + color: "#412a4e", + }, + emphasis: { + color: "#412a4e", + }, + }, + }, + ], + }, + ], + }) + } + }, + { + e: 'data-09', + t: 4, + f: (e) => { + this.$refs.chart11.setData({ + grid: { + top: "20%", + left: "1%", + right: "5%", + bottom: "1%", + containLabel: true, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + legend: { + right: '0', + data: ['隐患数', '闭环数'], + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + xAxis: [ + { + type: 'category', + axisTick: {show: false}, + axisLabel: { + rotate: -20, + interval: 0, + margin: 20, + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + data: e.map(v => v['日期']), + } + ], + yAxis: [ + { + axisLabel: { + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + splitLine: { + lineStyle: { + color: "rgba(255,255,255,0.1)", + }, + }, + type: 'value' + } + ], + series: [ + { + name: '隐患数', + type: 'bar', + barGap: 0, + emphasis: { + focus: 'series' + }, + barWidth: '40%', + barMaxWidth: '50px', + itemStyle: { + //图形样式 + normal: { + color: true ? '#db8151' : "#64BCEC", + }, + }, + label: { + show: true, + position: "top", + formatter: (e) => { + if (e.data === 0) { + return '' + } else { + return e.data + } + }, + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.6 * vw + }, + }, + data: e.map(v => v['隐患数']), + }, + { + name: '闭环数', + type: 'bar', + emphasis: { + focus: 'series' + }, + barWidth: '40%', + barMaxWidth: '50px', + barGap: '40%', + label: { + show: true, + position: "top", + formatter: (e) => { + if (e.data === 0) { + return '' + } else { + return e.data + } + }, + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.6 * vw + }, + }, + itemStyle: { + //图形样式 + normal: { + color: true ? '#9ce375' : "#4FD3B9", + }, + }, + data: e.map(v => v['闭环数']), + }, + ] + }) + } + }, + { + e: 'data-10', + t: 4, + f: (e) => { + this.$refs.chart12.setData({ + tooltip: {}, + grid: { + top: "25%", + left: "5%", + right: "1%", + bottom: "8%", + containLabel: true, + }, + legend: { + itemGap: 50, + top: "3%", + textStyle: { + fontSize: 0.6 * vw, + color: "#f9f9f9", + borderColor: "#fff", + }, + }, + xAxis: [ + { + type: "category", + boundaryGap: true, + axisLine: { + //坐标轴轴线相关设置。数学上的x轴 + show: true, + lineStyle: { + color: "#f9f9f9", + }, + }, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.4 * vw, + }, + }, + axisTick: { + show: false, + }, + data: e.map(v => v['日期']), + }, + ], + yAxis: [ + { + name: '不良率', + type: "value", + min: 0, + splitLine: { + show: true, + lineStyle: { + color: "#0a3256", + }, + }, + axisLine: { + show: false, + }, + axisLabel: { + margin: 5, + textStyle: { + color: "#d1e6eb", + }, + fontSize: 0.4 * vw, + formatter: '{value}%' + }, + axisTick: { + show: false, + }, + }, + ], + series: [ + { + name: "当年市场不良率", + type: "line", + // smooth: true, //是否平滑曲线显示 + // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 + showAllSymbol: true, + symbol: "emptyCircle", + symbolSize: 6, + lineStyle: { + normal: { + color: "#e8f1ff", // 线条颜色 + }, + borderColor: "#28ffb3", + }, + label: { + show: true, + position: "bottom", + fontSize: 0.4 * vw, + textStyle: { + color: "#fff", + }, + formatter: '{c}%' + }, + itemStyle: { + normal: { + color: "#28ffb3", + }, + }, + tooltip: { + show: false, + }, + data: e.map(v => v['当年市场不良率']), + }, + { + name: "目标市场不良率", + type: "line", + // smooth: true, //是否平滑曲线显示 + // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 + showAllSymbol: true, + symbol: "emptyCircle", + symbolSize: 6, + lineStyle: { + normal: { + color: "#4268aa", // 线条颜色 + }, + borderColor: "#ecf3ff", + }, + label: { + show: true, + position: "top", + fontSize: 0.4 * vw, + textStyle: { + color: "#fff", + }, + formatter: '{c}%' + }, + itemStyle: { + normal: { + color: "#28ffb3", + }, + }, + tooltip: { + show: false, + }, + data: e.map(v => v['目标市场不良率']), + }, + ], + }) + } + }, + ], + RequestDataSet1: [ + { + e: 'data-01', + i: "scada_aq_pro_three_02('CX_02')", + t: 1, + f: (e) => { + let data = { + yNameOne: [], + yData: [] + } + e.forEach((i, k) => { + data.yNameOne.push(i['订单号'] || i.COLUMN_B) + data.yData.push(i['完成率'] || Math.min(((i.COLUMN_E == 0 ? 0 : (i.COLUMN_D / i.COLUMN_E)) * 100), 100).toFixed(2)) + }) + const chart1Option = (data, id) => { + clearInterval(time1) + let bgBar = [] + data.yData.forEach(() => { + bgBar.push(100) + }) + let option = { + grid: { + left: "0%", + right: "15%", + bottom: "0%", + top: "0%", + containLabel: true, + }, + dataZoom: [], + xAxis: { + show: false, + }, + yAxis: [ + { + show: true, + data: data.yNameOne, + inverse: true, + axisLine: { + show: false, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + interval: 0, + color: "#fff", + // margin:150, + fontSize: 0.75 * vw, + textStyle: { + textAlign: 'center' + }, + }, + }, + ], + series: [ + { + name: "条", + type: "bar", + yAxisIndex: 0, + data: data.yData, + barWidth: '80%', + itemStyle: { + normal: { + barBorderRadius: 30, + color: function (params) { + return 'green' + }, + }, + }, + }, + { + name: "框", + type: "bar", + yAxisIndex: 0, + barGap: "-100%", + data: bgBar, + barWidth: '80%', + label: { + show: true, + position: "right", + textStyle: { + color: "#fff", + fontSize: 0.75 * vw + }, + formatter: function (val, index, e) { + return data.yData[val.dataIndex] + '%' + } + }, + itemStyle: { + normal: { + color: "none", + borderColor: "#00c1de", + borderWidth: 1, + barBorderRadius: 15, + }, + }, + }, + ], + }; + + if (data.yNameOne.length > 8) { + option.dataZoom.push({ + show: false, + type: 'slider', + bottom: '0%', + yAxisIndex: 0, + height: 12, + start: 0, + end: 1 / (data.yNameOne.length / 9) * 100, + textStyle: { + fontSize: 0, + color: 'rgba(0,0,0,0)' + } + }) + + let step = 1 / (data.yNameOne.length / 9) * 100 + time1 = setInterval(() => { + option.dataZoom[0].end += step + option.dataZoom[0].start += step + if (option.dataZoom[0].start >= 100) { + option.dataZoom[0].start = 0 + option.dataZoom[0].end = step + } + if (option.dataZoom[0].end >= 100) { + option.dataZoom[0].end = 100 + option.dataZoom[0].start = option.dataZoom[0].end - step + } + this.$refs.chart1 && this.$refs.chart1.setData(option); + }, 6000) + // time() + } + return option + } + this.$refs.chart1 && this.$refs.chart1.setData(chart1Option(data)); + } + }, + { + e: 'data-02', + i: "scada_aq_zj_gx_01('CX_02')", + t: 1, + f: (e) => { + + this.$refs.chart4.setData({ + tooltip: {}, + grid: { + top: "25%", + left: "5%", + right: "5%", + bottom: "8%", + containLabel: true, + }, + legend: { + itemGap: 50, + top: "2%", + textStyle: { + color: "#f9f9f9", + borderColor: "#fff", + }, + }, + xAxis: [ + { + type: "category", + boundaryGap: true, + axisLine: { + //坐标轴轴线相关设置。数学上的x轴 + show: true, + lineStyle: { + color: "#f9f9f9", + }, + }, + axisLabel: { + interval: 0, + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + }, + }, + axisTick: { + show: false, + }, + data: e.map(v => v['工序名称']), + }, + ], + yAxis: [ + { + type: "value", + min: 0, + // max: 140, + splitNumber: 7, + splitLine: { + show: true, + lineStyle: { + color: "#0a3256", + }, + }, + axisLine: { + show: false, + }, + axisLabel: { + margin: 5, + textStyle: { + fontSize: 0.5 * vw, + color: "#d1e6eb", + }, + }, + axisTick: { + show: false, + }, + }, + { + type: "value", + min: 90, + max: 100, + splitLine: { + show: true, + lineStyle: { + color: "#0a3256", + }, + }, + axisLine: { + show: false, + }, + axisLabel: { + margin: 5, + textStyle: { + fontSize: 0.5 * vw, + color: "#d1e6eb", + }, + formatter: '{value}%' + }, + axisTick: { + show: false, + }, + }, + ], + series: [ + { + name: "质检数量", + type: "bar", + barWidth: 20, + tooltip: { + show: false, + }, + label: { + show: true, + position: "top", + textStyle: { + fontSize: 0.5 * vw, + color: "#fff", + }, + }, + itemStyle: { + normal: { + color: '#72b3fe' + }, + }, + data: e.map(v => v['质检数量']), + }, + { + name: "合格率", + type: "line", + yAxisIndex: 1, + // smooth: true, //是否平滑曲线显示 + // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 + showAllSymbol: true, + symbol: "emptyCircle", + symbolSize: 6, + lineStyle: { + normal: { + color: "#ecf3ff", // 线条颜色 + }, + borderColor: "#6d88bf", + }, + label: { + show: true, + position: "top", + textStyle: { + fontSize: 0.5 * vw, + color: "#fff", + }, + formatter: '{c}%' + }, + itemStyle: { + normal: { + color: "#28ffb3", + }, + }, + tooltip: { + show: false, + }, + data: e.map(v => v['合格率']), + }, + ], + }) + } + }, + { + e: 'data-03', + i: "scada_dsj_dd_lly_01('CX_02')", + t: 1, + f: (e) => { + this.$refs.chart5.setData({ + tooltip: {}, + grid: { + top: "25%", + left: "5%", + right: "5%", + bottom: "8%", + containLabel: true, + }, + legend: { + itemGap: 50, + top: "2%", + textStyle: { + color: "#f9f9f9", + borderColor: "#fff", + }, + }, + xAxis: [ + { + type: "category", + boundaryGap: true, + axisLine: { + //坐标轴轴线相关设置。数学上的x轴 + show: true, + lineStyle: { + color: "#f9f9f9", + }, + }, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + }, + }, + axisTick: { + show: false, + }, + data: e.map(v => v['日期'] || v.X_VALUE), + }, + ], + yAxis: [ + { + type: "value", + // min: 0, + // max: 140, + splitNumber: 7, + splitLine: { + show: true, + lineStyle: { + color: "#0a3256", + }, + }, + axisLine: { + show: false, + }, + axisLabel: { + margin: 5, + textStyle: { + fontSize: 0.5 * vw, + color: "#d1e6eb", + }, + }, + axisTick: { + show: false, + }, + }, + { + type: "value", + // min: 90, + max: 100, + splitLine: { + show: true, + lineStyle: { + color: "#0a3256", + }, + }, + axisLine: { + show: false, + }, + axisLabel: { + margin: 5, + textStyle: { + fontSize: 0.5 * vw, + color: "#d1e6eb", + }, + formatter: '{value}%' + }, + axisTick: { + show: false, + }, + }, + ], + series: [ + { + name: "产量", + type: "bar", + barWidth: 20, + tooltip: { + show: false, + }, + label: { + show: true, + position: "top", + textStyle: { + fontSize: 0.5 * vw, + color: "#fff", + }, + }, + itemStyle: { + normal: { + color: '#9fe080' + }, + }, + data: e.map(v => v['产量'] || v.Y_VALUE_ONE), + }, + { + name: "订单履约率", + type: "line", + yAxisIndex: 1, + // smooth: true, //是否平滑曲线显示 + // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 + showAllSymbol: true, + symbol: "emptyCircle", + symbolSize: 6, + lineStyle: { + normal: { + color: "#ecf3ff", // 线条颜色 + }, + borderColor: "#6d88bf", + }, + label: { + show: true, + position: "top", + textStyle: { + fontSize: 0.5 * vw, + color: "#fff", + }, + formatter: '{c}%' + }, + itemStyle: { + normal: { + color: "#28ffb3", + }, + }, + tooltip: { + show: false, + }, + data: e.map(v => v['履约率'] || v.Y_VALUE_TWO), + }, + ], + }) + } + }, + { + e: 'data-04', + t: 4, + f: (e) => { + console.log(e) + let points = [ + {value: [118.8062, 31.9208], itemStyle: {color: "#4ab2e5"}}, + {value: [127.9688, 45.368], itemStyle: {color: "#4fb6d2"}}, + {value: [110.3467, 41.4899], itemStyle: {color: "#52b9c7"}}, + {value: [125.8154, 44.2584], itemStyle: {color: "#5abead"}}, + {value: [116.4551, 40.2539], itemStyle: {color: "#f34e2b"}}, + {value: [123.1238, 42.1216], itemStyle: {color: "#f56321"}}, + {value: [114.4995, 38.1006], itemStyle: {color: "#f56f1c"}}, + {value: [117.4219, 39.4189], itemStyle: {color: "#f58414"}}, + {value: [112.3352, 37.9413], itemStyle: {color: "#f58f0e"}}, + {value: [109.1162, 34.2004], itemStyle: {color: "#f5a305"}}, + {value: [103.5901, 36.3043], itemStyle: {color: "#e7ab0b"}}, + {value: [106.3586, 38.1775], itemStyle: {color: "#dfae10"}}, + {value: [101.4038, 36.8207], itemStyle: {color: "#d5b314"}}, + {value: [103.9526, 30.7617], itemStyle: {color: "#c1bb1f"}}, + {value: [108.384366, 30.439702], itemStyle: {color: "#b9be23"}}, + {value: [113.0823, 28.2568], itemStyle: {color: "#a6c62c"}}, + {value: [102.9199, 25.46639], itemStyle: {color: "#96cc34"}}, + {value: [115.179594, 34.647758]}, + ]; + this.$refs.chart6.setData({ + + geo: { + map: "china", + aspectScale: 0.75, //长宽比 + zoom: 1.1, + roam: false, + label: { + normal: { + show: false, + }, + }, + itemStyle: { + normal: { + areaColor: { + type: "radial", + x: 0.5, + y: 0.5, + r: 0.8, + colorStops: [ + { + offset: 0, + color: "#09132c", // 0% 处的颜色 + }, + { + offset: 1, + color: "#274d68", // 100% 处的颜色 + }, + ], + globalCoord: true, // 缺省为 false + }, + shadowColor: "rgb(58,115,192)", + shadowOffsetX: 2, + shadowOffsetY: 2.3, + }, + emphasis: { + areaColor: "#2AB8FF", + borderWidth: 0, + color: "green", + label: { + show: false, + }, + }, + }, + regions: [ + { + name: "南海诸岛", + itemStyle: { + areaColor: "rgba(0, 10, 52, 1)", + + borderColor: "rgba(0, 10, 52, 1)", + normal: { + opacity: 0, + label: { + show: false, + color: "#009cc9", + }, + }, + }, + }, + ], + }, + series: [ + { + type: "map", + roam: false, + label: { + normal: { + show: false, + }, + }, + + itemStyle: { + normal: { + borderColor: "rgb(147, 235, 248)", + borderWidth: 1, + areaColor: { + type: "radial", + x: 0.5, + y: 0.5, + r: 0.8, + colorStops: [ + { + offset: 0, + color: "#09132c", // 0% 处的颜色 + }, + { + offset: 1, + color: "#274d68", // 100% 处的颜色 + }, + ], + globalCoord: true, // 缺省为 false + }, + }, + emphasis: { + areaColor: "rgb(46,229,206)", + // shadowColor: 'rgb(12,25,50)', + borderWidth: 0.1, + }, + }, + zoom: 1.1, + // roam: false, + map: "china", //使用 + // data: this.difficultData //热力图数据 不同区域 不同的底色 + }, + { + type: "effectScatter", + coordinateSystem: "geo", + showEffectOn: "render", + zlevel: 1, + rippleEffect: { + period: 15, + scale: 4, + brushType: "fill", + }, + hoverAnimation: true, + label: { + normal: { + formatter: "{b}", + position: "right", + offset: [15, 0], + color: "#1DE9B6", + show: true, + }, + }, + itemStyle: { + normal: { + color: "#1DE9B6", + shadowBlur: 10, + shadowColor: "#333", + }, + }, + symbolSize: 2, + data: points, + }, + { + type: "lines", + zlevel: 2, + effect: { + show: true, + period: 2, //箭头指向速度，值越小速度越快 + trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重 + symbol: "arrow", //箭头图标 + symbolSize: 5, //图标大小 + }, + lineStyle: { + normal: { + color: "#1DE9B6", + width: 1, //线条宽度 + opacity: 0.1, //尾迹线条透明度 + curveness: 0.3, //尾迹线条曲直度 + }, + }, + data: [ + { + coords: [ + [115.179594, 34.647758], + [118.8062, 31.9208], + ], + lineStyle: {color: "#4ab2e5"}, + }, + { + coords: [ + [115.179594, 34.647758], + [127.9688, 45.368], + ], + lineStyle: {color: "#4fb6d2"}, + }, + { + coords: [ + [115.179594, 34.647758], + [110.3467, 41.4899], + ], + lineStyle: {color: "#52b9c7"}, + }, + { + coords: [ + [115.179594, 34.647758], + [125.8154, 44.2584], + ], + lineStyle: {color: "#5abead"}, + }, + { + coords: [ + [115.179594, 34.647758], + [116.4551, 40.2539], + ], + lineStyle: {color: "#f34e2b"}, + }, + { + coords: [ + [115.179594, 34.647758], + [123.1238, 42.1216], + ], + lineStyle: {color: "#f56321"}, + }, + { + coords: [ + [115.179594, 34.647758], + [114.4995, 38.1006], + ], + lineStyle: {color: "#f56f1c"}, + }, + { + coords: [ + [115.179594, 34.647758], + [117.4219, 39.4189], + ], + lineStyle: {color: "#f58414"}, + }, + { + coords: [ + [115.179594, 34.647758], + [112.3352, 37.9413], + ], + lineStyle: {color: "#f58f0e"}, + }, + { + coords: [ + [115.179594, 34.647758], + [109.1162, 34.2004], + ], + lineStyle: {color: "#f5a305"}, + }, + { + coords: [ + [115.179594, 34.647758], + [103.5901, 36.3043], + ], + lineStyle: {color: "#e7ab0b"}, + }, + { + coords: [ + [115.179594, 34.647758], + [106.3586, 38.1775], + ], + lineStyle: {color: "#dfae10"}, + }, + { + coords: [ + [115.179594, 34.647758], + [101.4038, 36.8207], + ], + lineStyle: {color: "#d5b314"}, + }, + { + coords: [ + [115.179594, 34.647758], + [103.9526, 30.7617], + ], + lineStyle: {color: "#c1bb1f"}, + }, + { + coords: [ + [115.179594, 34.647758], + [108.384366, 30.439702], + ], + lineStyle: {color: "#b9be23"}, + }, + { + coords: [ + [115.179594, 34.647758], + [113.0823, 28.2568], + ], + lineStyle: {color: "#a6c62c"}, + }, + { + coords: [ + [115.179594, 34.647758], + [102.9199, 25.46639], + ], + lineStyle: {color: "#96cc34"}, + }, + ], + }, + ], + }) + } + }, + { + e: 'data-05', + t: 4, + f: (e) => { + let plantCap = [ + { + name: "外观时尚", + value: "24231", + }, + { + name: "低碳环保", + value: "36232", + }, + { + name: "高端智能", + value: "45423", + }, + { + name: "老品牌", + value: "24542", + }, + ]; + + let datalist = [ + { + offset: [56, 48], + symbolSize: 120, + opacity: 0.95, + color: "#f467ce", + }, + { + offset: [35, 80], + symbolSize: 95, + opacity: 0.88, + color: "#7aabe2", + }, + { + offset: [20, 43], + symbolSize: 90, + opacity: 0.84, + color: "#ff7123", + }, + { + offset: [83, 30], + symbolSize: 90, + opacity: 0.8, + color: "#ffc400", + }, + { + offset: [36, 20], + symbolSize: 65, + opacity: 0.75, + color: "#5e333f", + }, + { + offset: [64, 10], + symbolSize: 70, + opacity: 0.7, + color: "#6b3442", + }, + { + offset: [75, 75], + symbolSize: 60, + opacity: 0.68, + color: "#8a3647", + }, + { + offset: [88, 62], + symbolSize: 50, + opacity: 0.6, + color: "#68333f", + }, + ]; + let datas = []; + for (var i = 0; i < plantCap.length; i++) { + var item = plantCap[i]; + var itemToStyle = datalist[i]; + datas.push({ + name: item.value + "\n" + item.name, + value: itemToStyle.offset, + symbolSize: itemToStyle.symbolSize, + label: { + normal: { + textStyle: { + fontSize: 11, + }, + }, + }, + itemStyle: { + normal: { + color: itemToStyle.color, + opacity: itemToStyle.opacity, + }, + }, + }); + } + this.$refs.chart7.setData({ + grid: { + show: false, + top: 10, + bottom: 10, + }, + xAxis: [ + { + gridIndex: 0, + type: "value", + show: false, + min: 0, + max: 100, + nameLocation: "middle", + nameGap: 5, + }, + ], + yAxis: [ + { + gridIndex: 0, + min: 0, + show: false, + max: 100, + nameLocation: "middle", + nameGap: 30, + }, + ], + series: [ + { + type: "scatter", + symbol: "circle", + symbolSize: 120, + label: { + normal: { + show: true, + formatter: "{b}", + color: "#fff", + textStyle: { + fontSize: "20", + }, + }, + }, + itemStyle: { + normal: { + color: "#00acea", + }, + }, + data: datas, + }, + ], + }) + } + }, + { + e: 'data-06', + i: "scada_dsj_zl_fx_01('CX_02')", + t: 1, + f: (v) => { + let e = v.map(vv => { + return { + name: vv['缺陷名称'] || vv.X_VALUE, + value: vv['缺陷数量'] || vv.Y_VALUE, + } + }) + + this.$refs.chart8.setData({ + tooltip: { + trigger: "item", + formatter: "{b} : {c} ({d}%)", + }, + polar: {}, + angleAxis: { + interval: 1, + type: "category", + data: [], + z: 10, + axisLine: { + show: false, + lineStyle: { + color: "#0B4A6B", + width: 1, + type: "solid", + }, + }, + axisLabel: { + interval: 0, + show: true, + color: "#0B4A6B00", + margin: 8, + fontSize: 16, + }, + }, + radiusAxis: { + min: 40, + max: 120, + interval: 20, + axisLine: { + show: false, + lineStyle: { + color: "#0B3E5E", + width: 1, + type: "solid", + }, + }, + axisLabel: { + formatter: "{value} %", + show: false, + padding: [0, 0, 20, 0], + color: "#0B3E5E", + fontSize: 16, + }, + splitLine: { + lineStyle: { + color: "#0B3E5E00", + width: 2, + type: "solid", + }, + }, + }, + calculable: true, + series: [ + { + stack: "a", + type: "pie", + radius: ["0%", "80%"], + roseType: "area", + zlevel: 10, + label: { + normal: { + show: true, + formatter: "{b}\n{d}%", + textStyle: { + fontSize: 12, + color: '#fff' + }, + position: "outside", + }, + emphasis: { + show: true, + }, + }, + labelLine: { + normal: { + show: true, + length: 20, + length2: 55, + }, + emphasis: { + show: false, + }, + }, + data: e + }, + ], + }) + } + }, + { + e: 'data-07', + i: "scada_dsj_cl_tj_01('CX_02')", + t: 1, + f: (e) => { + console.log(e) + this.hj = e.map(v => v['产量'] || v.Y_VALUE).reduce((a, b) => a + b) + + this.$refs.chart9.setData({ + tooltip: { + textStyle: { + fontSize: 0.8 * vw + } + }, + grid: { + top: "10%", + left: "1%", + right: "1%", + bottom: "1%", + containLabel: true, + }, + xAxis: { + data: e.map(v => v['日期'] || v.X_VALUE), + axisLine: { + lineStyle: { + color: "#0177d4", + }, + }, + axisLabel: { + color: "#fff", + fontSize: 0.8 * vw, + interval: 0, + }, + }, + yAxis: { + nameTextStyle: { + color: "#fff", + fontSize: 0.8 * vw, + }, + axisLine: { + lineStyle: { + color: "#0177d4", + }, + }, + axisLabel: { + color: "#fff", + fontSize: 0.8 * vw, + }, + splitLine: { + show: false, + lineStyle: { + color: "#0177d4", + }, + }, + }, + series: [ + { + type: "bar", + barWidth: '60%', + label: { + show: true, + position: 'top', + textStyle: { + fontSize: 0.6 * vw, + color: '#fff' + }, + }, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00b0ff", + }, + { + offset: 0.8, + color: "#7052f4", + }, + ], + false + ), + }, + }, + data: e.map(v => v['产量'] || v.Y_VALUE), + } + ], + }) + } + }, + { + e: 'data-08', + t: 4, + f: (e) => { + this.$refs.chart10_1.setData({ + series: [ + { + type: "pie", + clockWise: false, + radius: ['60%', '75%'], + itemStyle: { + normal: { + label: { + show: false, + }, + labelLine: { + show: false, + }, + shadowBlur: 0, + shadowColor: "#ff8c37", + }, + }, + hoverAnimation: false, + center: ["50%", "50%"], + data: [ + { + value: e?.[0]?.['数值'], + label: { + normal: { + rich: { + a: { + color: "#ff8c37", + align: "center", + fontSize: 1.1 * vw, + fontWeight: "bold", + }, + b: { + color: "#fff", + align: "center", + fontSize: 0.9 * vw, + }, + }, + formatter: function (params) { + return ( + "{a|" + + params.value + + "}" + + "\n{b|" + e?.[0]?.['名称'] + "}" + ); + }, + position: "center", + show: true, + textStyle: { + fontSize: "14", + fontWeight: "normal", + color: "#fff", + }, + }, + }, + itemStyle: { + normal: { + color: "#ff8c37", + shadowColor: "#ff8c37", + shadowBlur: 0, + }, + }, + }, + { + value: 0, + name: "invisible", + itemStyle: { + normal: { + color: "#412a4e", + }, + emphasis: { + color: "#412a4e", + }, + }, + }, + ], + }, + ], + }) + this.$refs.chart10_2.setData({ + series: [ + { + type: "pie", + clockWise: false, + radius: ['60%', '75%'], + itemStyle: { + normal: { + label: { + show: false, + }, + labelLine: { + show: false, + }, + shadowBlur: 0, + shadowColor: "#389af4", + }, + }, + hoverAnimation: false, + center: ["50%", "50%"], + data: [ + { + value: e?.[1]?.['数值'], + label: { + normal: { + rich: { + a: { + color: "#389af4", + align: "center", + fontSize: 1.1 * vw, + fontWeight: "bold", + }, + b: { + color: "#fff", + align: "center", + fontSize: 0.9 * vw, + }, + }, + formatter: function (params) { + return ( + "{a|" + + params.value + + "}" + + "\n{b|" + e?.[1]?.['名称'] + "}" + ); + }, + position: "center", + show: true, + textStyle: { + fontSize: "14", + fontWeight: "normal", + color: "#fff", + }, + }, + }, + itemStyle: { + normal: { + color: "#389af4", + shadowColor: "#389af4", + shadowBlur: 0, + }, + }, + }, + { + value: 0, + name: "invisible", + itemStyle: { + normal: { + color: "#412a4e", + }, + emphasis: { + color: "#412a4e", + }, + }, + }, + ], + }, + ], + }) + this.$refs.chart10_3.setData({ + series: [ + { + type: "pie", + clockWise: false, + radius: ['60%', '75%'], + itemStyle: { + normal: { + label: { + show: false, + }, + labelLine: { + show: false, + }, + shadowBlur: 0, + shadowColor: "#ffc257", + }, + }, + hoverAnimation: false, + center: ["50%", "50%"], + data: [ + { + value: e?.[2]?.['数值'], + label: { + normal: { + rich: { + a: { + color: "#ffc257", + align: "center", + fontSize: 1.1 * vw, + fontWeight: "bold", + }, + b: { + color: "#fff", + align: "center", + fontSize: 0.9 * vw, + }, + }, + formatter: function (params) { + return ( + "{a|" + + params.value + + "%}" + + "\n{b|" + e?.[2]?.['名称'] + "}" + ); + }, + position: "center", + show: true, + textStyle: { + fontSize: "14", + fontWeight: "normal", + color: "#fff", + }, + }, + }, + itemStyle: { + normal: { + color: "#ffc257", + shadowColor: "#ffc257", + shadowBlur: 0, + }, + }, + }, + { + value: 0, + name: "invisible", + itemStyle: { + normal: { + color: "#412a4e", + }, + emphasis: { + color: "#412a4e", + }, + }, + }, + ], + }, + ], + }) + } + }, + { + e: 'data-09', + t: 4, + f: (e) => { + this.$refs.chart11.setData({ + grid: { + top: "20%", + left: "1%", + right: "5%", + bottom: "1%", + containLabel: true, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + legend: { + right: '0', + data: ['隐患数', '闭环数'], + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + xAxis: [ + { + type: 'category', + axisTick: {show: false}, + axisLabel: { + rotate: -20, + interval: 0, + margin: 20, + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + data: e.map(v => v['日期']), + } + ], + yAxis: [ + { + axisLabel: { + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + splitLine: { + lineStyle: { + color: "rgba(255,255,255,0.1)", + }, + }, + type: 'value' + } + ], + series: [ + { + name: '隐患数', + type: 'bar', + barGap: 0, + emphasis: { + focus: 'series' + }, + barWidth: '40%', + barMaxWidth: '50px', + itemStyle: { + //图形样式 + normal: { + color: true ? '#db8151' : "#64BCEC", + }, + }, + label: { + show: true, + position: "top", + formatter: (e) => { + if (e.data === 0) { + return '' + } else { + return e.data + } + }, + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.6 * vw + }, + }, + data: e.map(v => v['隐患数']), + }, + { + name: '闭环数', + type: 'bar', + emphasis: { + focus: 'series' + }, + barWidth: '40%', + barMaxWidth: '50px', + barGap: '40%', + label: { + show: true, + position: "top", + formatter: (e) => { + if (e.data === 0) { + return '' + } else { + return e.data + } + }, + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.6 * vw + }, + }, + itemStyle: { + //图形样式 + normal: { + color: true ? '#9ce375' : "#4FD3B9", + }, + }, + data: e.map(v => v['闭环数']), + }, + ] + }) + } + }, + { + e: 'data-10', + t: 4, + f: (e) => { + this.$refs.chart12.setData({ + tooltip: {}, + grid: { + top: "25%", + left: "5%", + right: "1%", + bottom: "8%", + containLabel: true, + }, + legend: { + itemGap: 50, + top: "3%", + textStyle: { + fontSize: 0.6 * vw, + color: "#f9f9f9", + borderColor: "#fff", + }, + }, + xAxis: [ + { + type: "category", + boundaryGap: true, + axisLine: { + //坐标轴轴线相关设置。数学上的x轴 + show: true, + lineStyle: { + color: "#f9f9f9", + }, + }, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.4 * vw, + }, + }, + axisTick: { + show: false, + }, + data: e.map(v => v['日期']), + }, + ], + yAxis: [ + { + name: '不良率', + type: "value", + min: 0, + splitLine: { + show: true, + lineStyle: { + color: "#0a3256", + }, + }, + axisLine: { + show: false, + }, + axisLabel: { + margin: 5, + textStyle: { + color: "#d1e6eb", + }, + fontSize: 0.4 * vw, + formatter: '{value}%' + }, + axisTick: { + show: false, + }, + }, + ], + series: [ + { + name: "当年市场不良率", + type: "line", + // smooth: true, //是否平滑曲线显示 + // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 + showAllSymbol: true, + symbol: "emptyCircle", + symbolSize: 6, + lineStyle: { + normal: { + color: "#e8f1ff", // 线条颜色 + }, + borderColor: "#28ffb3", + }, + label: { + show: true, + position: "bottom", + fontSize: 0.4 * vw, + textStyle: { + color: "#fff", + }, + formatter: '{c}%' + }, + itemStyle: { + normal: { + color: "#28ffb3", + }, + }, + tooltip: { + show: false, + }, + data: e.map(v => v['当年市场不良率']), + }, + { + name: "目标市场不良率", + type: "line", + // smooth: true, //是否平滑曲线显示 + // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 + showAllSymbol: true, + symbol: "emptyCircle", + symbolSize: 6, + lineStyle: { + normal: { + color: "#4268aa", // 线条颜色 + }, + borderColor: "#ecf3ff", + }, + label: { + show: true, + position: "top", + fontSize: 0.4 * vw, + textStyle: { + color: "#fff", + }, + formatter: '{c}%' + }, + itemStyle: { + normal: { + color: "#28ffb3", + }, + }, + tooltip: { + show: false, + }, + data: e.map(v => v['目标市场不良率']), + }, + ], + }) + } }, ], - time: '', - date: '', - - - RequestDataSet: [ + RequestDataSet2: [ { e: 'data-01', - t: 4, + i: "scada_aq_pro_three_02('')", + t: 1, f: (e) => { - console.log(e) let data = { yNameOne: [], yData: [] } e.forEach((i, k) => { - data.yNameOne.push(i['订单号']) - data.yData.push(i['完成率']) + data.yNameOne.push(i['订单号'] || i.COLUMN_B) + data.yData.push(i['完成率'] || Math.min(((i.COLUMN_E == 0 ? 0 : (i.COLUMN_D / i.COLUMN_E)) * 100), 100).toFixed(2)) }) const chart1Option = (data, id) => { clearInterval(time1) @@ -217,6 +3472,7 @@ export default { show: false, }, axisLabel: { + interval: 0, color: "#fff", // margin:150, fontSize: 0.75 * vw, @@ -310,9 +3566,9 @@ export default { }, { e: 'data-02', - t: 4, + i: "scada_aq_zj_gx_01('')", + t: 1, f: (e) => { - this.$refs.chart4.setData({ tooltip: {}, grid: { @@ -470,7 +3726,8 @@ export default { }, { e: 'data-03', - t: 4, + i: "scada_dsj_dd_lly_01('')", + t: 1, f: (e) => { this.$refs.chart5.setData({ tooltip: {}, @@ -510,7 +3767,7 @@ export default { axisTick: { show: false, }, - data: e.map(v => v['日期']), + data: e.map(v => v['日期'] || v.X_VALUE), }, ], yAxis: [ @@ -586,7 +3843,7 @@ export default { color: '#9fe080' }, }, - data: e.map(v => v['产量']), + data: e.map(v => v['产量'] || v.Y_VALUE_ONE), }, { name: "订单履约率", @@ -620,7 +3877,7 @@ export default { tooltip: { show: false, }, - data: e.map(v => v['履约率']), + data: e.map(v => v['履约率'] || v.Y_VALUE_TWO), }, ], }) @@ -1081,12 +4338,13 @@ export default { }, { e: 'data-06', - t: 4, + i: "scada_dsj_zl_fx_01('')", + t: 1, f: (v) => { let e = v.map(vv => { return { - name: vv['缺陷名称'], - value: vv['缺陷数量'], + name: vv['缺陷名称'] || vv.X_VALUE, + value: vv['缺陷数量'] || vv.Y_VALUE, } }) @@ -1184,8 +4442,11 @@ export default { }, { e: 'data-07', - t: 4, + i: "scada_dsj_cl_tj_01('')", + t: 1, f: (e) => { + console.log(e) + this.hj = e.map(v => v['产量'] || v.Y_VALUE).reduce((a, b) => a + b) this.$refs.chart9.setData({ tooltip: { @@ -1201,7 +4462,7 @@ export default { containLabel: true, }, xAxis: { - data: e.map(v => v['日期']), + data: e.map(v => v['日期'] || v.X_VALUE), axisLine: { lineStyle: { color: "#0177d4", @@ -1267,7 +4528,7 @@ export default { ), }, }, - data: e.map(v => v['产量']), + data: e.map(v => v['产量'] || v.Y_VALUE), } ], }) @@ -1808,161 +5069,68 @@ export default { }, mounted() { - this.RequestDataSet.forEach(val => { - mixData(val, 2) - }) - intervalFun = setInterval(() => { + + if (this.nowLine === 1) { this.RequestDataSet.forEach(val => { - mixData(val, 2) + mixData(val,2) + }) + } + if (this.nowLine === 2) { + this.RequestDataSet1.forEach(val => { + mixData(val,2) }) + } + if (this.nowLine === 3) { + this.RequestDataSet2.forEach(val => { + mixData(val,2) + }) + } + intervalFun = setInterval(() => { + if (this.nowLine === 1) { + this.RequestDataSet.forEach(val => { + mixData(val,2) + }) + } + if (this.nowLine === 2) { + this.RequestDataSet1.forEach(val => { + mixData(val,2) + }) + } + if (this.nowLine === 3) { + this.RequestDataSet2.forEach(val => { + mixData(val,2) + }) + } }, 1000 * 10) echarts.registerMap('china', chinaMap); - this.$refs.chart12.setData({ - tooltip: {}, - grid: { - top: "25%", - left: "5%", - right: "1%", - bottom: "8%", - containLabel: true, - }, - legend: { - itemGap: 50, - top: "3%", - textStyle: { - fontSize: 0.6 * vw, - color: "#f9f9f9", - borderColor: "#fff", - }, - }, - xAxis: [ - { - type: "category", - boundaryGap: true, - axisLine: { - //坐标轴轴线相关设置。数学上的x轴 - show: true, - lineStyle: { - color: "#f9f9f9", - }, - }, - axisLabel: { - //坐标轴刻度标签的相关设置 - textStyle: { - color: "#d1e6eb", - margin: 15, - fontSize: 0.4 * vw, - }, - }, - axisTick: { - show: false, - }, - data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], - }, - ], - yAxis: [ - { - name: '不良率', - type: "value", - min: 0, - splitLine: { - show: true, - lineStyle: { - color: "#0a3256", - }, - }, - axisLine: { - show: false, - }, - axisLabel: { - margin: 5, - textStyle: { - color: "#d1e6eb", - }, - fontSize: 0.4 * vw, - formatter: '{value}%' - }, - axisTick: { - show: false, - }, - }, - ], - series: [ - { - name: "当年市场不良率", - type: "line", - // smooth: true, //是否平滑曲线显示 - // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 - showAllSymbol: true, - symbol: "emptyCircle", - symbolSize: 6, - lineStyle: { - normal: { - color: "#e8f1ff", // 线条颜色 - }, - borderColor: "#28ffb3", - }, - label: { - show: true, - position: "bottom", - fontSize: 0.4 * vw, - textStyle: { - color: "#fff", - }, - formatter: '{c}%' - }, - itemStyle: { - normal: { - color: "#28ffb3", - }, - }, - tooltip: { - show: false, - }, - data: [1.4, 2.5, 2.2, 2.2, 2.2, 1.5, 2.2], - }, - { - name: "目标市场不良率", - type: "line", - // smooth: true, //是否平滑曲线显示 - // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 - showAllSymbol: true, - symbol: "emptyCircle", - symbolSize: 6, - lineStyle: { - normal: { - color: "#4268aa", // 线条颜色 - }, - borderColor: "#ecf3ff", - }, - label: { - show: true, - position: "top", - fontSize: 0.4 * vw, - textStyle: { - color: "#fff", - }, - formatter: '{c}%' - }, - itemStyle: { - normal: { - color: "#28ffb3", - }, - }, - tooltip: { - show: false, - }, - data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3], - }, - ], - }) }, methods: { exitFun() { this.exit() }, + setLine(e) { + this.nowLine = e + if (e === 1) { + + this.RequestDataSet.forEach(val => { + mixData(val) + }) + } + if (e === 2) { + + this.RequestDataSet1.forEach(val => { + mixData(val) + }) + } + if (e === 3) { + + this.RequestDataSet2.forEach(val => { + mixData(val) + }) + } + } }, beforeDestroy() { getDateIntervalFun = null @@ -2167,4 +5335,22 @@ export default { height: 21.7%; } +.classSelect { + position: absolute; + top: 6.5%; + left: 4%; +} + +.el-radio { + color: #fff !important; +} + +.el-button { + background: #00000000 !important; + color: #fff !important; +} + +.clickLine { + color: #1890ff !important; +}