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

<template>
  <div class="screen-content-map">

    <div class="top"
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100px;background: linear-gradient(to bottom, #081c2f, rgba(0, 0, 0, 0)); z-index: 8;">
    </div>
    <div class="bot"
      style="position: absolute; bottom: 0; left: 0; width: 100%; height: 100px;background: linear-gradient(to top, #081c2f, rgba(0, 0, 0, 0)); z-index: 8;">
    </div>
    <div v-if="!show3D">
      <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-grid" v-if="mapLevel == 'grid' && mapTabListGrid.length != 0">
        <div :class="['tab-item']" v-for="(item, index) in mapTabListGrid" :key="index" @click="chooseTabGrid(item)">
          {{ item.name }}
        </div>
      </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 class="back_btn" v-if="mapBack" @click="handelCLickBack"> <img src="@/assets/images/back.png" /> </div>
      <div class="map-chang" v-if="!show3D">
        <img src="@/assets/images/changMap.png" alt="" width="35px" height="35px" @click="changMap">
      </div>
    </div>
    <div v-if="show3D" style="height: 100%; width: 100%;">
      <div class="map-changs" @click="changMapS">
        <img src="@/assets/images/changMap.png" alt="" width="50px" height="50px">
      </div>
      <!-- http://localhost:8085/#/   -->
      <!-- http://172.22.68.29/emergency-dashboard-jinshui/#/ -->
      <iframe src="http://172.22.68.29/emergency-dashboard-jinshui/#/"
        style="height: 100%;width: 100%; z-index: 30;"></iframe>
    </div>
    <el-dialog :visible.sync="cityFlag" width="500px" v-if="cityFlag" :modal="false" top="26vh">
      <cityFliterResi :searchValue="searchValue" />
    </el-dialog>
    <el-dialog :visible.sync="houseFlag" top="26vh" width="800px" v-if="houseFlag" :modal="false">
      <houseFliterResi :searchValue="searchValue" @handelClickLook="handelClickLook" />
      <el-dialog width="30%" top="26vh" v-if="showHouseDetail" :visible.sync="showHouseDetail" append-to-body
        :modal="false" custom-class="backDialog">
        <houseDetail :houseId="houseId" />
      </el-dialog>
    </el-dialog>
    <el-dialog :visible.sync="resiFlag" width="800px" v-if="resiFlag" :modal="false">
      <searchResi :searchValue="searchValue" />
    </el-dialog>
    <el-dialog :visible.sync="companyFlag" width="600px" v-if="companyFlag" :modal="false" top="26vh">
      <companySearch :searchValue="searchValue" :type="formType" @handelClickCompanyLook="handelClickCompanyLook" />
      <el-dialog width="30%" top="26vh" v-if="showCompanyDetail" :visible.sync="showCompanyDetail" append-to-body
        :modal="false" custom-class="backDialog">
        <companyDetail :companyId="companyId" :type="formType" />
      </el-dialog>
    </el-dialog>

  </div>
</template>

<script>
import AMapLocaClass from './AMapLocaClass'
import { getCommunityDistrict, getCommunityGeoPolygon, getCommunityGeoLine, getGridGeoPolygon, getMapStatistics, getGrid, getPageGridDataToal } from 'api/screen-content-center'
import { getCommunityDetail } from 'api/screen-content-left'
import { getResidentClassifyStatistics ,getHourseClassifyStatistics} from 'api/screen-content-right'
import { mapGetters, mapActions } from 'vuex'
import Bus from 'utils/eventBus'
import { numAnimation } from 'utils/common'
import cityFliterResi from '../dialog-module/cityFliterResi'
import houseFliterResi from '../dialog-module/houseFliterResi'
import searchResi from '../dialog-module/searchResi'
import companySearch from '../dialog-module/companySearch'
import houseDetail from '../dialog-module/houseDetail'
import companyDetail from '../dialog-module/companyDetail/index.vue'

export default {
  name: 'screen-content-map',
  data() {
    return {
      mapScale: 1,
      mapBack: false,
      cityFlag: false,
      houseFlag: false,
      resiFlag: false,
      companyFlag: false,
      showHouseDetail: false,
      showCompanyDetail: false,
      companyId: '',
      formType: '',
      statisticsList: [
        { label: '居民', value: 0 },
        { label: '房屋', value: 0 },
        { label: '议题', value: 0 },
        { label: '项目', value: 0 },
        { label: '已结案', value: 0 },
        { label: '网格员', value: 0 }
      ],
      mapTabListGrid: [],
      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: false,
      show3D: false,
      houseId: ''
    }
  },
  computed: {
    ...mapGetters(['scale', 'mapLevel', 'streetId', 'communityId'])
  },
  components: { cityFliterResi, houseFliterResi, searchResi, companySearch, houseDetail, companyDetail },
  watch: {
    scale: {
      immediate: true,
      handler: function (val) {
        this.mapScale = 1 / val
      }
    },
    mapLevel(val) {
      if (val) {
        this.getMapStatistics()
        this.getResidentClassifyStatistics()
        this.getHourseClassifyStatistics()

      }
    }
  },
  created() {
    Bus.$off('drowDownToGrid', this.drowDownToGrid.bind(this))
    Bus.$on('drowDownToGrid', this.drowDownToGrid.bind(this))
  },
  mounted() {
    this.initMap()
    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',
      set_gridInfoDialog: "SET_GRIDINFODIALOG",
    }),
    getResidentClassifyStatistics() {
      let params = {
        agencyId: this.communityId || null
      }
      getResidentClassifyStatistics(params).then(({ data: res }) => {
        console.log('产品内网接口-获取居民分类统计数据地图', res)
        numAnimation(this.statisticsList[0].value, res.count, this.statisticsList[0], 'value')


      }).catch(err => {
        console.error('产品内网接口-获取居民分类统计数据', err)
      })
    },
    getHourseClassifyStatistics () {
      let params = {
        agencyId: this.communityId || null
      }
      getHourseClassifyStatistics(params).then(({ data: res }) => {
        numAnimation(this.statisticsList[1].value, res.count, this.statisticsList[1], 'value')
     
      }).catch(err => {
        console.error('产品内网接口-获取房屋分类统计数据', err)
        this.roomClassifyChart.hideLoading()
      })
    },
    handelClickLook(houseId) {
      this.houseId = houseId
      this.showHouseDetail = true
    },
    handelClickCompanyLook(companyId) {
      this.companyId = companyId
      this.showCompanyDetail = true
    },
    handelCLickBack() {
      this.mapBack = false
      this.set_mapLevel('community')
      this.set_communityId('0')
      Bus.$emit('drawCommunityPolygon')
    },
    initMap() {
      this.getMapStatistics()
      this.getResidentClassifyStatistics()
      this.getHourseClassifyStatistics()
      this.getPageGridDataToal()
      /* 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
          })
        })
    },
    changMap() {
      this.show3D = true
      console.log(this);
    },
    changMapS() {
      this.show3D = false
      this.initMap()
    },
    //获取事件数
    getPageGridDataToal() {
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 注意月份是从0开始计数的，需要加1
      const day = currentDate.getDate().toString().padStart(2, '0');
      const formattedDate = `${year}-${month}-${day}`;
      let parm = {
        page: 1,
        limit: 10,
        category: '1',
        startTime: '2023-12-26',
        endTime: formattedDate,
      }
      getPageGridDataToal({ ...parm }).then(({ data: res }) => {
        // 议题 项目
        const { issuseCount, itemCount,itemOverCount } = res
        numAnimation(this.statisticsList[2].value, issuseCount, this.statisticsList[2], 'value')
        numAnimation(this.statisticsList[3].value, itemCount, this.statisticsList[3], 'value')
        numAnimation(this.statisticsList[4].value, itemOverCount, this.statisticsList[4], 'value')

      }).catch(err => {
        console.log(err);
      })
    },
    // 获取顶部统计数
    getMapStatistics() {
      if (this.mapLevel === 'community' || (this.mapLevel === 'grid' && !this.communityId)) {
        const params = {
          id: this.streetId
        }
        getMapStatistics(params).then(({ data: res }) => {
          console.log('获取地图中心上方统计数2', res)
          const { resiNum, houseNum, communityNum, gridNum, gridUserNum, partyMemberNum,itemOverCount } = 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, itemOverCount, this.statisticsList[4], 'value')
          numAnimation(this.statisticsList[5].value, gridUserNum, this.statisticsList[5], '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('获取地图中心上方统计数1', res)
          // resiNum
          const { resiNum, houseNum, gridNum, gridUserNum, partyMemberNum,itemOverCount } = 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, itemOverCount, this.statisticsList[4], 'value')
          numAnimation(this.statisticsList[5].value, gridUserNum, this.statisticsList[5], 'value')
        }).catch(err => {
          console.error('获取地图中心上方统计数', err)
        })
      }

    },
    // 处理三搜三找关闭
    handleWindowClick() {
      this.collapse = true
    },
    // 社区下钻到网格
    drowDownToGrid({ id, communityId, center,ids }) {
      console.log(ids,'下钻产品Id');
      this.mapBack = true
      this.getGridList(id)
      this.set_mapLevel('grid')
      this.set_communityId(ids)
      this.getMapStatistics()
      this.getResidentClassifyStatistics()
      this.getHourseClassifyStatistics()
      Bus.$emit('drawGridPolygon', { communityId: id, center: center })
    },
    getGridList(id) {
      getGrid(id).then(res => {
        this.mapTabListGrid = res.data
      }).catch(err => {
        console.error('获取网格列表', err)
      })
    },
    // 三搜三找
    threeSearch() {
      this.collapse = !this.collapse
      if (this.collapse) {
        switch (this.searchSelect) {
          case '1':
            console.log('以房找人');
            this.houseFlag = true
            break
          case '2':
            console.log('以人找人');
            this.resiFlag = true
            break
          case '3':
            console.log('以城找人');
            this.cityFlag = true
            break
          case '4':
            console.log('搜企业');
            this.companyFlag = true
            this.formType = 'company'
            break
          case '5':
            console.log('搜商铺');
            this.companyFlag = true
            this.formType = 'shops'
            break
          case '6':
            console.log('搜村居');
            this.companyFlag = true
            this.formType = 'villageLiving'
            break
        }
      }
    },
    // 社区、网格信息切换
    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
    async 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')
      }
    },
    chooseTabGrid(item){
      this.set_gridInfoDialog(true)
      Bus.$emit('emitgridInfoDialogData', { gridId: item.id || '1534561053840998402' })
    },
    // 获取社区区划
    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;
}

.back_btn {
  position: absolute;
  bottom: 948px;
  left: calc(64% - 32px - 560px - 10px - 44px - 343px);
  z-index: 30;
  width: 80px;
  height: 80px;
  cursor: pointer;
}

.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;
  }
}

.map-chang {
  position: absolute;
  bottom: 124px;
  right: calc(560px + 32px + 10px);
  left: calc(64% - 32px - 560px - 10px - 44px - 360px);
  z-index: 30;
  width: 80px;
  height: 80px;
  cursor: pointer;
}

.map-changs {
  position: absolute;
  bottom: 124px;
  right: calc(560px + 32px + 10px);
  left: calc(64% - 32px - 560px - 10px - 44px - 360px);
  z-index: 30;
  width: 80px;
  height: 80px;
  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-grid {
    position: absolute;
    right: calc(560px + 10px + 32px);
    bottom: 50%;
    z-index: 20;
    color: #fff;
    transform: translate(0, 50%);

    .tab-item {
      width: fit-content;
      height: 36px;
      background: rgba(8, 31, 57, 0.61);
      border-radius: 2px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      // padding-left: 13px;
      cursor: pointer;
      justify-content: center;

      // .icon {
      //   width: 20px;
      //   height: 20px;
      // }
      &:hover {
        color: #60d6e8 !important;
        background: linear-gradient(to left, rgba(255, 255, 255, 0), #073277, rgba(255, 255, 255, 0));
      }

      .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;
        }
      }
    }
  }
  .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>