<template>
<div>
<div class="video-menu">
<common-btn id="gdBtn" :select="selectIndex === 'gdBtn'" :bg="gd" :bg-hover="gdHover" width="5" height="5"
text-hover="工地" @click="btnClick" />
<!-- <layer-manager-mix title="工地设备" :menu-tab="menuTab" :menus="menus" :select="selectIndex==='layerBtn'" @btnClick="btnClick" @menuClick="layer"/> -->
<common-btn id="personBtn" :select="selectIndex === 'personBtn'" :bg="personBg" :bg-hover="personHover" width="5"
height="5" text-hover="人员热力" @click="btnClick" />
<common-btn id="scoreBtn" :select="selectIndex === 'scoreBtn'" :bg="scoreBg" :bg-hover="scoreHover" width="5"
height="5" text-hover="综合得分" @click="btnClick" />
<common-btn id="caseBtn" :select="selectIndex === 'caseBtn'" :bg="caseBg" :bg-hover="caseHover" width="5"
height="5" text-hover="工地事件" @click="btnClick" />
<time-manager v-show="selectIndex === 'caseBtn'" :select="ktSelect === 'timeBtn'"
@handleTimeRange="handleTimeRange" @click="ktSelect = 'timeBtn'" />
<keyword-manager :resultList="keywordList" :select="selectIndex === 'keywordBtn'" @handleKeyword="handleKeyword"
@click="selectIndex = 'keywordBtn'" @localPoint="localPoint" />
</div>
<gd-pop ref="gdPop" v-if="isShow" @close="isShow = false" />
<list-page ref="caseListPage" title="工地事件" :list="caseList" :query="caseListQuery" :total="caseTotal"
@change="changePage" v-show="isListPage" @close="isListPage = false" info-url="jxhsj-jxhsjsttj/jxhsjst/lczzxq" />
</div>
</template>
<script>
import CommonBtn from "@/components/CommonBtn";
import LayerManagerMix from "@/components/LayerManagerMix";
import TimeManager from "@/components/TimeManager";
import GdPop from "./gdPop";
import { heat } from '@/utils/freedo/heat'
import { clearUpMap, clearResetMap, AddLabelPoint, initPosition } from '@/utils/freedo'
import {
getHeat,
getArea,
getMonthGdScore,
getDevList,
getStatistics,
getCasePointList, getCaseInfo
} from "../../../../api/ywts/cszl/gd";
import { AddDivPointCase, AddDivPointHighlight, AddLabel, focusPoint } from "../../../../utils/freedo";
import ListPage from "@/components/ListPage";
import KeywordManager from "../../../../components/KeywordManager";
import gridJson from "@/assets/mapJson/grid.json";
import mapJson from "@/assets/mapJson/map.json";
import { eventBus } from "../../../../main";
export default {
name: 'Gd',
components: { KeywordManager, GdPop, TimeManager, LayerManagerMix, ListPage, CommonBtn },
data() {
return {
isListPage: false,
keyword: '',
keywordList: [],
isShow: false,
selectIndex: 'gdBtn',
ktSelect: '',
caseList: [],
caseListQuery: {
startTime: '',
endTime: '',
id: '',
pageNo: 0,
pageSize: 5
},
caseTotal: 0,
layerManager: null,
caseIcon: {
1: require('@/assets/images/icon/事件/已撤案.png'),
2: require('@/assets/images/icon/事件/指派中.png'),
3: require('@/assets/images/icon/事件/处置中.png'),
4: require('@/assets/images/icon/事件/已办结.png'),
5: require('@/assets/images/icon/事件/已结案.png'),
},
caseColor: {
1: '#ffffff88',
2: '#fdeb5688',
3: '#85c8ff88',
4: '#ffba7488',
5: '#87f6b388',
},
time: {
startTime: '',
endTime: '',
},
preCase: null,
personBg: require('@/assets/images/function/精细化平台/热力图未选中.png'),
personHover: require('@/assets/images/function/精细化平台/热力图选中.png'),
gd: require('@/assets/images/function/工地/工地未选中.png'),
gdHover: require('@/assets/images/function/工地/工地选中.png'),
caseBg: require('@/assets/images/function/物联网/物联事件未选中.png'),
caseHover: require('@/assets/images/function/物联网/物联事件选中.png'),
scoreBg: require('@/assets/images/function/工地/工地得分未选中.png'),
scoreHover: require('@/assets/images/function/工地/工地得分选中.png'),
alarm: require('@/assets/images/function/物联网/物联告警未选中.png'),
alarmHover: require('@/assets/images/function/物联网/物联告警选中.png'),
menuTab: [{
name: '工地设备',
value: 'device'
}
// , {
// name: '环监设备',
// value: 'others'
// }
],
menus: {
device: [
],
// others: [
// {type : "1", typename: "****设备", total: "111"},
// {type : "2", typename: "****设备", total: "111"}
// ]
}
}
},
mounted() {
getStatistics().then(response => {
if (response.code === 200) {
this.menus.device = response.data.value
}
})
this.search()
// 工地网格
window.imageryManager.addByPMTS({
url: gridJson['智慧工地'],
name: 'gd',
autoFlyto: true,
})
// 设置默认选中图层
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: true });// 智慧工地-手工模型
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: true }); //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.isListPage = false
this.isShow = false
})
},
methods: {
async btnClick(e) {
// clearUpMap(true)
clearResetMap()
initPosition()
this.isListPage = false
this.isShow = false
this.selectIndex = e.target.id
this.ktSelect = ''
switch (this.selectIndex) {
case "caseBtn":
this.casePoint()
break
case "gdBtn":
this.search()
break
case "scoreBtn":
this.score()
break
case "personBtn":
getHeat().then(res => {
if (res.code === 200) {
console.log(res.data, '热力')
const arr = res.data.value.filter(item => item.lng !== "" && item.lng !== null)
// arr.splice(0,1) // todo: 测试第一个错误数据
heat(arr)
}
})
break
}
},
// 设备图层控制
layer(item) {
// clearUpMap(true)
const iconOnline = require('@/assets/images/icon/工地地图点位/' + item.typename.replace(/ /g, '') + '在线.png')
const iconOffline = require('@/assets/images/icon/工地地图点位/' + item.typename.replace(/ /g, '') + '离线.png')
getDevList({ type: item.type }).then(response => {
if (response.code === 200) {
clearUpMap(true)
this.keywordList = response.data.value
response.data.value.forEach(item => {
AddLabelPoint(
item.id,
'',
item.status === '1' ? iconOnline : iconOffline,
[item.lon, item.lat, 0], 'gd-dev', item,
null)
})
}
})
},
// 事件点位
casePoint() {
const param = {
...this.time,
// keywords: this.keyword
}
getCasePointList(param).then(response => {
if (response.code === 200) {
clearUpMap(true)
const data = []
response.data.value.forEach(item => {
if (!data.map(da => da.id).includes(item.id) && !data.map(da => da.lon).includes(item.lon) && item.id !== null) {
data.push(item)
}
})
this.keywordList = data
data.forEach(item => {
// if(item.total === '1') {
AddLabelPoint(
item.id,
'',
this.caseIcon[item.eventstatus],
[item.lon, item.lat, 0], 'gd-case', item,
this.clickCase)
// } else {
// AddDivPointCase(item, this.caseColor[item.status], item.total, this.clickCase)
// }
})
}
})
},
// 查询工地点位
search() {
const iconDone = require('@/assets/images/icon/工地地图点位/工地已完成.png')
const iconDoing = require('@/assets/images/icon/工地地图点位/工地进行中.png')
getArea({ keywords: this.keyword }).then(response => {
if (response.code === 200) {
clearUpMap(true)
this.keywordList = response.data.value
response.data.value.forEach(item => {
// console.log(item.areaboundary)
// todo : 画范围
AddLabelPoint(
item.id,
item.name,
item.status === '2' ? iconDoing : iconDone,
[item.lon, item.lat, 0], 'gd', item,
this.clickGd)
})
}
})
},
// 智慧工地-工地近1月综合得分
score() {
const iconDone = require('@/assets/images/icon/工地地图点位/工地已完成.png')
const iconDoing = require('@/assets/images/icon/工地地图点位/工地进行中.png')
getArea({ keywords: this.keyword }).then(response => {
if (response.code === 200) {
this.keywordList = response.data.value
response.data.value.forEach(item => {
// console.log(item,'321123')
// todo : 画范围
// AddLabelPoint(
// item.id,
// item.name,
// item.status === '2' ? iconDoing: iconDone,
// [item.lon, item.lat, 0], 'gd', item,
// this.clickGd)
})
}
})
getMonthGdScore({ keywords: this.keyword }).then(response => {
if (response.code === 200) {
response.data.value.filter(item => item.lng !== "" && item.lng !== null).forEach(item => {
AddLabel(
item.id,
item.score,
[item.lon, item.lat, 0], 'gdScore', item,
this.clickGd)
})
}
})
},
// 点击icon事件
clickGd(eventArg) {
const item = eventArg._data.data
this.isShow = true
this.$nextTick(() => {
this.$refs.gdPop.initData(item)
})
},
// 点击事件icon
clickCase(eventArg) {
const item = eventArg._data.data
// 恢复上一个marker
if (this.preCase !== null) {
window.mmManager.removeById(this.preCase.id)
AddLabelPoint(
this.preCase.id,
'',
this.caseIcon[this.preCase.status],
[this.preCase.lon, this.preCase.lat, 0], 'gd-case', this.preCase,
this.clickCase)
}
if (item.total === '1') {
// 保存当前marker
this.preCase = item
// 高亮当前marker
window.mmManager.removeById(item.id)
AddDivPointHighlight(item, this.caseColor[item.status])
} else {
this.preCase = null
}
// 查询事件详情
this.caseTotal = Number(item.total)
this.isListPage = true
this.$refs.caseListPage.initDialog()
this.caseListQuery = {
startTime: this.time.startTime,
endTime: this.time.endTime,
id: item.id,
pageNo: 0,
pageSize: 5
}
this.searchCaseMarkerList()
},
// 事件换页
changePage(val) {
if (val && val.page) {
this.caseListQuery.pageNo = val.page
}
this.searchCaseMarkerList()
},
searchCaseMarkerList() {
// getCaseInfo(this.caseListQuery).then(response => {
getCaseInfo(this.caseListQuery).then(response => {
if (response.code === 200) {
console.log(response.data.value)
// 右侧看板
this.caseList = response.data.value
}
})
},
handleTimeRange(time) {
this.isListPage = false
if (this.time.startTime !== '') {
this.time = time
this.casePoint()
} else {
this.time = time
}
},
handleKeyword(keyword) {
this.keyword = keyword
const item = {
target: {
id: this.selectIndex
}
}
this.search()
this.btnClick(item)
this.ktSelect = 'keywordBtn'
},
localPoint(item) {
focusPoint(item.lon, item.lat)
}
}
}
</script>
<style scoped>
.video-menu {
display: flex;
z-index: 111111111;
width: 40rem;
height: 5rem;
position: absolute;
left: 20px;
top: 1rem;
}
</style>
