<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-08-18 16:18:17
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2024-05-13 16:34:30
|
* @FilePath: \srs-police-affairs\src\views\risk\index.vue
|
* @Description: 辖区管理
|
*
|
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
|
-->
|
|
<template>
|
<div class="police-page container">
|
<div v-show="boxShow" class="container-content" ref="containerContent">
|
<div class="down-tree">
|
<el-scrollbar>
|
<el-tree show-checkbox @check-change="handleCheckChange" v-show="searchLazyFlag" :props="props"
|
:load="loadNode" lazy node-key="id" @node-click="treeClick"
|
:default-expanded-keys="defaultExpandedKeys" :empty-text="''">
|
<span class="custom-tree-node" slot-scope="node">
|
<span>
|
{{ node.data.label }}
|
</span>
|
</span>
|
</el-tree>
|
</el-scrollbar>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { initMapPosition } from '@/utils/mapPositionInit'
|
import {
|
getRiskList,
|
} from '@/api/multiMap/index.js'
|
|
let loading = null
|
|
let pngData = [
|
{
|
name: '涝',
|
url: 'lao',
|
width: 32,
|
height: 32,
|
},
|
{
|
name: '危爆',
|
url: 'wb',
|
width: 38,
|
height: 32,
|
xOffset: 0,
|
yOffset: 10
|
}
|
]
|
|
let layerData = []
|
|
/**
|
* @description: 将图片和文字合成新图标使用（参考Cesium源码）
|
* @param {*} url：图片地址
|
* @param {*} label：文字
|
* @param {*} size：画布大小
|
* @return {*} 返回canvas
|
*/
|
function combineIconAndLabel (url, label, width, height, xOfffset = 0, yOffset = 0) {
|
// 创建画布对象
|
let canvas = document.createElement('canvas')
|
canvas.width = width
|
canvas.height = height
|
|
let ctx = canvas.getContext("2d")
|
|
let promise = new global.DC.Namespace.Cesium.Resource.fetchImage(url).then(image => {
|
// 异常判断
|
try {
|
ctx.drawImage(image, 0, 0)
|
} catch (e) {
|
console.log(e)
|
}
|
|
// 渲染字体
|
// font属性设置顺序：font-style, font-variant, font-weight, font-size, line-height, font-family
|
ctx.fillStyle = global.DC.Namespace.Cesium.Color.BLACK.toCssColorString()
|
ctx.font = 'bold 14px Microsoft YaHei'
|
ctx.textAlign = "center"
|
ctx.textBaseline = "middle"
|
console.log(yOffset, 60666)
|
ctx.fillText(label, (width + xOfffset) / 2, (height + yOffset) / 2)
|
|
return canvas
|
})
|
return promise
|
}
|
|
|
export default {
|
inject: ['userInfo'],
|
|
data () {
|
return {
|
boxShow: false,
|
searchLazyFlag: true,
|
defaultExpandedKeys: [],
|
|
props: {
|
label: 'label',
|
isLeaf: 'leaf'
|
},
|
}
|
},
|
|
created () {
|
const that = this
|
|
this.$nextTick(() => {
|
initMapPosition()
|
})
|
},
|
|
mounted () {
|
this.$parent.$parent.resize('400px', true)
|
|
this.$nextTick(() => {
|
this.$EventBus.$emit('closeMxTileset')
|
})
|
},
|
|
computed: {
|
|
},
|
|
methods: {
|
loading () {
|
loading = this.$loading({
|
lock: true,
|
text: '拼命加载中',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.5)'
|
})
|
},
|
|
uuid () {
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
var r = Math.random() * 16 | 0,
|
v = c == 'x' ? r : (r & 0x3 | 0x8)
|
return v.toString(16)
|
})
|
},
|
|
async loadNode (node, resolve) {
|
let data = null
|
let type = {}
|
let flag = false
|
|
if ('data' in node && node.data && 'hasChildren' in node.data && node.data.hasChildren) {
|
type = {
|
type: node.data.type
|
}
|
flag = true
|
}
|
|
await getRiskList(type).then(res => {
|
|
data = res.data.data.map((item, index) => {
|
let layerName = this.uuid()
|
|
if (flag == true) {
|
layerName = node.data.layerName
|
} else {
|
layerData.push(layerName)
|
}
|
|
return {
|
...item,
|
ind: index + 1,
|
layerName,
|
label: item.placeName,
|
leaf: !item.hasChildren
|
}
|
})
|
})
|
|
return resolve(data)
|
},
|
|
handleCheckChange (data, checked, indeterminate) {
|
if (!checked) {
|
if (data && 'hasChildren' in data && data.hasChildren) {
|
this.$EventBus.$emit('mapClearLayer', {
|
layerName: data.layerName,
|
type: 'VectorLayer'
|
})
|
} else {
|
this.$EventBus.$emit('mapRemoveSiteLayer', {
|
layerName: data.layerName,
|
siteId: data.id
|
})
|
}
|
} else {
|
if (data && 'hasChildren' in data && data.hasChildren) {
|
getRiskList({
|
type: data.type
|
}).then(res => {
|
res.data.data.forEach((item, index) => {
|
if (item.lng && item.lat) {
|
let pngObj = {
|
url: 'location',
|
width: 32,
|
height: 32
|
}
|
|
let flag = pngData.some(i => item.type.indexOf(i.name) != -1)
|
|
if (flag) {
|
pngObj = pngData.find(i => item.type.indexOf(i.name) != -1)
|
}
|
|
this.$EventBus.$emit('layerPointAdd', {
|
layerName: data.layerName,
|
type: "newBillboard",
|
params: {
|
...item,
|
lng: item.lng,
|
lat: item.lat,
|
url: `/img/multip/${pngObj.url}.png`,
|
// combineIconAndLabel(, index + 1, pngObj.width, pngObj.height, pngObj.xOfffset, pngObj.yOffset),
|
},
|
incident: this.siteClick,
|
})
|
}
|
})
|
})
|
} else {
|
if (data.lng && data.lat) {
|
let pngObj = {
|
url: 'location',
|
width: 32,
|
height: 32
|
}
|
|
let flag = pngData.some(i => data.type.indexOf(i.name) != -1)
|
|
if (flag) {
|
pngObj = pngData.find(i => data.type.indexOf(i.name) != -1)
|
}
|
|
this.$EventBus.$emit('layerPointAdd', {
|
layerName: data.layerName,
|
type: "newBillboard",
|
params: {
|
...data,
|
lng: data.lng,
|
lat: data.lat,
|
url: `/img/multip/${pngObj.url}.png`,
|
// combineIconAndLabel(`/img/multip/${pngObj.url}.png`, data.ind, pngObj.width, pngObj.height, pngObj.xOfffset, pngObj.yOffset)
|
},
|
incident: this.siteClick,
|
})
|
}
|
}
|
}
|
},
|
|
treeClick (node) {
|
if (node.parent == true) return
|
|
const { lng, lat } = node
|
|
if (lng == undefined || lng == 0 || lng == null || lng == ''
|
|| lat == undefined || lat == 0 || lat == null || lat == '') {
|
this.$message({
|
message: '该设备暂无位置信息',
|
type: 'warning'
|
})
|
|
return
|
}
|
|
this.$EventBus.$emit('toPosition', {
|
siteJd: node.lng,
|
siteWd: node.lat,
|
siteGd: 600,
|
})
|
|
this.$store.commit('SET_MULTIPMAPPOPUP', true)
|
|
this.$store.commit('SET_MULTIPMAPPOPUPDATA', {
|
title: node.placeName,
|
detail: {
|
'场所名称': node.placeName,
|
'存在隐患': node.hiddenDangerDesc,
|
'所属派出所': node.pcsName,
|
'地址': node.address,
|
}
|
})
|
|
var popup = new global.DC.DivForms(global.viewer, {
|
domId: 'multipMapPopupDomBox',
|
position: [
|
global.DC.Transform.transformWGS84ToCartesian(
|
new global.DC.Position(
|
Number(node.lng),
|
Number(node.lat),
|
0
|
)
|
)
|
]
|
})
|
},
|
|
siteClick (e) {
|
this.treeClick(e.overlay.attrParams)
|
},
|
|
// 大小重置
|
boxResize (val) {
|
this.boxShow = val
|
},
|
},
|
|
destroyed () {
|
loading && loading.close()
|
|
layerData.forEach(item => {
|
this.$EventBus.$emit('mapClearLayer', {
|
layerName: item,
|
type: 'VectorLayer'
|
})
|
})
|
|
this.$store.commit('SET_MULTIPMAPPOPUP', false)
|
|
this.$parent.$parent.resize('0px')
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
|
&-content {
|
padding: 10px 0;
|
display: flex;
|
flex-direction: column;
|
width: 100%;
|
height: 100%;
|
color: #fff;
|
background: $bg-color;
|
|
.down-tree {
|
flex: 1;
|
overflow: hidden;
|
|
:deep(.el-tree-node__content) {
|
position: relative;
|
}
|
|
:deep(.el-tree-node.is-expanded > .el-tree-node__children) {
|
display: inline;
|
}
|
|
:deep(.el-scrollbar) {
|
height: 100%;
|
}
|
|
.custom-tree-node {
|
display: flex;
|
align-items: center;
|
|
.status-box {
|
margin: auto;
|
margin-right: 6px;
|
width: 10px;
|
height: 10px;
|
text-align: center;
|
border-radius: 50%;
|
background-color: #adadad;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
