From d16b36bb98e3aca85daafd3fecd1859c6876997a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9C002001lixiaobang=E2=80=9D?= <2547956374@qq.com>
Date: Fri, 17 Feb 2023 10:58:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                  |    4 +-
 src/views/HomePop/ringMainUnit.vue |   19 +-
 src/views/index.vue                | 2336 +++++++++++++++-------------
 3 files changed, 1246 insertions(+), 1113 deletions(-)

diff --git a/public/index.html b/public/index.html
index 63cb08a..f0e690d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <script type="text/javascript" src="../stactic/webrtcstreamer.js"></script>
-    <script type="text/javascript" src="../stactic/adapter.min.js"></script>
+    <!-- <script type="text/javascript" src="../stactic/webrtcstreamer.js"></script>
+    <script type="text/javascript" src="../stactic/adapter.min.js"></script> -->
     <script src="https://jsmpeg.com/jsmpeg.min.js" charset="utf-8"></script>  
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>yanduscreen</title>
diff --git a/src/views/HomePop/ringMainUnit.vue b/src/views/HomePop/ringMainUnit.vue
index a282177..3bee1d3 100644
--- a/src/views/HomePop/ringMainUnit.vue
+++ b/src/views/HomePop/ringMainUnit.vue
@@ -12,8 +12,8 @@
     </div>
     <div class="main">
       <el-tabs v-model="activeName" @tab-click="handleClick" style="height: 4%">
-        <el-tab-pane label="设备信息" name="first"> </el-tab-pane>
-        <el-tab-pane label="现场照片/红外视频" name="second"></el-tab-pane>
+        <el-tab-pane label="设备信息" name="first" style="font-size:20px"> </el-tab-pane>
+        <el-tab-pane label="现场照片/红外视频" name="second" style="font-size:20px"></el-tab-pane>
       </el-tabs>
       <div v-if="activeName == 'first'" style="height: 100%; width: 100%">
         <div class="basic">
@@ -588,9 +588,6 @@ export default {
         token: localStorage.getItem("token"),
       };
       if (index == 1) {
-        if (this.JSMpeg != null) {
-          this.closeJSMpeg()
-        }
         
         let that = this;
         Object.keys(this.vectorgraphData).forEach((key) => {
@@ -663,9 +660,6 @@ export default {
           }
         });
       } else if (index == 2) {
-        if (this.JSMpeg != null) {
-          this.closeJSMpeg()
-        }
         let that = this;
         Object.keys(this.vectorgraphData).forEach((key) => {
           this.vectorgraphData[
@@ -941,7 +935,7 @@ export default {
     justify-content: space-between;
     align-items: center;
     .title {
-      font-size: 22px;
+      font-size: 28px;
       font-weight: 700;
       color: transparent;
       -webkit-background-clip: text;
@@ -1078,6 +1072,11 @@ export default {
     }
   }
 }
+.content1{
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
 /deep/.el-tabs__content {
     height: 100%;
     overflow: auto;
@@ -1118,9 +1117,11 @@ export default {
 }
 .el-tabs__item.is-active {
   color: #56fefe !important;
+  font-size: 23px;
 }
 .el-tabs__item {
   color: rgb(60, 127, 127) !important;
+  font-size: 18px;
 }
 
 .el-tabs__active-bar {
diff --git a/src/views/index.vue b/src/views/index.vue
index cd9c3e9..9b4d45e 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <div class="left">
+    <div class="left" id="left">
       <div class="one" style="height: 405px">
         <div class="cartitle">
           <div class="titleFont">盐都区供电公司概况</div>
@@ -16,7 +16,6 @@
                   style="
                     font-size: 45px;
                     font-weight: 600;
-                    color: transparent;
                     -webkit-background-clip: text;
                     background-clip: text;
                     background-image: linear-gradient(
@@ -25,6 +24,8 @@
                       rgb(86, 244, 254)
                     );
                   "
+                  class="numText"
+                  :text="CompanyInfo.pdxl"
                   >{{ CompanyInfo.pdxl }}</span
                 >
                 <span style="font-size: 18px">配电路线</span>
@@ -59,7 +60,6 @@
                   style="
                     font-size: 45px;
                     font-weight: 600;
-                    color: transparent;
                     -webkit-background-clip: text;
                     background-clip: text;
                     background-image: linear-gradient(
@@ -68,6 +68,8 @@
                       rgb(86, 244, 254)
                     );
                   "
+                   class="numText"
+                  :text="CompanyInfo.xlcd"
                   >{{ CompanyInfo.xlcd }}</span
                 >
                 <span style="font-size: 18px">路线长度</span>
@@ -106,6 +108,7 @@
             :header-cell-style="{ 'text-align': 'center' }"
             :cell-style="{ 'text-align': 'center' }"
             ref="tableBox"
+            style="font-size:16px"
           >
             <el-table-column label="" align="center" width="20">
               <template slot-scope="scop">
@@ -115,53 +118,53 @@
             <el-table-column
               prop="bz"
               label="班组"
-              width="80"
+              width="90"
               :show-overflow-tooltip="true"
             >
             </el-table-column>
             <el-table-column
               prop="gzxl"
               label="故障路线"
-              width="80"
+              width="90"
               :show-overflow-tooltip="true"
             >
             </el-table-column>
             <el-table-column
               prop="gzyy"
               label="故障原因"
-              width="80"
+              width="90"
               :show-overflow-tooltip="true"
             >
             </el-table-column>
-            <el-table-column prop="chcg" label="重合成功" width="60">
+            <el-table-column prop="chcg" label="重合成功" width="55">
               <template slot-scope="scope">
                 <div style="color: #ffbc3a">
                   {{ scope.row.chcg }}
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="chbc" label="重合不成" width="80">
+            <el-table-column prop="chbc" label="重合不成" width="55">
               <template slot-scope="scope">
                 <div style="color: #ffbc3a">
                   {{ scope.row.chbc }}
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="wchz" label="无重合闸" width="60">
+            <el-table-column prop="wchz" label="无重合闸" width="55">
               <template slot-scope="scope">
                 <div style="color: #2793ff">
                   {{ scope.row.wchz }}
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="jiedi" label="接地" width="60">
+            <el-table-column prop="jiedi" label="接地" width="55">
               <template slot-scope="scope">
                 <div style="color: #794af8">
                   {{ scope.row.jiedi }}
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="heji" label="合计" width="60">
+            <el-table-column prop="heji" label="合计" width="55">
               <template slot-scope="scope">
                 <div style="color: #ee8316">
                   {{ scope.row.heji }}
@@ -172,8 +175,8 @@
         </div>
       </div>
     </div>
-    <div class="middle">
-      <div class="one" style="height: 635px; width: 100%">
+    <div class="middle" id="middle">
+      <div class="one" style="height: 635px; width: 100%" id="threeModel">
         <iframe
           src="/unityWeb/index.html"
           style="height: 100%; width: 100%; border: none"
@@ -225,7 +228,7 @@
           </el-select>
         </div>
       </div>
-      <div class="detailed">
+      <div class="detailed" id="detailed">
         <div
           class="two"
           style="
@@ -239,7 +242,7 @@
           <div class="cartitle">
             <div class="titleFont">本周路线故障跳闸明细</div>
           </div>
-          <div class="detailedOneList">
+          <!-- <div class="detailedOneList">
             <div>单位</div>
             <!-- <div>
             工区
@@ -270,9 +273,9 @@
           </div>
           <div>
             响水
+          </div> 
           </div> -->
-          </div>
-          <div id="detailedOne" style="height: 90%"></div>
+          <div id="detailedOne" style="height: 100%"></div>
         </div>
         <div class="three" style="height: 350px; width: 780px">
           <div class="cartitle">
@@ -282,7 +285,7 @@
         </div>
       </div>
     </div>
-    <div class="right">
+    <div class="right" id="right">
       <div class="one" style="height: 310px">
         <div class="cartitle">
           <div
@@ -385,150 +388,159 @@
 </template>
 
 <script>
-import { getCompanyInfo,getLine,getBanzugz,getGdtj,getDwbzgz,getGdsgdzl,getPbtyqk,getCabinetInfo,getCabinetList} from "../api/index.js";
-import ringMainUnit from  "./HomePop/ringMainUnit.vue"
+import {
+  getCompanyInfo,
+  getLine,
+  getBanzugz,
+  getGdtj,
+  getDwbzgz,
+  getGdsgdzl,
+  getPbtyqk,
+  getCabinetInfo,
+  getCabinetList,
+} from "../api/index.js";
+import ringMainUnit from "./HomePop/ringMainUnit.vue";
 export default {
   name: "home",
   components: {
-     ringMainUnit,//环网柜弹窗
+    ringMainUnit, //环网柜弹窗
   },
   data() {
     return {
-      dataGzList:[], //年故障数组
-      dateList: ['周','月'],
-      acolor: true,//是否展示颜色
-      currentIndex : -1,
-      alarmInformationData:[
-      {
-        name:'告警信息',
-        date:'2022'
-      }],
+      dataGzList: [], //年故障数组
+      dateList: ["周", "月"],
+      acolor: true, //是否展示颜色
+      currentIndex: -1,
+      alarmInformationData: [
+        {
+          name: "告警信息",
+          date: "2022",
+        },
+      ],
       alarmInformationShow: false, //报警详情信息弹窗
-      realTimeAlarmShow: false,//实时报警弹窗
+      realTimeAlarmShow: false, //实时报警弹窗
       modelOthers: false,
       componentShow: "",
       CompanyInfo: {},
       tableData: [],
       btnArr: ["总览", "环网柜", "分支箱", "箱变", "开闭所"],
       btnActive: 0,
-      iconGround:[
+      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/huanwanggui.png"),
+          name: "环网柜",
+        },
         {
-        icon: require("@/assets/images/btnTiShi.png"),
-      },{
-        icon: require("@/assets/images/btnFangDa.png"),
-      }
+          icon: require("@/assets/images/fenzhixiang.png"),
+          name: "分支箱",
+        },
+        {
+          icon: require("@/assets/images/xiangbian.png"),
+          name: "箱变",
+        },
+        {
+          icon: require("@/assets/images/kaibisuo.png"),
+          name: "开闭所",
+        },
       ],
-       options: [
-         {
-           value:'',
-           label:''
-         }
-       ],
-        value: '',
-        topContent:[
-          {
-            name:'配变数量',
-            count:''
-          },
-          {
-            name:'重复停运台次',
-            count:''
-          },
-          {
-            name:'配变重复停运率',
-            count:''
-          },
-        ],
-        device:'',
-        tableData: [],
-			tableKey: +new Date(),
-			scrollTop: 0,//table距离顶部距离
-      option:null,
-      myChartBin:null,
+      btnEnlarge: [
+        {
+          icon: require("@/assets/images/btnTiShi.png"),
+        },
+        {
+          icon: require("@/assets/images/btnFangDa.png"),
+        },
+      ],
+      options: [
+        {
+          value: "",
+          label: "",
+        },
+      ],
+      value: "",
+      topContent: [
+        {
+          name: "配变数量",
+          count: "",
+        },
+        {
+          name: "重复停运台次",
+          count: "",
+        },
+        {
+          name: "配变重复停运率",
+          count: "",
+        },
+      ],
+      device: "",
+      tableData: [],
+      tableKey: +new Date(),
+      scrollTop: 0, //table距离顶部距离
+      option: null,
+      myChartBin: null,
     };
   },
   mounted() {
-    this.beginShowing()
+    this.beginShowing();
     // 监听浏览器窗口大小变化
     window.onresize = () => {
-      clearInterval(this.myTimer)
-      this.beginShowing()
-    }
+      clearInterval(this.myTimer);
+      this.beginShowing();
+    };
     // 盐都区供电公司概况
     getCompanyInfo().then((res) => {
       this.CompanyInfo = res.data.data;
+      console.log(this.CompanyInfo, "res.data.data");
     });
     // 查询总线路
-    getLine(
-      {action:'all'}
-    ).then((res)=>{
-      if (res.data != '') {
-        this.options = Object.keys(res.data.data).map((item,index)=>{
-          return {value:res.data.data[index].line_code,label:res.data.data[index].line_name}
-        })
-      }
-      
-    })
-    //周查询班组
-    getBanzugz(
-      {
-        action: 'week'
-      }
-    ).then((res)=>{
-      for (let i = 0; i < res.data.data.length; i++) {
-        this.tableData.push(res.data.data[i])
-      }
-    })
-    //工单统计
-    getGdtj().then((res)=>{
-      let dataList = res.data.data
-      // this.detailedThree(dataList);
-      this.$nextTick(() => {
-            this.detailedThree(dataList);
-            setInterval(() => {
-                this.doing();
-            }, 200);
+    getLine({ action: "all" }).then((res) => {
+      if (res.data != "") {
+        this.options = Object.keys(res.data.data).map((item, index) => {
+          return {
+            value: res.data.data[index].line_code,
+            label: res.data.data[index].line_name,
+          };
         });
-    })
-    //年度查询班组
-    getBanzugz(
-      {
-        action: 'year'
       }
-    ).then((res)=>{
-       this.dataGzList=res.data.data
-        this.detailedFour(this.dataGzList);
-    })
+    });
+    //周查询班组
+    getBanzugz({
+      action: "week",
+    }).then((res) => {
+      for (let i = 0; i < res.data.data.length; i++) {
+        this.tableData.push(res.data.data[i]);
+      }
+    });
+    //工单统计
+    getGdtj().then((res) => {
+      let dataList = res.data.data;
+      this.detailedThree(dataList);
+      // this.$nextTick(() => {
+      //   this.detailedThree(dataList);
+      //   setInterval(() => {
+      //     this.doing();
+      //   }, 200);
+      // });
+    });
+    //年度查询班组
+    getBanzugz({
+      action: "year",
+    }).then((res) => {
+      this.dataGzList = res.data.data;
+      this.detailedFour(this.dataGzList);
+    });
     //本周故障
-    getDwbzgz().then((res)=>{
-      let dataBzgz = []
+    getDwbzgz().then((res) => {
+      let dataBzgz = [];
       dataBzgz = res.data.data;
       this.detailedOne(dataBzgz);
-    })
+    });
     //供电质量统计
-    getGdsgdzl().then((res)=>{
-      let dataGdzl = []
-      dataGdzl = res.data.data
+    getGdsgdzl().then((res) => {
+      let dataGdzl = [];
+      dataGdzl = res.data.data;
       this.detailedTwo(dataGdzl);
-    })
+    });
     // //配变停运
     // getPbtyqk({
     //   action:"week"
@@ -557,244 +569,248 @@ export default {
     // })
     this.handleDate(0);
     let that = this;
-     window.addEventListener('message', function (e) {
+    window.addEventListener("message", function (e) {
       var res = e.data;
       if (res.val != null) {
-      that.modelOthers = true
-      that.componentShow = 'ringMainUnit'
-      that.device = res.val
-       }
-      })
+        that.modelOthers = true;
+        that.componentShow = "ringMainUnit";
+        that.device = res.val;
+      }
+    });
   },
-   beforeDestroy() {
-        this.dataDestroy();// 页面摧毁前，关闭定时器
-    },
+  // beforeDestroy() {
+  //   this.dataDestroy(); // 页面摧毁前，关闭定时器
+  // },
   methods: {
     beginShowing() {
       this.$nextTick(function () {
         // 文档显示区域的高度 - 表格距离浏览器顶部的距离 - 表格距离浏览器底部的距离
-        if(this.$refs.tableBox && this.$refs.tableBox.$el.offsetTop) {
-          this.tableHeight = window.innerHeight - this.$refs.tableBox.$el.offsetTop - 300;
-          this.$refs.tableBox.doLayout()
-          this.roll()
+        if (this.$refs.tableBox && this.$refs.tableBox.$el.offsetTop) {
+          this.tableHeight =
+            window.innerHeight - this.$refs.tableBox.$el.offsetTop - 300;
+          this.$refs.tableBox.doLayout();
+          this.roll();
         }
-      })
+      });
     },
- roll () {
+    roll() {
       // 拿到表格挂载后的真实DOM
-      const table = this.$refs.tableBox
+      const table = this.$refs.tableBox;
       // 拿到表格中承载数据的div元素
-      const bodyWrapper = table.bodyWrapper
+      const bodyWrapper = table.bodyWrapper;
       // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(这里配置为每100毫秒移动1像素)
       this.myTimer = setInterval(() => {
         // 元素自增距离顶部1像素
-        bodyWrapper.scrollTop++
+        bodyWrapper.scrollTop++;
         // 判断元素是否滚动到底部(可视高度+距离顶部=元素内容的整个高度包括溢出的不可见内容)
-        if (bodyWrapper.clientHeight + bodyWrapper.scrollTop === bodyWrapper.scrollHeight) {
+        if (
+          bodyWrapper.clientHeight + bodyWrapper.scrollTop ===
+          bodyWrapper.scrollHeight
+        ) {
           // 重置table距离顶部距离
-          bodyWrapper.scrollTop = 0
+          bodyWrapper.scrollTop = 0;
         }
-      }, 100)
+      }, 100);
     },
-  // 鼠标进入表格
+    // 鼠标进入表格
     mouseover() {
-      clearInterval(this.myTimer)
+      clearInterval(this.myTimer);
     },
     // 鼠标离开表格
     mouseout() {
-      this.roll()
+      this.roll();
     },
     //调用unity方法
-    handleUnity(index,item) {
+    handleUnity(index, item) {
       this.btnActive = index;
-      this.$refs.iframe.contentWindow.handleChange(item)
+      this.$refs.iframe.contentWindow.handleChange(item);
     },
     //选择线路
-    selectLine(value){
-      getLine(
-        {
-          action:'query',
-          line_code:value
-        }
-      ).then((res)=>{
+    selectLine(value) {
+      getLine({
+        action: "query",
+        line_code: value,
+      }).then((res) => {
         if (res.data.data != 0 && res.data.data != null) {
-          this.$refs.iframe.contentWindow.handleChangeLine(res.data.data.line_name)
-        }else if (res.data.data == null) {
-          this.$refs.iframe.contentWindow.handleChangeLine('')
+          this.$refs.iframe.contentWindow.handleChangeLine(
+            res.data.data.line_name
+          );
+        } else if (res.data.data == null) {
+          this.$refs.iframe.contentWindow.handleChangeLine("");
         }
-      })
+      });
     },
     detailedOne(dataBzgz) {
       let dataList = [];
-      let newArr = [20,20, 20, 20,20, 20, 20,20,20,20];
-      let dataDw = []
+      let newArr = [20, 20, 20, 20, 20, 20, 20, 20, 20, 20];
+      let dataDw = [];
       for (let i = 0; i < dataBzgz.length; i++) {
         dataList.push(dataBzgz[i].gzcs);
-        dataDw.push(dataBzgz[i].dw)
+        dataDw.push(dataBzgz[i].dw);
       }
       var myChart = this.$echarts.init(document.getElementById("detailedOne"));
       var option = {
         tooltip: {
-          show:true,
+          show: true,
           trigger: "axis",
           axisPointer: {
             type: "shadow",
           },
         },
         grid: {
-          top:'18%',
+          top: "18%",
           left: "5%",
           right: "3%",
           bottom: "8%",
           containLabel: true,
         },
-        
+
         xAxis: [
           {
             type: "category",
             data: dataDw,
             axisTick: {
-              show:false,
+              show: false,
               alignWithLabel: true,
             },
-            axisLabel:{
-              color:'#ffffff',
+            axisLabel: {
+              color: "#ffffff",
               interval: 0,
+              fontSize: 16,
             },
             axisLine: {
               show: false, //隐藏X轴轴线
               lineStyle: {
-             color: "#01FCE3",
+                color: "#01FCE3",
               },
-          },
+            },
           },
         ],
         yAxis: [
           {
-            name:'故障次数',
+            name: "单位：次",
             type: "value",
-            data:[0,2,4,6,8,10],
-            nameTextStyle:{
-              color:'#ffffff',
+            data: [0, 2, 4, 6, 8, 10],
+            nameTextStyle: {
+              color: "#ffffff",
               // padding:[25,0,0,0]
+              fontSize: 16,
             },
-            axisLabel:{
-              color:'#ffffff'
+            axisLabel: {
+              color: "#ffffff",
             },
-            splitLine:{
-              show:true,
-               lineStyle: {
-                type: 'solid',
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: "solid",
                 // color: 'rgba(66, 192, 255, .3)',
-                color: 'rgba(102,102,102,0.6)',
-                width: 1
+                color: "rgba(102,102,102,0.6)",
+                width: 1,
                 // color: 'red'
+                fontSize: 16,
               },
             },
             splitArea: {
-              show: false
-            }
+              show: false,
+            },
           },
         ],
         series: [
+          // {
+          //   type: "bar",
+          //   barWidth: 22,
+          //   itemStyle: {
+          //     normal: {
+          //       label: {
+          //         fontSize: 14,
+          //         formatter(params) {
+          //           for (let i = 0; i < dataList.length; i++) {
+          //             if (params.dataIndex == i) {
+          //               return dataDw[i] + "\n" + "\n" + dataList[i];
+          //             }
+          //           }
+          //         },
+          //         show: true,
+          //         position: "top",
+          //         color: "#ffffff",
+          //       },
+          //       color: "none",
+          //     },
+          //   },
+          //   silent: true,
+          //   // barGap: "-100%",
+          //   data: newArr,
+          // },
           {
-            type:'bar',
-            barWidth:22,
-            itemStyle:{
-              normal:{
-                label:{
-                  fontSize: 14,
-                   formatter(params){
-                  for (let i = 0; i < dataList.length; i++) {
-                    if (params.dataIndex == i) {
-                      return dataDw[i] + '\n' + '\n' + dataList[i]
-                    }
-                  }
-                },
-                show:true,
-                position:'top',
-                color:'#ffffff'
-                },
-                color:"none",
-              }
-            },
-            silent:true,
-            barGap:'-100%',
-            data: newArr
-          },
-          {
-            name: "Direct",
+            name: "",
             type: "bar",
-            barWidth:22,
-            itemStyle:{
-              color: new this.$echarts.graphic.LinearGradient(
-                        0, 1, 0, 0,
-                        [
-                            {offset: 0, color: 'rgba(23,74,100,0.6)'},
-                            {offset: 1, color: 'rgb(86,254,226)'}
-                        ]
-                    )
+            barWidth: 30,
+            itemStyle: {
+              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                { offset: 0, color: "rgba(23,74,100,0.6)" },
+                { offset: 1, color: "rgb(86,254,226)" },
+              ]),
+              fontSize: 16,
             },
-             data: dataList,
+            data: dataList,
             label: {
-                show: false,
-                position: 'top',
-                fontStyle:'normal',
-                fontWeight:'normal',
-                color:'#ffffff',
-               
+              show: true,
+              position: "top",
+              fontStyle: "normal",
+              fontWeight: "normal",
+              color: "#ffffff",
             },
             //  z: -1,
             // //不同系列的柱间距离，为百分比,如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。
             // barGap: '-100%',
-           
           },
         ],
       };
 
       myChart.setOption(option);
-      
     },
-     detailedTwo(dataGdzl){
-       let gdsList = [];
-       let xlcczList =  [];
-       let pbcczList = [];
-       let ddyList = [];
-       for (let i = 0; i < dataGdzl.length; i++) {
-         gdsList.push(dataGdzl[i].gds)
-         xlcczList.push(dataGdzl[i].xlccz)
-         pbcczList.push(dataGdzl[i].pbccz)
-         ddyList.push(dataGdzl[i].ddy)
-       }
-       let that = this;
+    detailedTwo(dataGdzl) {
+      let gdsList = [];
+      let xlcczList = [];
+      let pbcczList = [];
+      let ddyList = [];
+      for (let i = 0; i < dataGdzl.length; i++) {
+        gdsList.push(dataGdzl[i].gds);
+        xlcczList.push(dataGdzl[i].xlccz);
+        pbcczList.push(dataGdzl[i].pbccz);
+        ddyList.push(dataGdzl[i].ddy);
+      }
+      let that = this;
       var myChart = this.$echarts.init(document.getElementById("detailedTwo"));
       var option = {
         //  animation: true,
         // animationDuration: 20000,
-        tooltip : {
-        trigger: 'axis',
-            axisPointer: {
-              type: 'cross',
-              label: {
-                backgroundColor: '#6a7985'
-            }
-          }
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "cross",
+            label: {
+              backgroundColor: "#6a7985",
+            },
+          },
         },
-         grid: {
+        grid: {
           left: "4%",
           right: "4%",
           bottom: "10%",
+          top: "15%",
           containLabel: true,
         },
-          legend: {
-            icon:'rect',
-            right:25,
-            data: ["线路重超载", "配变重超载", "低电压"],
-            textStyle: {
-              color: "#fff",
-              fontSize: 16,
-            },
+        legend: {
+          top:10,
+          icon: "rect",
+          right: 25,
+          data: ["线路重超载", "配变重超载", "低电压"],
+          textStyle: {
+            color: "#fff",
+            fontSize: 16,
           },
+        },
         xAxis: {
           type: "category",
           data: gdsList,
@@ -804,200 +820,201 @@ export default {
               color: "none",
             },
           },
-      axisLabel: {
-        //  改变x轴字体颜色和大小
-        interval:0,
-        textStyle: {
-          color: "#ffffff",
-          fontSize: 16,
-        },
-      },
-      splitLine: {
-        show: false,
-        lineStyle: {
-          color: ["#315070"],
-          width: 1,
-          type: "solid",
-        },
-      },
-      },
-      yAxis: {
-        type: "value",
-        axisLine: {
-          //  改变y轴颜色
-          show: false,
-          lineStyle: {
-            color: "none",
+          axisLabel: {
+            //  改变x轴字体颜色和大小
+            interval: 0,
+            textStyle: {
+              color: "#ffffff",
+              fontSize: 16,
+            },
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: ["#315070"],
+              width: 1,
+              type: "solid",
+            },
           },
         },
-      axisLabel: {
-        //  改变y轴字体颜色和大小
-        //formatter: '{value} m³ ', //  给y轴添加单位
-        textStyle: {
-          color: "#ffffff",
-          fontSize: 16,
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: ["#315070"],
-          width: 1,
-          type: "solid",
-        },
-      },
-  },
-  series: [
-    {
-      type: "line",
-      smooth: true,
-      symbol: "circle",
-      symbolSize: 7,
-      markPoint: {
-        symbol: "circle",
-      },
-      name: "线路重超载",
-      data: xlcczList,
-      itemStyle: {
-        normal: {
-          color: "#3D7EEB",
-          borderColor: "#3D7EEB",
-          borderWidth: 2,
-        },
-      },
-      lineStyle: {
-        normal: {
-          width: 2,
-          color: "#327BFA",
-          shadowColor: "#327BFA",
-          shadowBlur: 10,
-        },
-      },
-      areaStyle: {
-        color: {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            {
-              offset: 0.5,
-              color: "rgba(61,126,235,0.5)", // 0% 处的颜色
+        yAxis: {
+          type: "value",
+          axisLine: {
+            //  改变y轴颜色
+            show: false,
+            lineStyle: {
+              color: "none",
             },
-            {
-              offset: 1,
-              color: "rgba(61,126,235,0)", // 100% 处的颜色
+          },
+          axisLabel: {
+            //  改变y轴字体颜色和大小
+            //formatter: '{value} m³ ', //  给y轴添加单位
+            textStyle: {
+              color: "#ffffff",
+              fontSize: 16,
             },
-          ],
-          global: false, // 缺省为 false
-        },
-      },
-    },
-    {
-      type: "line",
-      smooth: true,
-      symbol: "circle",
-      symbolSize: 7,
-      markPoint: {
-        symbol: "circle",
-      },
-      data: pbcczList,
-      name: "配变重超载",
-      itemStyle: {
-        normal: {
-          color: "#17D8A1",
-          borderColor: "#17D8A1",
-          borderWidth: 2,
-        },
-      },
-      lineStyle: {
-        normal: {
-          width: 2,
-          color: "#17D8A1",
-          shadowColor: "#17D8A1",
-          shadowBlur: 10,
-        },
-      },
-      areaStyle: {
-        color: {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            {
-              offset: 0.5,
-              color: "rgba(23,216,161,0.5)", // 0% 处的颜色
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: ["#315070"],
+              width: 1,
+              type: "solid",
             },
-            {
-              offset: 1,
-              color: "rgba(23,216,161,0)", // 100% 处的颜色
+          },
+        },
+        series: [
+          {
+            type: "line",
+            smooth: true,
+            symbol: "circle",
+            symbolSize: 7,
+            markPoint: {
+              symbol: "circle",
             },
-          ],
-          global: false, // 缺省为 false
-        },
-      },
-    },
-    {
-      type: "line",
-      smooth: true,
-      symbol: "circle",
-      symbolSize: 7,
-      markPoint: {
-        symbol: "circle",
-      },
-      data: ddyList,
-      name: "低电压",
-      itemStyle: {
-        normal: {
-          color: "#F4C907",
-          borderColor: "#F4C907",
-          borderWidth: 2,
-        },
-      },
-      lineStyle: {
-        normal: {
-          width: 2,
-          color: "#F4C907",
-          shadowColor: "#F4C907",
-          shadowBlur: 10,
-        },
-      },
-      areaStyle: {
-        color: {
-          type: "linear",
-          x: 0,
-          y: 0,
-          x2: 0,
-          y2: 1,
-          colorStops: [
-            {
-              offset: 0.5,
-              color: "rgba(106,117,79,1)", // 0% 处的颜色
+            name: "线路重超载",
+            data: xlcczList,
+            itemStyle: {
+              normal: {
+                color: "#3D7EEB",
+                borderColor: "#3D7EEB",
+                borderWidth: 2,
+              },
             },
-            {
-              offset: 1,
-              color: "rgba(106,117,79,0)", // 100% 处的颜色
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "#327BFA",
+                shadowColor: "#327BFA",
+                shadowBlur: 10,
+              },
             },
-          ],
-          global: false, // 缺省为 false
-        },
-      },
-    },
-    
-  ],
-};
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0.5,
+                    color: "rgba(61,126,235,0.5)", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(61,126,235,0)", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+          },
+          {
+            type: "line",
+            smooth: true,
+            symbol: "circle",
+            symbolSize: 7,
+            markPoint: {
+              symbol: "circle",
+            },
+            data: pbcczList,
+            name: "配变重超载",
+            itemStyle: {
+              normal: {
+                color: "#17D8A1",
+                borderColor: "#17D8A1",
+                borderWidth: 2,
+              },
+            },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "#17D8A1",
+                shadowColor: "#17D8A1",
+                shadowBlur: 10,
+              },
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0.5,
+                    color: "rgba(23,216,161,0.5)", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(23,216,161,0)", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+          },
+          {
+            type: "line",
+            smooth: true,
+            symbol: "circle",
+            symbolSize: 7,
+            markPoint: {
+              symbol: "circle",
+            },
+            data: ddyList,
+            name: "低电压",
+            itemStyle: {
+              normal: {
+                color: "#F4C907",
+                borderColor: "#F4C907",
+                borderWidth: 2,
+              },
+            },
+            lineStyle: {
+              normal: {
+                width: 2,
+                color: "#F4C907",
+                shadowColor: "#F4C907",
+                shadowBlur: 10,
+              },
+            },
+            areaStyle: {
+              color: {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0.5,
+                    color: "rgba(106,117,79,1)", // 0% 处的颜色
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(106,117,79,0)", // 100% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+          },
+        ],
+      };
       myChart.setOption(option);
     },
-    detailedThree(dataList){
-      var equipment = [dataList.yjlts,dataList.yjlyj];
-      var colorList = ["#0090ff","#06d3c4","#66b0ed","#7cb79d"]
-      var dataList = [{
+    detailedThree(dataList) {
+      var equipment = [dataList.yjlts, dataList.yjlyj];
+      var colorList = ["#0090ff", "#06d3c4", "#66b0ed", "#7cb79d"];
+      var colorList1 = ["rgb(198,123,244)", "#F4C907"];
+      var dataList = [
+        {
           value: dataList.pftd,
           name: "频繁停电",
         },
@@ -1012,372 +1029,436 @@ export default {
         {
           value: dataList.mspc,
           name: "民事赔偿",
-        },]
-      this.myChartBin = this.$echarts.init(document.getElementById("detailedThree"));
-     this.option = {
-      borderColor:'none',
-     
-      tooltip: {
-        formatter: function (param) {
-          if (param.data.type == null) {
-            return param.data.name + ":" + param.value + "个";
-          } else {
-            return param.data.name + ":" + param.value + "个";
-          }
         },
-      },
+      ];
+      this.myChartBin = this.$echarts.init(
+        document.getElementById("detailedThree")
+      );
+      this.option = {
+        borderColor: "none",
+
+        tooltip: {
+          formatter: function (param) {
+            if (param.data.type == null) {
+              return param.data.name + ":" + param.value + "个";
+            } else {
+              return param.data.name + ":" + param.value + "个";
+            }
+          },
+        },
         legend: {
-          icon:'pin',
-          top: 15,
-        data: [
-          {
-            name:'频繁停电'
+          icon: "pin",
+          top: 120,
+          // bottom:0,
+          right:20,
+          orient: 'vertical',  //垂直显示
+             y: 'center',    //延Y轴居中
+             
+          data: [
+            {
+              name: "频繁停电",
+            },
+            {
+              name: "多次停电",
+            },
+            {
+              name: "处理时间长",
+            },
+            {
+              name: "民事赔偿",
+            },
+          ],
+          formatter: (name) => {
+            let total = 0;
+            let target;
+            let value = dataList.filter((x) => x.name == name)[0].value;
+            for (let i = 0, l = dataList.length; i < l; i++) {
+              total += dataList[i].value;
+              if (dataList[i].name == name) {
+                target = dataList[i].value;
+              }
+            }
+            let arr = [name + "   " + value];
+            return arr.join("\n");
           },
-          {
-            name:'多次停电'
+
+          textStyle: {
+            color: "#ffffff",
+            fontSize: 16,
           },
-          {
-            name:'处理时间长'
-          },
-          {
-            name:'民事赔偿'
-          }
-        ],
-         formatter: (name)=> {
-        let total = 0
-        let target
-        let value = dataList.filter(x=>x.name==name)[0].value
-        for (let i = 0, l = dataList.length; i < l; i++) {
-          total += dataList[i].value
-          if (dataList[i].name == name) {
-            target = dataList[i].value
-          }
-        }
-        let arr = [
-           name + '   '
-         + value
-        ]
-        return arr.join('\n')
         },
-        
-        textStyle: {
-          color:'#ffffff'
-        }
-  },
-      series: [
-        
-        {
-          name: "",
-          type: "pie",
-          radius: [0, "40%"],
-          startAngle:360, //默认角度
-          label: {
-            position: "inner",
-            show:false
-          },
-          
-          itemStyle: {
-            normal: {
-              borderColor: "none",
-              borderWidth: 2,
-              color: function (params) {
-                return colorList[params.dataIndex];
+        series: [
+          {
+            name: "",
+            type: "pie",
+            radius: [0, "60%"],
+            center: ["40%", "50%"],
+            startAngle: 60, //默认角度
+            label: {
+              position: "inner",
+              show: false,
+            },
+
+            itemStyle: {
+              normal: {
+                borderColor: "none",
+                borderWidth: 2,
+                fontSize: 16,
+                color: function (params) {
+                  return colorList[params.dataIndex];
+                },
               },
             },
-          },
 
-      selectedMode: "single",
-      data: dataList,
-    },
-    {
-      name: "运检类",
-      type: "pie",
-      radius: ["50%", "55%"],
-      startAngle:360,
-      itemStyle: {
-        normal: {
-          color: function (params) {
-            return colorList[params.dataIndex];
+            selectedMode: "single",
+            data: dataList,
           },
-        },
-      },
-      label: {
-        normal: {
-          formatter: function (params) {
-            if (params.value != 0)
-              return params.data.name + ":" + params.data.type + "个";
-            else return "";
-          },
-          color:"#ffffff",
-          show: true,
-        },
-      },
+          {
+            name: "运检类",
+            type: "pie",
+            radius: ["65%", "67%"],
+            center: ["40%", "50%"],
+            startAngle: 30,
+            itemStyle: {
+              normal: {
+                fontSize: 16,
+                color: function (params) {
+                  return colorList1[params.dataIndex];
+                },
+                // color:'#F4C907',
+              },
+            },
+            label: {
+              normal: {
+                formatter: function (params) {
+                    return params.data.name + ":" + params.data.type + "个";
+                },
+                color: 'auto',
+                show: true,
+                fontSize: 16,
+              },
+            },
 
-      data: [
-        {
-          value: equipment[0],
-          name: "运检类投诉",
-          type: equipment[0],
-        },
-        {
-          value: equipment[1],
-          name: "运检类意见",
-          type: equipment[1],
-        },
-       
-      ],
-      animation:false,
-    },
-     ],
-   };
+            data: [
+              {
+                value: equipment[0],
+                name: "运检类投诉",
+                type: equipment[0],
+              },
+              {
+                value: equipment[1],
+                name: "运检类意见",
+                type: equipment[1],
+              },
+            ],
+            animation: false,
+          },
+        ],
+      };
       this.myChartBin.setOption(this.option);
     },
     doing() {
-            this.option.series[0].startAngle = this.option.series[0].startAngle - 5;
-            this.option.series[1].startAngle = this.option.series[1].startAngle - 5;
-            this.myChartBin.setOption(this.option);
-        },
-    detailedFour(dataList){
-      let yearBzData = []
-      let yearChcg = []
-      let yearChbc = []
-      let yearWchz = []
-      let yearJieDi = []
+      this.option.series[0].startAngle = this.option.series[0].startAngle - 5;
+      this.option.series[1].startAngle = this.option.series[1].startAngle - 5;
+      this.myChartBin.setOption(this.option);
+    },
+    detailedFour(dataList) {
+      let yearBzData = [];
+      let yearChcg = [];
+      let yearChbc = [];
+      let yearWchz = [];
+      let yearJieDi = [];
       for (let i = 0; i < dataList.length; i++) {
-        yearBzData.push(dataList[i].bz)
-        yearChcg.push(dataList[i].chcg)
-        yearChbc.push(dataList[i].chbc)
-        yearWchz.push(dataList[i].wchz)
-        yearJieDi.push(dataList[i].jiedi)
+        yearBzData.push(dataList[i].bz);
+        yearChcg.push(dataList[i].chcg);
+        yearChbc.push(dataList[i].chbc);
+        yearWchz.push(dataList[i].wchz);
+        yearJieDi.push(dataList[i].jiedi);
       }
-        let that = this
+      console.log(yearChcg,'yearBzData');
+      let that = this;
       var myChart = this.$echarts.init(document.getElementById("detailedFour"));
       var option = {
-      tooltip: {
-        axisPointer: {
-          type: "shadow",
+        tooltip: {
+          axisPointer: {
+            type: "shadow",
+            textStyle: {
+              color: "#fff",
+              fontSize: 16,
+            },
+          },
+        },
+        grid: {
+          borderWidth: 0,
+          top: 30,
+          bottom: '17%',
+          left: "6%",
+          right: "6%",
           textStyle: {
             color: "#fff",
           },
         },
-      },
-      grid: {
-        borderWidth: 0,
-        top: 30,
-        bottom: 40,
-        left: '6%',
-        right: '6%',
-        textStyle: {
-          color: "#fff",
+        legend: {
+          icon: "rect",
+          right: "4%",
+          textStyle: {
+            color: "#ffffff",
+          },
+          data: ["重合成功", "重合不成", "无重合闸", "接地"],
         },
-      },
-  legend: {
-    icon: "rect",
-    right: "4%",
-    textStyle: {
-      color: "#ffffff",
-    },
-    data: ["重合成功", "重合不成", "无重合闸","接地"],
-  },
-  calculable: true,
-  xAxis: [
-    {
-      type: "category",
-      trigger: "axis",
-      axisLine: {
-         show:false,
-        lineStyle: {
-          color: "#fff",
-        },
-      },
-      splitLine: {
-        show: false,
-      },
-      axisTick: {
-        show: false,
-      },
-      splitArea: {
-        show: false,
-      },
-      axisLabel: {
-        interval: 0,
-      },
-      data: yearBzData,
-    },
-  ],
-  yAxis: [
-    {
-      type: "value",
-      splitLine: {
-        show: true,
-        lineStyle:{
-          color:"rgb(83,83,83)"
-        }
-      },
-      axisLine: {
-        lineStyle: {
-          color: "#fff",
-        },
-      },
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        interval: 0,
-      },
-      splitArea: {
-        show: false,
-      },
-      
-    },
-  ],
-  series: [
-    {
-      name: "重合成功",
-      type: "bar",
-      stack: "Total1",
-      barMaxWidth: 15,
-      barGap: "10%",
-      label:{
-        show:true
-      },
-      itemStyle: {
-        normal: {
-          color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "rgba(194,190,190,1)",
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            trigger: "axis",
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: "#fff",
+                fontSize: 16,
+              },
             },
-            {
-              offset: 1,
-              color: "rgba(194,190,190,0)",
+            splitLine: {
+              show: false,
             },
-          ]),
-          borderColor: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "rgba(194,190,190,1)",
+            axisTick: {
+              show: false,
             },
-            {
-              offset: 1,
-              color: "rgba(194,190,190,0)",
+            splitArea: {
+              show: false,
             },
-          ]),
-        },
-      },
-      data: yearChcg,
-    },
-    {
-      name: "重合不成",
-      type: "bar",
-      barMaxWidth: 15,
-      stack: "Total1",
-       label:{
-        show:true
-      },
-      itemStyle: {
-        normal: {
-          color: new  that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "rgba(86,254,226,1)",
+            axisLabel: {
+              interval: 0,
+              fontSize: 14,
+               rotate: 30
             },
-            {
-              offset: 1,
-              color: "rgba(86,254,226,0)",
+            data: yearBzData,
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: "rgb(83,83,83)",
+                fontSize: 16,
+              },
             },
-          ]),
-          borderColor: new  that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "rgba(86,254,226,1)",
+            axisLine: {
+              lineStyle: {
+                color: "#fff",
+                fontSize: 16,
+              },
             },
-            {
-              offset: 1,
-              color: "rgba(86,254,226,0)",
+            axisTick: {
+              show: false,
             },
-          ]),
-        },
-      },
-      data: yearChbc,
-    },
-    {
-      name: "无重合闸",
-      type: "bar",
-      barMaxWidth: 15,
-      stack: "Total1",
-       label:{
-        show:true
-      },
-      itemStyle: {
-        normal: {
-          color: new  that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "rgba(237,125,49,1)",
+            axisLabel: {
+              interval: 0,
             },
-            {
-              offset: 1,
-              color: "rgba(237,125,49,0)",
+            splitArea: {
+              show: false,
             },
-          ]),
-          borderColor: new  that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "rgba(237,125,49,1)",
+          },
+        ],
+        series: [
+          {
+            name: "重合成功",
+            type: "bar",
+            stack: "Total1",
+            barMaxWidth: 15,
+            barGap: "10%",
+            label: {
+              show: true,
+              formatter:function(params){
+                if (params.value == 0) {
+                  return ''                  
+                }else{
+                  return params.value
+                }
+              }
             },
-            {
-              offset: 1,
-              color: "rgba(237,125,49,0)",
+            itemStyle: {
+              normal: {
+                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(194,190,190,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(194,190,190,0)",
+                  },
+                ]),
+                borderColor: new that.$echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(194,190,190,1)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(194,190,190,0)",
+                    },
+                  ]
+                ),
+              },
             },
-          ]),
-          barBorderRadius: 0,
-        },
-      },
-      data: yearWchz,
-    },
-    {
-      name: "接地",
-      type: "bar",
-      barMaxWidth: 15,
-      stack: "Total1",
-       label:{
-        show:true
-      },
-      itemStyle: {
-        normal: {
-          color: new  that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "rgba(35,160,247,1)",
+            data: yearChcg,
+          },
+          {
+            name: "重合不成",
+            type: "bar",
+            barMaxWidth: 15,
+            stack: "Total1",
+            label: {
+              show: true,
+              formatter:function(params){
+                if (params.value == 0) {
+                  return ''                  
+                }else{
+                  return params.value
+                }
+              }
             },
-            {
-              offset: 1,
-              color: "rgba(35,160,247,0)",
+            itemStyle: {
+              normal: {
+                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(86,254,226,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(86,254,226,0)",
+                  },
+                ]),
+                borderColor: new that.$echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(86,254,226,1)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(86,254,226,0)",
+                    },
+                  ]
+                ),
+              },
             },
-          ]),
-          borderColor: new  that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "rgba(35,160,247,1)",
+            data: yearChbc,
+          },
+          {
+            name: "无重合闸",
+            type: "bar",
+            barMaxWidth: 15,
+            stack: "Total1",
+            label: {
+              show: true,
+              formatter:function(params){
+                if (params.value == 0) {
+                  return ''                  
+                }else{
+                  return params.value
+                }
+              }
             },
-            {
-              offset: 1,
-              color: "rgba(35,160,247,0)",
+            itemStyle: {
+              normal: {
+                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(237,125,49,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(237,125,49,0)",
+                  },
+                ]),
+                borderColor: new that.$echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(237,125,49,1)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(237,125,49,0)",
+                    },
+                  ]
+                ),
+                barBorderRadius: 0,
+              },
             },
-          ]),
-          barBorderRadius: 0,
-        },
-      },
-      data: yearJieDi,
-    },
-  ],
-};
+            data: yearWchz,
+          },
+          {
+            name: "接地",
+            type: "bar",
+            barMaxWidth: 15,
+            stack: "Total1",
+            label: {
+              show: true,
+              formatter:function(params){
+                if (params.value == 0) {
+                  return ''                  
+                }else{
+                  return params.value
+                }
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(35,160,247,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(35,160,247,0)",
+                  },
+                ]),
+                borderColor: new that.$echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(35,160,247,1)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(35,160,247,0)",
+                    },
+                  ]
+                ),
+                barBorderRadius: 0,
+              },
+            },
+            data: yearJieDi,
+          },
+        ],
+      };
       myChart.setOption(option);
-        
-      
     },
-    detailedFive(dataPbty){
+    detailedFive(dataPbty) {
       let dataListx = [];
       let dataPb = [];
       let dataGz = [];
@@ -1388,321 +1469,333 @@ export default {
         dataPb.push(dataPbty[i].pbsl);
         dataCf.push(dataPbty[i].cftytc);
       }
-     var datacoords = [];
-     var datacoords1 = [];
- for (var i = 0; i < dataListx.length; i++) {
-    datacoords.push([
-      {
-        coord: [i, dataGz[i]],
-      },
-      {
-        coord: [i + 1, dataGz[i + 1]],
-      },
-    ]);
-  }
-  for (var i = 0; i < dataListx.length; i++) {
-    datacoords1.push([
-      {
-        coord: [i, dataCf[i]],
-      },
-      {
-        coord: [i + 1, dataCf[i + 1]],
-      },
-    ]);
-  }
+      var datacoords = [];
+      var datacoords1 = [];
+      for (var i = 0; i < dataListx.length; i++) {
+        datacoords.push([
+          {
+            coord: [i, dataGz[i]],
+          },
+          {
+            coord: [i + 1, dataGz[i + 1]],
+          },
+        ]);
+      }
+      for (var i = 0; i < dataListx.length; i++) {
+        datacoords1.push([
+          {
+            coord: [i, dataCf[i]],
+          },
+          {
+            coord: [i + 1, dataCf[i + 1]],
+          },
+        ]);
+      }
       let that = this;
-     var myChart = this.$echarts.init(document.getElementById("detailedFive"));
-    var option = {
-      animation: true, //控制动画示否开启
-   animationDuration: 2000,
-   animationEasing: "bounceOut", //缓动动画
-   animationThreshold: 8, //动画元素的阈值
-  grid: {
-    top: "15%",
-    bottom: "35%", //也可设置left和right设置距离来控制图表的大小
-  },
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      type: "shadow",
-      label: {
-        show: true,
-      },
-    },
-  },
-  legend: {
-    data: ["配变数量", "故障停运","重复停运"],
-    top: "0%",
-    //  icon:'roundRect',
-    //  itemHeight:2, // 粗细
-    textStyle: {
-      color: "#ffffff",
-    },
-  },
-  xAxis: {
-    data: dataListx,
-    axisLine: {
-      show: false, //隐藏X轴轴线
-      lineStyle: {
-        color: "#01FCE3",
-      },
-    },
-    axisTick: {
-      show: false, //隐藏X轴刻度
-    },
-    axisLabel: {
-      show: true,
-      interval:0,
-      textStyle: {
-        color: "#ffffff", //X轴文字颜色
-      },
-    },
-  },
-  yAxis: [
-    {
-      type: "value",
-      name: "配变数量",
-      nameTextStyle: {
-        color: "#ffffff",
-      },
-      splitLine: {
-        show: false,
-      },
-      axisTick: {
-        show: false,
-      },
-      axisLine: {
-        show: false,
-        lineStyle: {
-          color: "#FFFFFF",
+      var myChart = this.$echarts.init(document.getElementById("detailedFive"));
+      var option = {
+        animation: true, //控制动画示否开启
+        animationDuration: 2000,
+        animationEasing: "bounceOut", //缓动动画
+        animationThreshold: 8, //动画元素的阈值
+        grid: {
+          top: "15%",
+          bottom: "35%", //也可设置left和right设置距离来控制图表的大小
         },
-      },
-      axisLabel: {
-        show: true,
-        interval:0,
-        textStyle: {
-          color: "#ffffff",
-        },
-      },
-    },
-    {
-      type: "value",
-      name: "停运台次",
-      nameTextStyle: {
-        color: "#ffffff",
-      },
-      position: "right",
-      splitLine: {
-        show: false,
-      },
-      axisTick: {
-        show: false,
-      },
-      axisLine: {
-        show: false,
-      },
-      axisLabel: {
-        show: true,
-        
-        // formatter: "{value} %", //右侧Y轴文字显示
-        textStyle: {
-          color: "#ffffff",
-        },
-      },
-    },
-    {
-      type: "value",
-      gridIndex: 0,
-      min: 50,
-      max: 100,
-      splitNumber: 8,
-      splitLine: {
-        show: false,
-      },
-      axisLine: {
-        show: false,
-      },
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        show: false,
-      },
-      splitArea: {
-        show: true,
-        areaStyle: {
-          color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
-        },
-      },
-    },
-  ],
-  series: [
-     
-    {
-      name: "故障停运",
-      type: "line",
-      yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
-      smooth: false, //平滑曲线显示
-      showAllSymbol: true, //显示所有图形。
-     shadowOffsetX: 0, // 折线的X偏移
-         shadowOffsetY: 10, // 折线的Y偏移
-      symbol: "circle", //标记的图形为实心圆
-      symbolSize: 1, //标记的大小
-      itemStyle: {
-        //折线拐点标志的样式
-        color: "rgb(237,125,49)",
-      },
-      lineStyle: {
-        color: "rgb(237,125,49)",
-      },
-      // areaStyle: {
-      //   show:false,
-      //   color: "rgba(5,140,255, 0.2)",
-      // },
-      emphasis: {
-         focus: "series",
-       },
-      data: dataGz,
-    },
-    {
-       showSymbol: false,
-       name: "故障停运",
-       type: "lines",
-        yAxisIndex: 1, 
-       polyline: true,
-       smooth: false,
-       coordinateSystem: "cartesian2d",
-       zlevel: 1,
-       effect: {
-         show: true,
-         smooth: false,
-         period: 6,
-         trailLenth:0.1,
-         symbolSize: 6,
-         symbol:'circle'
-       },
-       lineStyle: {
-         color: "#fff",
-         width: 1,
-         opacity: 0,
-         curveness: 0,
-         cap: "round",
-       },
-       data: datacoords,
-     },
-    {
-      name: "重复停运",
-      type: "line",
-      yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
-      smooth: false, //平滑曲线显示
-      shadowOffsetX: 0, // 折线的X偏移
-         shadowOffsetY: 10, // 折线的Y偏移
-      showAllSymbol: true, //显示所有图形。
-      symbol: "circle", //标记的图形为实心圆
-      symbolSize: 1, //标记的大小
-      itemStyle: {
-        //折线拐点标志的样式
-        show:false,
-        color: "#058cff",
-      },
-      lineStyle: {
-        show:false,
-        color: "#058cff",
-      },
-      // areaStyle: {
-      //   show:false,
-      //   color: "rgba(5,140,255, 0.2)",
-      // },
-      data: dataCf,
-    },
-      {
-       showSymbol: false,
-       name: "重复停运",
-       type: "lines",
-        yAxisIndex: 1, 
-       polyline: true,
-       smooth: false,
-       coordinateSystem: "cartesian2d",
-       zlevel: 1,
-       effect: {
-         show: true,
-         smooth: false,
-         period: 6,
-         trailLenth:0.1,
-         symbolSize: 6,
-         symbol:'circle'
-       },
-       lineStyle: {
-         color: "#fff",
-         width: 1,
-         opacity: 0,
-         curveness: 0,
-         cap: "round",
-       },
-       data: datacoords1,
-     },
-    {
-      name: "配变数量",
-      type: "bar",
-      barWidth: 15,
-      itemStyle: {
-        normal: {
-          color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            {
-              offset: 0,
-              color: "rgba(86,254,226,1)",
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+            label: {
+              show: true,
             },
-            {
-              offset: 1,
-              color: "rgba(86,254,226,0)",
-            },
-          ]),
+          },
         },
-      },
-      data: dataPb,
-    },
-  ],
-};
+        legend: {
+          data: ["配变数量", "故障停运", "重复停运"],
+          top: "0%",
+          //  icon:'roundRect',
+          //  itemHeight:2, // 粗细
+          textStyle: {
+            color: "#ffffff",
+          },
+        },
+        xAxis: {
+          data: dataListx,
+          axisLine: {
+            show: false, //隐藏X轴轴线
+            lineStyle: {
+              color: "#01FCE3",
+            },
+          },
+          axisTick: {
+            show: false, //隐藏X轴刻度
+          },
+          axisLabel: {
+            show: true,
+            interval: 0,
+            textStyle: {
+              color: "#ffffff", //X轴文字颜色
+              fontSize:'16px',
+            },
+          },
+        },
+        yAxis: [
+          {
+            type: "value",
+            name: "配变数量",
+            nameTextStyle: {
+              color: "#ffffff",
+              padding: [0, 30, 0, 0],
+            },
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: "#FFFFFF",
+              },
+            },
+            axisLabel: {
+              show: true,
+              interval: 0,
+              textStyle: {
+                color: "#ffffff",
+              },
+            },
+          },
+          {
+            type: "value",
+            name: "停运台次",
+            nameTextStyle: {
+              color: "#ffffff",
+            },
+            position: "right",
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+
+              // formatter: "{value} %", //右侧Y轴文字显示
+              textStyle: {
+                color: "#ffffff",
+              },
+            },
+          },
+          {
+            type: "value",
+            gridIndex: 0,
+            min: 50,
+            max: 100,
+            splitNumber: 8,
+            splitLine: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            splitArea: {
+              show: true,
+              areaStyle: {
+                color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "故障停运",
+            type: "line",
+            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+            smooth: false, //平滑曲线显示
+            showAllSymbol: true, //显示所有图形。
+            shadowOffsetX: 0, // 折线的X偏移
+            shadowOffsetY: 10, // 折线的Y偏移
+            symbol: "circle", //标记的图形为实心圆
+            symbolSize: 1, //标记的大小
+            itemStyle: {
+              //折线拐点标志的样式
+              color: "rgb(237,125,49)",
+            },
+            lineStyle: {
+              color: "rgb(237,125,49)",
+            },
+            // areaStyle: {
+            //   show:false,
+            //   color: "rgba(5,140,255, 0.2)",
+            // },
+            emphasis: {
+              focus: "series",
+            },
+            data: dataGz,
+          },
+          {
+            showSymbol: false,
+            name: "故障停运",
+            type: "lines",
+            yAxisIndex: 1,
+            polyline: true,
+            smooth: false,
+            coordinateSystem: "cartesian2d",
+            zlevel: 1,
+            effect: {
+              show: true,
+              smooth: false,
+              period: 6,
+              trailLenth: 0.1,
+              symbolSize: 6,
+              symbol: "circle",
+            },
+            lineStyle: {
+              color: "#fff",
+              width: 1,
+              opacity: 0,
+              curveness: 0,
+              cap: "round",
+            },
+            data: datacoords,
+          },
+          {
+            name: "重复停运",
+            type: "line",
+            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+            smooth: false, //平滑曲线显示
+            shadowOffsetX: 0, // 折线的X偏移
+            shadowOffsetY: 10, // 折线的Y偏移
+            showAllSymbol: true, //显示所有图形。
+            symbol: "circle", //标记的图形为实心圆
+            symbolSize: 1, //标记的大小
+            itemStyle: {
+              //折线拐点标志的样式
+              show: false,
+              color: "#058cff",
+            },
+            lineStyle: {
+              show: false,
+              color: "#058cff",
+            },
+            // areaStyle: {
+            //   show:false,
+            //   color: "rgba(5,140,255, 0.2)",
+            // },
+            data: dataCf,
+          },
+          {
+            showSymbol: false,
+            name: "重复停运",
+            type: "lines",
+            yAxisIndex: 1,
+            polyline: true,
+            smooth: false,
+            coordinateSystem: "cartesian2d",
+            zlevel: 1,
+            effect: {
+              show: true,
+              smooth: false,
+              period: 6,
+              trailLenth: 0.1,
+              symbolSize: 6,
+              symbol: "circle",
+            },
+            lineStyle: {
+              color: "#fff",
+              width: 1,
+              opacity: 0,
+              curveness: 0,
+              cap: "round",
+            },
+            data: datacoords1,
+          },
+          {
+            name: "配变数量",
+            type: "bar",
+            barWidth: 15,
+            itemStyle: {
+              normal: {
+                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: "rgba(86,254,226,1)",
+                  },
+                  {
+                    offset: 1,
+                    color: "rgba(86,254,226,0)",
+                  },
+                ]),
+              },
+            },
+            data: dataPb,
+          },
+        ],
+      };
       myChart.setOption(option);
     },
     //报警详情信息弹窗
-    enlargeBtn(index){
+    enlargeBtn(index) {
       if (index == 0) {
         this.alarmInformationShow = true;
         this.realTimeAlarmShow = false;
-      }else if (index == 1) {
-         this.$refs.iframe.contentWindow.fullscreen(1);
+      } else if (index == 1) {
+        // this.$refs.iframe.contentWindow.fullscreen(1);
+        document.getElementById('left').style.display  = 'none'
+        document.getElementById('left').style.width  = '0'
+        document.getElementById('right').style.display  = 'none'
+        document.getElementById('right').style.width  = '0'
+        document.getElementById('middle').style.width  = '100%'
+        document.getElementById('detailed').style.height  = '0'
+        document.getElementById('detailed').style.display  = 'none'
+        document.getElementById('threeModel').style.height  = '100%'
+        document.getElementById('threeModel').style.width  = '100%'
       }
     },
-    handleClose(){
-      this.alarmInformationShow = false
+    handleClose() {
+      this.alarmInformationShow = false;
     },
-    handleDate(index){
-      this.currentIndex = index
+    handleDate(index) {
+      this.currentIndex = index;
       // if (index == 0) {
-        //周配变停运
-        getPbtyqk({
-          action: index==0?"week":'month'
-        }).then((res)=>{
-          let dataPbty = [];
-          dataPbty = res.data.data
-          this.detailedFive(dataPbty);
-          let dataPb = [];
-          let dataCf = [];
-          for (let i = 0; i < dataPbty.length; i++) {
-            dataPb.push(dataPbty[i].pbsl);
-            dataCf.push(dataPbty[i].cftytc);
-          }
-          this.topContent[0].count = dataPb.reduce((x, y) => x + y)
-          this.topContent[1].count = dataCf.reduce((x, y) => x + y)
-           let pbCount =  (this.topContent[1].count/this.topContent[0].count)*100
-          let pbCountString = pbCount.toString()
-          if (pbCountString.indexOf(".") != -1) {
-            this.topContent[2].count =  pbCountString.substring(0,pbCountString.indexOf(".")+3) + '%'
-          }else{
-          this.topContent[2].count = pbCountString +'%'
-          }
-        })
+      //周配变停运
+      getPbtyqk({
+        action: index == 0 ? "week" : "month",
+      }).then((res) => {
+        let dataPbty = [];
+        dataPbty = res.data.data;
+        this.detailedFive(dataPbty);
+        let dataPb = [];
+        let dataCf = [];
+        for (let i = 0; i < dataPbty.length; i++) {
+          dataPb.push(dataPbty[i].pbsl);
+          dataCf.push(dataPbty[i].cftytc);
+        }
+        this.topContent[0].count = dataPb.reduce((x, y) => x + y);
+        this.topContent[1].count = dataCf.reduce((x, y) => x + y);
+        let pbCount =
+          (this.topContent[1].count / this.topContent[0].count) * 100;
+        let pbCountString = pbCount.toString();
+        if (pbCountString.indexOf(".") != -1) {
+          this.topContent[2].count =
+            pbCountString.substring(0, pbCountString.indexOf(".") + 3) + "%";
+        } else {
+          this.topContent[2].count = pbCountString + "%";
+        }
+      });
       // }else if (index == 1) {
       //   //月配变停运
       //   getPbtyqk({
@@ -1729,23 +1822,23 @@ export default {
       //   })
       // }
     },
-    addColor(index){
-      if(this.currentIndex == index) {
-          return {active : this.acolor}
+    addColor(index) {
+      if (this.currentIndex == index) {
+        return { active: this.acolor };
       }
-    }
+    },
   },
   watch: {
-       //监听内容
-       value(newVal,oldVal) {
-        if (newVal != oldVal && newVal != '') {
-          this.selectLine(newVal)
-        }else if(newVal == ''){
-          this.selectLine('')
-          this.value = ''
-        }
+    //监听内容
+    value(newVal, oldVal) {
+      if (newVal != oldVal && newVal != "") {
+        this.selectLine(newVal);
+      } else if (newVal == "") {
+        this.selectLine("");
+        this.value = "";
       }
-    }
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -1757,8 +1850,10 @@ export default {
     background-color: transparent !important;
   }
   /deep/ .el-table__header {
-    height: 48px;
+    width: 100% !important;
+    height: 70px;
     background: url("../assets/images/tableBg.png") no-repeat;
+    background-size: 100% 100%;
   }
   /deep/ .el-table__header th {
     border: none;
@@ -1789,6 +1884,12 @@ export default {
   /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;
@@ -1796,7 +1897,7 @@ export default {
   //   width: 100%;
   //   height: 0px;
   // }
-    .el-table::before{
+  .el-table::before {
     background-color: transparent;
   }
 }
@@ -1810,7 +1911,8 @@ export default {
   justify-content: space-between;
   box-sizing: border-box;
   .left {
-    width: 604px;
+    // width: 604px;
+    width:21.18%;
     height: 100%;
     display: flex;
     flex-flow: column nowrap;
@@ -1850,8 +1952,23 @@ export default {
               flex-flow: column nowrap;
               justify-content: center;
               align-items: center;
-              color: #ffffff;
+              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;
@@ -1888,7 +2005,8 @@ export default {
     }
   }
   .middle {
-    width: 1590px;
+    // width: 1590px;
+    width:55.7%;
     height: 100%;
     display: flex;
     flex-flow: column nowrap;
@@ -1900,20 +2018,26 @@ export default {
       .unityBtn {
         position: absolute;
         top: 40px;
-        left: 40px;
-        width: 94px;
+        left: 30%;
+        width: 40%;
+        display: flex;
+        justify-content: space-between;
         .btn {
           width: 100%;
           height: 38px;
-          color: rgb(28, 95, 98);
+          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: #ffffff;
+          color: rgb(244,201,7);
           background: url("../assets/images/unityBtn.png") no-repeat;
+          background-size: 100% 100%;
+          margin-right: 15px;
         }
       }
       .unityIcon {
@@ -1955,7 +2079,7 @@ export default {
         position: absolute;
         left: 40px;
         width: 222px;
-        bottom: 40px;
+        bottom: 20px;
         display: flex;
         align-items: center;
         .unitySuosou {
@@ -1972,7 +2096,7 @@ export default {
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
-        height: 10%;
+        height: 14%;
         align-items: center;
         color: #ffffff;
         background: url("../assets/images/tableBg.png") no-repeat;
@@ -2015,7 +2139,8 @@ export default {
     }
   }
   .right {
-    width: 604px;
+    // width: 604px;
+    width:21.28%;
     height: 100%;
     display: flex;
     flex-flow: column nowrap;
@@ -2270,16 +2395,23 @@ export default {
   }
 }
 .el-select-dropdown {
-  background-color: rgba(14, 30, 46, 0.5) !important;
+  background-color: rgb(14, 30, 46) !important;
   border: 1px solid rgba(45, 143, 148, 0.5) !important ;
   .el-select-dropdown__item {
-    color: rgb(78, 230, 207) !important;
+    color: #fff !important;
   }
   .el-select-dropdown__item.hover,
   .el-select-dropdown__item:hover {
     background-color: rgb(18, 54, 87) !important;
   }
 }
+.el-popper{
+    top: 50% !important;
+    .popper__arrow{
+          left: 171px !important;
+          top: 95px !important;
+    }
+}
 /**
 表格有滚动效果但是不显示滚动条
 */