<template>
  <div class="map-index">
    <div :class="['map-index-left', !isScreen ? 'map-index-none' : '']">
      <div class="map-index-left-wrap">
        <map-item-container title="评估数据统计">
          <div class="content-assess-tab">
            <!-- <div :class="{ 'active': accessType == 0 }" @click="accessType = 0">评估</div>
            <div :class="{ 'active': accessType == 1 }" @click="accessType = 1">巡查</div> -->
          </div>
          <div class="content-assess-group">
            <div v-for="(item, index) in accessData" :key="'assess' + index" class="content-assess-item">
              <span class="snow" v-for="item in 30" :key="item.name" :style="random()"></span>
              <div class="content-assess-num">
                <div class="content-assess-num-txt">{{ item.count }}<span>{{ item.unit }}</span></div>
              </div>
              <div class="content-assess-title"><span>{{ item.name }}</span></div>
            </div>
          </div>
        </map-item-container>
        <map-item-container title="总体风险指数排名">
          <mapTable :tableList="tableList" :columns="colums" />
        </map-item-container>
        <map-item-container title="年度风险数量统计">
          <div ref="bar" style="width: 100%; height: 100%"></div>
        </map-item-container>
      </div>
    </div>
    <div :class="['map-index-center', !isScreen ? 'map-index-screen' : '']">
      <div class="echart-protect-left" @click="changeScreen">
        <img src="@/assets/map/left.png" alt="" />
      </div>
      <div class="echart-protect-center">
        <div class="echart-top-center" v-if="isScreen">
          <div class="echart-total-count" v-for="item in totalData" :key="item.name">
            <img src="../../assets//map/u21.png" alt="">
            <div class="echart-total-group">
              <div class="echart-total-title">{{ item.name }}</div>
              <div class="echart-total-num">{{ item.count }}</div>
            </div>
          </div>
        </div>
        <div ref="myEchart" class="echart-instance"></div>
        <div class="legend-map">
          <span>低风险</span>
          <span>一般风险</span>
          <span>较大风险</span>
          <span>重大风险</span>
        </div>
      </div>
      <div @click="changeScreen" class="echart-protect-right">
        <img src="@/assets/map/right.png" alt="" />
      </div>
    </div>
    <div :class="['map-index-right', !isScreen ? 'map-index-right-none' : '']">
      <div class="map-index-right-wrap">
        <map-item-container title="风险级别统计">
          <highcharts :options="levelStaticOptions" class="level-static">
          </highcharts>
        </map-item-container>
        <map-item-container title="事故类型统计" id="accident">
          <div class="echarts-accident">
            <div id="circleEchart"></div>
          </div>
        </map-item-container>
        <map-item-container title="项目风险级别排名">
          <div class="content-assess-tab">
            <div :class="{ 'active': assessLevelType == 0 }" @click="assessLevelType = 0">重大</div>
            <div :class="{ 'active': assessLevelType == 1 }" @click="assessLevelType = 1">较大</div>
            <div :class="{ 'active': assessLevelType == 2 }" @click="assessLevelType = 2">一般</div>
            <div :class="{ 'active': assessLevelType == 3 }" @click="assessLevelType = 3">低</div>
          </div>
          <div class="terminal-group">
            <el-table stripe :data="terminalList" height="100%" row-class-name="tr" cell-class-name="td" class="terminal">
              <el-table-column :show-overflow-tooltip="true" prop="projectName" min-width="140" label="项目名称">
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="deptName" label="所属区域">
              </el-table-column>
              <el-table-column prop="riskScore" label="风险分值" align="center">
              </el-table-column>
            </el-table>
          </div>
        </map-item-container>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
import axios from "axios";
import { mapTable, mapItemContainer, echartMap } from "./components/index";
import Highcharts from 'highcharts'
import { leftEvaluation, centerStatistic, leftRiskSort, leftAnnualSort, rightlevelStatic, rightAccessLevel, rightAccidentType, centerMap } from '@/api/map'
import * as d3 from 'd3';
import { deepClone } from '@/utils'
export default {
  name: "echarts",
  components: {
    echartMap,
    mapTable,
    mapItemContainer,
  },
  /**
   * class MapItem{
   *  constrouter(initData){
   *    this.data = initData
   *  }
   *  fetch(){
   *     
   *  }
   * }
   * 
   * */
  data() {
    return {
      Highcharts,
      accessType: 0,
      assessLevelType: 0,
      assessLevelColors: [[215, 162, 92], [108, 203, 137]],
      assessEchartsOptions: {
        series: [
          {
            name: "Pressure",
            type: "gauge",
            radius: '90%',
            detail: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            pointer: {
              icon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z",
              width: 1,
              length: "100%",
              offsetCenter: [0, "8%"],
              itemStyle: {
                color: "rgba(255, 252, 57,0.6)",
              },
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 8,
              itemStyle: {
                borderWidth: 2,
                borderColor: "rgba(255, 252, 57,0.6)",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                opacity: 0.1,
              },
            },
            progress: {
              show: true,
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 1,
                      color: "rgba(1, 87, 170,1)", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(0, 70, 136,0.4)", // 0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "rgba(2, 20, 31,0.6)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
          },
        ],
      },
      // 评估数据统计
      accessData: [
        {
          name: '评估项目',
          key: 'project',
          count: 0,
          unit: "项"
        },
        {
          name: "评估楼宇",
          key: "building",
          count: 0,
          unit: "栋"
        },
        {
          name: "评估楼层",
          key: "floor",
          count: 0,
          unit: "层"
        }
      ],
      // 全国风险数量
      totalData: [
        {
          name: '全国风险数量',
          key: "nationalRisk",
          count: 0
        },
        {
          name: '年度新增风险',
          key: "newRisk",
          count: 0
        },
        {
          name: '升级风险数量',
          key: "upRisk",
          count: 0
        },
        {
          name: '降级风险数量',
          key: "downRisk",
          count: 0
        },
      ],
      // 事故类型统计
      accidentEchartsList: [],
      // 风险级别统计
      levelStaticOptions: {
        chart: {
          type: 'pie',
          options3d: {
            enabled: true,
            alpha: 25
          },
          marginLeft: 0,
          spacingLeft: 0,
          backgroundColor: "transparent"
        },
        legend: {
          layout: "vertical",
          floating: true,
          align: 'right',
          verticalAlign: 'middle',
          itemMarginBottom: 10,
          itemMarginLeft: 20,
          itemStyle: {
            color: "#fff"
          }
        },
        title: {
          text: ''
        },
        credits: {
          enabled: false
        },
        plotOptions: {
          pie: {
            size: '90%',
            innerSize: '50%',
            depth: 15,
            showInLegend: true,
            dataLabels: {
              enabled: false
            },
            center: ['40%', '45%']
          }
        },
        series: [{
          data: []
        }]
      },
      myMap: null,
      mapData: [],
      myTopLeft: [],
      tableList: [],
      level: 1,
      isScreen: true,
      terminalList: [],
      annualOptions: {
        viewControl: {
          autoRotate: false
        },
        grid: {
          top: "0",
          bottom: "0",
        },
        xAxis3D: {
          name: '',
          type: "category",
          data: [],
          axisLabel: {
            interval: 0
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: false,
          },
          axisPointer: {
            show: false
          },
        },
        yAxis3D: {
          name: ' ',
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          axisLabel: {
            show: false
          },
          axisLine: {
            lineStyle: {
              opacity: 0
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisPointer: {
            show: false
          },
          splitArea: {
            interval: 0
          },
        },
        zAxis3D: {
          name: ' ',
          type: 'value',
          splitLine: {
            show: false
          },
          axisPointer: {
            show: false
          }
        },
        grid3D: {
          boxWidth: 240,
          boxDepth: 80,
          boxHeight: 120,
          axisLine: {
            lineStyle: { color: '#444' }
          },
          axisPointer: {
            lineStyle: { color: '#fff' },
          },
          splitLine: {
            lineStyle: { color: '#444' }
          },
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          },
          splitArea: {
            interval: 0
          },
          viewControl: {
            maxBeta: 0,
            minBeta: 0,
            minAlpha: 0,
            maxAlpha: 0
          },
          light: {
            main: {
              intensity: 1.2,
              shadow: true
            },
            ambient: {
              intensity: 0.3
            }
          }
        },
        series: [
          {
            data: [[0, 1, 4], [1, 1, 1], [2, 1, 2], [3, 1, 3]],
            type: "bar3D",
            emphasis: {
              itemStyle: {
                opacity: 0
              }
            }
          },
        ],
      },
      areaName: "",
      colums: [
        {
          props: 'index',
          color: "#fff",
        },
        {
          props: 'projectName',
          color: "#fff",
          width: "30%",
        },
        {
          props: 'deptName',
          color: "rgb(0, 255, 186)",
          width: "30%",
        },
        {
          props: 'province',
          color: "rgb(255, 234, 0)",
        },
        {
          props: 'riskNum',
          width: "10%",
        }
      ],
      mapDataNums: [],
      allStatus: 0
    };
  },
  mounted() {
    this.myMap = echarts.init(this.$refs.myEchart);
  },
  watch: {
    '$route': {
      handler(val) {
        const code = val.query.code || 100000;
        const name = val.query.name ? decodeURI(val.query.name) : '';
        this.level = val.query.level || 1;
        this.getMapData(code, name)
      },
      immediate: true
    }
  },
  methods: {
    random() {
      const x = Math.random() * 100 + 10;
      const y = Math.random() * 30 + 10;
      const size = Math.random() * 3 + 1;
      const opacity = Math.random();
      const duration = Math.random() * 5 + 5;
      return {
        '--snow-x': x + 'px',
        '--snow-y': y + 'px',
        '--snow-s': size + 'px',
        '--snow-o': opacity,
        "--snow-d": duration + 's'
      }
    },
    getMapData(id, name) {
      centerMap({
        level: this.level - 1,
        areaName: name,
        type: 0
      }).then(res => {
        this.mapDataNums = res.data;
        this.initMap(id, name);
      })
    },
    getColors(index) {
      return this.assessLevelColors[index % 2]?.join(',') || '227, 101, 88'
    },
    getColors1(index) {
      return this.assessLevelColors[index % 2].map((x, index) => index == 1 ? x : x + 50).join(',') || '227, 101, 88'
    },
    initAll() {
      this.getAssess();
      this.initListeners();
      this.getTableList();
      this.getTotal();
      this.annualEcharts();
      this.getlevelStatic();
      this.assessLevel();
      this.accidentType();
      if (this.allStatus == 0) return;
      this.isScreen = false
      setTimeout(() => {
        this.isScreen = true
      }, 800);
    },
    getlevelStatic() {
      const levelColor = [{
        color: '#00a0ea',
        name: '低风险'
      }, {
        color: 'yellow',
        name: '一般风险'
      }, {
        color: 'orange',
        name: '较大风险'
      }, {
        color: 'red',
        name: '重大风险'
      }];
      rightlevelStatic({ areaName: this.areaName, level: this.level - 1 }).then(res => {
        const list = levelColor.map((x) => {
          const num = res.data.find(val => val.levelName == x.name)
          return {
            ...x,
            y: num?.levelNum - '' || 0,
          }
        })
        setTimeout(() => {
          this.levelStaticOptions.series[0].data = list;
        }, 600)
      })
    },
    getAssess() {
      return leftEvaluation({ areaName: this.areaName, level: this.level - 1 }).then(res => {
        this.accessData.forEach(val => {
          val.count = res.data[val.key + 'Num']
        })
        // this.assessEcharts();
      })
    },
    assessEcharts() {
      // 评估数据统计
      for (let i = 0; i < this.accessData.length; i++) {
        const val = this.accessData[i]
        const echart = echarts.init(document.getElementById("leftTop" + i));
        const options = this.assessEchartsOptions;
        options.series[0] = {
          ...options.series[0],
          data: [{ value: val.count }],
          max: i == 0 ? 5000 : 100000,
        }
        echart.setOption(options);
        this.myTopLeft.push(echart);
      }
    },

    accidentType() {
      rightAccidentType({ areaName: this.areaName, type: '', level: this.level - 1 }).then(res => {
        d3.select("#circleEchart svg").remove();
        if (!res.data.length) return;
        const data = res.data, count = res.data.length - 1, centerCount = Math.ceil(count / 2), start = centerCount - 1, end = centerCount + 1;
        let mapData = res.data.slice(start, end);  //取中间值作为圆心
        let countI = 0;
        while (countI < count / 2) { //将数据按照大小交替排序
          const inverCountI = end + countI;
          inverCountI <= count && mapData.push(data[inverCountI]);
          countI < start && mapData.push(data[countI]);
          countI++;
        }
        // 
        if (mapData.length >= 6) {
          mapData.length == 6 && mapData.push({ typeName: '' });
          [mapData[5], mapData[6]] = [mapData[6], mapData[5]];
        }

        const maxNum = res.data[0].typeNum;
        const max = 40, min = 15;
        // 使用D3.js库中的circlePack布局
        const ele = document.querySelector('#accident')
        const containerWidth = ele.offsetWidth, containerHeight = ele.offsetHeight;
        const circles = mapData.map((x, index) => {
          return {
            radius: Math.max(max * x.typeNum / maxNum, min),
            name: x.typeName,
            num: x.typeNum,
            id: index
          }
        });

        const pack = d3.pack()
          .size([containerWidth, containerHeight])
          .padding(10); // 可选项，设置圆之间的间距
        let i = 0
        const root = d3.hierarchy({ children: circles })
          .sum(d => d.radius * 2);
        /**
         * 重排圆
         * 1.获取大圆&&小圆中有y比它小的
        */
        pack(root);

        // 将root.children按照从小到大排序
        // const rootChildren = root.children;
        // for (let i = 0; i < rootChildren.length; i++) {
        //   let index = i, val = rootChildren[i];
        //   let sortRootChildren = [...root.children.slice(2)];
        //   sortRootChildren = JSON.stringify(sortRootChildren)
        //   // .sort((a, b) => a.y - b.y)
        //   let has = index > 1 && sortRootChildren.find((x, i) => (x.value < val.value && x.y < val.y));  //获取需要替换的圆
        //   if (has) {
        //     const replaceIndex = rootChildren.findIndex(x => x.data.id === has.data.id);
        //     const y = rootChildren[index].y;
        //     rootChildren[index].y = rootChildren[replaceIndex].y;
        //     rootChildren[replaceIndex].y = y;
        //     [rootChildren[replaceIndex], rootChildren[index]] = [rootChildren[index], rootChildren[replaceIndex]]
        //     if (replaceIndex < i) {
        //       i = replaceIndex;
        //     }
        //   }
        // }

        pack(root);
        // 渲染结果
        const svg = d3.select("#circleEchart")
          .append("svg")
          .attr("width", containerWidth)
          .attr("height", containerHeight);

        const groupElements = svg.selectAll("g")
          .data(root.descendants().slice(1))
          .enter()
          .append("g")
          .attr('class', (d, i) => {
            return 'g'
          })
          .attr("transform", d => `translate(${d.x}, ${d.y})`)

        const d3Color = ['#5e63be', '#3779b3', '#5d3437', '#646f43', '#310b6a', '#8d6b46', '#061097', '#5f8c5d'];
        groupElements.append("circle")
          .attr("r", d => d.r)
          .attr("fill-opacity", 0.8)
          .attr("fill", (d, index) => d3Color[index % d3Color.length])

        // 添加文本元素
        const text = groupElements.append("text")
          .style("text-anchor", "middle")
          .style("dominant-baseline", "middle")
          .style("fill", "white") // 设置文本颜色
          .style('font-size', '12px')

        // tspan
        text.append("tspan")
          .attr("x", 0)
          .attr("y", '-0.3em')
          .text(d => d.data.name);
        text.append("tspan")
          .attr("x", 0)
          .attr("y", '1em')
          .text(d => d.data.num);

        let run = () => {
          groupElements.transition()
            .duration(() => {
              return Math.floor(Math.random() * 3 + 2) * 100
            })
            .ease(d3.easeLinear)
            .style("transform", (d, i) => `translate(${d.x}px, ${d.y + 3}px)`)
            .transition()
            .duration(300)
            .ease(d3.easeLinear)
            .style("transform", (d, i) => `translate(${d.x}px, ${d.y - 3}px)`)
            .transition()
            .on('end', (d) => {
              groupElements.style("transform", (d, i) => `translate(${d.x}px, ${d.y - 3}px)`)
              run()
            })
        }
        run()
      })
    },

    annualEcharts() {
      // 风险类型统计
      const bar = echarts.init(this.$refs.bar, this.annualOptions);
      leftAnnualSort({
        areaName: this.areaName,
        type: '',
        level: this.level - 1
      }).then(result => {
        const x = Object.keys(result.data);
        const z = Object.values(result.data);
        const data = x.reduce((total, currentValue, currentIndex) => { total.push([currentIndex, 0, z[currentIndex]]); return total }, [])
        this.annualOptions.xAxis3D.data = x;
        this.annualOptions.series[0] = {
          data,
          type: "bar3D",
        }
        bar.setOption(this.annualOptions)
      })
    },
    assessLevel() {
      rightAccessLevel({ areaName: this.areaName, level: this.level - 1, type: '' }).then(res => {
        this.terminalList = res.data
      })
    },
    getTotal() {
      centerStatistic({ areaName: this.areaName, type: '', level: this.level - 1 }).then(result => {
        this.totalData.forEach(val => {
          val.count = result.data[val.key + 'Num'] || 0
        })
      })
    },
    changeScreen() {
      this.isScreen = !this.isScreen;
      let i = 0;
      const timer = setInterval(() => {
        this.myMap.resize();
        i++;
        if (i > 20) {
          clearInterval(timer);
        }
      }, 350);
    },
    getTableList() {
      leftRiskSort({
        areaName: this.areaName,
        type: '',
        level: this.level - 1
      }).then(res => {
        this.tableList = res.data
      })

    },
    object2Geojson(data) {
      var featureCollection = { type: "FeatureCollection" };
      var features = new Array();

      for (let i = 0; i < data.length; i++) {
        var feature = { type: "Feature" };
        feature.properties = data[i];
        var geometry = { type: "Point" };
        geometry.coordinates = [data[i].LON, data[i].LAT];
        feature.geometry = geometry;
        features.push(feature);
      }

      featureCollection.features = features;
      return featureCollection;
    },
    initMap(code = 100000, name = '') {
      const _this = this;
      if (code != this.name) {
        this.myMap.clear();
      }

      this.name = code == 100000 ? "china" : code + "";
      this.areaName = code == 100000 ? "" : name;
      this.initAll()
      // `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${code}_full`
      axios
        .get(`/mapJson/${this.name}.json`, { dataType: "json" })
        .then((geoJson) => {
          if (!geoJson.data) {
            return;
          }
          echarts.registerMap(this.name, { geoJSON: geoJson.data });
          this.mapData = geoJson.data.features;
          this.level = this.mapData[0].properties.level;
          // 装饰省市区
          var regions = [];
          this.mapData.forEach(function (feature) {
            if (feature.properties.cp && feature.properties.cp.length) {
              const has = _this.mapDataNums.find(x => x.areaName && x.areaName.indexOf(feature.properties.name) >= 0)
              let riskNum = 0, areaColor = '', opacity;
              if (has) {
                riskNum = has.riskNum
                areaColor = has.areaColor
                opacity = has.areaColor ? 0.6 : 1
              }
              regions.push({
                name: feature.properties.name,
                itemStyle: {
                  color: areaColor,
                  opacity
                }
              });
            }
          });
          let boxWidth = 84, setCodeArr = [340000, 140000, 610000, 370300, 371600, 320900, 320900]
          if (code != 100000) {
            if (setCodeArr.includes(code - '')) {  //山西省和陕西省
              boxWidth = 45
            } else {
              boxWidth = 65
            }
          }
          if (this.level != 2) {
            // 标记坐标点位
            var scatters = [];
            _this.mapDataNums.forEach(val => {
              if (val.projectList) {
                scatters.push(...val.projectList.map(x => {
                  return {
                    value: [x.lng - '', x.lat - '', 0],
                    // symbol: "image://" + require('@/assets/login/user.png'),
                    itemStyle: {
                      color: x.riskColor,
                    },
                    borderWidth: 5,
                    info: x,
                    tooltip: {
                      backgroundColor: 'transparent',
                      padding: 0,
                      borderColor: 'transparent',
                      formatter: (...rest) => {
                        return `
                        <div class="tooltip-item">
                          <div>${x.projectName}</div>
                          <div class='tooltip-item-total'>风险总数量 ${String(x.riskSumNum).split('').map(x => `<span>${x}</span>`).join('')}</div>
                          <div class='tab4'>
                          <div class='tab4-item'><div class='title'>固有风险</div>${x.inherentNum}</div>  
                          <div class='tab4-item'><div class='title'>现状风险</div>${x.existingNum}</div>  
                          </div>
                        </div>
                      `
                      }
                    }
                  }
                }))
              }
            })
          }
          // 自定义scatter3D系列的symbol

          this.myMap.setOption(
            {
              geo3D: {
                map: this.name,
                show: false,
                boxWidth: 84,
                regionHeight: 6,
                viewControl: {
                  alpha: 80,
                },
              },
              xAxis3D: {
                name: "protein",
              },
              yAxis3D: {
                name: "fiber",
              },
              zAxis3D: {
                name: "sodium",
              },
              tooltip: {
                trigger: 'item',
                showContent: true,//是否显示提示框浮层，默认显示
                alwaysShowContent: false,//是否永远显示提示框内容，默认情况下在移出可触发提示框区域后 一定时间 后隐藏，设置为 true 可以保证一直显示提示框内容
                hideDelay: 0,//鼠标移出坐标点时，浮层隐藏的延迟时间，单位为 ms，在 alwaysShowContent 为 true 的时候无效
                formatter: function (params, ticket, callback) { return '' }
              },
              series: [
                {
                  type: "map3D",
                  boxWidth: boxWidth,
                  map: this.name,
                  regionHeight: 4,
                  itemStyle: {},
                  viewControl: {
                    alpha: 80,
                  },
                  label: {
                    show: true,
                    formatter: (params) => {
                      return params.name + " ";
                    },
                    textStyle: {
                      color: "#2cb0e2",
                      fontSize: 10,
                    },
                  },
                  itemStyle: {
                    borderWidth: 2,
                    borderColor: "#2cb0e2",
                    color: "rgba(0, 0, 0, 0.3)",
                    shadowColor: "rgba(0, 0, 0, 1)",
                    shadowBlur: 1,
                  },
                  data: regions,
                },
                {
                  type: "scatter3D",
                  symbol: 'circle',
                  // symbol: 'image://' + require('@/assets/map/circle.jpg'),
                  symbolSize: 8,
                  coordinateSystem: "geo3D",
                  data: scatters,
                  zlevel: 1,
                }
              ],
            },
          );
        });
    },
    initListeners() {
      const _this = this;
      this.myMap.on("click", "series.map3D", function (params) {

        if (_this.level == 4) {
          // _this.$router.push("/map/detail");
          return false
        }
        _this.allStatus = 1;
        const selectData = _this.mapData.find(
          (x) => x.properties.name == params.name
        );
        if (selectData) {
          _this.$router.push({
            name: _this.$route.name,
            query: {
              code: encodeURI(selectData.properties.id),
              level: _this.level,
              name: encodeURI(selectData.properties.name),
            }
          })
        }
      });
      this.myMap.on("click", "series.scatter3D", function (params) {
        const info = params.data.info;
        if (info && info.projectId) {
          _this.$router.push("/map/detail?projectId=" + info.projectId);
        }
      });
    },
  },
};
</script>
<style lang="scss">
.tooltip-item {
  width: 280px;
  background: url('../../assets/map/tooltip-bg.png') center center;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 30px;
  padding: 30px 20px 10px;
  color: #fff;

  .tooltip-item-total {
    font-size: 14px;
    margin: 5px 0;

    span {
      border: 1px solid #11afff;
      font-size: 20px;
      padding: 0 5px;
      margin-left: 15px;
      border-radius: 5px;
    }
  }
}

.tooltip-item>div {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tab4 {
  .tab4-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg,
        rgba(0, 125, 183, 0.4) 30%,
        rgba(0, 0, 0, 0) 70%);
    padding: 0 10px;
    margin: 10px 0;
    font-size: 14px;
    font-weight: 500;
    border-radius: 40px;
    height: 30px;
    line-height: 30px;

    .title {
      &:before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: rgb(0, 125, 183);
        margin-right: 10px;
      }
    }
  }

  .tab4-item:first-child {
    background: linear-gradient(90deg,
        rgba(243, 90, 76, 0.6) 30%,
        rgba(0, 0, 0, 0) 70%);

    .title:before {
      background-color: rgb(243, 90, 76);
    }
  }

  .tab4-item:last-child {
    background: linear-gradient(90deg,
        rgba(234, 156, 71, 0.6) 30%,
        rgba(0, 0, 0, 0) 70%);

    .title:before {
      background-color: rgb(234, 156, 71);
    }
  }
}
</style>
<style lang="scss" scoped>
@keyframes pathAnimation {
  0% {
    transform: translateY(-8px);
  }

  50% {
    transform: translateY(0);
  }

  // 100% {
  //   transform: translateY(5px);
  // }
}

.level-static {
  width: 100%;
  height: 100%;
}



.echart-top-center {
  width: 800px;
  margin: 0 auto;
  height: 90px;
  background: url('../../assets//map/centerTop.png') no-repeat center bottom;
  background-size: 85% 70%;
  display: flex;
  position: absolute;
  justify-content: center;
  left: 50%;
  top: 0;
  transform: translateX(-49%);

  .echart-total-count {
    color: #11afff;
    text-align: center;
    margin: 0 10px;
    position: relative;
    min-width: 40px;

    img {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 20px;
      left: 50%;
      margin-left: -25px;
    }

    .echart-total-group {
      font-size: 14px;
      animation: TotalAnimal 0.8s ease-in-out infinite;
      margin-top: -15px;
      z-index: 100;

      .echart-total-num {
        font-size: 28px;
        font-weight: bold;
      }

      .echart-total-title {}
    }

  }
}

.echart-top-center-none {
  opacity: 0;
}

@keyframes TotalAnimal {
  0% {
    transform: translateY(4px);
  }

  50% {
    transform: translateY(2px);
  }

  100% {
    transform: translateY(0);
  }
}

.terminal-group {
  height: 80%;
  margin-top: 5px;
  overflow: hidden;
}

.terminal-item-bar {
  display: flex;
  align-items: center;
  background: linear-gradient(to right, rgb(var(--bg-color)), rgba(var(--bg-color1), 1));
  color: #e3e3e3;
  height: 26px;
  border-radius: 26px;
  padding: 0 20px;
  margin-top: 10px;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;

  >span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .terminal-item-title {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    line-height: 21px;
    text-align: right;
    min-width: 100px;
    margin-right: 20px;
  }

  .el-progress {
    flex: 1;
  }

  .terminal-item-bar:nth-of-type(2n) {
    margin: 14px 0;
  }

  .terminal-item-bar:nth-of-type(n) {
    ::v-deep .el-progress-bar__inner {
      background: linear-gradient(90deg, rgba(0, 0, 0, 0), #ffe556);
    }
  }

  .terminal-item-bar:nth-of-type(2n) {
    ::v-deep .el-progress-bar__inner {
      background: linear-gradient(90deg, rgba(0, 0, 0, 0), #30e1ac);
    }
  }

  .terminal-item-bar:nth-of-type(3n) {
    ::v-deep .el-progress-bar__inner {
      background: linear-gradient(90deg, rgba(0, 0, 0, 0), #11afff);
    }
  }
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.1s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(-20px);
  opacity: 0;
}

.map-index {
  width: 100%;
  height: 100%;
  // overflow: hidden;

  &-left,
  &-right {
    width: 25%;
    height: 100%;
    float: left;
    position: absolute;
    transition: all 0.5s ease;
    transform: translateX(0);
  }

  &-center {
    width: 50%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    position: relative;
    transition: all 0.6s ease;

    .echart-protect-left,
    .echart-protect-right {
      z-index: 10;
    }

    .echart-protect-center {
      width: 88%;
      box-sizing: border-box;
      position: relative;
      margin: 0 auto;
      z-index: 10;
    }

    .echart-protect-left,
    .echart-protect-right,
    .echart-protect-bottom {
      height: 100%;
      position: absolute;
      left: 10px;
      z-index: 0;

      img {
        width: 80%;
        height: 100%;
      }
    }

    .echart-protect-right {
      left: auto;
      right: 0px;
      text-align: right;
    }

    .echart-protect-bottom {
      height: 100px;
      width: 100%;
      bottom: 0;
    }
  }

  .map-index-screen {
    float: none;
    width: 95%;
    // transform: translateX(-25%);
  }

  .map-index-none {
    transform: translateX(-1000px);
    position: absolute;
  }

  .map-index-right {
    position: absolute;
    top: 0;
    right: 20px;
  }

  .map-index-right-none {
    transform: translateX(120%);
  }

  &-left-wrap {
    margin-left: 20px;
    height: 100%;

    .map-content-item:first-child,
    .map-content-item:last-child {
      width: 110%;
    }

    .map-content-item:first-child {
      height: 25%;
    }

    .map-content-item:nth-of-type(2) {
      height: 40%;
    }
  }

  &-right-wrap {
    margin-right: 40px;
    height: 100%;

    .map-content-item:first-child,
    .map-content-item:last-child {
      width: 110%;
      transform: translateX(-6%);
    }
  }
}

.echart-instance {
  width: 800px;
  height: 100%;
  margin: 0 auto;

  // &-bottom {
  //   height: 30px;
  // }
}

.legend-map {
  position: absolute;
  bottom: 4%;
  left: 18%;
  color: #fff;
  display: flex;
  align-items: center;

  >span {
    font-size: 15px;
    margin-right: 15px;
    display: flex;
    align-items: center;

    &::before {
      content: ' ';
      width: 20px;
      height: 20px;
      border-radius: 50%;
      // background: #00a0ea;
      // background: radial-gradient(circle, #00a0ea, #00a0ea96, #00a0ea55);
      background: radial-gradient(circle, #00a0ea 20%, #00a0ea96 20%, #00a0ea96 50%, #00a0ea55 50%);
      overflow: hidden;
      margin-right: 6px;
    }
  }

  >span:nth-of-type(2) {
    &::before {
      // background: yellow;
      background: radial-gradient(circle, yellow, yellow 20%, rgba(255, 255, 0, 0.572) 20%, rgba(255, 255, 0, 0.572) 50%, rgba(255, 255, 0, 0.382) 50%, rgba(255, 255, 0, 0.382));
    }
  }

  >span:nth-of-type(3) {
    &::before {
      // background: orange;
      background: radial-gradient(circle, orange 20%, rgba(255, 166, 0, 0.572) 20%, rgba(255, 166, 0, 0.572) 50%, rgba(255, 166, 0, 0.382) 50%);
    }
  }

  >span:nth-of-type(4) {
    &::before {
      // background: red;
      // background: radial-gradient(circle, red, rgba(255, 0, 0, 0.572), rgba(255, 0, 0, 0.382));
      background: radial-gradient(circle, red 20%, rgba(255, 0, 0, 0.572) 20%, rgba(255, 0, 0, 0.572) 50%, rgba(255, 0, 0, 0.382) 50%);
    }
  }
}

.map-circle-item {
  border-radius: 50%;
  animation: circleAnimation 0.5s infinite;
  margin: 10px;
  break-inside: avoid;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 14px;
}

.map-circle-item:nth-of-type(2n + 1) {
  animation: circleAnimation 1.8s infinite;
}

.map-circle-item:nth-of-type(2n) {
  animation: circleAnimation 2s infinite;
}

.map-circle-item:nth-of-type(1) {
  animation: circleAnimation 2.5s infinite;
}

.map-circle-item:last-child {
  animation: circleAnimation 1.2s infinite;
}

@keyframes snow {
  0% {
    opacity: var(--snow-o);
    top: var(--snow-y);
  }

  100% {
    opacity: 0;
    top: 80%;
  }
}

@keyframes circleAnimation {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

::-webkit-scrollbar {
  display: none;
}

// 评估数据
.content-assess-item {
  display: inline-block;
  width: 30%;
  height: 100%;
  background: url("../../assets/map/content-assess-bottom.jpg") center center no-repeat;
  background-size: 85%;
  position: relative;
  overflow: hidden;

  .snow {
    display: flex;
    width: var(--snow-s);
    height: var(--snow-s);
    background: #fff;
    position: absolute;
    animation: snow var(--snow-d) ease-in infinite;
    top: var(--snow-y);
    left: var(--snow-x);
    opacity: var(--snow-o);
    border-radius: 50%;
  }


  .content-assess-title {
    height: 60px;
    width: 100%;
    text-align: center;
    font-size: 13px;
    color: #48aefb;

    span {
      background-image: -webkit-linear-gradient(bottom, #fff 20%, #aaa 60%, #fff 20%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .content-assess-echarts {}

  .content-assess-num {
    width: 100%;
    font-size: 21px;
    position: relative;
    margin-top: 15%;

    &-txt {
      font-weight: bolder;
      background-image: -webkit-linear-gradient(bottom, #eee, #eee, #8dc4ff, #eee, #eee);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
    }
  }

}

.content-assess-group {
  height: 100%;
  display: flex;
  justify-content: space-around;
}

.content-assess-tab {
  font-size: 10px;
  color: #fff;
  text-align: left;
  min-height: 5px;

  &>div {
    display: inline-block;
    width: 45px;
    text-align: center;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 50%;
    cursor: pointer;
  }

  &>.active {
    border-radius: 50%;
    border-image: linear-gradient(90deg, #48aefb, #87cafc) 1 1;
  }
}

.map-index {
  width: 98%;
  margin: 0 auto;

  .map-content-item {
    height: 34%;
  }
}

.echarts-accident {
  // width: 200px;
  height: 100%;
  margin: 0 auto;
  background: url("../../assets/map/accident.png") center bottom no-repeat;
  background-size: 100%;
  position: relative;
  text-align: center;

  #circleEchart {
    transform: translate(-2%, -15%);
  }

  >div {
    width: var(--width);
    height: var(--width);
    left: var(--left);
    top: var(--top);
    position: absolute;
    background: rgba($color: #fafafa, $alpha: .8);
    border-radius: 50%;
    color: #fff;
    background: rgba(var(--bg-color), .8);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    // animation: pathAnimation 0.3s infinite;
  }

  // >div:nth-of-type(2n) {
  //   animation: pathAnimation 0.6s infinite;
  // }

  // >div:nth-of-type(2n+1) {
  //   animation: pathAnimation 0.4s infinite;
  // }

  // >div:nth-of-type(3n) {
  //   animation: pathAnimation 0.3s ease-in-out infinite;
  // }
}

.terminal {
  background: transparent;

  &::before {
    background-color: transparent;
  }

  ::v-deep tr {
    background: transparent;
    color: #fff;
    font-size: 14px;
    text-align: center;

    &:hover {
      background: transparent;

      td.el-table__cell {
        background: transparent;
      }
    }
  }

  ::v-deep .el-table__header-wrapper th,
  ::v-deep .el-table__fixed-header-wrapper th {
    background: rgba($color: #11284d, $alpha: .6) !important;
    color: #00e4ff;
    font-size: 14px;
    padding: 5px 0;
    height: 0;
  }

  ::v-deep .el-table__row--striped {
    td.el-table__cell {
      background: rgba($color: #11284d, $alpha: .6) !important;
    }
  }

  ::v-deep th.el-table__cell.is-leaf,
  ::v-deep td.el-table__cell {
    border-bottom: none;
    padding: 5px 0;
  }
}

::v-deep .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
  display: none;
}
</style>