<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%" 
          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 class="screen">
          <div class="btn"></div>
          <div class="btn"></div>
        </div>
      </div>
      <div class="detailed">
        <div class="two" style="height: 350px; width: 780px">
          <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} 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);
    })
    this.detailedOne();
    this.detailedTwo();
    this.detailedFive();
    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() {
      let dataList = [1,1, 4, 6,5, 9, 4,5,0,3]
      var myChart = this.$echarts.init(document.getElementById("detailedOne"));
      var option = {
        tooltip: {
          show:false,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top:'10%',
          left: "5%",
          right: "3%",
          bottom: "24%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["工区", "三新", "盐都", "滨海", "大丰", "东台", "阜宁", "建湖", "射阳", "响水"],
            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,
            }
          },
        ],
        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:[100,100,100,100,100,100,100,100,100,100]
          },
          {
            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(){
     
       let that = this;
      var myChart = this.$echarts.init(document.getElementById("detailedTwo"));
      var option = {
        tooltip : {
        trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
            }
          }
        },
          legend: {
            icon:'rect',
            right:25,
            data: ["线路重超载", "配变重超载", "低电压"],
            textStyle: {
              color: "#fff",
              fontSize: 16,
            },
          },
        xAxis: {
          type: "category",
          data: ["盐都直属", "大冈", "大纵湖", "尚庄", "郭猛", "秦南", "西区","楼王","学富","潘黄","龙冈"],
          axisLine: {
            //  改变x轴颜色
            lineStyle: {
              color: "none",
            },
          },
      axisLabel: {
        //  改变x轴字体颜色和大小
        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: [0,6,5,7,5,6,9,10,9,11,11,13,15],
      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: [0,5,4,6,4,5,8,5,8,9,9,10,12],
      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: [0,4,3,5,2,4,7,4,7,8,7,9,10],
      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.type + ":" + 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)
      }
      console.log(yearBzData);
        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",
      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",
      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",
      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(){
      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: ["盐都直属", "大冈", "大纵湖", "尚庄", "郭猛", "秦南", "西区","楼王","学富","潘黄","龙冈"],
    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: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5,6,7,8,10],
    },
    {
      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: [2, 3, 4, 3, 2, 2, 3, 4,7,9,10,11,12],
    },
    {
      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: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5,8,10,13,14],
    },
  ],
};
      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
    },
    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: rgb(18,54,87);
     }
   }
    .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(90% - 52px);
    };
    #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;
}
}
</style>
