<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/screen/components/CenterMap.vue
 * @Date: 2022-07-27 11:05:26
 * @Description: 大屏map组件
 * @LastEditTime: 2023-09-01 15:20:23
 * @LastEditors: 曹文丽
-->
<script setup lang="ts">
import Dashboard from './Dashboard.vue';

import { onMounted, reactive, ref, Ref, nextTick, watch } from 'vue';
import { useECharts } from '../../../hooks/web/useECharts';
import type { EChartsOption } from 'echarts';
import axios from 'axios';
import shandongData from '../../../assets/map/shandong.json';
const shandong = ref<HTMLDivElement | null>(null);
const showdata = [
  {
    cityname: '济南市',
    level: '低',
    webName: '网站数',
    webNum: 1000,
    IpName: '接入IP数',
    IpNum: 1233,
    qiye: '接入企业数',
    qiyNam: 168,
    ziName: '存活资产数目',
    ziNum: 1000,
    goNum: 3,
    zgoNum: 0,
    dgoNum: 0,
    goNuml: 5,
    zgoNuml: 0,
    dgoNuml: 7
  },
  {
    cityname: '淄博市',
    level: '低',
    webName: '网站数',
    webNum: 1300,
    IpName: '接入IP数',
    IpNum: 1489,
    qiye: '接入企业数',
    qiyNam: 145,
    ziName: '存活资产数目',
    ziNum: 1300,
    goNum: 1,
    zgoNum: 2,
    dgoNum: 0,
    goNuml: 3,
    zgoNuml: 6,
    dgoNuml: 8
  },
  {
    cityname: '枣庄市',
    level: '低',
    webName: '网站数',
    webNum: 600,
    IpName: '接入IP数',
    IpNum: 897,
    qiye: '接入企业数',
    qiyNam: 154,
    ziName: '存活资产数目',
    ziNum: 600,
    goNum: 1,
    zgoNum: 1,
    dgoNum: 5,
    goNuml: 3,
    zgoNuml: 5,
    dgoNuml: 8
  },
  {
    cityname: '东营市',
    level: '低',
    webName: '网站数',
    webNum: 530,
    IpName: '接入IP数',
    IpNum: 698,
    qiye: '接入企业数',
    qiyNam: 187,
    ziName: '存活资产数目',
    ziNum: 530,
    goNum: 1,
    zgoNum: 0,
    dgoNum: 4,
    goNuml: 1,
    zgoNuml: 0,
    dgoNuml: 10
  },
  {
    cityname: '烟台市',
    level: '低',
    webName: '网站数',
    webNum: 754,
    IpName: '接入IP数',
    IpNum: 800,
    qiye: '接入企业数',
    qiyNam: 230,
    ziName: '存活资产数目',
    ziNum: 754,
    goNum: 1,
    zgoNum: 2,
    dgoNum: 3,
    goNuml: 1,
    zgoNuml: 4,
    dgoNuml: 10
  },
  {
    cityname: '日照市',
    level: '低',
    webName: '网站数',
    webNum: 1000,
    IpName: '接入IP数',
    IpNum: 1200,
    qiye: '接入企业数',
    qiyNam: 321,
    ziName: '存活资产数目',
    ziNum: 1200,
    goNum: 1,
    zgoNum: 2,
    dgoNum: 0,
    goNuml: 2,
    zgoNuml: 5,
    dgoNuml: 0
  },
  {
    cityname: '威海市',
    level: '低',
    webName: '网站数',
    webNum: 1000,
    IpName: '接入IP数',
    IpNum: 1094,
    qiye: '接入企业数',
    qiyNam: 301,
    ziName: '存活资产数目',
    ziNum: 301,
    goNum: 1,
    zgoNum: 0,
    dgoNum: 6,
    goNuml: 5,
    zgoNuml: 0,
    dgoNuml: 10
  },
  {
    cityname: '泰安市',
    level: '低',
    webName: '网站数',
    webNum: 874,
    IpName: '接入IP数',
    IpNum: 1028,
    qiye: '接入企业数',
    qiyNam: 156,
    ziName: '存活资产数目',
    ziNum: 874,
    goNum: 0,
    zgoNum: 1,
    dgoNum: 3,
    goNuml: 0,
    zgoNuml: 2,
    dgoNuml: 4
  },
  {
    cityname: '淮坊市',
    level: '低',
    webName: '网站数',
    webNum: 1200,
    IpName: '接入IP数',
    IpNum: 1633,
    qiye: '接入企业数',
    qiyNam: 240,
    ziName: '存活资产数目',
    ziNum: 1200,
    goNum: 2,
    zgoNum: 3,
    dgoNum: 3,
    goNuml: 2,
    zgoNuml: 5,
    dgoNuml: 9
  },
  {
    cityname: '济宁市',
    level: '低',
    webName: '网站数',
    webNum: 432,
    IpName: '接入IP数',
    IpNum: 654,
    qiye: '接入企业数',
    qiyNam: 187,
    ziName: '存活资产数目',
    ziNum: 432,
    goNum: 3,
    zgoNum: 0,
    dgoNum: 3,
    goNuml: 5,
    zgoNuml: 0,
    dgoNuml: 9
  },
  {
    cityname: '滨州市',
    level: '低',
    webName: '网站数',
    webNum: 690,
    IpName: '接入IP数',
    IpNum: 890,
    qiye: '接入企业数',
    qiyNam: 230,
    ziName: '存活资产数目',
    ziNum: 690,
    goNum: 1,
    zgoNum: 4,
    dgoNum: 5,
    goNuml: 1,
    zgoNuml: 5,
    dgoNuml: 0
  },
  {
    cityname: '德州市',
    level: '低',
    webName: '网站数',
    webNum: 990,
    IpName: '接入IP数',
    IpNum: 1029,
    qiye: '接入企业数',
    qiyNam: 200,
    ziName: '存活资产数目',
    ziNum: 990,
    goNum: 2,
    zgoNum: 3,
    dgoNum: 1,
    goNuml: 5,
    zgoNuml: 5,
    dgoNuml: 6
  },
  {
    cityname: '聊城市',
    level: '低',
    webName: '网站数',
    webNum: 875,
    IpName: '接入IP数',
    IpNum: 998,
    qiye: '接入企业数',
    qiyNam: 250,
    ziName: '存活资产数目',
    ziNum: 875,
    goNum: 1,
    zgoNum: 1,
    dgoNum: 3,
    goNuml: 3,
    zgoNuml: 7,
    dgoNuml: 6
  },
  {
    cityname: '临沂市',
    level: '低',
    webName: '网站数',
    webNum: 1004,
    IpName: '接入IP数',
    IpNum: 1290,
    qiye: '接入企业数',
    qiyNam: 150,
    ziName: '存活资产数目',
    ziNum: 1004,
    goNum: 1,
    zgoNum: 2,
    dgoNum: 1,
    goNuml: 2,
    zgoNuml: 3,
    dgoNuml: 1
  },
  {
    cityname: '菏泽市',
    level: '低',
    webName: '网站数',
    webNum: 556,
    IpName: '接入IP数',
    IpNum: 876,
    qiye: '接入企业数',
    qiyNam: 100,
    ziName: '存活资产数目',
    ziNum: 556,
    goNum: 0,
    zgoNum: 3,
    dgoNum: 5,
    goNuml: 0,
    zgoNuml: 5,
    dgoNuml: 8
  }
];
const detildata = ref('');
const initMapChart = () => {
  const { setOptions, echarts, getInstance } = useECharts(shandong as Ref<HTMLDivElement>);
  console.log(useECharts);
  echarts.registerMap('shandong', shandongData);
  const zoom = 1.15;
  const top = '12%';
  const left = '10%';
  let options = {
    geo: {
      map: 'shandong',
      zlevel: -1,
      top: top,
      left: left,
      zoom: zoom, //当前视角的缩放比例
      aspectScale: 1.1, //长宽比
      roam: false,
      silent: true,
      itemStyle: {
        areaColor: 'rgba(33, 92, 140, 0.86)',
        shadowColor: 'rgba(33, 92, 140, 0.86)',
        borderColor: '#00F9FF',
        borderWidth: 1.5,
        shadowOffsetX: 10,
        shadowOffsetY: 0,
        shadowBlur: 1
      }
    },
    tooltip: {
      show: false,
      trigger: 'item',
      borderColor: 'rgba(5, 207, 255, 0.28)',
      backgroundColor: 'rgba(10, 42, 79, 0.8)' //经过设置rgba调节背景颜色与透明度
    },
    series: [
      {
        type: 'map',
        map: 'shandong',
        zlevel: 1,
        geoIndex: 1,
        top: top,
        left: left,
        zoom: zoom, //当前视角的缩放比例
        aspectScale: 1.1, //长宽比
        showLegendSymbol: false, // 存在legend时显示
        selectedMode: false,
        label: {
          show: true,
          color: 'rgba(255,255,255,.7)',
          fontSize: 12
        },
        roam: false,
        itemStyle: {
          areaColor: 'rgba(33, 92, 140, 0.86)',
          borderColor: '#2DCDFF',
          borderWidth: 0.5,
          opacity: 1
        },
        emphasis: {
          label: {
            color: 'rgba(255,255,255,.7)'
          },
          itemStyle: {
            areaColor: 'rgba(5, 207, 255, 0.43)',
            borderColor: '#2DCDFF',
            borderWidth: 1,
            opacity: 1
          }
        },
        data: []
      }
    ]
  } as EChartsOption;
  setOptions(options);
  let _data = getInstance();
  _data.on('click', (e) => {
    showdata.map((item) => {
      if (item.cityname == e.name) {
        detildata.value = item;
        detilshow.value = true;
      }
    });
    console.log(e.name);
  });
  // echarts
};
const detilshow = ref(false);
const lookdata = () => {
  console.log(detilshow.value);
  detilshow.value = true;
};
const lookdata1 = () => {
  detilshow.value = false;
};
onMounted(() => {
  detildata.value = showdata[0];
  initMapChart();
});
</script>

<template>
  <div class="custom-center-map">
    <!-- <v-chart class="mapchart" :option="options" ref="shandong" /> -->

    <div ref="shandong" class="chart-content"></div>
    <div class="mapvalue" v-if="detilshow">
      <div
        style="height: 24px; font-size: 18px; font-family: Source Han Sans CN; font-weight: 400; color: #ffffff; text-align: center; margin-top: 5px">
        {{ detildata.cityname }}</div>
      <div style="height: 179px; margin-top: 10px; margin-top: 14px; margin-left: 14px">
        <div style="width: 150px; float: left; position: relative">
          <Dashboard style="height: 120px; margin-top: 20px"></Dashboard>
          <span
            style="position: absolute; top: 55%; left: 36%; font-size: 18px; font-family: Microsoft YaHei; font-weight: 400; color: #53ccfb">{{
              detildata.level }}</span>
          <div class="cont-left">
            <span class="detil-name">风险总体评估等级</span>
          </div>
        </div>
        <div style="float: left; width: 174px; height: 149px; margin-top: 20px; margin-left: 18px">
          <div class="name-right">
            <span style="">{{ detildata.webName }}</span>
            <span style="">{{ detildata.webNum }}</span>
            <div style="width: 10px; height: 1px; background: #53ccfb"></div>
          </div>
          <div class="name-right">
            <span style="">{{ detildata.IpName }}</span>
            <span style="">{{ detildata.IpNum }}</span>
            <div style="width: 10px; height: 1px; background: #53ccfb"></div>
          </div>
          <div class="name-right">
            <span style="">{{ detildata.qiye }}</span>
            <span style="">{{ detildata.qiyNam }}</span>
            <div style="width: 10px; height: 1px; background: #53ccfb"></div>
          </div>
          <div class="name-right">
            <span style="">{{ detildata.ziName }}</span>
            <span style="">{{ detildata.ziNum }}</span>
            <div style="width: 10px; height: 1px; background: #53ccfb"></div>
          </div>
        </div>
      </div>
      <div class="cutr-bot">
        <div style="">
          <div>
            <span class="vuy">高危资产</span>
            <span class="loading"><el-progress type="circle" :percentage="detildata.goNum"
                :color="[{ color: '#EA4668', percentage: detildata.goNum }]" /> <span>{{ detildata.goNum }}</span></span>
          </div>
          <div style="margin-top: 50px">
            <span class="vuy">中危资产</span>
            <span class="loading"><el-progress type="circle" :percentage="detildata.zgoNum"
                :color="[{ color: '#EEA810', percentage: detildata.zgoNum }]" /> <span>{{ detildata.zgoNum
                }}</span></span>
          </div>
          <div style="margin-top: 100px">
            <span class="vuy">低危资产</span>
            <span class="loading"><el-progress type="circle" :percentage="detildata.dgoNum"
                :color="[{ color: '#02D9D7', percentage: detildata.dgoNum }]" /> <span>{{ detildata.dgoNum
                }}</span></span>
          </div>
        </div>
        <div style="">
          <div>
            <span class="vuy">高危漏洞</span>
            <span class="loading"><el-progress type="circle" :percentage="detildata.goNuml"
                :color="[{ color: '#EA4668', percentage: detildata.goNuml }]" /> <span>{{ detildata.goNuml
                }}</span></span>
          </div>
          <div style="margin-top: 50px">
            <span class="vuy">中危漏洞</span>
            <span class="loading"><el-progress type="circle" :percentage="detildata.zgoNuml"
                :color="[{ color: '#EEA810', percentage: detildata.zgoNuml }]" /> <span>{{ detildata.zgoNuml
                }}</span></span>
          </div>
          <div style="margin-top: 100px">
            <span class="vuy">低危漏洞</span>
            <span class="loading"><el-progress type="circle" :percentage="detildata.dgoNuml"
                :color="[{ color: '#02D9D7', percentage: detildata.dgoNuml }]" /> <span>{{ detildata.dgoNuml
                }}</span></span>
          </div>
        </div>
      </div>
    </div>
    <div class="imgbut" style="" v-if="detilshow" @click="lookdata1"></div>
    <div class="imgbut1" style="" v-if="!detilshow" @click="lookdata"></div>
  </div>
</template>


<style lang="scss">
.custom-center-map {
  position: relative;
  width: 100%;
  height: 466px;
  margin-top: 20px;
  margin-bottom: 27px;
  background: url('../../../assets/image/img_mapbg.png') no-repeat !important;
  background-size: 100% !important;

  .chart-content {
    width: 100%;
    height: 100%;
  }
}

.mapvalue {
  width: 368px;
  height: 396px;
  position: absolute;
  right: 30px;
  top: 41px !important;
  background: url('../../../assets/image/img_maptc.png') no-repeat !important;
  background-size: 100% !important;
}

.imgbut {
  cursor: pointer;
  width: 22px;
  height: 38px;
  position: absolute;
  right: 0;
  top: 50px !important;
  background: url('../../../assets/image/img_mapzd.png') no-repeat !important;
  background-size: 100% !important;
}

.imgbut1 {
  cursor: pointer;
  width: 22px;
  height: 38px;
  position: absolute;
  right: 0;
  top: 50px !important;
  background: url('../../../assets/image/img_mapzk.png') no-repeat !important;
  background-size: 100% !important;
}

.detil-name {
  height: 16px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  margin: 0 auto;
  line-height: 30px;
  text-align: center;
  display: inherit;
}

.cont-left {
  width: 142px;
  height: 30px;
  background: rgba(46, 89, 149, 0.55);
  border-radius: 3px;
}

.name-right {
  height: 30px;
  width: 100%;
  background: rgba(47, 72, 104, 0.49);
  margin-bottom: 8px;

  >span {
    line-height: 30px;
    color: #fff;
  }

  >span:nth-of-type(1) {
    margin-left: 16px;
    height: 15px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
  }

  >span:nth-of-type(2) {
    height: 14px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #fffefe;
    float: right;
    margin-right: 10px;
  }
}

.cutr-bot {
  width: 339px;
  height: 162px;
  background: rgba(47, 72, 104, 0.45);
  border-radius: 3px;
  margin-left: 14px;

  >div {
    width: 49%;
    height: 100%;
    position: relative;
  }

  >div:nth-of-type(1) {
    float: left;
  }

  >div:nth-of-type(2) {
    float: right;
  }
}

.loading {
  right: 14px !important;
  position: absolute;
  margin-top: 19px;

  >span {
    position: absolute;
    width: 16px;
    height: 11px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    left: 35%;
    top: 15%;
  }
}
</style>
<style >
.el-progress-circle {
  width: 30px !important;
  height: 30px !important;
}

.el-progress__text {
  display: none;
}

.vuy {
  margin-left: 25px;
  width: 59px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  position: absolute;
  margin-top: 25px;
}
</style>
