dvcp_v2_webapp/packages/bigscreen/dv/components/DvMap.vue

<template>
  <div class="AiDvMap">
    <div class="chart-map" :class="v" style="width: 100%; height: 100%"></div>
    <transition name="fade">
      <div class="info" v-if="isShowInfo">
        <div class="info-mask" @click="isShowInfo = false"></div>
        <div class="info-content">
          <div class="info-title">
            <h2>{{ title }}</h2>
          </div>
          <img src="https://cdn.cunwuyun.cn/dvcp/dv/qxn/close.png" @click="isShowInfo = false" />
          <div class="info-wrapper">
            <div class="info-wrapper__item">
              <label>下属单位：</label>
              <span>{{ info['派出所数量'] }}个派出所</span>
            </div>
            <div class="info-wrapper__item">
              <label>居民群：</label>
              <span>{{ info['群数量'] }}</span>
            </div>
            <div class="info-wrapper__item">
              <label>成员人数：</label>
              <span>{{ info['成员总数'] }}</span>
            </div>
            <div class="info-wrapper__item">
              <label>群人数：</label>
              <span>{{ info['群成员数量'] }}</span>
            </div>
            <div class="info-wrapper__item">
              <label>激活比例：</label>
              <span>{{ rate }}</span>
            </div>
            <div class="info-wrapper__item">
              <label>好友人数：</label>
              <span>{{ info['外部联系人数量'] }}</span>
            </div>
            <div class="info-wrapper__item">
              <label>群主人数：</label>
              <span>{{ info['群主人数'] }}</span>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  import * as echarts from 'echarts'

  export default {
    name: 'AiDvMap',

    props: {
      instance: Function
    },

    data() {
      return {
        info: {},
        timer: null,
        title: '',
        v: `AiDvMap-${new Date().getTime()}`,
        chart: null,
        isShowInfo: false,
        geoJSON: require('./geoJSon/qxnGeoJSON.json')
      }
    },

    computed: {
      rate () {
        if (!this.info['已激活']) {
          return '0%'
        }

        return (this.info['已激活'] / this.info['成员总数']).toFixed(2) * 100 + '%'
      }
    },

    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },

    methods: {
      initChart() {
        this.chart = echarts.init(document.querySelector(`.${this.v}`))
        echarts.registerMap('黔西南', this.geoJSON)

        let option = {
          geo: [
            {
              map: "黔西南",
              aspectScale: 1,
              zoom: 0.65,
              layoutCenter: ["50%", "50%"],
              layoutSize: "180%",
              show: true,
              roam: false,
              emphasis: {
                show: true,
                label: {
                  textStyle: {
                    color: "#FFFFFF"
                  },
                },
                itemStyle: {
                  // areaColor: '#fff'
                }
              },
              label: {
                normal: {
                  show: true,
                  color: '#fff',
                  fontSize: '14'
                }
              },
              itemStyle: {
                normal: {
                  borderColor: "rgba(2, 254, 255, 0.7)",
                  borderWidth: 2,
                  shadowColor: "rgba(2, 254, 255, 0.1)",
                  shadowOffsetY: 10,
                  shadowBlur: 120,
                  areaColor: "#0f7295",
                },
              }
            },
            // 重影
            {
              type: "map",
              map: "黔西南",
              zlevel: -1,
              aspectScale: 1,
              zoom: 0.65,
              layoutCenter: ["50%", "51%"],
              layoutSize: "180%",
              roam: false,
              silent: true,
              itemStyle: {
                normal: {
                  borderWidth: 1,
                  // borderColor:"rgba(17, 149, 216,0.6)",
                  borderColor: "rgba(2, 254, 255, 0.3)",
                  shadowColor: "rgba(2, 254, 255, 0.3)",
                  shadowOffsetY: 5,
                  shadowBlur: 15,
                  areaColor: "rgba(5,21,35,0.1)",
                },
              },
            },
            {
              type: "map",
              map: "黔西南",
              zlevel: -2,
              aspectScale: 1,
              zoom: 0.65,
              layoutCenter: ["50%", "52%"],
              layoutSize: "180%",
              roam: false,
              silent: true,
              itemStyle: {
                normal: {
                  borderWidth: 1,
                  // borderColor: "rgba(57, 132, 188,0.4)",
                  borderColor: "rgba(2, 254, 255, 0.2)",
                  shadowColor: "rgba(2, 254, 255, 0.24)",
                  shadowOffsetY: 5,
                  shadowBlur: 15,
                  areaColor: "transpercent",
                },
              },
            },
            {
              type: "map",
              map: "黔西南",
              zlevel: -3,
              aspectScale: 1,
              zoom: 0.65,
              layoutCenter: ["50%", "53%"],
              layoutSize: "180%",
              roam: false,
              silent: true,
              itemStyle: {
                normal: {
                  borderWidth: 1,
                  // borderColor: "rgba(11, 43, 97,0.8)",
                  borderColor: "rgba(2, 254, 255, 0.1)",
                  shadowColor: "rgba(2, 254, 255, 0.1)",
                  shadowOffsetY: 15,
                  shadowBlur: 10,
                  areaColor: "transpercent",
                },
              },
            }
          ],
          series: [
            {
              type: 'scatter',
              map: "黔西南",
              coordinateSystem: 'geo',
              z: 3,
              zlevel: 3,
              // symbol: 'none',
              symbolSize: 16,
              rippleEffect: {
                period: 2,
                scale: 4,
                brushType: 'fill'
              },
              label: {
                  show: false
              },
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: '#000',
                  borderColor: '#a18a3a',
                  borderWidth: 1
                },
                emphasis: {
                  show: false,
                  areaColor: null
                }
              },
              // label: {
              //   show: true,
              //   formatter: e => {
              //     const name = e.data[3]
              //     const value = e.data[2]
              //     return `{a|${name}}\n{b|${value}}`
              //   },
              //   fontSize: 16,
              //   rich: {
              //     a: {
              //       width: '100%',
              //       color: '#fff',
              //       lineHeight: 20,
              //       fontSize: 16
              //     },
              //     b: {
              //       backgroundColor: {
              //         // image: require('@/assets/images/point.png')
              //       },
              //       color: '#fff',
              //       height: 56,
              //       align: 'center',
              //       width: 50,
              //       fontSize: 16
              //     }
              //   }
              // },
              data: []
            }
          ]
        }
        this.chart.setOption(option)
        this.chart.on('click', e => {
          this.getInfo(e.name)
        })
      },

      getInfo (name) {
        this.title = `${name}公安局`
        this.instance.post(`/api/wxgridinfo/comprehensiveOverviewMap`, null, {
          params: {
            gridName: `${name}公安局`,
            corpId: 'wpytYEDgAA5zwi8Ak2mwFh3PwBKwwlWA'
          }
        }).then(res => {
          if (res.code === 0) {
            this.info = res.data
            this.isShowInfo = true
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .AiDvMap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    .info {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 111;
      width: 100%;
      height: 100%;
      overflow: hidden;

      .info-mask {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: 0.1);
      }

      .info-content {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 11;
        width: 378px;
        height: 254px;
        padding: 15px 22px 0;
        background: url(https://cdn.cunwuyun.cn/dvcp/dv/qxn/info-bg.png);
        background-size: 100% 100%;
        transform: translate(-50%, -50%);

        .info-wrapper {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          margin-top: 40px;

          .info-wrapper__item {
            display: flex;
            align-items: center;
            width: 50%;
            line-height: 1;
            margin-bottom: 20px;

            label {
              width: 70px;
              margin-right: 20px;
              color: #fff;
              text-align: right;
              font-size: 14px;
              font-weight: 500;
            }

            span {
              flex: 1;
              font-size: 14px;
              color: #FF8533;
            }
          }
        }

        img {
          position: absolute;
          top: 30px;
          right: 18px;
          z-index: 1;
          width: 24px;
          height: 24px;
          cursor: pointer;
          transition: all ease 300;

          &:hover {
            opacity: 0.6;
          }
        }

        .info-title {
          display: flex;
          align-items: center;

          h2 {
            font-size: 16px;
            color: #fff;
          }
        }
      }
    }
  }
</style>