From 886b0e037a3a456ff44eb0cf05c313408480039f Mon Sep 17 00:00:00 2001
From: mazhehui <364400343@qq.com>
Date: Tue, 18 Jul 2023 18:11:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=86=E5=B8=83=E5=BC=8F=E5=85=89=E4=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/index.vue           |   10 +-
 src/views/stationBuilding.vue |  382 ++++++--
 src/views/thirtyFiveKV.vue    | 1605 +++++++++++++++++++++++++++++++--
 src/views/twentyKV.vue        | 1584 +++++++++++++++++++++++++++++++-
 4 files changed, 3424 insertions(+), 157 deletions(-)

diff --git a/src/views/index.vue b/src/views/index.vue
index aa02810c..61c86ff3 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -69,7 +69,7 @@
         <div id="detailedTwo1"></div>
       </div>
       <div class="two" style="height: 49%">
-        <div class="cartitle">
+        <div class="cartitle"  @click="routerTo('配网工程全过程物资审计')">
           <div class="titleFont">配网工程全过程物资审计</div>
         </div>
         <div class="content" style="display:inline">
@@ -138,7 +138,7 @@
     </div>
     <div class="left1" id="left">
       <div class="one" style="height: 48%">
-        <div class="cartitle">
+        <div class="cartitle" @click="routerTo('盐都东台区供电所数字化分析')">
           <div class="titleFont">盐都东台区供电所数字化分析</div>
         </div>
         <div class="content">
@@ -1083,6 +1083,12 @@ export default {
       if (data == '盐城地区分布光伏运行监测') {
         this.$router.push("/stationBuilding");
       }
+      if (data == '盐都东台区供电所数字化分析') {
+        this.$router.push("/twentyKV");
+      }
+      if (data == '配网工程全过程物资审计') {
+        this.$router.push("/thirtyFiveKV");
+      }
     },
     //班组
     getbanzhu() {
diff --git a/src/views/stationBuilding.vue b/src/views/stationBuilding.vue
index 0ebad1f9..b5138009 100644
--- a/src/views/stationBuilding.vue
+++ b/src/views/stationBuilding.vue
@@ -65,29 +65,37 @@
     </div>
     <div class="middle" id="middle">
       <div class="map" style="height: 100%">
+        <canvas
+          id="myCanvas"
+          width="1000"
+          height="600"
+          style="position: absolute"
+        ></canvas>
+
+        <img src="../assets/indexN/大丰市选中.png" alt="" />
         <div class="imgboxone">
           <div class="contents">
             <div class="lines">
               <div class="total">
                 <div class="num">
-                  <span style="font-size: 18px">户数高渗透率</span>
-                  <h5 style="font-size: 28px; color: yellow">3.40%</h5>
+                  <span>户数高渗透率</span>
+                  <h5 class="yellow">3.40%</h5>
                 </div>
               </div>
             </div>
             <div class="lines">
               <div class="total">
                 <div class="num">
-                  <span style="font-size: 18px">容量渗透率</span>
-                  <h5 style="font-size: 28px; color: orange">0.01%</h5>
+                  <span>容量渗透率</span>
+                  <h5 class="orange">0.01%</h5>
                 </div>
               </div>
             </div>
             <div class="lines">
               <div class="total">
                 <div class="num">
-                  <span style="font-size: 18px">能量渗透率</span>
-                  <h5 style="font-size: 28px; color: yellow">0.44%</h5>
+                  <span>能量渗透率</span>
+                  <h5 class="yellow">0.44%</h5>
                 </div>
               </div>
             </div>
@@ -175,23 +183,6 @@
         </div>
         <div class="content">
           <div class="line">
-            <!-- <div class="total">
-              <div class="num" @click="openLineDetail(CompanyInfo.pdxl)">
-                <span style="font-size: 18px">户数高渗透率&nbsp;</span>
-                <span style="
-                    font-size: 45px;
-                    font-weight: 600;
-                    -webkit-background-clip: text;
-                    background-clip: text;
-                    background-image: linear-gradient(
-                      to bottom,
-                      rgb(189, 255, 231),
-                      rgb(86, 244, 254)
-                    );
-                  " class="numText" :text="CompanyInfo.pdxl">{{ CompanyInfo.pdxl }}</span>
-
-              </div>
-            </div> -->
             <table>
               <thead style="color: #fff; font-size: 30px">
                 <tr>
@@ -215,10 +206,6 @@
       </div>
     </div>
 
-    <!-- <div style="height:40px;width:40px" class="suoxiao">
-        <img src="../assets/images/btnFangDa.png" style="height:40px;width:40px"/>
-      </div> -->
-
     <audio
       controls="controls"
       hidden
@@ -229,6 +216,8 @@
 </template>
 
 <script>
+//引入echarts
+import * as echarts from "echarts";
 // 工单统计弹窗组件
 import workOrder from "../component/workOrder.vue";
 import ringMainUnit from "./HomePop/ringMainUnit.vue";
@@ -237,7 +226,7 @@ import routeDetail from "../component/routeDetail.vue";
 // 线路详情
 import lineDetail from "../component/lineDetail.vue";
 export default {
-  name: "home",
+  name: "stationRuilding",
   components: {
     ringMainUnit, //环网柜弹窗
     workOrder, //工单统计弹窗
@@ -493,8 +482,20 @@ export default {
     this.detailedTwo22();
     this.detailqe1();
     this.detailen1();
+    this.xianDuan();
   },
   methods: {
+    xianDuan() {
+      var canvas = document.getElementById("myCanvas");
+      var ctx = canvas.getContext("2d");
+      ctx.moveTo(500, 500); // moveTo(x,y) 定义线条开始坐标
+      ctx.lineTo(700, 150); // lineTo(x,y) 定义线条结束坐标
+      ctx.moveTo(400, 500); // moveTo(x,y) 定义线条开始坐标
+      ctx.lineTo(160, 600); // lineTo(x,y) 定义线条结束坐标
+      ctx.strokeStyle = "orange";
+      ctx.lineWidth = 5;
+      ctx.stroke();
+    },
     detailedTwo11() {
       var fontColor = "#fff";
       var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
@@ -607,70 +608,268 @@ export default {
       });
     },
     detailedTwo22() {
-      var fontColor = "#30eee9";
+      // 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("detailedTwo2"));
+
       var option = {
+        color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "none",
+          },
+        },
+        backgroundColor: "#031f2d",
+
+        legend: {
+          right: 5,
+          top: "5%",
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 15,
+          textStyle: {
+            color: "#ACCFFF",
+            fontSize: 16,
+          },
+        },
         grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          top: "10%",
           containLabel: true,
         },
-        xAxis: {
-          type: "value",
-          show: false,
-        },
-        yAxis: {
-          type: "category",
-          axisLine: {
-            lineStyle: {
-              color: "#206489",
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#6B9DD7",
+              fontSize: 16, // 文字大小
+              fontWeight: 400,
+              interval: 0,
+              formatter: function (value) {
+                return value + "(万元)";
+              },
+            },
+            splitLine: {
+              show: false,
             },
           },
-          axisLabel: {
-            color: "#fff",
-            fontSize: "18",
+        ],
+        yAxis: [
+          {
+            type: "category",
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#6B9DD7",
+              fontSize: 16, // 文字大小
+              fontWeight: 400,
+              interval: 0,
+            },
+            offset: 20,
+            data: honorXAxisData,
           },
-          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",
+            name: "2019末",
             type: "bar",
-            stack: "total",
-            barWidth: 10,
+            stack: "zongliang",
+            barWidth: "35%",
+            zlevel: 10,
             label: {
-              show: true,
+              normal: {
+                show: true,
+                position: "inside",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 14,
+                },
+              },
             },
-            emphasis: {
-              focus: "series",
-            },
-            data: [320, 302, 310, 299, 288],
+            data: honorData[0].data,
           },
           {
-            name: "Mail Ad",
+            name: "2020上半年",
             type: "bar",
-            stack: "total",
-            barWidth: 10,
-
+            stack: "zongliang",
+            barWidth: "35%",
+            zlevel: 10,
             label: {
-              show: true,
+              normal: {
+                show: true,
+                position: "top",
+                formatter: function (params) {
+                  console.log(params);
+                  // return  params.seriesName + params.value ;
+                  return "完成" + params.value;
+                },
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 12,
+                },
+              },
             },
-            emphasis: {
-              focus: "series",
+            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: [99, 88, 100, 101, 97],
+            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();
@@ -818,7 +1017,11 @@ export default {
             name: "关联电网事故",
             type: "bar",
             itemStyle: {
-              color: "#00ffff", // 柱状图颜色
+              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,
             },
@@ -831,7 +1034,11 @@ export default {
             name: "关联检修单",
             type: "bar",
             itemStyle: {
-              color: "yellow", // 柱状图颜色
+              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)" },
+              ]),
               borderRadius: [7, 7, 0, 0], // 柱状图圆角
               borderWidth: 0,
             },
@@ -1026,11 +1233,12 @@ export default {
       background-size: 100%;
       float: right;
       width: 40vh;
-      height: 25vh;
+      height: 10vh;
       position: relative;
       top: 5vh;
       right: 1vh;
       .contents {
+        height: 90%;
         padding: 10px 10px 10px 10px;
         box-sizing: border-box;
         display: flex;
@@ -1045,18 +1253,25 @@ export default {
         }
 
         .total {
-          display: flex;
-          flex-flow: row nowrap;
-          justify-content: space-around;
-          margin-bottom: 15%;
-
           .num {
-            float: left;
             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;
+            }
           }
         }
       }
@@ -1077,7 +1292,6 @@ export default {
         margin: 0;
         padding: 10px;
         width: 100%;
-        height: 100%;
         /* flex布局 */
         display: flex;
         // 开启换行
@@ -1096,11 +1310,12 @@ export default {
           }
           width: 49.5%;
           //高度调整
-          height: 49%;
+          height: 50%;
           list-style: none;
           font-size: 24px;
           color: #fff;
           background: url("../assets/02/弹窗里的小框子.png") no-repeat;
+          background-size: 100%;
         }
       }
     }
@@ -1111,6 +1326,11 @@ export default {
       display: table-cell;
       text-align: center;
       margin-left: -20%;
+      img {
+        position: relative;
+        left: 20%;
+        top: 35%;
+      }
     }
   }
 
diff --git a/src/views/thirtyFiveKV.vue b/src/views/thirtyFiveKV.vue
index 3554d4ef..7a008191 100644
--- a/src/views/thirtyFiveKV.vue
+++ b/src/views/thirtyFiveKV.vue
@@ -1,81 +1,1562 @@
 <template>
-  <div class="stationBuilding">
-    <!-- <video-player
-      class="video-player vjs-custom-skin"
-      style="heght:100%;width:100%"
-      ref="VideoPlayer"
-      :playsinline="true"
-      :options="playerOptions"
-      > 
-      </video-player> -->
-    <div class="stationContent">
-      <div class="systemText">
-        <i class="el-icon-loading" style="color: #4bfffd; font-size: 80px"></i>
-        <p style="font-size: 30px;color:#fff">系统正在加载中...</p>
+  <div class="home">
+    <div class="left" 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>
+      </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="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%">
+        <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;9.279 <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;118.5<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/总数据图标1.png"
+                      alt=""
+                    />
+                    <span>计划数</span>
+                  </div>
+                  <h5 class="yellow">&nbsp;&nbsp;44</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;10</h5>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right" id="right">
+      <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 id="barCharts"></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 id="detailen"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right1" id="right">
+      <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">
+            <table>
+              <thead style="color: #fff; font-size: 30px">
+                <tr>
+                  <td>县公司名称</td>
+                  <td>物科数量</td>
+                  <td>计划数量</td>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(item, index) in pvTable" :key="index">
+                  <td>{{ item.name }}</td>
+                  <td>{{ item.stationNumber }}</td>
+                  <td class="titleFont">{{ item.alternatorNumber }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <audio
+      controls="controls"
+      hidden
+      src="../assets/videos/police.wav"
+      ref="audio"
+    ></audio>
   </div>
 </template>
 
 <script>
+//引入echarts
+import * as echarts from "echarts";
+// 工单统计弹窗组件
+import workOrder from "../component/workOrder.vue";
+import ringMainUnit from "./HomePop/ringMainUnit.vue";
+import routeDetail from "../component/routeDetail.vue";
+
+// 线路详情
+import lineDetail from "../component/lineDetail.vue";
 export default {
-  name: "thirtyFiveKV",
+  name: "twentyKV",
+  components: {
+    ringMainUnit, //环网柜弹窗
+    workOrder, //工单统计弹窗
+    routeDetail, //线路故障跳闸明细
+    lineDetail, //线路详情弹窗
+  },
   data() {
     return {
-      // 视频播放器配置
-      playerOptions: {
-        height: 400,
-        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
-        autoplay: false, // 如果true,浏览器准备好时开始回放。
-        muted: false, // 默认情况下将会消除任何音频。
-        loop: false, // 导致视频一结束就重新开始。
-        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
-        language: "zh-CN",
-        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
-        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
-        sources: [
-          {
-            type: "video/mp4", // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
-            src: require("../assets/videos/video.mp4"), // url地址
-          },
-        ],
-        poster: require("../assets/images/sun.png"), // 你的封面地址
-        // width: document.documentElement.clientWidth, //播放器宽度
-        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
-        controlBar: {
-          timeDivider: true,
-          durationDisplay: true,
-          remainingTimeDisplay: false,
-          fullscreenToggle: true, // 全屏按钮
+      pageShow: true,
+      totals: 5,
+      pageSize: 10,
+      page: 1,
+      threeImg: require("../assets/images/pieBorder.png"),
+      enlargeShow: true,
+      dateList: ["周", "月"],
+      acolor: true, //是否展示颜色
+      currentIndex: -1,
+      alarmInformationData: [],
+      alarmInformationShow: false, //报警详情信息弹窗
+      realTimeAlarmShow: false, //实时报警弹窗
+      modelOthers: false,
+      componentShow: "",
+      CompanyInfo: {},
+      tableData: [],
+      btnArr: ["总览", "环网柜", "分支箱", "箱变", "开闭所"],
+      btnActive: 0,
+      iconGround: [
+        {
+          icon: require("@/assets/images/huanwanggui.png"),
+          name: "环网柜",
         },
-      },
+        {
+          icon: require("@/assets/images/fenzhixiang.png"),
+          name: "分支箱",
+        },
+        {
+          icon: require("@/assets/images/xiangbian.png"),
+          name: "箱变",
+        },
+        {
+          icon: require("@/assets/images/kaibisuo.png"),
+          name: "开闭所",
+        },
+      ],
+      btnEnlarge: [
+        {
+          icon: require("@/assets/images/btnTiShi.png"),
+        },
+        {
+          icon: require("@/assets/images/btnFangDa.png"),
+        },
+      ],
+      btnEnlarge1: [
+        {
+          icon: require("@/assets/images/btnTiShi.png"),
+        },
+        {
+          icon: require("@/assets/images/suoxiao.png"),
+        },
+      ],
+      options: [
+        {
+          value: "",
+          label: "",
+        },
+      ],
+      value: "",
+      topContent: [
+        {
+          name: "配变数量",
+          count: "",
+        },
+        {
+          name: "重复停运台次",
+          count: "",
+        },
+        {
+          name: "配变重复停运率",
+          count: "",
+        },
+      ],
+      device: "",
+      tableData: [],
+      tableKey: +new Date(),
+      scrollTop: 0, //table距离顶部距离
+      option: null,
+      myChartBin: null,
+      // 工单
+      orderItem: null,
+      orderShow: "",
+      // 线路故障明细
+      routeItem: null,
+      routeShow: "",
+      // 配电线路
+      lineItem: null,
+      lineShow: "",
+      timer: null, //定时器
+      emergencyList: [], //告警数据
+      rowTime: "",
+      pvTable: [
+        {
+          name: "国网东台区供电公司",
+          stationNumber: "0",
+          alternatorNumber: "1",
+        },
+        {
+          name: "国网东台区供电公司",
+          stationNumber: "23",
+          alternatorNumber: "1",
+        },
+        {
+          name: "国网东台区供电公司",
+          stationNumber: "1",
+          alternatorNumber: "3",
+        },
+        {
+          name: "国网东台区供电公司",
+          stationNumber: "1",
+          alternatorNumber: "2",
+        },
+        {
+          name: "国网东台区供电公司",
+          stationNumber: "14",
+          alternatorNumber: "3",
+        },
+        {
+          name: "国网东台区供电公司",
+          stationNumber: "45.3w",
+          alternatorNumber: "2",
+        },
+        {
+          name: "国网东台区供电公司",
+          stationNumber: "13.3w",
+          alternatorNumber: "1",
+        },
+        {
+          name: "国网东台区供电公司",
+          stationNumber: "23",
+          alternatorNumber: "0",
+        },
+        {
+          name: "国网东台区供电公司",
+          stationNumber: "23",
+          alternatorNumber: "0",
+        },
+        {
+          name: "国网东台区供电公司",
+          stationNumber: "356.3w",
+          alternatorNumber: "2",
+        },
+      ],
     };
   },
+  created() {},
+  mounted() {
+    this.detailedTwo11();
+    this.detailedTwo22();
+    this.detailedTwo33();
+    this.barCharts();
+    this.detailen();
+  },
+  methods: {
+    detailedTwo11() {
+      var fontColor = "#fff";
+      var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
+      var option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: ["2018", "2019", "2020", "2021", "2022"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#ffffff",
+                fontSize: "18",
+              },
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+              alignWithLabel: true,
+            },
+            splitArea: { show: false },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "",
+            axisLabel: {
+              textStyle: {
+                color: "#ffffff",
+                fontSize: "18",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "预计年变化趋势",
+            type: "bar",
+            barWidth: 40,
+            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],
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    detailedTwo22() {
+      var fontColor = "#30eee9";
+      var myChart = this.$echarts.init(document.getElementById("detailedTwo2"));
+      var option = {
+        tooltip: {
+          show: true,
+          trigger: "item",
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          axisLabel: {
+            color: "#fff",
+            fontSize: "16",
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: "#195384",
+            },
+          },
+          data: ["2018", "2019", "2020", "2021", "2022"],
+        },
+        yAxis: {
+          type: "value",
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+        },
+        series: [
+          {
+            name: "总投资",
+            type: "line",
+            stack: "Total",
+            symbol: "none",
+            data: [80, 132, 101, 134, 121],
+            itemStyle: {
+              normal: {
+                color: "yellow",
+                lineStyle: {
+                  color: "yellow",
+                },
+              },
+            },
+          },
+        ],
+      };
+      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",
+          },
+        },
+        backgroundColor: "#031f2d",
+
+        legend: {
+          right: 5,
+          top: "5%",
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 15,
+          textStyle: {
+            color: "#ACCFFF",
+            fontSize: 16,
+          },
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          top: "10%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#6B9DD7",
+              fontSize: 16, // 文字大小
+              fontWeight: 400,
+              interval: 0,
+              formatter: function (value) {
+                return value + "(万元)";
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "category",
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#6B9DD7",
+              fontSize: 16, // 文字大小
+              fontWeight: 400,
+              interval: 0,
+            },
+            offset: 20,
+            data: honorXAxisData,
+          },
+        ],
+        series: [
+          {
+            name: "2019末",
+            type: "bar",
+            stack: "zongliang",
+            barWidth: "35%",
+            zlevel: 10,
+            label: {
+              normal: {
+                show: true,
+                position: "inside",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 14,
+                },
+              },
+            },
+            data: honorData[0].data,
+          },
+          {
+            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,
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    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}%)",
+        },
+
+        legend: {
+          orient: "vertical",
+          top: "middle",
+          right: "5%",
+          textStyle: {
+            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: [
+            "国网大丰市供电公司",
+            "设备管理部",
+            "国网射阳县供电公司",
+            "国网响水县供电公司",
+            "盐城运维检修部(检修分公司)",
+            "开发区供电服务中心",
+          ],
+        },
+
+        calculable: true,
+        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)", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
+                },
+              },
+            },
+
+            itemStyle: {
+              normal: {
+                label: {
+                  show: true,
+                  fontSize: 20,
+                  color: "#fff",
+                },
+              },
+            },
+            data: [
+              { value: 22, name: "国网大丰市供电公司" },
+              { value: 20, name: "设备管理部" },
+              { value: 21, name: "国网射阳县供电公司" },
+              { value: 25, name: "国网响水县供电公司" },
+              { value: 20, name: "盐城运维检修部(检修分公司)" },
+              { value: 30, name: "开发区供电服务中心" },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+  },
+  watch: {},
 };
 </script>
-
 <style lang="less" scoped>
-.stationBuilding {
-  width: 1722px;
-  height: 982px;
-  background: url("../assets/images/stationBuildingKuang.png") no-repeat;
-  background-size: 100% 100%;
-  padding: 15px 25px;
-  z-index: 100;
-  .stationContent {
-    width: 100%;
-    height: 100%;
-    background: url("../assets/images/zhifu.png") no-repeat;
-    background-size: 100% 100%;
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .systemText {
-      position: absolute;
-      display: flex;
-      flex-direction: column;
+.content {
+  /deep/ .el-table__body td .cell {
+    white-space: normal !important;
+  }
+}
+
+.two {
+  /deep/ .el-table__body-wrapper {
+    height: 195px !important;
+  }
+  .enselect {
+    position: absolute;
+    right: 30px;
+    img {
+      float: right;
+    }
+    .text {
+      float: right;
+      // right: -10px;
+      margin-right: -60px;
+      font-size: 20px;
+
+      color: #fff;
     }
   }
 }
-</style>
\ No newline at end of file
+
+// 滚动条的宽度
+/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px; // 横向滚动条
+  height: 6px; // 纵向滚动条 必写
+  // display: block !important;
+}
+
+// 滚动条的滑块
+/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background-color: rgba(35, 160, 247, 1);
+  border-radius: 3px;
+}
+
+/deep/ .el-table--scrollable-x .el-table__body-wrapper {
+  overflow-x: hidden;
+}
+
+.user_skills {
+  /deep/ .el-table {
+    background-color: transparent !important;
+  }
+
+  /deep/ .el-table th {
+    background-color: transparent !important;
+  }
+
+  /deep/ .el-table__header {
+    width: 100% !important;
+    height: 70px;
+    background: url("../assets/images/tableBg.png") no-repeat;
+    background-size: 100% 100%;
+
+    .cell {
+      text-align: center !important;
+      justify-content: center;
+    }
+  }
+
+  /deep/ .el-table__header th {
+    border: none;
+    padding: 0;
+    height: 48px;
+
+    .cell {
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    &.el-table__cell.is-leaf {
+      border: none !important;
+    }
+  }
+
+  /deep/ .el-table tr {
+    background-color: transparent;
+  }
+
+  /deep/ .el-table--enable-row-transition .el-table__body td,
+  .el-table .cell {
+    background-color: transparent !important;
+    border: none;
+    color: #ffffff;
+  }
+
+  /deep/ .el-table__body td .cell {
+    white-space: nowrap;
+    // word-break: break-all;
+    display: flex !important;
+    justify-content: center !important;
+  }
+
+  /deep/ .el-table th.el-table__cell > .cell {
+    color: rgb(86, 254, 226);
+  }
+
+  /deep/.el-table__body,
+  .el-table__footer,
+  .el-table__header {
+    width: 100% !important;
+  }
+
+  /deep/ .el-table__body td .cell {
+    // width: 60px !important;
+  }
+
+  // &::before {
+  //   //去除底部白线
+  //   left: 0;
+  //   bottom: 0;
+  //   width: 100%;
+  //   height: 0px;
+  // }
+  .el-table::before {
+    background-color: transparent;
+  }
+}
+
+.home {
+  width: 100%;
+  height: 100%;
+  padding: 15px 28px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  box-sizing: border-box;
+
+  .left {
+    padding-right: 15px;
+    // width: 604px;
+    width: 17.18%;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    #detailedTwo1 {
+      width: 100%;
+      height: 350px;
+    }
+    #detailedTwo2 {
+      width: 100%;
+      height: 350px;
+    }
+  }
+
+  .left1 {
+    // width: 604px;
+    // padding: 0 10px;
+    width: 17.18%;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    #detailedTwo3 {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .middle {
+    // width: 1590px;
+    width: 32.7%;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    .imgboxone {
+      background: url("../assets/04/总数据外框.png") no-repeat;
+      width: 100%;
+      height: 17%;
+      position: relative;
+      top: 45%;
+      left: 30%;
+      .contents {
+        // height: 90%;
+        position: absolute;
+        padding: 10px;
+        height: 100%;
+        width: 53%;
+        display: flex;
+        flex-direction: row;
+        /* 平分剩余空间 */
+        justify-content: space-around;
+        .lines {
+          width: 100%;
+          padding: 10px 0 0 1px;
+          background: url("../assets/index/总数据小框.png") no-repeat;
+        }
+
+        .total {
+          .num {
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: center;
+            align-items: left;
+            color: #ffffff;
+            span {
+              font-size: 20px;
+            }
+            h5 {
+              font-size: 34px;
+            }
+            .yellow {
+              padding-top: 30px;
+              color: yellow;
+            }
+            .orange {
+              padding-top: 30px;
+              color: orange;
+            }
+            .yellows {
+              padding-top: 20px;
+              color: yellow;
+            }
+          }
+        }
+      }
+    }
+    .map {
+      background: url("../assets/indexN/地图.png") no-repeat;
+      vertical-align: middle;
+      display: table-cell;
+      text-align: center;
+      margin-left: -20%;
+      .allimg {
+        position: relative;
+        left: 20.5%;
+        top: 35%;
+      }
+    }
+  }
+
+  .right {
+    // width: 604px;
+    width: 16.8%;
+    height: 100%;
+    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;
+    }
+    .eqselect {
+      span {
+        font-size: 20px;
+        color: #f8f8f8;
+      }
+      img {
+        margin-right: 7px;
+      }
+    }
+  }
+
+  .right1 {
+    // width: 604px;
+    width: 17.18%;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    #detailstop {
+      width: 100%;
+      height: 400px;
+    }
+  }
+}
+
+// }
+</style>
+<style lang="less" scoped>
+//  .el-popper {
+//   top: 50%;
+// }
+
+/deep/ .popper__arrow {
+  left: 171px !important;
+  top: 95px !important;
+}
+
+/deep/ .el-select-dropdown {
+  background-color: rgb(14, 30, 46) !important;
+  border: 1px solid rgba(45, 143, 148, 0.5) !important;
+
+  /deep/ .el-select-dropdown__item {
+    color: #fff !important;
+  }
+
+  /deep/ .el-select-dropdown__item.hover,
+  /deep/ .el-select-dropdown__item:hover {
+    background-color: rgb(18, 54, 87) !important;
+  }
+}
+
+/deep/ .el-popper[x-placement^="bottom"] {
+  margin-top: -146px !important;
+}
+
+/**
+表格有滚动效果但是不显示滚动条
+*/
+</style>
+<style lang="less">
+.el-table .rowColor0 {
+  background: red !important;
+  animation: fade 2000ms infinite ease-in-out;
+}
+
+@keyframes fade {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.6;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+// .el-pager li:hover{
+//   color:black
+// }
+.cartitle {
+  height: 52px;
+  width: 100%;
+  // background: url("../assets/images/carTitle.png") no-repeat;
+  font-size: 24px;
+  font-weight: 600;
+  color: #ffffff;
+  line-height: 52px;
+  // text-align: left;
+  text-indent: 26px;
+}
+.titleFont {
+  color: transparent;
+  -webkit-background-clip: text;
+  background-clip: text;
+  background-image: linear-gradient(
+    to bottom,
+    rgb(255, 255, 255),
+    rgb(123, 247, 245)
+  );
+  img {
+    margin: 20px;
+  }
+}
+.content {
+  padding: 24px 31px 0 31px;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+
+  .line {
+    width: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    table {
+      thead {
+        font-size: 22px !important;
+        height: 50px;
+        background: url("../assets/02/表格标题行.png") no-repeat;
+      }
+      tbody {
+        tr {
+          height: 50px;
+          font-size: 18px !important;
+          color: #fff;
+          background: url("../assets/02/表格其他行.png") no-repeat;
+        }
+      }
+    }
+
+    .total {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-around;
+      margin-bottom: 15%;
+
+      .num {
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: center;
+        align-items: center;
+        color: #ffffff;
+
+        .numText {
+          color: #ffffff;
+        }
+
+        .numText:before {
+          content: attr(text);
+          position: absolute;
+          z-index: 10;
+          color: rgb(86, 254, 246) !important;
+          -webkit-mask: linear-gradient(to top, rgb(86, 244, 254), transparent);
+        }
+      }
+    }
+
+    .info {
+      display: flex;
+      flex-flow: column nowrap;
+
+      .lists {
+        width: 100%;
+        height: 32px;
+        background: url("../assets/images/cardSquare.png") no-repeat;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        align-items: center;
+        background-size: 100% 100%;
+        margin-bottom: 9%;
+        padding: 0 10px 0 0;
+        box-sizing: border-box;
+
+        & > div {
+          font-size: 18px;
+          color: #ffffff;
+        }
+
+        .number {
+          color: rgb(86, 254, 226);
+        }
+      }
+    }
+  }
+}
+.two {
+  background: url("../assets/indexN/boxLr.png") no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+.one {
+  background: url("../assets/02/表格框.png") no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+
+  .unityBtn {
+    position: absolute;
+    top: 40px;
+    left: 30%;
+    width: 40%;
+    display: flex;
+    justify-content: space-between;
+
+    .btn {
+      width: 100%;
+      height: 38px;
+      color: #fff;
+      font-size: 18px;
+      line-height: 38px;
+      background: url("../assets/images/btnAct.png") no-repeat;
+      background-size: 100% 100%;
+      margin-bottom: 10px;
+      margin-right: 15px;
+    }
+
+    .btnAct {
+      color: rgb(244, 201, 7);
+      background: url("../assets/images/unityBtn.png") no-repeat;
+      background-size: 100% 100%;
+      margin-right: 15px;
+    }
+  }
+
+  .unityIcon {
+    background: url("../assets/images/iconCard.png") no-repeat;
+    background-size: 100% 100%;
+    width: 110px;
+    height: 168px;
+    position: absolute;
+    right: 40px;
+    bottom: 80px;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+
+    .unityIconGround {
+      width: 80%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
+  .unityEnlargeBtn {
+    width: 100px;
+    display: flex;
+    justify-content: space-around;
+    position: absolute;
+    right: 40px;
+    top: 40px;
+
+    .content {
+      width: 38px;
+      height: 36px;
+      background: url("../assets/images/btnkuang.png") no-repeat !important;
+      background-size: 100% 100% !important;
+    }
+  }
+
+  .unitySelect {
+    position: absolute;
+    left: 40px;
+    width: 222px;
+    height: 5%;
+    bottom: 20px;
+    display: flex;
+    align-items: center;
+
+    .unitySuosou {
+      width: 57px;
+      height: 53px;
+      background: url("../assets/images/sousuoKuang.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>
diff --git a/src/views/twentyKV.vue b/src/views/twentyKV.vue
index 6dd5f1f3..c1aab04d 100644
--- a/src/views/twentyKV.vue
+++ b/src/views/twentyKV.vue
@@ -1,25 +1,1585 @@
 <template>
-  <div class="twentyKV">
-      twentyKV
+  <div class="home">
+    <div class="left" 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 id="detailedTwo1"></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 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>60天内台区掉电客户数TOP10</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%">
+        <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
+                      >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;台区总数</span
+                    >
+                  </div>
+                  <h5 class="yellow">679</h5>
+                </div>
+              </div>
+            </div>
+            <div class="lines">
+              <div class="total">
+                <div class="num">
+                  <div style="display: inherit">
+                    <img
+                      style="float: left; height: 30px; width: 30px"
+                      src="../assets/index/总数据图标2.png"
+                      alt=""
+                    />
+                    <span>近60天内发生过停电的配变数</span>
+                  </div>
+
+                  <h5 class="oranges">234</h5>
+                </div>
+              </div>
+            </div>
+            <div class="lines">
+              <div class="total">
+                <div class="num">
+                  <div style="display: inherit">
+                    <img
+                      style="float: left; height: 30px; width: 30px"
+                      src="../assets/index/总数据图标1.png"
+                      alt=""
+                    />
+                    <span>近60天三相不平衡台区数</span>
+                  </div>
+
+                  <h5 class="yellow">0</h5>
+                </div>
+              </div>
+            </div>
+            <div class="lines">
+              <div class="total">
+                <div class="num">
+                  <div style="display: inherit">
+                    <img
+                      style="float: left; height: 30px; width: 30px"
+                      src="../assets/index/总数据图标2.png"
+                      alt=""
+                    />
+                    <span>近一周线损异常台区数</span>
+                  </div>
+
+                  <h5 class="orange">0</h5>
+                </div>
+              </div>
+            </div>
+            <div class="lines">
+              <div class="total">
+                <div class="num">
+                  <div style="display: inherit">
+                    <img
+                      style="float: left; height: 30px; width: 30px"
+                      src="../assets/index/总数据图标1.png"
+                      alt=""
+                    />
+                    <span>近60天内发生过停电的中压线路数</span>
+                  </div>
+
+                  <h5 class="yellows">0</h5>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right" id="right">
+      <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 id="detailqe"></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 id="detailen"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="right1" id="right">
+      <div class="two" style="height: 49%">
+        <div class="cartitle">
+          <div class="titleFont">
+            <img src="./../assets/indexN/标题箭头.png" alt="" />
+            <span>进60天配变停电时间分析</span>
+            <img src="./../assets/indexN/标题箭头1.png" alt="" />
+          </div>
+        </div>
+        <div class="content">
+          <div class="line">
+            <table>
+              <thead style="color: #fff; font-size: 30px">
+                <tr>
+                  <td>序号</td>
+                  <td>配变名称</td>
+                  <td>所属电路</td>
+                  <td>停电次数</td>
+                </tr>
+              </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>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div class="two" style="height: 49%">
+        <div class="cartitle">
+          <div class="titleFont">
+            <img src="./../assets/indexN/标题箭头.png" alt="" />
+            <span>近60天频繁停电配变</span>
+            <img src="./../assets/indexN/标题箭头1.png" alt="" />
+          </div>
+        </div>
+        <div class="content">
+          <div class="line">
+            <div id="detailstop"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <audio
+      controls="controls"
+      hidden
+      src="../assets/videos/police.wav"
+      ref="audio"
+    ></audio>
   </div>
 </template>
 
 <script>
+//引入echarts
+import * as echarts from "echarts";
+// 工单统计弹窗组件
+import workOrder from "../component/workOrder.vue";
+import ringMainUnit from "./HomePop/ringMainUnit.vue";
+import routeDetail from "../component/routeDetail.vue";
+
+// 线路详情
+import lineDetail from "../component/lineDetail.vue";
 export default {
-   name:"twentyKV",
-   data() {
-  	  return {
+  name: "twentyKV",
+  components: {
+    ringMainUnit, //环网柜弹窗
+    workOrder, //工单统计弹窗
+    routeDetail, //线路故障跳闸明细
+    lineDetail, //线路详情弹窗
+  },
+  data() {
+    return {
+      pageShow: true,
+      totals: 5,
+      pageSize: 10,
+      page: 1,
+      threeImg: require("../assets/images/pieBorder.png"),
+      enlargeShow: true,
+      dateList: ["周", "月"],
+      acolor: true, //是否展示颜色
+      currentIndex: -1,
+      alarmInformationData: [],
+      alarmInformationShow: false, //报警详情信息弹窗
+      realTimeAlarmShow: false, //实时报警弹窗
+      modelOthers: false,
+      componentShow: "",
+      CompanyInfo: {},
+      tableData: [],
+      btnArr: ["总览", "环网柜", "分支箱", "箱变", "开闭所"],
+      btnActive: 0,
+      iconGround: [
+        {
+          icon: require("@/assets/images/huanwanggui.png"),
+          name: "环网柜",
+        },
+        {
+          icon: require("@/assets/images/fenzhixiang.png"),
+          name: "分支箱",
+        },
+        {
+          icon: require("@/assets/images/xiangbian.png"),
+          name: "箱变",
+        },
+        {
+          icon: require("@/assets/images/kaibisuo.png"),
+          name: "开闭所",
+        },
+      ],
+      btnEnlarge: [
+        {
+          icon: require("@/assets/images/btnTiShi.png"),
+        },
+        {
+          icon: require("@/assets/images/btnFangDa.png"),
+        },
+      ],
+      btnEnlarge1: [
+        {
+          icon: require("@/assets/images/btnTiShi.png"),
+        },
+        {
+          icon: require("@/assets/images/suoxiao.png"),
+        },
+      ],
+      options: [
+        {
+          value: "",
+          label: "",
+        },
+      ],
+      value: "",
+      topContent: [
+        {
+          name: "配变数量",
+          count: "",
+        },
+        {
+          name: "重复停运台次",
+          count: "",
+        },
+        {
+          name: "配变重复停运率",
+          count: "",
+        },
+      ],
+      device: "",
+      tableData: [],
+      tableKey: +new Date(),
+      scrollTop: 0, //table距离顶部距离
+      option: null,
+      myChartBin: null,
+      // 工单
+      orderItem: null,
+      orderShow: "",
+      // 线路故障明细
+      routeItem: null,
+      routeShow: "",
+      // 配电线路
+      lineItem: null,
+      lineShow: "",
+      timer: null, //定时器
+      emergencyList: [], //告警数据
+      rowTime: "",
+      pvTable: [
+        {
+          id: 1,
+          name: "10#变压器",
+          stationNumber: "10kv中北线151",
+          alternatorNumber: "1",
+        },
+        {
+          id: 2,
+          name: "10#变压器",
+          stationNumber: "10kv中北线151",
+          alternatorNumber: "1",
+        },
+        {
+          id: 3,
+          name: "10#变压器",
+          stationNumber: "10kv中北线151",
+          alternatorNumber: "1",
+        },
+        {
+          id: 4,
+          name: "10#变压器",
+          stationNumber: "10kv中北线151",
+          alternatorNumber: "2",
+        },
+        {
+          id: 5,
+          name: "10#变压器",
+          stationNumber: "10kv中北线151",
+          alternatorNumber: "2",
+        },
+      ],
+    };
+  },
+  created() {},
+  mounted() {
+    this.detailedTwo11();
+    this.detailedTwo22();
+    this.detailedTwo33();
+    this.detailqe1();
+    this.detailen1();
+    this.detailstop();
+  },
+  methods: {
+    detailedTwo11() {
+      var fontColor = "#fff";
+      var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
+      var option = {
+        tooltip: {
+          show: true,
+          trigger: "item",
+        },
+        legend: {
+          textStyle: {
+            fontSize: 18, //字体大小
+            color: "#ffffff", //字体颜色
+            data: ["月用电变化率", "社会整体月变化率"],
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          axisLabel: {
+            color: fontColor,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: "#195384",
+            },
+          },
+          data: [
+            "高进军1",
+            "高进军2",
+            "高进军3",
+            "高进军4",
+            "高进军5",
+            "高进军6",
+            "高进军7",
+          ],
+        },
+        yAxis: {
+          type: "value",
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+        },
+        series: [
+          {
+            name: "月用电变化率",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            symbol: "none",
+            data: [120, 132, 101, 134, 90, 230, 210],
+            itemStyle: {
+              normal: {
+                color: "yellow",
+                lineStyle: {
+                  color: "yellow",
+                },
+              },
+            },
+          },
+          {
+            name: "社会整体月变化率",
+            type: "line",
+            smooth: true,
+            stack: "Total",
+            symbol: "none",
+            data: [220, 182, 191, 234, 290, 330, 310],
+            itemStyle: {
+              normal: {
+                color: "rgba(0,212,199,1)",
+                lineStyle: {
+                  color: "rgba(0,212,199,1)",
+                },
+              },
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    detailedTwo22() {
+      var fontColor = "#30eee9";
+      var myChart = this.$echarts.init(document.getElementById("detailedTwo2"));
+      var option = {
+        tooltip: {
+          show: true,
+          trigger: "item",
+        },
+        legend: {
+          textStyle: {
+            fontSize: 18, //字体大小
+            color: "#ffffff", //字体颜色
+            data: ["本月用电总量"],
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          axisLabel: {
+            color: "#fff",
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: "#195384",
+            },
+          },
+          data: [
+            "高进军1",
+            "高进军2",
+            "高进军3",
+            "高进军4",
+            "高进军5",
+            "高进军6",
+            "高进军7",
+          ],
+        },
+        yAxis: {
+          type: "value",
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+        },
+        series: [
+          {
+            name: "本月用电总量",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            symbol: "none",
+            data: [120, 132, 101, 134, 90, 230, 210],
+            itemStyle: {
+              normal: {
+                color: "yellow",
+                lineStyle: {
+                  color: "yellow",
+                },
+              },
+            },
+          },
+        ],
+      };
+      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",
+          },
+        },
+        backgroundColor: "#031f2d",
+
+        legend: {
+          right: 5,
+          top: "5%",
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 15,
+          textStyle: {
+            color: "#ACCFFF",
+            fontSize: 16,
+          },
+        },
+        grid: {
+          left: "5%",
+          right: "5%",
+          bottom: "5%",
+          top: "10%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "value",
+            show: false,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#6B9DD7",
+              fontSize: 16, // 文字大小
+              fontWeight: 400,
+              interval: 0,
+              formatter: function (value) {
+                return value + "(万元)";
+              },
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "category",
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              color: "#6B9DD7",
+              fontSize: 16, // 文字大小
+              fontWeight: 400,
+              interval: 0,
+            },
+            offset: 20,
+            data: honorXAxisData,
+          },
+        ],
+        series: [
+          {
+            name: "2019末",
+            type: "bar",
+            stack: "zongliang",
+            barWidth: "35%",
+            zlevel: 10,
+            label: {
+              normal: {
+                show: true,
+                position: "inside",
+                textStyle: {
+                  color: "#fff",
+                  fontSize: 14,
+                },
+              },
+            },
+            data: honorData[0].data,
+          },
+          {
+            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();
+      });
+    },
+    detailqe1() {
+      var fontColor = "#fff";
+      var myChart = this.$echarts.init(document.getElementById("detailqe"));
+      var option = {
+        tooltip: {
+          show: true,
+          trigger: "item",
+        },
+        legend: {
+          textStyle: {
+            fontSize: 18, //字体大小
+            color: "#ffffff", //字体颜色
+            data: ["电压合格率"],
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          axisLabel: {
+            color: "#fff",
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: "#195384",
+            },
+          },
+          data: [
+            "202111",
+            "202201",
+            "202203",
+            "202205",
+            "202207",
+            "202209",
+            "202211",
+          ],
+        },
+        yAxis: {
+          type: "value",
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+        },
+        series: [
+          {
+            name: "电压合格率",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            symbol: "none",
+            data: [120, 132, 101, 134, 90, 230, 210],
+            itemStyle: {
+              normal: {
+                color: "yellow",
+                lineStyle: {
+                  color: "yellow",
+                },
+              },
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    detailen1() {
+      var fontColor = "#30eee9";
+      var myChart = this.$echarts.init(document.getElementById("detailen"));
+      var option = {
+        tooltip: {
+          show: true,
+          trigger: "item",
+        },
+        legend: {
+          textStyle: {
+            fontSize: 18, //字体大小
+            color: "#ffffff", //字体颜色
+            data: ["电压合格率"],
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          axisLabel: {
+            color: "#fff",
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: "#195384",
+            },
+          },
+          data: ["05-05", "05-06", "05-07", "05-08"],
+        },
+        yAxis: {
+          type: "value",
+          axisLine: {
+            lineStyle: {
+              color: "#fff",
+            },
+          },
+        },
+        series: [
+          {
+            name: "电压合格率",
+            type: "line",
+            stack: "Total",
+            smooth: true,
+            symbol: "none",
+            data: [120, 132, 101, 134],
+            itemStyle: {
+              normal: {
+                color: "rgba(0,212,199,1)",
+                lineStyle: {
+                  color: "rgba(0,212,199,1)",
+                },
+              },
+            },
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+    detailstop() {
+      var myChart = this.$echarts.init(document.getElementById("detailstop"));
+      var option = {
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: {
+          textStyle: {
+            fontSize: 18, //字体大小
+            color: "#ffffff", //字体颜色
+          },
+
+          data: ["配变名称"],
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: [
+              "钱南1配变",
+              "钱南2配变",
+              "钱南3配变",
+              "钱南4配变",
+              "钱南5配变",
+            ],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#ffffff",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "",
+            axisLabel: {
+              textStyle: {
+                color: "#ffffff",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "配变名称",
+            type: "bar",
+            barWidth: 40, // 柱子宽度核心代码
+            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: [320, 332, 301, 334, 390],
+          },
+        ],
+      };
+      myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+    },
+  },
+  watch: {},
+};
 </script>
-
 <style lang="less" scoped>
-.twentyKV{
+.content {
+  /deep/ .el-table__body td .cell {
+    white-space: normal !important;
+  }
+}
+
+.two {
+  /deep/ .el-table__body-wrapper {
+    height: 195px !important;
+  }
+  .enselect {
+    position: absolute;
+    right: 30px;
+    img {
+      float: right;
+    }
+    .text {
+      float: right;
+      // right: -10px;
+      margin-right: -60px;
+      font-size: 20px;
+
+      color: #fff;
+    }
+  }
+}
+
+// 滚动条的宽度
+/deep/ .el-table__body-wrapper::-webkit-scrollbar {
+  width: 6px; // 横向滚动条
+  height: 6px; // 纵向滚动条 必写
+  // display: block !important;
+}
+
+// 滚动条的滑块
+/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
+  background-color: rgba(35, 160, 247, 1);
+  border-radius: 3px;
+}
+
+/deep/ .el-table--scrollable-x .el-table__body-wrapper {
+  overflow-x: hidden;
+}
+
+.user_skills {
+  /deep/ .el-table {
+    background-color: transparent !important;
+  }
+
+  /deep/ .el-table th {
+    background-color: transparent !important;
+  }
+
+  /deep/ .el-table__header {
+    width: 100% !important;
+    height: 70px;
+    background: url("../assets/images/tableBg.png") no-repeat;
+    background-size: 100% 100%;
+
+    .cell {
+      text-align: center !important;
+      justify-content: center;
+    }
+  }
+
+  /deep/ .el-table__header th {
+    border: none;
+    padding: 0;
+    height: 48px;
+
+    .cell {
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    &.el-table__cell.is-leaf {
+      border: none !important;
+    }
+  }
+
+  /deep/ .el-table tr {
+    background-color: transparent;
+  }
+
+  /deep/ .el-table--enable-row-transition .el-table__body td,
+  .el-table .cell {
+    background-color: transparent !important;
+    border: none;
+    color: #ffffff;
+  }
+
+  /deep/ .el-table__body td .cell {
+    white-space: nowrap;
+    // word-break: break-all;
+    display: flex !important;
+    justify-content: center !important;
+  }
+
+  /deep/ .el-table th.el-table__cell > .cell {
+    color: rgb(86, 254, 226);
+  }
+
+  /deep/.el-table__body,
+  .el-table__footer,
+  .el-table__header {
+    width: 100% !important;
+  }
+
+  /deep/ .el-table__body td .cell {
+    // width: 60px !important;
+  }
+
+  // &::before {
+  //   //去除底部白线
+  //   left: 0;
+  //   bottom: 0;
+  //   width: 100%;
+  //   height: 0px;
+  // }
+  .el-table::before {
+    background-color: transparent;
+  }
+}
+
+.home {
   width: 100%;
   height: 100%;
-  padding: 15px 25px;
+  padding: 15px 28px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  box-sizing: border-box;
+
+  .left {
+    padding-right: 15px;
+    // width: 604px;
+    width: 17.18%;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    #detailedTwo1 {
+      width: 100%;
+      height: 350px;
+    }
+    #detailedTwo2 {
+      width: 100%;
+      height: 350px;
+    }
+  }
+
+  .left1 {
+    // width: 604px;
+    // padding: 0 10px;
+    width: 17.18%;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    #detailedTwo3 {
+      width: 100%;
+      height: 500px;
+    }
+  }
+
+  .middle {
+    // width: 1590px;
+    width: 32.7%;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    .imgboxone {
+      background: url("../assets/indexN/中间总数据外框.png") no-repeat;
+      width: 100%;
+      height: 17%;
+      position: relative;
+      top: 45%;
+      left: 25%;
+      .contents {
+        // height: 90%;
+        position: absolute;
+        padding: 10px;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        /* 平分剩余空间 */
+        justify-content: space-around;
+        .lines {
+          width: 100%;
+          margin: 0 1px;
+          background: url("../assets/index/总数据小框.png") no-repeat;
+        }
+
+        .total {
+          .num {
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: center;
+            align-items: left;
+            color: #ffffff;
+            h5 {
+              font-size: 36px;
+            }
+            .yellow {
+              padding-top: 30px;
+              color: yellow;
+            }
+            .orange {
+              padding-top: 30px;
+              color: orange;
+            }
+            .yellows {
+              padding-top: 20px;
+              color: yellow;
+            }
+            .oranges {
+              padding-top: 20px;
+              color: orange;
+            }
+            span {
+              float: left;
+              font-size: 16px;
+              vertical-align: bottom;
+            }
+          }
+        }
+      }
+    }
+    .map {
+      background: url("../assets/indexN/地图.png") no-repeat;
+      vertical-align: middle;
+      display: table-cell;
+      text-align: center;
+      margin-left: -20%;
+      .allimg {
+        position: relative;
+        left: 20.5%;
+        top: 35%;
+      }
+    }
+  }
+
+  .right {
+    // width: 604px;
+    width: 16.8%;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    #detailqe {
+      width: 100%;
+      height: 350px;
+    }
+    #detailen {
+      width: 100%;
+      height: 350px;
+    }
+    .eqselect {
+      span {
+        font-size: 20px;
+        color: #f8f8f8;
+      }
+      img {
+        margin-right: 7px;
+      }
+    }
+  }
+
+  .right1 {
+    // width: 604px;
+    width: 17.18%;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    #detailstop {
+      width: 100%;
+      height: 400px;
+    }
+  }
 }
 
-</style>
\ No newline at end of file
+// }
+</style>
+<style lang="less" scoped>
+//  .el-popper {
+//   top: 50%;
+// }
+
+/deep/ .popper__arrow {
+  left: 171px !important;
+  top: 95px !important;
+}
+
+/deep/ .el-select-dropdown {
+  background-color: rgb(14, 30, 46) !important;
+  border: 1px solid rgba(45, 143, 148, 0.5) !important;
+
+  /deep/ .el-select-dropdown__item {
+    color: #fff !important;
+  }
+
+  /deep/ .el-select-dropdown__item.hover,
+  /deep/ .el-select-dropdown__item:hover {
+    background-color: rgb(18, 54, 87) !important;
+  }
+}
+
+/deep/ .el-popper[x-placement^="bottom"] {
+  margin-top: -146px !important;
+}
+
+/**
+表格有滚动效果但是不显示滚动条
+*/
+</style>
+<style lang="less">
+.el-table .rowColor0 {
+  background: red !important;
+  animation: fade 2000ms infinite ease-in-out;
+}
+
+@keyframes fade {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.6;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+// .el-pager li:hover{
+//   color:black
+// }
+.cartitle {
+  height: 52px;
+  width: 100%;
+  // background: url("../assets/images/carTitle.png") no-repeat;
+  font-size: 24px;
+  font-weight: 600;
+  color: #ffffff;
+  line-height: 52px;
+  // text-align: left;
+  text-indent: 26px;
+}
+.titleFont {
+  color: transparent;
+  -webkit-background-clip: text;
+  background-clip: text;
+  background-image: linear-gradient(
+    to bottom,
+    rgb(255, 255, 255),
+    rgb(123, 247, 245)
+  );
+  img {
+    margin: 20px;
+  }
+}
+.content {
+  padding: 24px 31px 0 31px;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+
+  .line {
+    width: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    table {
+      thead {
+        font-size: 22px !important;
+        height: 50px;
+        background: url("../assets/02/表格标题行.png") no-repeat;
+      }
+      tbody {
+        tr {
+          height: 50px;
+          font-size: 18px !important;
+          color: #fff;
+          background: url("../assets/02/表格其他行.png") no-repeat;
+        }
+      }
+    }
+
+    .total {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-around;
+      margin-bottom: 15%;
+
+      .num {
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: center;
+        align-items: center;
+        color: #ffffff;
+
+        .numText {
+          color: #ffffff;
+        }
+
+        .numText:before {
+          content: attr(text);
+          position: absolute;
+          z-index: 10;
+          color: rgb(86, 254, 246) !important;
+          -webkit-mask: linear-gradient(to top, rgb(86, 244, 254), transparent);
+        }
+      }
+    }
+
+    .info {
+      display: flex;
+      flex-flow: column nowrap;
+
+      .lists {
+        width: 100%;
+        height: 32px;
+        background: url("../assets/images/cardSquare.png") no-repeat;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        align-items: center;
+        background-size: 100% 100%;
+        margin-bottom: 9%;
+        padding: 0 10px 0 0;
+        box-sizing: border-box;
+
+        & > div {
+          font-size: 18px;
+          color: #ffffff;
+        }
+
+        .number {
+          color: rgb(86, 254, 226);
+        }
+      }
+    }
+  }
+}
+.two {
+  background: url("../assets/indexN/boxLr.png") no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+}
+.one {
+  background: url("../assets/02/表格框.png") no-repeat;
+  background-size: 100% 100%;
+  position: relative;
+
+  .unityBtn {
+    position: absolute;
+    top: 40px;
+    left: 30%;
+    width: 40%;
+    display: flex;
+    justify-content: space-between;
+
+    .btn {
+      width: 100%;
+      height: 38px;
+      color: #fff;
+      font-size: 18px;
+      line-height: 38px;
+      background: url("../assets/images/btnAct.png") no-repeat;
+      background-size: 100% 100%;
+      margin-bottom: 10px;
+      margin-right: 15px;
+    }
+
+    .btnAct {
+      color: rgb(244, 201, 7);
+      background: url("../assets/images/unityBtn.png") no-repeat;
+      background-size: 100% 100%;
+      margin-right: 15px;
+    }
+  }
+
+  .unityIcon {
+    background: url("../assets/images/iconCard.png") no-repeat;
+    background-size: 100% 100%;
+    width: 110px;
+    height: 168px;
+    position: absolute;
+    right: 40px;
+    bottom: 80px;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+
+    .unityIconGround {
+      width: 80%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
+  .unityEnlargeBtn {
+    width: 100px;
+    display: flex;
+    justify-content: space-around;
+    position: absolute;
+    right: 40px;
+    top: 40px;
+
+    .content {
+      width: 38px;
+      height: 36px;
+      background: url("../assets/images/btnkuang.png") no-repeat !important;
+      background-size: 100% 100% !important;
+    }
+  }
+
+  .unitySelect {
+    position: absolute;
+    left: 40px;
+    width: 222px;
+    height: 5%;
+    bottom: 20px;
+    display: flex;
+    align-items: center;
+
+    .unitySuosou {
+      width: 57px;
+      height: 53px;
+      background: url("../assets/images/sousuoKuang.png") no-repeat;
+      background-size: 100% 100%;
+    }
+  }
+}
+</style>