<template>
<div>
<div class="video-menu">
<!-- <layer-manager-mix :menu-tab="menuTab" :menus="menus" :select="selectIndex === 'layerBtn'" @btnClick="btnClick" /> -->
<layer-manager :menu-tab="menuTab" :menus="menus" :select="selectIndex === 'layerBtn'" @btnClick="btnClick"
@childrenClick="childrenClick" @changeSelect="changeSelect" />
<common-btn id="publicBtn" :select="selectIndex === 'publicBtn'" :bg="public" :bg-hover="publicHover" width="5"
height="5" text-hover="公众分布" @click="btnClick" />
<keyword-manager :select="selectIndex === 'keywordBtn'" @changeState="changeState" @handleKeyword="handleKeyword" @localPoint="localPoint" :resultList="resultList" />
</div>
<!-- 弹窗 -->
<pop ref="popRef" v-show="isShowPop" @close="isShowPop = 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 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, LayerManager, Pop },
data() {
return {
ktSelect: '',
selectIndex: 'layerBtn',
public: require('@/assets/images/function/一卡通/公众用户分布未选中.png'),
publicHover: require('@/assets/images/function/一卡通/公众用户分布选中.png'),
menuTab: [{
name: '基础资源',
value: 'base'
}, {
name: '设备资源',
value: 'device'
}],
menus: {
base: [
{
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: "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
this.isShowPop = false
if (this.selectIndex === 'publicBtn') {
// 绘制热力图
heat([
{
"lng": "114.852609",
"value": "0",
"lat": "25.771518"
},
{
"lng": "114.86954796018512",
"value": "0",
"lat": "25.772834147724332"
},
{
"lng": "114.89472931",
"value": "0",
"lat": "25.80084573"
},
{
"lng": "114.9052",
"value": "187",
"lat": "25.779955"
},
{
"lng": "114.89739311",
"value": "340",
"lat": "25.80916062"
},
{
"lng": "114.873637",
"value": "704",
"lat": "25.767449"
},
{
"lng": "114.904471",
"value": "814",
"lat": "25.780307"
},
{
"lng": "114.90180144",
"value": "0",
"lat": "25.80153227"
},
{
"lng": "114.888354",
"value": "0",
"lat": "25.802942"
},
{
"lng": "114.9050345",
"value": "0",
"lat": "25.7976029"
},
{
"lng": "114.891698",
"value": "0",
"lat": "25.796913"
},
{
"lng": "114.903365",
"value": "0",
"lat": "25.721499"
},
{
"lng": "114.90117079",
"value": "0",
"lat": "25.77566326"
},
{
"lng": "114.907952",
"value": "0",
"lat": "25.786445"
},
{
"lng": "114.87828827",
"value": "61",
"lat": "25.72393167"
},
{
"lng": "114.867403",
"value": "103",
"lat": "25.790731"
},
{
"lng": "114.89831161",
"value": "258",
"lat": "25.8067614"
},
{
"lng": "114.90189704",
"value": "295",
"lat": "25.79580584"
},
{
"lng": "114.90823684",
"value": "1313",
"lat": "25.79854603"
},
{
"lng": "114.901514",
"value": "0",
"lat": "25.780173"
},
{
"lng": "114.875663",
"value": "0",
"lat": "25.759203"
},
{
"lng": "114.88988207442962",
"value": "0",
"lat": "25.79880148166368"
},
{
"lng": "",
"value": "0",
"lat": ""
},
{
"lng": "114.893485",
"value": "0",
"lat": "25.785402"
},
{
"lng": "114.86783394",
"value": "91",
"lat": "25.77203393"
},
{
"lng": "114.8902791",
"value": "230",
"lat": "25.7899092"
},
{
"lng": "114.895461",
"value": "1252",
"lat": "25.785735"
},
{
"lng": "114.90791487",
"value": "0",
"lat": "25.78412055"
},
{
"lng": "114.869815",
"value": "0",
"lat": "25.791709"
},
{
"lng": "114.87878087481697",
"value": "0",
"lat": "25.77663963682264"
},
{
"lng": "",
"value": "0",
"lat": ""
},
{
"lng": "114.880149",
"value": "0",
"lat": "25.765288"
},
{
"lng": "114.88322",
"value": "0",
"lat": "25.771672"
},
{
"lng": "",
"value": "0",
"lat": ""
},
{
"lng": "114.906792",
"value": "2",
"lat": "25.764324"
},
{
"lng": "114.900793",
"value": "109",
"lat": "25.778099"
},
{
"lng": "114.904047",
"value": "239",
"lat": "25.781464"
},
{
"lng": "114.90056457",
"value": "714",
"lat": "25.78335089"
},
{
"lng": "114.885698",
"value": "2063",
"lat": "25.762593"
},
{
"lng": "114.89559788",
"value": "0",
"lat": "25.79712599"
},
{
"lng": "114.892712",
"value": "0",
"lat": "25.772652"
},
{
"lng": "114.88997655",
"value": "0",
"lat": "25.81716686"
},
{
"lng": "114.90593",
"value": "0",
"lat": "25.781083"
},
{
"lng": "114.87537515229907",
"value": "0",
"lat": "25.771905277442915"
},
{
"lng": "114.871678",
"value": "0",
"lat": "25.791199"
},
{
"lng": "",
"value": "0",
"lat": ""
},
{
"lng": "114.84897",
"value": "0",
"lat": "25.753554"
},
{
"lng": "114.898712",
"value": "29",
"lat": "25.813012"
},
{
"lng": "114.88167185702406",
"value": "444",
"lat": "25.784920522149285"
},
{
"lng": "114.86357824",
"value": "0",
"lat": "25.74034598"
},
{
"lng": "114.896149",
"value": "0",
"lat": "25.788156"
},
{
"lng": "114.88299497",
"value": "0",
"lat": "25.76366772"
},
{
"lng": "114.90531018",
"value": "0",
"lat": "25.80701165"
},
{
"lng": "114.904818",
"value": "0",
"lat": "25.781645"
},
{
"lng": "114.873339",
"value": "0",
"lat": "25.791198"
},
{
"lng": "114.89974",
"value": "0",
"lat": "25.805838"
},
{
"lng": "114.90789027",
"value": "0",
"lat": "25.78821431"
},
{
"lng": "114.887856",
"value": "3",
"lat": "25.798275"
},
{
"lng": "114.88948336",
"value": "18",
"lat": "25.82079933"
},
{
"lng": "114.89489856",
"value": "48",
"lat": "25.81239956"
},
{
"lng": "114.907943",
"value": "67",
"lat": "25.803726"
},
{
"lng": "114.901954",
"value": "86",
"lat": "25.778339"
},
{
"lng": "114.894247",
"value": "113",
"lat": "25.774295"
},
{
"lng": "114.916563",
"value": "115",
"lat": "25.797593"
},
{
"lng": "114.898713",
"value": "225",
"lat": "25.778099"
},
{
"lng": "114.87098412",
"value": "237",
"lat": "25.75914086"
},
{
"lng": "114.89971222",
"value": "288",
"lat": "25.78478469"
},
{
"lng": "114.82614306",
"value": "339",
"lat": "25.81122899"
},
{
"lng": "114.90010527",
"value": "480",
"lat": "25.8099684"
},
{
"lng": "114.86652004",
"value": "853",
"lat": "25.77338177"
},
{
"lng": "114.887978",
"value": "1053",
"lat": "25.805816"
},
{
"lng": "114.895732",
"value": "0",
"lat": "25.771463"
},
{
"lng": "114.888064",
"value": "0",
"lat": "25.785451"
},
{
"lng": "114.88478481571872",
"value": "0",
"lat": "25.790735278581476"
},
{
"lng": "114.885379",
"value": "0",
"lat": "25.788672"
},
{
"lng": "114.865757",
"value": "0",
"lat": "25.780003"
},
{
"lng": "114.83476236",
"value": "24",
"lat": "25.784232"
},
{
"lng": "114.84974977",
"value": "59",
"lat": "25.81164526"
},
{
"lng": "114.900793",
"value": "123",
"lat": "25.778052"
},
{
"lng": "114.84334098",
"value": "135",
"lat": "25.74457324"
},
{
"lng": "114.897388",
"value": "149",
"lat": "25.780622"
},
{
"lng": "114.88574",
"value": "705",
"lat": "25.786367"
},
{
"lng": "114.91010039",
"value": "1403",
"lat": "25.79712676"
},
{
"lng": "114.894279",
"value": "1542",
"lat": "25.786385"
},
{
"lng": "114.87801334",
"value": "0",
"lat": "25.79278345"
},
{
"lng": "114.8533278",
"value": "0",
"lat": "25.736264"
},
{
"lng": "114.88294401",
"value": "0",
"lat": "25.80743122"
},
{
"lng": "114.89515",
"value": "0",
"lat": "25.786011"
},
{
"lng": "114.89282269389948",
"value": "0",
"lat": "25.77896492990762"
},
{
"lng": "114.88996631671216",
"value": "0",
"lat": "25.775159246641998"
},
{
"lng": "114.89631270377998",
"value": "0",
"lat": "25.781281399916015"
},
{
"lng": "114.91632466379747",
"value": "0",
"lat": "25.78683215401286"
},
{
"lng": "114.89233215",
"value": "52",
"lat": "25.77633179"
},
{
"lng": "114.84410307",
"value": "218",
"lat": "25.81850066"
},
{
"lng": "114.914015",
"value": "300",
"lat": "25.787286"
},
{
"lng": "114.903443",
"value": "1002",
"lat": "25.783608"
},
{
"lng": "114.84074062",
"value": "0",
"lat": "25.794645"
},
{
"lng": "114.860205",
"value": "0",
"lat": "25.762702"
},
{
"lng": "114.89860705",
"value": "0",
"lat": "25.79843808"
},
{
"lng": "114.894791",
"value": "0",
"lat": "25.819415"
},
{
"lng": "114.903807",
"value": "0",
"lat": "25.792156"
},
{
"lng": "114.89165243",
"value": "14",
"lat": "25.81860601"
},
{
"lng": "114.902386",
"value": "22",
"lat": "25.77421"
},
{
"lng": "114.89188222",
"value": "57",
"lat": "25.81545329"
},
{
"lng": "",
"value": "101",
"lat": ""
},
{
"lng": "114.8988477",
"value": "220",
"lat": "25.80379084"
},
{
"lng": "114.898902",
"value": "288",
"lat": "25.801992"
},
{
"lng": "114.90212106",
"value": "383",
"lat": "25.78934498"
},
{
"lng": "114.905185",
"value": "483",
"lat": "25.806424"
},
{
"lng": "114.90494692",
"value": "582",
"lat": "25.78681484"
},
{
"lng": "114.886686",
"value": "0",
"lat": "25.785846"
},
{
"lng": "114.87008520141764",
"value": "0",
"lat": "25.774054295378242"
},
{
"lng": "114.913365",
"value": "0",
"lat": "25.795124"
},
{
"lng": "114.89386282",
"value": "0",
"lat": "25.80107134"
},
{
"lng": "114.874196",
"value": "0",
"lat": "25.792612"
},
{
"lng": "114.89246029158107",
"value": "0",
"lat": "25.80311746175271"
},
{
"lng": "114.88907555",
"value": "6",
"lat": "25.80536721"
},
{
"lng": "114.89071942",
"value": "12",
"lat": "25.82069276"
},
{
"lng": "114.88490378",
"value": "75",
"lat": "25.77259112"
},
{
"lng": "114.887436",
"value": "132",
"lat": "25.788445"
},
{
"lng": "114.894761",
"value": "1184",
"lat": "25.785151"
}
])
}
else {
this.drawBase()
}
},
changeState(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, '一卡通')
})
this.$bus.$on('clear', () => {
this.isShowPop = false
this.isShowEvent = false
})
}
}
</script>
<style scoped>
.video-menu {
display: flex;
z-index: 111111111;
width: 40rem;
height: 5rem;
position: absolute;
left: 20px;
top: 1rem;
}
</style>
