From fa5b92e1bb1f70387f5a9d70e90587f3f976cbe3 Mon Sep 17 00:00:00 2001
From: mazhehui <364400343@qq.com>
Date: Thu, 20 Jul 2023 09:04:28 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=8B=89=E5=8F=96=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/enterprisePollutionMonitoring.vue | 1642 ++++++++++++-------
 1 file changed, 1049 insertions(+), 593 deletions(-)

diff --git a/src/views/enterprisePollutionMonitoring.vue b/src/views/enterprisePollutionMonitoring.vue
index 7a008191..f6b5ebdf 100644
--- a/src/views/enterprisePollutionMonitoring.vue
+++ b/src/views/enterprisePollutionMonitoring.vue
@@ -1,20 +1,33 @@
 <template>
   <div class="home">
     <div class="left" id="left">
-      <div class="two" style="height: 49%">
+      <div class="one" style="height: 100%">
         <div class="cartitle">
           <div class="titleFont">
             <img src="./../assets/indexN/标题箭头.png" alt="" />
-            <span>预计年/月变化趋势</span>
+            <span>年度行业用电量排放量</span>
+            <img src="./../assets/indexN/标题箭头1.png" alt="" />
+          </div>
+        </div>
+        <div class="content">
+          <div class="line">
+            <div id="detailedTwo3"></div>
+            <div id="detailedTwo4"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="left1" id="left">
+      <div class="two" style="height: 49%">
+        <div class="cartitle">
+          <div class="titleFont">
+            <img src="./../assets/indexN/标题箭头.png" alt="" />
+            <span>年度计划停电</span>
             <img src="./../assets/indexN/标题箭头1.png" alt="" />
           </div>
         </div>
         <div class="content">
           <div class="line">
-            <div class="enselect">
-              <img src="../assets/02/地区选择下拉菜单.png" alt="" />
-              <span class="text">2022</span>
-            </div>
             <div id="detailedTwo1"></div>
           </div>
         </div>
@@ -23,40 +36,119 @@
         <div class="cartitle">
           <div class="titleFont">
             <img src="./../assets/indexN/标题箭头.png" alt="" />
-            <span>年/月总投资变化趋势</span>
+            <span>月合格率统计分析</span>
             <img src="./../assets/indexN/标题箭头1.png" alt="" />
           </div>
         </div>
         <div class="content">
           <div class="line">
             <div class="enselect">
-              <img src="../assets/02/地区选择下拉菜单.png" alt="" />
-              <span class="text">2022</span>
+              <img src="../assets/05/日期选择下拉框.png" alt="" />
+              <span class="text"
+                >2023-04-08
+                <span style="color: orange">至</span>
+                2023-09-08</span
+              >
             </div>
             <div id="detailedTwo2"></div>
           </div>
         </div>
       </div>
     </div>
-    <div class="left1" id="left">
-      <div class="one" style="height: 100%">
-        <div class="cartitle">
-          <div class="titleFont">
-            <img src="./../assets/indexN/标题箭头.png" alt="" />
-            <span>县公司预算统计</span>
-            <img src="./../assets/indexN/标题箭头1.png" alt="" />
-          </div>
-        </div>
-        <div class="content">
-          <div class="line">
-            <div id="detailedTwo3"></div>
-          </div>
-        </div>
-      </div>
-    </div>
     <div class="middle" id="middle">
       <div class="map" style="height: 100%">
+        <canvas
+          id="myCanvas"
+          width="1000"
+          height="600"
+          style="position: absolute"
+        ></canvas>
         <img class="allimg" src="../assets/indexN/大丰市选中.png" alt="" />
+        <div class="imgboxtwo">
+          <div class="cartitle">
+            <div class="titleFont" style="color: #fff; font-size: 26px">
+              大丰区
+            </div>
+          </div>
+          <div class="content">
+            <div class="line">
+              <div class="top">
+                <!-- <img src="../assets/05/弹窗图标1.png" alt="" /> -->
+                <div style="position: relative">
+                  <img src="../assets/05/弹窗图标1.png" /> 　
+                  <div
+                    style="
+                      position: absolute;
+                      z-index: 2;
+                      left: 35%;
+                      top: 35%;
+                      align-items: center;
+                      font-size: 26px;
+                      color: yellow;
+                    "
+                  >
+                    104
+                  </div>
+                </div>
+                <h4>降&nbsp;&nbsp;&nbsp;档</h4>
+              </div>
+              <div class="top">
+                <div style="position: relative">
+                  <img src="../assets/05/弹窗图标1.png" /> 　
+                  <div
+                    style="
+                      position: absolute;
+                      z-index: 2;
+                      left: 25%;
+                      top: 30%;
+                      font-size: 26px;
+                      color: yellow;
+                    "
+                  >
+                    1425
+                  </div>
+                </div>
+                <h4>配变停电</h4>
+              </div>
+              <div class="bottom">
+                <div style="position: relative">
+                  <img src="../assets/05/弹窗图标2.png" /> 　
+                  <div
+                    style="
+                      position: absolute;
+                      z-index: 2;
+                      left: 45%;
+                      top: 35%;
+                      font-size: 24px;
+                      color: orange;
+                    "
+                  >
+                    1
+                  </div>
+                </div>
+                <h4>升&nbsp;&nbsp;&nbsp;档</h4>
+              </div>
+              <div class="bottom">
+                <div style="position: relative">
+                  <img src="../assets/05/弹窗图标2.png" /> 　
+                  <div
+                    style="
+                      position: absolute;
+                      z-index: 2;
+                      left: 40%;
+                      top: 35%;
+                      font-size: 26px;
+                      color: orange;
+                    "
+                  >
+                    55
+                  </div>
+                </div>
+                <h4>线路停电</h4>
+              </div>
+            </div>
+          </div>
+        </div>
         <div class="imgboxone">
           <div class="contents">
             <div class="lines">
@@ -68,10 +160,12 @@
                       src="../assets/index/总数据图标1.png"
                       alt=""
                     />
-                    <span>项目数</span>
+                    <span>电压月合格率</span>
                   </div>
                   <h5 class="yellow">
-                    &nbsp;&nbsp;&nbsp;9.279 <span style="color: #fff">万</span>
+                    &nbsp;&nbsp;&nbsp;100&nbsp;<span style="color: #fff"
+                      >%</span
+                    >
                   </h5>
                 </div>
               </div>
@@ -85,11 +179,9 @@
                       src="../assets/index/总数据图标2.png"
                       alt=""
                     />
-                    <span>预算费用总和</span>
+                    <span>合格率低用户数</span>
                   </div>
-                  <h5 class="orange">
-                    &nbsp;&nbsp;118.5<span style="color: #fff">万</span>
-                  </h5>
+                  <h5 class="orange">&nbsp;&nbsp;5</h5>
                 </div>
               </div>
             </div>
@@ -102,9 +194,13 @@
                       src="../assets/index/总数据图标1.png"
                       alt=""
                     />
-                    <span>计划数</span>
+                    <span>电压日合格率</span>
                   </div>
-                  <h5 class="yellow">&nbsp;&nbsp;44</h5>
+                  <h5 class="yellow">
+                    &nbsp;&nbsp;&nbsp;98.95&nbsp;<span style="color: #fff"
+                      >%</span
+                    >
+                  </h5>
                 </div>
               </div>
             </div>
@@ -117,9 +213,9 @@
                       src="../assets/index/总数据图标2.png"
                       alt=""
                     />
-                    <span>物科数</span>
+                    <span>合格率低用户数</span>
                   </div>
-                  <h5 class="orange">&nbsp;&nbsp;10</h5>
+                  <h5 class="orange">&nbsp;&nbsp;5</h5>
                 </div>
               </div>
             </div>
@@ -132,27 +228,97 @@
         <div class="cartitle">
           <div class="titleFont">
             <img src="./../assets/indexN/标题箭头.png" alt="" />
-            <span>县物项目总投资比</span>
+            <span>数据分析统计</span>
             <img src="./../assets/indexN/标题箭头1.png" alt="" />
           </div>
         </div>
         <div class="content">
-          <div class="line">
-            <div id="barCharts"></div>
-          </div>
+          <ul class="contentUl">
+            <li>
+              <div style="position: relative; height: 80%">
+                <img src="../assets/05/数据分析图标.png" />
+                <div class="text">&nbsp;&nbsp;99</div>
+              </div>
+              <h4>需调档配变数量</h4>
+            </li>
+            <li>
+              <div style="position: relative; height: 80%">
+                <img src="../assets/05/数据分析图标.png" />
+                <div class="text">&nbsp;&nbsp;87</div>
+              </div>
+              <h4>负荷关注</h4>
+            </li>
+            <li>
+              <div style="position: relative; height: 80%">
+                <img src="../assets/05/数据分析图标.png" />
+                <div class="text">19005</div>
+              </div>
+              <h4>近60天停电配变数</h4>
+            </li>
+            <li>
+              <div style="position: relative; height: 80%">
+                <img src="../assets/05/数据分析图标.png" />
+                <div class="text">&nbsp;813</div>
+              </div>
+              <h4>近60天停电线路数</h4>
+            </li>
+            <li>
+              <div style="position: relative; height: 80%">
+                <img src="../assets/05/数据分析图标.png" />
+                <div class="texts">
+                  99.95
+                  <span style="font-size: 15px; color: #fff"
+                    >&nbsp;&nbsp;%</span
+                  >
+                </div>
+              </div>
+              <h4>当天供电可靠性</h4>
+            </li>
+            <li>
+              <div style="position: relative; height: 80%">
+                <img src="../assets/05/数据分析图标.png" />
+                <div class="texts">
+                  0.37
+                  <span style="font-size: 15px; color: #fff">次/户</span>
+                </div>
+              </div>
+              <h4>用户平均停电频次</h4>
+            </li>
+            <li>
+              <div style="position: relative; height: 80%">
+                <img src="../assets/05/数据分析图标.png" />
+                <div class="texts">
+                  0.37
+                  <span style="font-size: 15px; color: #fff"
+                    >&nbsp;&nbsp;小时</span
+                  >
+                </div>
+              </div>
+              <h4>用户平均停电时间</h4>
+            </li>
+            <li></li>
+          </ul>
         </div>
       </div>
       <div class="two" style="height: 49%">
         <div class="cartitle">
           <div class="titleFont">
             <img src="./../assets/indexN/标题箭头.png" alt="" />
-            <span>县物资占比分配</span>
+            <span>日合格率统计分析</span>
             <img src="./../assets/indexN/标题箭头1.png" alt="" />
           </div>
         </div>
-        <div class="content">
+        <div class="content" style="height: 100%">
           <div class="line">
-            <div id="detailen"></div>
+            <div class="enselect">
+              <img src="../assets/05/日期选择下拉框.png" alt="" />
+              <span class="text"
+                >2023-05-11
+                <span style="color: orange">至</span>
+                2023-05-16</span
+              >
+            </div>
+            <div id="detailen" style="height: 400px"></div>
           </div>
         </div>
       </div>
@@ -171,6 +337,7 @@
             <table>
               <thead style="color: #fff; font-size: 30px">
                 <tr>
+                  <td>序号</td>
                   <td>县公司名称</td>
                   <td>物科数量</td>
                   <td>计划数量</td>
@@ -178,6 +345,7 @@
               </thead>
               <tbody>
                 <tr v-for="(item, index) in pvTable" :key="index">
+                  <td>{{ item.id }}</td>
                   <td>{{ item.name }}</td>
                   <td>{{ item.stationNumber }}</td>
                   <td class="titleFont">{{ item.alternatorNumber }}</td>
@@ -311,54 +479,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 +546,217 @@ export default {
     this.detailedTwo11();
     this.detailedTwo22();
     this.detailedTwo33();
-    this.barCharts();
+    this.detailedTwo44();
     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 +770,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 +895,7 @@ export default {
                 },
               },
             },
+            data: [20, 45, 33, 45, 63, 72],
           },
         ],
       };
@@ -505,103 +905,284 @@ 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 myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
-
       var option = {
-        color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
         tooltip: {
           trigger: "axis",
           axisPointer: {
-            type: "none",
+            type: "shadow",
           },
         },
-        backgroundColor: "#031f2d",
-
         legend: {
-          right: 5,
-          top: "5%",
-          itemWidth: 10,
-          itemHeight: 10,
-          itemGap: 15,
           textStyle: {
-            color: "#ACCFFF",
-            fontSize: 16,
+            fontSize: 18, //字体大小
+            color: "#ffffff", //字体颜色
           },
-        },
-        grid: {
-          left: "5%",
-          right: "5%",
-          bottom: "5%",
-          top: "10%",
-          containLabel: true,
+
+          data: ["用电量", "碳排放量"],
         },
         xAxis: [
           {
-            type: "value",
-            show: false,
-            axisLine: {
-              show: false,
-            },
-            axisTick: {
-              show: false,
-            },
+            type: "category",
+            data: ["2530", "2541", "2542", "2550", "2610", "2621"],
             axisLabel: {
-              color: "#6B9DD7",
-              fontSize: 16, // 文字大小
-              fontWeight: 400,
-              interval: 0,
-              formatter: function (value) {
-                return value + "(万元)";
+              show: true,
+              textStyle: {
+                color: "#ffffff",
               },
             },
-            splitLine: {
-              show: false,
-            },
           },
         ],
+        yAxis: [
+          {
+            type: "value",
+            name: "",
+            axisLabel: {
+              textStyle: {
+                color: "#ffffff",
+              },
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: "dashed",
+                // color: 'rgba(66, 192, 255, .3)',
+                color: "rgba(102,102,102,0.6)",
+                width: 1,
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "碳排放量",
+            type: "bar",
+            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,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [320, 332, 301, 334, 390, 232],
+          },
+          {
+            name: "用电量",
+            type: "bar",
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: "rgba(255,255,0,.2) " },
+                { offset: 0.5, color: "rgb(255,255,0,.6)" },
+                { offset: 0, color: "rgb(255,255,0)" },
+              ]),
+              borderRadius: [7, 7, 0, 0], // 柱状图圆角
+              borderWidth: 0,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [220, 182, 191, 234, 290, 331],
+          },
+        ],
+      };
+
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    detailedTwo44() {
+      data = [
+        {
+          name: "本科及以上",
+          value: 13211,
+        },
+        {
+          name: "高中",
+          value: 42111,
+        },
+        {
+          name: "初中及以下",
+          value: 81711,
+        },
+        {
+          name: "其他",
+          value: 121711,
+        },
+      ];
+      arrName = getArrayValue(data, "name");
+      arrValue = getArrayValue(data, "value");
+      sumValue = eval(arrValue.join("+"));
+      objData = array2obj(data, "name");
+      optionData = getData(data);
+      function getArrayValue(array, key) {
+        var key = key || "value";
+        var res = [];
+        if (array) {
+          array.forEach(function (t) {
+            res.push(t[key]);
+          });
+        }
+        return res;
+      }
+
+      function array2obj(array, key) {
+        var resObj = {};
+        for (var i = 0; i < array.length; i++) {
+          resObj[array[i][key]] = array[i];
+        }
+        return resObj;
+      }
+
+      function getData(data) {
+        var res = {
+          series: [],
+          yAxis: [],
+        };
+        for (let i = 0; i < data.length; i++) {
+          res.series.push({
+            name: "学历",
+            type: "pie",
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            radius: [65 - i * 15 + "%", 57 - i * 15 + "%"],
+            center: ["30%", "55%"],
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+              borderWidth: 5,
+            },
+            data: [
+              {
+                value: data[i].value,
+                name: data[i].name,
+              },
+              {
+                value: sumValue - data[i].value,
+                name: "",
+                itemStyle: {
+                  color: "rgba(0,0,0,0)",
+                  borderWidth: 0,
+                },
+                tooltip: {
+                  show: false,
+                },
+                hoverAnimation: false,
+              },
+            ],
+          });
+          res.series.push({
+            name: "",
+            type: "pie",
+            silent: true,
+            z: 1,
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            radius: [65 - i * 15 + "%", 57 - i * 15 + "%"],
+            center: ["30%", "55%"],
+            label: {
+              show: false,
+            },
+            itemStyle: {
+              label: {
+                show: false,
+              },
+              labelLine: {
+                show: false,
+              },
+              borderWidth: 5,
+            },
+            data: [
+              {
+                value: 7.5,
+                itemStyle: {
+                  color: "#E3F0FF",
+                  borderWidth: 0,
+                },
+                tooltip: {
+                  show: false,
+                },
+                hoverAnimation: false,
+              },
+              {
+                value: 2.5,
+                name: "",
+                itemStyle: {
+                  color: "rgba(0,0,0,0)",
+                  borderWidth: 0,
+                },
+                tooltip: {
+                  show: false,
+                },
+                hoverAnimation: false,
+              },
+            ],
+          });
+          res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
+        }
+        return res;
+      }
+      var myChart = this.$echarts.init(document.getElementById("detailedTwo4"));
+      var option = {
+        backgroundColor: "#fff",
+        legend: {
+          show: true,
+          top: "center",
+          left: "70%",
+          data: arrName,
+          itemWidth: 30,
+          itemHeight: 20,
+          width: 50,
+          padding: [0, 5],
+          itemGap: 25,
+          formatter: function (name) {
+            return (
+              "{title|" + name + "}\n{value|" + objData[name].value + "人}"
+            );
+          },
+          textStyle: {
+            rich: {
+              title: {
+                fontSize: 10,
+                lineHeight: 10,
+                color: "rgba(0,0,0,.45)",
+              },
+              value: {
+                fontSize: 14,
+                lineHeight: 18,
+                color: "rgba(0,0,0,.85)",
+              },
+            },
+          },
+        },
+        tooltip: {
+          show: true,
+          trigger: "item",
+          formatter: "{a}<br>{b}:{c}({d}%)",
+        },
+        color: ["#FF8700", "#ffc300", "#00e473", "#009DFF"],
+        grid: {
+          top: "20%",
+          bottom: "48%",
+          left: "30%",
+          containLabel: false,
+        },
         yAxis: [
           {
             type: "category",
+            inverse: true,
             axisLine: {
               show: false,
             },
@@ -609,305 +1190,23 @@ export default {
               show: false,
             },
             axisLabel: {
-              color: "#6B9DD7",
-              fontSize: 16, // 文字大小
-              fontWeight: 400,
               interval: 0,
+              inside: true,
+              textStyle: {
+                color: "#000",
+                fontSize: 10,
+              },
+              show: true,
             },
-            offset: 20,
-            data: honorXAxisData,
+            data: optionData.yAxis,
           },
         ],
-        series: [
+        xAxis: [
           {
-            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,
-          },
-          {
-            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[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 +
-              "</br>" +
-              parms.marker +
-              "" +
-              parms.data.legendname +
-              "</br>" +
-              "数量：" +
-              parms.data.value +
-              "</br>" +
-              "占比：" +
-              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,
+            show: false,
           },
         ],
+        series: optionData.series,
       };
       myChart.setOption(option);
       window.addEventListener("resize", () => {
@@ -917,91 +1216,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} <br/>{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 +1368,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;
     }
   }
@@ -1157,13 +1499,13 @@ export default {
     display: flex;
     flex-flow: column nowrap;
     justify-content: space-between;
-    #detailedTwo1 {
+    #detailedTwo3 {
       width: 100%;
-      height: 350px;
+      height: 400px;
     }
-    #detailedTwo2 {
+    #detailedTwo4 {
       width: 100%;
-      height: 350px;
+      height: 400px;
     }
   }
 
@@ -1175,9 +1517,13 @@ export default {
     display: flex;
     flex-flow: column nowrap;
     justify-content: space-between;
-    #detailedTwo3 {
+    #detailedTwo1 {
       width: 100%;
-      height: 500px;
+      height: 400px;
+    }
+    #detailedTwo2 {
+      width: 100%;
+      height: 400px;
     }
   }
 
@@ -1248,11 +1594,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 +1668,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;

From 96f40f50f81ba1c5af90eb379d0295abfd2a57da Mon Sep 17 00:00:00 2001
From: mazhehui <364400343@qq.com>
Date: Thu, 20 Jul 2023 17:53:04 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=95=B0=E5=AD=97=E5=8C=96=E6=8E=92?=
 =?UTF-8?q?=E6=B6=9D=E6=8A=97=E6=97=B1=E5=92=8C=E4=B8=A4=E9=AB=98=E8=A1=8C?=
 =?UTF-8?q?=E4=B8=9A=E4=BC=81=E4=B8=9A=E5=A4=A7=E5=B1=8F=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../digitalFloodDrainageDroughtRelief.vue     | 2220 ++++++++---------
 src/views/enterprisePollutionMonitoring.vue   | 1073 ++++----
 src/views/ruralDomesticSewageTreatment.vue    |   12 +-
 3 files changed, 1447 insertions(+), 1858 deletions(-)

diff --git a/src/views/digitalFloodDrainageDroughtRelief.vue b/src/views/digitalFloodDrainageDroughtRelief.vue
index 29d30691..6a875f1e 100644
--- a/src/views/digitalFloodDrainageDroughtRelief.vue
+++ b/src/views/digitalFloodDrainageDroughtRelief.vue
@@ -5,7 +5,7 @@
         <div class="cartitle">
           <div class="titleFont">
             <img src="./../assets/indexN/标题箭头.png" alt="" />
-            <span>年度计划停电</span>
+            <span>排涝泵用电量分析</span>
             <img src="./../assets/indexN/标题箭头1.png" alt="" />
           </div>
         </div>
@@ -19,110 +19,63 @@
         <div class="cartitle">
           <div class="titleFont">
             <img src="./../assets/indexN/标题箭头.png" alt="" />
-            <span>月合格率统计分析</span>
+            <span>排涝泵用电时长分析</span>
             <img src="./../assets/indexN/标题箭头1.png" alt="" />
           </div>
         </div>
         <div class="content">
           <div class="line">
-            <div class="enselect">
-              <img src="../assets/02/地区选择下拉菜单.png" alt="" />
-              <span class="text">2022</span>
-            </div>
             <div id="detailedTwo2"></div>
           </div>
         </div>
       </div>
     </div>
     <div class="left1" id="left">
-      <div class="one" style="height: 100%">
+      <div class="two" style="height: 49%">
         <div class="cartitle">
           <div class="titleFont">
             <img src="./../assets/indexN/标题箭头.png" alt="" />
-            <span>计划停电</span>
+            <span>建湖公司近两年汛情指数分析</span>
             <img src="./../assets/indexN/标题箭头1.png" alt="" />
           </div>
         </div>
         <div class="content">
           <div class="line">
-             <div class="enselect">
+            <div id="detailedTwo3"></div>
+          </div>
+        </div>
+      </div>
+      <div class="two" style="height: 49%">
+        <div class="cartitle">
+          <div class="titleFont">
+            <img src="./../assets/indexN/标题箭头.png" alt="" />
+            <span>用户电量详细分析</span>
+            <img src="./../assets/indexN/标题箭头1.png" alt="" />
+          </div>
+        </div>
+        <div class="content">
+          <div class="line">
+            <!-- <div class="enselect">
               <img src="../assets/02/地区选择下拉菜单.png" alt="" />
               <span class="text">2022</span>
-            </div>
-            <div id="detailedTwo3"></div>
+            </div> -->
+            <div id="detailedTwo4"></div>
           </div>
         </div>
       </div>
     </div>
     <div class="middle" id="middle">
       <div class="map" style="height: 100%">
-        <img class="allimg" src="../assets/indexN/大丰市选中.png" alt="" />
-        <div class="imgboxone">
-          <div class="contents">
-            <div class="lines">
-              <div class="total">
-                <div class="num">
-                  <div style="display: inline-block">
-                    <img
-                      style="float: left"
-                      src="../assets/index/总数据图标1.png"
-                      alt=""
-                    />
-                    <span>电压月合格率</span>
-                  </div>
-                  <h5 class="yellow">
-                    &nbsp;&nbsp;&nbsp;100<span style="color: #fff">%</span>
-                  </h5>
-                </div>
-              </div>
-            </div>
-            <div class="lines">
-              <div class="total">
-                <div class="num">
-                  <div style="display: inline-block">
-                    <img
-                      style="float: left; height: 30px; width: 30px"
-                      src="../assets/index/总数据图标2.png"
-                      alt=""
-                    />
-                    <span>合格率底用户数</span>
-                  </div>
-                  <h5 class="orange">
-                    &nbsp;&nbsp;5
-                  </h5>
-                </div>
-              </div>
-            </div>
-            <div class="lines">
-              <div class="total">
-                <div class="num">
-                  <div style="display: inline-block">
-                    <img
-                      style="float: left; height: 30px; width: 30px"
-                      src="../assets/index/总数据图标1.png"
-                      alt=""
-                    />
-                    <span>电压日合格率</span>
-                  </div>
-                  <h5 class="yellow">&nbsp;&nbsp;98.95<span style="color: #fff">%</span></h5>
-                </div>
-              </div>
-            </div>
-            <div class="lines">
-              <div class="total">
-                <div class="num">
-                  <div style="display: inline-block">
-                    <img
-                      style="float: left; height: 30px; width: 30px"
-                      src="../assets/index/总数据图标2.png"
-                      alt=""
-                    />
-                    <span>合格率底用户数</span>
-                  </div>
-                  <h5 class="orange">&nbsp;&nbsp;5</h5>
-                </div>
-              </div>
+        <canvas id="myCanvas" width="1000" height="700"></canvas>
+        <div class="imgboxtwo">
+          <div class="cartitle">
+            <div c>抗旱排涝启用清单</div>
+          </div>
+          <div class="content">
+            <div class="line">
+              <div id="detailedTwo5"></div>
             </div>
+            <div></div>
           </div>
         </div>
       </div>
@@ -132,21 +85,86 @@
         <div class="cartitle">
           <div class="titleFont">
             <img src="./../assets/indexN/标题箭头.png" alt="" />
-            <span>数据统计分析</span>
+            <span>数字化辅助地方排涝抗旱管理系统</span>
             <img src="./../assets/indexN/标题箭头1.png" alt="" />
           </div>
         </div>
         <div class="content">
-          <div class="line">
-            <div id="barCharts"></div>
-          </div>
+          <ul class="contentUl">
+            <li>
+              <div style="position: relative; height: 80%">
+                <img src="../assets/05/数据分析图标.png" />
+                <div class="text">
+                  &nbsp;&nbsp;10
+                  <span style="font-size: 15px; color: #fff"
+                    >&nbsp;&nbsp;个</span
+                  >
+                </div>
+              </div>
+              <h4>辖区管理供电所</h4>
+            </li>
+            <li>
+              <div style="position: relative; height: 80%">
+                <img src="../assets/05/数据分析图标.png" />
+                <div class="text" style="left: 10%">
+                  &nbsp;&nbsp;13884
+                  <span style="font-size: 15px; color: #fff"
+                    >&nbsp;&nbsp;个</span
+                  >
+                </div>
+              </div>
+              <h4>辖区管理台区</h4>
+            </li>
+            <li>
+              <div style="position: relative; height: 80%">
+                <img src="../assets/05/数据分析图标.png" />
+                <div class="text">
+                  &nbsp;306
+                  <span style="font-size: 15px; color: #fff">&nbsp;条</span>
+                </div>
+              </div>
+              <h4>自然村</h4>
+            </li>
+            <li>
+              <div style="position: relative; height: 80%">
+                <img src="../assets/05/数据分析图标.png" />
+                <div class="text" style="color: orange">
+                  9108
+                  <span style="font-size: 15px; color: #fff">台</span>
+                </div>
+              </div>
+              <h4>辖区管理配变</h4>
+            </li>
+            <li>
+              <div style="position: relative; height: 80%">
+                <img src="../assets/05/数据分析图标.png" />
+                <div class="texts">
+                  4776
+                  <span style="font-size: 15px; color: #fff"
+                    >&nbsp;&nbsp;户</span
+                  >
+                </div>
+              </div>
+              <h4>辖区用户</h4>
+            </li>
+            <li>
+              <div style="position: relative; height: 80%">
+                <img src="../assets/05/数据分析图标.png" />
+                <div class="texts">
+                  1094
+                  <span style="font-size: 15px; color: #fff">个</span>
+                </div>
+              </div>
+              <h4>辖区排涝泵</h4>
+            </li>
+          </ul>
         </div>
       </div>
       <div class="two" style="height: 49%">
         <div class="cartitle">
           <div class="titleFont">
             <img src="./../assets/indexN/标题箭头.png" alt="" />
-            <span>日合格率统计分析</span>
+            <span>设备老化明细情况分析</span>
             <img src="./../assets/indexN/标题箭头1.png" alt="" />
           </div>
         </div>
@@ -162,27 +180,29 @@
         <div class="cartitle">
           <div class="titleFont">
             <img src="./../assets/indexN/标题箭头.png" alt="" />
-            <span>用合格统计明细</span>
+            <span>数字化辅助地方排涝抗旱管理系统</span>
             <img src="./../assets/indexN/标题箭头1.png" alt="" />
           </div>
         </div>
         <div class="content">
           <div class="line">
+            <div class="enselect">
+              <img src="../assets/05/日期选择下拉框.png" alt="" />
+              <span class="text">辖区管理配变详情</span>
+            </div>
             <table>
               <thead style="color: #fff; font-size: 30px">
                 <tr>
-                  <td>序号</td>
-                   <td>供电单位</td>
-                  <td>用户类型</td>
-                  <td>应采数</td>
+                  <td>单位名称</td>
+                  <td>供电所名称</td>
+                  <td>配变名称</td>
                 </tr>
               </thead>
               <tbody>
                 <tr v-for="(item, index) in pvTable" :key="index">
-                <td>{{ index+1}}</td>
                   <td>{{ item.name }}</td>
                   <td>{{ item.stationNumber }}</td>
-                  <td class="titleFont">{{ item.alternatorNumber }}</td>
+                  <td>{{ item.alternatorNumber }}</td>
                 </tr>
               </tbody>
             </table>
@@ -313,307 +333,193 @@ export default {
       rowTime: "",
       pvTable: [
         {
-          name: "南阳供电所",
-          stationNumber: "06",
-          alternatorNumber: "4630",
+          name: "建湖县供电公司",
+          stationNumber: "上岗供电所",
+          alternatorNumber: "PMS_三港***配变更换",
         },
         {
-          name: "南阳供电所",
-          stationNumber: "06",
-          alternatorNumber: "4630",
-        },
-         {
-          name: "南阳供电所",
-          stationNumber: "06",
-          alternatorNumber: "4630",
+          name: "建湖县供电公司",
+          stationNumber: "上岗供电所",
+          alternatorNumber: "PMS_三港***配变更换",
         },
         {
-          name: "南阳供电所",
-          stationNumber: "06",
-          alternatorNumber: "4630",
+          name: "建湖县供电公司",
+          stationNumber: "上岗供电所",
+          alternatorNumber: "PMS_三港***配变更换",
         },
         {
-          name: "南阳供电所",
-          stationNumber: "06",
-          alternatorNumber: "4630",
+          name: "建湖县供电公司",
+          stationNumber: "上岗供电所",
+          alternatorNumber: "PMS_三港***配变更换",
         },
         {
-          name: "南阳供电所",
-          stationNumber: "06",
-          alternatorNumber: "4630",
+          name: "建湖县供电公司",
+          stationNumber: "上岗供电所",
+          alternatorNumber: "PMS_三港***配变更换",
         },
         {
-          name: "南阳供电所",
-          stationNumber: "06",
-          alternatorNumber: "4630",
-        },
-         {
-          name: "南阳供电所",
-          stationNumber: "06",
-          alternatorNumber: "4630",
-        },
-         {
-          name: "南阳供电所",
-          stationNumber: "06",
-          alternatorNumber: "4630",
+          name: "建湖县供电公司",
+          stationNumber: "上岗供电所",
+          alternatorNumber: "PMS_三港***配变更换",
         },
         {
-          name: "南阳供电所",
-          stationNumber: "06",
-          alternatorNumber: "4630",
+          name: "建湖县供电公司",
+          stationNumber: "上岗供电所",
+          alternatorNumber: "PMS_三港***配变更换",
+        },
+        {
+          name: "建湖县供电公司",
+          stationNumber: "上岗供电所",
+          alternatorNumber: "PMS_三港***配变更换",
+        },
+        {
+          name: "建湖县供电公司",
+          stationNumber: "上岗供电所",
+          alternatorNumber: "PMS_三港***配变更换",
+        },
+        {
+          name: "建湖县供电公司",
+          stationNumber: "上岗供电所",
+          alternatorNumber: "PMS_三港***配变更换",
         },
       ],
     };
   },
   created() {},
   mounted() {
+    this.xianDuan();
     this.detailedTwo11();
     this.detailedTwo22();
     this.detailedTwo33();
-    this.barCharts();
+    this.detailedTwo44();
+    this.detailedTwo55();
     this.detailen();
   },
   methods: {
+    //地图画线
+    xianDuan() {
+      var canvas = document.getElementById("myCanvas");
+      var ctx = canvas.getContext("2d");
+      ctx.font = "26px Arial";
+      ctx.fillStyle = "#fff";
+      ctx.fillText("11.87万", 320, 140);
+      ctx.fillText("14.76万", 400, 200);
+      ctx.fillText("2.113万", 270, 360);
+      ctx.fillText("39.12万", 480, 285);
+      ctx.fillText("7.399万", 320, 440);
+      ctx.fillText("7.399万", 480, 410);
+      ctx.fillText("255.1万", 640, 465);
+      ctx.fillText("298.4万", 750, 660);
+      ctx.stroke();
+    },
     detailedTwo11() {
       var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
-      var data = {
-    id: 'multipleBarsLines',
-    title: '',
-    subTitle: '最近更新：07月18日',
-    legendBar: ['正面占比', '中立占比', '负面占比'],
-    symbol: '%', //数值是否带百分号        --默认为空 ''
-    legendLine: ['折线一', '折线二'],
-    xAxis: ['只想要你知道', '遥不可及的你', '只要平凡', '时间飞行', '对你太想念',
-        '不找了', '闻窗一如初见', '关于春天的一切', '流程', '世界上另一个我'
-    ],
-    yAxis: [
-        [8, 10, 10, 11, 4, 13, 6, 5, 9, 7],
-        [10, 7, 8, 8, 7, 9, 8, 7, 3, 5],
-        [6, 5, 4, 7, 9, 4, 5, 3, 7, 11]
-    ],
-    lines: [
-        [10, 10, 9, 11, 7, 4, 13, 8, 2, 1],
-        [6, 12, 12, 2, 4, 4, 10, 8, 13, 12]
-    ],
-    barColor: ['#3FA7DC', '#7091C4', '#5170A2'], //柱子颜色 必填参数
-    lineColor: ['#638862', '#DA8084'], // 折线颜色
-
-}
-/////////////end/////////
-
-var myData = (function test() {
-    let yAxis = data.yAxis || []
-    let lines = data.lines || []
-    let legendBar = data.legendBar || []
-    let legendLine = data.legendLine || []
-    var symbol = data.symbol || ' '
-    let seriesArr = []
-    let legendArr = []
-    yAxis && yAxis.forEach((item, index) => {
-        legendArr.push({
-            name: legendBar && legendBar.length > 0 && legendBar[index]
-        })
-        seriesArr.push({
-            name: legendBar && legendBar.length > 0 && legendBar[index],
-            type: 'bar',
-            barGap: '0.5px',
-            data: item,
-            barWidth: data.barWidth || 12,
-            label: {
-                normal: {
-                    show: true,
-                    formatter: '{c}' + symbol,
-                    position: 'top',
-                    textStyle: {
-                        color: '#414957',
-                        fontStyle: 'normal',
-                        fontFamily: '微软雅黑',
-                        textAlign: 'left',
-                        fontSize: 11,
-                    },
-                },
-            },
-            itemStyle: { //图形样式
-                normal: {
-                    barBorderRadius: 4,
-                    color: data.barColor[index]
-                },
-            }
-        })
-    })
-
-    lines && lines.forEach((item, index) => {
-        legendArr.push({
-            name: legendLine && legendLine.length > 0 && legendLine[index]
-        })
-        seriesArr.push({
-            name: legendLine && legendLine.length > 0 && legendLine[index],
-            type: 'line',
-            data: item,
-            itemStyle: {
-                normal: {
-                    color: data.lineColor[index],
-                    lineStyle: {
-                        width: 3,
-                        type: 'solid',
-                    }
-                }
-            },
-            label: {
-                normal: {
-                    show: false, //折线上方label控制显示隐藏
-                    position: 'top',
-                }
-            },
-            symbol: 'circle',
-            symbolSize: 10
-        })
-    })
-
-    return {
-        seriesArr,
-        legendArr
-    }
-})()
-
-
-var option = {
-    // title: {
-    //     show: true,
-    //     text: data.title,
-    //     subtext: data.subTitle,
-    //     link: 'http://gallery.echartsjs.com/editor.html?c=xB1j9UgsXQ'
-    // },
-    tooltip: {
-        trigger: 'axis',
-        formatter: function(params) {
-            var time = '';
-            var str = '';
-            for (var i of params) {
-                time = i.name.replace(/\n/g, '') + '<br/>';
-                if (i.data == 'null' || i.data == null) {
-                    str += i.seriesName + '：无数据' + '<br/>'
-                } else {
-                    str += i.seriesName + '：' + i.data + symbol + '%<br/>'
-                }
-
-            }
-            return time + str;
+      var option = {
+        tooltip: {
+          show: true,
+          trigger: "item",
         },
-        axisPointer: {
-            type: 'none'
+        legend: {
+          textStyle: {
+            fontSize: 18, //字体大小
+            color: "#ffffff", //字体颜色
+            data: ["2021", "2022"],
+          },
         },
-    },
-    legend: {
-        right: data.legendRight || '30%',
-        top: 12,
-        itemGap: 16,
-        itemWidth: 10,
-        itemHeight: 10,
-        data: myData.legendArr,
-        textStyle: {
-            color: '#414957',
-            fontStyle: 'normal',
-            fontFamily: '微软雅黑',
-            fontSize: 12,
-        }
-    },
-    grid: {
-        x: 30,
-        y: 80,
-        x2: 30,
-        y2: 60,
-    },
-    xAxis: {
-        type: 'category',
-        data: data.xAxis,
-        axisTick: {
-            show: false,
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
         },
-
-        axisLine: {
-            show: false
-        },
-        axisLabel: {
-            show: true,
-            interval: '0',
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          axisLabel: {
             textStyle: {
-                lineHeight: 16,
-                padding: [2, 2, 0, 2],
-                height: 50,
-                fontSize: 12,
+              color: "#ffffff",
+              fontSize: 16,
             },
-            rich: {
-                Sunny: {
-                    height: 50,
-                    // width: 60,
-                    padding: [0, 5, 0, 5],
-                    align: 'center',
-                },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: "#195384",
             },
-            formatter: function(params, index) {
-                var newParamsName = "";
-                var splitNumber = 5;
-                var paramsNameNumber = params && params.length;
-                if (paramsNameNumber && paramsNameNumber <= 4) {
-                    splitNumber = 4;
-                } else if (paramsNameNumber >= 5 && paramsNameNumber <= 7) {
-                    splitNumber = 4;
-                } else if (paramsNameNumber >= 8 && paramsNameNumber <= 9) {
-                    splitNumber = 5;
-                } else if (paramsNameNumber >= 10 && paramsNameNumber <= 14) {
-                    splitNumber = 5;
-                } else {
-                    params = params && params.slice(0, 15);
-                }
-
-                var provideNumber = splitNumber; //一行显示几个字
-                var rowNumber = Math.ceil(paramsNameNumber / provideNumber) || 0;
-                if (paramsNameNumber > provideNumber) {
-                    for (var p = 0; p < rowNumber; p++) {
-                        var tempStr = "";
-                        var start = p * provideNumber;
-                        var end = start + provideNumber;
-                        if (p == rowNumber - 1) {
-                            tempStr = params.substring(start, paramsNameNumber);
-                        } else {
-                            tempStr = params.substring(start, end) + "\n";
-                        }
-                        newParamsName += tempStr;
-                    }
-
-                } else {
-                    newParamsName = params;
-                }
-                params = newParamsName
-                return '{Sunny|' + params + '}';
+          },
+          data: [
+            "1月",
+            "2月",
+            "3月",
+            "4月",
+            "5月",
+            "6月",
+            "7月",
+            "8月",
+            "9月",
+            "10月",
+            "11月",
+            "12月",
+          ],
+        },
+        yAxis: {
+          type: "value",
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
             },
-            color: '#687284',
-        },
-
-    },
-    yAxis: {
-        axisLine: {
-            show: false
-        },
-        axisTick: {
-            show: false
-        },
-        axisLabel: {
-            show: false
-        },
-        splitLine: {
+          },
+          axisLabel: {
+            textStyle: { fontSize: 16, color: "#fff" },
+          },
+          splitLine: {
             show: true,
             lineStyle: {
-                color: '#F1F3F5',
-                type: 'solid'
+              type: "dashed",
+              // color: 'rgba(66, 192, 255, .3)',
+              color: "rgba(102,102,102,0.6)",
+              width: 1,
             },
-            interval: 2
+          },
         },
-        splitNumber: 4,
-    },
-    series: myData.seriesArr
-}
+        series: [
+          {
+            name: "2021",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            symbol: "none",
+            data: [120, 132, 101, 134, 90, 230, 210, 110, 320, 130, 212, 240],
+            itemStyle: {
+              normal: {
+                color: "yellow",
+                lineStyle: {
+                  color: "yellow",
+                },
+              },
+            },
+          },
+          {
+            name: "2022",
+            type: "line",
+            smooth: true,
+            stack: "Total",
+            symbol: "none",
+            data: [220, 182, 191, 234, 290, 330, 310, 110, 350, 140, 170, 230],
+            itemStyle: {
+              normal: {
+                color: "rgba(0,212,199,1)",
+                lineStyle: {
+                  color: "rgba(0,212,199,1)",
+                },
+              },
+            },
+          },
+        ],
+      };
       myChart.setOption(option);
       window.addEventListener("resize", () => {
         myChart.resize();
@@ -622,667 +528,333 @@ var option = {
     detailedTwo22() {
       var fontColor = "#30eee9";
       var myChart = this.$echarts.init(document.getElementById("detailedTwo2"));
-     var data1 = [709, 1999, 709, 2299, 3299, 2299, 1999, 2999, 1999, 709, 1999, 709];
-var data2 = [1709, 2999, 1799, 3299, 4299, 3299, 2999, 3999, 2999, 1709, 2999, 1709];
-var xData = function() {
-      var data = [];
-      for (var i = 1; i < 13; i++) {
-        data.push(i + "月");
-      }
-      return data;
-    }();
-var option = {
-    tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-            type: 'shadow',
-
+      var option = {
+        tooltip: {
+          show: true,
+          trigger: "item",
+        },
+        legend: {
+          textStyle: {
+            fontSize: 18, //字体大小
+            color: "#ffffff", //字体颜色
+            data: ["2021", "2022"],
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          axisLabel: {
             textStyle: {
-                color: '#05294D',
-            },
-        },
-        backgroundColor: '#05294D',
-        borderColor: '#135469',
-        borderWidth: 2,
-        padding: [20, 20, 20, 20],
-        formatter: function (params) {
-            // console.log(params.length == 0);
-            if (params.length === 0) {
-                let result =
-                    '<span style="font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;">' +
-                    '至少选中一条图例' +
-                    '</span>' +
-                    '<br>';
-                return result;
-            } else if (params.length == 1) {
-                const paramsArray = [];
-                params.forEach((v) => {
-                    // console.log(v.name);
-                    if (v.seriesName == '趋势') {
-                        v.color = '#F3C452';
-                    } else {
-                        v.color = '#02DBF1';
-                    }
-                    paramsArray.push({
-                        name: v.name,
-                        seriesName: v.seriesName,
-                        data: v.data,
-                        color: v.color,
-                    });
-                });
-                // console.log(paramsArray);
-                let result =
-                    '<span style="font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;">' +
-                    paramsArray[0].name +
-                    '</span>' +
-                    '<br>';
-                result +=
-                    '<div style="display:flex;">' +
-                    '<div style="font-size: 20px;font-family: MicrosoftYaHeiUI;color: ' +
-                    paramsArray[0].color +
-                    ';line-height: 25px;margin-top:10px;margin-right:28px;">' +
-                    '旅客' +
-                    paramsArray[0].seriesName +
-                    '<div style="font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color:' +
-                    paramsArray[0].color +
-                    ';line-height: 33px;">' +
-                    paramsArray[0].data +
-                    '人公里' +
-                    '</div>' +
-                    '</div>' +
-                    '</div>';
-                return result;
-            } else {
-                let result =
-                    '<span style="font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;">' +
-                    params[0].name +
-                    '</span>' +
-                    '<br>';
-                result +=
-                    '<div style="display:flex;">' +
-                    '<div style="font-size: 20px;font-family: MicrosoftYaHeiUI;color: #02DBF1;line-height: 25px;margin-top:10px;margin-right:28px;">' +
-                    '旅客' +
-                    params[0].seriesName +
-                    '<div style="font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #02DBF1;line-height: 33px;">' +
-                    params[0].data +
-                    '人公里' +
-                    '</div>' +
-                    '</div>' +
-                    '<div style="margin-top:10px;font-size: 20px;font-family: MicrosoftYaHeiUI;color: #F3C452;line-height: 25px;">' +
-                    '旅客' +
-                    params[1].seriesName +
-                    '<div style="font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #F3C452;line-height: 33px;">' +
-                    params[1].data +
-                    '人公里' +
-                    '</div>' +
-                    '</div>' +
-                    '</div>';
-                return result;
-            }
-        },
-    },
-    grid: {
-        borderWidth: 0,
-        top: '20%',
-        left: '65',
-        bottom: '25%',
-        textStyle: {
-            color: '#fff',
-        },
-    },
-    legend: {
-        top: '0%',
-        right: '10%',
-        textStyle: {
-            fontSize: '20px',
-            fontFamily: 'MicrosoftYaHeiUI',
-            color: '#FFFFFF',
-        },
-        itemWidth: 28,
-        itemHeight: 28,
-        data: [
-            {
-                name: '周转量',
-                icon:
-                    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAA1ElEQVR4Xu2WsQ2AMBADP4ghYBtGZxsYAhHEAMQ19tF+g+/PSVqFfy08fwEAA8IJUIFwATgEqQAVCCdABcIF4BagAlQgnAAVCBeAW4AKUIFwAlQgXABuASpABcIJjCtw9O3vfOaquta2f+UYApjO3v8O4P3/e2mfOQEw2jAGpFeg0g9BhwNQZeAlqAi5zzHAfcMqHwYoQu5zDHDfsMqHAYqQ+xwD3Des8mGAIuQ+xwD3Dat8GKAIuc8xwH3DKh8GKELucwxw37DKhwGKkPscA9w3rPI9drIYQbytq9EAAAAASUVORK5CYII=',
-            },
-            {
-                name: '趋势',
-                icon:
-                    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA1UlEQVRYR+2UMQ7CMAxFvxdyFtqVhREpZ+AEnIyRM1RiY2NsOQgTXYzSUlVNm9ZWhwrJnvPjpxfHhI2LNu4PAzADZsAM/I+BT5FnAF8JqBl0cb6sNFu0z/N751+nLisy0ISJb2DkTZBQgukshYjyT+ergxhgEA6NQwUQIcQoH4HPGpgKtwZ+NhYglpq3MhM1F5ZcLDmTBJCE1wImZ0DSvAuvfaKRAU3zJIRySAczUBfZg4GjdMInIZTfNALY3wFy6xaNblGJFpFm42nPGoAZMANmwAx8ASjjyiGj/fCxAAAAAElFTkSuQmCC',
-            },
-        ],
-    },
-    xAxis: [
-        {
-            type: 'category',
-            axisLine: {
-                lineStyle: {
-                    color: 'rgba(255,255,255,.5)',
-                },
-            },
-            splitLine: {
-                show: false,
-            },
-            axisTick: {
-                show: false,
-            },
-            splitArea: {
-                show: false,
-            },
-            axisLabel: {
-                interval: 0,
-                color: 'rgba(255,255,255,0.7)',
-                fontSize: 18,
-            },
-            data: xData,
-        },
-    ],
-    yAxis: [
-        {
-            type: 'value',
-            splitLine: {
-                show: false,
-            },
-            axisLine: {
-                show: false,
-            },
-            axisTick: {
-                show: false,
-            },
-            axisLabel: {
-                interval: 0,
-                color: 'rgba(255,255,255,0.5)',
-                fontSize: 20,
-            },
-            splitArea: {
-                show: false,
-            },
-        },
-    ],
-    series: [
-        {
-            name: '周转量',
-            type: 'bar',
-            // "stack": "总量",
-            barMaxWidth: 35,
-            barGap: '10%',
-            itemStyle: {
-                normal: {
-                    color: {
-                        type: 'linear',
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        colorStops: [
-                            {
-                                offset: 0,
-                                color: '#05F5FF', // 0% 处的颜色
-                            },
-                            {
-                                offset: 1,
-                                color: '#020D20', // 100% 处的颜色
-                            },
-                        ],
-                        global: false, // 缺省为 false
-                    },
-                },
-            },
-            data: data1,
-        },
-        {
-            name: '趋势',
-            type: 'line',
-            symbolSize: 10,
-            symbol: 'circle',
-            itemStyle: {
-                normal: {
-                    color: 'rgba(255, 196, 53, 1)',
-                    barBorderRadius: 0,
-                },
+              color: "#ffffff",
+              fontSize: 16,
             },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
             lineStyle: {
-                normal: {
-                    width: 4,
-                    color: {
-                        type: 'linear',
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        colorStops: [
-                            {
-                                offset: 0,
-                                color: '#F0B62A', // 0% 处的颜色
-                            },
-                            {
-                                offset: 0.45,
-                                color: '#FFC12B', // 45% 处的颜色
-                            },
-                            {
-                                offset: 0.85,
-                                color: '#FFC12B', // 85% 处的颜色
-                            },
-                            {
-                                offset: 1,
-                                color: '#FFC12B', // 100% 处的颜色
-                            },
-                        ],
-                        global: false, // 缺省为 false
-                    },
-                },
+              color: "#195384",
             },
-            data: data2,
+          },
+          data: [
+            "1月",
+            "2月",
+            "3月",
+            "4月",
+            "5月",
+            "6月",
+            "7月",
+            "8月",
+            "9月",
+            "10月",
+            "11月",
+            "12月",
+          ],
         },
-    ],
-};
+        yAxis: {
+          type: "value",
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+          axisLabel: {
+            textStyle: { fontSize: 16, 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: "2021",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            symbol: "none",
+            data: [120, 132, 101, 134, 90, 230, 210, 110, 320, 130, 212, 240],
+            itemStyle: {
+              normal: {
+                color: "yellow",
+                lineStyle: {
+                  color: "yellow",
+                },
+              },
+            },
+          },
+          {
+            name: "2022",
+            type: "line",
+            smooth: true,
+            stack: "Total",
+            symbol: "none",
+            data: [220, 182, 191, 234, 290, 330, 310, 110, 350, 140, 170, 230],
+            itemStyle: {
+              normal: {
+                color: "rgba(0,212,199,1)",
+                lineStyle: {
+                  color: "rgba(0,212,199,1)",
+                },
+              },
+            },
+          },
+        ],
+      };
       myChart.setOption(option);
       window.addEventListener("resize", () => {
         myChart.resize();
       });
     },
     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 myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
 
       var option = {
-        color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
         tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "none",
-          },
+          show: true,
+          trigger: "item",
         },
-
         legend: {
-          right: 5,
-          top: "5%",
-          itemWidth: 10,
-          itemHeight: 10,
-          itemGap: 15,
           textStyle: {
-            color: "#ACCFFF",
-            fontSize: 16,
+            fontSize: 18, //字体大小
+            color: "#ffffff", //字体颜色
+            data: ["2021", "2022"],
           },
         },
         grid: {
-          left: "5%",
-          right: "5%",
-          bottom: "5%",
-          top: "10%",
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
           containLabel: true,
         },
-        xAxis: [
-          {
-            type: "value",
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          axisLabel: {
+            textStyle: {
+              color: "#ffffff",
+              fontSize: 16,
+            },
+          },
+          axisTick: {
             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,
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: "#195384",
             },
           },
-        ],
-        yAxis: [
-          {
-            type: "category",
-            axisLine: {
-              show: false,
+          data: [
+            "1月",
+            "2月",
+            "3月",
+            "4月",
+            "5月",
+            "6月",
+            "7月",
+            "8月",
+            "9月",
+            "10月",
+            "11月",
+            "12月",
+          ],
+        },
+        yAxis: {
+          type: "value",
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
             },
-            axisTick: {
-              show: false,
-            },
-            axisLabel: {
-              color: "#6B9DD7",
-              fontSize: 16, // 文字大小
-              fontWeight: 400,
-              interval: 0,
-            },
-            offset: 20,
-            data: honorXAxisData,
           },
-        ],
+          axisLabel: {
+            textStyle: { fontSize: 16, 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: "2019末",
-            type: "bar",
-            stack: "zongliang",
-            barWidth: "35%",
-            zlevel: 10,
-            label: {
+            name: "2021",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            symbol: "none",
+            data: [120, 132, 101, 134, 90, 230, 210, 110, 320, 130, 212, 240],
+            itemStyle: {
               normal: {
-                show: true,
-                position: "inside",
-                textStyle: {
-                  color: "#fff",
-                  fontSize: 14,
+                color: "yellow",
+                lineStyle: {
+                  color: "yellow",
                 },
               },
             },
-            data: honorData[0].data,
           },
           {
-            name: "2020上半年",
-            type: "bar",
-            stack: "zongliang",
-            barWidth: "35%",
-            zlevel: 10,
-            label: {
+            name: "2022",
+            type: "line",
+            smooth: true,
+            stack: "Total",
+            symbol: "none",
+            data: [220, 182, 191, 234, 290, 330, 310, 110, 350, 140, 170, 230],
+            itemStyle: {
               normal: {
-                show: true,
-                position: "top",
-                formatter: function (params) {
-                  console.log(params);
-                  // return  params.seriesName + params.value ;
-                  return "完成" + params.value;
-                },
-                textStyle: {
-                  color: "#fff",
-                  fontSize: 12,
+                color: "rgba(0,212,199,1)",
+                lineStyle: {
+                  color: "rgba(0,212,199,1)",
                 },
               },
             },
-            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"));
+    detailedTwo44() {
+      var myChart = this.$echarts.init(document.getElementById("detailedTwo4"));
       var option = {
-        title: [
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          left: "10%", // grid布局设置适当调整避免X轴文字只能部分显示
+          right: "1%", // grid布局设置适当调整避免X轴文字只能部分显示
+        },
+
+        legend: {
+          textStyle: {
+            fontSize: 18, //字体大小
+            color: "#ffffff", //字体颜色
+          },
+
+          data: ["2021", "2022"],
+        },
+        xAxis: [
           {
-            text: "总计",
-            subtext: 59.53 + "万",
-            textStyle: {
-              fontSize: 20,
+            type: "category",
+            data: [
+              "苗庄河西泵",
+              "中堡排涝泵",
+              "新东排涝泵",
+              "山河村泵",
+              "花垛南泵",
+              "吉兴北泵",
+            ],
+            axisLabel: {
+              interval: 0,
               color: "#fff",
+              fontSize: "16",
             },
-            subtextStyle: {
-              fontSize: 20,
-              color: "yellow",
-            },
-            textAlign: "center",
-            x: "34.5%",
-            y: "44%",
           },
         ],
-        tooltip: {
-          trigger: "item",
-          formatter: function (parms) {
-            var str =
-              parms.seriesName +
-              "</br>" +
-              parms.marker +
-              "" +
-              parms.data.legendname +
-              "</br>" +
-              "数量：" +
-              parms.data.value +
-              "</br>" +
-              "占比：" +
-              parms.percent +
-              "%";
-            return str;
+        yAxis: [
+          {
+            type: "value",
+            min: 0,
+            max: 160,
+            interval: 40,
+            axisLabel: {
+              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,
+              },
+            },
           },
-        },
-        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)", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
-                },
-              },
-            },
-
+            name: "2021",
+            type: "bar",
             itemStyle: {
-              normal: {
-                borderRadius: 10,
-                borderColor: "transparent",
-                borderWidth: 2,
-                label: {
-                  show: true,
-                  formatter: " {d}% ",
-                  fontSize: 20,
-                  color: "#fff",
-                },
-              },
+              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: m2R2Data,
+            emphasis: {
+              focus: "series",
+            },
+            data: [150, 63, 72, 33, 47, 88],
+          },
+          {
+            name: "2022",
+            type: "bar",
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: "rgba(255,255,0,.2) " },
+                { offset: 0.5, color: "rgb(255,255,0,.6)" },
+                { offset: 0, color: "rgb(255,255,0)" },
+              ]),
+              borderRadius: [7, 7, 0, 0], // 柱状图圆角
+              borderWidth: 0,
+            },
+            emphasis: {
+              focus: "series",
+            },
+            data: [45, 123, 35, 67, 58, 124],
           },
         ],
       };
@@ -1291,263 +863,345 @@ var option = {
         myChart.resize();
       });
     },
+    detailedTwo55() {
+      var myChart = this.$echarts.init(document.getElementById("detailedTwo5"));
+      var img =
+        "data:image/png;base64,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";
+      var trafficWay = [
+        {
+          name: "启用",
+          value: 32,
+        },
+        {
+          name: "未启用",
+          value: 67,
+        },
+      ];
+
+      var data = [];
+      var color = [
+        "#00ffff",
+        "#00cfff",
+        "#006ced",
+        "#ffe000",
+        "#ffa800",
+        "#ff5b00",
+        "#ff3000",
+      ];
+      for (var i = 0; i < trafficWay.length; i++) {
+        data.push(
+          {
+            value: trafficWay[i].value,
+            name: trafficWay[i].name,
+            itemStyle: {
+              normal: {
+                borderWidth: 5,
+                shadowBlur: 20,
+                borderColor: color[i],
+                shadowColor: color[i],
+              },
+            },
+          },
+          {
+            value: 2,
+            name: "",
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+                color: "rgba(0, 0, 0, 0)",
+                borderColor: "rgba(0, 0, 0, 0)",
+                borderWidth: 0,
+              },
+            },
+          }
+        );
+      }
+      var seriesOption = [
+        {
+          name: "",
+          type: "pie",
+          clockWise: false,
+          radius: [70, 75],
+          hoverAnimation: false,
+          itemStyle: {
+            normal: {
+              label: {
+                show: true,
+                position: "outside",
+                color: "#fff",
+                fontSize: 16,
+                formatter: function (params) {
+                  var percent = 0;
+                  var total = 0;
+                  for (var i = 0; i < trafficWay.length; i++) {
+                    total += trafficWay[i].value;
+                  }
+                  percent = ((params.value / total) * 100).toFixed(0);
+                  if (params.name !== "") {
+                    return "" + params.name + "\n" + "\n" + "" + percent + "%";
+                  } else {
+                    return "";
+                  }
+                },
+              },
+              labelLine: {
+                length: 10,
+                length2: 5,
+                show: true,
+                color: "#00ffff",
+              },
+            },
+          },
+          data: data,
+        },
+      ];
+      var option = {
+        // backgroundColor: "#013A54",
+        color: color,
+        title: {
+          text: "",
+          top: "48%",
+          textAlign: "center",
+          left: "49%",
+          textStyle: {
+            color: "#fff",
+            fontSize: 18,
+            fontWeight: "400",
+          },
+        },
+        graphic: {
+          elements: [
+            {
+              type: "image",
+              z: 3,
+              style: {
+                image: img,
+                width: 120,
+                height: 120,
+              },
+              left: "center",
+              top: "center",
+              position: [50, 50],
+            },
+          ],
+        },
+
+        tooltip: {
+          show: false,
+        },
+
+        toolbox: {
+          show: false,
+        },
+        series: seriesOption,
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
     detailen() {
       var myChart = this.$echarts.init(document.getElementById("detailen"));
-      var data1 = [709, 1999, 709, 2299, 3299, 2299, 1999, 2999, 1999, 709, 1999, 709];
-var data2 = [1709, 2999, 1799, 3299, 4299, 3299, 2999, 3999, 2999, 1709, 2999, 1709];
-var xData = function() {
-      var data = [];
-      for (var i = 1; i < 13; i++) {
-        data.push(i + "月");
-      }
-      return data;
-    }();
-var option = {
-    tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-            type: 'shadow',
-
+      var option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            crossStyle: {
+              color: "#999",
+            },
+          },
+        },
+        grid: {
+          bottom: "10%", //图表距离容器上面多少距离
+          top: "20%", //图表距离容器上面多少距离
+          containLabel: true, //防止标签溢出
+        },
+        legend: [
+          {
+            x: "center",
+            data: ["投运15年以上设备数量", "统计时间所辖线路设备数量"],
             textStyle: {
-                color: '#05294D',
+              fontSize: 18,
+              color: "#fff",
             },
-        },
-        backgroundColor: '#05294D',
-        borderColor: '#135469',
-        borderWidth: 2,
-        padding: [20, 20, 20, 20],
-        formatter: function (params) {
-            // console.log(params.length == 0);
-            if (params.length === 0) {
-                let result =
-                    '<span style="font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;">' +
-                    '至少选中一条图例' +
-                    '</span>' +
-                    '<br>';
-                return result;
-            } else if (params.length == 1) {
-                const paramsArray = [];
-                params.forEach((v) => {
-                    // console.log(v.name);
-                    if (v.seriesName == '趋势') {
-                        v.color = '#F3C452';
-                    } else {
-                        v.color = '#02DBF1';
-                    }
-                    paramsArray.push({
-                        name: v.name,
-                        seriesName: v.seriesName,
-                        data: v.data,
-                        color: v.color,
-                    });
-                });
-                // console.log(paramsArray);
-                let result =
-                    '<span style="font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;">' +
-                    paramsArray[0].name +
-                    '</span>' +
-                    '<br>';
-                result +=
-                    '<div style="display:flex;">' +
-                    '<div style="font-size: 20px;font-family: MicrosoftYaHeiUI;color: ' +
-                    paramsArray[0].color +
-                    ';line-height: 25px;margin-top:10px;margin-right:28px;">' +
-                    '旅客' +
-                    paramsArray[0].seriesName +
-                    '<div style="font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color:' +
-                    paramsArray[0].color +
-                    ';line-height: 33px;">' +
-                    paramsArray[0].data +
-                    '人公里' +
-                    '</div>' +
-                    '</div>' +
-                    '</div>';
-                return result;
-            } else {
-                let result =
-                    '<span style="font-size: 24px;font-family: MicrosoftYaHeiUISemibold;color: #FFFFFF;ine-height: 41px;">' +
-                    params[0].name +
-                    '</span>' +
-                    '<br>';
-                result +=
-                    '<div style="display:flex;">' +
-                    '<div style="font-size: 20px;font-family: MicrosoftYaHeiUI;color: #02DBF1;line-height: 25px;margin-top:10px;margin-right:28px;">' +
-                    '旅客' +
-                    params[0].seriesName +
-                    '<div style="font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #02DBF1;line-height: 33px;">' +
-                    params[0].data +
-                    '人公里' +
-                    '</div>' +
-                    '</div>' +
-                    '<div style="margin-top:10px;font-size: 20px;font-family: MicrosoftYaHeiUI;color: #F3C452;line-height: 25px;">' +
-                    '旅客' +
-                    params[1].seriesName +
-                    '<div style="font-size: 24px;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: #F3C452;line-height: 33px;">' +
-                    params[1].data +
-                    '人公里' +
-                    '</div>' +
-                    '</div>' +
-                    '</div>';
-                return result;
-            }
-        },
-    },
-    grid: {
-        borderWidth: 0,
-        top: '20%',
-        left: '65',
-        bottom: '25%',
-        textStyle: {
-            color: '#fff',
-        },
-    },
-    legend: {
-        top: '0%',
-        right: '10%',
-        textStyle: {
-            fontSize: '20px',
-            fontFamily: 'MicrosoftYaHeiUI',
-            color: '#FFFFFF',
-        },
-        itemWidth: 28,
-        itemHeight: 28,
-        data: [
-            {
-                name: '周转量',
-                icon:
-                    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAA1ElEQVR4Xu2WsQ2AMBADP4ghYBtGZxsYAhHEAMQ19tF+g+/PSVqFfy08fwEAA8IJUIFwATgEqQAVCCdABcIF4BagAlQgnAAVCBeAW4AKUIFwAlQgXABuASpABcIJjCtw9O3vfOaquta2f+UYApjO3v8O4P3/e2mfOQEw2jAGpFeg0g9BhwNQZeAlqAi5zzHAfcMqHwYoQu5zDHDfsMqHAYqQ+xwD3Des8mGAIuQ+xwD3Dat8GKAIuc8xwH3DKh8GKELucwxw37DKhwGKkPscA9w3rPI9drIYQbytq9EAAAAASUVORK5CYII=',
-            },
-            {
-                name: '趋势',
-                icon:
-                    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAA1UlEQVRYR+2UMQ7CMAxFvxdyFtqVhREpZ+AEnIyRM1RiY2NsOQgTXYzSUlVNm9ZWhwrJnvPjpxfHhI2LNu4PAzADZsAM/I+BT5FnAF8JqBl0cb6sNFu0z/N751+nLisy0ISJb2DkTZBQgukshYjyT+ergxhgEA6NQwUQIcQoH4HPGpgKtwZ+NhYglpq3MhM1F5ZcLDmTBJCE1wImZ0DSvAuvfaKRAU3zJIRySAczUBfZg4GjdMInIZTfNALY3wFy6xaNblGJFpFm42nPGoAZMANmwAx8ASjjyiGj/fCxAAAAAElFTkSuQmCC',
+          },
+          {
+            x: "center",
+            top: "8%",
+            data: ["设备老化占比", "设备绝缘率"],
+            textStyle: {
+              fontSize: 18,
+              color: "#fff",
             },
+          },
         ],
-    },
-    xAxis: [
-        {
-            type: 'category',
+        xAxis: [
+          {
+            type: "category",
+            show: true,
+            data: [
+              "10kv星雨线163",
+              "10kv智谋线183",
+              "10kv朝阳线164",
+              "10kv杨庄线1811",
+              "10kv森达线174",
+              "10kv武港线176",
+            ],
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLabel: {
+              interval: 0, //设置成 0 强制显示所有标签
+              rotate: -20, //使文本旋转
+              color: "#fff",
+              fontSize: "16",
+            },
+            axisTick: {
+              //x轴刻度相关设置
+              alignWithLabel: true,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            min: 0,
+            max: 160,
+            interval: 40,
+            axisLabel: {
+              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,
+              },
+            },
+          },
+          {
+            type: "value",
+            min: 0,
+            max: 100,
+            interval: 20,
+            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: "投运15年以上设备数量",
+            type: "bar",
+            tooltip: {
+              valueFormatter: function (value) {
+                return value;
+              },
+            },
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 1, color: "rgba(255,255,0,.2) " },
+                { offset: 0.5, color: "rgb(255,255,0,.6)" },
+                { offset: 0, color: "rgb(255,255,0)" },
+              ]),
+              borderRadius: [7, 7, 0, 0], // 柱状图圆角
+              borderWidth: 0,
+            },
+            data: [89, 78, 89, 56, 100, 56],
+          },
+          {
+            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: [56, 78, 99, 76, 55, 67],
+          },
+          {
+            name: "设备老化占比",
+            type: "line",
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value;
+              },
+            },
+            itemStyle: {
+              normal: {
+                color: "orange",
                 lineStyle: {
-                    color: 'rgba(255,255,255,.5)',
+                  color: "orange",
                 },
+              },
             },
-            splitLine: {
-                show: false,
+            data: [40, 77, 56, 89, 70, 50],
+          },
+          {
+            name: "设备绝缘率",
+            type: "line",
+            yAxisIndex: 1,
+
+            tooltip: {
+              valueFormatter: function (value) {
+                return value;
+              },
             },
-            axisTick: {
-                show: false,
-            },
-            splitArea: {
-                show: false,
-            },
-            axisLabel: {
-                interval: 0,
-                color: 'rgba(255,255,255,0.7)',
-                fontSize: 18,
-            },
-            data: xData,
-        },
-    ],
-    yAxis: [
-        {
-            type: 'value',
-            splitLine: {
-                show: false,
-            },
-            axisLine: {
-                show: false,
-            },
-            axisTick: {
-                show: false,
-            },
-            axisLabel: {
-                interval: 0,
-                color: 'rgba(255,255,255,0.5)',
-                fontSize: 20,
-            },
-            splitArea: {
-                show: false,
-            },
-        },
-    ],
-    series: [
-        {
-            name: '周转量',
-            type: 'bar',
-            // "stack": "总量",
-            barMaxWidth: 35,
-            barGap: '10%',
             itemStyle: {
-                normal: {
-                    color: {
-                        type: 'linear',
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        colorStops: [
-                            {
-                                offset: 0,
-                                color: '#05F5FF', // 0% 处的颜色
-                            },
-                            {
-                                offset: 1,
-                                color: '#020D20', // 100% 处的颜色
-                            },
-                        ],
-                        global: false, // 缺省为 false
-                    },
+              normal: {
+                color: "Cyan",
+                lineStyle: {
+                  color: "Cyan",
                 },
+              },
             },
-            data: data1,
-        },
-        {
-            name: '趋势',
-            type: 'line',
-            symbolSize: 10,
-            symbol: 'circle',
-            itemStyle: {
-                normal: {
-                    color: 'rgba(255, 196, 53, 1)',
-                    barBorderRadius: 0,
-                },
-            },
-            lineStyle: {
-                normal: {
-                    width: 4,
-                    color: {
-                        type: 'linear',
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        colorStops: [
-                            {
-                                offset: 0,
-                                color: '#F0B62A', // 0% 处的颜色
-                            },
-                            {
-                                offset: 0.45,
-                                color: '#FFC12B', // 45% 处的颜色
-                            },
-                            {
-                                offset: 0.85,
-                                color: '#FFC12B', // 85% 处的颜色
-                            },
-                            {
-                                offset: 1,
-                                color: '#FFC12B', // 100% 处的颜色
-                            },
-                        ],
-                        global: false, // 缺省为 false
-                    },
-                },
-            },
-            data: data2,
-        },
-    ],
-};
+            data: [45, 56, 76, 43, 66, 60],
+          },
+        ],
+      };
       myChart.setOption(option);
       window.addEventListener("resize", () => {
         myChart.resize();
@@ -1667,10 +1321,6 @@ var option = {
     width: 100% !important;
   }
 
-  /deep/ .el-table__body td .cell {
-    // width: 60px !important;
-  }
-
   // &::before {
   //   //去除底部白线
   //   left: 0;
@@ -1720,7 +1370,11 @@ var option = {
     justify-content: space-between;
     #detailedTwo3 {
       width: 100%;
-      height: 500px;
+      height: 350px;
+    }
+    #detailedTwo4 {
+      width: 100%;
+      height: 400px;
     }
   }
 
@@ -1731,27 +1385,54 @@ var option = {
     display: flex;
     flex-flow: column nowrap;
     justify-content: space-between;
-    .imgboxone {
-      background: url("../assets/04/总数据外框.png") no-repeat;
+    #detailedTwo5 {
+      height: 100%;
       width: 100%;
-      height: 17%;
+    }
+    .imgboxtwo {
+      background: url("../assets/09/启用清单框.png") no-repeat;
+      background-size: 100%;
+      float: left;
+      left: 20%;
+      top: 70%;
+      width: 28vh;
+      height: 28vh;
       position: relative;
-      top: 45%;
-      left: 30%;
-      .contents {
-        // height: 90%;
-        position: absolute;
-        padding: 10px;
-        height: 100%;
-        width: 53%;
+      .cartitle {
+        height: 32px;
+        width: 100%;
+        // background: url("../assets/images/carTitle.png") no-repeat;
+        font-size: 17px;
+        font-weight: 600;
+        color: #ffffff;
+        line-height: 32px;
+        // text-align: left;
+        text-indent: 26px;
+      }
+      .content {
+        height: 65%;
+        padding: 0 15px 0 15px;
+        box-sizing: border-box;
         display: flex;
-        flex-direction: row;
-        /* 平分剩余空间 */
-        justify-content: space-around;
-        .lines {
+        flex-flow: row nowrap;
+        justify-content: space-between;
+
+        .line {
           width: 100%;
-          padding: 10px 0 0 1px;
-          background: url("../assets/index/总数据小框.png") no-repeat;
+          height: 100%;
+          display: flex;
+          flex-flow: column nowrap;
+          display: flex;
+          flex-wrap: wrap;
+          ul {
+            height: 100%;
+            li {
+              text-align: left;
+              height: 33%;
+              font-size: 23px;
+              color: #f8f8f8;
+            }
+          }
         }
 
         .total {
@@ -1759,25 +1440,20 @@ var option = {
             display: flex;
             flex-flow: column nowrap;
             justify-content: center;
-            align-items: left;
+            align-items: center;
             color: #ffffff;
-            span {
-              font-size: 20px;
-            }
             h5 {
-              font-size: 34px;
+              font-size: 28px;
             }
             .yellow {
-              padding-top: 30px;
               color: yellow;
             }
             .orange {
-              padding-top: 30px;
               color: orange;
             }
-            .yellows {
-              padding-top: 20px;
-              color: yellow;
+            span {
+              float: left;
+              font-size: 18px;
             }
           }
         }
@@ -1804,28 +1480,62 @@ var option = {
     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;
     }
-    .eqselect {
-      span {
-        font-size: 20px;
-        color: #f8f8f8;
-      }
-      img {
-        margin-right: 7px;
+    .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: 33%;
+        height: 49%;
+        list-style: none;
+        img {
+          margin-top: 30%;
+        }
+        .text {
+          position: absolute;
+          z-index: 2;
+          left: 30%;
+          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;
+        }
       }
     }
   }
@@ -1837,6 +1547,26 @@ var option = {
     display: flex;
     flex-flow: column nowrap;
     justify-content: space-between;
+    .enselect {
+      position: absolute;
+      // margin-bottom: 30%;
+      // left: 30px;
+      img {
+        // position: relative;
+        float: left;
+      }
+      .text {
+        position: absolute;
+        top: 5px;
+        left: 20px;
+        // right: -10px;
+        font-size: 22px;
+        color: #fff;
+      }
+    }
+    table {
+      margin-top: 70px;
+    }
     #detailstop {
       width: 100%;
       height: 400px;
diff --git a/src/views/enterprisePollutionMonitoring.vue b/src/views/enterprisePollutionMonitoring.vue
index 369d89dc..a8eaad7f 100644
--- a/src/views/enterprisePollutionMonitoring.vue
+++ b/src/views/enterprisePollutionMonitoring.vue
@@ -63,7 +63,7 @@
         <canvas
           id="myCanvas"
           width="1000"
-          height="600"
+          height="800"
           style="position: absolute"
         ></canvas>
         <img class="allimg" src="../assets/indexN/大丰市选中.png" alt="" />
@@ -75,80 +75,20 @@
           </div>
           <div class="content">
             <div class="line">
-              <div class="top">
-                <!-- <img src="../assets/05/弹窗图标1.png" alt="" /> -->
-                <div style="position: relative">
-                  <img src="../assets/05/弹窗图标1.png" /> 　
-                  <div
-                    style="
-                      position: absolute;
-                      z-index: 2;
-                      left: 35%;
-                      top: 35%;
-                      align-items: center;
-                      font-size: 26px;
-                      color: yellow;
-                    "
-                  >
-                    104
-                  </div>
-                </div>
-                <h4>降&nbsp;&nbsp;&nbsp;档</h4>
-              </div>
-              <div class="top">
-                <div style="position: relative">
-                  <img src="../assets/05/弹窗图标1.png" /> 　
-                  <div
-                    style="
-                      position: absolute;
-                      z-index: 2;
-                      left: 25%;
-                      top: 30%;
-                      font-size: 26px;
-                      color: yellow;
-                    "
-                  >
-                    1425
-                  </div>
-                </div>
-                <h4>配变停电</h4>
-              </div>
-              <div class="bottom">
-                <div style="position: relative">
-                  <img src="../assets/05/弹窗图标2.png" /> 　
-                  <div
-                    style="
-                      position: absolute;
-                      z-index: 2;
-                      left: 45%;
-                      top: 35%;
-                      font-size: 24px;
-                      color: orange;
-                    "
-                  >
-                    1
-                  </div>
-                </div>
-                <h4>升&nbsp;&nbsp;&nbsp;档</h4>
-              </div>
-              <div class="bottom">
-                <div style="position: relative">
-                  <img src="../assets/05/弹窗图标2.png" /> 　
-                  <div
-                    style="
-                      position: absolute;
-                      z-index: 2;
-                      left: 40%;
-                      top: 35%;
-                      font-size: 26px;
-                      color: orange;
-                    "
-                  >
-                    55
-                  </div>
-                </div>
-                <h4>线路停电</h4>
-              </div>
+              <ul>
+                <li>
+                  用电量（kwh）&nbsp;
+                  <span style="color: yellow">2.685亿</span>
+                </li>
+                <li>
+                  碳排放量（kg）
+                  <span style="color: orange">7.303万</span>
+                </li>
+                <li>
+                  企业数量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                  <span style="color: yellow">713</span>
+                </li>
+              </ul>
             </div>
           </div>
         </div>
@@ -157,16 +97,18 @@
             <div class="lines">
               <div class="total">
                 <div class="num">
-                  <div style="display: inline-block">
+                  <div>
                     <img
                       style="float: left"
                       src="../assets/index/总数据图标1.png"
                       alt=""
                     />
-                    <span>年度总用电量（2021）</span>
+                    <span>年度总用电量(2021)</span>
                   </div>
                   <h5 class="yellow">
-                    &nbsp;&nbsp;&nbsp;89.21<span style="color: #fff">万</span>
+                    &nbsp;&nbsp;&nbsp;89.21<span style="color: #fff"
+                      >亿kwh</span
+                    >
                   </h5>
                 </div>
               </div>
@@ -174,16 +116,16 @@
             <div class="lines">
               <div class="total">
                 <div class="num">
-                  <div style="display: inline-block">
+                  <div>
                     <img
                       style="float: left; height: 30px; width: 30px"
                       src="../assets/index/总数据图标2.png"
                       alt=""
                     />
-                    <span>年度总用电量（2022）</span>
+                    <span>年度总用电量(2022)</span>
                   </div>
                   <h5 class="orange">
-                    &nbsp;&nbsp;39.83<span style="color: #fff">万</span>
+                    &nbsp;&nbsp;39.83<span style="color: #fff">亿kwh</span>
                   </h5>
                 </div>
               </div>
@@ -191,13 +133,13 @@
             <div class="lines">
               <div class="total">
                 <div class="num">
-                  <div style="display: inline-block">
+                  <div>
                     <img
                       style="float: left; height: 30px; width: 30px"
                       src="../assets/index/总数据图标1.png"
                       alt=""
                     />
-                    <span>年度总碳排放量（2021）</span>
+                    <span>年度总碳排放量(2021)</span>
                   </div>
                   <h5 class="yellow">
                     &nbsp;&nbsp;242.6<span style="color: #fff">万kwh</span>
@@ -208,13 +150,13 @@
             <div class="lines">
               <div class="total">
                 <div class="num">
-                  <div style="display: inline-block">
+                  <div>
                     <img
                       style="float: left; height: 30px; width: 30px"
                       src="../assets/index/总数据图标2.png"
                       alt=""
                     />
-                    <span>年度总碳排放量（2022）</span>
+                    <span>年度总碳排放量(2022)</span>
                   </div>
                   <h5 class="orange">
                     &nbsp;&nbsp;108.3<span style="color: #fff">万kwh</span>
@@ -225,13 +167,13 @@
             <div class="lines">
               <div class="total">
                 <div class="num">
-                  <div style="display: inline-block">
+                  <div>
                     <img
                       style="float: left; height: 30px; width: 30px"
                       src="../assets/index/总数据图标2.png"
                       alt=""
                     />
-                    <span>年度客户总数（2021）</span>
+                    <span>年度客户总数(2021)</span>
                   </div>
                   <h5 class="orange">&nbsp;&nbsp;3673</h5>
                 </div>
@@ -240,13 +182,13 @@
             <div class="lines">
               <div class="total">
                 <div class="num">
-                  <div style="display: inline-block">
+                  <div>
                     <img
                       style="float: left; height: 30px; width: 30px"
                       src="../assets/index/总数据图标2.png"
                       alt=""
                     />
-                    <span>年度客户总数（2022）</span>
+                    <span>年度客户总数(2022)</span>
                   </div>
                   <h5 class="orange">&nbsp;&nbsp;4968</h5>
                 </div>
@@ -266,71 +208,7 @@
           </div>
         </div>
         <div class="content">
-          <ul class="contentUl">
-            <li>
-              <div style="position: relative; height: 80%">
-                <img src="../assets/05/数据分析图标.png" />
-                <div class="text">&nbsp;&nbsp;99</div>
-              </div>
-              <h4>需调档配变数量</h4>
-            </li>
-            <li>
-              <div style="position: relative; height: 80%">
-                <img src="../assets/05/数据分析图标.png" />
-                <div class="text">&nbsp;&nbsp;87</div>
-              </div>
-              <h4>负荷关注</h4>
-            </li>
-            <li>
-              <div style="position: relative; height: 80%">
-                <img src="../assets/05/数据分析图标.png" />
-                <div class="text">19005</div>
-              </div>
-              <h4>近60天停电配变数</h4>
-            </li>
-            <li>
-              <div style="position: relative; height: 80%">
-                <img src="../assets/05/数据分析图标.png" />
-                <div class="text">&nbsp;813</div>
-              </div>
-              <h4>近60天停电线路数</h4>
-            </li>
-            <li>
-              <div style="position: relative; height: 80%">
-                <img src="../assets/05/数据分析图标.png" />
-                <div class="texts">
-                  99.95
-                  <span style="font-size: 15px; color: #fff"
-                    >&nbsp;&nbsp;%</span
-                  >
-                </div>
-              </div>
-              <h4>当天供电可靠性</h4>
-            </li>
-            <li>
-              <div style="position: relative; height: 80%">
-                <img src="../assets/05/数据分析图标.png" />
-                <div class="texts">
-                  0.37
-                  <span style="font-size: 15px; color: #fff">次/户</span>
-                </div>
-              </div>
-              <h4>用户平均停电频次</h4>
-            </li>
-            <li>
-              <div style="position: relative; height: 80%">
-                <img src="../assets/05/数据分析图标.png" />
-                <div class="texts">
-                  0.37
-                  <span style="font-size: 15px; color: #fff"
-                    >&nbsp;&nbsp;小时</span
-                  >
-                </div>
-              </div>
-              <h4>用户平均停电时间</h4>
-            </li>
-            <li></li>
-          </ul>
+          <div id="barCharts"></div>
         </div>
       </div>
       <div class="two" style="height: 49%">
@@ -343,15 +221,7 @@
         </div>
         <div class="content" style="height: 100%">
           <div class="line">
-            <div class="enselect">
-              <img src="../assets/05/日期选择下拉框.png" alt="" />
-              <span class="text"
-                >2023-05-11
-                <span style="color: orange">至</span>
-                2023-05-16</span
-              >
-            </div>
-            <div id="detailen" style="height: 400px"></div>
+            <div id="detailen"></div>
           </div>
         </div>
       </div>
@@ -377,7 +247,6 @@
               </thead>
               <tbody>
                 <tr v-for="(item, index) in pvTable" :key="index">
-                  <td>{{ item.id }}</td>
                   <td>{{ item.name }}</td>
                   <td>{{ item.stationNumber }}</td>
                   <td class="titleFont">{{ item.alternatorNumber }}</td>
@@ -565,13 +434,13 @@ export default {
   },
   created() {},
   mounted() {
+    this.xianDuan();
     this.detailedTwo11();
     this.detailedTwo22();
     this.detailedTwo33();
     this.detailedTwo44();
     this.barCharts();
     this.detailen();
-    this.xianDuan();
   },
   methods: {
     //地图画线
@@ -582,6 +451,16 @@ export default {
       ctx.lineTo(770, 120); // lineTo(x,y) 定义线条结束坐标
       ctx.strokeStyle = "orange";
       ctx.lineWidth = 5;
+      ctx.font = "26px Arial";
+      ctx.fillStyle = "#fff";
+      ctx.fillText("11.87万", 320, 140);
+      ctx.fillText("14.76万", 400, 200);
+      ctx.fillText("2.113万", 270, 360);
+      ctx.fillText("39.12万", 480, 285);
+      ctx.fillText("7.399万", 320, 440);
+      ctx.fillText("7.399万", 480, 410);
+      ctx.fillText("255.1万", 640, 465);
+      ctx.fillText("298.4万", 750, 660);
       ctx.stroke();
     },
     detailedTwo11() {
@@ -604,13 +483,7 @@ export default {
         xAxis: [
           {
             type: "category",
-            data: [
-              "10kv北红线124",
-              "10kv北红线125",
-              "10kv北红线126",
-              "10kv北红线127",
-              "10kv北红线128",
-            ],
+            data: ["2530", "2541", "2542", "2550", "2610", "2621"],
             axisLabel: {
               color: "#fff",
               fontSize: "18",
@@ -621,26 +494,13 @@ export default {
           {
             type: "value",
             min: 0,
-            max: 5,
-            interval: 1,
+            max: 200,
+            interval: 50,
             axisLabel: {
-              formatter: "{value} 万",
-              textStyle: {
-                color: "#ffffff",
-              },
-            },
-          },
-        ],
-        yAxis: [
-          {
-            type: "value",
-            min: 0,
-            max: 0.5,
-            interval: 0.1,
-            axisLabel: {
-              formatter: "{value}",
+              formatter: "{value}万",
               textStyle: {
                 color: "#ffffff",
+                fontSize: 18,
               },
             },
             axisLine: {
@@ -675,16 +535,16 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data: [320, 332, 301, 334, 390],
+            data: [150, 63, 72, 33, 47, 88],
           },
           {
             name: "碳排放量",
             type: "bar",
             itemStyle: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 1, color: "rgba(237,125,49,.2) " },
-                { offset: 0.5, color: "rgb(237,125,49,.6)" },
-                { offset: 0, color: "rgb(237,125,49)" },
+                { offset: 1, color: "rgba(255,255,0,.2) " },
+                { offset: 0.5, color: "rgb(255,255,0,.6)" },
+                { offset: 0, color: "rgb(255,255,0)" },
               ]),
               borderRadius: [7, 7, 0, 0], // 柱状图圆角
               borderWidth: 0,
@@ -692,7 +552,7 @@ export default {
             emphasis: {
               focus: "series",
             },
-            data: [220, 182, 191, 234, 290],
+            data: [45, 123, 35, 67, 58, 124],
           },
         ],
       };
@@ -850,115 +710,75 @@ export default {
       });
     },
     detailedTwo33() {
-      // note: 设置灰色背景色的长度的逻辑不够好，请自行调整
-      var honorData = [
-        {
-          name: "用电量（单位：亿）",
-          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
-        },
-        {
-          name: "碳排放量（单位：万）",
-          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,iVBORw0KGgoAAAANSUhEUgAAAP8AAAAUCAYAAABCi+uLAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAChxJREFUeJztXDGyJDUMlWeIuQY34AJLFdEuAQkXIOAAROREHICAA0BCFSkJByDhAgRcgIAYftPdY7mfnp7c/XfD/a7a325blmVZT5I9s9PspbyUl/Jelrb9uX+8vFkfvzze7MfRsziFKPei/bb+e+rP54y7wvdK+536UBYlG66P52be1buSrbctwL+tbcvT47n3wXxtpVuWx5P5LTO5tr7/LK8b67hmpV9sa6JN6e1MV4rHlXmdbiaztzfRBmW5KC/vixxf8eG5n2v/z8VXsy9W3r+tz0+WN+2poLpUMvgd8Ar8k/ogVe3etr3cJuMK/huAWkUPPFMf0aMsO88+ftvkZtRuBz224ZyDNxtjn8vfd+NajmcyPF5zn2/waLGPx4068uYxG88FDFr0BxnYoNXeoV4KPch9ZfsivUj9I/8ncIi3g607Wtddgz1yHulJaw16F+/c7vINgUlHY7zoC09VBx0NPl7u9vMK/s/tHcoB/raCX4HdhcY+dgxiIR7JykWyozGig37esMCjF3QQiQ/IgsYUHBM6C1w3eXIHT0PZSP5FOKa93MDgFOBm4Mf+WzYGNnQELALDxycdzhwBA/ZGulJ8eRy2Oy06Xgc8rH0Aq0fl5IQNdN3bUG+Dj2UbWqo1us7YUdrRj4APssJcgxYd2wlmlH4S1rx9K3f7YXUAX9pblgP8W+RXwqhMoBA4Rf9qYcwP21g6mjcB1g2IgWbQTmNHFOb3yilwCoeG6lFdGLmK3ME43TCE8YaIwgbe09QENo46wD8YJcsFgA5rZIOrxuO74sVZBM5hlG01kNcOvXok9zLoBOjGWMwIyXY84iPIEy+QsbL7ILeJMcB3xkfavj9J997UbfO71QF8bW9RIviVAAgq5cGU4JWXw/G4kWbJowfDYJreH44DCxgH0xmBimh3PssRMb0+5kOA4xg3LurzOaUR4CYqcHb6s8iPIAtRSvSHdtZPFa2rualtgIyPHGfjqz0iAJvzd1kx5RfgR6CltB9kXFgGp1fpOQCQI31wymbJCWDbXp9l0cwL+4sA1PXyzeoAvrVnlgh+ZnrFG2Eft6ORYHSs0ph2gY/ZkZa3I7oHIwRFpvsCdBomDKUCm9Ojc7BjXlyfTC3ZAfR2GW3U8UDoQp5HUX9+PGBgTtZXgpT4GsgtQe/tFZgMdAX2wen0Xr+RnvmIQ2vgex3UUegzvRdjzgXa+lrC/lnmH3Rv1Ic6EfuZsmyiTRkEjGt3++rpdfvenlEO8PuZHwV0CkSKeE9ncVwMgIXbp2cgAkV4msVIi/RK0ZT+mfMC2hFx/BiBvDsvBvhOItL+KmXktaRNFc5iWsc2YcwlrdDN6XxmcwfC/SRbmgvHkU69DVP+wRYit78vYGe4T+n+AJ9m6TY/XaKKrGyAH+ewLDuvT9KQ/pJdo0Mg2lR/0H2xfNZ+sovlAD+m/eytlfcWQoVI4I7B2xj8lQERHQIxna2djo0LZRKOY+9Gh4BRn5xFuoGGC7905sd5q/MkA11EeXQOsxt6eTNN+lsjwhEtJhE4OYVG7dh3AuJTwMMzpcS+NqALt/097R9mRGDnufhM7vPghe2YEx2DkNX5JZ0LOtnnazhL+xUd88E60pt9ujqAX+1CyeCvPE01eeUwvA+88S4fXdo0pOU5CFiz2/7ggIRhD+Bh9MY2vABUhlI5luI+IKxFpYwMNnIS7ATSmoWjkHpRRwiuV2m7olfZQpVFzJwNPEeEpv1MRzRs88AAexoivYHjhfVXt/MpzZ/oYoxxvtV5HPfHYj3oQ9hX2DOb9CGPx/s/69/tOwC/20m5Dv6zPuZaOY4ZYEU/ghk/K1cf+YTIDU+8RArOgN+RF8pImxuiepcp9ZGxy8hPIMX1NMWrxXHTM78VbTNgz+pCxnfi2598lEupuu95B/xe7rB/IvLv2Q5+mcqnA5r0ToA1vlcA2ws6pag9HEM75uW+MB/U0QZVFsIf7yYZjva/1r+vVgfwp03KAX7+nF+BXYH/xCmktB8X6xtaXThRXwAoX7wRuAM/VC6MDbyRDzkDdds/1lb0OU8f78sxmCeAuDDCs8gfxihnQf0ypZ+d/0/mDZnWc5wG0YWsC/RiZiFyhjP/JFoH0KgLQlj37iycD9nF7IIP7a48++O8oq9sw31Sx4KOnfTpwcHnj/X5annd/raiHOA/+6jPXY4rRgkECwjAPnMO3uZHBB/L/WgoENXRS/I86rbfiI43LtGItI7PioPeNwQ3DcAVnIBHEpwDHYKBXNzPBq2A5c+zunK+s/O90K10NtgunEv6HobTIF9aX0Mb6XKG9L1RJqAcQpcnZAuUJbhMEtDtWFJ5jGjEC5+qLkCOtpL4aMDHtmX+NeAI/jMB00ghSCVQ4b1K4RGcHlnFHMEA+UlOIRwh+pdk0o0y0e1F3PQH5+T9YNwqtVcGiXOywQVjLdYXaCZ6CHUE4xl91VZF8yq7mPDCT15C3eI+JDq/ALyBHuzQM35yMxwu2wXwqr5zsT8w5XcVTs76aa1jkMmMs8SX4juj53arvwYcwa8YVulHBXg7oWfa2a0mjA0fzRGtzDIIpFsJkQEMP134db78uXOa06gfaK6e+dHQT0G2Ed0fT5nKsmPgM6oJnrN5GcRgvEHnuL8XMoYgA9UT6EDX+LHe3lek/UPXN3Dq/c/S+UzvZSz24Ts6kqRDXjdlF4medUL1aq7Rjns0y7IX/TXgCH4WQL3TBOFyDCTbvGJ3zNmzETCDh1+g36Bf1MP8DniMwNAfooKn4Ax+nlM5jXZEEyO+bADqaJDOhgwWWIt1HU3/M44bmRu6kKME+RnQDfptQivkTvPyOCWP2XGJ6vuJdkIOYa+jrl0PsL/8SYCBPsM+4D6anot1wMFh5jjCXLj2KqDOgqJ6n/HeF5S/BjwH/5kj4E1WNMXtfFnHp/CkSSl4B0EACqkfZg8NIkKL9EMEan9O5A8f7YD86FgGuNsRnUOkIrqwVm5vlqLf4LfQ2DNgc10Zleqv+M4cj2cRRqBrwGrr3yJI/0ov71cAnVk4u6vv9ks768+Q9Ykjw6Azi47d3yt7tYIG17gc9pHuC9CpsZ6BR0xzRH2JXwOO4GdPZMW7ugCzQ3gpFBsGCIqbjwAa/FTaD5sz2sQGJLmQP89l2WtX4E+03uaOZnL2DU4Db6/R4BgohdHyx2OnY6r6Vs5u5ZWBq3Fenzgrf4Zsi8bv0wEAh14QlFi3AyR+gx905PNgG2ZWOK/SKY8jh2EF7aX0n9s8e1nIFpiW6GW2AG3rY3wN2MH/0Vr70GZF/WhERfe2/dUPU8x+gEP1q3mEt8WCBsA/6sD06Wuhm6H993gOGrHO4SA+WOv/Pp6Jhsal/7DDhee5+mMdih/LU+n8bA4ey7rGHzE52Rc5l+tR6fhkfLqkUzq1vA9j/Jn9qrYZbor5L/1YCvZVPyDCwXgty+vHF4BE10t5KS/lfSj/A0bORlHG5bGkAAAAAElFTkSuQmCC";
+      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 = {
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow",
-          },
+        grid: {
+          top: "10%",
+          left: "10%",
+          right: "12%",
+          bottom: "0%",
         },
-
-        legend: {
-          textStyle: {
-            fontSize: 18, //字体大小
-            color: "#ffffff", //字体颜色
-          },
-
-          data: ["用电量", "碳排放量"],
+        xAxis: {
+          show: false,
         },
-        xAxis: [
-          {
-            type: "category",
-            data: ["2530", "2541", "2542", "2550", "2610", "2621"],
-            axisLabel: {
-              show: true,
-              textStyle: {
-                color: "#ffffff",
-              },
-            },
+        yAxis: {
+          data: data.map((item, index) => `No. ${index}`),
+          splitLine: {
+            show: false,
           },
-        ],
-        yAxis: [
-          {
-            type: "value",
-            name: "",
-            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: "用电量（单位：亿）",
-            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: "碳排放量（单位：万）",
-            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,
           },
         ],
       };
@@ -972,20 +792,28 @@ export default {
       var myChart = this.$echarts.init(document.getElementById("detailedTwo4"));
       var data = [
         {
-          name: "使用中资源量",
-          value: 754,
+          name: "核燃料加工",
+          value: 2530,
         },
         {
-          name: "维修中资源量",
-          value: 611,
+          name: "煤加工",
+          value: 2541,
         },
         {
-          name: "保养中资源量",
-          value: 400,
+          name: "煤制品制造",
+          value: 2542,
         },
         {
-          name: "已损坏资源量",
-          value: 200,
+          name: "生物质燃料加工",
+          value: 2530,
+        },
+        {
+          name: "基础化学原料制造",
+          value: 2541,
+        },
+        {
+          name: "氮肥制造",
+          value: 2542,
         },
       ];
       var arrName = getArrayValue(data, "name");
@@ -1003,7 +831,6 @@ export default {
         }
         return res;
       }
-
       function array2obj(array, key) {
         var resObj = {};
         for (var i = 0; i < array.length; i++) {
@@ -1011,7 +838,6 @@ export default {
         }
         return resObj;
       }
-
       function getData(data) {
         var res = {
           series: [],
@@ -1104,7 +930,7 @@ export default {
               },
             ],
           });
-          res.yAxis.push(((data[i].value / sumValue) * 100).toFixed(2) + "%");
+          res.yAxis.push(data[i].name);
         }
         return res;
       }
@@ -1113,31 +939,28 @@ export default {
           show: true,
           icon: "circle",
           top: "center",
-          left: "70%",
+          left: "60%",
           data: arrName,
-          width: 50,
+          width: 200,
           padding: [0, 5],
           itemGap: 25,
           formatter: function (name) {
             return (
-              "{title|" +
-              name +
-              "}\n{value|" +
-              objData[name].value +
-              "}  {title|项}"
+              "{title|" + name + "}{value|" + "   " + objData[name].value + "}"
             );
           },
-
           textStyle: {
             rich: {
               title: {
-                fontSize: 16,
-                lineHeight: 15,
-                color: "rgb(0, 178, 246)",
+                fontSize: 18,
+                lineHeight: 20,
+                width: 150,
+                color: "#fff",
               },
               value: {
                 fontSize: 18,
                 lineHeight: 20,
+                width: 50,
                 color: "#fff",
               },
             },
@@ -1189,154 +1012,83 @@ export default {
         ],
         series: optionData.series,
       };
-
       myChart.setOption(option);
       window.addEventListener("resize", () => {
         myChart.resize();
       });
     },
     barCharts() {
-      // note: 设置灰色背景色的长度的逻辑不够好，请自行调整
-      var honorData = [
-        {
-          name: "用电量（单位：亿）",
-          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
-        },
-        {
-          name: "碳排放量（单位：万）",
-          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("barCharts"));
-
       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: 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: "用电量（单位：亿）",
-            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: "碳排放量（单位：万）",
-            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,
           },
         ],
-        series: optionData.series,
       };
 
       myChart.setOption(option);
@@ -1347,133 +1099,263 @@ export default {
     detailen() {
       var myChart = this.$echarts.init(document.getElementById("detailen"));
       var option = {
+        color: [
+          "#EAEA26",
+          "#906BF9",
+          "#FE5656",
+          "#01E17E",
+          "#3DD1F9",
+          "#FFAD05",
+        ],
+        grid: {
+          left: -100,
+          top: 50,
+          bottom: 10,
+          right: 10,
+          containLabel: true,
+        },
+        // tooltip: {
+        //   trigger: "item",
+        //   formatter: "{b} : {c} ({d}%)",
+        // },
         tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "cross",
-            crossStyle: {
-              color: "#999",
-            },
+          trigger: "item",
+          backgroundColor: "#017D7D", // 修改背景颜色
+          borderColor: "#66FFFF", // 修改字体颜色
+          className: "custom-tooltip-box",
+          formatter: function (params) {
+            console.log(params);
+            // 循环处理数据，展示数据
+            // "<div class='custom-tooltip-style'>"
+
+            var htmlText =
+              "<div class='custom-tooltip-style'>" +
+              '<div style="font-size:22px;height:52px;width:100%;font-weight:600;line-height:52px;text:indent:26px">' +
+              params.name +
+              "<span>" +
+              "</span>" +
+              "</div>" +
+              '<div style="padding:0 5% 5% 10%;text-align:left">' +
+              "<div >" +
+              "<span style='margin-right:10px;font-size:22px;color:white;' >企业数量</span> " +
+              '<span style="color:yellow;font-family:SourceHanSansCN-Bold;font-size:22px;letter-spacing:1.25px;font-weight:700;">' +
+              +params.value +
+              "</span> " +
+              "<span style='font-size:22px;color:yellow;' >（" +
+              params.percent +
+              "%）" +
+              "</span> " +
+              "</div>" +
+              "<div style='margin: 10px 0'>" +
+              "<span style='margin-right:33px;font-size:22px;color:white;' >用电量</span> " +
+              '<span style="color:orange;font-family:SourceHanSansCN-Bold;font-size:22px;letter-spacing:1.25px;font-weight:700;">' +
+              "6.682亿" +
+              "</span> " +
+              "</div>" +
+              "<div style='margin: 1opx 0'>" +
+              "<span style='margin-right:10px;font-size:22px;color:white;' >碳排放量</span> " +
+              '<span style="color:yellow;font-family:SourceHanSansCN-Bold;font-size:22px;letter-spacing:1.25px;font-weight:700;">' +
+              "18.18万" +
+              "</span> " +
+              "</div>" +
+              "</div>" +
+              "</div>";
+
+            return htmlText;
           },
         },
-        legend: {
-          textStyle: {
+        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: "#0B4A6B",
+            margin: 8,
             fontSize: 16,
-            color: "#fff",
           },
-          data: ["月合格率低用户数", "月合格率"],
-          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
-          orient: "vertical",
-          // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
-          x: "right",
-          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）、
-          y: "top",
         },
-        xAxis: [
-          {
-            type: "category",
-            data: ["4-08", "5-08", "6-08", "7-08", "8-08", "9-08"],
-            axisPointer: {
-              type: "shadow",
-            },
-            axisLabel: {
-              color: "#fff",
-              fontSize: "18",
+        radiusAxis: {
+          min: 40,
+          max: 120,
+          interval: 20,
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: "#0B3E5E",
+              width: 1,
+              type: "solid",
             },
           },
-        ],
-        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",
-              },
+          axisLabel: {
+            formatter: "{value} %",
+            show: false,
+            padding: [0, 0, 20, 0],
+            color: "#0B3E5E",
+            fontSize: 16,
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#0B3E5E",
+              width: 2,
+              type: "solid",
             },
           },
-          {
-            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",
-              },
-            },
-          },
-        ],
+        },
+        calculable: true,
         series: [
           {
-            name: "月合格率低用户数",
-            type: "bar",
-            tooltip: {
-              valueFormatter: function (value) {
-                return value;
+            type: "pie",
+            radius: ["5%", "10%"],
+            hoverAnimation: false,
+            labelLine: {
+              normal: {
+                show: false,
+                length: 30,
+                length2: 55,
+              },
+              emphasis: {
+                show: false,
               },
             },
-            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],
+            data: [
+              {
+                name: "",
+                value: 0,
+                itemStyle: {
+                  normal: {
+                    color: "#0B4A6B",
+                  },
+                },
+              },
+            ],
           },
           {
-            name: "月合格率",
-            type: "line",
-            yAxisIndex: 1,
-            tooltip: {
-              valueFormatter: function (value) {
-                return value + " %";
+            type: "pie",
+            radius: ["90%", "95%"],
+            hoverAnimation: false,
+            labelLine: {
+              normal: {
+                show: false,
+                length: 30,
+                length2: 55,
+              },
+              emphasis: {
+                show: false,
               },
             },
-            itemStyle: {
+            name: "",
+            data: [
+              {
+                name: "",
+                value: 0,
+                itemStyle: {
+                  normal: {
+                    color: "#0B4A6B",
+                  },
+                },
+              },
+            ],
+          },
+          {
+            stack: "a",
+            type: "pie",
+            radius: ["20%", "80%"],
+            roseType: "area",
+            zlevel: 10,
+            label: {
               normal: {
-                color: "yellow",
-                lineStyle: {
-                  color: "yellow",
+                formatter: (params) => {
+                  console.log(params);
+                  return (
+                    "{b| " +
+                    params.name +
+                    "}  " +
+                    "{c|" +
+                    params.percent.toFixed(0) +
+                    "%}"
+                  );
+                },
+                borderWidth: 0,
+                borderRadius: 4,
+                fontSize: 16,
+                align: "center",
+                color: "#3494BD",
+                rich: {
+                  b: {
+                    fontSize: 16,
+                    lineHeight: 20,
+                    color: "#fff",
+                    padding: [0, 0, 5, 0],
+                  },
+                  c: {
+                    fontSize: 20,
+                    lineHeight: 20,
+                    color: "orange",
+                  },
                 },
               },
             },
-            data: [20, 45, 33, 45, 63, 72],
+            // label: {
+            //   normal: {
+            //     show: true,
+            //     formatter: "{c}",
+            //     textStyle: {
+            //       fontSize: 12,
+            //     },
+            //     position: "outside",
+            //   },
+            //   emphasis: {
+            //     show: true,
+            //   },
+            // },
+            labelLine: {
+              normal: {
+                show: true,
+                length: 20,
+                length2: 55,
+              },
+              emphasis: {
+                show: false,
+              },
+            },
+            data: [
+              {
+                value: 10,
+                name: "IDS",
+              },
+              {
+                value: 5,
+                name: "VPN",
+              },
+              {
+                value: 15,
+                name: "交换机",
+              },
+              {
+                value: 25,
+                name: "防火墙",
+              },
+              {
+                value: 20,
+                name: "WAF",
+              },
+              {
+                value: 35,
+                name: "堡垒机",
+              },
+            ],
           },
         ],
       };
@@ -1487,6 +1369,20 @@ export default {
 };
 </script>
 <style lang="less" scoped>
+// 给父盒子清除默认已有样式
+:deep(.custom-tooltip-box) {
+  padding: 0 !important;
+  border: none !important;
+  background-color: transparent !important;
+  // 给子盒子自定义样式
+  .custom-tooltip-style {
+    width: 292px;
+    height: 165px;
+    background-image: url("../assets/08/地图弹窗.png");
+    background-size: cover;
+    color: #fff;
+  }
+}
 .content {
   /deep/ .el-table__body td .cell {
     white-space: normal !important;
@@ -1649,11 +1545,11 @@ export default {
     display: flex;
     flex-flow: column nowrap;
     justify-content: space-between;
-    #detailedTwo1 {
+    #detailedTwo2 {
       width: 100%;
       height: 400px;
     }
-    #detailedTwo2 {
+    #detailedTwo3 {
       width: 100%;
       height: 350px;
     }
@@ -1667,18 +1563,17 @@ export default {
     flex-flow: column nowrap;
     justify-content: space-between;
     .imgboxone {
-      background: url("../assets/04/总数据外框.png") no-repeat;
+      background: url("../assets/08/总数据外框1.png") no-repeat;
       width: 100%;
       height: 17%;
       position: relative;
       top: 45%;
-      left: 30%;
+      left: 17%;
       .contents {
-        // height: 90%;
         position: absolute;
         padding: 10px;
         height: 100%;
-        width: 53%;
+        width: 80%;
         display: flex;
         flex-direction: row;
         /* 平分剩余空间 */
@@ -1696,8 +1591,11 @@ export default {
             justify-content: center;
             align-items: left;
             color: #ffffff;
+            div {
+              display: -webkit-inline-box;
+            }
             span {
-              font-size: 20px;
+              font-size: 18px;
             }
             h5 {
               font-size: 34px;
@@ -1732,7 +1630,7 @@ export default {
     }
   }
   .imgboxtwo {
-    background: url("../assets/05/地图弹窗.png") no-repeat;
+    background: url("../assets/08/地图弹窗.png") no-repeat;
     background-size: 100%;
     float: right;
     right: 5%;
@@ -1741,8 +1639,8 @@ export default {
     height: 28vh;
     position: relative;
     .content {
-      height: 70%;
-      padding: 15px 15px 15px 15px;
+      height: 36%;
+      padding: 0 15px 0 15px;
       box-sizing: border-box;
       display: flex;
       flex-flow: row nowrap;
@@ -1755,16 +1653,14 @@ export default {
         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;
+        ul {
+          height: 100%;
+          li {
+            text-align: left;
+            height: 33%;
+            font-size: 23px;
+            color: #f8f8f8;
+          }
         }
       }
 
@@ -1802,7 +1698,7 @@ export default {
     justify-content: space-between;
     #detailen {
       width: 100%;
-      height: 400px;
+      height: 350px;
     }
     .content {
       height: 80%;
@@ -1811,56 +1707,9 @@ export default {
       display: flex;
       flex-flow: row nowrap;
       justify-content: space-between;
-
-      .contentUl {
-        display: flex;
-        margin: 0;
-        padding: 10px;
+      #barCharts {
         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;
-          }
-        }
+        height: 350px;
       }
     }
 
diff --git a/src/views/ruralDomesticSewageTreatment.vue b/src/views/ruralDomesticSewageTreatment.vue
index d0750b82..defd97df 100644
--- a/src/views/ruralDomesticSewageTreatment.vue
+++ b/src/views/ruralDomesticSewageTreatment.vue
@@ -38,7 +38,7 @@
         <canvas
           id="myCanvas"
           width="1000"
-          height="600"
+          height="700"
           style="position: absolute"
         ></canvas>
         <img class="allimg" src="../assets/indexN/大丰市选中.png" alt="" />
@@ -420,6 +420,16 @@ export default {
       ctx.lineTo(770, 140); // lineTo(x,y) 定义线条结束坐标
       ctx.strokeStyle = "orange";
       ctx.lineWidth = 5;
+      ctx.font = "26px Arial";
+      ctx.fillStyle = "#fff";
+      ctx.fillText("11.87万", 320, 140);
+      ctx.fillText("14.76万", 400, 200);
+      ctx.fillText("2.113万", 270, 360);
+      ctx.fillText("39.12万", 480, 285);
+      ctx.fillText("7.399万", 320, 440);
+      ctx.fillText("7.399万", 480, 410);
+      ctx.fillText("255.1万", 640, 465);
+      ctx.fillText("298.4万", 750, 660);
       ctx.stroke();
     },
     detailedTwo11() {