Newer
Older
ganzhou-feidu / src / pages / ywts / shms / tcy / index.vue
dutingting 29 days ago 3 KB 停车云画点位、弹窗完成
<!-- 停车云 -->
<template>
  <div>
    <Pop ref="popRef" v-if="showPop" @close="showPop = false" />
  </div>
</template>

<script>
import CommonBtn from "@/components/CommonBtn"
import LayerManagerMix from "@/components/LayerManagerMix"
import KeywordManager from "@/components/KeywordManager"
import TimeManager from "@/components/TimeManager"
import ListPage from "@/components/ListPage"
import { clearUpMap, clearResetMap, AddLabelPoint } from "@/utils/freedo"
import { eventBus } from "../../../../main"
import { getParkingCloudList } from "@/api/ywts/shms/tcy"
import Pop from "./popup.vue"
export default {
  name: 'TCY',
  components: { TimeManager, KeywordManager, LayerManagerMix, CommonBtn, ListPage, Pop },
  data() {
    return {
      showPop: false, // 显示停车云点位弹窗
    }
  },
  mounted() {
    console.log('mounted');
    this.selectIndex = 'ponitBtn'
    clearResetMap()
    // 设置默认选中图层
    eventBus.$emit('change-layer', { id: 41, checked: false });  // 智慧教育-手工模型
    eventBus.$emit('change-layer', { id: 42, checked: true });// 智慧停车云-手工模型
    eventBus.$emit('change-layer', { id: 43, checked: false });//智慧社区-手工模型
    eventBus.$emit('change-layer', { id: 44, checked: false });// 智慧工地-手工模型
    eventBus.$emit('change-layer', { id: 45, checked: false });// 智慧交通-手工模型
    eventBus.$emit('change-layer', { id: 46, checked: false });// 智慧园林-手工模型
    eventBus.$emit('change-layer', { id: 31, checked: false }); // 倾斜
    eventBus.$emit('change-layer', { id: 21, checked: false }); //CIM2建筑(带纹理)
    eventBus.$emit('change-layer', { id: 22, checked: false }); //CIM2建筑(纯白色)
    eventBus.$emit('change-layer', { id: 12, checked: true });  // 蓉江新区正射影像
    eventBus.$emit('change-layer', { id: 13, checked: true });  // 蓉江新区边界
    //  清除弹窗展示
    this.$bus.$on('clear', () => {
      this.showPop = false // 是否显示景点的popup
    })
    // 获取停车场点位数据
    this.fetchParkingCloudList()
  },
  methods: {
    // 获取停车场点位数据
    fetchParkingCloudList() {
      const icon = require('@/assets/images/icon/停车云/car.png')
      getParkingCloudList().then(response => {
        if(response.code === 200) {
          clearResetMap()
          response.data.value.forEach(item => {
            AddLabelPoint(
              item.id,
              item.name,
              icon,
              [item.lon, item.lat, 0], 'tcy', item,
              this.clickMarker)
          })
        }
      })
    },
    // 点击停车场点位
    clickMarker(eventArg) {
      const showPop = (e) => {
        const item = e._data.data
        this.showPop = true
        this.$nextTick(() => {
          console.log('点击停车场点位信息', item, this.showPop);
          this.$refs.popRef.initData(item)
        })
      }
      if (this.showPop) {
        this.showPop = false
        setTimeout(() => {
          showPop(eventArg)
        }, 100);
      }
      else {
        showPop(eventArg)
      }
    },
  }
}
</script>

<style scoped>
</style>