<template>
  <div class="home">
    <div class="left" id="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;
                    -webkit-background-clip: text;
                    background-clip: text;
                    background-image: linear-gradient(
                      to bottom,
                      rgb(189, 255, 231),
                      rgb(86, 244, 254)
                    );
                  "
                  class="numText"
                  :text="CompanyInfo.pdxl"
                  >{{ CompanyInfo.pdxl }}</span
                >
                <span style="font-size: 18px">配电路线</span>
              </div>
            </div>
            <div class="info">
              <div class="lists">
                <div class="title">电缆化率</div>
                <div class="number">{{ CompanyInfo.dlhl }}</div>
              </div>
              <div class="lists">
                <div class="title">配电站开关</div>
                <div class="number">{{ CompanyInfo.pdkgz }}</div>
              </div>
              <div class="lists">
                <div class="title">配电室</div>
                <div class="number">{{ CompanyInfo.pds }}</div>
              </div>
              <div class="lists">
                <div class="title">户外环网柜</div>
                <div class="number">{{ CompanyInfo.hwhwg }}</div>
              </div>
            </div>
          </div>
          <div class="line">
            <div class="total">
              <div class="pic">
                <img src="@/assets/images/routerLong.png" alt="" />
              </div>
              <div class="num">
                <span
                  style="
                    font-size: 45px;
                    font-weight: 600;
                    -webkit-background-clip: text;
                    background-clip: text;
                    background-image: linear-gradient(
                      to bottom,
                      rgb(189, 255, 231),
                      rgb(86, 244, 254)
                    );
                  "
                  class="numText"
                  :text="CompanyInfo.xlcd"
                  >{{ CompanyInfo.xlcd }}</span
                >
                <span style="font-size: 18px">路线长度</span>
              </div>
            </div>
            <div class="info">
              <div class="lists">
                <div class="title">架空路线</div>
                <div class="number">{{ CompanyInfo.jkxl }}</div>
              </div>
              <div class="lists">
                <div class="title">架空绝缘导线</div>
                <div class="number">{{ CompanyInfo.jkjydx }}</div>
              </div>
              <div class="lists">
                <div class="title">架空绝缘化率</div>
                <div class="number">{{ CompanyInfo.jkjyhl }}</div>
              </div>
              <div class="lists">
                <div class="title">电缆路线</div>
                <div class="number">{{ CompanyInfo.dlxl }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="two" style="height: 570px">
        <div class="cartitle">
          <div class="titleFont">全市本周配网故障次数</div>
        </div>
        <div class="table user_skills">
          <el-table
            :data="tableData"
            height="100%"
            width="100%"
            :header-cell-style="{ 'text-align': 'center' }"
            :cell-style="{ 'text-align': 'center' }"
            ref="tableBox"
            style="font-size: 16px"
          >
            <el-table-column label="" align="center" width="20">
              <template slot-scope="scop">
                {{ scop.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="bz"
              label="班组"
              width="90"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="gzxl"
              label="故障路线"
              width="90"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="gzyy"
              label="故障原因"
              width="90"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column prop="chcg" label="重合成功" width="55">
              <template slot-scope="scope">
                <div style="color: #ffbc3a">
                  {{ scope.row.chcg }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="chbc" label="重合不成" width="55">
              <template slot-scope="scope">
                <div style="color: #ffbc3a">
                  {{ scope.row.chbc }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="wchz" label="无重合闸" width="55">
              <template slot-scope="scope">
                <div style="color: #2793ff">
                  {{ scope.row.wchz }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="jiedi" label="接地" width="55">
              <template slot-scope="scope">
                <div style="color: #794af8">
                  {{ scope.row.jiedi }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="heji" label="合计" width="55">
              <template slot-scope="scope">
                <div style="color: #ee8316">
                  {{ scope.row.heji }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="middle" id="middle">
      <div class="one" style="height: 635px; width: 100%" id="threeModel">
        <iframe
          src="/unityWeb/index.html"
          style="height: 100%; width: 100%; border: none"
          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 enlargeShow == true ? btnEnlarge : btnEnlarge1"
            :key="index"
            @click="enlargeShow == true ? enlargeBtn(index) : enlargeBtn1(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>
          <div class="selectChange">
            <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>
      <div class="detailed" id="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: 100%"></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" id="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" prop="id">
            </el-table-column>
            <el-table-column prop="name" label="报警信息" align="center">
            </el-table-column>
            <el-table-column prop="date" label="发生时间" align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- <div style="height:40px;width:40px" class="suoxiao">
        <img src="../assets/images/btnFangDa.png" style="height:40px;width:40px"/>
      </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,
  getCabinetInfo,
  getCabinetList,
  getfaultReportList
} from "../api/index.js";
import ringMainUnit from "./HomePop/ringMainUnit.vue";
export default {
  name: "home",
  components: {
    ringMainUnit, //环网柜弹窗
  },
  data() {
    return {
      enlargeShow:true,
      dataGzList: [], //年故障数组
      dateList: ["周", "月"],
      acolor: true, //是否展示颜色
      currentIndex: -1,
      alarmInformationData: [],
      alarmInformationShow: false, //报警详情信息弹窗
      realTimeAlarmShow: false, //实时报警弹窗
      modelOthers: false,
      componentShow: "",
      CompanyInfo: {},
      tableData: [],
      btnArr: ["总览", "环网柜", "分支箱", "箱变", "开闭所"],
      btnActive: 0,
      iconGround: [
        {
          icon: require("@/assets/images/huanwanggui.png"),
          name: "环网柜",
        },
        {
          icon: require("@/assets/images/fenzhixiang.png"),
          name: "分支箱",
        },
        {
          icon: require("@/assets/images/xiangbian.png"),
          name: "箱变",
        },
        {
          icon: require("@/assets/images/kaibisuo.png"),
          name: "开闭所",
        },
      ],
      btnEnlarge: [
        {
          icon: require("@/assets/images/btnTiShi.png"),
        },
        {
          icon: require("@/assets/images/btnFangDa.png"),
        },
      ],
      btnEnlarge1: [
        {
          icon: require("@/assets/images/btnTiShi.png"),
        },
        {
          icon: require("@/assets/images/suoxiao.png"),
        },
      ],
      options: [
        {
          value: "",
          label: "",
        },
      ],
      value: "",
      topContent: [
        {
          name: "配变数量",
          count: "",
        },
        {
          name: "重复停运台次",
          count: "",
        },
        {
          name: "配变重复停运率",
          count: "",
        },
      ],
      device: "",
      tableData: [],
      tableKey: +new Date(),
      scrollTop: 0, //table距离顶部距离
      option: null,
      myChartBin: null,
    };
  },
  created(){

  },
  mounted() {
    this.beginShowing();
    // 监听浏览器窗口大小变化
    window.onresize = () => {
      clearInterval(this.myTimer);
      this.beginShowing();
    };
    // 盐都区供电公司概况
    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);
      // this.$nextTick(() => {
      //   this.detailedThree(dataList);
      //   setInterval(() => {
      //     this.doing();
      //   }, 200);
      // });
    });
    //年度查询班组
    getBanzugz({
      action: "year",
    }).then((res) => {
      this.dataGzList = res.data.data;
      this.detailedFour(this.dataGzList);
    });
    //本周故障
    getDwbzgz().then((res) => {
      let dataBzgz = [];
      dataBzgz = res.data.data;
      this.detailedOne(dataBzgz);
    });
    //供电质量统计
    getGdsgdzl().then((res) => {
      let dataGdzl = [];
      dataGdzl = res.data.data;
      this.detailedTwo(dataGdzl);
    });
    // //配变停运
    // getPbtyqk({
    //   action:"week"
    // }).then((res)=>{
    //   let dataPbty = [];
    //   dataPbty = res.data.data
    //   console.log(dataPbty,'dataPbty');
    //   this.detailedFive(dataPbty);
    //   let dataPb = [];
    //   let dataCf = [];
    //   let dataCfl = [];
    //   for (let i = 0; i < dataPbty.length; i++) {
    //     dataPb.push(dataPbty[i].pbsl);
    //     dataCf.push(dataPbty[i].cftytc);
    //     dataCfl.push(dataPbty[i].pbcftyl)
    //   }
    //   this.topContent[0].count = dataPb.reduce((x, y) => x + y)
    //   this.topContent[1].count = dataCf.reduce((x, y) => x + y)
    //   let pbCount =  (this.topContent[1].count/this.topContent[0].count)*100
    //   let pbCountString = pbCount.toString()
    //   if (pbCountString.indexOf(".") != -1) {
    //     this.topContent[2].count =  pbCountString.substring(0,pbCountString.indexOf(".")+3) + '%'
    //   }else{
    //    this.topContent[2].count = pbCountString +'%'
    //   }
    // })
    this.handleDate(0);
    let that = this;
    window.addEventListener("message", function (e) {
      var res = e.data;
      if (res.val != null) {
        that.modelOthers = true;
        that.componentShow = "ringMainUnit";
        that.device = res.val;
      }
    });
    //历史故障接口
    let faultData = {
        token: localStorage.getItem("token"),
        pageSize:'500',
        page:'1'
      };
    getfaultReportList(faultData).then((res)=>{
      this.alarmInformationData = res.data.data.data
    })
  },
  // beforeDestroy() {
  //   this.dataDestroy(); // 页面摧毁前，关闭定时器
  // },
  methods: {
    beginShowing() {
      this.$nextTick(function () {
        // 文档显示区域的高度 - 表格距离浏览器顶部的距离 - 表格距离浏览器底部的距离
        if (this.$refs.tableBox && this.$refs.tableBox.$el.offsetTop) {
          this.tableHeight =
            window.innerHeight - this.$refs.tableBox.$el.offsetTop - 300;
          this.$refs.tableBox.doLayout();
          this.roll();
        }
      });
    },
    roll() {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs.tableBox;
      // 拿到表格中承载数据的div元素
      const bodyWrapper = table.bodyWrapper;
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(这里配置为每100毫秒移动1像素)
      this.myTimer = setInterval(() => {
        // 元素自增距离顶部1像素
        bodyWrapper.scrollTop++;
        // 判断元素是否滚动到底部(可视高度+距离顶部=元素内容的整个高度包括溢出的不可见内容)
        if (
          bodyWrapper.clientHeight + bodyWrapper.scrollTop ===
          bodyWrapper.scrollHeight
        ) {
          // 重置table距离顶部距离
          bodyWrapper.scrollTop = 0;
        }
      }, 100);
    },
    // 鼠标进入表格
    mouseover() {
      clearInterval(this.myTimer);
    },
    // 鼠标离开表格
    mouseout() {
      this.roll();
    },
    //调用unity方法
    handleUnity(index, item) {
      this.btnActive = index;
      this.$refs.iframe.contentWindow.handleChange(item);
    },
    //选择线路
    selectLine(value) {
      getLine({
        action: "query",
        line_code: value,
      }).then((res) => {
        if (res.data.data != 0 && res.data.data != null) {
          this.$refs.iframe.contentWindow.handleChangeLine(
            res.data.data.line_name
          );
        } else if (res.data.data == null) {
          this.$refs.iframe.contentWindow.handleChangeLine("");
        }
      });
    },
    detailedOne(dataBzgz) {
      let dataList = [];
      let newArr = [20, 20, 20, 20, 20, 20, 20, 20, 20, 20];
      let dataDw = [];
      for (let i = 0; i < dataBzgz.length; i++) {
        dataList.push(dataBzgz[i].gzcs);
        dataDw.push(dataBzgz[i].dw);
      }
      var myChart = this.$echarts.init(document.getElementById("detailedOne"));
      var option = {
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "18%",
          left: "5%",
          right: "3%",
          bottom: "8%",
          containLabel: true,
        },

        xAxis: [
          {
            type: "category",
            data: dataDw,
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLabel: {
              color: "#ffffff",
              interval: 0,
              fontSize: 16,
            },
            axisLine: {
              show: false, //隐藏X轴轴线
              lineStyle: {
                color: "#01FCE3",
              },
            },
          },
        ],
        yAxis: [
          {
            name: "单位：次",
            type: "value",
            data: [0, 2, 4, 6, 8, 10],
            nameTextStyle: {
              color: "#ffffff",
              // padding:[25,0,0,0]
              fontSize: 16,
            },
            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'
                fontSize: 16,
              },
            },
            splitArea: {
              show: false,
            },
          },
        ],
        series: [
          // {
          //   type: "bar",
          //   barWidth: 22,
          //   itemStyle: {
          //     normal: {
          //       label: {
          //         fontSize: 14,
          //         formatter(params) {
          //           for (let i = 0; i < dataList.length; i++) {
          //             if (params.dataIndex == i) {
          //               return dataDw[i] + "\n" + "\n" + dataList[i];
          //             }
          //           }
          //         },
          //         show: true,
          //         position: "top",
          //         color: "#ffffff",
          //       },
          //       color: "none",
          //     },
          //   },
          //   silent: true,
          //   // barGap: "-100%",
          //   data: newArr,
          // },
          {
            name: "",
            type: "bar",
            barWidth: 30,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: "rgba(23,74,100,0.6)" },
                { offset: 1, color: "rgb(86,254,226)" },
              ]),
              fontSize: 16,
            },
            data: dataList,
            label: {
              show: true,
              position: "top",
              fontStyle: "normal",
              fontWeight: "normal",
              color: "#ffffff",
            },
            //  z: -1,
            // //不同系列的柱间距离，为百分比,如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。
            // barGap: '-100%',
          },
        ],
      };

      myChart.setOption(option);
    },
    detailedTwo(dataGdzl) {
      let gdsList = [];
      let xlcczList = [];
      let pbcczList = [];
      let ddyList = [];
      for (let i = 0; i < dataGdzl.length; i++) {
        gdsList.push(dataGdzl[i].gds);
        xlcczList.push(dataGdzl[i].xlccz);
        pbcczList.push(dataGdzl[i].pbccz);
        ddyList.push(dataGdzl[i].ddy);
      }
      let that = this;
      var myChart = this.$echarts.init(document.getElementById("detailedTwo"));
      var option = {
        //  animation: true,
        // animationDuration: 20000,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        grid: {
          left: "4%",
          right: "4%",
          bottom: "10%",
          top: "15%",
          containLabel: true,
        },
        legend: {
          top: 10,
          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 colorList1 = ["rgb(198,123,244)", "#F4C907"];
      var dataList = [
        {
          value: dataList.pftd,
          name: "频繁停电",
        },
        {
          value: dataList.dctd,
          name: "多次停电",
        },
        {
          value: dataList.clsjc,
          name: "处理时间长",
        },
        {
          value: dataList.mspc,
          name: "民事赔偿",
        },
      ];
      this.myChartBin = this.$echarts.init(
        document.getElementById("detailedThree")
      );
      this.option = {
        borderColor: "none",

        tooltip: {
          formatter: function (param) {
            if (param.data.type == null) {
              return param.data.name + ":" + param.value + "个";
            } else {
              return param.data.name + ":" + param.value + "个";
            }
          },
        },
        legend: {
          icon: "pin",
          top: 120,
          // bottom:0,
          right: 20,
          orient: "vertical", //垂直显示
          y: "center", //延Y轴居中

          data: [
            {
              name: "频繁停电",
            },
            {
              name: "多次停电",
            },
            {
              name: "处理时间长",
            },
            {
              name: "民事赔偿",
            },
          ],
          formatter: (name) => {
            let total = 0;
            let target;
            let value = dataList.filter((x) => x.name == name)[0].value;
            for (let i = 0, l = dataList.length; i < l; i++) {
              total += dataList[i].value;
              if (dataList[i].name == name) {
                target = dataList[i].value;
              }
            }
            let arr = [name + "   " + value];
            return arr.join("\n");
          },

          textStyle: {
            color: "#ffffff",
            fontSize: 16,
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: [0, "60%"],
            center: ["40%", "50%"],
            startAngle: 60, //默认角度
            label: {
              position: "inner",
              show: false,
            },

            itemStyle: {
              normal: {
                borderColor: "none",
                borderWidth: 2,
                fontSize: 16,
                color: function (params) {
                  return colorList[params.dataIndex];
                },
              },
            },

            selectedMode: "single",
            data: dataList,
          },
          {
            name: "运检类",
            type: "pie",
            radius: ["65%", "67%"],
            center: ["40%", "50%"],
            startAngle: 30,
            itemStyle: {
              normal: {
                fontSize: 16,
                color: function (params) {
                  return colorList1[params.dataIndex];
                },
                // color:'#F4C907',
              },
            },
            label: {
              normal: {
                formatter: function (params) {
                  return params.data.name + ":" + params.data.type + "个";
                },
                color: "auto",
                show: true,
                fontSize: 16,
              },
            },

            data: [
              {
                value: equipment[0],
                name: "运检类投诉",
                type: equipment[0],
              },
              {
                value: equipment[1],
                name: "运检类意见",
                type: equipment[1],
              },
            ],
            animation: false,
          },
        ],
      };
      this.myChartBin.setOption(this.option);
    },
    doing() {
      this.option.series[0].startAngle = this.option.series[0].startAngle - 5;
      this.option.series[1].startAngle = this.option.series[1].startAngle - 5;
      this.myChartBin.setOption(this.option);
    },
    detailedFour(dataList) {
      let yearBzData = [];
      let yearChcg = [];
      let yearChbc = [];
      let yearWchz = [];
      let yearJieDi = [];
      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",
              fontSize: 16,
            },
          },
        },
        grid: {
          borderWidth: 0,
          top: 30,
          bottom: "17%",
          left: "6%",
          right: "6%",
          textStyle: {
            color: "#fff",
          },
        },
        legend: {
          icon: "rect",
          right: "4%",
          textStyle: {
            color: "#ffffff",
          },
          data: ["重合成功", "重合不成", "无重合闸", "接地"],
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            trigger: "axis",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff",
                fontSize: 16,
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              fontSize: 14,
              rotate: 30,
            },
            data: yearBzData,
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgb(83,83,83)",
                fontSize: 16,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
                fontSize: 16,
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
            },
            splitArea: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "重合成功",
            type: "bar",
            stack: "Total1",
            barMaxWidth: 15,
            barGap: "10%",
            label: {
              show: true,
              formatter: function (params) {
                if (params.value == 0) {
                  return "";
                } else {
                  return params.value;
                }
              },
            },
            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,
              formatter: function (params) {
                if (params.value == 0) {
                  return "";
                } else {
                  return params.value;
                }
              },
            },
            itemStyle: {
              normal: {
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(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,
              formatter: function (params) {
                if (params.value == 0) {
                  return "";
                } else {
                  return params.value;
                }
              },
            },
            itemStyle: {
              normal: {
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(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,
              formatter: function (params) {
                if (params.value == 0) {
                  return "";
                } else {
                  return params.value;
                }
              },
            },
            itemStyle: {
              normal: {
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(35,160,247,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(35,160,247,0)",
                  },
                ]),
                borderColor: new that.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(35,160,247,1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(35,160,247,0)",
                    },
                  ]
                ),
                barBorderRadius: 0,
              },
            },
            data: yearJieDi,
          },
        ],
      };
      myChart.setOption(option);
    },
    detailedFive(dataPbty) {
      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);
      }
      var datacoords = [];
      var datacoords1 = [];
      for (var i = 0; i < dataListx.length; i++) {
        datacoords.push([
          {
            coord: [i, dataGz[i]],
          },
          {
            coord: [i + 1, dataGz[i + 1]],
          },
        ]);
      }
      for (var i = 0; i < dataListx.length; i++) {
        datacoords1.push([
          {
            coord: [i, dataCf[i]],
          },
          {
            coord: [i + 1, dataCf[i + 1]],
          },
        ]);
      }
      let that = this;
      var myChart = this.$echarts.init(document.getElementById("detailedFive"));
      var option = {
        animation: true, //控制动画示否开启
        animationDuration: 2000,
        animationEasing: "bounceOut", //缓动动画
        animationThreshold: 8, //动画元素的阈值
        grid: {
          top: "15%",
          bottom: "35%", //也可设置left和right设置距离来控制图表的大小
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        legend: {
          data: ["配变数量", "故障停运", "重复停运"],
          top: "0%",
          //  icon:'roundRect',
          //  itemHeight:2, // 粗细
          textStyle: {
            color: "#ffffff",
          },
        },
        xAxis: {
          data: dataListx,
          axisLine: {
            show: false, //隐藏X轴轴线
            lineStyle: {
              color: "#01FCE3",
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              color: "#ffffff", //X轴文字颜色
              fontSize: "16px",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            name: "配变数量",
            nameTextStyle: {
              color: "#ffffff",
              padding: [0, 30, 0, 0],
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#FFFFFF",
              },
            },
            axisLabel: {
              show: true,
              interval: 0,
              textStyle: {
                color: "#ffffff",
              },
            },
          },
          {
            type: "value",
            name: "停运台次",
            nameTextStyle: {
              color: "#ffffff",
            },
            position: "right",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,

              // formatter: "{value} %", //右侧Y轴文字显示
              textStyle: {
                color: "#ffffff",
              },
            },
          },
          {
            type: "value",
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
              },
            },
          },
        ],
        series: [
          {
            name: "故障停运",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: false, //平滑曲线显示
            showAllSymbol: true, //显示所有图形。
            shadowOffsetX: 0, // 折线的X偏移
            shadowOffsetY: 10, // 折线的Y偏移
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 1, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              color: "rgb(237,125,49)",
            },
            lineStyle: {
              color: "rgb(237,125,49)",
            },
            // areaStyle: {
            //   show:false,
            //   color: "rgba(5,140,255, 0.2)",
            // },
            emphasis: {
              focus: "series",
            },
            data: dataGz,
          },
          {
            showSymbol: false,
            name: "故障停运",
            type: "lines",
            yAxisIndex: 1,
            polyline: true,
            smooth: false,
            coordinateSystem: "cartesian2d",
            zlevel: 1,
            effect: {
              show: true,
              smooth: false,
              period: 6,
              trailLenth: 0.1,
              symbolSize: 6,
              symbol: "circle",
            },
            lineStyle: {
              color: "#fff",
              width: 1,
              opacity: 0,
              curveness: 0,
              cap: "round",
            },
            data: datacoords,
          },
          {
            name: "重复停运",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: false, //平滑曲线显示
            shadowOffsetX: 0, // 折线的X偏移
            shadowOffsetY: 10, // 折线的Y偏移
            showAllSymbol: true, //显示所有图形。
            symbol: "circle", //标记的图形为实心圆
            symbolSize: 1, //标记的大小
            itemStyle: {
              //折线拐点标志的样式
              show: false,
              color: "#058cff",
            },
            lineStyle: {
              show: false,
              color: "#058cff",
            },
            // areaStyle: {
            //   show:false,
            //   color: "rgba(5,140,255, 0.2)",
            // },
            data: dataCf,
          },
          {
            showSymbol: false,
            name: "重复停运",
            type: "lines",
            yAxisIndex: 1,
            polyline: true,
            smooth: false,
            coordinateSystem: "cartesian2d",
            zlevel: 1,
            effect: {
              show: true,
              smooth: false,
              period: 6,
              trailLenth: 0.1,
              symbolSize: 6,
              symbol: "circle",
            },
            lineStyle: {
              color: "#fff",
              width: 1,
              opacity: 0,
              curveness: 0,
              cap: "round",
            },
            data: datacoords1,
          },
          {
            name: "配变数量",
            type: "bar",
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(86,254,226,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(86,254,226,0)",
                  },
                ]),
              },
            },
            data: dataPb,
          },
        ],
      };
      myChart.setOption(option);
    },
    //报警详情信息弹窗
    enlargeBtn(index) {
      if (index == 0) {
        this.alarmInformationShow = true;
        this.realTimeAlarmShow = false;
      } else if (index == 1) {
        this.enlargeShow = false
        // this.$refs.iframe.contentWindow.fullscreen(1);
        document.getElementById("left").style.display = "none";
        document.getElementById("right").style.display = "none";
        document.getElementById("middle").style.width = "100%";
        document.getElementById("middle").style.height = "100%";
        document.getElementById("detailed").style.display = "none";
        document.getElementById("threeModel").style.height = "100%";
        document.getElementById("threeModel").style.width = "100%";
      }
    },
    //报警详情信息弹窗
    enlargeBtn1(index) {
      if (index == 0) {
        this.alarmInformationShow = true;
        this.realTimeAlarmShow = false;
      } else if (index == 1) {
        this.enlargeShow = true
        // this.$refs.iframe.contentWindow.fullscreen(1);
        document.getElementById("left").style.display = "flex";
        document.getElementById("left").style.width = "21.18%";
        document.getElementById("right").style.display = "flex";
        document.getElementById("right").style.width = "21.18%";
        document.getElementById("middle").style.width = "55.7%";
        document.getElementById("middle").style.height = "100%";
        document.getElementById("detailed").style.display = "flex";
        document.getElementById("detailed").style.height = "350px";
      }
    },
    handleClose() {
      this.alarmInformationShow = false;
    },
    handleDate(index) {
      this.currentIndex = index;
      // if (index == 0) {
      //周配变停运
      getPbtyqk({
        action: index == 0 ? "week" : "month",
      }).then((res) => {
        let dataPbty = [];
        dataPbty = res.data.data;
        this.detailedFive(dataPbty);
        let dataPb = [];
        let dataCf = [];
        for (let i = 0; i < dataPbty.length; i++) {
          dataPb.push(dataPbty[i].pbsl);
          dataCf.push(dataPbty[i].cftytc);
        }
        this.topContent[0].count = dataPb.reduce((x, y) => x + y);
        this.topContent[1].count = dataCf.reduce((x, y) => x + y);
        let pbCount =
          (this.topContent[1].count / this.topContent[0].count) * 100;
        let pbCountString = pbCount.toString();
        if (pbCountString.indexOf(".") != -1) {
          this.topContent[2].count =
            pbCountString.substring(0, pbCountString.indexOf(".") + 3) + "%";
        } else {
          this.topContent[2].count = pbCountString + "%";
        }
      });
      // }else if (index == 1) {
      //   //月配变停运
      //   getPbtyqk({
      //     action:"month"
      //   }).then((res)=>{
      //     let dataPbty = [];
      //     dataPbty = res.data.data
      //     this.detailedFive(dataPbty);
      //     let dataPb = [];
      //     let dataCf = [];
      //     for (let i = 0; i < dataPbty.length; i++) {
      //       dataPb.push(dataPbty[i].pbsl);
      //       dataCf.push(dataPbty[i].cftytc);
      //     }
      //     this.topContent[0].count = dataPb.reduce((x, y) => x + y)
      //     this.topContent[1].count = dataCf.reduce((x, y) => x + y)
      //      let pbCount =  (this.topContent[1].count/this.topContent[0].count)*100
      //     let pbCountString = pbCount.toString()
      //     if (pbCountString.indexOf(".") != -1) {
      //       this.topContent[2].count =  pbCountString.substring(0,pbCountString.indexOf(".")+3) + '%'
      //     }else{
      //     this.topContent[2].count = pbCountString +'%'
      //     }
      //   })
      // }
    },
    addColor(index) {
      if (this.currentIndex == index) {
        return { active: this.acolor };
      }
    },
  },
  watch: {
    //监听内容
    value(newVal, oldVal) {
      if (newVal != oldVal && newVal != "") {
        this.selectLine(newVal);
      } else if (newVal == "") {
        this.selectLine("");
        this.value = "";
      }
    },
  },
};
</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 {
    width: 100% !important;
    height: 70px;
    background: url("../assets/images/tableBg.png") no-repeat;
    background-size: 100% 100%;
  }
  /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);
  }
  /deep/.el-table__body,
  .el-table__footer,
  .el-table__header {
    width: 100% !important;
  }
  /deep/ .el-table__body td .cell {
    // width: 60px !important;
  }
  // &::before {
  //   //去除底部白线
  //   left: 0;
  //   bottom: 0;
  //   width: 100%;
  //   height: 0px;
  // }
  .el-table::before {
    background-color: transparent;
  }
}

.home {
  width: 100%;
  height: 100%;
  padding: 15px 28px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  box-sizing: border-box;
  .left {
    // width: 604px;
    width: 21.18%;
    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;
              .numText {
                color: #ffffff;
              }
              .numText:before {
                content: attr(text);
                position: absolute;
                z-index: 10;
                color: rgb(86, 254, 246) !important;
                -webkit-mask: linear-gradient(
                  to top,
                  rgb(86, 244, 254),
                  transparent
                );
              }
            }
          }
          .info {
            display: flex;
            flex-flow: column nowrap;
            .lists {
              width: 100%;
              height: 32px;
              background: url("../assets/images/cardSquare.png") no-repeat;
              display: flex;
              flex-flow: row nowrap;
              justify-content: space-between;
              align-items: center;
              background-size: 100% 100%;
              margin-bottom: 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;
    width: 55.7%;
    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: 30%;
        width: 40%;
        display: flex;
        justify-content: space-between;
        .btn {
          width: 100%;
          height: 38px;
          color: #fff;
          font-size: 18px;
          line-height: 38px;
          background: url("../assets/images/btnAct.png") no-repeat;
          background-size: 100% 100%;
          margin-bottom: 10px;
          margin-right: 15px;
        }
        .btnAct {
          color: rgb(244, 201, 7);
          background: url("../assets/images/unityBtn.png") no-repeat;
          background-size: 100% 100%;
          margin-right: 15px;
        }
      }
      .unityIcon {
        background: url("../assets/images/iconCard.png") no-repeat;
        background-size: 100% 100%;
        width: 110px;
        height: 168px;
        position: absolute;
        right: 40px;
        bottom: 80px;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .unityIconGround {
          width: 80%;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
      .unityEnlargeBtn {
        width: 100px;
        display: flex;
        justify-content: space-around;
        position: absolute;
        right: 40px;
        top: 40px;
        .content {
          width: 38px;
          height: 36px;
          background: url("../assets/images/btnkuang.png") no-repeat !important;
          background-size: 100% 100% !important;
        }
      }
      .unitySelect {
        position: absolute;
        left: 40px;
        width: 222px;
        height: 5%;
        bottom: 20px;
        display: flex;
        align-items: center;
        .unitySuosou {
          width: 57px;
          height: 53px;
          background: url("../assets/images/sousuoKuang.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }

    .two {
      .detailedOneList {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        height: 14%;
        align-items: center;
        color: #ffffff;
        background: url("../assets/images/tableBg.png") no-repeat;
        background-size: 100% 100%;
        width: 92%;
        z-index: 1;
        position: relative;
      }
    }

    .detailed {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      & > div {
        background: url("../assets/images/detailedCard.png") no-repeat;
        background-size: 100% 100%;
        .cartitle {
          height: 52px;
          width: 100%;
          background: url("../assets/images/detailed.png") no-repeat;
          font-size: 21px;
          font-weight: 600;
          color: #ffffff;
          line-height: 52px;
          text-align: left;
          text-indent: 26px;
        }
      }
    }
    #detailedOne {
      width: 100%;
      height: calc(100% - 0px) !important;
      z-index: 2;
      margin-top: -3%;
    }
    #detailedFour {
      width: 100%;
      height: calc(100% - 52px);
    }
  }
  .right {
    // width: 604px;
    width: 21.28%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    & > div {
      width: 100%;
      background: url("../assets/images/homeCard.png") no-repeat;
      background-size: 100% 100%;
      .cartitle {
        height: 52px;
        width: 100%;
        background: url("../assets/images/carTitle.png") no-repeat;
        font-size: 21px;
        font-weight: 600;
        color: #ffffff;
        line-height: 52px;
        text-align: left;
        text-indent: 26px;
      }
    }
    .one {
      .top {
        width: 100%;
        height: 10%;
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        align-items: center;
        .topContent {
          width: 30%;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          white-space: nowrap;
        }
      }
    }

    #detailedThree {
      width: 100%;
      height: calc(100% - 52px);
    }
    #detailedTwo {
      width: 100%;
      height: calc(100% - 52px);
    }
    #detailedFive {
      width: 100%;
      height: calc(100% - 52px);
    }
  }
  .titleFont {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(
      to bottom,
      rgb(255, 255, 255),
      rgb(123, 247, 245)
    );
  }
  //弹窗样式
  .componentShow {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 111;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
  }
  .realTimeAlarm {
    width: 517px;
    height: 136px;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 40%;
    background: url("../assets/images/realTimeAlarmKuang.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .content {
      color: #ffffff;
      width: 75%;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      margin-top: 4%;
    }
  }
  .alarmInformation {
    width: 517px;
    height: 304px;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 28%;
    background: url("../assets/images/baojingxinxiKuang.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px 13px;
    .top {
      height: 10%;
      width: 91%;
      display: flex;
      align-content: flex-start;
      justify-content: space-between;
      .title {
        font-size: 20px;
        font-weight: 900;
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        background-image: linear-gradient(
          to bottom,
          rgb(255, 255, 255),
          rgb(86, 244, 254)
        );
      }
    }
    .content {
      height: 85%;
      width: 100%;
      .user_skills {
        /deep/ .el-table {
          background-color: transparent !important;
        }
        /deep/ .el-table th {
          background-color: transparent !important;
        }
        /deep/ .el-table__header {
          height: 48px;
          background: url("../assets/images/tableBg.png") no-repeat;
          background-size: 100% 100%;
        }
        /deep/ .el-table__header th {
          border: none;
          padding: 0;
          height: 40px;
          .cell {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;
          }
          &.el-table__cell.is-leaf {
            border: none !important;
          }
        }
        /deep/ .el-table tr {
          background-color: transparent !important;
        }
        /deep/ .el-table--enable-row-transition .el-table__body td,
        .el-table .cell {
          background-color: transparent !important;
          border: none;
          color: #ffffff;
        }
        /deep/ .el-table__body td .cell {
          white-space: nowrap !important;
          // word-break: break-all;
        }
        /deep/ .el-table th.el-table__cell > .cell {
          color: #ffffff;
        }
        /deep/.el-table .el-table__cell {
          padding: 3px 0;
        }
        &::before {
          //去除底部白线
          left: 0;
          bottom: 0;
          width: 100%;
          height: 0px;
        }
        .el-table::before {
          background-color: transparent;
        }

        ::v-deep .el-table .el-table__body tr.el-table__row td {
          background: rgba(79, 218, 255, 0.1) !important;
        }
        ::v-deep
          .el-table--striped
          .el-table__body
          tr.el-table__row--striped
          td {
          background: rgba(79, 218, 255, 0.06) !important;
        }
      }
    }
  }
  .dateSelect {
    display: flex;
    font-size: 12px;
    background: url("../assets/images/dateKuang.png") no-repeat;
    background-size: 100% 100%;
    height: 25px;
    width: 61px;
    align-items: center;
  }
  .active {
    width: 32px;
    height: 25px;
    color: rgb(78, 230, 207);
    background: url("../assets/images/dateAction.png") no-repeat;
    background-size: 100% 100%;
    line-height: 26px;
  }
}
.suoxiao {
  position: absolute;
  bottom: 0;
  right: 0;
}

// }
</style>
<style lang="less">
// .selectChange {
  // width: 100% !important;
  // height: 100% !important;
   .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 0.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: rgb(14, 30, 46) !important;
    border: 1px solid rgba(45, 143, 148, 0.5) !important ;
    .el-select-dropdown__item {
      color: #fff !important;
    }
     .el-select-dropdown__item.hover,
     .el-select-dropdown__item:hover {
      background-color: rgb(18, 54, 87) !important;
    }
  }
  //  .el-popper {
  //   top: 50%;
  // }
  .el-popper[x-placement^=bottom] {
    margin-top: -146px !important;
}
   .popper__arrow {
    left: 171px !important;
    top: 95px !important;
  }
// }
/**
表格有滚动效果但是不显示滚动条
*/
.table ::-webkit-scrollbar {
  display: none;
}
</style>
