diff --git a/index.html b/index.html index 3942e4f..5269099 100644 --- a/index.html +++ b/index.html @@ -76,7 +76,7 @@ // new L.supermap.TiledMapLayer(url).addTo(map); const map = document.getElementById('freedoContainer') map.addEventListener('click', (e) => { - console.log(e, 'e点击地图') + // console.log(e, 'e点击地图') window.localStorage.setItem('mousePosition', JSON.stringify({x: e.clientX, y: e.clientY})) }) diff --git a/index.html b/index.html index 3942e4f..5269099 100644 --- a/index.html +++ b/index.html @@ -76,7 +76,7 @@ // new L.supermap.TiledMapLayer(url).addTo(map); const map = document.getElementById('freedoContainer') map.addEventListener('click', (e) => { - console.log(e, 'e点击地图') + // console.log(e, 'e点击地图') window.localStorage.setItem('mousePosition', JSON.stringify({x: e.clientX, y: e.clientY})) }) diff --git a/src/pages/csdz/smartCard/Pop.vue b/src/pages/csdz/smartCard/Pop.vue new file mode 100644 index 0000000..1d21595 --- /dev/null +++ b/src/pages/csdz/smartCard/Pop.vue @@ -0,0 +1,292 @@ + + + + + diff --git a/index.html b/index.html index 3942e4f..5269099 100644 --- a/index.html +++ b/index.html @@ -76,7 +76,7 @@ // new L.supermap.TiledMapLayer(url).addTo(map); const map = document.getElementById('freedoContainer') map.addEventListener('click', (e) => { - console.log(e, 'e点击地图') + // console.log(e, 'e点击地图') window.localStorage.setItem('mousePosition', JSON.stringify({x: e.clientX, y: e.clientY})) }) diff --git a/src/pages/csdz/smartCard/Pop.vue b/src/pages/csdz/smartCard/Pop.vue new file mode 100644 index 0000000..1d21595 --- /dev/null +++ b/src/pages/csdz/smartCard/Pop.vue @@ -0,0 +1,292 @@ + + + + + diff --git a/src/pages/csdz/smartCard/index.vue b/src/pages/csdz/smartCard/index.vue index 634d662..48721f7 100644 --- a/src/pages/csdz/smartCard/index.vue +++ b/src/pages/csdz/smartCard/index.vue @@ -1,11 +1,16 @@ @@ -14,12 +19,15 @@ import LayerManagerMix from "@/components/LayerManagerMix"; import KeywordManager from "@/components/KeywordManager"; import TimeManager from "@/components/TimeManager"; +import LayerManager from "@/components/LayerManager"; import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo' import { getStatistics } from '../../../api/csdz/smartCard' import { heat } from '@/utils/freedo/heat' +import Pop from './Pop' +// import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo' export default { name: 'smartCard', - components: { TimeManager, KeywordManager, LayerManagerMix, CommonBtn }, + components: { TimeManager, KeywordManager, LayerManagerMix, CommonBtn, LayerManager, Pop }, data() { return { ktSelect: '', @@ -35,21 +43,75 @@ }], menus: { base: [ - { type: "1", typename: "场馆", total: "111" }, - { type: "2", typename: "食堂", total: "111" }, - { type: "3", typename: "园区", total: "111" } + { + type: "1", typename: "场馆", total: "1", + children: [ + { + typename: '场馆', + name: '场馆1', + lng: '114.852609', + lat: '25.771518', + }, + ] + }, + { + type: "2", typename: "食堂", total: "2", + children: [ + { + typename: '食堂', + name: '食堂1', + lng: '114.9052', + lat: '25.80916062', + }, + { + typename: '食堂', + name: '食堂2', + lng: '114.873637', + lat: '25.780307', + }, + ] + }, + { + type: "3", typename: "园区", total: "2", + children: [ + { + typename: '园区', + name: '园区111', + lng: '114.907952', + lat: '25.786445', + }, + { + typename: '园区', + name: '园区1112', + lng: '114.87828827', + lat: '25.72393167', + }, + ] + } ], device: [ - { type: "1", typename: "门禁", total: "111" } + { + type: "1", typename: "门禁", total: "1", + children: [ + { + typename: '门禁', + name: '门禁111', + lng: '114.907952', + lat: '25.786445', + }, + ] + } ] - } + }, + resultList: [], // 搜索结果列表 + markerList: [], // 地图展示点位列表 + isShowPop: false, // 是否展示pop } }, methods: { btnClick(e) { clearResetMap() this.selectIndex = e.target.id - console.log(this.selectIndex, 'this.selectIndex') if (this.selectIndex === 'publicBtn') { // 绘制热力图 heat([ @@ -661,12 +723,150 @@ } ]) } + else { + this.drawBase() + } }, changeState(v) { - this.ktSelect = v - } + // console.log(v, 'v') + this.selectIndex = v + }, + // 点击列表二级弹窗 + childrenClick(e) { + console.log(e) + // 掉起弹窗 + this.clickIcon({ + _data: { + data: e + } + }) + }, + // 选中菜单切换 + changeSelect(e) { + console.log(e) + this.showMarker = e + clearResetMap() + this.isShowPop = false + if (e === 'device') { + this.drawDevice() + } + else { + this.drawBase() + } + }, + // 绘制基础资源 + drawBase() { + // 场馆图标 + const iconCG = require('@/assets/images/layerControl/场馆.png') + // 食堂图标 + const iconST = require('@/assets/images/layerControl/食堂.png') + // 园区图标 + const iconYQ = require('@/assets/images/layerControl/园区.png') + const iconDict = { + 场馆: iconCG, + 食堂: iconST, + 园区: iconYQ + } + // this.resultList + const markerList = [] + this.menus.base.forEach((item) => { + if (item.children) { + item.children.forEach(citem => { + markerList.push(citem) + }) + } + }) + markerList.forEach(item => { + AddLabelPoint( + item.id || new Date().getTime(), + item.name, + iconDict[item.typename], + [item.lng, item.lat, 0], 'gd', item, + this.clickIcon + ) + }) + this.markerList = markerList + }, + // 绘制设备资源 + drawDevice() { + // 门禁图标 + const icon = require('@/assets/images/layerControl/门禁.png') + const markerList = [] + this.menus.device.forEach((item) => { + if (item.children) { + item.children.forEach(citem => { + markerList.push(citem) + }) + } + }) + markerList.forEach(item => { + AddLabelPoint( + item.id || new Date().getTime(), + item.name, + icon, + [item.lng, item.lat, 0], 'gd', item, + this.clickIcon + ) + }) + this.markerList = markerList + }, + // 点维搜索 + handleKeyword(e) { + console.log(e, '点位搜索') + clearResetMap() + this.resultList = this.markerList.filter((item) => item.name.includes(e)) + const iconCG = require('@/assets/images/layerControl/场馆.png') + // 食堂图标 + const iconST = require('@/assets/images/layerControl/食堂.png') + // 园区图标 + const iconYQ = require('@/assets/images/layerControl/园区.png') + // 门禁图标 + const icon = require('@/assets/images/layerControl/门禁.png') + const iconDict = { + 场馆: iconCG, + 食堂: iconST, + 园区: iconYQ, + 门禁: icon, + } + this.resultList.forEach(item => { + AddLabelPoint( + item.id || new Date().getTime(), + item.name, + iconDict[item.typename], + [item.lng, item.lat, 0], 'gd', item, + this.clickIcon + ) + }) + }, + // 搜索点位点击 + localPoint(e) { + // this.childrenClick(e) + }, + // 点击点位弹窗 + clickIcon(e) { + console.log(e, 'ee') + const showPop = (e) => { + const item = e._data.data + this.isShowPop = true + console.log(this.$refs.popRef) + this.$nextTick(() => { + this.$refs.popRef.initData(item) + }) + } + if (this.isShowPop) { + this.isShowPop = false + setTimeout(() => { + showPop(e) + }, 100); + } + else { + showPop(e) + } + }, }, mounted() { + clearResetMap() + this.drawBase() getStatistics({}).then(res => { console.log(res.data, '一卡通') })