<!-- 产业 -->
<template>
<div>
<div class="video-menu">
<common-btn id="ponitBtn" :select="selectIndex === 'ponitBtn'" :bg="communityBg" :bg-hover="communityHover"
width="5" height="5" text-hover="企业点位" @click="btnClick" />
<common-btn id="environmentBtn" :select="selectIndex === 'environmentBtn'" :bg="environmentBg"
:bg-hover="environmentHover" width="5" height="5" text-hover="营商环境" @click="btnClick" />
<common-btn id="scenicBtn" :select="selectIndex === 'scenicBtn'" :bg="scenicBg" :bg-hover="scenicHover"
width="5" height="5" text-hover="热门景点" @click="btnClick" />
<Pop ref="popularAttractionsPopRef" v-if="showPopularAttractionsPop" @close="showPopularAttractionsPop = false" />
<EnterprisePop ref="enterprisePopRef" v-if="showEnterprisePop" @close="showEnterprisePop = false"/>
</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 ListPage from "@/components/ListPage"
import { clearUpMap, clearResetMap, AddLabelPoint } from "@/utils/freedo"
import { eventBus } from "../../../../main"
import { getPopularAttractionsList, getEnterpriseLocationList, getBusinessEnvironmentList } from "@/api/ywts/cyjj/cy"
import Pop from "./popup.vue"
import EnterprisePop from './enterprisePop.vue'
export default {
name: 'CY',
components: { TimeManager, KeywordManager, LayerManagerMix, CommonBtn, ListPage, Pop, EnterprisePop },
data() {
return {
selectIndex: 'ponitBtn',
communityBg: require('@/assets/images/function/一卡通/场所未选中.png'),
communityHover: require('@/assets/images/function/一卡通/场所选中.png'),
environmentBg: require('@/assets/images/function/环卫/基础设施未选中.png'),
environmentHover: require('@/assets/images/function/环卫/基础设施选中.png'),
scenicBg: require('@/assets/images/function/交通/重点场所未选中.png'),
scenicHover: require('@/assets/images/function/交通/重点场所选中.png'),
showPopularAttractionsPop: false, // 显示热门景点弹窗
showEnterprisePop: false, // 显示企业点位弹窗
}
},
mounted() {
console.log('mounted');
this.selectIndex = 'ponitBtn'
clearResetMap()
// 设置默认选中图层
eventBus.$emit('change-layer', { id: 41, checked: false }); // 智慧教育-手工模型
eventBus.$emit('change-layer', { id: 42, checked: false });// 智慧停车云-手工模型
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.showPopularAttractionsPop = false // 是否显示景点的popup
this.showEnterprisePop = false // 不显示企业点位弹窗
})
// 获取企业点位数据
this.getEnterpriseLocationList()
},
methods: {
async btnClick(e) {
console.log('btnClick', e)
clearResetMap()
this.showPopularAttractionsPop = false, // 是否显示景点的popup
this.showEnterprisePop = false // 不显示企业点位弹窗
this.selectIndex = typeof e === 'string' ? e : e.target.id
switch (this.selectIndex) {
case "ponitBtn":
this.getEnterpriseLocationList()
break
case "environmentBtn":
this.fetchBusinessEnvironmentList()
break
case "scenicBtn":
this.fetchPopularAttractionsList()
break
}
},
// -------------------------------------热门景点---------------------------------------------
// 获取热门景点列表
fetchPopularAttractionsList() {
const icon = require('@/assets/images/icon/产业/scenicSpot.png')
getPopularAttractionsList().then(response => {
if(response.code === 200) {
clearResetMap()
response.data.value.forEach(item => {
AddLabelPoint(
item.id,
item.name,
icon,
[item.lon, item.lat, 0], 'cy', item,
this.clickPopularAttractionsMarker)
})
}
})
// const tempData = [
// {
// id: '1',
// lon: '114.87365',
// lat: '25.76118',
// name: '热门景点1',
// todayMoney: '热门景点1111',
// allMoney: '热门景点11111',
// todayPerson: '热门景点111111',
// allPerson: '热门景点1111111',
// location: '热门景点11111111',
// },
// {
// id: '2',
// lon: '114.87365',
// lat: '25.76818',
// name: '热门景点2',
// todayMoney: '热门景点211211',
// allMoney: '热门景点2111211',
// todayPerson: '热门景点211123211',
// allPerson: '热门景点2111123232111',
// location: '热门景点211112323232321222111',
// },
// ]
// tempData.forEach(item => {
// AddLabelPoint(
// item.id,
// item.name,
// icon,
// [item.lon, item.lat, 0], 'cy', item,
// this.clickPopularAttractionsMarker)
// })
},
// 点击景点点位
clickPopularAttractionsMarker(eventArg) {
const showPopularAttractionsPop = (e) => {
const item = e._data.data
this.showPopularAttractionsPop = true
this.$nextTick(() => {
console.log('点击热门景点点位信息', item, this.showPopularAttractionsPop);
this.$refs.popularAttractionsPopRef.initData(item)
})
}
if (this.showPopularAttractionsPop) {
this.showPopularAttractionsPop = false
setTimeout(() => {
showPopularAttractionsPop(eventArg)
}, 100);
}
else {
showPopularAttractionsPop(eventArg)
}
},
// ----------------------------------------企业点位列表------------------------------------------
// 获取企业点位列表
getEnterpriseLocationList(event) {
console.log('获取企业点位列表')
const icon = require('@/assets/images/icon/产业/enterprise.png')
getEnterpriseLocationList().then(response => {
if(response.code === 200) {
clearResetMap()
response.data.value.forEach(item => {
AddLabelPoint(
item.id,
item.name,
icon,
[item.lon, item.lat, 0], 'cy', item,
this.clickEnterpriseMarker)
})
}
})
// const tempData = [
// {
// id: '1',
// lon: '114.87365',
// lat: '25.76118',
// name: '企业点位11111',
// personNum: '6',
// typeName: '企业点位111111',
// location: '企业点位111111111',
// },
// {
// id: '2',
// lon: '114.87365',
// lat: '25.76818',
// name: '企业点位2112211',
// personNum: '456',
// typeName: '企业点位2111211',
// location: '企业点位211112323232321222111',
// },
// ]
// tempData.forEach(item => {
// AddLabelPoint(
// item.id,
// item.name,
// icon,
// [item.lon, item.lat, 0], 'cy', item,
// this.clickEnterpriseMarker)
// })
},
// 点击企业点位
clickEnterpriseMarker(eventArg) {
const showEnterprisePop = (e) => {
const item = e._data.data
this.showEnterprisePop = true
this.$nextTick(() => {
console.log('点击企业点位信息', item, this.showEnterprisePop);
this.$refs.enterprisePopRef.initData(item, 'enterprise')
})
}
if (this.showEnterprisePop) {
this.showEnterprisePop = false
setTimeout(() => {
showEnterprisePop(eventArg)
}, 100);
}
else {
showEnterprisePop(eventArg)
}
},
// ---------------------------------------营商环境-------------------------------------------
// 获取营商环境列表
fetchBusinessEnvironmentList() {
const icon = require('@/assets/images/icon/产业/business.png')
getBusinessEnvironmentList().then(response => {
if(response.code === 200) {
clearResetMap()
response.data.value.forEach(item => {
AddLabelPoint(
item.id,
item.name,
icon,
[item.lon, item.lat, 0], 'cy', item,
this.clickBusinessMarker)
})
}
})
// const tempData = [
// {
// id: '1',
// lon: '114.87365',
// lat: '25.76118',
// name: '营商环境11111',
// money: '6',
// enterprises: '123',
// },
// {
// id: '2',
// lon: '114.87365',
// lat: '25.76818',
// name: '营商环境2112211',
// money: '456',
// enterprises: '67',
// },
// ]
// tempData.forEach(item => {
// AddLabelPoint(
// item.id,
// item.name,
// icon,
// [item.lon, item.lat, 0], 'cy', item,
// this.clickBusinessMarker)
// })
},
// 点击营商环境点位
clickBusinessMarker(eventArg) {
const showEnterprisePop = (e) => {
const item = e._data.data
this.showEnterprisePop = true
this.$nextTick(() => {
console.log('点击营商环境点位信息', item, this.showEnterprisePop);
this.$refs.enterprisePopRef.initData(item, 'business')
})
}
if (this.showEnterprisePop) {
this.showEnterprisePop = false
setTimeout(() => {
showEnterprisePop(eventArg)
}, 100);
}
else {
showEnterprisePop(eventArg)
}
},
}
}
</script>
<style scoped>
.video-menu {
display: flex;
z-index: 111111111;
width: 40rem;
height: 5rem;
position: absolute;
left: 20px;
top: 1rem;
}
</style>
