From 8cddbba5add5a3ce2fe8655562234ede5fe45514 Mon Sep 17 00:00:00 2001 From: mazhehui <364400343@qq.com> Date: Fri, 21 Jul 2023 16:55:35 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E9=A6=96=E9=A1=B5=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/powerQualityControl.vue | 265 +++++++++++++++++++++++------- src/views/thirtyFiveKV.vue | 233 ++++++++------------------ src/views/twentyKV.vue | 243 ++++++++++++++++++++------- 3 files changed, 463 insertions(+), 278 deletions(-) diff --git a/src/views/powerQualityControl.vue b/src/views/powerQualityControl.vue index 7ee8ab48..84ee2099 100644 --- a/src/views/powerQualityControl.vue +++ b/src/views/powerQualityControl.vue @@ -49,6 +49,14 @@
+
+ + 2023-04-08 + 至 + 2023-09-08 +
@@ -547,7 +555,7 @@ export default { this.detailedTwo33(); this.detailen(); this.xianDuan(); - window.parent.getLoc(); + window.parent.getLoc(); }, methods: { //地图画线 @@ -904,75 +912,202 @@ export default { }); }, detailedTwo33() { - var bg = - "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII="; - var bar = - "image://data:image/png;base64,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"; - var data = [20.3, 18.2, 11, 23.4, 29.1, 12, 16, 24]; - var barWidth = 20; - var maxNum = 0; - for (var i = 0; i < data.length; i++) { - if (data[i] > maxNum) { - maxNum = data[i]; - } - } var myChart = this.$echarts.init(document.getElementById("detailedTwo3")); + var honorData = [ + { + name: "60天内掉电客户数", + data: [15.4, 14.1, 13.3, 12.6, 13.6, 14.4, 15.1, 16.3, 18.6], + }, + { + name: "60天内掉电总数", + data: [9.4, 8.1, 7.3, 8.6, 6.6, 9.4, 8.1, 7.3, 8.6], + }, + ]; + var honorXAxisData = [ + "No.9", + "No.8", + "No.7", + "No.6", + "No.5", + "No.4", + "No.3", + "No.2", + "No.1", + ]; + var nameList = [ + "东台市", + "滨海县", + "大丰区", + "射阳县", + "亭湖区", + "建湖县", + "阜宁县", + "响水县", + "盐都区", + ]; var option = { + color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"], + tooltip: { + trigger: "axis", + axisPointer: { + type: "none", + }, + }, + legend: { + right: 5, + top: "5%", + itemWidth: 10, + itemHeight: 10, + itemGap: 25, + textStyle: { + color: "#fff", + fontSize: 18, + }, + }, grid: { - top: "10%", - left: "10%", - right: "12%", + top: "15%", + left: "14%", + right: "0%", bottom: "0%", }, - xAxis: { - show: false, - }, - yAxis: { - data: data.map((item, index) => `No. ${index}`), - splitLine: { + xAxis: [ + { + type: "value", show: false, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "#6B9DD7", + fontSize: 16, // 文字大小 + fontWeight: 400, + interval: 0, + formatter: function (value) { + return value + "(万元)"; + }, + }, + splitLine: { + show: false, + }, }, - axisLabel: { - textStyle: { fontSize: 18, color: "#02afff" }, + ], + yAxis: [ + { + type: "category", + offset: 17, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "#fff", + fontSize: 20, // 文字大小 + fontWeight: 700, + interval: 0, + }, + data: honorXAxisData, }, - axisLine: { - show: false, + { + //名称 + type: "category", + offset: -10, + position: "left", + axisLine: { + show: false, + }, + inverse: true, + axisTick: { + show: false, + }, + axisLabel: { + interval: 0, + color: "#fff", + align: "left", + verticalAlign: "bottom", + lineHeight: 40, + fontSize: 20, + }, + data: nameList, }, - axisTick: false, - }, + ], series: [ { - type: "pictorialBar", - barWidth: barWidth, - zlevel: 2, - data: data.map(function (item) { - return { - value: item, - symbol: bar, - }; - }), + name: "线路停电", + type: "bar", + stack: "zongliang", + barWidth: "25%", + barGap: 40, // 柱图之间的间距 + itemStyle: { + //自定义颜色 + // normal: { color: "orange" }, + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + //代表渐变色从正上方开始 + offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色 + color: "rgba(255,165,0,.4)", + }, //柱图渐变色 + { + offset: 1, //指100%处的颜色 + color: "rgb(255,165,0)", + }, + ]), + }, + label: { + normal: { + show: true, + position: ["80%", "-130%"], + formatter: function (params) { + return params.value; + }, + textStyle: { + color: "#fff", + fontSize: 18, + }, + }, + }, + + data: honorData[0].data, }, { - type: "pictorialBar", - barWidth: barWidth, - data: data.map(function (item) { - return { - realValue: item, - value: maxNum, - symbol: bg, - }; - }), - label: { - show: true, - position: "right", - distance: 80, - align: "right", - formatter: function (params) { - return params.data.realValue + " 万"; - }, - color: "#02afff", - fontSize: 18, + name: "配变停电", + type: "bar", + stack: "zongliang", + barWidth: "25%", + barGap: 40, // 柱图之间的间距 + itemStyle: { + //自定义颜色 + // normal: { color: "orange" }, + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + //代表渐变色从正上方开始 + offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色 + color: "#005BEA", + }, //柱图渐变色 + { + offset: 1, //指100%处的颜色 + color: "#00C6FB", + }, + ]), }, + label: { + normal: { + show: true, + position: ["80%", "-130%"], + formatter: function (params) { + return params.value; + }, + textStyle: { + color: "#fff", + fontSize: 18, + }, + }, + }, + data: honorData[1].data, }, ], }; @@ -1288,7 +1423,23 @@ export default { justify-content: space-between; #detailedTwo3 { width: 100%; - height: 500px; + height: 70vh; + } + .enselect { + position: absolute; + // left: 30px; + img { + // position: relative; + float: left; + } + .text { + position: absolute; + top: 5px; + left: 20px; + // right: -10px; + font-size: 22px; + color: #fff; + } } } diff --git a/src/views/thirtyFiveKV.vue b/src/views/thirtyFiveKV.vue index e5767ff8..108e53f4 100644 --- a/src/views/thirtyFiveKV.vue +++ b/src/views/thirtyFiveKV.vue @@ -202,19 +202,19 @@ //引入echarts import * as echarts from "echarts"; // 工单统计弹窗组件 -// import workOrder from "../component/workOrder.vue"; -// import ringMainUnit from "./HomePop/ringMainUnit.vue"; -// import routeDetail from "../component/routeDetail.vue"; +import workOrder from "../component/workOrder.vue"; +import ringMainUnit from "./HomePop/ringMainUnit.vue"; +import routeDetail from "../component/routeDetail.vue"; // 线路详情 import lineDetail from "../component/lineDetail.vue"; export default { name: "twentyKV", components: { - // ringMainUnit, //环网柜弹窗 - // workOrder, //工单统计弹窗 - // routeDetail, //线路故障跳闸明细 - // lineDetail, //线路详情弹窗 + ringMainUnit, //环网柜弹窗 + workOrder, //工单统计弹窗 + routeDetail, //线路故障跳闸明细 + lineDetail, //线路详情弹窗 }, data() { return { @@ -370,7 +370,6 @@ export default { this.detailedTwo33(); this.barCharts(); this.detailen(); - window.parent.getLoc(); }, methods: { detailedTwo11() { @@ -524,108 +523,54 @@ export default { }); }, detailedTwo33() { - var myChart = this.$echarts.init(document.getElementById("detailedTwo3")); - var honorData = [ - { - name: "60天内掉电客户数", - data: [15.4, 14.1, 13.3, 12.6, 13.6, 14.4, 15.1, 16.3, 18.6, 16.6], - }, - { - name: "60天内掉电总数", - data: [9.4, 8.1, 7.3, 8.6, 6.6, 9.4, 8.1, 7.3, 8.6, 6.6], - }, - ]; - var honorXAxisData = [ - "No.10", - "No.9", - "No.8", - "No.7", - "No.6", - "No.5", - "No.4", - "No.3", - "No.2", - "No.1", - ]; + var bg = + "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII="; + var bar = + "image://data:image/png;base64,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"; + var data = [20.3, 18.2, 11, 23.4, 29.1, 12, 16, 24]; var nameList = [ - "PMS_晨光满园9台区", - "滨河华苑3台区", - "PMS_晨光满园11台区", - "PMS_晨光满园7台区", - "PMS_碧桂园10#配变", - "PMS_碧桂园12#配变", - "晨光满园16台区", - "晨光满园14台区", - "滨河华苑7台区", - "PMS_中合六配变", + "盐城运维检修部(检修分公司)", + "国网响水县供电公司", + "国网滨海县供电公司", + "国网大丰县供电公司", + "国网射阳县供电公司", + "国网东台县供电公司", + "国网阜宁县供电公司", + "国网建湖县供电公司", ]; + var barWidth = 20; + var maxNum = 0; + for (var i = 0; i < data.length; i++) { + if (data[i] > maxNum) { + maxNum = data[i]; + } + } + var myChart = this.$echarts.init(document.getElementById("detailedTwo3")); var option = { - color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"], - tooltip: { - trigger: "axis", - axisPointer: { - type: "none", - }, - }, - legend: { - right: 5, - top: "5%", - itemWidth: 10, - itemHeight: 10, - itemGap: 25, - textStyle: { - color: "#fff", - fontSize: 18, - }, - }, grid: { - top: "15%", - left: "14%", - right: "0%", + top: "10%", + left: "10%", + right: "12%", bottom: "0%", }, - xAxis: [ + xAxis: { + show: false, + }, + yAxis: [ { - type: "value", - show: false, - axisLine: { - show: false, - }, - axisTick: { - show: false, - }, - axisLabel: { - color: "#6B9DD7", - fontSize: 16, // 文字大小 - fontWeight: 400, - interval: 0, - formatter: function (value) { - return value + "(万元)"; - }, - }, + data: data.map((item, index) => `No. ${index}`), splitLine: { show: false, }, - }, - ], - yAxis: [ - { - type: "category", - offset: 17, + axisLabel: { + textStyle: { fontSize: 18, color: "#30eee9" }, + }, axisLine: { show: false, }, - axisTick: { - show: false, - }, - axisLabel: { - color: "#fff", - fontSize: 20, // 文字大小 - fontWeight: 700, - interval: 0, - }, - data: honorXAxisData, + axisTick: false, }, + { //名称 type: "category", @@ -640,7 +585,7 @@ export default { }, axisLabel: { interval: 0, - color: "#fff", + color: ["#fff"], align: "left", verticalAlign: "bottom", lineHeight: 40, @@ -651,77 +596,37 @@ export default { ], series: [ { - name: "60天内掉电客户数", - type: "bar", - stack: "zongliang", - barWidth: "25%", - barGap: 40, // 柱图之间的间距 - itemStyle: { - //自定义颜色 - // normal: { color: "orange" }, - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { - //代表渐变色从正上方开始 - offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色 - color: "rgba(255,165,0,.4)", - }, //柱图渐变色 - { - offset: 1, //指100%处的颜色 - color: "rgb(255,165,0)", - }, - ]), - }, - label: { - normal: { - show: true, - position: ["80%", "-100%"], - formatter: function (params) { - return params.value; - }, - textStyle: { - color: "#fff", - fontSize: 18, - }, - }, - }, - - data: honorData[0].data, + type: "pictorialBar", + barWidth: barWidth, + zlevel: 2, + data: data.map(function (item) { + return { + value: item, + symbol: bar, + }; + }), }, { - name: "60天内掉电总数", - type: "bar", - stack: "zongliang", - barWidth: "25%", - barGap: 40, // 柱图之间的间距 - itemStyle: { - //自定义颜色 - // normal: { color: "orange" }, - color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ - { - //代表渐变色从正上方开始 - offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色 - color: "#005BEA", - }, //柱图渐变色 - { - offset: 1, //指100%处的颜色 - color: "#00C6FB", - }, - ]), - }, + type: "pictorialBar", + barWidth: barWidth, + data: data.map(function (item) { + return { + realValue: item, + value: maxNum, + symbol: bg, + }; + }), label: { - normal: { - show: true, - position: ["80%", "-100%"], - formatter: function (params) { - return params.value; - }, - textStyle: { - color: "#fff", - fontSize: 18, - }, + show: true, + position: "right", + distance: 80, + align: "right", + formatter: function (params) { + return params.data.realValue + " 万"; }, + color: "#30eee9", + fontSize: 18, }, - data: honorData[1].data, }, ], }; @@ -1163,7 +1068,7 @@ export default { justify-content: space-between; #detailedTwo3 { width: 100%; - height: 50vh; + height: 70vh; } } diff --git a/src/views/twentyKV.vue b/src/views/twentyKV.vue index 99113da6..35847c75 100644 --- a/src/views/twentyKV.vue +++ b/src/views/twentyKV.vue @@ -570,75 +570,204 @@ export default { }); }, detailedTwo33() { - var bg = - "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII="; - var bar = - "image://data:image/png;base64,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"; - var data = [20.3, 18.2, 11, 23.4, 29.1, 12, 16, 24]; - var barWidth = 20; - var maxNum = 0; - for (var i = 0; i < data.length; i++) { - if (data[i] > maxNum) { - maxNum = data[i]; - } - } var myChart = this.$echarts.init(document.getElementById("detailedTwo3")); + var honorData = [ + { + name: "60天内掉电客户数", + data: [15.4, 14.1, 13.3, 12.6, 13.6, 14.4, 15.1, 16.3, 18.6, 16.6], + }, + { + name: "60天内掉电总数", + data: [9.4, 8.1, 7.3, 8.6, 6.6, 9.4, 8.1, 7.3, 8.6, 6.6], + }, + ]; + var honorXAxisData = [ + "No.10", + "No.9", + "No.8", + "No.7", + "No.6", + "No.5", + "No.4", + "No.3", + "No.2", + "No.1", + ]; + var nameList = [ + "PMS_晨光满园9台区", + "滨河华苑3台区", + "PMS_晨光满园11台区", + "PMS_晨光满园7台区", + "PMS_碧桂园10#配变", + "PMS_碧桂园12#配变", + "晨光满园16台区", + "晨光满园14台区", + "滨河华苑7台区", + "PMS_中合六配变", + ]; var option = { + color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"], + tooltip: { + trigger: "axis", + axisPointer: { + type: "none", + }, + }, + legend: { + right: 5, + top: "5%", + itemWidth: 10, + itemHeight: 10, + itemGap: 25, + textStyle: { + color: "#fff", + fontSize: 18, + }, + }, grid: { - top: "10%", - left: "10%", - right: "12%", - bottom: "0%", + top: "15%", + left: "14%", + right: "1%", + bottom: "1%", }, - xAxis: { - show: false, - }, - yAxis: { - data: data.map((item, index) => `No. ${index}`), - splitLine: { + xAxis: [ + { + type: "value", show: false, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "#6B9DD7", + fontSize: 16, // 文字大小 + fontWeight: 400, + interval: 0, + formatter: function (value) { + return value + "(万元)"; + }, + }, + splitLine: { + show: false, + }, }, - axisLabel: { - textStyle: { fontSize: 18, color: "#02afff" }, + ], + yAxis: [ + { + type: "category", + offset: 17, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "#fff", + fontSize: 20, // 文字大小 + fontWeight: 700, + interval: 0, + }, + data: honorXAxisData, }, - axisLine: { - show: false, + { + //名称 + type: "category", + offset: -10, + position: "left", + axisLine: { + show: false, + }, + inverse: true, + axisTick: { + show: false, + }, + axisLabel: { + interval: 0, + color: "#fff", + align: "left", + verticalAlign: "bottom", + lineHeight: 40, + fontSize: 20, + }, + data: nameList, }, - axisTick: false, - }, + ], series: [ { - type: "pictorialBar", - barWidth: barWidth, - zlevel: 2, - data: data.map(function (item) { - return { - value: item, - symbol: bar, - }; - }), + name: "60天内掉电客户数", + type: "bar", + stack: "zongliang", + barWidth: "25%", + barGap: 40, // 柱图之间的间距 + itemStyle: { + //自定义颜色 + // normal: { color: "orange" }, + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + //代表渐变色从正上方开始 + offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色 + color: "rgba(255,165,0,.4)", + }, //柱图渐变色 + { + offset: 1, //指100%处的颜色 + color: "rgb(255,165,0)", + }, + ]), + }, + label: { + normal: { + show: true, + position: ["80%", "-150%"], + formatter: function (params) { + return params.value; + }, + textStyle: { + color: "#fff", + fontSize: 18, + }, + }, + }, + + data: honorData[0].data, }, { - type: "pictorialBar", - barWidth: barWidth, - data: data.map(function (item) { - return { - realValue: item, - value: maxNum, - symbol: bg, - }; - }), - label: { - show: true, - position: "right", - distance: 80, - align: "right", - formatter: function (params) { - return params.data.realValue + " 万"; - }, - color: "#02afff", - fontSize: 18, + name: "60天内掉电总数", + type: "bar", + stack: "zongliang", + barWidth: "25%", + barGap: 40, // 柱图之间的间距 + itemStyle: { + //自定义颜色 + // normal: { color: "orange" }, + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + //代表渐变色从正上方开始 + offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色 + color: "#005BEA", + }, //柱图渐变色 + { + offset: 1, //指100%处的颜色 + color: "#00C6FB", + }, + ]), }, + label: { + normal: { + show: true, + position: ["80%", "-150%"], + formatter: function (params) { + return params.value; + }, + textStyle: { + color: "#fff", + fontSize: 18, + }, + }, + }, + data: honorData[1].data, }, ], }; @@ -1058,7 +1187,7 @@ export default { justify-content: space-between; #detailedTwo3 { width: 100%; - height: 500px; + height: 70vh; } }