<template>
  <div class="home">
    <div class="left" 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="detailedTwo1"></div>
          </div>
        </div>
        <div class="line">
          <div id="detailedTwo4"></div>
        </div>
      </div>
    </div>
    <div class="left1" 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="detailedTwo3"></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="middle" id="middle">
      <div class="map" style="height: 100%">
        <canvas
          id="myCanvas"
          width="1000"
          height="800"
          style="position: absolute"
        ></canvas>
        <img class="allimg" src="../assets/indexN/大丰市选中.png" alt="" />
        <div class="imgboxtwo">
          <div class="cartitle">
            <div class="titleFont" style="color: #fff; font-size: 26px">
              大丰区
            </div>
          </div>
          <div class="content">
            <div class="line">
              <ul>
                <li>
                  用电量（kwh）&nbsp;
                  <span style="color: yellow">2.685亿</span>
                </li>
                <li>
                  碳排放量（kg）
                  <span style="color: orange">7.303万</span>
                </li>
                <li>
                  企业数量&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span style="color: yellow">713</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="imgboxone">
          <div class="contents">
            <div class="lines">
              <div class="total">
                <div class="num">
                  <div>
                    <img
                      style="float: left"
                      src="../assets/index/总数据图标1.png"
                      alt=""
                    />
                    <span>年度总用电量(2021)</span>
                  </div>
                  <h5 class="yellow">
                    &nbsp;&nbsp;&nbsp;89.21<span style="color: #fff"
                      >亿kwh</span
                    >
                  </h5>
                </div>
              </div>
            </div>
            <div class="lines">
              <div class="total">
                <div class="num">
                  <div>
                    <img
                      style="float: left; height: 30px; width: 30px"
                      src="../assets/index/总数据图标2.png"
                      alt=""
                    />
                    <span>年度总用电量(2022)</span>
                  </div>
                  <h5 class="orange">
                    &nbsp;&nbsp;39.83<span style="color: #fff">亿kwh</span>
                  </h5>
                </div>
              </div>
            </div>
            <div class="lines">
              <div class="total">
                <div class="num">
                  <div>
                    <img
                      style="float: left; height: 30px; width: 30px"
                      src="../assets/index/总数据图标1.png"
                      alt=""
                    />
                    <span>年度总碳排放量(2021)</span>
                  </div>
                  <h5 class="yellow">
                    &nbsp;&nbsp;242.6<span style="color: #fff">万kwh</span>
                  </h5>
                </div>
              </div>
            </div>
            <div class="lines">
              <div class="total">
                <div class="num">
                  <div>
                    <img
                      style="float: left; height: 30px; width: 30px"
                      src="../assets/index/总数据图标2.png"
                      alt=""
                    />
                    <span>年度总碳排放量(2022)</span>
                  </div>
                  <h5 class="orange">
                    &nbsp;&nbsp;108.3<span style="color: #fff">万kwh</span>
                  </h5>
                </div>
              </div>
            </div>
            <div class="lines">
              <div class="total">
                <div class="num">
                  <div>
                    <img
                      style="float: left; height: 30px; width: 30px"
                      src="../assets/index/总数据图标2.png"
                      alt=""
                    />
                    <span>年度客户总数(2021)</span>
                  </div>
                  <h5 class="orange">&nbsp;&nbsp;3673</h5>
                </div>
              </div>
            </div>
            <div class="lines">
              <div class="total">
                <div class="num">
                  <div>
                    <img
                      style="float: left; height: 30px; width: 30px"
                      src="../assets/index/总数据图标2.png"
                      alt=""
                    />
                    <span>年度客户总数(2022)</span>
                  </div>
                  <h5 class="orange">&nbsp;&nbsp;4968</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 id="barCharts"></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" style="height: 100%">
          <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: "江苏省盐城市***组47",
          alternatorNumber: "2022-05-27",
        },
        {
          name: "尤伟健",
          stationNumber: "江苏省盐城市***组47",
          alternatorNumber: "2022-05-27",
        },
        {
          name: "尤伟健",
          stationNumber: "江苏省盐城市***组47",
          alternatorNumber: "2022-05-27",
        },
        {
          name: "尤伟健",
          stationNumber: "江苏省盐城市***组47",
          alternatorNumber: "2022-05-27",
        },
        {
          name: "尤伟健",
          stationNumber: "江苏省盐城市***组47",
          alternatorNumber: "2022-05-27",
        },
        {
          name: "尤伟健",
          stationNumber: "江苏省盐城市***组47",
          alternatorNumber: "2022-05-27",
        },
        {
          name: "尤伟健",
          stationNumber: "江苏省盐城市***组47",
          alternatorNumber: "2022-05-27",
        },
        {
          name: "尤伟健",
          stationNumber: "江苏省盐城市***组47",
          alternatorNumber: "2022-05-27",
        },
        {
          name: "尤伟健",
          stationNumber: "江苏省盐城市***组47",
          alternatorNumber: "2022-05-27",
        },
        {
          name: "尤伟健",
          stationNumber: "江苏省盐城市***组47",
          alternatorNumber: "2022-05-27",
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.xianDuan();
    this.detailedTwo11();
    this.detailedTwo22();
    this.detailedTwo33();
    this.detailedTwo44();
    this.barCharts();
    this.detailen();
  },
  methods: {
    //地图画线
    xianDuan() {
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      ctx.moveTo(600, 500); // moveTo(x,y) 定义线条开始坐标
      ctx.lineTo(770, 120); // lineTo(x,y) 定义线条结束坐标
      ctx.strokeStyle = "orange";
      ctx.lineWidth = 5;
      ctx.font = "26px Arial";
      ctx.fillStyle = "#fff";
      ctx.fillText("11.87万", 320, 140);
      ctx.fillText("14.76万", 400, 200);
      ctx.fillText("2.113万", 270, 360);
      ctx.fillText("39.12万", 480, 285);
      ctx.fillText("7.399万", 320, 440);
      ctx.fillText("7.399万", 480, 410);
      ctx.fillText("255.1万", 640, 465);
      ctx.fillText("298.4万", 750, 660);
      ctx.stroke();
    },
    detailedTwo11() {
      var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          textStyle: {
            fontSize: 18, //字体大小
            color: "#ffffff", //字体颜色
          },

          data: ["用电量", "碳排放量"],
        },
        xAxis: [
          {
            type: "category",
            data: ["2530", "2541", "2542", "2550", "2610", "2621"],
            axisLabel: {
              color: "#fff",
              fontSize: "18",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            max: 200,
            interval: 50,
            axisLabel: {
              formatter: "{value}万",
              textStyle: {
                color: "#ffffff",
                fontSize: 18,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                // color: 'rgba(66, 192, 255, .3)',
                color: "rgba(102,102,102,0.6)",
                width: 1,
              },
            },
          },
        ],
        series: [
          {
            name: "用电量",
            type: "bar",
            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: [150, 63, 72, 33, 47, 88],
          },
          {
            name: "碳排放量",
            type: "bar",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 1, color: "rgba(255,255,0,.2) " },
                { offset: 0.5, color: "rgb(255,255,0,.6)" },
                { offset: 0, color: "rgb(255,255,0)" },
              ]),
              borderRadius: [7, 7, 0, 0], // 柱状图圆角
              borderWidth: 0,
            },
            emphasis: {
              focus: "series",
            },
            data: [45, 123, 35, 67, 58, 124],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    detailedTwo22() {
      // note: 设置灰色背景色的长度的逻辑不够好，请自行调整
      var honorData = [
        {
          name: "用电量（单位：亿）",
          data: [1800, 1600, 1400, 1200, 1000, 800, 600, 400],
        },
        {
          name: "碳排放量（单位：万）",
          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("detailedTwo2"));

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

        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: "用电量（单位：亿）",
            type: "bar",
            stack: "zongliang",
            barWidth: "35%",
            zlevel: 10,
            label: {
              normal: {
                show: true,
                position: "inside",
                textStyle: {
                  color: "#fff",
                  fontSize: 14,
                },
              },
            },
            data: honorData[0].data,
          },
          {
            name: "碳排放量（单位：万）",
            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,
          },
        ],
      };

      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    detailedTwo33() {
      var bg =
        "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII=";
      var bar =
        "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAP8AAAAUCAYAAABCi+uLAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAChxJREFUeJztXDGyJDUMlWeIuQY34AJLFdEuAQkXIOAAROREHICAA0BCFSkJByDhAgRcgIAYftPdY7mfnp7c/XfD/a7a325blmVZT5I9s9PspbyUl/Jelrb9uX+8vFkfvzze7MfRsziFKPei/bb+e+rP54y7wvdK+536UBYlG66P52be1buSrbctwL+tbcvT47n3wXxtpVuWx5P5LTO5tr7/LK8b67hmpV9sa6JN6e1MV4rHlXmdbiaztzfRBmW5KC/vixxf8eG5n2v/z8VXsy9W3r+tz0+WN+2poLpUMvgd8Ar8k/ogVe3etr3cJuMK/huAWkUPPFMf0aMsO88+ftvkZtRuBz224ZyDNxtjn8vfd+NajmcyPF5zn2/waLGPx4068uYxG88FDFr0BxnYoNXeoV4KPch9ZfsivUj9I/8ncIi3g607Wtddgz1yHulJaw16F+/c7vINgUlHY7zoC09VBx0NPl7u9vMK/s/tHcoB/raCX4HdhcY+dgxiIR7JykWyozGig37esMCjF3QQiQ/IgsYUHBM6C1w3eXIHT0PZSP5FOKa93MDgFOBm4Mf+WzYGNnQELALDxycdzhwBA/ZGulJ8eRy2Oy06Xgc8rH0Aq0fl5IQNdN3bUG+Dj2UbWqo1us7YUdrRj4APssJcgxYd2wlmlH4S1rx9K3f7YXUAX9pblgP8W+RXwqhMoBA4Rf9qYcwP21g6mjcB1g2IgWbQTmNHFOb3yilwCoeG6lFdGLmK3ME43TCE8YaIwgbe09QENo46wD8YJcsFgA5rZIOrxuO74sVZBM5hlG01kNcOvXok9zLoBOjGWMwIyXY84iPIEy+QsbL7ILeJMcB3xkfavj9J997UbfO71QF8bW9RIviVAAgq5cGU4JWXw/G4kWbJowfDYJreH44DCxgH0xmBimh3PssRMb0+5kOA4xg3LurzOaUR4CYqcHb6s8iPIAtRSvSHdtZPFa2rualtgIyPHGfjqz0iAJvzd1kx5RfgR6CltB9kXFgGp1fpOQCQI31wymbJCWDbXp9l0cwL+4sA1PXyzeoAvrVnlgh+ZnrFG2Eft6ORYHSs0ph2gY/ZkZa3I7oHIwRFpvsCdBomDKUCm9Ojc7BjXlyfTC3ZAfR2GW3U8UDoQp5HUX9+PGBgTtZXgpT4GsgtQe/tFZgMdAX2wen0Xr+RnvmIQ2vgex3UUegzvRdjzgXa+lrC/lnmH3Rv1Ic6EfuZsmyiTRkEjGt3++rpdfvenlEO8PuZHwV0CkSKeE9ncVwMgIXbp2cgAkV4msVIi/RK0ZT+mfMC2hFx/BiBvDsvBvhOItL+KmXktaRNFc5iWsc2YcwlrdDN6XxmcwfC/SRbmgvHkU69DVP+wRYit78vYGe4T+n+AJ9m6TY/XaKKrGyAH+ewLDuvT9KQ/pJdo0Mg2lR/0H2xfNZ+sovlAD+m/eytlfcWQoVI4I7B2xj8lQERHQIxna2djo0LZRKOY+9Gh4BRn5xFuoGGC7905sd5q/MkA11EeXQOsxt6eTNN+lsjwhEtJhE4OYVG7dh3AuJTwMMzpcS+NqALt/097R9mRGDnufhM7vPghe2YEx2DkNX5JZ0LOtnnazhL+xUd88E60pt9ujqAX+1CyeCvPE01eeUwvA+88S4fXdo0pOU5CFiz2/7ggIRhD+Bh9MY2vABUhlI5luI+IKxFpYwMNnIS7ATSmoWjkHpRRwiuV2m7olfZQpVFzJwNPEeEpv1MRzRs88AAexoivYHjhfVXt/MpzZ/oYoxxvtV5HPfHYj3oQ9hX2DOb9CGPx/s/69/tOwC/20m5Dv6zPuZaOY4ZYEU/ghk/K1cf+YTIDU+8RArOgN+RF8pImxuiepcp9ZGxy8hPIMX1NMWrxXHTM78VbTNgz+pCxnfi2598lEupuu95B/xe7rB/IvLv2Q5+mcqnA5r0ToA1vlcA2ws6pag9HEM75uW+MB/U0QZVFsIf7yYZjva/1r+vVgfwp03KAX7+nF+BXYH/xCmktB8X6xtaXThRXwAoX7wRuAM/VC6MDbyRDzkDdds/1lb0OU8f78sxmCeAuDDCs8gfxihnQf0ypZ+d/0/mDZnWc5wG0YWsC/RiZiFyhjP/JFoH0KgLQlj37iycD9nF7IIP7a48++O8oq9sw31Sx4KOnfTpwcHnj/X5annd/raiHOA/+6jPXY4rRgkECwjAPnMO3uZHBB/L/WgoENXRS/I86rbfiI43LtGItI7PioPeNwQ3DcAVnIBHEpwDHYKBXNzPBq2A5c+zunK+s/O90K10NtgunEv6HobTIF9aX0Mb6XKG9L1RJqAcQpcnZAuUJbhMEtDtWFJ5jGjEC5+qLkCOtpL4aMDHtmX+NeAI/jMB00ghSCVQ4b1K4RGcHlnFHMEA+UlOIRwh+pdk0o0y0e1F3PQH5+T9YNwqtVcGiXOywQVjLdYXaCZ6CHUE4xl91VZF8yq7mPDCT15C3eI+JDq/ALyBHuzQM35yMxwu2wXwqr5zsT8w5XcVTs76aa1jkMmMs8SX4juj53arvwYcwa8YVulHBXg7oWfa2a0mjA0fzRGtzDIIpFsJkQEMP134db78uXOa06gfaK6e+dHQT0G2Ed0fT5nKsmPgM6oJnrN5GcRgvEHnuL8XMoYgA9UT6EDX+LHe3lek/UPXN3Dq/c/S+UzvZSz24Ts6kqRDXjdlF4medUL1aq7Rjns0y7IX/TXgCH4WQL3TBOFyDCTbvGJ3zNmzETCDh1+g36Bf1MP8DniMwNAfooKn4Ax+nlM5jXZEEyO+bADqaJDOhgwWWIt1HU3/M44bmRu6kKME+RnQDfptQivkTvPyOCWP2XGJ6vuJdkIOYa+jrl0PsL/8SYCBPsM+4D6anot1wMFh5jjCXLj2KqDOgqJ6n/HeF5S/BjwH/5kj4E1WNMXtfFnHp/CkSSl4B0EACqkfZg8NIkKL9EMEan9O5A8f7YD86FgGuNsRnUOkIrqwVm5vlqLf4LfQ2DNgc10Zleqv+M4cj2cRRqBrwGrr3yJI/0ov71cAnVk4u6vv9ks768+Q9Ykjw6Azi47d3yt7tYIG17gc9pHuC9CpsZ6BR0xzRH2JXwOO4GdPZMW7ugCzQ3gpFBsGCIqbjwAa/FTaD5sz2sQGJLmQP89l2WtX4E+03uaOZnL2DU4Db6/R4BgohdHyx2OnY6r6Vs5u5ZWBq3Fenzgrf4Zsi8bv0wEAh14QlFi3AyR+gx905PNgG2ZWOK/SKY8jh2EF7aX0n9s8e1nIFpiW6GW2AG3rY3wN2MH/0Vr70GZF/WhERfe2/dUPU8x+gEP1q3mEt8WCBsA/6sD06Wuhm6H993gOGrHO4SA+WOv/Pp6Jhsal/7DDhee5+mMdih/LU+n8bA4ey7rGHzE52Rc5l+tR6fhkfLqkUzq1vA9j/Jn9qrYZbor5L/1YCvZVPyDCwXgty+vHF4BE10t5KS/lfSj/A0bORlHG5bGkAAAAAElFTkSuQmCC";
      var data = [20.3, 18.2, 11, 23.4, 29.1, 12, 16, 24];
      var datas = [22, 15, 14, 20.4, 21.1, 7, 14, 19];
      var barWidth = 20;
      var maxNum = 0;
      for (var i = 0; i < data.length; i++) {
        if (data[i] > maxNum) {
          maxNum = data[i];
        }
      }
      var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
      var option = {
        grid: {
          top: "10%",
          left: "10%",
          right: "12%",
          bottom: "0%",
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          data: data.map((item, index) => `No. ${index}`),
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: { fontSize: 18, color: "#02afff" },
          },
          axisLine: {
            show: false,
          },
          axisTick: false,
        },
        series: [
          {
            type: "pictorialBar",
            barWidth: barWidth,
            zlevel: 2,
            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: data.map(function (item) {
              return {
                value: item,
                symbol: bar,
              };
            }),
          },
          {
            type: "pictorialBar",
            barWidth: barWidth,
            zlevel: 2,
            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: datas.map(function (item) {
              return {
                value: item,
                symbol: bar,
              };
            }),
          },
        ],
      };

      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    detailedTwo44() {
      var myChart = this.$echarts.init(document.getElementById("detailedTwo4"));
      var data = [
        {
          name: "核燃料加工",
          value: 2530,
        },
        {
          name: "煤加工",
          value: 2541,
        },
        {
          name: "煤制品制造",
          value: 2542,
        },
        {
          name: "生物质燃料加工",
          value: 2530,
        },
        {
          name: "基础化学原料制造",
          value: 2541,
        },
        {
          name: "氮肥制造",
          value: 2542,
        },
      ];
      var arrName = getArrayValue(data, "name");
      var arrValue = getArrayValue(data, "value");
      var sumValue = eval(arrValue.join("+"));
      var objData = array2obj(data, "name");
      var optionData = getData(data);
      function getArrayValue(array, key) {
        var key = key || "value";
        var res = [];
        if (array) {
          array.forEach(function (t) {
            res.push(t[key]);
          });
        }
        return res;
      }
      function array2obj(array, key) {
        var resObj = {};
        for (var i = 0; i < array.length; i++) {
          resObj[array[i][key]] = array[i];
        }
        return resObj;
      }
      function getData(data) {
        var res = {
          series: [],
          yAxis: [],
        };
        for (let i = 0; i < data.length; i++) {
          // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
          res.series.push({
            name: "",
            type: "pie",
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [85 - i * 15 + "%", 88 - i * 15 + "%"],
            center: ["30%", "55%"],
            label: {
              show: false,
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              borderWidth: 5,
            },
            data: [
              {
                value: data[i].value,
                name: data[i].name,
              },
              {
                value: sumValue - data[i].value,
                name: "",
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
            ],
          });
          res.series.push({
            name: "",
            type: "pie",
            silent: true,
            z: 1,
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            radius: [85 - i * 15 + "%", 88 - i * 15 + "%"],
            center: ["30%", "55%"],
            label: {
              show: false,
            },
            itemStyle: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              borderWidth: 5,
            },
            data: [
              {
                value: 7.5,
                itemStyle: {
                  color: "rgb(3, 31, 62)",
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
              {
                value: 2.5,
                name: "",
                itemStyle: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0,
                },
                tooltip: {
                  show: false,
                },
                hoverAnimation: false,
              },
            ],
          });
          res.yAxis.push(data[i].name);
        }
        return res;
      }
      var option = {
        legend: {
          show: true,
          icon: "circle",
          top: "center",
          left: "60%",
          data: arrName,
          width: 200,
          padding: [0, 5],
          itemGap: 25,
          formatter: function (name) {
            return (
              "{title|" + name + "}{value|" + "   " + objData[name].value + "}"
            );
          },
          textStyle: {
            rich: {
              title: {
                fontSize: 18,
                lineHeight: 20,
                width: 150,
                color: "#fff",
              },
              value: {
                fontSize: 18,
                lineHeight: 20,
                width: 50,
                color: "#fff",
              },
            },
          },
        },
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a}<br>{b}:{c}({d}%)",
        },
        color: [
          "rgb(24, 183, 142)",
          "rgb(1, 179, 238)",
          "rgb(22, 75, 205)",
          "rgb(52, 52, 176)",
        ],
        grid: {
          top: "8%",
          bottom: "50%",
          left: "30%",
          containLabel: false,
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              inside: true,
              textStyle: {
                color: "#fff",
                fontSize: 18,
              },
              show: true,
            },
            data: optionData.yAxis,
          },
        ],
        xAxis: [
          {
            show: false,
          },
        ],
        series: optionData.series,
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    barCharts() {
      var bg =
        "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARYAAAAUCAMAAAB/LOLCAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAD9QTFRFAABwAAAAAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwAABwrxv9agAAABV0Uk5T/wA1p053q7yaZs0QRIlVJ++IId4ydKfDYQAAAFtJREFUeJzt0McNwDAQwLBzutPb/rMG/gbawOIIjCQQqYtoqxYxckv1BlvQZAvabEG9LSjbgnZb0GoLOV9byHPbQubFFjLaggZb0GQLumxBvS0ol5aj0U9pEfgA+DsJLXE1TzAAAAAASUVORK5CYII=";
      var bar =
        "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAP8AAAAUCAYAAABCi+uLAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAChxJREFUeJztXDGyJDUMlWeIuQY34AJLFdEuAQkXIOAAROREHICAA0BCFSkJByDhAgRcgIAYftPdY7mfnp7c/XfD/a7a325blmVZT5I9s9PspbyUl/Jelrb9uX+8vFkfvzze7MfRsziFKPei/bb+e+rP54y7wvdK+536UBYlG66P52be1buSrbctwL+tbcvT47n3wXxtpVuWx5P5LTO5tr7/LK8b67hmpV9sa6JN6e1MV4rHlXmdbiaztzfRBmW5KC/vixxf8eG5n2v/z8VXsy9W3r+tz0+WN+2poLpUMvgd8Ar8k/ogVe3etr3cJuMK/huAWkUPPFMf0aMsO88+ftvkZtRuBz224ZyDNxtjn8vfd+NajmcyPF5zn2/waLGPx4068uYxG88FDFr0BxnYoNXeoV4KPch9ZfsivUj9I/8ncIi3g607Wtddgz1yHulJaw16F+/c7vINgUlHY7zoC09VBx0NPl7u9vMK/s/tHcoB/raCX4HdhcY+dgxiIR7JykWyozGig37esMCjF3QQiQ/IgsYUHBM6C1w3eXIHT0PZSP5FOKa93MDgFOBm4Mf+WzYGNnQELALDxycdzhwBA/ZGulJ8eRy2Oy06Xgc8rH0Aq0fl5IQNdN3bUG+Dj2UbWqo1us7YUdrRj4APssJcgxYd2wlmlH4S1rx9K3f7YXUAX9pblgP8W+RXwqhMoBA4Rf9qYcwP21g6mjcB1g2IgWbQTmNHFOb3yilwCoeG6lFdGLmK3ME43TCE8YaIwgbe09QENo46wD8YJcsFgA5rZIOrxuO74sVZBM5hlG01kNcOvXok9zLoBOjGWMwIyXY84iPIEy+QsbL7ILeJMcB3xkfavj9J997UbfO71QF8bW9RIviVAAgq5cGU4JWXw/G4kWbJowfDYJreH44DCxgH0xmBimh3PssRMb0+5kOA4xg3LurzOaUR4CYqcHb6s8iPIAtRSvSHdtZPFa2rualtgIyPHGfjqz0iAJvzd1kx5RfgR6CltB9kXFgGp1fpOQCQI31wymbJCWDbXp9l0cwL+4sA1PXyzeoAvrVnlgh+ZnrFG2Eft6ORYHSs0ph2gY/ZkZa3I7oHIwRFpvsCdBomDKUCm9Ojc7BjXlyfTC3ZAfR2GW3U8UDoQp5HUX9+PGBgTtZXgpT4GsgtQe/tFZgMdAX2wen0Xr+RnvmIQ2vgex3UUegzvRdjzgXa+lrC/lnmH3Rv1Ic6EfuZsmyiTRkEjGt3++rpdfvenlEO8PuZHwV0CkSKeE9ncVwMgIXbp2cgAkV4msVIi/RK0ZT+mfMC2hFx/BiBvDsvBvhOItL+KmXktaRNFc5iWsc2YcwlrdDN6XxmcwfC/SRbmgvHkU69DVP+wRYit78vYGe4T+n+AJ9m6TY/XaKKrGyAH+ewLDuvT9KQ/pJdo0Mg2lR/0H2xfNZ+sovlAD+m/eytlfcWQoVI4I7B2xj8lQERHQIxna2djo0LZRKOY+9Gh4BRn5xFuoGGC7905sd5q/MkA11EeXQOsxt6eTNN+lsjwhEtJhE4OYVG7dh3AuJTwMMzpcS+NqALt/097R9mRGDnufhM7vPghe2YEx2DkNX5JZ0LOtnnazhL+xUd88E60pt9ujqAX+1CyeCvPE01eeUwvA+88S4fXdo0pOU5CFiz2/7ggIRhD+Bh9MY2vABUhlI5luI+IKxFpYwMNnIS7ATSmoWjkHpRRwiuV2m7olfZQpVFzJwNPEeEpv1MRzRs88AAexoivYHjhfVXt/MpzZ/oYoxxvtV5HPfHYj3oQ9hX2DOb9CGPx/s/69/tOwC/20m5Dv6zPuZaOY4ZYEU/ghk/K1cf+YTIDU+8RArOgN+RF8pImxuiepcp9ZGxy8hPIMX1NMWrxXHTM78VbTNgz+pCxnfi2598lEupuu95B/xe7rB/IvLv2Q5+mcqnA5r0ToA1vlcA2ws6pag9HEM75uW+MB/U0QZVFsIf7yYZjva/1r+vVgfwp03KAX7+nF+BXYH/xCmktB8X6xtaXThRXwAoX7wRuAM/VC6MDbyRDzkDdds/1lb0OU8f78sxmCeAuDDCs8gfxihnQf0ypZ+d/0/mDZnWc5wG0YWsC/RiZiFyhjP/JFoH0KgLQlj37iycD9nF7IIP7a48++O8oq9sw31Sx4KOnfTpwcHnj/X5annd/raiHOA/+6jPXY4rRgkECwjAPnMO3uZHBB/L/WgoENXRS/I86rbfiI43LtGItI7PioPeNwQ3DcAVnIBHEpwDHYKBXNzPBq2A5c+zunK+s/O90K10NtgunEv6HobTIF9aX0Mb6XKG9L1RJqAcQpcnZAuUJbhMEtDtWFJ5jGjEC5+qLkCOtpL4aMDHtmX+NeAI/jMB00ghSCVQ4b1K4RGcHlnFHMEA+UlOIRwh+pdk0o0y0e1F3PQH5+T9YNwqtVcGiXOywQVjLdYXaCZ6CHUE4xl91VZF8yq7mPDCT15C3eI+JDq/ALyBHuzQM35yMxwu2wXwqr5zsT8w5XcVTs76aa1jkMmMs8SX4juj53arvwYcwa8YVulHBXg7oWfa2a0mjA0fzRGtzDIIpFsJkQEMP134db78uXOa06gfaK6e+dHQT0G2Ed0fT5nKsmPgM6oJnrN5GcRgvEHnuL8XMoYgA9UT6EDX+LHe3lek/UPXN3Dq/c/S+UzvZSz24Ts6kqRDXjdlF4medUL1aq7Rjns0y7IX/TXgCH4WQL3TBOFyDCTbvGJ3zNmzETCDh1+g36Bf1MP8DniMwNAfooKn4Ax+nlM5jXZEEyO+bADqaJDOhgwWWIt1HU3/M44bmRu6kKME+RnQDfptQivkTvPyOCWP2XGJ6vuJdkIOYa+jrl0PsL/8SYCBPsM+4D6anot1wMFh5jjCXLj2KqDOgqJ6n/HeF5S/BjwH/5kj4E1WNMXtfFnHp/CkSSl4B0EACqkfZg8NIkKL9EMEan9O5A8f7YD86FgGuNsRnUOkIrqwVm5vlqLf4LfQ2DNgc10Zleqv+M4cj2cRRqBrwGrr3yJI/0ov71cAnVk4u6vv9ks768+Q9Ykjw6Azi47d3yt7tYIG17gc9pHuC9CpsZ6BR0xzRH2JXwOO4GdPZMW7ugCzQ3gpFBsGCIqbjwAa/FTaD5sz2sQGJLmQP89l2WtX4E+03uaOZnL2DU4Db6/R4BgohdHyx2OnY6r6Vs5u5ZWBq3Fenzgrf4Zsi8bv0wEAh14QlFi3AyR+gx905PNgG2ZWOK/SKY8jh2EF7aX0n9s8e1nIFpiW6GW2AG3rY3wN2MH/0Vr70GZF/WhERfe2/dUPU8x+gEP1q3mEt8WCBsA/6sD06Wuhm6H993gOGrHO4SA+WOv/Pp6Jhsal/7DDhee5+mMdih/LU+n8bA4ey7rGHzE52Rc5l+tR6fhkfLqkUzq1vA9j/Jn9qrYZbor5L/1YCvZVPyDCwXgty+vHF4BE10t5KS/lfSj/A0bORlHG5bGkAAAAAElFTkSuQmCC";
      var data = [20.3, 18.2, 11, 23.4, 29.1, 12, 16, 24];
      var barWidth = 20;
      var maxNum = 0;
      for (var i = 0; i < data.length; i++) {
        if (data[i] > maxNum) {
          maxNum = data[i];
        }
      }
      var myChart = this.$echarts.init(document.getElementById("barCharts"));
      var option = {
        grid: {
          top: "10%",
          left: "10%",
          right: "12%",
          bottom: "0%",
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          data: data.map((item, index) => `No. ${index}`),
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: { fontSize: 18, color: "#02afff" },
          },
          axisLine: {
            show: false,
          },
          axisTick: false,
        },
        series: [
          {
            type: "pictorialBar",
            barWidth: barWidth,
            zlevel: 2,
            data: data.map(function (item) {
              return {
                value: item,
                symbol: bar,
              };
            }),
          },
          {
            type: "pictorialBar",
            barWidth: barWidth,
            data: data.map(function (item) {
              return {
                realValue: item,
                value: maxNum,
                symbol: bg,
              };
            }),
            label: {
              show: true,
              position: "right",
              distance: 80,
              align: "right",
              formatter: function (params) {
                return params.data.realValue + " 万";
              },
              color: "#02afff",
              fontSize: 18,
            },
          },
        ],
      };

      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    detailen() {
      var myChart = this.$echarts.init(document.getElementById("detailen"));
      var option = {
        color: [
          "#EAEA26",
          "#906BF9",
          "#FE5656",
          "#01E17E",
          "#3DD1F9",
          "#FFAD05",
        ],
        grid: {
          left: -100,
          top: 50,
          bottom: 10,
          right: 10,
          containLabel: true,
        },
        // tooltip: {
        //   trigger: "item",
        //   formatter: "{b} : {c} ({d}%)",
        // },
        tooltip: {
          trigger: "item",
          backgroundColor: "#017D7D", // 修改背景颜色
          borderColor: "#66FFFF", // 修改字体颜色
          className: "custom-tooltip-box",
          formatter: function (params) {
            console.log(params);
            // 循环处理数据，展示数据
            // "<div class='custom-tooltip-style'>"

            var htmlText =
              "<div class='custom-tooltip-style'>" +
              '<div style="font-size:22px;height:52px;width:100%;font-weight:600;line-height:52px;text:indent:26px">' +
              params.name +
              "<span>" +
              "</span>" +
              "</div>" +
              '<div style="padding:0 5% 5% 10%;text-align:left">' +
              "<div >" +
              "<span style='margin-right:10px;font-size:22px;color:white;' >企业数量</span> " +
              '<span style="color:yellow;font-family:SourceHanSansCN-Bold;font-size:22px;letter-spacing:1.25px;font-weight:700;">' +
              +params.value +
              "</span> " +
              "<span style='font-size:22px;color:yellow;' >（" +
              params.percent +
              "%）" +
              "</span> " +
              "</div>" +
              "<div style='margin: 10px 0'>" +
              "<span style='margin-right:33px;font-size:22px;color:white;' >用电量</span> " +
              '<span style="color:orange;font-family:SourceHanSansCN-Bold;font-size:22px;letter-spacing:1.25px;font-weight:700;">' +
              "6.682亿" +
              "</span> " +
              "</div>" +
              "<div style='margin: 1opx 0'>" +
              "<span style='margin-right:10px;font-size:22px;color:white;' >碳排放量</span> " +
              '<span style="color:yellow;font-family:SourceHanSansCN-Bold;font-size:22px;letter-spacing:1.25px;font-weight:700;">' +
              "18.18万" +
              "</span> " +
              "</div>" +
              "</div>" +
              "</div>";

            return htmlText;
          },
        },
        polar: {},
        angleAxis: {
          interval: 1,
          type: "category",
          data: [],
          z: 10,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#0B4A6B",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            interval: 0,
            show: true,
            color: "#0B4A6B",
            margin: 8,
            fontSize: 16,
          },
        },
        radiusAxis: {
          min: 40,
          max: 120,
          interval: 20,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#0B3E5E",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            formatter: "{value} %",
            show: false,
            padding: [0, 0, 20, 0],
            color: "#0B3E5E",
            fontSize: 16,
          },
          splitLine: {
            lineStyle: {
              color: "#0B3E5E",
              width: 2,
              type: "solid",
            },
          },
        },
        calculable: true,
        series: [
          {
            type: "pie",
            radius: ["5%", "10%"],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 55,
              },
              emphasis: {
                show: false,
              },
            },
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#0B4A6B",
                  },
                },
              },
            ],
          },
          {
            type: "pie",
            radius: ["90%", "95%"],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 30,
                length2: 55,
              },
              emphasis: {
                show: false,
              },
            },
            name: "",
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#0B4A6B",
                  },
                },
              },
            ],
          },
          {
            stack: "a",
            type: "pie",
            radius: ["20%", "80%"],
            roseType: "area",
            zlevel: 10,
            label: {
              normal: {
                formatter: (params) => {
                  console.log(params);
                  return (
                    "{b| " +
                    params.name +
                    "}  " +
                    "{c|" +
                    params.percent.toFixed(0) +
                    "%}"
                  );
                },
                borderWidth: 0,
                borderRadius: 4,
                fontSize: 16,
                align: "center",
                color: "#3494BD",
                rich: {
                  b: {
                    fontSize: 16,
                    lineHeight: 20,
                    color: "#fff",
                    padding: [0, 0, 5, 0],
                  },
                  c: {
                    fontSize: 20,
                    lineHeight: 20,
                    color: "orange",
                  },
                },
              },
            },
            // label: {
            //   normal: {
            //     show: true,
            //     formatter: "{c}",
            //     textStyle: {
            //       fontSize: 12,
            //     },
            //     position: "outside",
            //   },
            //   emphasis: {
            //     show: true,
            //   },
            // },
            labelLine: {
              normal: {
                show: true,
                length: 20,
                length2: 55,
              },
              emphasis: {
                show: false,
              },
            },
            data: [
              {
                value: 10,
                name: "IDS",
              },
              {
                value: 5,
                name: "VPN",
              },
              {
                value: 15,
                name: "交换机",
              },
              {
                value: 25,
                name: "防火墙",
              },
              {
                value: 20,
                name: "WAF",
              },
              {
                value: 35,
                name: "堡垒机",
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  watch: {},
};
</script>
<style lang="less" scoped>
// 给父盒子清除默认已有样式
:deep(.custom-tooltip-box) {
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  // 给子盒子自定义样式
  .custom-tooltip-style {
    width: 292px;
    height: 165px;
    background-image: url("../assets/08/地图弹窗.png");
    background-size: cover;
    color: #fff;
  }
}
.content {
  /deep/ .el-table__body td .cell {
    white-space: normal !important;
  }
}

.two {
  /deep/ .el-table__body-wrapper {
    height: 195px !important;
  }
  .enselect {
    position: absolute;
    // left: 30px;
    img {
      // position: relative;
      float: left;
    }
    .text {
      position: absolute;
      top: 5px;
      left: 20px;
      // right: -10px;
      font-size: 22px;
      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: 400px;
    }
    #detailedTwo4 {
      width: 100%;
      height: 400px;
    }
  }

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

  .middle {
    // width: 1590px;
    width: 32.7%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    .imgboxone {
      background: url("../assets/08/总数据外框1.png") no-repeat;
      width: 100%;
      height: 17%;
      position: relative;
      top: 45%;
      left: 17%;
      .contents {
        position: absolute;
        padding: 10px;
        height: 100%;
        width: 80%;
        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;
            div {
              display: -webkit-inline-box;
            }
            span {
              font-size: 18px;
            }
            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: 30%;
        top: 35%;
      }
    }
  }
  .imgboxtwo {
    background: url("../assets/08/地图弹窗.png") no-repeat;
    background-size: 100%;
    float: right;
    right: 5%;
    top: 5%;
    width: 28vh;
    height: 28vh;
    position: relative;
    .content {
      height: 36%;
      padding: 0 15px 0 15px;
      box-sizing: border-box;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;

      .line {
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column nowrap;
        display: flex;
        flex-wrap: wrap;
        ul {
          height: 100%;
          li {
            text-align: left;
            height: 33%;
            font-size: 23px;
            color: #f8f8f8;
          }
        }
      }

      .total {
        .num {
          display: flex;
          flex-flow: column nowrap;
          justify-content: center;
          align-items: center;
          color: #ffffff;
          h5 {
            font-size: 28px;
          }
          .yellow {
            color: yellow;
          }
          .orange {
            color: orange;
          }
          span {
            float: left;
            font-size: 18px;
          }
        }
      }
    }
  }

  .right {
    // width: 604px;
    width: 16.8%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    #detailen {
      width: 100%;
      height: 350px;
    }
    .content {
      height: 80%;
      padding: 15px 15px 15px 15px;
      box-sizing: border-box;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      #barCharts {
        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>
