<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 style="color: #fff; font-size: 30px">乡级行政区</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="detailedTwo2"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="middle" id="middle">
      <div class="map" style="height: 100%">
        <canvas
          id="myCanvas"
          width="1000"
          height="700"
          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">
              &nbsp;电量&nbsp;(kwh)&nbsp;&nbsp;&nbsp;&nbsp;
              <span style="color: yellow; display: contents">255.1万</span>
            </div>
          </div>
        </div>
        <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;&nbsp;7.23
                    <span style="color: #fff">万kw/h</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;&nbsp;1250<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;&nbsp;3673
                    <span style="color: #fff">吨/日</span>
                  </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="contentUl">
            <div class="top">
              <img src="../assets/05/数据分析图标.png" />
              <div class="texts" style="color: yellow">
                99
                <span style="font-size: 15px; color: #fff">个</span>
              </div>
              <h4>乡村行政区</h4>
            </div>
            <div class="top">
              <img src="../assets/05/数据分析图标.png" />
              <div class="texts" style="color: yellow">
                0
                <span style="font-size: 15px; color: #fff">个</span>
              </div>
              <h4>行政村</h4>
            </div>
            <div class="top">
              <img src="../assets/05/数据分析图标.png" />
              <div class="texts" style="color: yellow">
                0
                <span style="font-size: 15px; color: #fff">个</span>
              </div>
              <h4>自然村</h4>
            </div>
            <div class="bottom"></div>
            <div class="bottom">
              <img class="img1" src="../assets/05/数据分析图标.png" />
              <div class="texts">
                0
                <span style="font-size: 15px; color: #fff">个</span>
              </div>
              <h4 style="float: left">已治理自然村</h4>
            </div>
            <div class="bottom">
              <img class="img2" src="../assets/05/数据分析图标.png" />
              <div class="text">
                593
                <span style="font-size: 15px; color: #fff">个</span>
              </div>
              <h4>独立电表数</h4>
            </div>
            <div class="bottom"></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="detailedTwo3"></div>
            <div style="font-size: 30px; color: #fff">月份</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>
                  <td>自然村个数</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in pvTable" :key="index">
                  <td>{{ item.Counties }}</td>
                  <td>{{ item.Township }}</td>
                  <td>{{ item.administrative }}</td>
                  <td class="titleFont">{{ item.Natural }}</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: [
        {
          Counties: "东台市",
          Township: "三仓镇",
          administrative: "义仓村",
          Natural: "25",
        },
        {
          Counties: "东台市",
          Township: "三仓镇",
          administrative: "临海村",
          Natural: "25",
        },
        {
          Counties: "东台市",
          Township: "三仓镇",
          administrative: "义仓村",
          Natural: "25",
        },
        {
          Counties: "东台市",
          Township: "八一镇",
          administrative: "义仓村",
          Natural: "25",
        },
        {
          Counties: "东台市",
          Township: "三仓镇",
          administrative: "临海村",
          Natural: "25",
        },
        {
          Counties: "东台市",
          Township: "三仓镇",
          administrative: "义仓村",
          Natural: "25",
        },
        {
          Counties: "东台市",
          Township: "三仓镇",
          administrative: "义仓村",
          Natural: "25",
        },
        {
          Counties: "东台市",
          Township: "三仓镇",
          administrative: "八一村",
          Natural: "25",
        },
        {
          Counties: "东台市",
          Township: "三仓镇",
          administrative: "兰芝村",
          Natural: "25",
        },
        {
          Counties: "东台市",
          Township: "三仓镇",
          administrative: "兰芝村",
          Natural: "25",
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.xianDuan();
    this.detailedTwo11();
    this.detailedTwo22();
    this.detailedTwo33();
  },
  methods: {
    //地图画线
    xianDuan() {
      var canvas = document.getElementById("myCanvas");
      var ctx = canvas.getContext("2d");
      ctx.moveTo(600, 500); // moveTo(x,y) 定义线条开始坐标
      ctx.lineTo(770, 140); // 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 fontColor = "#fff";
      var myChart = this.$echarts.init(document.getElementById("detailedTwo1"));
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          textStyle: {
            fontSize: 18,
            color: "#fff",
          },
          data: ["电量KWh"],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "安丰镇",
              "草堰镇",
              "龙岗镇",
              "新丰镇",
              "伍佑街道",
              "步凤镇",
            ],
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              color: "#fff",
              fontSize: "18",
              interval: 0, //使x轴文字显示全
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                // color: 'rgba(66, 192, 255, .3)',
                color: "rgba(102,102,102,0.6)",
                width: 1,
              },
            },
          },
        ],
        series: [
          {
            name: "电量KWh",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            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,
            },
            data: [4000, 7000, 6000, 8000, 7000, 9000],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    detailedTwo22() {
      var myChart = this.$echarts.init(document.getElementById("detailedTwo2"));
      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}%)",
        },
        legend: {
          left: 120,
          bottom: 20,
          width: 400, //尺寸需要自己调节
          height: 20,
          formatter: ["{a|{name}}"].join("\n"),
          textStyle: {},
          textStyle: {
            rich: {
              a: {
                width: 95,
                fontSize: 18,
                color: "#fff",
                lineHeight: 12,
              },
            },
          },
          data: [
            "125018,2万",
            "125016,3万",
            "12501,3万",
            "10001,4万",
            "11399,5万",
            "12523,6万",
            "125017,7万",
            "125014,8万",
            "125011,9万",
          ],
        },
        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: 5,
                length2: 10,
              },
              emphasis: {
                show: false,
              },
            },
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#0B4A6B",
                  },
                },
              },
            ],
          },
          {
            type: "pie",
            radius: ["10%", "15%"],
            hoverAnimation: false,
            labelLine: {
              normal: {
                show: false,
                length: 5,
                length2: 10,
              },
              emphasis: {
                show: false,
              },
            },
            name: "",
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#0B4A6B",
                  },
                },
              },
            ],
          },
          {
            stack: "a",
            type: "pie",
            radius: ["20%", "60%"],
            roseType: "area",
            zlevel: 10,
            // label: {
            //   normal: {
            //     show: true,
            //     formatter: "{name}",
            //     textStyle: {
            //       fontSize: 20,
            //       color: "#fff",
            //     },
            //     position: "outside",
            //   },
            //   emphasis: {
            //     show: true,
            //   },
            // },
            // labelLine: {
            //   normal: {
            //     show: true,
            //     length: 10,
            //     length2: 30,
            //   },
            //   emphasis: {
            //     show: false,
            //   },
            // },

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

            itemStyle: {
              normal: {
                label: {
                  show: true,
                  fontSize: 20,
                  color: "#fff",
                  formatter: "{b}\n\n({d}%)", //自定义显示格式(b:name, c:value, d:百分比)
                },
              },
            },

            data: [
              {
                value: 10,
                name: "125018,2万",
              },
              {
                value: 5,
                name: "125016,3万",
              },
              {
                value: 15,
                name: "12501,3万",
              },
              {
                value: 25,
                name: "10001,4万",
              },
              {
                value: 20,
                name: "11399,5万",
              },
              {
                value: 35,
                name: "12523,6万",
              },
              {
                value: 35,
                name: "125017,7万",
              },
              {
                value: 35,
                name: "125014,8万",
              },
              {
                value: 35,
                name: "125011,9万",
              },
              {
                value: 60,
                name: "125011,9万",
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    detailedTwo33() {
      var myChart = this.$echarts.init(document.getElementById("detailedTwo3"));
      var option = {
        tooltip: {
          show: true,
          trigger: "item",
        },
        legend: {
          textStyle: {
            fontSize: 18, //字体大小
            color: "#ffffff", //字体颜色
            data: ["电量KWh"],
          },
        },
        grid: {
          left: "3%",
          right: "7%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            color: "#fff",
            fontSize: 16,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#195384",
            },
          },
          data: ["202301", "202302", "202303", "202304", "202305", "202306"],
        },
        yAxis: {
          type: "value",
          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: "电量KWh",
            type: "line",
            stack: "Total",
            smooth: true,
            symbol: "none",
            data: [120, 132, 101, 134, 90, 230, 210],
            itemStyle: {
              normal: {
                color: "yellow",
                lineStyle: {
                  color: "yellow",
                },
              },
            },
          },
        ],
      };
      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;
  }
}

// 滚动条的宽度
/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: calc(100vh - 350px);
    }
  }

  .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: calc(100vh - 250px);
    }
  }

  .middle {
    // width: 1590px;
    width: 32.7%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    .imgboxone {
      background: url("../assets/02/地图弹窗三个数据外框.png") no-repeat;
      width: 100%;
      height: 25%;
      position: relative;
      top: 45%;
      left: 40%;
      .contents {
        // height: 90%;
        position: absolute;
        padding: 10px;
        height: 100%;
        width: 32%;
        display: flex;
        flex-direction: row;
        /* 平分剩余空间 */
        justify-content: space-around;
        .lines {
          width: 100%;
          padding: 10px 0 0 1px;
          background: url("../assets/02/弹窗里的小框子.png") no-repeat;
        }

        .total {
          .num {
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: left;
            color: #ffffff;
            span {
              font-size: 16px;
            }
            h5 {
              font-size: 28px;
            }
            .yellow {
              color: yellow;
            }
            .orange {
              color: orange;
            }
          }
        }
      }
    }
    .imgboxtwo {
      background: url("../assets/07/弹窗.png") no-repeat;
      background-size: 100%;
      float: right;
      right: 5%;
      top: 5%;
      width: 28vh;
      height: 100%;
      position: relative;
      .content {
        padding: 5px;
        box-sizing: border-box;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;

        .line {
          width: 100%;
          height: 100%;
          text-align: left;
          font-size: 26px;
          color: #fff;
        }
      }
    }
    .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%;
      }
    }
  }

  .right {
    // width: 604px;
    width: 16.8%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    #detailedTwo3 {
      width: 100%;
      height: 300px;
    }
    .contentUl {
      display: flex;
      flex-wrap: wrap;
      height: 300px;
      width: 100%;

      .top {
        position: relative;
        flex-basis: calc(100% / 3);
        height: 50%;
        img {
          margin-top: 30%;
        }
        .texts {
          color: orange;
          position: absolute;
          z-index: 2;
          left: 43%;
          top: 25%;
          align-items: center;
          font-size: 32px;
        }
        h4 {
          color: #fff;
          font-size: 18px;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          line-height: 1;
          padding-top: 10%;
        }
      }

      .bottom {
        position: relative;
        flex-basis: calc(100% / 4);
        height: 50%;
        .img1 {
          margin-top: 40%;
          margin-right: 25%;
        }
        .img2 {
          margin-top: 40%;
          // margin-right: 25%;
        }
        .texts {
          color: orange;
          position: absolute;
          z-index: 2;
          left: 30%;
          top: 25%;
          align-items: center;
          font-size: 32px;
        }
        .text {
          color: orange;
          position: absolute;
          z-index: 2;
          right: 13%;
          top: 25%;
          align-items: center;
          font-size: 32px;
        }
        h4 {
          color: #fff;
          font-size: 18px;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          line-height: 1;
          padding-top: 10%;
          right: 20%;
        }
      }
    }

    #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>
