diff --git a/src/App.vue b/src/App.vue
index de7b12b..606c173 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,253 +1,284 @@
-<template>
-  <div id="app">
-    <div class="top">
-      <div class="left" text="盐都电力可视化系统">
-        盐都电力可视化系统
-      </div>
-      <div class="middle">
-        <div class="router" :class="{'active':routerActive==index}" v-for="(item,index) in routerTitle" @click="handleChange(index)" :key="index" :text="item">{{item}}</div>
-      </div>
-      <div class="right">
-        <div class="time">
-          <span>{{this.$moment().format("MM月DD日")}}  {{week}}</span>
-          <span style="font-size:24px;margin-top: 3px;">{{this.$moment().format("YYYY-MM-DD")}}</span>
-        </div>
-        <div class="weather" v-for="(item,index) in weatherArr" :key="index">
-          <div class="pic">
-            <img :src="item.pic" alt="" style="height:100%;width:100%">
-          </div>
-          <div class="date">
-            <span>{{item.date}}</span>
-            <span style="font-size:24px;margin-top: 3px;">{{item.high}}-{{item.low}}</span>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="content">
-      <router-view />
-
-    </div>
-  </div>
-</template>
-<script>
-import MinxinItem from "./mixins"
-import axios from 'axios'
-import {getWather,Weather} from "./api/index.js";
-export default {
-  name: 'home',
-  mixins:[MinxinItem],
-  data(){
-    return{
-      routerTitle:['首页','20kv','35kv','站房智辅'],
-      routerActive:0,
-      weatherArr:[
-        {day:'今天',temperature:'27℃-19℃',pic:require('./assets/images/sun.png')},
-        {day:'12月01日',temperature:'27℃-19℃',pic:require('./assets/images/union.png')},
-        {day:'12月02日',temperature:'27℃-19℃',pic:require('./assets/images/windy.png')}
-      ],
-      weekList:['周日','周一','周二','周三','周四','周五','周六'],
-      week:'',
-    }
-  },
-  mounted(){
-    this.handleWather()
-    let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
-   this.week = this.weekList[week]
-  },
-  
-  methods:{
-    //天气
-    handleWather(){
-      // axios({url:"http://www.jcznedu.com:5000/weather/prediction/?city=盐都&&limit=3",methods:'GET'}).then(res=>{
-      // })
-      Weather({
-        
-      }).then((res)=>{
-        this.weatherArr = res.data.data.daly;
-        this.weatherArr[0].date = '今天';
-        for (let i = 0; i < this.weatherArr.length; i++) {
-          this.Onweather(this.weatherArr[i].weather,i)
-        }
-      })
-    },
-    //天气
-    Onweather(name,index){
-      switch (name) {
-					case "多云":
-						return this.weatherArr[index].pic = require('./assets/weather/Cloudy .png');
-					case "阴":
-						return this.weatherArr[index].pic = require('./assets/weather/Cloudy .png')
-					case "暴雨":
-						return this.weatherArr[index].pic = require('./assets/weather/rainstorm.png')
-					case "冰雹":
-						return this.weatherArr[index].pic = require('./assets/weather/hail.png')
-					case "大风":
-						return this.weatherArr[index].pic = require('./assets/weather/gale.png')
-					case "大雪":
-						return this.weatherArr[index].pic = require('./assets/weather/bigsnow.png')
-					case "大雨":
-						return this.weatherArr[index].pic = require('./assets/weather/bigrain.png')
-					case "雷电":
-						return this.weatherArr[index].pic = require('./assets/weather/thunder.png')
-					case "雷阵雨":
-						return this.weatherArr[index].pic = require('./assets/weather/shower.png')
-					case "沙尘暴":
-						return this.weatherArr[index].pic = require('./assets/weather/sand.png')
-					case "晴":
-						return this.weatherArr[index].pic = require('./assets/weather/sun.png')
-					case "雾霾":
-						return this.weatherArr[index].pic = require('./assets/weather/smog.png')
-					case "小雪":
-						return this.weatherArr[index].pic = require('./assets/weather/snow.png')
-					case "小雨":
-						return this.weatherArr[index].pic = require('./assets/weather/rain.png')
-					case "雪":
-						return this.weatherArr[index].pic = require('./assets/weather/rainlitter.png')
-					case "多云":
-						return this.weatherArr[index].pic = require('./assets/weather/night.png')
-					case "雨夹雪":
-						return this.weatherArr[index].pic = require('./assets/weather/rainsnow.png')
-					case "月亮":
-						return this.weatherArr[index].pic = require('./assets/weather/moon.png')
-					case "中雪":
-						return this.weatherArr[index].pic = require('./assets/weather/mieddlesnow.png')
-					case "中雨":
-						return this.weatherArr[index].pic = require('./assets/weather/middlerain.png')
-				}
-    },
-    handleChange(index){
-      let that = this;
-      this.routerActive = index
-      if (this.routerActive == 0) {
-        if (this.$route.name != 'index') {
-          that.$router.push({name:'index'})
-        }
-      }else if (this.routerActive == 3) {
-        that.$router.push({name:'stationBuilding'})
-      }else if (this.routerActive == 1) {
-        that.$router.push({name:'twentyKV'})
-      }else if (this.routerActive == 2) {
-        that.$router.push({name:'thirtyFiveKV'})
-      }
-    }
-  }
-}
-</script>
-<style>
-@import "./assets/index.css";
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  background: url('./assets/images/homePg.png') no-repeat;
-  background-size: 100% 100%;
-}
-
-</style>
-<style lang="less" scoped>
-.top {
-  width: 100%;
-  height: 100px;
-  /* background: rgba(147, 230, 244,0.6); */
-  /* background-image: linear-gradient(90deg, rgba(147, 230, 244,0.6),rgba(147, 230, 244,0), rgba(147, 230, 244,0.6)); */
-  background: url('./assets/images/topBg.png') no-repeat;
-  background-size: 100% 100%;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-  .left{
-    width: 815px;
-    height: 97px;
-    background: url('./assets/images/titleBg1.png') no-repeat;
-    background-size: 100% 100%;
-    font-size: 44px;
-    font-weight: 700;
-    letter-spacing: 22px;
-    color: #ffffff;
-    line-height: 97px;
-    padding-left: 86px;
-    text-align: left;
-    box-sizing: border-box;
-  }
-  .left:before{
-        content: attr(text);
-        position: absolute;
-        z-index: 10;
-        color:rgb(86, 254, 246);
-        -webkit-mask:linear-gradient(to top, rgb(86,244,254), transparent );
-    }
-  .middle{
-    width: auto;
-    height: 78px;
-    display: flex;
-    flex-flow: row nowrap;
-    .router{
-      width: 244px;
-      height: 100%;
-      line-height: 78px;
-      color: rgb(41,114,124);
-      font-size: 22px;
-      cursor: pointer;
-    }
-    .active{
-      color: #ffffff;
-      background: url('./assets/images/routerActive.png') no-repeat;
-      background-size: 100% 100%;
-    }
-    .active:before{
-        content: attr(text);
-        position: absolute;
-        z-index: 10;
-        color:rgb(86, 254, 246);
-        -webkit-mask:linear-gradient(to top, rgb(86,244,254), transparent );
-    }
-  }
-  .right{
-    // width: 740px;
-    height: 78px;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-between;
-    padding-right: 15px;
-    .time{
-      height: 100%;
-      color: #ffffff;
-      font-size: 18px;
-      display: flex;
-      flex-flow: column nowrap;
-      justify-content: center;
-      text-align: left;
-    }
-    .weather{
-      display: flex;
-      flex-flow: row nowrap;
-      height: 100%;
-      align-items: center;
-      margin-left: 36px;
-      .pic{
-        width: 61px;
-        height: 61px;
-      }
-      .date{
-        height: 100%;
-        color: #ffffff;
-        font-size: 18px;
-        display: flex;
-        flex-flow: column nowrap;
-        justify-content: center;
-        margin-left: 19px;
-        text-align: left;
-      }
-    }
-  }
-}
-.content {
-  width: 100%;
-  height: calc(100% - 100px);
-      display: flex;
-    align-items: center;
-    justify-content: space-around;
-}
-</style>
+<template>
+  <div id="app">
+    <div class="top">
+      <div class="left" text="盐都电力可视化系统">
+        盐都电力可视化系统
+      </div>
+      <div class="middle">
+        <div class="router" :class="{'active':routerActive==index}" v-for="(item,index) in routerTitle" @click="handleChange(index)" :key="index" :text="item">{{item}}</div>
+      </div>
+      <div class="right">
+        <div class="time">
+          <span>{{this.$moment().format("MM月DD日")}}  {{week}}</span>
+          <span style="font-size:24px;margin-top: 3px;">{{this.$moment().format("YYYY-MM-DD")}}</span>
+        </div>
+        <div class="weather" v-for="(item,index) in weatherArr" :key="index">
+          <div class="pic">
+            <img :src="item.pic" alt="" style="height:100%;width:100%">
+          </div>
+          <div class="date">
+            <span>{{item.date}}</span>
+            <span style="font-size:24px;margin-top: 3px;">{{item.temperature}}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <router-view />
+
+    </div>
+  </div>
+</template>
+<script>
+import MinxinItem from "./mixins"
+import axios from 'axios'
+import {getWather,Weather} from "./api/index.js";
+export default {
+  name: 'home',
+  mixins:[MinxinItem],
+  data(){
+    return{
+      addDay:'',
+      subDay:'',
+      routerTitle:['首页','20kv','35kv','站房智辅'],
+      routerActive:0,
+      weatherArr:[
+        {day:'今天',temperature:'',pic:require('./assets/images/sun.png')},
+        {day:'昨天',temperature:'',pic:require('./assets/images/union.png')},
+        {day:'明天',temperature:'',pic:require('./assets/images/windy.png')}
+      ],
+      weekList:['周日','周一','周二','周三','周四','周五','周六'],
+      week:'',
+    }
+  },
+  mounted(){
+    this.handleWather()
+    let week = new Date(this.$moment().format("YYYY-MM-DD")).getDay()
+   this.week = this.weekList[week]
+  },
+  
+  methods:{
+    getDateSub(n){
+      let day = this.$moment(new Date()).subtract(n, 'days').format('YYYY-MM-DD');
+      this.subDay = day
+      return day;
+    },
+    getDateAdd(n){
+      var dd = new Date();
+      dd.setDate(dd.getDate() + n); //获取n天后的日期
+      var y = dd.getFullYear();
+      var m = dd.getMonth() + 1; //获取当前月份的日期
+      var d = dd.getDate();
+      let day = y + '-' + m + '-' + d;
+      this.addDay = day
+      return day;
+    },
+    //天气
+    handleWather(){
+      // axios({url:"http://www.jcznedu.com:5000/weather/prediction/?city=盐都&&limit=3",methods:'GET'}).then(res=>{
+      // })
+      Weather({
+        action:'one',
+        key:'天气情况'
+      }).then((res)=>{
+        let toDay = this.$moment().format("D")
+        this.getDateSub(1);
+        this.getDateAdd(1),
+        res.data.data.forEach((item,index) => {
+          if (item.第N天 == this.$moment(this.subDay).format("D")) {
+            this.weatherArr[1].date = '昨天'
+            this.weatherArr[1].temperature = item.最低温度 +'℃' + '~' + item.最高温度 +'℃'
+            this.Onweather(item.天气,1)
+          }else if (item.第N天 == this.$moment(this.addDay).format("D")) {
+            this.weatherArr[2].date = '明天'
+            this.weatherArr[2].temperature = item.最低温度 +'℃' + '~' + item.最高温度 +'℃'
+            this.Onweather(item.天气,2)
+          }else if (item.第N天 == toDay) {
+            this.weatherArr[0].date = '今天'
+            this.weatherArr[0].temperature = item.最低温度 +'℃' + '~' + item.最高温度 +'℃'
+            this.Onweather(item.天气,0)
+          }
+        });
+      })
+    },
+    //天气
+    Onweather(name,index){
+      switch (name) {
+					case "多云":
+						return this.weatherArr[index].pic = require('./assets/weather/Cloudy .png');
+					case "阴":
+						return this.weatherArr[index].pic = require('./assets/weather/Cloudy .png')
+					case "暴雨":
+						return this.weatherArr[index].pic = require('./assets/weather/rainstorm.png')
+					case "冰雹":
+						return this.weatherArr[index].pic = require('./assets/weather/hail.png')
+					case "大风":
+						return this.weatherArr[index].pic = require('./assets/weather/gale.png')
+					case "大雪":
+						return this.weatherArr[index].pic = require('./assets/weather/bigsnow.png')
+					case "大雨":
+						return this.weatherArr[index].pic = require('./assets/weather/bigrain.png')
+					case "雷电":
+						return this.weatherArr[index].pic = require('./assets/weather/thunder.png')
+					case "雷阵雨":
+						return this.weatherArr[index].pic = require('./assets/weather/shower.png')
+					case "沙尘暴":
+						return this.weatherArr[index].pic = require('./assets/weather/sand.png')
+					case "晴":
+						return this.weatherArr[index].pic = require('./assets/weather/sun.png')
+					case "雾霾":
+						return this.weatherArr[index].pic = require('./assets/weather/smog.png')
+					case "小雪":
+						return this.weatherArr[index].pic = require('./assets/weather/snow.png')
+					case "小雨":
+						return this.weatherArr[index].pic = require('./assets/weather/rain.png')
+					case "雪":
+						return this.weatherArr[index].pic = require('./assets/weather/rainlitter.png')
+					case "多云":
+						return this.weatherArr[index].pic = require('./assets/weather/night.png')
+					case "雨夹雪":
+						return this.weatherArr[index].pic = require('./assets/weather/rainsnow.png')
+					case "月亮":
+						return this.weatherArr[index].pic = require('./assets/weather/moon.png')
+					case "中雪":
+						return this.weatherArr[index].pic = require('./assets/weather/mieddlesnow.png')
+					case "中雨":
+						return this.weatherArr[index].pic = require('./assets/weather/middlerain.png')
+				}
+    },
+    handleChange(index){
+      let that = this;
+      this.routerActive = index
+      if (this.routerActive == 0) {
+        if (this.$route.name != 'index') {
+          that.$router.push({name:'index'})
+        }
+      }else if (this.routerActive == 3) {
+        that.$router.push({name:'stationBuilding'})
+      }else if (this.routerActive == 1) {
+        that.$router.push({name:'twentyKV'})
+      }else if (this.routerActive == 2) {
+        that.$router.push({name:'thirtyFiveKV'})
+      }
+    }
+  }
+}
+</script>
+<style>
+@import "./assets/index.css";
+#app {
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  background: url('./assets/images/homePg.png') no-repeat;
+  background-size: 100% 100%;
+}
+
+</style>
+<style lang="less" scoped>
+.top {
+  width: 100%;
+  height: 100px;
+  /* background: rgba(147, 230, 244,0.6); */
+  /* background-image: linear-gradient(90deg, rgba(147, 230, 244,0.6),rgba(147, 230, 244,0), rgba(147, 230, 244,0.6)); */
+  background: url('./assets/images/topBg.png') no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  .left{
+    width: 815px;
+    height: 97px;
+    background: url('./assets/images/titleBg1.png') no-repeat;
+    background-size: 100% 100%;
+    font-size: 44px;
+    font-weight: 700;
+    letter-spacing: 22px;
+    color: #ffffff;
+    line-height: 97px;
+    padding-left: 86px;
+    text-align: left;
+    box-sizing: border-box;
+  }
+  .left:before{
+        content: attr(text);
+        position: absolute;
+        z-index: 10;
+        color:rgb(86, 254, 246);
+        -webkit-mask:linear-gradient(to top, rgb(86,244,254), transparent );
+    }
+  .middle{
+    width: auto;
+    height: 78px;
+    display: flex;
+    flex-flow: row nowrap;
+    .router{
+      width: 244px;
+      height: 100%;
+      line-height: 78px;
+      color: rgb(41,114,124);
+      font-size: 22px;
+      cursor: pointer;
+    }
+    .active{
+      color: #ffffff;
+      background: url('./assets/images/routerActive.png') no-repeat;
+      background-size: 100% 100%;
+    }
+    .active:before{
+        content: attr(text);
+        position: absolute;
+        z-index: 10;
+        color:rgb(86, 254, 246);
+        -webkit-mask:linear-gradient(to top, rgb(86,244,254), transparent );
+    }
+  }
+  .right{
+    // width: 740px;
+    height: 78px;
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    padding-right: 15px;
+    .time{
+      height: 100%;
+      color: #ffffff;
+      font-size: 18px;
+      display: flex;
+      flex-flow: column nowrap;
+      justify-content: center;
+      text-align: left;
+    }
+    .weather{
+      display: flex;
+      flex-flow: row nowrap;
+      height: 100%;
+      align-items: center;
+      margin-left: 36px;
+      .pic{
+        width: 61px;
+        height: 61px;
+      }
+      .date{
+        height: 100%;
+        color: #ffffff;
+        font-size: 18px;
+        display: flex;
+        flex-flow: column nowrap;
+        justify-content: center;
+        margin-left: 19px;
+        text-align: left;
+      }
+    }
+  }
+}
+.content {
+  width: 100%;
+  height: calc(100% - 100px);
+      display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+</style>
diff --git a/src/api/index.js b/src/api/index.js
index 4838a02..808cdb4 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,69 +1,75 @@
-import axios from 'axios'
-// if (process.env.NODE_ENV === 'development') {
-//     axios.defaults.baseURL = '/api'
-// } else if (process.env.NODE_ENV === 'production') {
-//     axios.defaults.baseURL = '/api'
-// }
-//设置请求头参数 common 为设置所有的接口  post为设置post请求的接口
-// axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
-
-// 电力概况
-export const getCompanyInfo = (params) => {
-    return axios.get('api/Handler/Company.ashx', {
-        params
-    })
-};
-// 路线查询  下拉
-export const getLine = (params) => {
-    return axios.get('api/Handler/Line.ashx', {
-        params
-    })
-};
-// 查询设备素材
-export const getDevice = (params) => {
-    return axios.get('api/Handler/Device.ashx', {
-        params
-    })
-};
-//班组故障查询
-export const getBanzugz = (params) => {
-    return axios.get('api/Handler/Banzugz.ashx', {
-        params
-    })
-};
-//查询工单统计
-export const getGdtj = (params) => {
-    return axios.get('api/Handler/gdtj.ashx', {
-        params
-    })
-};
-//查询单位本周故障
-export const getDwbzgz = (params) => {
-    return axios.get('api/Handler/Dwbzgz.ashx', {
-        params
-    })
-};
-//查询供电所供电质量情况
-export const getGdsgdzl = (params) => {
-    return axios.get('api/Handler/Gdsgdzl.ashx', {
-        params
-    })
-};
-//查询配变停运情况
-export const getPbtyqk = (params) => {
-    return axios.get('api/Handler/Pbtyqk.ashx', {
-        params
-    })
-};
-// //查询天气
-// export const getWather = (params) => {
-//     return axios.get('aps/weather/prediction/', {
-//         params
-//     })
-// };
-//查询天气
-export const Weather = (params) => {
-    return axios.get('api/Handler/Weather.ashx', {
-        params
-    })
+import axios from 'axios'
+// if (process.env.NODE_ENV === 'development') {
+//     axios.defaults.baseURL = '/api'
+// } else if (process.env.NODE_ENV === 'production') {
+//     axios.defaults.baseURL = '/api'
+// }
+//设置请求头参数 common 为设置所有的接口  post为设置post请求的接口
+// axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
+
+// 电力概况
+export const getCompanyInfo = (params) => {
+    return axios.get('api/Handler/Company.ashx', {
+        params
+    })
+};
+// 路线查询  下拉
+export const getLine = (params) => {
+    return axios.get('api/Handler/Line.ashx', {
+        params
+    })
+};
+// 查询设备素材
+export const getDevice = (params) => {
+    return axios.get('api/Handler/Device.ashx', {
+        params
+    })
+};
+//班组故障查询
+export const getBanzugz = (params) => {
+    return axios.get('api/Handler/Banzugz.ashx', {
+        params
+    })
+};
+//查询工单统计
+export const getGdtj = (params) => {
+    return axios.get('api/Handler/gdtj.ashx', {
+        params
+    })
+};
+//查询单位本周故障
+export const getDwbzgz = (params) => {
+    return axios.get('api/Handler/Dwbzgz.ashx', {
+        params
+    })
+};
+//查询供电所供电质量情况
+export const getGdsgdzl = (params) => {
+    return axios.get('api/Handler/Gdsgdzl.ashx', {
+        params
+    })
+};
+//查询配变停运情况
+export const getPbtyqk = (params) => {
+    return axios.get('api/Handler/Pbtyqk.ashx', {
+        params
+    })
+};
+// //查询天气
+// export const getWather = (params) => {
+//     return axios.get('aps/weather/prediction/', {
+//         params
+//     })
+// };
+//查询天气
+// export const Weather = (params) => {
+//     return axios.get('api/Handler/Weather.ashx', {
+//         params
+//     })
+// };
+//查询天气1
+export const Weather = (params) => {
+    return axios.get('api/Handler/Data.ashx', {
+        params
+    })
 };
\ No newline at end of file
diff --git a/src/assets/videos/1667823525562.mp4 b/src/assets/videos/1667823525562.mp4
new file mode 100644
index 0000000..24f69be
Binary files /dev/null and b/src/assets/videos/1667823525562.mp4 differ
diff --git a/src/views/index.vue b/src/views/index.vue
index a69839a..efed98a 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,2069 +1,2069 @@
-<template>
-  <div class="home">
-    <div class="left">
-      <div class="one" style="height: 405px">
-        <div class="cartitle">
-          <div class="titleFont">盐都区供电公司概况</div></div>
-        <div class="content">
-          <div class="line">
-            <div class="total">
-              <div class="pic">
-                <img src="@/assets/images/rouer.png" alt="" />
-              </div>
-              <div class="num">
-                <span style="font-size: 45px; font-weight: 600; 
-                color: transparent;
-                -webkit-background-clip: text;
-                background-clip: text;
-                background-image: linear-gradient(to bottom, rgb(189,255,231), rgb(86,244,254));"
-                >304</span>
-                <span style="font-size: 18px;">配电路线</span>
-              </div>
-            </div>
-            <div class="info">
-              <div class="lists">
-                <div class="title">电缆化率</div>
-                <div class="number">43.6%</div>
-              </div>
-              <div class="lists">
-                <div class="title">配电站开关</div>
-                <div class="number">169</div>
-              </div>
-              <div class="lists">
-                <div class="title">配电室</div>
-                <div class="number">579</div>
-              </div>
-              <div class="lists">
-                <div class="title">户外环网柜</div>
-                <div class="number">1440</div>
-              </div>
-            </div>
-          </div>
-          <div class="line">
-            <div class="total">
-              <div class="pic">
-                <img src="@/assets/images/routerLong.png" alt="" />
-              </div>
-              <div class="num">
-                <span style="font-size: 45px; font-weight: 600;
-                color: transparent;
-                -webkit-background-clip: text;
-                background-clip: text;
-                background-image: linear-gradient(to bottom, rgb(189,255,231), rgb(86,244,254));
-                ">4128</span>
-                <span style="font-size: 18px">路线长度</span>
-              </div>
-            </div>
-            <div class="info">
-              <div class="lists">
-                <div class="title">架空路线</div>
-                <div class="number">2328</div>
-              </div>
-              <div class="lists">
-                <div class="title">架空绝缘导线</div>
-                <div class="number">2012.6</div>
-              </div>
-              <div class="lists">
-                <div class="title">架空绝缘化率</div>
-                <div class="number">86.45%</div>
-              </div>
-              <div class="lists">
-                <div class="title">电缆路线</div>
-                <div class="number">1800</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="two" style="height: 570px">
-        <div class="cartitle">
-          <div class="titleFont">
-            全市本周配网故障次数
-          </div>
-        </div>
-        <div class="table user_skills">
-          <el-table
-            :data="tableData"
-            style="width: 100%; height: 100%"
-            :header-cell-style="{ 'text-align': 'center' }"
-            :cell-style="{ 'text-align': 'center' }"
-            
-          >
-            <el-table-column label="" align="center" width="20">
-              <template slot-scope="scop">
-                {{ scop.$index + 1 }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="bz" label="班组" width="80" :show-overflow-tooltip="true">
-            </el-table-column>
-            <el-table-column prop="gzxl" label="故障路线" width="80" :show-overflow-tooltip="true">
-            </el-table-column>
-            <el-table-column prop="gzyy" label="故障原因" width="80" :show-overflow-tooltip="true">
-            </el-table-column>
-            <el-table-column prop="chcg" label="重合成功" width="60">
-              <template slot-scope="scope">
-                <div style="color:#ffbc3a">
-                {{ scope.row.chcg}}
-                 </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="chbc" label="重合不成" width="80">
-               <template slot-scope="scope">
-                <div style="color:#ffbc3a">
-                {{ scope.row.chbc}}
-                 </div>
-              </template>
-            </el-table-column>
-            <el-table-column prop="wchz" label="无重合闸" width="60">
-               <template slot-scope="scope">
-                <div style="color:#2793ff">
-                {{ scope.row.wchz}}
-                 </div>
-               </template>
-            </el-table-column>
-            <el-table-column prop="jiedi" label="接地" width="60">
-              <template slot-scope="scope">
-                <div style="color:#794af8">
-                {{ scope.row.jiedi}}
-                 </div>
-               </template>
-            </el-table-column>
-            <el-table-column prop="heji" label="合计" width="60">
-               <template slot-scope="scope">
-                <div style="color:#ee8316">
-                {{ scope.row.heji}}
-                 </div>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
-      </div>
-    </div>
-    <div class="middle">
-      <div class="one" style="height: 635px; width: 100%">
-          <iframe src="/unityWeb/index.html" style="height: 100%; width: 100%;border: none" 
-          ref="iframe"></iframe>
-        <div class="unityBtn">
-          <div
-            class="btn"
-            :class="{ btnAct: btnActive == index }"
-            v-for="(item, index) in btnArr"
-            :key="index"
-            @click="handleUnity(index,item)"
-          >
-            {{ item }}
-          </div>
-        </div>
-        <div class="unityIcon">
-          <div class="unityIconGround" v-for="(item,index) in iconGround" :key="index">
-            <img :src="item.icon"/>
-            <div style="color:#ffffff">{{item.name}}</div>
-          </div>
-        </div>
-        <div class="unityEnlargeBtn">
-          <div class="content" v-for="(item,index) in btnEnlarge" :key="index" @click="enlargeBtn(index)">
-            <img :src="item.icon" style="margin:7px"/>
-          </div>
-        </div>
-        <div class="unitySelect">
-          <div class="unitySuosou">
-            <img src="../assets/images/sousuo.png" style="margin-top: 16px;"/>
-          </div>
-          <el-select v-model="value" clearable  placeholder="请选择线路" >
-            <el-option
-              v-for="(item,index) in options"
-              :key="index"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-        </div>
-      </div>
-      <div class="detailed">
-        <div class="two" style="height: 350px; width: 780px;display: flex;flex-direction: column;align-items: center;">
-          <div class="cartitle">
-            <div class="titleFont">
-            本周路线故障跳闸明细
-            </div>
-          </div>
-          <div class="detailedOneList">
-          <div>
-            单位
-          </div>
-          <!-- <div>
-            工区
-          </div>
-          <div>
-            三新
-          </div>
-          <div>
-            盐都
-          </div>
-          <div>
-            滨海
-          </div>
-          <div>
-            大丰
-          </div>
-          <div>
-            东台
-          </div>
-          <div>
-            阜宁
-          </div>
-          <div>
-            建湖
-          </div>
-          <div>
-            射阳
-          </div>
-          <div>
-            响水
-          </div> -->
-         </div>
-          <div id="detailedOne" style="height:90%"></div>
-        </div>
-        <div class="three" style="height: 350px; width: 780px">
-          <div class="cartitle">
-            <div class="titleFont">
-            本年度路线故障调查明细</div>
-          </div>
-          <div id="detailedFour"></div>
-        </div>
-      </div>
-    </div>
-    <div class="right">
-      <div class="one" style="height: 310px">
-        <div class="cartitle">
-          <div  style="width: 82%;display: flex;justify-content: space-between;align-items: center;">
-            <div class="titleFont">
-            盐都配变停运管理情况
-            </div>
-            <div class="dateSelect">
-            <div style="text-indent: 15px;" @click="handleDate(index)" :class="addColor(index)" v-for="(item,index) in dateList" :key="index">
-              {{item}}
-            </div>
-            </div>
-          </div>
-        </div>
-        <div class="top">
-          <div class="topContent" v-for="(item,index) in topContent" :key="index">
-            <div style="color:#ffffff">{{item.name}}</div>
-            <div style="color:rgb(86,254,226);font-size:22px">{{item.count}}</div>
-          </div>
-        </div>
-         <div style="height:90%" id="detailedFive"></div>
-      </div>
-      <div class="two" style="height: 340px">
-        <div class="cartitle">
-          <div class="titleFont">
-          盐都供电质量统计
-          </div>
-          </div>
-        <div id="detailedTwo"></div>
-      </div>
-      <div class="three" style="height: 310px">
-        <div class="cartitle">
-          <div class="titleFont">
-          工单统计
-          </div>
-        </div>
-        <div id="detailedThree"></div>
-      </div>
-    </div>
-    <div class="realTimeAlarm" v-show="realTimeAlarmShow">
-      <div class="content">
-        <img  src="../assets/images/baojing.png"/>
-        <div>都政线XXX环网柜间隔3发生局部放电故障</div>
-      </div>
-    </div>
-    <div class="alarmInformation" v-show="alarmInformationShow">
-      <div class="top">
-        <div class="title">报警详情信息</div>
-        <div class="close">
-            <img
-               @click="handleClose"
-                src="@/assets/images/close.png"
-                style="cursor: pointer"
-                />
-          </div>
-      </div>
-      <div class="content">
-         <div class="table user_skills">
-          <el-table
-            :data="alarmInformationData"
-            style="width: 100%; height: 100%"
-            :header-cell-style="{ 'text-align': 'center' }"
-            :cell-style="{ 'text-align': 'center' }"
-            stripe
-          >
-            <el-table-column label="序号" align="center" >
-              <template slot-scope="scop">
-                {{ scop.$index + 1 }}
-              </template>
-            </el-table-column>
-            <el-table-column prop="name" label="报警信息" align="center" >
-            </el-table-column>
-            <el-table-column prop="date" label="发生时间" align="center" >
-            </el-table-column>
-          </el-table>
-        </div>
-      </div>
-     </div>
-    <!-- <div style="height:20px;width:20px" class="icon">
-        <img src="../assets/images/btnFangDa.png"/>
-      </div> -->
-     <div class="componentShow" v-if="modelOthers">
-      <keep-alive>
-        <component
-          :is="componentShow"
-          :ringMainUnit="device"
-        ></component>
-      </keep-alive>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getCompanyInfo,getLine,getBanzugz,getGdtj,getDwbzgz,getGdsgdzl,getPbtyqk} from "../api/index.js";
-import ringMainUnit from  "./HomePop/ringMainUnit.vue"
-export default {
-  name: "home",
-  components: {
-     ringMainUnit,//环网柜弹窗
-  },
-  data() {
-    return {
-      dataGzList:[], //年故障数组
-      dateList: ['周','月'],
-      acolor: true,//是否展示颜色
-      currentIndex : -1,
-      alarmInformationData:[
-      {
-        name:'告警信息',
-        date:'2022'
-      }],
-      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"),
-      }
-      ],
-       options: [
-         {
-           value:'',
-           label:''
-         }
-       ],
-        value: '',
-        topContent:[
-          {
-            name:'配变数量',
-            count:''
-          },
-          {
-            name:'重复停运台次',
-            count:''
-          },
-          {
-            name:'配变重复停运率',
-            count:''
-          },
-        ],
-        device:''
-    };
-  },
-  mounted() {
-    // 盐都区供电公司概况
-    getCompanyInfo().then((res) => {
-      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);
-    })
-    //年度查询班组
-    getBanzugz(
-      {
-        action: 'year'
-      }
-    ).then((res)=>{
-       this.dataGzList=res.data.data
-        this.detailedFour(this.dataGzList);
-    })
-    //本周故障
-    getDwbzgz().then((res)=>{
-      let dataBzgz = []
-      dataBzgz = res.data.data;
-      this.detailedOne(dataBzgz);
-    })
-    //供电质量统计
-    getGdsgdzl().then((res)=>{
-      let dataGdzl = []
-      dataGdzl = res.data.data
-      this.detailedTwo(dataGdzl);
-    })
-    // //配变停运
-    // getPbtyqk({
-    //   action:"week"
-    // }).then((res)=>{
-    //   let dataPbty = [];
-    //   dataPbty = res.data.data
-    //   console.log(dataPbty,'dataPbty');
-    //   this.detailedFive(dataPbty);
-    //   let dataPb = [];
-    //   let dataCf = [];
-    //   let dataCfl = [];
-    //   for (let i = 0; i < dataPbty.length; i++) {
-    //     dataPb.push(dataPbty[i].pbsl);
-    //     dataCf.push(dataPbty[i].cftytc);
-    //     dataCfl.push(dataPbty[i].pbcftyl)
-    //   }
-    //   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 +'%'
-    //   }
-    // })
-    this.handleDate(0);
-    let that = this;
-     window.addEventListener('message', function (e) {
-      var res = e.data;
-      if (res.val != null) {
-      that.modelOthers = true
-      that.componentShow = 'ringMainUnit'
-      that.device = res.val
-      }
-      })
-  },
-  
-  methods: {
-    //调用unity方法
-    handleUnity(index,item) {
-      this.btnActive = index;
-      this.$refs.iframe.contentWindow.handleChange(item)
-    },
-    //选择线路
-    selectLine(value){
-      getLine(
-        {
-          action:'query',
-          line_code:value
-        }
-      ).then((res)=>{
-        if (res.data.data != 0) {
-          this.$refs.iframe.contentWindow.handleChangeLine(res.data.data.line_name)
-        }
-      })
-    },
-    detailedOne(dataBzgz) {
-      let dataList = [];
-      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)
-      }
-      var myChart = this.$echarts.init(document.getElementById("detailedOne"));
-      var option = {
-        tooltip: {
-          show:true,
-          trigger: "axis",
-          axisPointer: {
-            type: "shadow",
-          },
-        },
-        grid: {
-          top:'18%',
-          left: "5%",
-          right: "3%",
-          bottom: "8%",
-          containLabel: true,
-        },
-        
-        xAxis: [
-          {
-            type: "category",
-            data: dataDw,
-            axisTick: {
-              show:false,
-              alignWithLabel: true,
-            },
-            axisLabel:{
-              color:'#ffffff',
-              interval: 0,
-            },
-            axisLine: {
-              show: false, //隐藏X轴轴线
-              lineStyle: {
-             color: "#01FCE3",
-              },
-          },
-          },
-        ],
-        yAxis: [
-          {
-            name:'故障次数',
-            type: "value",
-            data:[0,2,4,6,8,10],
-            nameTextStyle:{
-              color:'#ffffff',
-              // padding:[25,0,0,0]
-            },
-            axisLabel:{
-              color:'#ffffff'
-            },
-            splitLine:{
-              show:true,
-               lineStyle: {
-                type: 'solid',
-                // color: 'rgba(66, 192, 255, .3)',
-                color: 'rgba(102,102,102,0.6)',
-                width: 1
-                // color: 'red'
-              },
-            },
-            splitArea: {
-              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
-          },
-          {
-            name: "Direct",
-            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)'}
-                        ]
-                    )
-            },
-             data: dataList,
-            label: {
-                show: false,
-                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;
-      var myChart = this.$echarts.init(document.getElementById("detailedTwo"));
-      var option = {
-        tooltip : {
-        trigger: 'axis',
-            axisPointer: {
-              type: 'cross',
-              label: {
-                backgroundColor: '#6a7985'
-            }
-          }
-        },
-         grid: {
-          left: "4%",
-          right: "4%",
-          bottom: "10%",
-          containLabel: true,
-        },
-          legend: {
-            icon:'rect',
-            right:25,
-            data: ["线路重超载", "配变重超载", "低电压"],
-            textStyle: {
-              color: "#fff",
-              fontSize: 16,
-            },
-          },
-        xAxis: {
-          type: "category",
-          data: gdsList,
-          axisLine: {
-            //  改变x轴颜色
-            lineStyle: {
-              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: {
-        //  改变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% 处的颜色
-            },
-            {
-              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 = [{
-          value: dataList.pftd,
-          name: "频繁停电",
-        },
-        {
-          value: dataList.dctd,
-          name: "多次停电",
-        },
-        {
-          value: dataList.clsjc,
-          name: "处理时间长",
-        },
-        {
-          value: dataList.mspc,
-          name: "民事赔偿",
-        },]
-      var myChart = this.$echarts.init(document.getElementById("detailedThree"));
-    var  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:'频繁停电'
-          },
-          {
-            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')
-        },
-        
-        textStyle: {
-          color:'#ffffff'
-        }
-  },
-      series: [
-        
-        {
-          name: "整体分类",
-          type: "pie",
-          radius: [0, "40%"],
-          label: {
-            position: "inner",
-            show:false
-          },
-          
-          itemStyle: {
-            normal: {
-              borderColor: "none",
-              borderWidth: 2,
-              color: function (params) {
-                return colorList[params.dataIndex];
-              },
-            },
-          },
-
-      selectedMode: "single",
-      data: dataList,
-    },
-    {
-      name: "招标方式",
-      type: "pie",
-      radius: ["50%", "55%"],
-
-      itemStyle: {
-        normal: {
-          color: function (params) {
-            return colorList[params.dataIndex];
-          },
-        },
-      },
-      label: {
-        normal: {
-          formatter: function (params) {
-            if (params.value != 0)
-              return params.data.name + ":" + params.data.type + "个";
-            else return "";
-          },
-          color:"#ffffff",
-          show: true,
-        },
-      },
-
-      data: [
-        {
-          value: equipment[0],
-          name: "运检类投诉",
-          type: equipment[0],
-        },
-        {
-          value: equipment[1],
-          name: "运检类意见",
-          type: equipment[1],
-        },
-       
-      ],
-    },
-     ],
-   };
-      myChart.setOption(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)
-      }
-        let that = this
-      var myChart = this.$echarts.init(document.getElementById("detailedFour"));
-      var option = {
-      tooltip: {
-        axisPointer: {
-          type: "shadow",
-          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: ["重合成功", "重合不成", "无重合闸","接地"],
-  },
-  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)",
-            },
-            {
-              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)",
-            },
-          ]),
-        },
-      },
-      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)",
-            },
-            {
-              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)",
-            },
-          ]),
-        },
-      },
-      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)",
-            },
-            {
-              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,
-        },
-      },
-      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)",
-            },
-            {
-              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){
-      let dataListx = [];
-      let dataPb = [];
-      let dataGz = [];
-      let dataCf = [];
-      for (let i = 0; i < dataPbty.length; i++) {
-        dataListx.push(dataPbty[i].gds);
-        dataGz.push(dataPbty[i].gztytc);
-        dataPb.push(dataPbty[i].pbsl);
-        dataCf.push(dataPbty[i].cftytc);
-      }
-      let that = this;
-     var myChart = this.$echarts.init(document.getElementById("detailedFive"));
-    var option = {
-  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",
-        },
-      },
-      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, //显示所有图形。
-     
-      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)",
-      // },
-      data: dataGz,
-    },
-    {
-      name: "重复停运",
-      type: "line",
-      yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
-      smooth: false, //平滑曲线显示
-      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,
-    },
-    {
-      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){
-      if (index == 0) {
-        this.alarmInformationShow = true;
-        this.realTimeAlarmShow = false;
-      }else if (index == 1) {
-         this.$refs.iframe.contentWindow.fullscreen(1);
-      }
-    },
-    handleClose(){
-      this.alarmInformationShow = false
-    },
-    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 +'%'
-          }
-        })
-      // }else if (index == 1) {
-      //   //月配变停运
-      //   getPbtyqk({
-      //     action:"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 +'%'
-      //     }
-      //   })
-      // }
-    },
-    addColor(index){
-      if(this.currentIndex == index) {
-          return {active : this.acolor}
-      }
-    }
-  },
-  watch: {
-       //监听内容
-       value(newVal,oldVal) {
-        console.log(newVal,oldVal,"value发生了变化");
-        if (newVal != oldVal && newVal != '') {
-          this.selectLine(newVal)
-        }else if(newVal == ''){
-          console.log(this.value,"value");
-          this.value = ''
-          let item = '总览'
-          this.handleUnity(0,item)
-        }
-      }
-    }
-};
-</script>
-<style lang="less" scoped>
-.user_skills {
-  /deep/ .el-table {
-    background-color: transparent !important;
-  }
-  /deep/ .el-table th {
-    background-color: transparent !important;
-  }
-  /deep/ .el-table__header {
-    height: 48px;
-    background: url("../assets/images/tableBg.png") no-repeat;
-  }
-  /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 !important;
-  }
-  /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 !important;
-    // word-break: break-all;
-  }
-  /deep/ .el-table th.el-table__cell>.cell{
-    color: rgb(86,254,226);
-  }
-  &::before {
-    //去除底部白线
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 0px;
-  }
-}
-
-.home {
-  width: 100%;
-  height: 100%;
-  padding: 15px 28px;
-  display: flex;
-  flex-flow: row nowrap;
-  justify-content: space-between;
-  box-sizing: border-box;
-  .left {
-    width: 604px;
-    height: 100%;
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: space-between;
-    & > div {
-      width: 100%;
-      background: url("../assets/images/homeCard.png") no-repeat;
-      background-size: 100% 100%;
-      .cartitle {
-        height: 52px;
-        width: 100%;
-        background: url("../assets/images/carTitle.png") no-repeat;
-        font-size: 21px;
-        font-weight: 600;
-        color: #ffffff;
-        line-height: 52px;
-        text-align: left;
-        text-indent: 26px;
-      }
-      .content {
-        padding: 24px 31px 0 31px;
-        box-sizing: border-box;
-        display: flex;
-        flex-flow: row nowrap;
-        justify-content: space-between;
-        .line {
-          width: 262px;
-          display: flex;
-          flex-flow: column nowrap;
-          .total {
-            display: flex;
-            flex-flow: row nowrap;
-            justify-content: space-around;
-            margin-bottom: 20px;
-            .num {
-              display: flex;
-              flex-flow: column nowrap;
-              justify-content: center;
-              align-items: center;
-              color: #ffffff;
-            }
-          }
-          .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: 12px;
-              padding: 0 10px 0 0;
-              box-sizing: border-box;
-              & > div {
-                font-size: 18px;
-                color: #ffffff;
-              }
-              .number{
-                color: rgb(86,254,226);
-              }
-            }
-          }
-        }
-      }
-      .table {
-        width: 100%;
-        padding: 20px 14px 0 14px;
-        box-sizing: border-box;
-        height: calc(100% - 52px);
-      }
-    }
-  }
-  .middle {
-    width: 1590px;
-    height: 100%;
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: space-between;
-    .one {
-      background: url("../assets/images/ditu.png") no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      .unityBtn {
-        position: absolute;
-        top: 40px;
-        left: 40px;
-        width: 94px;
-        .btn {
-          width: 100%;
-          height: 38px;
-          color: rgb(28, 95, 98);
-          font-size: 18px;
-          line-height: 38px;
-          background: url("../assets/images/btnAct.png") no-repeat;
-          margin-bottom: 10px;
-        }
-        .btnAct {
-          color: #ffffff;
-          background: url("../assets/images/unityBtn.png") no-repeat;
-        }
-      }
-      .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;
-        bottom: 40px;
-        display: flex;
-        align-items: center;
-        .unitySuosou{
-          width: 57px;
-          height: 53px;
-          background: url("../assets/images/sousuoKuang.png") no-repeat ;
-          background-size: 100% 100%;
-        }
-        
-       };
-    }
-      
-      .two{
-      .detailedOneList{
-       display: flex;
-        flex-direction: row;
-        justify-content: flex-start;
-        height: 10%;
-        align-items: center;
-        color:#ffffff;
-        background: url("../assets/images/tableBg.png") no-repeat;
-        background-size: 100% 100%;
-        width:92%;
-        z-index: 1;
-        position: relative;
-     }
-    }
-      
-    .detailed {
-      display: flex;
-      flex-flow: row nowrap;
-      justify-content: space-between;
-      & > div {
-        background: url("../assets/images/detailedCard.png") no-repeat;
-        background-size: 100% 100%;
-        .cartitle {
-          height: 52px;
-          width: 100%;
-          background: url("../assets/images/detailed.png") no-repeat;
-          font-size: 21px;
-          font-weight: 600;
-          color: #ffffff;
-          line-height: 52px;
-          text-align: left;
-          text-indent: 26px;
-        }
-      }
-    }
-    #detailedOne{
-      width: 100%;
-      height: calc(100% - 0px) !important;
-      z-index: 2;
-      margin-top: -3%;
-    };
-    #detailedFour{
-      width: 100%;
-      height: calc(100% - 52px);
-    }
-  }
-  .right {
-    width: 604px;
-    height: 100%;
-    display: flex;
-    flex-flow: column nowrap;
-    justify-content: space-between;
-    & > div {
-      width: 100%;
-      background: url("../assets/images/homeCard.png") no-repeat;
-      background-size: 100% 100%;
-      .cartitle {
-        height: 52px;
-        width: 100%;
-        background: url("../assets/images/carTitle.png") no-repeat;
-        font-size: 21px;
-        font-weight: 600;
-        color: #ffffff;
-        line-height: 52px;
-        text-align: left;
-        text-indent: 26px;
-        
-      }
-    };
-   .one{
-     .top{
-        width: 100%;
-        height: 10%;
-        display: flex;
-        justify-content: space-around;
-        flex-direction: row;
-       align-items: center;
-       .topContent{
-            width: 30%;
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
-            white-space: nowrap;
-       }
-     }
-   }
- 
-    #detailedThree{
-      width: 100%;
-      height: calc(100% - 52px);
-    };
-    #detailedTwo{
-      width: 100%;
-      height: calc(100% - 52px);
-    };
-    #detailedFive{
-      width: 100%;
-      height: calc(100% - 52px);
-    };
-  };
-  .titleFont{
-      color: transparent ;
-      -webkit-background-clip: text;
-      background-clip: text ;
-      background-image: linear-gradient(to bottom, rgb(255,255,255), rgb(123,247,245))
-  }
-  //弹窗样式
-  .componentShow{
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 111;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(0, 0, 0, 0.8);
-  }
-  .realTimeAlarm{
-    width: 517px;
-    height: 136px;
-    position: fixed;
-    left: 0;
-    right: 0;
-    margin:0 auto;
-    top: 40%;
-    background: url('../assets/images/realTimeAlarmKuang.png') no-repeat;
-    background-size: 100% 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    .content{
-      color: #ffffff;
-      width: 75%;
-    display: flex;
-    align-items: center;
-    justify-content: space-evenly;
-    margin-top: 4%;
-    }
-  }
-  .alarmInformation{
-    width: 517px;
-    height: 304px;
-    position: fixed;
-    left: 0;
-    right: 0;
-    margin:0 auto;
-    top: 28%;
-    background: url('../assets/images/baojingxinxiKuang.png') no-repeat;
-    background-size: 100% 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    padding: 10px 13px;
-    .top{
-          height: 10%;
-          width: 91%;
-          display: flex;
-          align-content: flex-start;
-          justify-content: space-between;
-          .title{
-            font-size: 20px;
-            font-weight: 900;
-             color: transparent ;
-            -webkit-background-clip: text;
-            background-clip: text ;
-            background-image: linear-gradient(to bottom, rgb(255,255,255), rgb(86,244,254))
-          }
-    }
-    .content{
-      height: 85%;
-     width: 100%;
-     .user_skills {
-  /deep/ .el-table {
-    background-color: transparent !important;
-  }
-  /deep/ .el-table th {
-    background-color: transparent !important;
-  }
-  /deep/ .el-table__header {
-    height: 48px;
-    background: url("../assets/images/tableBg.png") no-repeat;
-    background-size: 100% 100%;
-  }
-  /deep/ .el-table__header th {
-    border: none;
-    padding: 0;
-    height: 40px;
-    .cell {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: space-around
-    }
-    &.el-table__cell.is-leaf {
-      border: none !important;
-    }
-  }
-  /deep/ .el-table tr {
-    background-color: transparent !important;
-  }
-  /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 !important;
-    // word-break: break-all;
-  }
-  /deep/ .el-table th.el-table__cell>.cell{
-    color: #FFFFFF;
-  }
-/deep/.el-table .el-table__cell{
-    padding: 3px 0
-}
-  &::before {
-    //去除底部白线
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    height: 0px;
-  }
-  .el-table::before{
-    background-color: transparent;
-  }
- 
-::v-deep .el-table .el-table__body tr.el-table__row td{
-  background: rgba(79, 218, 255, 0.1) !important;
-}
-::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td{
-  background: rgba(79, 218, 255, 0.06) !important;
-}
-}
- 
-    }
-  }
-  .dateSelect{
-    display: flex;
-    font-size:12px;
-    background: url("../assets/images/dateKuang.png") no-repeat;
-    background-size: 100% 100%;
-    height: 25px;
-    width: 61px;
-    align-items: center;
-  }
-  .active{
-    width: 32px;
-    height: 25px;
-    color: rgb(78,230,207);
-    background: url("../assets/images/dateAction.png") no-repeat;
-    background-size: 100% 100%;
-    line-height: 26px;
-    }
-}
-.icon{
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
-</style>
-<style lang="less">
-.el-select{
-    margin-left: -44px;
-    
-.el-input__inner{
-  background:url("../assets/images/selectCard.png") no-repeat;
-  background-size: 100% 100%;
-  border: none;
-  padding-left: 58px;
-}
- .el-input__prefix, .el-input__suffix {
-    position: absolute;
-    top: 0;
-    -webkit-transition: all .3s;
-    height: 100%;
-    text-align: center;
-    margin-right: 17px;
-   
-}
- .el-input__inner::-webkit-input-placeholder{
-   color: rgb(78,230,207) // 初始化的文字颜色
-}
-.el-input__inner{
-  color: rgb(78,230,207);
-}
-
-}
-.el-select-dropdown{
-  background-color: rgba(14,30,46,0.5) !important;
-  border: 1px solid  rgba(45,143,148,0.5) !important ;
-  .el-select-dropdown__item{
-    color: rgb(78,230,207) !important;
-  }
-  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
-    background-color: rgb(18,54,87) !important;
-}
-}
-/**
-表格有滚动效果但是不显示滚动条
-*/
-.table ::-webkit-scrollbar{
-   display:none;
-}
-</style>
+<template>
+  <div class="home">
+    <div class="left">
+      <div class="one" style="height: 405px">
+        <div class="cartitle">
+          <div class="titleFont">盐都区供电公司概况</div></div>
+        <div class="content">
+          <div class="line">
+            <div class="total">
+              <div class="pic">
+                <img src="@/assets/images/rouer.png" alt="" />
+              </div>
+              <div class="num">
+                <span style="font-size: 45px; font-weight: 600; 
+                color: transparent;
+                -webkit-background-clip: text;
+                background-clip: text;
+                background-image: linear-gradient(to bottom, rgb(189,255,231), rgb(86,244,254));"
+                >{{CompanyInfo.pdxl}}</span>
+                <span style="font-size: 18px;">配电路线</span>
+              </div>
+            </div>
+            <div class="info">
+              <div class="lists">
+                <div class="title">电缆化率</div>
+                <div class="number">{{CompanyInfo.dlhl}}</div>
+              </div>
+              <div class="lists">
+                <div class="title">配电站开关</div>
+                <div class="number">{{CompanyInfo.pdkgz}}</div>
+              </div>
+              <div class="lists">
+                <div class="title">配电室</div>
+                <div class="number">{{CompanyInfo.pds}}</div>
+              </div>
+              <div class="lists">
+                <div class="title">户外环网柜</div>
+                <div class="number">{{CompanyInfo.hwhwg}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="line">
+            <div class="total">
+              <div class="pic">
+                <img src="@/assets/images/routerLong.png" alt="" />
+              </div>
+              <div class="num">
+                <span style="font-size: 45px; font-weight: 600;
+                color: transparent;
+                -webkit-background-clip: text;
+                background-clip: text;
+                background-image: linear-gradient(to bottom, rgb(189,255,231), rgb(86,244,254));
+                ">{{CompanyInfo.xlcd}}</span>
+                <span style="font-size: 18px">路线长度</span>
+              </div>
+            </div>
+            <div class="info">
+              <div class="lists">
+                <div class="title">架空路线</div>
+                <div class="number">{{CompanyInfo.jkxl}}</div>
+              </div>
+              <div class="lists">
+                <div class="title">架空绝缘导线</div>
+                <div class="number">{{CompanyInfo.jkjydx}}</div>
+              </div>
+              <div class="lists">
+                <div class="title">架空绝缘化率</div>
+                <div class="number">{{CompanyInfo.jkjyhl}}</div>
+              </div>
+              <div class="lists">
+                <div class="title">电缆路线</div>
+                <div class="number">{{CompanyInfo.dlxl}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="two" style="height: 570px">
+        <div class="cartitle">
+          <div class="titleFont">
+            全市本周配网故障次数
+          </div>
+        </div>
+        <div class="table user_skills">
+          <el-table
+            :data="tableData"
+            style="width: 100%; height: 100%"
+            :header-cell-style="{ 'text-align': 'center' }"
+            :cell-style="{ 'text-align': 'center' }"
+            
+          >
+            <el-table-column label="" align="center" width="20">
+              <template slot-scope="scop">
+                {{ scop.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="bz" label="班组" width="80" :show-overflow-tooltip="true">
+            </el-table-column>
+            <el-table-column prop="gzxl" label="故障路线" width="80" :show-overflow-tooltip="true">
+            </el-table-column>
+            <el-table-column prop="gzyy" label="故障原因" width="80" :show-overflow-tooltip="true">
+            </el-table-column>
+            <el-table-column prop="chcg" label="重合成功" width="60">
+              <template slot-scope="scope">
+                <div style="color:#ffbc3a">
+                {{ scope.row.chcg}}
+                 </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="chbc" label="重合不成" width="80">
+               <template slot-scope="scope">
+                <div style="color:#ffbc3a">
+                {{ scope.row.chbc}}
+                 </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="wchz" label="无重合闸" width="60">
+               <template slot-scope="scope">
+                <div style="color:#2793ff">
+                {{ scope.row.wchz}}
+                 </div>
+               </template>
+            </el-table-column>
+            <el-table-column prop="jiedi" label="接地" width="60">
+              <template slot-scope="scope">
+                <div style="color:#794af8">
+                {{ scope.row.jiedi}}
+                 </div>
+               </template>
+            </el-table-column>
+            <el-table-column prop="heji" label="合计" width="60">
+               <template slot-scope="scope">
+                <div style="color:#ee8316">
+                {{ scope.row.heji}}
+                 </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+    </div>
+    <div class="middle">
+      <div class="one" style="height: 635px; width: 100%">
+          <iframe src="/unityWeb/index.html" style="height: 100%; width: 100%;border: none" 
+          ref="iframe"></iframe>
+        <div class="unityBtn">
+          <div
+            class="btn"
+            :class="{ btnAct: btnActive == index }"
+            v-for="(item, index) in btnArr"
+            :key="index"
+            @click="handleUnity(index,item)"
+          >
+            {{ item }}
+          </div>
+        </div>
+        <div class="unityIcon">
+          <div class="unityIconGround" v-for="(item,index) in iconGround" :key="index">
+            <img :src="item.icon"/>
+            <div style="color:#ffffff">{{item.name}}</div>
+          </div>
+        </div>
+        <div class="unityEnlargeBtn">
+          <div class="content" v-for="(item,index) in btnEnlarge" :key="index" @click="enlargeBtn(index)">
+            <img :src="item.icon" style="margin:7px"/>
+          </div>
+        </div>
+        <div class="unitySelect">
+          <div class="unitySuosou">
+            <img src="../assets/images/sousuo.png" style="margin-top: 16px;"/>
+          </div>
+          <el-select v-model="value" clearable  placeholder="请选择线路" >
+            <el-option
+              v-for="(item,index) in options"
+              :key="index"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="detailed">
+        <div class="two" style="height: 350px; width: 780px;display: flex;flex-direction: column;align-items: center;">
+          <div class="cartitle">
+            <div class="titleFont">
+            本周路线故障跳闸明细
+            </div>
+          </div>
+          <div class="detailedOneList">
+          <div>
+            单位
+          </div>
+          <!-- <div>
+            工区
+          </div>
+          <div>
+            三新
+          </div>
+          <div>
+            盐都
+          </div>
+          <div>
+            滨海
+          </div>
+          <div>
+            大丰
+          </div>
+          <div>
+            东台
+          </div>
+          <div>
+            阜宁
+          </div>
+          <div>
+            建湖
+          </div>
+          <div>
+            射阳
+          </div>
+          <div>
+            响水
+          </div> -->
+         </div>
+          <div id="detailedOne" style="height:90%"></div>
+        </div>
+        <div class="three" style="height: 350px; width: 780px">
+          <div class="cartitle">
+            <div class="titleFont">
+            本年度路线故障调查明细</div>
+          </div>
+          <div id="detailedFour"></div>
+        </div>
+      </div>
+    </div>
+    <div class="right">
+      <div class="one" style="height: 310px">
+        <div class="cartitle">
+          <div  style="width: 82%;display: flex;justify-content: space-between;align-items: center;">
+            <div class="titleFont">
+            盐都配变停运管理情况
+            </div>
+            <div class="dateSelect">
+            <div style="text-indent: 15px;" @click="handleDate(index)" :class="addColor(index)" v-for="(item,index) in dateList" :key="index">
+              {{item}}
+            </div>
+            </div>
+          </div>
+        </div>
+        <div class="top">
+          <div class="topContent" v-for="(item,index) in topContent" :key="index">
+            <div style="color:#ffffff">{{item.name}}</div>
+            <div style="color:rgb(86,254,226);font-size:22px">{{item.count}}</div>
+          </div>
+        </div>
+         <div style="height:90%" id="detailedFive"></div>
+      </div>
+      <div class="two" style="height: 340px">
+        <div class="cartitle">
+          <div class="titleFont">
+          盐都供电质量统计
+          </div>
+          </div>
+        <div id="detailedTwo"></div>
+      </div>
+      <div class="three" style="height: 310px">
+        <div class="cartitle">
+          <div class="titleFont">
+          工单统计
+          </div>
+        </div>
+        <div id="detailedThree"></div>
+      </div>
+    </div>
+    <div class="realTimeAlarm" v-show="realTimeAlarmShow">
+      <div class="content">
+        <img  src="../assets/images/baojing.png"/>
+        <div>都政线XXX环网柜间隔3发生局部放电故障</div>
+      </div>
+    </div>
+    <div class="alarmInformation" v-show="alarmInformationShow">
+      <div class="top">
+        <div class="title">报警详情信息</div>
+        <div class="close">
+            <img
+               @click="handleClose"
+                src="@/assets/images/close.png"
+                style="cursor: pointer"
+                />
+          </div>
+      </div>
+      <div class="content">
+         <div class="table user_skills">
+          <el-table
+            :data="alarmInformationData"
+            style="width: 100%; height: 100%"
+            :header-cell-style="{ 'text-align': 'center' }"
+            :cell-style="{ 'text-align': 'center' }"
+            stripe
+          >
+            <el-table-column label="序号" align="center" >
+              <template slot-scope="scop">
+                {{ scop.$index + 1 }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="name" label="报警信息" align="center" >
+            </el-table-column>
+            <el-table-column prop="date" label="发生时间" align="center" >
+            </el-table-column>
+          </el-table>
+        </div>
+      </div>
+     </div>
+    <!-- <div style="height:20px;width:20px" class="icon">
+        <img src="../assets/images/btnFangDa.png"/>
+      </div> -->
+     <div class="componentShow" v-if="modelOthers">
+      <keep-alive>
+        <component
+          :is="componentShow"
+          :ringMainUnit="device"
+        ></component>
+      </keep-alive>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCompanyInfo,getLine,getBanzugz,getGdtj,getDwbzgz,getGdsgdzl,getPbtyqk} from "../api/index.js";
+import ringMainUnit from  "./HomePop/ringMainUnit.vue"
+export default {
+  name: "home",
+  components: {
+     ringMainUnit,//环网柜弹窗
+  },
+  data() {
+    return {
+      dataGzList:[], //年故障数组
+      dateList: ['周','月'],
+      acolor: true,//是否展示颜色
+      currentIndex : -1,
+      alarmInformationData:[
+      {
+        name:'告警信息',
+        date:'2022'
+      }],
+      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"),
+      }
+      ],
+       options: [
+         {
+           value:'',
+           label:''
+         }
+       ],
+        value: '',
+        topContent:[
+          {
+            name:'配变数量',
+            count:''
+          },
+          {
+            name:'重复停运台次',
+            count:''
+          },
+          {
+            name:'配变重复停运率',
+            count:''
+          },
+        ],
+        device:''
+    };
+  },
+  mounted() {
+    // 盐都区供电公司概况
+    getCompanyInfo().then((res) => {
+      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);
+    })
+    //年度查询班组
+    getBanzugz(
+      {
+        action: 'year'
+      }
+    ).then((res)=>{
+       this.dataGzList=res.data.data
+        this.detailedFour(this.dataGzList);
+    })
+    //本周故障
+    getDwbzgz().then((res)=>{
+      let dataBzgz = []
+      dataBzgz = res.data.data;
+      this.detailedOne(dataBzgz);
+    })
+    //供电质量统计
+    getGdsgdzl().then((res)=>{
+      let dataGdzl = []
+      dataGdzl = res.data.data
+      this.detailedTwo(dataGdzl);
+    })
+    // //配变停运
+    // getPbtyqk({
+    //   action:"week"
+    // }).then((res)=>{
+    //   let dataPbty = [];
+    //   dataPbty = res.data.data
+    //   console.log(dataPbty,'dataPbty');
+    //   this.detailedFive(dataPbty);
+    //   let dataPb = [];
+    //   let dataCf = [];
+    //   let dataCfl = [];
+    //   for (let i = 0; i < dataPbty.length; i++) {
+    //     dataPb.push(dataPbty[i].pbsl);
+    //     dataCf.push(dataPbty[i].cftytc);
+    //     dataCfl.push(dataPbty[i].pbcftyl)
+    //   }
+    //   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 +'%'
+    //   }
+    // })
+    this.handleDate(0);
+    let that = this;
+     window.addEventListener('message', function (e) {
+      var res = e.data;
+      if (res.val != null) {
+      that.modelOthers = true
+      that.componentShow = 'ringMainUnit'
+      that.device = res.val
+      }
+      })
+  },
+  
+  methods: {
+    //调用unity方法
+    handleUnity(index,item) {
+      this.btnActive = index;
+      this.$refs.iframe.contentWindow.handleChange(item)
+    },
+    //选择线路
+    selectLine(value){
+      getLine(
+        {
+          action:'query',
+          line_code:value
+        }
+      ).then((res)=>{
+        if (res.data.data != 0) {
+          this.$refs.iframe.contentWindow.handleChangeLine(res.data.data.line_name)
+        }
+      })
+    },
+    detailedOne(dataBzgz) {
+      let dataList = [];
+      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)
+      }
+      var myChart = this.$echarts.init(document.getElementById("detailedOne"));
+      var option = {
+        tooltip: {
+          show:true,
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        grid: {
+          top:'18%',
+          left: "5%",
+          right: "3%",
+          bottom: "8%",
+          containLabel: true,
+        },
+        
+        xAxis: [
+          {
+            type: "category",
+            data: dataDw,
+            axisTick: {
+              show:false,
+              alignWithLabel: true,
+            },
+            axisLabel:{
+              color:'#ffffff',
+              interval: 0,
+            },
+            axisLine: {
+              show: false, //隐藏X轴轴线
+              lineStyle: {
+             color: "#01FCE3",
+              },
+          },
+          },
+        ],
+        yAxis: [
+          {
+            name:'故障次数',
+            type: "value",
+            data:[0,2,4,6,8,10],
+            nameTextStyle:{
+              color:'#ffffff',
+              // padding:[25,0,0,0]
+            },
+            axisLabel:{
+              color:'#ffffff'
+            },
+            splitLine:{
+              show:true,
+               lineStyle: {
+                type: 'solid',
+                // color: 'rgba(66, 192, 255, .3)',
+                color: 'rgba(102,102,102,0.6)',
+                width: 1
+                // color: 'red'
+              },
+            },
+            splitArea: {
+              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
+          },
+          {
+            name: "Direct",
+            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)'}
+                        ]
+                    )
+            },
+             data: dataList,
+            label: {
+                show: false,
+                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;
+      var myChart = this.$echarts.init(document.getElementById("detailedTwo"));
+      var option = {
+        tooltip : {
+        trigger: 'axis',
+            axisPointer: {
+              type: 'cross',
+              label: {
+                backgroundColor: '#6a7985'
+            }
+          }
+        },
+         grid: {
+          left: "4%",
+          right: "4%",
+          bottom: "10%",
+          containLabel: true,
+        },
+          legend: {
+            icon:'rect',
+            right:25,
+            data: ["线路重超载", "配变重超载", "低电压"],
+            textStyle: {
+              color: "#fff",
+              fontSize: 16,
+            },
+          },
+        xAxis: {
+          type: "category",
+          data: gdsList,
+          axisLine: {
+            //  改变x轴颜色
+            lineStyle: {
+              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: {
+        //  改变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% 处的颜色
+            },
+            {
+              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 = [{
+          value: dataList.pftd,
+          name: "频繁停电",
+        },
+        {
+          value: dataList.dctd,
+          name: "多次停电",
+        },
+        {
+          value: dataList.clsjc,
+          name: "处理时间长",
+        },
+        {
+          value: dataList.mspc,
+          name: "民事赔偿",
+        },]
+      var myChart = this.$echarts.init(document.getElementById("detailedThree"));
+    var  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:'频繁停电'
+          },
+          {
+            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')
+        },
+        
+        textStyle: {
+          color:'#ffffff'
+        }
+  },
+      series: [
+        
+        {
+          name: "整体分类",
+          type: "pie",
+          radius: [0, "40%"],
+          label: {
+            position: "inner",
+            show:false
+          },
+          
+          itemStyle: {
+            normal: {
+              borderColor: "none",
+              borderWidth: 2,
+              color: function (params) {
+                return colorList[params.dataIndex];
+              },
+            },
+          },
+
+      selectedMode: "single",
+      data: dataList,
+    },
+    {
+      name: "招标方式",
+      type: "pie",
+      radius: ["50%", "55%"],
+
+      itemStyle: {
+        normal: {
+          color: function (params) {
+            return colorList[params.dataIndex];
+          },
+        },
+      },
+      label: {
+        normal: {
+          formatter: function (params) {
+            if (params.value != 0)
+              return params.data.name + ":" + params.data.type + "个";
+            else return "";
+          },
+          color:"#ffffff",
+          show: true,
+        },
+      },
+
+      data: [
+        {
+          value: equipment[0],
+          name: "运检类投诉",
+          type: equipment[0],
+        },
+        {
+          value: equipment[1],
+          name: "运检类意见",
+          type: equipment[1],
+        },
+       
+      ],
+    },
+     ],
+   };
+      myChart.setOption(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)
+      }
+        let that = this
+      var myChart = this.$echarts.init(document.getElementById("detailedFour"));
+      var option = {
+      tooltip: {
+        axisPointer: {
+          type: "shadow",
+          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: ["重合成功", "重合不成", "无重合闸","接地"],
+  },
+  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)",
+            },
+            {
+              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)",
+            },
+          ]),
+        },
+      },
+      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)",
+            },
+            {
+              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)",
+            },
+          ]),
+        },
+      },
+      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)",
+            },
+            {
+              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,
+        },
+      },
+      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)",
+            },
+            {
+              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){
+      let dataListx = [];
+      let dataPb = [];
+      let dataGz = [];
+      let dataCf = [];
+      for (let i = 0; i < dataPbty.length; i++) {
+        dataListx.push(dataPbty[i].gds);
+        dataGz.push(dataPbty[i].gztytc);
+        dataPb.push(dataPbty[i].pbsl);
+        dataCf.push(dataPbty[i].cftytc);
+      }
+      let that = this;
+     var myChart = this.$echarts.init(document.getElementById("detailedFive"));
+    var option = {
+  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",
+        },
+      },
+      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, //显示所有图形。
+     
+      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)",
+      // },
+      data: dataGz,
+    },
+    {
+      name: "重复停运",
+      type: "line",
+      yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
+      smooth: false, //平滑曲线显示
+      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,
+    },
+    {
+      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){
+      if (index == 0) {
+        this.alarmInformationShow = true;
+        this.realTimeAlarmShow = false;
+      }else if (index == 1) {
+         this.$refs.iframe.contentWindow.fullscreen(1);
+      }
+    },
+    handleClose(){
+      this.alarmInformationShow = false
+    },
+    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 +'%'
+          }
+        })
+      // }else if (index == 1) {
+      //   //月配变停运
+      //   getPbtyqk({
+      //     action:"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 +'%'
+      //     }
+      //   })
+      // }
+    },
+    addColor(index){
+      if(this.currentIndex == index) {
+          return {active : this.acolor}
+      }
+    }
+  },
+  watch: {
+       //监听内容
+       value(newVal,oldVal) {
+        console.log(newVal,oldVal,"value发生了变化");
+        if (newVal != oldVal && newVal != '') {
+          this.selectLine(newVal)
+        }else if(newVal == ''){
+          console.log(this.value,"value");
+          this.value = ''
+          let item = '总览'
+          this.handleUnity(0,item)
+        }
+      }
+    }
+};
+</script>
+<style lang="less" scoped>
+.user_skills {
+  /deep/ .el-table {
+    background-color: transparent !important;
+  }
+  /deep/ .el-table th {
+    background-color: transparent !important;
+  }
+  /deep/ .el-table__header {
+    height: 48px;
+    background: url("../assets/images/tableBg.png") no-repeat;
+  }
+  /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 !important;
+  }
+  /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 !important;
+    // word-break: break-all;
+  }
+  /deep/ .el-table th.el-table__cell>.cell{
+    color: rgb(86,254,226);
+  }
+  &::before {
+    //去除底部白线
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 0px;
+  }
+}
+
+.home {
+  width: 100%;
+  height: 100%;
+  padding: 15px 28px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  box-sizing: border-box;
+  .left {
+    width: 604px;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    & > div {
+      width: 100%;
+      background: url("../assets/images/homeCard.png") no-repeat;
+      background-size: 100% 100%;
+      .cartitle {
+        height: 52px;
+        width: 100%;
+        background: url("../assets/images/carTitle.png") no-repeat;
+        font-size: 21px;
+        font-weight: 600;
+        color: #ffffff;
+        line-height: 52px;
+        text-align: left;
+        text-indent: 26px;
+      }
+      .content {
+        padding: 24px 31px 0 31px;
+        box-sizing: border-box;
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        .line {
+          width: 262px;
+          display: flex;
+          flex-flow: column nowrap;
+          .total {
+            display: flex;
+            flex-flow: row nowrap;
+            justify-content: space-around;
+            margin-bottom: 20px;
+            .num {
+              display: flex;
+              flex-flow: column nowrap;
+              justify-content: center;
+              align-items: center;
+              color: #ffffff;
+            }
+          }
+          .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: 12px;
+              padding: 0 10px 0 0;
+              box-sizing: border-box;
+              & > div {
+                font-size: 18px;
+                color: #ffffff;
+              }
+              .number{
+                color: rgb(86,254,226);
+              }
+            }
+          }
+        }
+      }
+      .table {
+        width: 100%;
+        padding: 20px 14px 0 14px;
+        box-sizing: border-box;
+        height: calc(100% - 52px);
+      }
+    }
+  }
+  .middle {
+    width: 1590px;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    .one {
+      background: url("../assets/images/ditu.png") no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      .unityBtn {
+        position: absolute;
+        top: 40px;
+        left: 40px;
+        width: 94px;
+        .btn {
+          width: 100%;
+          height: 38px;
+          color: rgb(28, 95, 98);
+          font-size: 18px;
+          line-height: 38px;
+          background: url("../assets/images/btnAct.png") no-repeat;
+          margin-bottom: 10px;
+        }
+        .btnAct {
+          color: #ffffff;
+          background: url("../assets/images/unityBtn.png") no-repeat;
+        }
+      }
+      .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;
+        bottom: 40px;
+        display: flex;
+        align-items: center;
+        .unitySuosou{
+          width: 57px;
+          height: 53px;
+          background: url("../assets/images/sousuoKuang.png") no-repeat ;
+          background-size: 100% 100%;
+        }
+        
+       };
+    }
+      
+      .two{
+      .detailedOneList{
+       display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        height: 10%;
+        align-items: center;
+        color:#ffffff;
+        background: url("../assets/images/tableBg.png") no-repeat;
+        background-size: 100% 100%;
+        width:92%;
+        z-index: 1;
+        position: relative;
+     }
+    }
+      
+    .detailed {
+      display: flex;
+      flex-flow: row nowrap;
+      justify-content: space-between;
+      & > div {
+        background: url("../assets/images/detailedCard.png") no-repeat;
+        background-size: 100% 100%;
+        .cartitle {
+          height: 52px;
+          width: 100%;
+          background: url("../assets/images/detailed.png") no-repeat;
+          font-size: 21px;
+          font-weight: 600;
+          color: #ffffff;
+          line-height: 52px;
+          text-align: left;
+          text-indent: 26px;
+        }
+      }
+    }
+    #detailedOne{
+      width: 100%;
+      height: calc(100% - 0px) !important;
+      z-index: 2;
+      margin-top: -3%;
+    };
+    #detailedFour{
+      width: 100%;
+      height: calc(100% - 52px);
+    }
+  }
+  .right {
+    width: 604px;
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: space-between;
+    & > div {
+      width: 100%;
+      background: url("../assets/images/homeCard.png") no-repeat;
+      background-size: 100% 100%;
+      .cartitle {
+        height: 52px;
+        width: 100%;
+        background: url("../assets/images/carTitle.png") no-repeat;
+        font-size: 21px;
+        font-weight: 600;
+        color: #ffffff;
+        line-height: 52px;
+        text-align: left;
+        text-indent: 26px;
+        
+      }
+    };
+   .one{
+     .top{
+        width: 100%;
+        height: 10%;
+        display: flex;
+        justify-content: space-around;
+        flex-direction: row;
+       align-items: center;
+       .topContent{
+            width: 30%;
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            white-space: nowrap;
+       }
+     }
+   }
+ 
+    #detailedThree{
+      width: 100%;
+      height: calc(100% - 52px);
+    };
+    #detailedTwo{
+      width: 100%;
+      height: calc(100% - 52px);
+    };
+    #detailedFive{
+      width: 100%;
+      height: calc(100% - 52px);
+    };
+  };
+  .titleFont{
+      color: transparent ;
+      -webkit-background-clip: text;
+      background-clip: text ;
+      background-image: linear-gradient(to bottom, rgb(255,255,255), rgb(123,247,245))
+  }
+  //弹窗样式
+  .componentShow{
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 111;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .realTimeAlarm{
+    width: 517px;
+    height: 136px;
+    position: fixed;
+    left: 0;
+    right: 0;
+    margin:0 auto;
+    top: 40%;
+    background: url('../assets/images/realTimeAlarmKuang.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .content{
+      color: #ffffff;
+      width: 75%;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+    margin-top: 4%;
+    }
+  }
+  .alarmInformation{
+    width: 517px;
+    height: 304px;
+    position: fixed;
+    left: 0;
+    right: 0;
+    margin:0 auto;
+    top: 28%;
+    background: url('../assets/images/baojingxinxiKuang.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding: 10px 13px;
+    .top{
+          height: 10%;
+          width: 91%;
+          display: flex;
+          align-content: flex-start;
+          justify-content: space-between;
+          .title{
+            font-size: 20px;
+            font-weight: 900;
+             color: transparent ;
+            -webkit-background-clip: text;
+            background-clip: text ;
+            background-image: linear-gradient(to bottom, rgb(255,255,255), rgb(86,244,254))
+          }
+    }
+    .content{
+      height: 85%;
+     width: 100%;
+     .user_skills {
+  /deep/ .el-table {
+    background-color: transparent !important;
+  }
+  /deep/ .el-table th {
+    background-color: transparent !important;
+  }
+  /deep/ .el-table__header {
+    height: 48px;
+    background: url("../assets/images/tableBg.png") no-repeat;
+    background-size: 100% 100%;
+  }
+  /deep/ .el-table__header th {
+    border: none;
+    padding: 0;
+    height: 40px;
+    .cell {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-around
+    }
+    &.el-table__cell.is-leaf {
+      border: none !important;
+    }
+  }
+  /deep/ .el-table tr {
+    background-color: transparent !important;
+  }
+  /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 !important;
+    // word-break: break-all;
+  }
+  /deep/ .el-table th.el-table__cell>.cell{
+    color: #FFFFFF;
+  }
+/deep/.el-table .el-table__cell{
+    padding: 3px 0
+}
+  &::before {
+    //去除底部白线
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 0px;
+  }
+  .el-table::before{
+    background-color: transparent;
+  }
+ 
+::v-deep .el-table .el-table__body tr.el-table__row td{
+  background: rgba(79, 218, 255, 0.1) !important;
+}
+::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td{
+  background: rgba(79, 218, 255, 0.06) !important;
+}
+}
+ 
+    }
+  }
+  .dateSelect{
+    display: flex;
+    font-size:12px;
+    background: url("../assets/images/dateKuang.png") no-repeat;
+    background-size: 100% 100%;
+    height: 25px;
+    width: 61px;
+    align-items: center;
+  }
+  .active{
+    width: 32px;
+    height: 25px;
+    color: rgb(78,230,207);
+    background: url("../assets/images/dateAction.png") no-repeat;
+    background-size: 100% 100%;
+    line-height: 26px;
+    }
+}
+.icon{
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+</style>
+<style lang="less">
+.el-select{
+    margin-left: -44px;
+    
+.el-input__inner{
+  background:url("../assets/images/selectCard.png") no-repeat;
+  background-size: 100% 100%;
+  border: none;
+  padding-left: 58px;
+}
+ .el-input__prefix, .el-input__suffix {
+    position: absolute;
+    top: 0;
+    -webkit-transition: all .3s;
+    height: 100%;
+    text-align: center;
+    margin-right: 17px;
+   
+}
+ .el-input__inner::-webkit-input-placeholder{
+   color: rgb(78,230,207) // 初始化的文字颜色
+}
+.el-input__inner{
+  color: rgb(78,230,207);
+}
+
+}
+.el-select-dropdown{
+  background-color: rgba(14,30,46,0.5) !important;
+  border: 1px solid  rgba(45,143,148,0.5) !important ;
+  .el-select-dropdown__item{
+    color: rgb(78,230,207) !important;
+  }
+  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+    background-color: rgb(18,54,87) !important;
+}
+}
+/**
+表格有滚动效果但是不显示滚动条
+*/
+.table ::-webkit-scrollbar{
+   display:none;
+}
+</style>
diff --git a/vue.config.js b/vue.config.js
index 8ab8349..d7c050b 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,37 +1,37 @@
-module.exports = {
-    // 打包文件配置
-    publicPath: "/",
-    assetsDir: "static",
-    lintOnSave: false,
-    devServer: {
-        // overlay: { // 让浏览器 overlay 同时显示警告和错误
-        //     warnings: true,
-        //     errors: true,
-        // },
-        // hotOnly: true,
-        // open: false, // npm run serve后自动打开页面
-        // https: false, // https:{type:Boolean}
-        // host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0)
-        // port: 8989, // 开发服务器运行端口号
-        proxy: {
-            '/api': { //代理的名字
-                target:'http://111.229.30.246:3111/',
-                // target: 'http://172.16.1.254:3111/', 
-                ws: true,
-                changeOrigin: true,
-                pathRewrite:{
-                    '^/api':'',
-                }
-            },
-            // '/aps': { //代理的名字
-            //     target:'http://www.jcznedu.com:5000/',
-            //     // target: 'http://172.16.1.254:3111/', 
-            //     ws: true,
-            //     changeOrigin: true,
-            //     pathRewrite:{
-            //         '^/aps':'',
-            //     }
-            // }
-        }
-    }
+module.exports = {
+    // 打包文件配置
+    publicPath: "/",
+    assetsDir: "static",
+    lintOnSave: false,
+    devServer: {
+        // overlay: { // 让浏览器 overlay 同时显示警告和错误
+        //     warnings: true,
+        //     errors: true,
+        // },
+        // hotOnly: true,
+        // open: false, // npm run serve后自动打开页面
+        // https: false, // https:{type:Boolean}
+        // host: "0.0.0.0", // 匹配本机IP地址(默认是0.0.0.0)
+        // port: 8989, // 开发服务器运行端口号
+        proxy: {
+            '/api': { //代理的名字
+                // target:'http://111.229.30.246:3111/',
+                target: 'http://172.16.1.254:3111/', 
+                ws: true,
+                changeOrigin: true,
+                pathRewrite:{
+                    '^/api':'',
+                }
+            },
+            // '/aps': { //代理的名字
+            //     target:'http://www.jcznedu.com:5000/',
+            //     // target: 'http://172.16.1.254:3111/', 
+            //     ws: true,
+            //     changeOrigin: true,
+            //     pathRewrite:{
+            //         '^/aps':'',
+            //     }
+            // }
+        }
+    }
 }
\ No newline at end of file