<template>
<div>
<div class="video-menu">
<layer-manager-mix :menu-tab="menuTab" :menus="menus" :select="selectIndex === 'layerBtn'" @btnClick="btnClick" />
<common-btn id="publicBtn" :select="selectIndex === 'publicBtn'" :bg="public" :bg-hover="publicHover" width="5"
height="5" text-hover="公众分布" @click="btnClick" />
<keyword-manager :select="ktSelect === 'keywordBtn'" @changeState="changeState" />
</div>
</div>
</template>
<script>
import CommonBtn from "@/components/CommonBtn";
import LayerManagerMix from "@/components/LayerManagerMix";
import KeywordManager from "@/components/KeywordManager";
import TimeManager from "@/components/TimeManager";
import { clearUpMap, clearResetMap, AddLabelPoint } from '@/utils/freedo'
import { getStatistics } from '../../../api/csdz/smartCard'
import { heat } from '@/utils/freedo/heat'
export default {
name: 'smartCard',
components: { TimeManager, KeywordManager, LayerManagerMix, CommonBtn },
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: "111" },
{ type: "2", typename: "食堂", total: "111" },
{ type: "3", typename: "园区", total: "111" }
],
device: [
{ type: "1", typename: "门禁", total: "111" }
]
}
}
},
methods: {
btnClick(e) {
clearResetMap()
this.selectIndex = e.target.id
console.log(this.selectIndex, 'this.selectIndex')
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"
}
])
}
},
changeState(v) {
this.ktSelect = v
}
},
mounted() {
getStatistics({}).then(res => {
console.log(res.data, '一卡通')
})
}
}
</script>
<style scoped>
.video-menu {
display: flex;
z-index: 111111111;
width: 40rem;
height: 5rem;
position: absolute;
left: 20px;
top: 1rem;
}
</style>
