jinshui-screen/src/views/next/screen-content-map/index.vue

<template>
  <div class="screen-content-map">
    <div
      id="amap-container"
      :style="{ transform: `scale(${mapScale}) translate(-50%, -50%)` }"
    >
      <div class="loadmore-container">
        <div class="loading"></div>
        <div class="tip">地图初始化中，请稍后...</div>
      </div>
    </div>

    <div class="statistics-list">
      <div
        class="list-item"
        v-for="(item, index) in statisticsList"
        :key="index"
        @click="showMapContent(item)"
      >
        <div class="title">{{ item.label }}</div>
        <div class="num">{{ item.value }}</div>
      </div>
    </div>

    <div class="map-bottom-decoration"></div>

    <div class="map-tab-list">
      <div
        :class="['tab-item', currentTab === item.label ? 'active' : '']"
        v-for="(item, index) in mapTabList"
        :key="index"
        @click="chooseTab(item)"
      >
        <div class="icon">
          <img
            :src="currentTab === item.label ? item.selectIcon : item.icon"
            alt="图标"
          />
        </div>
        <div class="label">{{ item.label }}</div>
      </div>
    </div>

    <div
      :class="['map-serch', collapse ? 'collapse' : '']"
      @click.stop="collapse = false"
    >
      <el-select v-model="searchSelect">
        <el-option
          v-for="(item, index) in searchOptionList"
          :key="index"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-input v-model="searchValue" placeholder="请输入"></el-input>
      <div class="search-icon" @click.stop="threeSearch">
        <img src="@/assets/images/search-icon.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import AMapLocaClass from './AMapLocaClass'
import { getCommunityDistrict, getCommunityGeoPolygon, getCommunityGeoLine, getGridGeoPolygon, getMapStatistics } from 'api/screen-content-center'
import { getCommunityDetail } from 'api/screen-content-left'
import { mapGetters, mapActions } from 'vuex'
import Bus from 'utils/eventBus'
import { numAnimation } from 'utils/common'
export default {
  name: 'screen-content-map',
  data () {
    return {
      mapScale: 1,
      statisticsList: [
        { label: '居民', value: 0 },
        { label: '房屋', value: 0 },
        { label: '社区/管区', value: 0 },
        { label: '网格', value: 0 },
        { label: '网格员', value: 0 },
        { label: '党员', value: 0 }
      ],
      mapTabList: [
        // { icon: require('@/assets/images/red-cross-blue-icon.png'), label: '红十字会', selectIcon: require('@/assets/images/red-cross-yellow-icon.png') },
        { icon: require('@/assets/images/volunteer-blue-icon.png'), label: '志愿者', selectIcon: require('@/assets/images/volunteer-yellow-icon.png') }
      ],
      currentTab: '',
      searchOptionList: [
        { label: '以房找人', value: '1' },
        { label: '以人找人', value: '2' },
        { label: '以城找人', value: '3' },
        { label: '搜企业', value: '4' },
        { label: '搜商铺', value: '5' },
        { label: '搜村居', value: '6' }
      ],
      searchSelect: '1',
      searchValue: '',
      collapse: true
    }
  },
  computed: {
    ...mapGetters(['scale', 'mapLevel', 'streetId', 'communityId'])
  },
  watch: {
    scale: {
      immediate: true,
      handler: function (val) {
        this.mapScale = 1 / val
      }
    },
    mapLevel (val) {
      if (val) {
        this.getMapStatistics()
      }
    }
  },
  created () {
    Bus.$off('drowDownToGrid', this.drowDownToGrid.bind(this))
    Bus.$on('drowDownToGrid', this.drowDownToGrid.bind(this))
  },
  mounted () {
    this.getMapStatistics()
    /* eslint-disable */
    Promise.all([
      this.getCommunityDistrict(),
      this.getCommunityGeoPolygon(),
      this.getCommunityGeoLine(),
      this.getGridGeoPolygon()]).then(([communityJSON, communityGeoJson, communityGeoLineJson, gridGeoJson]) => {
        return new AMapLocaClass({
          domId: 'amap-container',
          communityJSON,
          communityGeoJson,
          gridGeoJson
        })
      })
    window.addEventListener('click', this.handleWindowClick.bind(this))
  },
  beforeDestroy () {
    window.removeEventListener('click', this.handleWindowClick.bind(this))
  },
  methods: {
    ...mapActions({
      set_mapLevel: 'SET_MAPLEVEL',
      set_communityId: 'SET_COMMUNITYID',
      showGlobalDialog: 'showGlobalDialog'
    }),
    // 获取顶部统计数
    getMapStatistics () {
      if (this.mapLevel === 'community' || (this.mapLevel === 'grid' && !this.communityId)) {
        const params = {
          id: this.streetId
        }
        getMapStatistics(params).then(({ data: res }) => {
          console.log('获取地图中心上方统计数', res)
          const { resiNum, houseNum, communityNum, gridNum, gridUserNum, partyMemberNum } = res
          numAnimation(this.statisticsList[0].value, resiNum, this.statisticsList[0], 'value')
          numAnimation(this.statisticsList[1].value, houseNum, this.statisticsList[1], 'value')
          numAnimation(this.statisticsList[2].value, communityNum, this.statisticsList[2], 'value')
          numAnimation(this.statisticsList[3].value, gridNum, this.statisticsList[3], 'value')
          numAnimation(this.statisticsList[4].value, gridUserNum, this.statisticsList[4], 'value')
          numAnimation(this.statisticsList[5].value, partyMemberNum, this.statisticsList[5], 'value')
        }).catch(err => {
          console.error('获取地图中心上方统计数', err)
        })
      } else if (this.mapLevel === 'grid' && this.communityId) {
        const params = {
          id: this.communityId
        }
        getCommunityDetail(params).then(({ data: res }) => {
          console.log('获取地图中心上方统计数', res)
          const { resiNum, houseNum, gridNum, gridUserNum, partyMemberNum } = res
          numAnimation(this.statisticsList[0].value, resiNum, this.statisticsList[0], 'value')
          numAnimation(this.statisticsList[1].value, houseNum, this.statisticsList[1], 'value')
          numAnimation(this.statisticsList[2].value, 1, this.statisticsList[2], 'value')
          numAnimation(this.statisticsList[3].value, gridNum, this.statisticsList[3], 'value')
          numAnimation(this.statisticsList[4].value, gridUserNum, this.statisticsList[4], 'value')
          numAnimation(this.statisticsList[5].value, partyMemberNum, this.statisticsList[5], 'value')
        }).catch(err => {
          console.error('获取地图中心上方统计数', err)
        })
      }

    },
    // 处理三搜三找关闭
    handleWindowClick () {
      this.collapse = true
    },
    // 社区下钻到网格
    drowDownToGrid ({ id, communityId, center }) {
      this.set_mapLevel('grid')
      this.set_communityId(communityId)
      this.getMapStatistics()
      Bus.$emit('drawGridPolygon', { communityId: id, center: center })
    },
    // 三搜三找
    threeSearch () {
      if (this.collapse) {
        this.collapse = !this.threeSearch
      }
    },
    // 社区、网格信息切换
    showMapContent (item) {
      if (item.label === '社区/管区' && this.mapLevel !== 'community') {
        this.set_mapLevel('community')
        this.set_communityId('')
        Bus.$emit('drawCommunityPolygon')
      } else if (item.label === '网格' && this.mapLevel !== 'grid') {
        this.set_mapLevel('grid')
        Bus.$emit('drawGridPolygon')
      }
    },
    // 切换红十字会、志愿者tab
    chooseTab (tab) {
      if (this.currentTab && (this.currentTab === tab.label)) {
        this.currentTab = ''
      } else {
        this.currentTab = tab.label
      }

      if (this.currentTab === '红十字会') {
        Bus.$emit('drawRedCrossMarker')
      } else if (this.currentTab === '志愿者') {
        Bus.$emit('drawVolunteerMarker')
      } else {
        Bus.$emit('clearMarker')
      }
    },
    // 获取社区区划
    getCommunityDistrict () {
      return new Promise((resolve, reject) => {
        getCommunityDistrict().then(data => {
          resolve(data)
        }).catch(err => {
          console.error('社区区划', err)
        })
      })
    },
    // 获取geojson格式的polygon数据
    getCommunityGeoPolygon () {
      return new Promise((resolve, reject) => {
        getCommunityGeoPolygon().then(data => {
          resolve(data)
        })
      })
    },
    // 获取geojson格式的社区line数据
    getCommunityGeoLine () {
      return new Promise((resolve, reject) => {
        getCommunityGeoLine().then(data => {
          resolve(data)
        })
      })
    },
    // 获取geojson格式的polygons数据
    getGridGeoPolygon () {
      return new Promise((resolve, reject) => {
        getGridGeoPolygon().then(data => {
          resolve(data)
        })
      })
    }
  }
}
</script>

<style lang="scss">
img {
  width: 100%;
  height: 100%;
  float: left;
}
.amap-logo,
.amap-copyright {
  display: none !important;
  img {
    width: 0px !important;
    height: 0px !important;
  }
}
.amap-marker-label {
  border-width: 0px;
  background-color: transparent;
  cursor: default;
  padding: 0px;
  font-size: 12px;
  line-height: 14px;
  .marker-label {
    height: 30px;
    background: rgba(0, 10, 21, 0.74);
    border: 1px solid #00b4ff;
    border-radius: 2px;
    padding: 0 25px 0 8px;
    display: flex;
    align-items: center;
    &-icon {
      width: 20px;
      height: 20px;
    }
    &-name {
      font-size: 16px;
      font-family: "PingFang Regular";
      font-weight: 400;
      color: #fff;
      margin-left: 10px;
    }
  }
}
.map-serch {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  bottom: 30px;
  right: calc(560px + 32px + 10px);
  left: calc(100% - 32px - 560px - 10px - 44px - 360px);
  z-index: 30;
  overflow: hidden;
  transition: left 0.4s linear;
  box-shadow: 0px 0px 12px 6px #025de6 inset;
  padding: 0 9px;
  background: rgba(29, 104, 213, 0.2);
  &.collapse {
    left: calc(100% - 560px - 32px - 10px - 44px);
  }
  .el-select {
    .el-input {
      font-size: 16px;
      font-family: "PingFang Regular";
      font-weight: bold;
      width: 130px;
      box-sizing: border-box;
    }
    flex-shrink: 0;
  }
  .el-input {
    width: 226px;
    flex-shrink: 0;
    font-size: 16px;
    font-family: "PingFang Regular";
    font-weight: bold;
    .el-input__inner {
      width: 100%;
      box-sizing: border-box;
      border-width: 0px !important;
      background: transparent !important;
    }
  }
  .search-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
  }
}
</style>

<style lang="scss" scoped>
.screen-content-map {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  #amap-container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transition: 0.2s;
    transform-origin: 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .loadmore-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .tip {
      color: #fff;
      font-size: 16px;
      font-family: "PingFang Regular";
      font-weight: 900;
      margin-left: 10px;
    }
  }
  .loading {
    flex-shrink: 0;
    position: relative;
    width: 22px;
    height: 22px;
    border: 3px solid #fff;
    border-top-color: rgba(255, 255, 255, 0.6);
    border-right-color: rgba(255, 255, 255, 0.6);
    border-bottom-color: rgba(255, 255, 255, 0.6);
    border-radius: 100%;
    animation: circle infinite 0.75s linear;
  }
  .statistics-list {
    width: 1164px;
    height: 54px;
    background: url("~@/assets/next-images/overlook-decoration.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 154px;
    left: calc(50% - 1164px / 2);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .list-item {
      position: relative;
      top: -20px;
      cursor: pointer;
      .title {
        font-size: 16px;
        line-height: 26px;
        font-family: "PingFang Regular";
        font-weight: 900;
        font-style: italic;
        color: #17d7f4;
      }
      .num {
        font-size: 20px;
        line-height: 30px;
        font-family: "PingFang Regular";
        font-weight: 900;
        font-style: italic;
        color: #ffffff;
      }
    }
  }
  .map-bottom-decoration {
    width: 1268px;
    height: 80px;
    position: absolute;
    left: calc(50% - 1268px / 2);
    bottom: 0px;
    z-index: 20;
    background: url("~@/assets/next-images/map-bottom-decoration.png") no-repeat;
    background-size: 100% 100%;
  }

  .map-tab-list {
    position: absolute;
    left: calc(560px + 10px + 32px);
    bottom: 60px;
    z-index: 20;
    .tab-item {
      width: 115px;
      height: 36px;
      background: rgba(8, 31, 57, 0.61);
      border: 1px solid #12d0ff;
      border-radius: 2px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding-left: 13px;
      cursor: pointer;
      .icon {
        width: 20px;
        height: 20px;
      }
      .label {
        font-size: 16px;
        font-family: "PingFang Regular";
        font-weight: 900;
        background: linear-gradient(0deg, #25c2eb 0%, #f8fdfe 70%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: 900;
        margin-left: 6px;
      }
      & + .tab-item {
        margin-top: 6px;
      }
      &.active {
        background: rgba(8, 31, 57, 0.61);
        border: 1px solid #f8bb00;
        .label {
          background: linear-gradient(0deg, #ffa229 0%, #f8fdfe 70%);
          background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;
        }
      }
    }
  }
}
</style>