bonus-ui/src/views/home/components/provincial/Top2.vue

<template>
  <div>
    <div class="top-btns">
      <div class="btn" :class="{ active: btnIndex == 1 }" @click="handleBtn(1)">总价值数</div>
      <div class="btn" :class="{ active: btnIndex == 2 }" @click="handleBtn(2)">在库装备数</div>
      <div class="btn" :class="{ active: btnIndex == 3 }" @click="handleBtn(3)">机械化率</div>
    </div>
    <div class="map-box">
      <div class="echarts" id="mapChart"></div>
    </div>
  </div>
</template>

<script>
import { getUnitEquipmentConfigurationApi, getEquipmentNumberApi, getMechanizationRateApi } from '@/api/wsScreen'
import * as echarts from 'echarts'
import 'echarts-gl'

let mapImg = require('./Map/assets/img/anhui.png')
import labelBg from './Map/assets/img/value-bg.png'
let mapJson = require('./Map/ah.json')

export default {
  data() {
    return {
      btnIndex: 1,
      cityData: [],
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    handleBtn(index) {
      if (this.btnIndex == index) return
      this.btnIndex = index
      this.cityData = []
      this.getInfo()
    },
    async getInfo() {
      try {
        let res = null
        if (this.btnIndex == 1) {
          res = await getUnitEquipmentConfigurationApi()
          if (!res.data) return
          res.data = res.data.filter((item) => item.location)
          this.cityData = res.data.map((item) => {
            let value = item.location.split(',')
            value.push(item.totalValue)
            // console.log('🚀 ~ getInfo ~ value:', value)
            return {
              ...item,
              value,
            }
          })
        } else if (this.btnIndex == 2) {
          res = await getEquipmentNumberApi()
          if (!res.data) return
          res.data = res.data.filter((item) => item.location)
          this.cityData = res.data.map((item) => {
            let value = item.location.split(',')
            value.push(item.num)
            // console.log('🚀 ~ getInfo ~ value:', value)
            return {
              ...item,
              value,
              deptName: item.name,
            }
          })
        } else if (this.btnIndex == 3) {
          res = await getMechanizationRateApi()
        }
        this.$nextTick(() => {
          console.log('🚀 ~ 地图数据 ~ this.cityData:', this.cityData)
          this.initChart()
        })
        console.log('🚀 ~ 地图数据 ~ res:', res)
      } catch (error) {
        console.log('🚀 ~ 地图数据 ~ error:', error)
        // this.initChart()
      }
    },
    initChart(jsonData = mapJson) {
      // 模拟数据
      let arr = this.cityData.map((item) => {
        return {
          ...item,
          name: item.cityName,
        }
      })

      echarts.registerMap('ah', jsonData)
      const charEle = document.getElementById('mapChart')
      const myChart = echarts.init(charEle)
      // let tooltip = gzjhTooltip(arr)
      const option = {
        tooltip: {
          show: true,
          backgroundColor: 'rgba(0,0,0,0)',
          borderWidth: 0,
          padding: 0, // 👈 关键 1：干掉外壳内边距
          extraCssText: 'box-shadow:none;border-radius:0;', // 👈 关键 2：干掉阴影 & 圆角

          formatter: function (e) {
            let n = e.name
            let res = ''
            arr.forEach((data) => {
              // console.log('🚀 ~ 提示数据 ~ data:', data)
              if (data.cityName === n) {
                res =
                  "<div style='width: 260px;height: 285px; background: url(" +
                  require('./Map/assets/img/dialog.png') +
                  ") no-repeat;background-size:100% 100%;'>" +
                  "<div style='width: 260px;height: 34px;display: flex;align-items: center;text-shadow:0px 3px 6px #001441; padding-left: 30px;font-family: DS-TITLE;color:#FFF;font-size:22px;padding-top: 10px;'>" +
                  data.deptAbbreviation +
                  '</div>' +
                  "<div style='margin-top:10px;margin-bottom:5px;width: 260px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  '<div>装备价值：' +
                  '</div>' +
                  "<div style='font-family: OPPOSans;margin-left: 10px;color: #666; font-size: 18px'>" +
                  data.totalValue +
                  " <span style='color:#666;font-size:14px'> 万元</span>" +
                  '</div>' +
                  '</div>' +
                  "<div style='width: 260px;margin-top:10px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  '<div>装备数量：' +
                  '</div>' +
                  "<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
                  data.totalEquipmentQuantity +
                  "<span style='color:#666;font-size:14px'> 台</span>" +
                  '</div>' +
                  '</div>' +
                  "<div style='width: 260px;margin-top:10px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  '<div>配置率：' +
                  '</div>' +
                  "<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
                  data.configRate +
                  "<span style='color:#666;font-size:14px'> %</span>" +
                  '</div>' +
                  '</div>' +
                  "<div style='width: 260px;margin-top:10px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  '<div>线路数量：' +
                  '</div>' +
                  "<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
                  data.lineNum +
                  "<span style='color:#666;font-size:14px'> 台</span>" +
                  '</div>' +
                  '</div>' +
                  "<div style='width: 260px;margin-top:10px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  '<div>变电数量：' +
                  '</div>' +
                  "<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
                  data.substationNum +
                  "<span style='color:#666;font-size:14px'> 台</span>" +
                  '</div>' +
                  '</div>' +
                  "<div style='width: 260px;margin-top:10px;height: 25px;display: flex;align-items:center;font-family:Source Han Sans CN;font-size: 16px;color: #666;background: url(" +
                  ") no-repeat;background-size:100%;margin-left:20px'>" +
                  '<div>电缆数量：' +
                  '</div>' +
                  "<div style='font-family: OPPOSans;margin-left: 10px;color: #666'; font-size: 18px>" +
                  data.cableNum +
                  "<span style='color:#666;font-size:14px'> 台</span>" +
                  '</div>' +
                  '</div>' +
                  '</div>'
              }
            })
            return res
          },
        },
        geo3D: {
          map: 'ah',
          zoom: 1,
          roam: false,
          label: { show: false },
          itemStyle: {
            opacity: 0, //.01 // important!
          },
          emphasis: {
            disabled: true,
          },
          regionHeight: 0,
          shading: 'lambert',

          viewControl: {
            zoomSensitivity: false,
            rotateSensitivity: 0,
            projection: 'orthographic',
            autoRotate: false,
            autoRotateAfterStill: 1,
            orthographicSize: 100,
            minAlpha: 20, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
            maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
            animation: false, // 是否开启动画。[ default: true ]
            animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
            animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
          },
          light: {
            //光照阴影
            main: {
              color: '#02fce7', //光照颜色
              intensity: 0.5, //光照强度
              shadow: true, //是否显示阴影
              shadowQuality: 'ultra', //阴影质量 ultra //阴影亮度
              alpha: 30,
              beta: 90,
            },
            ambient: {
              color: '#fff',
              intensity: 1,
            },
          },
          zlevel: -8,
        },
        // 要显示的散点数据
        series: [
          {
            left: 0,
            top: 6,
            bottom: 22,
            type: 'map3D',
            map: 'ah',
            roam: false,
            data: arr,
            itemStyle: {
              // color: "#4b6f52",
              color: 'transparent',
              borderWidth: 2,
              borderColor: '#b8cad1',
              opacity: 1,
            },
            emphasis: {
              disabled: false, // 👈 一定要打开
              label: {
                show: false,
                color: '#fff',
              },
              itemStyle: {
                color: 'rgba(44, 186, 178, 0.45)', // 👈 青绿色半透明背景
                borderColor: '#2cbab2', // 👈 高亮描边
                borderWidth: 2,
              },
            },
            regionHeight: 0,
            shading: 'lambert',
            viewControl: {
              zoomSensitivity: false,
              rotateSensitivity: 0,
              projection: 'orthographic',
              autoRotate: false,
              autoRotateAfterStill: 1,
              orthographicSize: 92,
              animation: false, // 是否开启动画。[ default: true ]
              animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
              animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
            },
            label: {
              show: true,
              color: '#FFF',
              position: 'top',
              fontSize: 12,
              fontWeight: '600',
            },
            light: {
              //光照阴影
              main: {
                color: 'rgb(14,70,82)', //光照颜色
                intensity: 0.1, //光照强度
                shadow: true, //是否显示阴影
                shadowQuality: 'ultra', //阴影质量 ultra //阴影亮度
                alpha: 30,
                beta: 90,
              },
              ambient: {
                color: '#fff',
                intensity: 1,
              },
            },
            zlevel: 1,
            zoom: 1,
            scaleLimit: {
              // 限制缩放的比例
              min: 1, // 最小缩放比例
              max: 1, // 最大缩放比例
            },
          },
          {
            type: 'scatter3D',
            data: arr,
            symbol: 'circle',
            symbolSize: 11,
            coordinateSystem: 'geo3D',
            tooltip: { show: false },
            label: {
              show: false,
              // position: 'top', // 先指定一个基准位置（如 'top'）
              // offset: [0, -10], // 向上偏移 10px（x 方向 0，y 方向 -10）
              // triggerEvent: true,
              // formatter: (params) => {
              //   // console.log('🚀 ~ initChart ~ params:', params)
              //   const val = params.data.value || []
              //   let unit = ''
              //   if (this.btnIndex === 1) unit = '万元'
              //   else if (this.btnIndex === 2) unit = '台'
              //   else if (this.btnIndex === 3) unit = '%'
              //   return val.length
              //     ? `{val|${val[2]} ${unit}}\n{name|${params.data.deptAbbreviation}}`
              //     : `{name|${params.data.deptAbbreviation}}`
              // },
              // rich: {
              //   val: {
              //     backgroundColor: { image: labelBg },
              //     height: 28,
              //     minWidth: 70,
              //     lineHeight: 28,
              //     padding: [0, 10],
              //     align: 'center',
              //     verticalAlign: 'middle',
              //     color: '#fff',
              //     fontSize: 23,
              //   },
              //   name: {
              //     color: '#fff',
              //     fontFamily: 'DS-TITLE',
              //     fontSize: 21,
              //     padding: [6, 0, 0, 0],
              //   },
              // },
            },
            itemStyle: {
              color: 'rgba(217, 94, 0, 1)',
            },
            zlevel: 1,
          },
        ],
        graphic: {
          elements: [
            {
              type: 'image',
              style: {
                image: mapImg, // 图片的 URL
                width: 456, // 图片宽度
                height: 440, // 图片高度
                // 位置根据实际需求调整
                x: 0,
                y: 0,
              },
              left: 'center',
              top: 'center',
            },
          ],
        },
      }
      myChart.setOption(option)
      // 监听地图绑定双击事件（双击进入地图下一级）
      myChart.on('click', (params) => {
        console.log('🚀 ~ 点击 ~ params-->:', params)
        console.log('🚀 ~ initChart ~ params.data-->>:', params.data)
        if (!params.data) return
        this.$router.push({
          path: '/equipment/manage/equipment-ledger',
          query: {
            parentId: params.data.parentId,
            deptId: params.data.deptId,
          },
        })
        if (params.seriesType === 'map3D' && params.data) {
          let city =
            params.data.deptName == '安徽送变电工程有限公司' ? '安徽送变电' : params.data.name.replace(/市$/, '')

          console.log('🚀 ~ initChart ~ this.$router:', this.$router)
          // this.$router.push({
          //   path: '/screen/cityScreen',
          //   query: {
          //     cityName: city,
          //   },
          // })
          // window.open(`${window.location.origin}/screen/cityScreen?cityName=${city}`, '_blank')
        }
      })
      myChart.on('mouseover', (params) => {
        // console.log('🚀 ~ 移入 ~ params:', params)
      })
      myChart.on('mouseout', () => {
        // this.selectedCity = null
      })
      return myChart
    },
  },
}
</script>

<style lang="scss" scoped>
.top-btns {
  display: flex;
  align-items: center;

  .btn {
    margin-right: 24px;
    height: 30px;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
  }

  .active {
    color: #2cbab2;
    border-bottom: 2px solid #2cbab2;
  }
}

.map-box {
  width: 100%;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.echarts {
  width: 100%;
  height: 100%;
}
</style>