From 4fbeae35cd3fee6e17af802b7a24b57d56054bb0 Mon Sep 17 00:00:00 2001 From: mazhehui <364400343@qq.com> Date: Wed, 19 Jul 2023 18:02:33 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E6=B2=BB=E7=90=86=E7=AE=A1?= =?UTF-8?q?=E6=8E=A7=E5=8F=8A=E8=AE=BE=E5=A4=87=E5=88=86=E6=9E=90=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/powerQualityControl.vue | 1400 +++++++++++--------- src/views/ruralDomesticSewageTreatment.vue | 1002 ++++++++------ src/views/stationBuilding.vue | 317 +---- src/views/thirtyFiveKV.vue | 401 ++---- src/views/twentyKV.vue | 343 ++--- 5 files changed, 1704 insertions(+), 1759 deletions(-) diff --git a/src/views/powerQualityControl.vue b/src/views/powerQualityControl.vue index 7a008191..0592d951 100644 --- a/src/views/powerQualityControl.vue +++ b/src/views/powerQualityControl.vue @@ -5,16 +5,12 @@
- 预计年/月变化趋势 + 年度计划停电
-
- - 2022 -
@@ -23,15 +19,19 @@
- 年/月总投资变化趋势 + 月合格率统计分析
- - 2022 + + 2023-04-08 + 至 + 2023-09-08
@@ -43,7 +43,7 @@
- 县公司预算统计 + 计划停电
@@ -56,7 +56,98 @@
+ +
+
+
+ 大丰区 +
+
+
+
+
+ +
+ 　 +
+ 104 +
+
+

降   档

+
+
+
+ 　 +
+ 1425 +
+
+

配变停电

+
+
+
+ 　 +
+ 1 +
+
+

升   档

+
+
+
+ 　 +
+ 55 +
+
+

线路停电

+
+
+
+
@@ -68,10 +159,12 @@ src="../assets/index/总数据图标1.png" alt="" /> - 项目数 + 电压月合格率
-    9.279 万 +    100 %
@@ -85,11 +178,9 @@ src="../assets/index/总数据图标2.png" alt="" /> - 预算费用总和 + 合格率低用户数
-
-   118.5万 -
+
  5
@@ -102,9 +193,13 @@ src="../assets/index/总数据图标1.png" alt="" /> - 计划数 + 电压日合格率 -
  44
+
+    98.95 % +
@@ -117,9 +212,9 @@ src="../assets/index/总数据图标2.png" alt="" /> - 物科数 + 合格率低用户数 -
  10
+
  5
@@ -132,27 +227,97 @@
- 县物项目总投资比 + 数据分析统计
-
-
-
+
- 县物资占比分配 + 日合格率统计分析
-
+
-
+
+ + 2023-05-11 + 至 + 2023-05-16 +
+
@@ -171,6 +336,7 @@ + @@ -178,6 +344,7 @@ + @@ -311,54 +478,64 @@ export default { rowTime: "", pvTable: [ { - name: "国网东台区供电公司", - stationNumber: "0", - alternatorNumber: "1", + id: 1, + name: "南洋供电所", + stationNumber: "06", + alternatorNumber: "4630", }, { - name: "国网东台区供电公司", - stationNumber: "23", - alternatorNumber: "1", + id: 2, + name: "南洋供电所", + stationNumber: "06", + alternatorNumber: "4630", }, { - name: "国网东台区供电公司", - stationNumber: "1", - alternatorNumber: "3", + id: 3, + name: "南洋供电所", + stationNumber: "06", + alternatorNumber: "4630", }, { - name: "国网东台区供电公司", - stationNumber: "1", - alternatorNumber: "2", + id: 4, + name: "南洋供电所", + stationNumber: "06", + alternatorNumber: "4630", }, { - name: "国网东台区供电公司", - stationNumber: "14", - alternatorNumber: "3", + id: 5, + name: "南洋供电所", + stationNumber: "06", + alternatorNumber: "4630", }, { - name: "国网东台区供电公司", - stationNumber: "45.3w", - alternatorNumber: "2", + id: 6, + name: "南洋供电所", + stationNumber: "06", + alternatorNumber: "4630", }, { - name: "国网东台区供电公司", - stationNumber: "13.3w", - alternatorNumber: "1", + id: 7, + name: "南洋供电所", + stationNumber: "06", + alternatorNumber: "4630", }, { - name: "国网东台区供电公司", - stationNumber: "23", - alternatorNumber: "0", + id: 8, + name: "南洋供电所", + stationNumber: "06", + alternatorNumber: "4630", }, { - name: "国网东台区供电公司", - stationNumber: "23", - alternatorNumber: "0", + id: 9, + name: "南洋供电所", + stationNumber: "06", + alternatorNumber: "4630", }, { - name: "国网东台区供电公司", - stationNumber: "356.3w", - alternatorNumber: "2", + id: 10, + name: "南洋供电所", + stationNumber: "06", + alternatorNumber: "4630", }, ], }; @@ -368,71 +545,216 @@ export default { this.detailedTwo11(); this.detailedTwo22(); this.detailedTwo33(); - this.barCharts(); this.detailen(); + this.xianDuan(); }, methods: { + //地图画线 + xianDuan() { + var canvas = document.getElementById("myCanvas"); + var ctx = canvas.getContext("2d"); + ctx.moveTo(600, 500); // moveTo(x,y) 定义线条开始坐标 + ctx.lineTo(770, 120); // lineTo(x,y) 定义线条结束坐标 + ctx.strokeStyle = "orange"; + ctx.lineWidth = 5; + ctx.stroke(); + }, detailedTwo11() { - var fontColor = "#fff"; var myChart = this.$echarts.init(document.getElementById("detailedTwo1")); var option = { tooltip: { trigger: "axis", axisPointer: { - type: "shadow", + type: "cross", + crossStyle: { + color: "#999", + }, }, }, + legend: [ + { + x: "center", + data: ["平均停电时间(小时)", "平均停电频次(次/户)"], + textStyle: { + fontSize: 18, + color: "#fff", + }, + }, + { + x: "center", + top: "5%", + data: ["总时户数", "停电次数", "应采数"], + textStyle: { + fontSize: 18, + color: "#fff", + }, + }, + ], xAxis: [ { type: "category", - data: ["2018", "2019", "2020", "2021", "2022"], + data: ["2019", "2020", "2021", "2022"], + axisPointer: { + type: "shadow", + }, axisLabel: { - show: true, - textStyle: { - color: "#ffffff", - fontSize: "18", - }, + color: "#fff", + fontSize: "18", }, - axisLine: { - show: false, - }, - axisTick: { - show: false, - alignWithLabel: true, - }, - splitArea: { show: false }, }, ], yAxis: [ { type: "value", - name: "", + min: 0, + max: 5, + interval: 1, axisLabel: { + formatter: "{value} 万", textStyle: { - color: "#ffffff", fontSize: "18", }, }, + axisLine: { + lineStyle: { + color: "#fff", + }, + }, + splitLine: { + show: true, + lineStyle: { + type: "dashed", + // color: 'rgba(66, 192, 255, .3)', + color: "rgba(102,102,102,0.6)", + width: 1, + }, + }, + }, + { + type: "value", + min: 0, + max: 0.5, + interval: 0.1, + axisLabel: { + formatter: "{value}", + textStyle: { + fontSize: "18", + }, + }, + axisLine: { + lineStyle: { + color: "#fff", + }, + }, + splitLine: { + show: true, + lineStyle: { + type: "dashed", + // color: 'rgba(66, 192, 255, .3)', + color: "rgba(102,102,102,0.6)", + width: 1, + }, + }, }, ], series: [ { - name: "预计年变化趋势", + name: "平均停电时间(小时)", type: "bar", - barWidth: 40, + yAxisIndex: 1, + + tooltip: { + valueFormatter: function (value) { + return value; + }, + }, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 1, color: "rgba(86,254,226,.2) " }, - { offset: 0.5, color: "rgb(86,254,226,.6)" }, - { offset: 0, color: "rgb(86,254,226)" }, + { offset: 1, color: "rgba(240,230,140,.2) " }, + { offset: 0.5, color: "rgb(240,230,140,.6)" }, + { offset: 0, color: "rgb(240,230,140)" }, ]), borderRadius: [7, 7, 0, 0], // 柱状图圆角 borderWidth: 0, }, - emphasis: { - focus: "series", + data: [0.13, 0.23, 0.13, 0.23], + }, + { + name: "平均停电频次(次/户)", + type: "bar", + yAxisIndex: 1, + + tooltip: { + valueFormatter: function (value) { + return value; + }, }, - data: [320, 332, 301, 334, 390], + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 1, color: "rgba(65,105,225,.2) " }, + { offset: 0.5, color: "rgb(65,105,225,.6)" }, + { offset: 0, color: "rgb(65,105,225)" }, + ]), + borderRadius: [7, 7, 0, 0], // 柱状图圆角 + borderWidth: 0, + }, + data: [0.23, 0.13, 0.23, 0.13], + }, + { + name: "总时户数", + type: "line", + + tooltip: { + valueFormatter: function (value) { + return value; + }, + }, + itemStyle: { + normal: { + color: "#0080ff", + lineStyle: { + color: "#0080ff", + }, + }, + }, + data: [4, 3, 2, 4], + }, + { + name: "停电次数", + type: "line", + + tooltip: { + valueFormatter: function (value) { + return value; + }, + }, + itemStyle: { + normal: { + color: "#a6a600", + lineStyle: { + color: "#a6a600", + }, + }, + }, + data: [2, 3, 4, 3], + }, + { + name: "应采数", + type: "line", + tooltip: { + valueFormatter: function (value) { + return value; + }, + }, + itemStyle: { + normal: { + color: "#977000", + lineStyle: { + color: "#977000", + }, + }, + }, + data: [3, 1, 4, 2], }, ], }; @@ -446,48 +768,123 @@ export default { var myChart = this.$echarts.init(document.getElementById("detailedTwo2")); var option = { tooltip: { - show: true, - trigger: "item", + trigger: "axis", + axisPointer: { + type: "cross", + crossStyle: { + color: "#999", + }, + }, }, - grid: { - left: "3%", - right: "4%", - bottom: "3%", - containLabel: true, - }, - xAxis: { - type: "category", - boundaryGap: false, - axisLabel: { + legend: { + textStyle: { + fontSize: 16, color: "#fff", - fontSize: "16", }, - axisTick: { - show: false, - }, - splitLine: { - show: false, - lineStyle: { - color: "#195384", - }, - }, - data: ["2018", "2019", "2020", "2021", "2022"], + data: ["月合格率低用户数", "月合格率"], + // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直） + orient: "vertical", + // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） + x: "right", + // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）、 + y: "top", }, - yAxis: { - type: "value", - axisLine: { - lineStyle: { + xAxis: [ + { + type: "category", + data: ["4-08", "5-08", "6-08", "7-08", "8-08", "9-08"], + axisPointer: { + type: "shadow", + }, + axisLabel: { color: "#fff", + fontSize: "18", }, }, - }, + ], + yAxis: [ + { + type: "value", + min: 0, + max: 12000, + interval: 3000, + splitLine: { + show: true, + lineStyle: { + type: "dashed", + // color: 'rgba(66, 192, 255, .3)', + color: "rgba(102,102,102,0.6)", + width: 1, + }, + }, + axisLabel: { + formatter: "{value}", + textStyle: { + fontSize: "18", + }, + }, + axisLine: { + lineStyle: { + color: "#fff", + }, + }, + }, + { + type: "value", + min: 0, + max: 120, + interval: 30, + axisLabel: { + formatter: "{value} %", + textStyle: { + fontSize: "18", + }, + }, + splitLine: { + show: true, + lineStyle: { + type: "dashed", + // color: 'rgba(66, 192, 255, .3)', + color: "rgba(102,102,102,0.6)", + width: 1, + }, + }, + axisLine: { + lineStyle: { + color: "#fff", + }, + }, + }, + ], series: [ { - name: "总投资", + name: "月合格率低用户数", + type: "bar", + tooltip: { + valueFormatter: function (value) { + return value; + }, + }, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 1, color: "rgba(86,254,226,.2) " }, + { offset: 0.5, color: "rgb(86,254,226,.6)" }, + { offset: 0, color: "rgb(86,254,226)" }, + ]), + borderRadius: [7, 7, 0, 0], // 柱状图圆角 + borderWidth: 0, + }, + data: [4000, 7000, 6000, 8000, 7000, 9000], + }, + { + name: "月合格率", type: "line", - stack: "Total", - symbol: "none", - data: [80, 132, 101, 134, 121], + yAxisIndex: 1, + tooltip: { + valueFormatter: function (value) { + return value + " %"; + }, + }, itemStyle: { normal: { color: "yellow", @@ -496,6 +893,7 @@ export default { }, }, }, + data: [20, 45, 33, 45, 63, 72], }, ], }; @@ -505,410 +903,79 @@ export default { }); }, detailedTwo33() { - // note: 设置灰色背景色的长度的逻辑不够好，请自行调整 - var honorData = [ - { - name: "2019末", - data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400], - }, - { - name: "2020上半年", - data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400], - }, - { - name: "2020下半年", - data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400], - }, - { - name: "2021年", - data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400], - }, - ]; - var honorXAxisData = [ - "电机有限公司（合并）", - "电机有限公司（本部）", - "电气有限公司", - "西安电气有限公司", - "先锋电气有限公司", - "南非电机有限公司", - ]; - // // 设置灰色背景色的长度 - var isMax = 2000; - var bjData1 = [ - isMax, - isMax, - isMax, - isMax, - isMax, - isMax, - isMax, - isMax, - isMax, - ]; + 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 option = { - color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"], - tooltip: { - trigger: "axis", - axisPointer: { - type: "none", - }, - }, - backgroundColor: "#031f2d", - - legend: { - right: 5, - top: "5%", - itemWidth: 10, - itemHeight: 10, - itemGap: 15, - textStyle: { - color: "#ACCFFF", - fontSize: 16, - }, - }, grid: { - left: "5%", - right: "5%", - bottom: "5%", top: "10%", - containLabel: true, + left: "10%", + right: "12%", + bottom: "0%", }, - xAxis: [ - { - type: "value", + xAxis: { + show: false, + }, + yAxis: { + data: data.map((item, index) => `No. ${index}`), + splitLine: { 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, - }, }, - ], - yAxis: [ - { - type: "category", - axisLine: { - show: false, - }, - axisTick: { - show: false, - }, - axisLabel: { - color: "#6B9DD7", - fontSize: 16, // 文字大小 - fontWeight: 400, - interval: 0, - }, - offset: 20, - data: honorXAxisData, + axisLabel: { + textStyle: { fontSize: 18, color: "#02afff" }, }, - ], + axisLine: { + show: false, + }, + axisTick: false, + }, series: [ { - name: "2019末", - type: "bar", - stack: "zongliang", - barWidth: "35%", - zlevel: 10, - label: { - normal: { - show: true, - position: "inside", - textStyle: { - color: "#fff", - fontSize: 14, - }, - }, - }, - data: honorData[0].data, + type: "pictorialBar", + barWidth: barWidth, + zlevel: 2, + data: data.map(function (item) { + return { + value: item, + symbol: bar, + }; + }), }, { - name: "2020上半年", - type: "bar", - stack: "zongliang", - barWidth: "35%", - zlevel: 10, + type: "pictorialBar", + barWidth: barWidth, + data: data.map(function (item) { + return { + realValue: item, + value: maxNum, + symbol: bg, + }; + }), label: { - normal: { - show: true, - position: "top", - formatter: function (params) { - console.log(params); - // return params.seriesName + params.value ; - return "完成" + params.value; - }, - textStyle: { - color: "#fff", - fontSize: 12, - }, + show: true, + position: "right", + distance: 80, + align: "right", + formatter: function (params) { + return params.data.realValue + " 万"; }, + color: "#02afff", + fontSize: 18, }, - data: honorData[1].data, - }, - { - name: "2020下半年", - type: "bar", - stack: "zongliang", - barWidth: "35%", - zlevel: 10, - label: { - normal: { - show: true, - position: "top", - formatter: function (params) { - console.log(params); - // return params.seriesName + params.value ; - return "预算" + params.value; - }, - textStyle: { - color: "#fff", - fontSize: 12, - }, - }, - }, - data: honorData[2].data, - }, - { - name: "2021年", - type: "bar", - stack: "zongliang", - barWidth: "35%", - zlevel: 10, - label: { - normal: { - show: true, - position: "inside", - textStyle: { - color: "#fff", - fontSize: 14, - }, - }, - }, - data: honorData[3].data, }, ], }; - // var myChart = this.$echarts.init(document.getElementById("detailedTwo3")); - // var option = { - // grid: { - // left: "3%", - // right: "4%", - // bottom: "3%", - // containLabel: true, - // }, - // xAxis: { - // type: "value", - // show: false, - // }, - // yAxis: { - // type: "category", - // axisLine: { - // lineStyle: { - // color: "#206489", - // }, - // }, - // axisLabel: { - // color: "#fff", - // fontSize: "18", - // }, - // axisLine: { - // show: false, - // }, - // axisTick: { - // show: false, - // alignWithLabel: true, - // }, - // splitArea: { show: false }, - // data: ["No.5", "No.4", "No.3", "No.2", "No.1"], - // }, - // series: [ - // { - // name: "Direct", - // type: "bar", - // stack: "total", - // barWidth: 10, - // label: { - // show: true, - // }, - // emphasis: { - // focus: "series", - // }, - // data: [320, 302, 310, 299, 288], - // }, - // { - // name: "Mail Ad", - // type: "bar", - // stack: "total", - // barWidth: 10, - - // label: { - // show: true, - // }, - // emphasis: { - // focus: "series", - // }, - // data: [99, 88, 100, 101, 97], - // }, - // ], - // }; - myChart.setOption(option); - window.addEventListener("resize", () => { - myChart.resize(); - }); - }, - barCharts() { - var m2R2Data = [ - { - value: 335, - legendname: "22%", - name: "国网大丰市供电公司", - itemStyle: { color: "#8d7fec" }, - }, - { - value: 310, - legendname: "22%", - name: "盐城运维检修部(检修分公司)", - itemStyle: { color: "#5085f2" }, - }, - { - value: 234, - legendname: "22%", - name: "国网射阳县供电公司", - itemStyle: { color: "#e75fc3" }, - }, - { - value: 154, - legendname: "22%", - name: "国网响水县供电公司", - itemStyle: { color: "#f87be2" }, - }, - { - value: 335, - legendname: "22%", - name: "设备管理部", - itemStyle: { color: "#f2719a" }, - }, - { - value: 335, - legendname: "22%", - name: "开发区供电服务中心", - itemStyle: { color: "#fca4bb" }, - }, - ]; - var myChart = this.$echarts.init(document.getElementById("barCharts")); - var option = { - title: [ - { - text: "总计", - subtext: 59.53 + "万", - textStyle: { - fontSize: 20, - color: "#fff", - }, - subtextStyle: { - fontSize: 20, - color: "yellow", - }, - textAlign: "center", - x: "34.5%", - y: "44%", - }, - ], - tooltip: { - trigger: "item", - formatter: function (parms) { - var str = - parms.seriesName + - "
" + - parms.marker + - "" + - parms.data.legendname + - "
" + - "数量：" + - parms.data.value + - "
" + - "占比：" + - parms.percent + - "%"; - return str; - }, - }, - legend: { - type: "scroll", - orient: "vertical", - left: "70%", - align: "left", - top: "middle", - textStyle: { - color: "white", - fontSize: 16, - }, - height: 250, - }, - series: [ - { - type: "pie", - center: ["35%", "50%"], - radius: ["40%", "65%"], - clockwise: false, //饼图的扇区是否是顺时针排布 - avoidLabelOverlap: false, - lable: { - normal: { - show: true, - textStyle: { - fontSize: 18, - }, - }, - emphasis: { - show: true, - }, - }, - - labelLine: { - normal: { - length: 40, //第一条线 - length: 10, //第二条线 - lineStyle: { - width: 3, // 线条的宽度 - color: "rgb(86,254,226)", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色 - }, - }, - }, - - itemStyle: { - normal: { - borderRadius: 10, - borderColor: "transparent", - borderWidth: 2, - label: { - show: true, - formatter: " {d}% ", - fontSize: 20, - color: "#fff", - }, - }, - }, - - data: m2R2Data, - }, - ], - }; myChart.setOption(option); window.addEventListener("resize", () => { myChart.resize(); @@ -917,91 +984,133 @@ export default { detailen() { var myChart = this.$echarts.init(document.getElementById("detailen")); var option = { - color: [ - "#A0CE3A", - "#31C5C0", - "#1E9BD1", - "#0F347B", - "#585247", - "#7F6AAD", - "#009D85", - "rgba(250,250,250,0.3)", - ], - tooltip: { - trigger: "item", - formatter: "{a}
{b} : {c} ({d}%)", + trigger: "axis", + axisPointer: { + type: "cross", + crossStyle: { + color: "#999", + }, + }, }, - legend: { - orient: "vertical", - top: "middle", - right: "5%", textStyle: { + fontSize: 16, color: "#fff", - fontSize: 18, }, - //格式化图例文本 - formatter(name) { - // console.log(option); - let than = option.series[0].data; //获取series中的data - let total = 0; - let tarValue; - for (let i = 0, l = than.length; i < l; i++) { - total += than[i].value; - if (than[i].name == name) { - tarValue = than[i].value; - } - } - let p = (tarValue / total) * 100; - return p.toFixed(2) + "%"; - }, - icon: "roundRect", - data: [ - "国网大丰市供电公司", - "设备管理部", - "国网射阳县供电公司", - "国网响水县供电公司", - "盐城运维检修部(检修分公司)", - "开发区供电服务中心", - ], + data: ["月合格率低用户数", "月合格率"], + // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直） + orient: "vertical", + // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px） + x: "right", + // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）、 + y: "top", }, - - calculable: true, + xAxis: [ + { + type: "category", + data: ["4-08", "5-08", "6-08", "7-08", "8-08", "9-08"], + axisPointer: { + type: "shadow", + }, + axisLabel: { + color: "#fff", + fontSize: "18", + }, + }, + ], + yAxis: [ + { + type: "value", + min: 0, + max: 12000, + interval: 3000, + axisLabel: { + formatter: "{value}", + textStyle: { + fontSize: "18", + }, + }, + splitLine: { + show: true, + lineStyle: { + type: "dashed", + // color: 'rgba(66, 192, 255, .3)', + color: "rgba(102,102,102,0.6)", + width: 1, + }, + }, + axisLine: { + lineStyle: { + color: "#fff", + }, + }, + }, + { + type: "value", + min: 0, + max: 120, + interval: 30, + axisLabel: { + formatter: "{value} %", + textStyle: { + fontSize: "18", + }, + }, + splitLine: { + show: true, + lineStyle: { + type: "dashed", + // color: 'rgba(66, 192, 255, .3)', + color: "rgba(102,102,102,0.6)", + width: 1, + }, + }, + axisLine: { + lineStyle: { + color: "#fff", + }, + }, + }, + ], series: [ { - type: "pie", - center: ["35%", "50%"], - radius: [30, 120], - roseType: "area", - labelLine: { - normal: { - length: 20, //第一条线 - length: 5, //第二条线 - lineStyle: { - width: 3, // 线条的宽度 - color: "rgb(86,254,226)", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色 - }, + name: "月合格率低用户数", + type: "bar", + tooltip: { + valueFormatter: function (value) { + return value; + }, + }, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 1, color: "rgba(86,254,226,.2) " }, + { offset: 0.5, color: "rgb(86,254,226,.6)" }, + { offset: 0, color: "rgb(86,254,226)" }, + ]), + borderRadius: [7, 7, 0, 0], // 柱状图圆角 + borderWidth: 0, + }, + data: [4000, 7000, 6000, 8000, 7000, 9000], + }, + { + name: "月合格率", + type: "line", + yAxisIndex: 1, + tooltip: { + valueFormatter: function (value) { + return value + " %"; }, }, - itemStyle: { normal: { - label: { - show: true, - fontSize: 20, - color: "#fff", + color: "yellow", + lineStyle: { + color: "yellow", }, }, }, - data: [ - { value: 22, name: "国网大丰市供电公司" }, - { value: 20, name: "设备管理部" }, - { value: 21, name: "国网射阳县供电公司" }, - { value: 25, name: "国网响水县供电公司" }, - { value: 20, name: "盐城运维检修部(检修分公司)" }, - { value: 30, name: "开发区供电服务中心" }, - ], + data: [20, 45, 33, 45, 63, 72], }, ], }; @@ -1027,16 +1136,17 @@ export default { } .enselect { position: absolute; - right: 30px; + // left: 30px; img { - float: right; + // position: relative; + float: left; } .text { - float: right; + position: absolute; + top: 5px; + left: 20px; // right: -10px; - margin-right: -60px; - font-size: 20px; - + font-size: 22px; color: #fff; } } @@ -1159,11 +1269,11 @@ export default { justify-content: space-between; #detailedTwo1 { width: 100%; - height: 350px; + height: 400px; } #detailedTwo2 { width: 100%; - height: 350px; + height: 400px; } } @@ -1248,11 +1358,72 @@ export default { margin-left: -20%; .allimg { position: relative; - left: 20.5%; + left: 30%; top: 35%; } } } + .imgboxtwo { + background: url("../assets/05/地图弹窗.png") no-repeat; + background-size: 100%; + float: right; + right: 5%; + top: 5%; + width: 28vh; + height: 28vh; + position: relative; + .content { + height: 70%; + padding: 15px 15px 15px 15px; + box-sizing: border-box; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + + .line { + width: 100%; + height: 100%; + display: flex; + flex-flow: column nowrap; + display: flex; + flex-wrap: wrap; + + .top { + flex-basis: calc(100% / 2); + height: 50%; + color: #fff; + } + .bottom { + flex-basis: calc(100% / 2); + height: 50%; + color: #fff; + } + } + + .total { + .num { + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + color: #ffffff; + h5 { + font-size: 28px; + } + .yellow { + color: yellow; + } + .orange { + color: orange; + } + span { + float: left; + font-size: 18px; + } + } + } + } + } .right { // width: 604px; @@ -1261,21 +1432,70 @@ export default { display: flex; flex-flow: column nowrap; justify-content: space-between; - #barCharts { - // width: 100%; - // height: calc(100% - 52px); - width: 90%; - height: calc(100% - 100px); - position: absolute; - } - #detailqe { - width: 100%; - height: 350px; - } #detailen { width: 100%; - height: 350px; + height: 400px; } + .content { + height: 80%; + padding: 15px 15px 15px 15px; + box-sizing: border-box; + display: flex; + flex-flow: row nowrap; + justify-content: space-between; + + .contentUl { + display: flex; + margin: 0; + padding: 10px; + width: 100%; + height: 100%; + /* flex布局 */ + display: flex; + // 开启换行 + flex-wrap: wrap; + // 主轴上两端对齐 + justify-content: space-between; + // 副轴上两端对齐 + align-content: space-between; + //li盒子大小设置 + li { + width: 24.5%; + height: 49%; + list-style: none; + img { + margin-top: 30%; + } + .text { + position: absolute; + z-index: 2; + left: 25%; + top: 20%; + align-items: center; + font-size: 32px; + color: yellow; + } + .texts { + color: orange; + position: absolute; + z-index: 2; + left: 25%; + top: 20%; + align-items: center; + font-size: 32px; + } + h4 { + color: #fff; + font-size: 18px; + display: flex; + justify-content: center; + align-items: flex-end; + line-height: 1; + } + } + } + } + .eqselect { span { font-size: 20px; diff --git a/src/views/ruralDomesticSewageTreatment.vue b/src/views/ruralDomesticSewageTreatment.vue index 7a008191..d0750b82 100644 --- a/src/views/ruralDomesticSewageTreatment.vue +++ b/src/views/ruralDomesticSewageTreatment.vue @@ -1,39 +1,18 @@
序号 县公司名称 物科数量 计划数量
{{ item.id }} {{ item.name }} {{ item.stationNumber }} {{ item.alternatorNumber }}