From 6661eb29616237258d3a07e39a2d83e829b79b66 Mon Sep 17 00:00:00 2001
From: lixiaobang <2547956374@qq.com>
Date: Thu, 10 Nov 2022 09:43:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue        |    4 +-
 src/views/Home.vue | 2029 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 2031 insertions(+), 2 deletions(-)
 create mode 100644 src/views/Home.vue

diff --git a/src/App.vue b/src/App.vue
index a60fe92..a0488d8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -52,8 +52,8 @@ export default {
       let that = this;
       this.routerActive = index
       if (this.routerActive == 0) {
-        if (this.$route.name != 'home') {
-          that.$router.push({name:'home'})
+        if (this.$route.name != 'index') {
+          that.$router.push({name:'index'})
         }
       }else if (this.routerActive == 3) {
         that.$router.push({name:'stationBuilding'})
diff --git a/src/views/Home.vue b/src/views/Home.vue
new file mode 100644
index 0000000..588693b
--- /dev/null
+++ b/src/views/Home.vue
@@ -0,0 +1,2029 @@
+<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 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:'6,573'
+          },
+          {
+            name:'重复停运台次',
+            count:'6,573'
+          },
+          {
+            name:'配变重复停运率',
+            count:'0.22%'
+          },
+        ],
+        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
+      this.detailedFive(dataPbty);
+      console.log(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)
+      console.log(dataCf.reduce((x, y) => x + y),'总数');
+    })
+    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;
+      console.log(item);
+      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:'15%',
+          left: "5%",
+          right: "3%",
+          bottom: "15%",
+          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'
+            },
+            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',
+            itemStyle:{
+              normal:{
+                label:{
+                   formatter(params){
+                  for (let i = 0; i < dataList.length; i++) {
+                    if (params.dataIndex == i) {
+                      return 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: "1%",
+          right: "3%",
+          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: 90,
+        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
+      }else if (index == 1) {
+         this.$refs.iframe.contentWindow.fullscreen(1);
+      }
+    },
+    handleClose(){
+      this.alarmInformationShow = false
+    },
+    handleDate(index){
+      this.currentIndex = index
+      if (index == 0) {
+        //周配变停运
+        getPbtyqk({
+          action:"week"
+        }).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)
+        })
+      }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)
+        })
+      }
+    },
+    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: space-evenly;
+        height: 10%;
+        align-items: center;
+        color:#ffffff;
+        background: url("../assets/images/tableBg.png") no-repeat;
+        background-size: 100% 100%;
+        width:96%;
+     }
+    }
+      
+    .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% - 87px) !important;
+    };
+    #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: space-around;
+            align-items: center
+       }
+     }
+   }
+ 
+    #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;
+    }
+}
+</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>