<template>
<div>
<div class="video-menu">
<layer-manager :menu-tab="menuTab" :menus="menus" :icons="icons" :select="selectIndex === 'layerBtn'"
@btnClick="btnClick" @menuClick="menuClick" />
<common-btn id="gridBtn" :select="selectIndex === 'gridBtn'" :bg="grid" :bg-hover="gridHover" width="5" height="5"
text-hover="精细网格" @click="btnClick" />
<common-btn id="caseHeatBtn" :select="selectIndex === 'caseHeatBtn'" :bg="caseHeatBg" :bg-hover="caseHeatHover"
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" />
<common-btn id="highBtn" :select="selectIndex === 'highBtn'" :bg="highBg" :bg-hover="highHover" width="5" height="5"
text-hover="高频事件" @click="btnClick" />
<common-btn id="unfinishedBtn" :select="selectIndex === 'unfinishedBtn'" :bg="unfinishedBg"
:bg-hover="unfinishedHover" width="5" height="5" text-hover="未完结" @click="btnClick" />
<time-manager @handleTimeRange="handleTimeRange" />
</div>
<list-page ref="caseListPage" :title="title" :list="caseList" :hasUrge="hasUrge" :query="caseListQuery"
:total="caseTotal" @change="changePage" v-show="isListPage" @close="isListPage = false"
info-url="jxhsj-jxhsjsttj/jxhsjst/lczzxq" />
<jxh-pop ref="jxhPop" v-if="isShow" @close="isShow = false" />
</div>
</template>
<script>
import CryptoJS from 'crypto-js'
import CommonBtn from "@/components/CommonBtn"
import KeywordManager from "@/components/KeywordManager"
import TimeManager from "@/components/TimeManager"
import { AddLabelPoint } from '@/utils/freedo'
import { heat } from '@/utils/freedo/heat'
import { clearUpMap } from '@/utils/freedo'
import LayerManager from "@/components/LayerManager";
import {
getGrid,
getProject,
getSource,
getGridList,
getProjectList,
getSourceList,
getHeat,
getAll,
getCaseInfo, getBoard
} from "../../../../api/ywts/cszl/jxh";
import { AddDivPointCase, AddDivPointHighlight, AddOnlyLabel, AddPolygon } from "../../../../utils/freedo";
import ListPage from "@/components/ListPage";
import { getGridInfo, getGridToken } from "../../../../api/common";
import JxhPop from "./jxhPop";
import { eventBus } from "../../../../main";
export default {
name: 'Jxh',
components: { JxhPop, LayerManager, TimeManager, KeywordManager, CommonBtn, ListPage },
data() {
return {
preCase: null,
title: '精细化事件',
isShow: false,
ktSelect: '',
isListPage: false,
caseList: [],
caseListQuery: {
startTime: '',
endTime: '',
id: '',
pageNo: 0,
pageSize: 5
},
caseTotal: 0,
hasUrge: false,
caseIcon: {
已撤案: require('@/assets/images/icon/事件/已撤案.png'),
指派中: require('@/assets/images/icon/事件/指派中.png'),
处置中: require('@/assets/images/icon/事件/处置中.png'),
已办结: require('@/assets/images/icon/事件/已办结.png'),
已结案: require('@/assets/images/icon/事件/已结案.png'),
},
caseColor: {
已撤案: '#ffffff77',
指派中: '#fdeb5677',
处置中: '#85c8ff77',
已办结: '#ffba7477',
已结案: '#87f6b377',
},
time: {
startTime: '',
endTime: '',
},
selectIndex: 'layerBtn',
caseHeatBg: require('@/assets/images/function/教育/热力图未选中.png'),
caseHeatHover: require('@/assets/images/function/教育/热力图选中.png'),
grid: require('@/assets/images/function/精细化平台/网格未选中.png'),
gridHover: require('@/assets/images/function/精细化平台/网格选中.png'),
caseBg: require('@/assets/images/function/精细化平台/事件看板未选中.png'),
caseHover: require('@/assets/images/function/精细化平台/事件看板选中.png'),
highBg: require('@/assets/images/function/精细化平台/高频事件分析未选中.png'),
highHover: require('@/assets/images/function/精细化平台/高频事件分析选中.png'),
unfinishedBg: require('@/assets/images/function/精细化平台/未办结未选中.png'),
unfinishedHover: require('@/assets/images/function/精细化平台/未办结选中.png'),
icons: {
project: [
require('@/assets/images/icon/视频云/道路卡口.png'),
],
source: [
],
grid: [
],
},
menuTab: [{
name: '事件来源',
value: 'source'
}, {
name: '事件专项',
value: 'project'
}, {
name: '事件网格',
value: 'grid'
}],
menus: {
project: [
],
source: [
],
grid: [
]
}
}
},
mounted() {
this.$bus.$on('clear', () => {
this.isListPage = false
this.isShow = false
})
// 设置默认选中图层
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 }); // 蓉江新区边界
// 全部事件
getAll({
// urgent: '0',
// unsolve: '0',
// high: '0',
startTime: this.time.startTime,
endTime: this.time.endTime,
}).then(res => {
if (res.code === 200) {
this.caseMarker(res)
}
})
},
methods: {
// 网格点击
gridClick(eventArg) {
const item = eventArg._data.data
this.isShow = true
this.$nextTick(() => {
this.$refs.jxhPop.initData(item)
})
},
// 事件点样式通用方法
caseMarker(res) {
res.data.value.forEach(item => {
// console.log(item.status)
if (item.total === '1') {
AddLabelPoint(
item.id,
'',
this.caseIcon[item.status],
[item.longitude, item.latitude, 0], 'jxh-case', item,
this.clickCase)
} else {
AddDivPointCase(item, this.caseColor[item.status], item.total, this.clickCase)
}
})
},
// 点击*图层控制*菜单
async menuClick(e) {
this.preCase = null
clearUpMap()
let query = {
// urgent: '0',
// unsolve: '0',
// high: '0',
startTime: this.time.startTime,
endTime: this.time.endTime,
}
switch (e.bigtype) {
case 'source':
query.sourceId = e.type
getSourceList(query).then(res => {
if (res.code === 200) {
this.caseMarker(res)
}
})
break
case 'project':
query.projectId = e.type
getProjectList(query).then(res => {
if (res.code === 200) {
this.caseMarker(res)
}
})
break
case 'grid':
query.gridType = e.type
getGridList(query).then(res => {
if (res.code === 200) {
this.caseMarker(res)
}
})
break
}
},
// 点击marker弹窗
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], 'jxh-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.caseList = []
this.isListPage = true
this.hasUrge = false
this.$refs.caseListPage.initDialog()
this.caseListQuery = {
startTime: this.time.startTime,
endTime: this.time.endTime,
id: item.id,
pageNo: 0,
pageSize: 5
}
this.searchCaseMarkerList()
},
// 点击总菜单
async btnClick(e) {
this.preCase = null
clearUpMap()
this.isListPage = false
this.isShow = false
this.hasUrge = true
this.selectIndex = e.target.id
switch (this.selectIndex) {
case "layerBtn":
this.layerSeach()
break
case "caseBtn":
// 绘制
getAll({
// urgent: '0',
// unsolve: '0',
// high: '0',
startTime: this.time.startTime,
endTime: this.time.endTime,
}).then(res => {
if (res.code === 200) {
this.caseMarker(res)
}
})
// 事件看板
this.caseTotal = 1000 // todo
this.caseList = []
this.isListPage = true
this.hasUrge = true
this.$refs.caseListPage.initDialog()
this.caseListQuery = {
startTime: this.time.startTime,
endTime: this.time.endTime,
pageNo: 0,
pageSize: 5,
eventName: '',
type: ''
}
this.searchBoard()
break
case "highBtn":
// 高频事件
getAll({
// urgent: '0',
// unsolve: '0',
high: '1',
startTime: this.time.startTime,
endTime: this.time.endTime,
}).then(res => {
if (res.code === 200) {
this.caseMarker(res)
}
})
break
case "unfinishedBtn":
// 未完结事件
getAll({
// urgent: '0',
unsolve: '1',
// high: '0',
startTime: this.time.startTime,
endTime: this.time.endTime,
}).then(res => {
if (res.code === 200) {
this.caseMarker(res)
}
})
break
case "gridBtn":
this.searchGrid()
break
case "caseHeatBtn":
getHeat(this.time).then(res => {
if (res.code === 200) {
heat(res.data.value) // 热力图
}
})
break
}
},
gridDraw(token, areaCode) {
const colors = [
[0, 234, 255, 0.47],
[255, 185, 0, 0.47],
[255, 234, 0, 0.47],
[209, 0, 255, 0.47],
[255, 0, 38, 0.47],
]
getGridInfo({
paramCodeList: 'KJ5001',
areaCode,
token
}).then(res => {
console.log(res)
res.data.chirdAreaInfo.forEach((item, index) => {
item._source.areainfo.coordinates.forEach(area => {
let positions = []
let arr = item._source.areainfo.type === 'MultiPolygon' ? area[0] : area
arr.forEach(pos => {
positions.push(Freedo.Cartesian3.fromDegrees(pos[0], pos[1], 0))
})
AddPolygon(positions, colors[index % 5], this.gridClick, item._id)
AddOnlyLabel(
'',
item._source.areaname, //+ this.menus.grid
[item._source.lon, item._source.lat, 0],
'', null, null)
})
})
})
},
// 精细化网格
searchGrid() {
let timestamp = Date.now();
let param = {
user: 'nsltt',
time: timestamp,
secret: CryptoJS.MD5(timestamp + 'geostar999').toString()
}
getGridToken(param).then(res => {
clearUpMap()
this.gridDraw(res.data.token, '360783001')
this.gridDraw(res.data.token, '360783002')
this.gridDraw(res.data.token, '360783003')
this.gridDraw(res.data.token, '360783004')
})
},
// 三个概况统计
layerSeach() {
getSource(this.time).then(res => {
if (res.code === 200) {
this.menus.source = res.data.value.map(item => {
item.bigtype = 'source'
item.type = item.id.replace(/ /g, '')
item.typename = item.name.replace(/ /g, '')
return item
})
}
})
getProject(this.time).then(res => {
if (res.code === 200) {
this.menus.project = res.data.value.map(item => {
item.bigtype = 'project'
item.type = item.id.replace(/ /g, '')
item.typename = item.name.replace(/ /g, '')
return item
})
}
})
getGrid(this.time).then(res => {
if (res.code === 200) {
this.menus.grid = res.data.value.map(item => {
item.bigtype = 'grid'
item.type = item.id.replace(/ /g, '')
item.typename = item.name.replace(/ /g, '')
return item
})
}
})
},
// 事件换页
changePage(val) {
if (val && val.page) {
this.caseListQuery.pageNo = val.page
}
if (this.hasUrge) {
this.searchBoard()
} else {
this.searchCaseMarkerList()
}
},
// 事件看板查询
searchBoard() {
getBoard(this.caseListQuery).then(response => {
if (response.code === 200) {
console.log(response.data.value)
// 右侧看板
this.caseList = response.data.value
}
})
},
// 事件详情分页
searchCaseMarkerList() {
getCaseInfo(this.caseListQuery).then(response => {
if (response.code === 200) {
console.log(response.data.value)
// 右侧看板
this.caseList = response.data.value
}
})
},
// 事件控件回调
handleTimeRange(time) {
this.time = time
const item = {
target: {
id: this.selectIndex
}
}
this.btnClick(item)
}
}
}
</script>
<style scoped>
.video-menu {
display: flex;
z-index: 111111111;
width: 40rem;
height: 5rem;
position: absolute;
left: 20px;
top: 1rem;
}
</style>
