<template>
  <div class="home">
    <div class="left" id="left">
      <div class="two" style="height: 49%">
        <div class="cartitle">
          <div class="titleFont">
            <img src="./../assets/indexN/标题箭头.png" alt="" />
            <span>预计年/月变化趋势</span>
            <img src="./../assets/indexN/标题箭头1.png" alt="" />
          </div>
        </div>
        <div class="content">
          <div class="line">
            <div class="enselect">
              <img src="../assets/02/地区选择下拉菜单.png" alt="" />
              <span class="text">2022</span>
            </div>
            <div id="detailedTwo1"></div>
          </div>
        </div>
      </div>
      <div class="two" style="height: 49%">
        <div class="cartitle">
          <div class="titleFont">
            <img src="./../assets/indexN/标题箭头.png" alt="" />
            <span>年/月总投资变化趋势</span>
            <img src="./../assets/indexN/标题箭头1.png" alt="" />
          </div>
        </div>
        <div class="content">
          <div class="line">
            <div class="enselect">
              <img src="../assets/02/地区选择下拉菜单.png" alt="" />
              <span class="text">2022</span>
            </div>
            <div id="detailedTwo2"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="left1" id="left">
      <div class="one" style="height: 100%">
        <div class="cartitle">
          <div class="titleFont">
            <img src="./../assets/indexN/标题箭头.png" alt="" />
            <span>县公司预算统计</span>
            <img src="./../assets/indexN/标题箭头1.png" alt="" />
          </div>
        </div>
        <div class="content">
          <div class="line">
            <div id="detailedTwo3"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="middle" id="middle">
      <div class="map" style="height: 100%">
        <img class="allimg" src="../assets/indexN/大丰市选中.png" alt="" />
        <div class="imgboxone">
          <div class="contents">
            <div class="lines">
              <div class="total">
                <div class="num">
                  <div style="display: inline-block">
                    <img
                      style="float: left"
                      src="../assets/index/总数据图标1.png"
                      alt=""
                    />
                    <span>项目数</span>
                  </div>
                  <h5 class="yellow">
                    &nbsp;&nbsp;&nbsp;9.279 <span style="color: #fff">万</span>
                  </h5>
                </div>
              </div>
            </div>
            <div class="lines">
              <div class="total">
                <div class="num">
                  <div style="display: inline-block">
                    <img
                      style="float: left; height: 30px; width: 30px"
                      src="../assets/index/总数据图标2.png"
                      alt=""
                    />
                    <span>预算费用总和</span>
                  </div>
                  <h5 class="orange">
                    &nbsp;&nbsp;118.5<span style="color: #fff">万</span>
                  </h5>
                </div>
              </div>
            </div>
            <div class="lines">
              <div class="total">
                <div class="num">
                  <div style="display: inline-block">
                    <img
                      style="float: left; height: 30px; width: 30px"
                      src="../assets/index/总数据图标1.png"
                      alt=""
                    />
                    <span>计划数</span>
                  </div>
                  <h5 class="yellow">&nbsp;&nbsp;44</h5>
                </div>
              </div>
            </div>
            <div class="lines">
              <div class="total">
                <div class="num">
                  <div style="display: inline-block">
                    <img
                      style="float: left; height: 30px; width: 30px"
                      src="../assets/index/总数据图标2.png"
                      alt=""
                    />
                    <span>物科数</span>
                  </div>
                  <h5 class="orange">&nbsp;&nbsp;10</h5>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right" id="right">
      <div class="two" style="height: 49%">
        <div class="cartitle">
          <div class="titleFont">
            <img src="./../assets/indexN/标题箭头.png" alt="" />
            <span>县物项目总投资比</span>
            <img src="./../assets/indexN/标题箭头1.png" alt="" />
          </div>
        </div>
        <div class="content">
          <div class="line">
            <div id="barCharts"></div>
          </div>
        </div>
      </div>
      <div class="two" style="height: 49%">
        <div class="cartitle">
          <div class="titleFont">
            <img src="./../assets/indexN/标题箭头.png" alt="" />
            <span>县物资占比分配</span>
            <img src="./../assets/indexN/标题箭头1.png" alt="" />
          </div>
        </div>
        <div class="content">
          <div class="line">
            <div id="detailen"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="right1" id="right">
      <div class="one" style="height: 100%">
        <div class="cartitle">
          <div class="titleFont">
            <img src="./../assets/indexN/标题箭头.png" alt="" />
            <span>县公司预算统计</span>
            <img src="./../assets/indexN/标题箭头1.png" alt="" />
          </div>
        </div>
        <div class="content">
          <div class="line">
            <table>
              <thead style="color: #fff; font-size: 30px">
                <tr>
                  <td>县公司名称</td>
                  <td>物科数量</td>
                  <td>计划数量</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in pvTable" :key="index">
                  <td>{{ item.name }}</td>
                  <td>{{ item.stationNumber }}</td>
                  <td class="titleFont">{{ item.alternatorNumber }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <audio
      controls="controls"
      hidden
      src="../assets/videos/police.wav"
      ref="audio"
    ></audio>
  </div>
</template>

<script>
//引入echarts
import * as echarts from "echarts";
// 工单统计弹窗组件
import workOrder from "../component/workOrder.vue";
import ringMainUnit from "./HomePop/ringMainUnit.vue";
import routeDetail from "../component/routeDetail.vue";

// 线路详情
import lineDetail from "../component/lineDetail.vue";
export default {
  name: "twentyKV",
  components: {
    ringMainUnit, //环网柜弹窗
    workOrder, //工单统计弹窗
    routeDetail, //线路故障跳闸明细
    lineDetail, //线路详情弹窗
  },
  data() {
    return {
      pageShow: true,
      totals: 5,
      pageSize: 10,
      page: 1,
      threeImg: require("../assets/images/pieBorder.png"),
      enlargeShow: true,
      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,
      // 工单
      orderItem: null,
      orderShow: "",
      // 线路故障明细
      routeItem: null,
      routeShow: "",
      // 配电线路
      lineItem: null,
      lineShow: "",
      timer: null, //定时器
      emergencyList: [], //告警数据
      rowTime: "",
      pvTable: [
        {
          name: "国网东台区供电公司",
          stationNumber: "0",
          alternatorNumber: "1",
        },
        {
          name: "国网东台区供电公司",
          stationNumber: "23",
          alternatorNumber: "1",
        },
        {
          name: "国网东台区供电公司",
          stationNumber: "1",
          alternatorNumber: "3",
        },
        {
          name: "国网东台区供电公司",
          stationNumber: "1",
          alternatorNumber: "2",
        },
        {
          name: "国网东台区供电公司",
          stationNumber: "14",
          alternatorNumber: "3",
        },
        {
          name: "国网东台区供电公司",
          stationNumber: "45.3w",
          alternatorNumber: "2",
        },
        {
          name: "国网东台区供电公司",
          stationNumber: "13.3w",
          alternatorNumber: "1",
        },
        {
          name: "国网东台区供电公司",
          stationNumber: "23",
          alternatorNumber: "0",
        },
        {
          name: "国网东台区供电公司",
          stationNumber: "23",
          alternatorNumber: "0",
        },
        {
          name: "国网东台区供电公司",
          stationNumber: "356.3w",
          alternatorNumber: "2",
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.detailedTwo11();
    this.detailedTwo22();
    this.detailedTwo33();
    this.barCharts();
    this.detailen();
  },
  methods: {
    detailedTwo11() {
      var fontColor = "#fff";
      var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        xAxis: [
          {
            type: "category",
            data: ["2018", "2019", "2020", "2021", "2022"],
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ffffff",
                fontSize: "18",
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            splitArea: { show: false },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "18",
              },
            },
          },
        ],
        series: [
          {
            name: "预计年变化趋势",
            type: "bar",
            barWidth: 40,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: "rgba(86,254,226,.2) " },
                { offset: 0.5, color: "rgb(86,254,226,.6)" },
                { offset: 0, color: "rgb(86,254,226)" },
              ]),
              borderRadius: [7, 7, 0, 0], // 柱状图圆角
              borderWidth: 0,
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301, 334, 390],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    detailedTwo22() {
      var fontColor = "#30eee9";
      var myChart = this.$echarts.init(document.getElementById("detailedTwo2"));
      var option = {
        tooltip: {
          show: true,
          trigger: "item",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            color: "#fff",
            fontSize: "16",
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#195384",
            },
          },
          data: ["2018", "2019", "2020", "2021", "2022"],
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "总投资",
            type: "line",
            stack: "Total",
            symbol: "none",
            data: [80, 132, 101, 134, 121],
            itemStyle: {
              normal: {
                color: "yellow",
                lineStyle: {
                  color: "yellow",
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    detailedTwo33() {
      // note: 设置灰色背景色的长度的逻辑不够好，请自行调整
      var honorData = [
        {
          name: "2019末",
          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
        },
        {
          name: "2020上半年",
          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
        },
        {
          name: "2020下半年",
          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
        },
        {
          name: "2021年",
          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
        },
      ];
      var honorXAxisData = [
        "电机有限公司（合并）",
        "电机有限公司（本部）",
        "电气有限公司",
        "西安电气有限公司",
        "先锋电气有限公司",
        "南非电机有限公司",
      ];
      // // 设置灰色背景色的长度
      var isMax = 2000;
      var bjData1 = [
        isMax,
        isMax,
        isMax,
        isMax,
        isMax,
        isMax,
        isMax,
        isMax,
        isMax,
      ];
      var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));

      var option = {
        color: ["#0F9AF8", "#2039C3", "rgba(32,57,195,.5)", "#2ECACE"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
        },
        backgroundColor: "#031f2d",

        legend: {
          right: 5,
          top: "5%",
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 15,
          textStyle: {
            color: "#ACCFFF",
            fontSize: 16,
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
            show: false,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#6B9DD7",
              fontSize: 16, // 文字大小
              fontWeight: 400,
              interval: 0,
              formatter: function (value) {
                return value + "(万元)";
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: "#6B9DD7",
              fontSize: 16, // 文字大小
              fontWeight: 400,
              interval: 0,
            },
            offset: 20,
            data: honorXAxisData,
          },
        ],
        series: [
          {
            name: "2019末",
            type: "bar",
            stack: "zongliang",
            barWidth: "35%",
            zlevel: 10,
            label: {
              normal: {
                show: true,
                position: "inside",
                textStyle: {
                  color: "#fff",
                  fontSize: 14,
                },
              },
            },
            data: honorData[0].data,
          },
          {
            name: "2020上半年",
            type: "bar",
            stack: "zongliang",
            barWidth: "35%",
            zlevel: 10,
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: function (params) {
                  console.log(params);
                  // return  params.seriesName + params.value ;
                  return "完成" + params.value;
                },
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                },
              },
            },
            data: honorData[1].data,
          },
          {
            name: "2020下半年",
            type: "bar",
            stack: "zongliang",
            barWidth: "35%",
            zlevel: 10,
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: function (params) {
                  console.log(params);
                  // return  params.seriesName + params.value ;
                  return "预算" + params.value;
                },
                textStyle: {
                  color: "#fff",
                  fontSize: 12,
                },
              },
            },
            data: honorData[2].data,
          },
          {
            name: "2021年",
            type: "bar",
            stack: "zongliang",
            barWidth: "35%",
            zlevel: 10,
            label: {
              normal: {
                show: true,
                position: "inside",
                textStyle: {
                  color: "#fff",
                  fontSize: 14,
                },
              },
            },
            data: honorData[3].data,
          },
        ],
      };

      // var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
      // var option = {
      //   grid: {
      //     left: "3%",
      //     right: "4%",
      //     bottom: "3%",
      //     containLabel: true,
      //   },
      //   xAxis: {
      //     type: "value",
      //     show: false,
      //   },
      //   yAxis: {
      //     type: "category",
      //     axisLine: {
      //       lineStyle: {
      //         color: "#206489",
      //       },
      //     },
      //     axisLabel: {
      //       color: "#fff",
      //       fontSize: "18",
      //     },
      //     axisLine: {
      //       show: false,
      //     },
      //     axisTick: {
      //       show: false,
      //       alignWithLabel: true,
      //     },
      //     splitArea: { show: false },
      //     data: ["No.5", "No.4", "No.3", "No.2", "No.1"],
      //   },
      //   series: [
      //     {
      //       name: "Direct",
      //       type: "bar",
      //       stack: "total",
      //       barWidth: 10,
      //       label: {
      //         show: true,
      //       },
      //       emphasis: {
      //         focus: "series",
      //       },
      //       data: [320, 302, 310, 299, 288],
      //     },
      //     {
      //       name: "Mail Ad",
      //       type: "bar",
      //       stack: "total",
      //       barWidth: 10,

      //       label: {
      //         show: true,
      //       },
      //       emphasis: {
      //         focus: "series",
      //       },
      //       data: [99, 88, 100, 101, 97],
      //     },
      //   ],
      // };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    barCharts() {
      var m2R2Data = [
        {
          value: 335,
          legendname: "22%",
          name: "国网大丰市供电公司",
          itemStyle: { color: "#8d7fec" },
        },
        {
          value: 310,
          legendname: "22%",
          name: "盐城运维检修部(检修分公司)",
          itemStyle: { color: "#5085f2" },
        },
        {
          value: 234,
          legendname: "22%",
          name: "国网射阳县供电公司",
          itemStyle: { color: "#e75fc3" },
        },
        {
          value: 154,
          legendname: "22%",
          name: "国网响水县供电公司",
          itemStyle: { color: "#f87be2" },
        },
        {
          value: 335,
          legendname: "22%",
          name: "设备管理部",
          itemStyle: { color: "#f2719a" },
        },
        {
          value: 335,
          legendname: "22%",
          name: "开发区供电服务中心",
          itemStyle: { color: "#fca4bb" },
        },
      ];
      var myChart = this.$echarts.init(document.getElementById("barCharts"));
      var option = {
        title: [
          {
            text: "总计",
            subtext: 59.53 + "万",
            textStyle: {
              fontSize: 20,
              color: "#fff",
            },
            subtextStyle: {
              fontSize: 20,
              color: "yellow",
            },
            textAlign: "center",
            x: "34.5%",
            y: "44%",
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: function (parms) {
            var str =
              parms.seriesName +
              "</br>" +
              parms.marker +
              "" +
              parms.data.legendname +
              "</br>" +
              "数量：" +
              parms.data.value +
              "</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          },
        },
        legend: {
          type: "scroll",
          orient: "vertical",
          left: "70%",
          align: "left",
          top: "middle",
          textStyle: {
            color: "white",
            fontSize: 16,
          },
          height: 250,
        },
        series: [
          {
            type: "pie",
            center: ["35%", "50%"],
            radius: ["40%", "65%"],
            clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            lable: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 18,
                },
              },
              emphasis: {
                show: true,
              },
            },

            labelLine: {
              normal: {
                length: 40, //第一条线
                length: 10, //第二条线
                lineStyle: {
                  width: 3, // 线条的宽度
                  color: "rgb(86,254,226)", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
                },
              },
            },

            itemStyle: {
              normal: {
                borderRadius: 10,
                borderColor: "transparent",
                borderWidth: 2,
                label: {
                  show: true,
                  formatter: " {d}% ",
                  fontSize: 20,
                  color: "#fff",
                },
              },
            },

            data: m2R2Data,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    detailen() {
      var myChart = this.$echarts.init(document.getElementById("detailen"));
      var option = {
        color: [
          "#A0CE3A",
          "#31C5C0",
          "#1E9BD1",
          "#0F347B",
          "#585247",
          "#7F6AAD",
          "#009D85",
          "rgba(250,250,250,0.3)",
        ],

        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },

        legend: {
          orient: "vertical",
          top: "middle",
          right: "5%",
          textStyle: {
            color: "#fff",
            fontSize: 18,
          },
          //格式化图例文本
          formatter(name) {
            // console.log(option);
            let than = option.series[0].data; //获取series中的data
            let total = 0;
            let tarValue;
            for (let i = 0, l = than.length; i < l; i++) {
              total += than[i].value;
              if (than[i].name == name) {
                tarValue = than[i].value;
              }
            }
            let p = (tarValue / total) * 100;
            return p.toFixed(2) + "%";
          },
          icon: "roundRect",
          data: [
            "国网大丰市供电公司",
            "设备管理部",
            "国网射阳县供电公司",
            "国网响水县供电公司",
            "盐城运维检修部(检修分公司)",
            "开发区供电服务中心",
          ],
        },

        calculable: true,
        series: [
          {
            type: "pie",
            center: ["35%", "50%"],
            radius: [30, 120],
            roseType: "area",
            labelLine: {
              normal: {
                length: 20, //第一条线
                length: 5, //第二条线
                lineStyle: {
                  width: 3, // 线条的宽度
                  color: "rgb(86,254,226)", //线的颜色设置， 如没有设置颜色则线条的颜色跟随饼状图的颜色
                },
              },
            },

            itemStyle: {
              normal: {
                label: {
                  show: true,
                  fontSize: 20,
                  color: "#fff",
                },
              },
            },
            data: [
              { value: 22, name: "国网大丰市供电公司" },
              { value: 20, name: "设备管理部" },
              { value: 21, name: "国网射阳县供电公司" },
              { value: 25, name: "国网响水县供电公司" },
              { value: 20, name: "盐城运维检修部(检修分公司)" },
              { value: 30, name: "开发区供电服务中心" },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  watch: {},
};
</script>
<style lang="less" scoped>
.content {
  /deep/ .el-table__body td .cell {
    white-space: normal !important;
  }
}

.two {
  /deep/ .el-table__body-wrapper {
    height: 195px !important;
  }
  .enselect {
    position: absolute;
    right: 30px;
    img {
      float: right;
    }
    .text {
      float: right;
      // right: -10px;
      margin-right: -60px;
      font-size: 20px;

      color: #fff;
    }
  }
}

// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
  // display: block !important;
}

// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(35, 160, 247, 1);
  border-radius: 3px;
}

/deep/ .el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: hidden;
}

.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%;

    .cell {
      text-align: center !important;
      justify-content: center;
    }
  }

  /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;
  }

  /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;
    // word-break: break-all;
    display: flex !important;
    justify-content: center !important;
  }

  /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 {
    padding-right: 15px;
    // width: 604px;
    width: 17.18%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    #detailedTwo1 {
      width: 100%;
      height: 350px;
    }
    #detailedTwo2 {
      width: 100%;
      height: 350px;
    }
  }

  .left1 {
    // width: 604px;
    // padding: 0 10px;
    width: 17.18%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    #detailedTwo3 {
      width: 100%;
      height: 500px;
    }
  }

  .middle {
    // width: 1590px;
    width: 32.7%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    .imgboxone {
      background: url("../assets/04/总数据外框.png") no-repeat;
      width: 100%;
      height: 17%;
      position: relative;
      top: 45%;
      left: 30%;
      .contents {
        // height: 90%;
        position: absolute;
        padding: 10px;
        height: 100%;
        width: 53%;
        display: flex;
        flex-direction: row;
        /* 平分剩余空间 */
        justify-content: space-around;
        .lines {
          width: 100%;
          padding: 10px 0 0 1px;
          background: url("../assets/index/总数据小框.png") no-repeat;
        }

        .total {
          .num {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: left;
            color: #ffffff;
            span {
              font-size: 20px;
            }
            h5 {
              font-size: 34px;
            }
            .yellow {
              padding-top: 30px;
              color: yellow;
            }
            .orange {
              padding-top: 30px;
              color: orange;
            }
            .yellows {
              padding-top: 20px;
              color: yellow;
            }
          }
        }
      }
    }
    .map {
      background: url("../assets/indexN/地图.png") no-repeat;
      vertical-align: middle;
      display: table-cell;
      text-align: center;
      margin-left: -20%;
      .allimg {
        position: relative;
        left: 20.5%;
        top: 35%;
      }
    }
  }

  .right {
    // width: 604px;
    width: 16.8%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    #barCharts {
      //   width: 100%;
      //   height: calc(100% - 52px);
      width: 90%;
      height: calc(100% - 100px);
      position: absolute;
    }
    #detailqe {
      width: 100%;
      height: 350px;
    }
    #detailen {
      width: 100%;
      height: 350px;
    }
    .eqselect {
      span {
        font-size: 20px;
        color: #f8f8f8;
      }
      img {
        margin-right: 7px;
      }
    }
  }

  .right1 {
    // width: 604px;
    width: 17.18%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    #detailstop {
      width: 100%;
      height: 400px;
    }
  }
}

// }
</style>
<style lang="less" scoped>
//  .el-popper {
//   top: 50%;
// }

/deep/ .popper__arrow {
  left: 171px !important;
  top: 95px !important;
}

/deep/ .el-select-dropdown {
  background-color: rgb(14, 30, 46) !important;
  border: 1px solid rgba(45, 143, 148, 0.5) !important;

  /deep/ .el-select-dropdown__item {
    color: #fff !important;
  }

  /deep/ .el-select-dropdown__item.hover,
  /deep/ .el-select-dropdown__item:hover {
    background-color: rgb(18, 54, 87) !important;
  }
}

/deep/ .el-popper[x-placement^="bottom"] {
  margin-top: -146px !important;
}

/**
表格有滚动效果但是不显示滚动条
*/
</style>
<style lang="less">
.el-table .rowColor0 {
  background: red !important;
  animation: fade 2000ms infinite ease-in-out;
}

@keyframes fade {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }

  to {
    opacity: 1;
  }
}

// .el-pager li:hover{
//   color:black
// }
.cartitle {
  height: 52px;
  width: 100%;
  // background: url("../assets/images/carTitle.png") no-repeat;
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  line-height: 52px;
  // text-align: left;
  text-indent: 26px;
}
.titleFont {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(
    to bottom,
    rgb(255, 255, 255),
    rgb(123, 247, 245)
  );
  img {
    margin: 20px;
  }
}
.content {
  padding: 24px 31px 0 31px;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;

  .line {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    table {
      thead {
        font-size: 22px !important;
        height: 50px;
        background: url("../assets/02/表格标题行.png") no-repeat;
      }
      tbody {
        tr {
          height: 50px;
          font-size: 18px !important;
          color: #fff;
          background: url("../assets/02/表格其他行.png") no-repeat;
        }
      }
    }

    .total {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
      margin-bottom: 15%;

      .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: 9%;
        padding: 0 10px 0 0;
        box-sizing: border-box;

        & > div {
          font-size: 18px;
          color: #ffffff;
        }

        .number {
          color: rgb(86, 254, 226);
        }
      }
    }
  }
}
.two {
  background: url("../assets/indexN/boxLr.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.one {
  background: url("../assets/02/表格框.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%;
    }
  }
}
</style>
