diantou/src_product/iam/audit/map/xm-audit-worldmap.vue

<template>
  <div :class="$style.mapBox">
    <div
      id="map"
      style="position: relative; width: 100%; height: 1200px; padding: 0; margin: 0; cursor: default; border-width: 0;"
    >
    </div>
    <div id="map1">
      <span
        ref="clickSpan"
        style="position: absolute; top: 105px; right: 80px;font-size:14px;font-weight:bold;color:#00C;text-decoration: underline; cursor: pointer;"
        >查看审计覆盖情况</span
      >
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts/lib/chart/map'
import 'echarts/map/js/world.js'
import geoCoordMap from './world.json'
import MapService from './map-service.js'
import world from 'echarts/map/json/world.json'
import components from './_import-components/xm-audit-worldmap-import'
function fngetcolor(content) {
  let color = 'green' // 审计已有1年的单位
  if (content === '1年及以上未审计') {
    color = 'red'
  } else if (content === '当年已审计') {
    color = 'green'
  }
  // else if (content === '2年审计') {
  //   color = 'blue' // 审计已有2年的单位
  // } else if (content === '3年审计') {
  //   color = '#EEEE00' // 审计已有2年的单位
  // } else if (content === '4年审计') {
  //   color = '#FFA500' // 审计已有4年的单位
  // }
  return color
}
window.fngetcolor = fngetcolor
var bl = 1
export default {
  name: 'XmAuditWorldmap2',
  metaInfo: {
    title: '审计世界地图',
  },
  data() {
    return {
      sfbl: 1,
      dataList: [],
      // showgj: [
      //   { name: '北京', value: [116.46, 39.92] }, // 以北京为例，设置初始化坐标
      // ],
      showgj: [
        '俄罗斯',
        '加拿大',
        '中国',
        '美国',
        '巴西',
        '澳大利亚',
        '印度',
        '阿根廷',
        '哈萨克斯坦',
        '阿尔及利亚刚果民主共和国',
        '沙特',
        '墨西哥',
        '印尼',
        '苏丹',
        '利比亚',
        '伊朗',
        '蒙古',
        '南非',
        '埃塞俄比亚',
        '埃及',
        '坦桑尼亚',
        '尼日利亚',
        '委内瑞拉',
        '巴基斯坦',
        '土耳其',
        '智利',
        '缅甸',
        '阿富汗',
        '法国',
        '南苏丹',
        '乌克兰',
        '泰国',
        '西班牙',
        '斯里兰卡',
        '印度尼西亚',
        '科特迪瓦',
        '纳米比亚',
        '日本',
        '德国',
        '几内亚',
      ],
    }
  },
  mounted() {
    //    初始化地图
    this.getList()
    this.$refs.clickSpan.addEventListener('click', this.handleClick)
  },
  methods: {
    handleClick() {
      // 处理点击 查看审计覆盖情况
      const now = new Date()
      const year = now.getFullYear()
      const param = {}
      param.type = 'gw'
      param.name = '境外'
      window.open(
        '#/xm-audit-mapcoverage-list?params=' +
          encodeURIComponent(JSON.stringify(param)) +
          '&year=' +
          year
      )
    },
    getList() {
      MapService.getWorldData().then((res) => {
        this.dataList = res.data
        this.initEchart()
      })
    },
    convertData(data, type) {
      // debugger
      var res = []
      for (var i = 0; i < data.length; i++) {
        // var geoCoord = geoCoordMap.mapregion[data[i].name]
        var geoCoord = ''
        var name = ''
        if (data[i].name) {
          var list = geoCoordMap.mapregion
          for (const key in list) {
            if (data[i].name.indexOf(key) !== -1) {
              name = key
              geoCoord = geoCoordMap.mapregion[key]
              break
            }
          }
        }
        if (geoCoord) {
          if (type === data[i].type) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
              type: geoCoord.concat(data[i].type),
            })
          }
        }
      }
      return res
    },
    initEchart() {
      const dataList = this.dataList
      const gj = this.showgj
      const _this = this
      var myChart = echarts.init(document.getElementById('map'))
      echarts.registerMap('world', world)
      var option = {
        legend: {
          show: true,
          right: 20,
          top: 20,
          orient: 'vertical',
        },
        tooltip: {
          axisPointer: {
            type: 'shadow',
          },
          enterable: true,
          // alwaysShowContent: true, // 永远显示
          confine: false,
          position: 'right',
          backgroundColor: '#fff', // 提示浮窗背景颜色
          borderColor: 'rgba(0, 0, 0, 0.16);',
          borderWidth: 1,
          extraCssText: 'width:350px',
          // 数据格式化
          formatter: function(params, callback) {
            console.log(params)
            var result = ''
            //
            result += `<div><div style="width:15px;" id='pic' class="chinamappictp"></div><div><span style="color:#000;font-size:20px;font-weight:bold;margin:0 2px;margin-bottom:10px;">${params.data.name}</span><span  style="float:right;color:#000;font-size:20px;margin-right:2px;margin-left:10px;">${params.value[2].year}</span></div>`
            for (var i = 0; i < params.value[2].datas.length; i++) {
              let title = params.value[2].datas[i].name
              if (title.length > 10) {
                title = title.substring(0, 25) + '...'
              }
              result += `<div  style="margin: 0 2px;" class="mapdivchina"><span style="color:gray" title="${params.value[2].datas[i].name}">${title}</span>`
              const color = fngetcolor(params.value[2].datas[i].level)
              result += `<span style="float:right;color:${color};margin-right:2px;margin-left:10px;">${params.value[2].datas[i].level}`
              if (params.value[2].datas[i].dataList) {
                result += ` <i class="qrm-arrow-right" onclick="fnshowdiv('${params.value[2].datas[
                  i
                ].name +
                  '_' +
                  i.toString()}')" ></i>`
              }
              result += `</span>`
              if (params.value[2].datas[i].dataList) {
                result += `<div id="mapdiv_${params.value[2].datas[i].name +
                  '_' +
                  i.toString()}" class="mapdivchinazitem" > `
                for (var j = 0; j < params.value[2].datas[i].dataList.length; j++) {
                  const item = params.value[2].datas[i].dataList[j]
                  let ztitle = item.name
                  if (ztitle.length > 10) {
                    ztitle = ztitle.substring(0, 10) + '...'
                  }
                  result += `<div  style="margin: 0 2px;"><span style="color:gray" title="${item.name}">${ztitle}</span>`
                  const itemcolor = fngetcolor(item.level)
                  result += `<span style="float:right;color:${color};margin-right:2px;margin-left:10px;">${item.level}`
                  result += `</span></div>`
                }
                result += ` </div>`
              }
              result += `</div>`
            }
            result += `</div>  `
            return result
          },
        },
        nameMap: geoCoordMap.nameMap,
        geo: {
          map: 'world',
          roam: true,
          zoom: 2,
          label: {
            normal: {
              show: true, // 是否显示对应地名
              textStyle: {
                color: '#1a1112',
              },
              formatter: function(params) {
                if (gj.find((i) => i === params.name)) {
                  return params.name
                } else {
                  return ''
                }
              },
            },
            emphasis: {
              // 对应的鼠标悬浮效果
              show: false,
              textStyle: {
                color: '#1a1112',
              },
            },
          },
          itemStyle: {
            normal: {
              areaColor: '#f7f7f7',
              borderColor: '#f01010',
            },
            emphasis: {
              borderWidth: 1,
              areaColor: '#f7f7f7',
              borderColor: '#f01010',
            },
          },
          center: [101.681865, 3.136134], // 设置地图中心点的坐标
        },
        backgroundColor: '#b3cefd',
        series: [
          {
            // name: '1年未审计单位',
            name: '当年已审计单位',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: this.convertData(dataList, 4),
            symbolSize: function(val) {
              return 8
            },
            encode: {
              value: 2,
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke',
            },
            hoverAnimation: true,
            label: {
              formatter: '{b}',
              position: 'right',
              show: false,
            },
            itemStyle: {
              color: 'green',
              shadowBlur: 20,
            },
            tooltip: {
              // 提示框样式
              backgroundColor: '#fff', // 提示浮窗背景颜色
              borderColor: 'rgba(0, 0, 0, 0.16);',
              borderWidth: 1,
              extraCssText: 'width:500px;box-shadow: 0 0 5px #008aff;',
            },
          },
          {
            // name: '审计未覆盖单位',
            name: '1年及以上未审计单位',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'circle',
            symbolSize: 12,
            tooltip: {
              // 提示框样式
              backgroundColor: '#fff', // 提示浮窗背景颜色
              borderColor: 'rgba(0, 0, 0, 0.16);',
              borderWidth: 1,
              extraCssText: 'width:500px;box-shadow: 0 0 5px #008aff;',
            },
            itemStyle: {
              color: 'red',
            },
            data: this.convertData(dataList, 2),
          },

          // {
          //   name: '2年未审计单位',
          //   type: 'effectScatter',
          //   coordinateSystem: 'geo',
          //   data: this.convertData(dataList, 2),
          //   symbolSize: function(val) {
          //     return 8
          //   },
          //   encode: {
          //     value: 2,
          //   },
          //   showEffectOn: 'render',
          //   rippleEffect: {
          //     brushType: 'stroke',
          //   },
          //   hoverAnimation: true,
          //   label: {
          //     formatter: '{b}',
          //     position: 'right',
          //     show: false,
          //   },
          //   itemStyle: {
          //     color: 'blue',
          //     shadowBlur: 20,
          //   },
          //   tooltip: {
          //     // 提示框样式
          //     backgroundColor: '#fff', // 提示浮窗背景颜色
          //     borderColor: 'rgba(0, 0, 0, 0.16);',
          //     borderWidth: 1,
          //     extraCssText: 'width:300px;box-shadow: 0 0 5px #008aff;',
          //   },
          // },
        ],
      }
      myChart.setOption(option)
      const chart = echarts.init(document.getElementById('map'))

      chart.on('georoam', function(params) {
        var option = chart.getOption() // 获得option对象
        if (params.zoom) {
          bl = bl * params.zoom

          if (bl > 3) {
            option.geo[0].label.formatter = function(params) {
              return params.name
            }
            chart.setOption(option) // 设置option
          } else {
            option.geo[0].label.formatter = function(params) {
              if (gj.find((i) => i === params.name)) {
                return params.name
              } else {
                return ''
              }
            }
            chart.setOption(option) // 设置option
          }
        }
      })
    },
    // sortChnage() {
    //   this.getList('sort')
    // },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.mapBox {
  height: 100%;
  // position: relative;
  margin-top: 20px;
  background: #b3cefd;
}
.mapTableBox {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 420px;
  padding: 10px;
  border: 1px solid #02f6f9;
  border-radius: 5px;
  box-shadow: 0 0 10px 5px #02f6f9;
}
.sort {
  float: right;
  margin-bottom: 10px;
}
.mapTableBox thead {
  color: #fff !important;
}
.mapTableBox .el-table {
  color: #fff !important;
  background-color: transparent !important;
}
.mapTableBox .el-table__header-wrapper th {
  background-color: rgba(2, 77, 186, 1) !important;
}
.mapTableBox tbody tr {
  background-color: #091e64 !important;
}
.mapTableBox .el-table__row--striped td {
  background-color: rgba(2, 77, 186, 1) !important;
}
.mapTableBox .el-table th.is-leaf,
.mapTableBox .el-table td {
  border: none !important;
}
.mapTableBox .el-table::before {
  display: none !important;
}
.mapTableBox .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #091e64;
}
.mapTableBox .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: rgba(2, 77, 186, 1) !important;
  border-color: rgba(2, 77, 186, 1) !important;
  box-shadow: -1px 0 0 0 rgba(2, 77, 186, 1) !important;
  box-shadow: -1px 0 0 0 rgba(2, 77, 186, 1) !important;
}
:global .worldmappictp {
  top: 0;
  float: left;
  width: 20px !important;
  height: 20px !important;
  background-color: initial !important;
  background-image: url('./dtb.png');
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-size: 100%;
  border: none !important;
}
:global .qrm-arrow-right {
  // position: absolute;
  // top: 14px;
  // right: 7px;
  display: inline-block;
  width: 8px;
  height: 10px;
  background: url('./right.png') no-repeat;
  background-color: initial !important;
  background-position-x: center;
  background-position-y: center;
  background-size: 100%;
}
:global .mapdivchina span {
  height: 30px;
  font-size: 18px;
  line-height: 30px;
}
:global .mapdivchinazitem span {
  height: 30px;
  font-size: 18px;
  line-height: 30px;
}
:global .mapdivchinazitem {
  position: absolute;
  left: 500px;
  display: none;
  width: 300px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.16);
  box-shadow: rgb(0, 138, 255) 0 0 5px;
}
:global .mapdivchina:hover {
  .mapdivchinazitem {
    display: inline;
  }
}
</style>