<template lang="pug">
<div class="police_point">
<el-container style='padding-left:0px;'>
<el-aside width='333px'>
<el-card :style="{height:currentHeight-69+'px'}">
<div class="police_point_left_top">
<div class="police_point_left_topL">
<div :class="[activeName==1?'on':'']" @click="handleClick(1)">资源列表</div>
<div :class="[activeName==2?'on':'']" @click="handleClick(2)">收藏夹</div>
</div>
<div style="float:right; margin:5px 5px 0 5px">
<el-button type="text" size="mini" icon='el-icon-shoucang' @click="treeDataOffClick()"></el-button>
</div>
<div class="police_point_left_topR">
<el-input size="mini" suffix-icon="el-icon-search" v-model="searchInput" clearable></el-input>
</div>
</div>
<div class="tree-container">
<el-tree :style="{height:currentHeight-145+'px'}" class="dic_tree" :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :props="defaultProps" :filter-node-method="filterNode" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' >
<span class="custom-tree-node" style='width:85%;line-height: 18px;' slot-scope="{ node, data }">
<span v-if="node.data.level != 6 && node.data.iconB" class="el-icon-wq-treeIcon1 xa-icon"></span>
<span v-if="node.data.level != 6 && !node.data.iconB" class="el-icon-wq-treeIcon xa-icon"></span>
<span v-if="node.data.level == 6 " :class="node.data.icon+'7'" class='xa-icon'></span>
<span v-if="node.label.indexOf('在线') == -1 && node.label.indexOf('离线') == -1"> {{node.label}}</span>
<span v-if="node.label.indexOf('在线') > -1"> {{node.label.substring(0,node.label.length - 4)}}<span style='color:green;'>[在线]</span></span>
<span v-if="node.label.indexOf('离线') > -1"> {{node.label.substring(0,node.label.length - 4)}}<span style='color:red;'>[离线]</span></span>
<span style="float:right;">
<el-button style="padding:0;" v-if="activeName == 2 && node.data.level == 5" type='text' icon="el-icon-delete" @click="treeDataDeleteClick(node,data)" ></el-button>
</span>
span(v-if=" node.data.iconB" class='el-icon-my-treeFlag')
</span>
</el-tree>
</div>
</el-card>
</el-aside>
<el-main style="padding:0px;">
<el-card>
<div class="police_point_right_button">
<el-row style="padding-bottom:15px;" :span="24">
<el-col :md='12' :sm="5" class='tier-btn'>
div(v-for="item in mapList" :key='item.id')
<el-button type="primary" size="small" plain :class="[checkedData.tierId===item.id?'active-tier':'']" style="float:left;margin-left:10px;" @click="changeMap(item)">{{item.name}}</el-button>
</el-col>
<el-col :md='12'>
<div style='float:right;margin-right:10px'>
//- <el-button type="primary" v-if="defenseAll && isAuth('police:point:side')" size="small" @click="arrangeAllClick" style="float:left;margin:10px 0 0 10px;">全部撤防</el-button>
//- <el-button type="primary" v-if="defenseAll && isAuth('police:point:place')" size="small" @click="revokeAllClick" style="float:left;margin:10px 0 0 10px;">全部布防</el-button>
//- <el-button type="primary" v-if="defenseShow && isAuth('police:point:side')" size="small" @click="arrangeClick" style="float:left;margin:10px 0 0 10px;">撤防</el-button>
//- <el-button type="primary" v-if="defenseShow && isAuth('police:point:place')" size="small" @click="revokeClick" style="float:left;margin:10px 0 0 10px;">布防</el-button>
<el-button type="primary" v-for='(item,index) in actionList' v-if="isAuth('police:point:'+ item.qxan)" :key='index' @click='lightingOnOff(item)' size="small" style="float:left;margin:10px 0 0 10px;">{{item.actionName}}</el-button>
//- <el-button type="primary" v-if="lightingShow && isAuth('police:point:openL')" size="small" @click="lightingOnOff(1)" style="float:left;margin:10px 0 0 10px;">照明开</el-button>
//- <el-button type="primary" v-if="lightingShow && isAuth('police:point:offL')" size="small" @click="lightingOnOff(0)" style="float:left;margin:10px 0 0 10px;">照明关</el-button>
//- <el-button type="primary" v-if="policeShow && isAuth('police:point:alarm')" size="small" @click="lightingOnOff(2)" style="float:left;margin:10px 0 0 10px;">开启报警</el-button>
//- <el-button type="primary" v-if="policeShow && isAuth('police:point:clear')" size="small" @click="lightingOnOff(3)" style="float:left;margin:10px 0 0 10px;">消除报警</el-button>
</div>
</el-col>
</el-row>
</div>
<div class="police_point_right_button_r">
<div :class="[transformationSta == 1?'on':'']" @click="transformation(1)">2D</div>
<div :class="[transformationSta == 2?'on':'']" @click="transformation(2)">3D</div>
</div>
<div v-show="transformationSta==1">
<el-row style="background:#fff;" :style="{height:currentHeight-115+'px'}" :span="24">
<el-col class="resource-container" :style="obj" ref="drag">
<div id="policeMap" class="map" ref='map' style="width: 100%;position: relative;" :style="{height:currentHeight-125+'px'}"></div>
</el-col>
</el-row>
</div>
<div class="map_right" >
<div>
<iframe :src="src" ref="iframe"></iframe>
</div>
</div>
</el-card>
</el-main>
<query-detail v-if='queryDetailVisible' ref='queryDetail' @closeQ="closeQueryDetailVisible"></query-detail>
</el-container>
</div>
</template>
<script>
import QueryDetail from './query-detail'
import { getUUID } from '@/util'
import Vue from 'vue'
import 'ol/ol.css'
import { Map, View, layer, Markers } from 'ol'
import { Projection, Transform } from 'ol/proj'
import { getCenter } from 'ol/extent'
import overviewmap from 'ol/control/OverviewMap'
import ImageLayer from 'ol/layer/Image'
import ImageStatic from 'ol/source/ImageStatic'
import { control } from 'ol/control/Control'
import Zoom from 'ol/control/Zoom'
import { DoubleClickZoom, Select } from 'ol/interaction'
// 图上图标相关
import OlFeature from 'ol/Feature'
import OlGeomPoint from 'ol/geom/Point'
import OlLayerVector from 'ol/layer/Vector'
import OlSourceVector from 'ol/source/Vector'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import LineString from 'ol/geom/LineString'
import Polygon from 'ol/geom/Polygon'
// 用来添加相关文字描述的
import { Text, Fill, Stroke, Circle, Style } from 'ol/style'
let that
export default {
name: 'sys-user',
filters: {
ellipsis (value) {
if (!value) return ''
if (value.length > 20) {
return value.slice(0, 20) + '...'
}
return value
}
},
data () {
return {
systemList: [],
imgLayerList: [],
controlList: [],
actionList: [],
defenseAll: true,
defenseShow: false,
lightingShow: false,
policeShow: false,
rightData: [],
transformationSta: 1,
isCollapse: true,
dataList: [],
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataListSelections: [],
addOrUpdateVisible: false,
queryDetailVisible: false,
urlPath: window.CONFIG.urlPath,
treeData: [],
treeDataNowId: '',
src: window.CONFIG.bimPath,
defaultExpandedKeys: [],
defaultProps: {
children: 'children',
label: 'name',
level1: 'level'
},
nodeKey: 'id',
station: {}, //当前选择的站点
mapList: [], //当前站点的所有层
stationMap: {}, //当前选择的层
resource: {}, //当前选择的资源点
lineId: localStorage.getItem('currenLineId'),
stationId: localStorage.getItem('stationId'),
checkedData: {
lineId: '',
lineName: '',
stationId: '',
stationName: '',
subSystem: '',
tierId: '',
tierName: '',
resourceId: '',
sId: localStorage.getItem('stationId'),
subCode: '03'
},
currentNode: {},
dragAble: false,
list: [],
obj: 'pointer-events:initial',
editable: false,
activeName: '1',
searchInput: '',
regionMouse: {
x: 0,
y: 0,
w: 0,
h: 0,
status: false
},
boxBean: {} //防区对象
}
},
components: {
QueryDetail
},
watch: {
searchInput (val) {
this.$refs.tree.filter(val)
}
},
computed: {
currentHeight() {
return this.$store.state.d2admin.currentHeight.height
}
},
created () {
that = this
this.initTreeStationMap()
},
methods: {
// 初始化地图
initMap(url) {
let mapList = this.mapList
this.imgurl = url
// 计算静态地图映射到地图上的范围
// let extent = [-1100, 110, 1460, 820]
let extent = [-600, -100, 800, 1000]
let projection = new Projection({
// 投影
code: 'xkcd-image',
units: 'pixels',
extent: extent
})
if (mapList.length > 0) {
for (var i = 0; i < mapList.length; i++) {
let layerItem = new ImageLayer({
id: mapList[i].id,
source: new ImageStatic({
url: mapList[i].readPath, //这里添加静态图片的地址
projection: projection,
imageExtent: extent
}),
visible: false
})
this.imgLayerList.push(layerItem)
let controlItem = new overviewmap({
className: 'ol-overviewmap myOverview', //鹰眼控件样式
// 在鹰眼中加载相同坐标系下不同数据源的图层
layers: [
new ImageLayer({
source: new ImageStatic({
url: mapList[i].readPath, //这里添加静态图片的地址
projection: projection,
imageExtent: extent
})
})
],
// layers:this.controlList,
collapseLabel: '\u00BB', //鹰眼控件展开时功能按钮上的标识
label: '\u00AB', //鹰眼控件折叠时功能按钮上的标识
collapsed: false //初始为展开方式
})
this.controlList.push(controlItem)
}
}
let zoomControl = new Zoom({
delta: 0.2,
zoomInTipLabel: '',
zoomOutTipLabel: ''
})
// 大图
this.map = new Map({
target: 'policeMap',
layers: this.imgLayerList,
controls: [zoomControl],
view: new View({
projection: projection,
center: getCenter([0, 0, 0, 0]), // 获取范围的中心坐标。
zoom: 1.5,
maxZoom: 5.0,
minZoom: 1.5,
extent: [-1100, -100, 2000, 1000]//[minX, minY, maxX, maxY] 控制拖动
})
})
// 删除默认的双击事件
const dblClickInteraction = this.map
.getInteractions()
.getArray()
.find(interaction => {
return interaction instanceof DoubleClickZoom
})
this.map.removeInteraction(dblClickInteraction)
//将鹰眼控件加载到map中
this.map.addControl(this.controlList[0])
//点击事件
this.changeVectorLayer(this.list)
this.map.on('click', function (evt) {
let feature = evt.map.forEachFeatureAtPixel(evt.pixel, function (feature) {
return feature
})
if (feature) {
for (let i in that.list) {
let style = that.getPointStyle(that.list[i].imageSrc + '.png', that.list[i].name)
let style2 = that.getPointStyle(that.list[i].imageSrc + '2.png', that.list[i].name, 0.3)
//获取feature对象
let feature_ = that.vectorLayer.getSource().getFeatureById(that.list[i].id)
//获取红外对射或者振动光纤第二个点的feature对象
let featureEnd = that.vectorLayer.getSource().getFeatureById(that.list[i].id + 'end')
if (feature_) {
if (feature_ === feature || featureEnd === feature) {
//修改选中样式
feature_.setStyle(style2)
if (featureEnd) {
featureEnd.setStyle(style2)
}
that.pointListClick(that.list[i])
} else {
//清除选中以外的样式
feature_.setStyle(style)
if (featureEnd) {
featureEnd.setStyle(style)
}
}
}
}
}
})
},
getPointStyle(src, name, zoom) {
let style = new OlStyleStyle({
image: new OlStyleIcon({
anchor: [0.5, 0.5],
scale: zoom || 0.4,
//rotation:0 旋转度
src: require('@/assets/images/' + src)
}),
text: new Text({
text: name, // 添加文字描述
font: '14px font-size', // 设置字体大小
fill: new Fill({
// 设置字体颜色
color: 'black'
}),
offsetY: 30 // 设置文字偏移量
})
})
return style
},
clearLayer() {
if (this.map) {
this.map.removeLayer(this.vectorLayer)
this.map.removeLayer(this.lineVectorLayer)
// this.map.removeLayer(this.boxVectorLayer)
this.map.removeInteraction(this.modify)
return false
} else {
return true
}
},
addBox(obj) {
this.boxVectorLayer = new OlLayerVector({
source: new OlSourceVector({
features: []
}),
style: new OlStyleStyle({
stroke: new Stroke({
color: '#409EFF',
width: 2
}),
fill: new Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
})
})
this.map.addLayer(this.boxVectorLayer)
//创建矩形对象
let start = [obj.xpoint, obj.ypoint]
let end = [obj.xlongit, obj.ylat]
let boxFeature = new OlFeature({
geometry: new Polygon([[start, [start[0], end[1]], end, [end[0], start[1]], start]])
})
boxFeature.setId(obj.id + 'box')
this.boxVectorLayer.getSource().addFeature(boxFeature)
// if (this.boxBean) {
// let itemList=this.boxBean.children
// //修改在防区内资源点样式
// if (this.boxBean.resourceIds) {
// let resourceList = this.boxBean.resourceIds.split(',')
// this.addList = resourceList
// for (let i in resourceList) {
// for (let j in this.list) {
// if (resourceList[i] === this.list[j].id) {
// this.setStyle(this.list[j])
// }
// }
// }
// }
// }
},
changeVectorLayer(list) {
if (list) {
this.list = list
} else {
this.clearLayer()
}
if (this.clearLayer()) return
// if (this.map) {
// this.map.removeLayer(this.vectorLayer)
// this.map.removeLayer(this.lineVectorLayer)
// } else {
// return
// }
// this.boxVectorLayer = new OlLayerVector({
// source: new OlSourceVector({
// features: []
// }),
// style: new OlStyleStyle({
// stroke: new Stroke({
// color: '#409EFF',
// width: 2
// }),
// fill: new Fill({
// color: 'rgba(0, 0, 255, 0.1)'
// })
// })
// })
// this.map.addLayer(this.boxVectorLayer)
// //创建矩形对象
// let start = [this.boxBean.xpoint, this.boxBean.ypoint]
// let end = [this.boxBean.xlongit, this.boxBean.ylat]
// let boxFeature = new OlFeature({
// geometry: new Polygon([[start, [start[0], end[1]], end, [end[0], start[1]], start]])
// })
// boxFeature.setId(this.boxBean.id + 'box')
// this.boxVectorLayer.getSource().addFeature(boxFeature)
// if (this.boxBean) {
// let itemList=this.boxBean.children
// if(itemList){
// for (let i in itemList) {
// // this.setStyle(this.list[parseInt(i)])
// }
// }
// //修改在防区内资源点样式
// // if (this.boxBean.resourceIds) {
// // let resourceList = this.boxBean.resourceIds.split(',')
// // this.addList = resourceList
// // for (let i in resourceList) {
// // for (let j in this.list) {
// // if (resourceList[i] === this.list[j].id) {
// // this.setStyle(this.list[j])
// // }
// // }
// // }
// // }
// }
this.lineVectorLayer = new OlLayerVector({
source: new OlSourceVector({
features: []
}),
style: new OlStyleStyle({
stroke: new Stroke({
color: '#409EFF',
width: 3
})
})
})
this.map.addLayer(this.lineVectorLayer)
let lineLastArr = []
let featuresArr = []
for (let i in list) {
if (list[i].imageSrc) {
//振动光纤和红外线对射
if (list[i].type === 'e670524ecb9e4a03b8ddbc7d91a63b1b' || list[i].type === '4f69755dbc0c45e49c142857286c5669') {
let lineFeatures = []
lineFeatures.push([list[i].xlongit, list[i].ylat])
lineFeatures.push([list[i].xpoint, list[i].ypoint])
this.lineVectorLayer.getSource().addFeature(new OlFeature(new LineString(lineFeatures)))
lineLastArr.push(list[i])
}
featuresArr.push(this.getFeature(list[i].xlongit, list[i].ylat))
let style = this.getPointStyle(list[i].imageSrc + '.png', this.list[i].name)
featuresArr[i].setStyle(style)
featuresArr[i].setId(list[i].id)
} else {
continue
}
}
let LinefeaturesArr = []
for (let i in lineLastArr) {
// let bean = JSON.parse(JSON.stringify(lineLastArr[i]))
// LinefeaturesArr.push(this.getFeature(bean.xpoint, bean.ypoint))
// let style = this.getPointStyle(bean.imageSrc + '.png', bean.name)
// LinefeaturesArr[i].setStyle(style)
// bean.id = getUUID()
// bean.key = lineLastArr[i].id
// LinefeaturesArr[i].setId(bean.key + 'end')
// this.list.push(bean)
LinefeaturesArr.push(this.getFeature(lineLastArr[i].xpoint, lineLastArr[i].ypoint))
let style = this.getPointStyle(lineLastArr[i].imageSrc + '.png', lineLastArr[i].name)
LinefeaturesArr[i].setStyle(style)
LinefeaturesArr[i].setId(lineLastArr[i].id + 'end')
//this.list.push(lineLastArr[i])
}
this.vectorLayer = new OlLayerVector({
source: new OlSourceVector({
features: featuresArr.concat(LinefeaturesArr)
})
})
this.map.addLayer(this.vectorLayer)
},
getFeature(x, y) {
return new OlFeature({
type: 'icon',
geometry: new OlGeomPoint([x, y])
})
},
setStyle(item) {
//选中样式
let style2 = this.getPointStyle(item.imageSrc + '2.png', item.name, 0.3)
let feature_ = this.vectorLayer.getSource().getFeatureById(item.id)
feature_.setStyle(style2)
let featureEnd = this.vectorLayer.getSource().getFeatureById(item.id + 'end')
if (featureEnd) {
featureEnd.setStyle(style2)
}
},
// 改变层级和鹰眼图
changeImgControl(id) {
let srcIndex = this.imgLayerList.findIndex((e) => {
return e.values_.id == id
})
this.map.removeControl(this.controlList[srcIndex])
this.map.addControl(this.controlList[srcIndex])
for (var k = 0; k < this.imgLayerList.length; k++) {
if (this.imgLayerList[k].values_.id == id) {
// that.imgurl=map.readPath
this.imgLayerList[k].setVisible(true)
} else {
this.imgLayerList[k].setVisible(false)
}
}
},
sendMessage(lineId, stationId, code, type) {
setTimeout(() => {
if (!this.$refs.iframe) {
return
}
if (type == 1) {
this.$refs.iframe.contentWindow.postMessage(
{
func: 'init',
data: {
lineId: lineId,
stationId: stationId
}
},
this.src
)
} else {
this.$refs.iframe.contentWindow.postMessage(
{
func: 'locateByCode',
data: {
lineId: lineId,
stationId: stationId,
code: code
}
},
this.src
)
}
}, 1000)
},
// 树节点过滤
filterNode (value, data) {
if (!value) return true
return data.name.indexOf(value) !== -1
},
handleClick(tab) { //左侧tab切换
if (tab) {
this.activeName = tab
}
if (this.activeName == 1) {
this.initTreeStationMap()
} else {
this.initTreeStationMap(true)
}
},
treeDataDeleteClick(node, data) { //左侧tree取消收藏按钮
this.$confirm('确认取消该收藏?', '取消收藏', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
closeOnClickModal: false
})
.then(() => {
this.$http({
url: this.$http.adornUrlEq('/liEnshrine/delete'),
method: 'post',
data: {
resourceId: node.data.id,
stationId: this.checkedData.sId
}
}).then(data => {
if (data && data.code === 0) {
this.$message.success('取消收藏成功')
this.initTreeStationMap(true)
}
})
})
.catch(() => {})
},
treeDataOffClick () { //左侧tree收藏按钮
let node = this.$refs.tree.getCurrentNode()
if (node.level != 5) {
this.$message.warning('只能收藏防区')
return
}
this.$http({
url: this.$http.adornUrlEq('/liEnshrine/save'),
method: 'post',
data: {
resourceId: node.id,
byx1: '1',
stationId: this.checkedData.sId
}
}).then(data => {
if (data && data.code === 0) {
if (data.msg === '收藏成功') {
this.$message.success(data.msg)
} else {
this.$message.warning(data.msg)
}
}
})
},
//获取动作按钮
getActionList (item) {
var str = item.split('_')
this.$http({
url: this.$http.adornUrlEq('/eWarning/getActionByType'),
method: 'get',
params: {
subCode: '03',
resourceType: str[0],
brand: str[1],
stationId: localStorage.getItem('stationId')
}
}).then(data => {
if (data && data.code === 0) {
if (data.map && data.map.actions) {
data.map.actions.forEach(element => {
element.type = str[0]
this.actionList.push(element)
})
}
}
})
},
pointListClick(item) { //监视器列表点击
this.actionList = []
this.defenseAll = false
this.defenseShow = true
this.getActionList(item.type + '_' + item.brand)
this.currentNode = item
if (this.transformationSta == 1) {
this.queryDetail(item.id)
}
this.activeChooseResourceBox(item.id)
this.defaultExpandedKeys = [item.id]
},
//初始化站点下的资源点
initTreeStationMap(save) {
let url = ''
if (!save) { // 摄像头列表接口路径
url = this.$http.adornUrlEq('/invadeDefence/getStationMapCodeTreeList')
} else { // 收藏夹接口路径
url = this.$http.adornUrlEq('/liEnshrine/getEnshrineStationMapTreeList')
}
this.$http({
url: url,
method: 'post',
data: {
subCode: this.checkedData.subCode,
stationId: this.checkedData.sId,
resourceName: this.searchInput
}
}).then(data => {
// console.log('初始化线路树：', data.nodes)
if (data && data.code === 0) {
this.treeData = data.nodes
// console.log(this.treeData,1111111)
// this.$refs.tree.updateKeyChildren(this.checkedData.sId, data.nodes)
if (this.treeData && this.treeData.length > 0) {
this.isFlag(this.treeData, data.nodes[0].id)
this.defaultExpandedKeys = [this.treeData[0].id]
this.$nextTick(() => {
this.$refs.tree.setCurrentNode(this.treeData[0])
})
}
}
}).then(() => {
if (this.treeData && this.treeData.length > 0) {
this.defaultExpandedKeys = [this.treeData[0].id]
}
this.initStation(this.checkedData.sId)
})
},
initStation(id) { //获取层级下全部资源点
// console.log('初始化站点id：', id)
this.$http({
url: this.$http.adornUrlEq('/liResource/getStationMapCodeTreeList'),
method: 'post',
data: {
stationId: this.checkedData.sId,
id: this.checkedData.tierId,
subCode: this.checkedData.subCode
}
}).then(data => {
// console.log('初始化线路树：', data.nodes)
if (data && data.code === 0) {
this.rightData = data.nodes
this.list = !this.rightData[0] ? [] : this.rightData[0].children
if (!this.checkedData.tierId) {
this.mapList = data.nodes
this.mapList.forEach(element => {
element.readPath = this.urlPath + element.filePath
})
}
this.checkedData.tierId = !this.mapList[0] ? '' : this.mapList[0].id
// this.stationMap = this.rightData[0]
}
}).then(() => {
if (!this.checkedData.tierId) {
return
}
// this.showResourceByMapId()
if (!this.map) {
this.initMap()
this.imgLayerList[0].setVisible(true) //初始第一个显示
} else {
this.changeVectorLayer(this.list)
}
})
},
isFlag(data, id) {
data.forEach(res => {
if (res.id === id) {
Vue.set(res, 'iconB', true)
} else {
Vue.set(res, 'iconB', false)
}
if (res.children) {
this.isFlag(res.children, id)
}
})
},
//线路资源点树节点点击事件
handleNodeClick(node) {
this.clearLayer()
this.currentNode = node
this.boxBean = node
let name = node.name
let id = node.id
this.isFlag(this.treeData, id)
for (let li in this.list) {
this.list[li].active = false
}
//全部布防、撤防，按钮默认打开
this.defenseAll = true
//站厅
if (node.level === 4) {
this.actionList = []
this.map.removeLayer(this.boxVectorLayer)
this.defenseShow = false
this.lightingShow = false
this.policeShow = false
this.regionMouse.status = false
this.checkedData.tierId = id
this.showResourceByMapId()
this.changeImgControl(id)
this.list = this.rightData.filter((e) => {
return e.id == node.id
})
this.changeVectorLayer(this.list[0].children)
} else if (node.level === 5) { //防区
this.actionList = []
this.checkedData.tierId = node.pid
this.list = node.children
this.defenseShow = false
this.lightingShow = false
this.policeShow = false
//判断下面有几个类型设备，显示控制按钮需要哪些
if (this.list && this.list.length > 0) {
let arr = []
for (let index = 0; index < this.list.length; index++) {
const element = this.list[index]
if (arr.indexOf(element.type + '_' + element.brand) == -1) {
arr.push(element.type + '_' + element.brand)
}
}
arr.forEach(el => {
this.getActionList(el)
})
}
this.regionMouse.x = node.xpoint || 0
this.regionMouse.y = node.ypoint || 0
this.regionMouse.w = node.width || 0
this.regionMouse.h = node.height || 0
this.regionMouse.status = true
this.treeDataNowId = node.id
this.changeImgControl(node.tierId)
this.map.removeLayer(this.boxVectorLayer)
this.addBox(node)
this.changeVectorLayer(this.list)
for (let i in this.list) {
that.setStyle(this.list[i])
}
} else if (node.level === 6) {
//资源点1
this.checkedData.tierId = node.mapId
this.regionMouse.status = true
this.defenseAll = false
this.defenseShow = true
this.pointListClick(node)
this.checkedData.resourceId = id
this.activeChooseResourceBox(id)
this.regionMouse.x = node.p_xpoint || 0
this.regionMouse.y = node.p_ypoint || 0
this.regionMouse.w = node.p_width || 0
this.regionMouse.h = node.p_height || 0
this.regionMouse.status = true
this.changeImgControl(node.tierId)
let pNode = {
xpoint: node.p_xpoint,
ypoint: node.p_ypoint,
xlongit: node.p_xlongit,
ylat: node.p_ylat
}
this.map.removeLayer(this.boxVectorLayer)
this.addBox(pNode)
let list = this.$refs.tree.getNode(node.pid).data
this.changeVectorLayer(list.children)
let feature = this.vectorLayer.getSource().getFeatureById(id)
if (feature) {
for (let i in this.list) {
if (feature.id_ == that.list[i].id) {
this.listItem = that.list[i]
}
//flag为ture打开详情或者编辑页面
this.mapClick(feature, that.list[i], false)
}
}
if (this.transformationSta == 2) {
console.log(1111111111111)
this.sendMessage(node.lineId, node.stationId, node.code)
}
}
},
mapClick(feature, item, flag) {
//默认样式
let style = this.getPointStyle(item.imageSrc + '.png', item.name)
//选中样式
let style2 = this.getPointStyle(item.imageSrc + '2.png', item.name, 0.3)
//获取feature对象
let feature_ = this.vectorLayer.getSource().getFeatureById(item.id)
//获取红外对射或者振动光纤第二个点的feature对象
let featureEnd = this.vectorLayer.getSource().getFeatureById(item.id + 'end')
if (feature_) {
if (feature_ === feature || featureEnd === feature) {
//console.log(feature_)
//修改选中样式
feature_.setStyle(style2)
if (featureEnd) {
featureEnd.setStyle(style2)
}
// if(!this.editable) this.openAddOrUpdate(item) //未编辑状态下 点击查看
if (flag) this.openAddOrUpdate(item)
} else {
//清除选中以外的样式
feature_.setStyle(style)
if (featureEnd) {
featureEnd.setStyle(style)
}
}
} else {
//获取新增的feature对象
let newFeature = this.vectorLayer.getSource().getFeatureById(item.key)
//获取红外对射或者振动光纤第二个点的feature对象
let newFeatureEnd = this.vectorLayer.getSource().getFeatureById(item.key + 'end')
if (newFeature) {
if (newFeature === feature || newFeatureEnd === feature) {
newFeature.setStyle(style2)
if (newFeatureEnd) {
newFeatureEnd.setStyle(style2)
}
if (flag) this.openAddOrUpdate(item) //查看
} else {
//清除选中以外的样式
newFeature.setStyle(style)
if (newFeatureEnd) {
newFeatureEnd.setStyle(style)
}
}
}
}
},
//激活选中资源点位节点
activeChooseResourceBox(id, level) {
this.list.forEach(res => {
if (res.id === id) {
Vue.set(res, 'active', true)
} else {
Vue.set(res, 'active', false)
}
})
},
//切换层级
changeMap(map) {
this.actionList = []
this.defenseShow = false
this.boxBean = []
this.map.removeLayer(this.boxVectorLayer)
//图层缩放级别设置为默认
this.map.getView().setZoom(1)
this.changeImgControl(map.id)
this.regionMouse.status = false
// console.log('选择的层级', map)
this.currentNode = this.$refs.tree.getNode(map.id).data
// console.log('当前要选中的节点', this.currentNode)
//将选中的层级树节点设置为选中
this.$refs.tree.setCurrentNode(this.currentNode)
this.defaultExpandedKeys = [this.currentNode.id]
this.isFlag(this.treeData, this.currentNode.id)
// console.log('当前要选中的节点2', this.currentNode)
// this.$nextTick(() => {
// this.$refs.tree.setCurrentNode(this.currentNode)
// })
this.checkedData.tierId = map.id
this.checkedData.tierName = map.name
// this.stationMap = map
this.showResourceByMapId()
this.list = this.rightData.filter((e) => {
return e.id == map.id
})
this.changeVectorLayer(this.list[0].children)
},
//根据层级id展示当前层级所有的资源点
showResourceByMapId() {
let tierNode = this.$refs.tree.getNode(this.checkedData.tierId).data
// console.log('当前要选中的层级节点', tierNode.children)
this.list = []
if (tierNode && tierNode.children) {
tierNode.children.forEach(subSystem => {
this.list.push(subSystem)
})
}
},
//详情
queryDetail (id) {
this.queryDetailVisible = true
this.$nextTick(() => {
this.$refs.queryDetail.init(id, this.checkedData.sId)
})
},
closeQueryDetailVisible() {
this.queryDetailVisible = false
},
transformation(now) { //2D3D转换
this.transformationSta = now
if (now == 2) {
if (this.currentNode.level == 6) {
this.sendMessage(this.currentNode.lineId, this.currentNode.stationId, this.currentNode.code)
} else {
this.sendMessage(this.lineId, this.stationId, null, 1)
}
}
},
arrangeAllClick() {
this.updateStatus(0, 1)
},
revokeAllClick() {
this.updateStatus(1, 1)
},
arrangeClick() {
if (!this.currentNode) {
this.$message.warning('请选择防区或资源点')
}
this.updateStatus(0)
},
revokeClick() {
if (!this.currentNode) {
this.$message.warning('请选择防区或设备')
}
this.updateStatus(1)
},
updateStatus(status, beAll) {
this.$http({
url: this.$http.adornUrlEq('/invadeDefence/updateStatus'),
method: 'post',
data: {
id: this.currentNode.id,
status: status,
byx2: beAll,
stationId: this.checkedData.sId
}
}).then(data => {
// console.log('初始化线路树：', data.nodes)
if (data && data.code === 0) {
this.$message.success('操作成功')
}
})
},
//0=照明关,1=照明开, 2=开启报警, 3=消除报警
lightingOnOff(item) {
var level = this.currentNode.level
if (level == 6) { //级别为6时，为单个操作
this.lighingOnOff2(item.valueInfo, this.currentNode.id, this.currentNode.stationId, item.actionName, this.currentNode.type)
} else if (level == 5) { //级别为5时，为防区批量操作
var childrenArr = this.currentNode.children
if (childrenArr != null && childrenArr.length > 0) {
for (let index = 0; index < childrenArr.length; index++) {
var children = childrenArr[index]
var id = children.id
var stationId = children.stationId
var type = children.type
if (item.type == type) {
this.lighingOnOff2(item.valueInfo, id, stationId, item.actionName, children.type)
}
}
}
}
},
lighingOnOff2(valueInfo, id, stationId, actionName, type) {
this.dataListLoading = true
this.$http({
url: this.$http.adornUrlEq('/camera/lightingOnOff'),
method: 'post',
data: {
id: id,
stationId: stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3,
valueInfo: valueInfo,
actionName: actionName
}
}).then(data => {
this.dataListLoading = false
console.log(data)
if (data && data.code === 0) {
this.$message.success(data.msg)
this.saveLog(1, actionName, id, type, stationId)// 执行结果 ,成功 1,失败 2,中止 3
} else {
this.$message.error(data.msg)
if (data && data.code == 2) {
this.saveLog(3, actionName, id, type, stationId)// 执行结果 ,成功 1,失败 2,中止 3
} else if (data && data.code == 3) {
} else {
this.saveLog(2, actionName, id, type, stationId)// 执行结果 ,成功 1,失败 2,中止 3
}
}
})
},
//调用日志保存记录操作指令
saveLog (result, actionName, id, type, stationId) {
this.$http({
url: this.$http.adornUrlEq('/orIntrude/save'),
method: 'post',
data: {
source: 1,
actionName: actionName,
resourceId: id,
stationId: stationId,
type: type,
result: result
}
}).then(data => {
})
}
}
}
</script>
<style lang='scss' scoped>
.dic_tree {
background: #f4f4f4;
font-size: 14px;
transform: translateX(-6px);
margin-top: 20px;
}
.dic_tree /deep/ .el-tree-node>.el-tree-node__content{
padding-left: 0px !important;
}
// .dic_tree /deep/ .el-tree-node__content{
// padding-left: 0px !important;
// }
// .dic_tree /deep/ .el-tree-node__content {
// padding-left: 0px !important;
// }
.dic_tree /deep/ .el-tree-node {
position: relative;
padding-left: 16px;
}
.dic_tree /deep/ .el-tree-node__children {
padding-left: 8px;
}
.dic_tree /deep/ .el-tree-node :last-child:before {
height: 38px;
}
.dic_tree /deep/ .el-tree > .el-tree-node:before {
border-left: none;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
.dic_tree /deep/ .el-tree-node:before {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.dic_tree /deep/ .el-tree-node:after {
content: "";
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
.dic_tree /deep/ .el-tree-node:before {
border-left: 1px dashed #bfbfbf;
bottom: 0px;
height: 100%;
top: -26px;
width: 1px;
}
.dic_tree /deep/ .el-tree-node:after {
border-top: 1px dashed #bfbfbf;
height: 20px;
top: 12px;
width: 36px;
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
.tree-container {
/* 树的parent，样式自定 */
}
.dic_tree /deep/ .el-tree-node__expand-icon.expanded {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
.dic_tree /deep/ .el-icon-caret-right:before {
background: url("../../../assets/images/add.png");
content: "";
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
.dic_tree
/deep/
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("../../../assets/images/sub.png");
content: "";
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
.dic_tree /deep/.el-tree-node__content > .el-tree-node__expand-icon{
padding:0 2px 0 0;
}
.dic_tree /deep/.el-tree-node__expand-icon.is-leaf::before {
opacity: 0;
}
.dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
// margin-left: -15px !important;
}
</style>
<style lang='scss'>
.inputWidth {
width: 130px;
}
.resource-container {
width: 100%;
height: 100%;
position: relative;
border: 0px solid black;
overflow: auto;
.span-box {
height: 48px;
width: 60px;
font-size: 12px;
border-radius: 5px;
/* border: 1px solid red; */
position: absolute;
// left: 0;
// top: 0;
}
.active{
background-color: #fd949d;
}
.activeIcon{
width: 72px !important;
height: 72px !important;
}
}
.tier-btn{
.active-tier{
background-color: #409eff;
color: #ffffff;
}
}
.police_point{
.regionDiv{
background: #35AFF8 ;
opacity: 0.3;
}
.el-tree{
background: #f4f4f4;
font-size: 12px;
overflow-y: auto;
height: 675px;
}
.el-card__body{
padding: 0;
}
.el-card {
height: 99%;
background: #f4f4f4;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
background-color: #f4f4f4 !important;
color: #fff !important;
.el-button--text{
color: #fff;
}
.custom-tree-node{
background-color:#35aff8 !important;
}
}
.police_point_left_top{
height: 50px; background: #e1edf4; padding-left:10px;
.police_point_left_topL{
height: 40px; padding-top:10px; float: left;
div{
height: 40px; float: left; padding: 0 10px 0 10px; line-height: 40px; cursor:pointer; font-size: 14px;
border: 1px solid transparent;
span{
color:#35aff8;
}
}
div.on{
background: #fff; border: 1px solid #c3c3c3 ; border-bottom: none;font-family:Microsoft YaHei;
font-weight:400;
}
}
.police_point_left_topR{
float: right;margin-top: 10px;
.el-input{
width: 109px;
}
}
}
.police_point_right_button{
position: relative;
height:50px; width: 100%; background: #e3e4e6;
police_point_right_button_l{
margin-left: 20px;
}
.el-button--primary.is-plain {
margin-top: 10px;
background:#ced1d6;
border: none;
color: #656565;
}
.tier-btn .active-tier{
background-color: #409eff;
color: #ffffff;
}
.el-button.is-plain:hover{
background: #FFF;
border-color: #32A5EA;
color: #32A5EA;
}
}
.police_point_right_button_r{
position: absolute;
right: 20px;
top: 60px;
width: 95px;
height: 26px;
z-index: 10;
font-size: 12px;
line-height: 25px;
overflow: hidden;
border-radius: 13px;
background: #ced1d6;border:1px solid rgba(0, 0, 0, 0.2); box-shadow:0px 1px 0px 1px rgba(255,255,255,0.25), 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
div{
width: 46px; height: 24px; float: left; text-align: center; cursor: pointer;
}
div.on{
background: #45b5f8; color: #fff; border-radius: 13px;border:1px solid rgba(23, 41, 71, 0.5); box-shadow:0px 1px 0px 0px rgba(255,255,255,0.3), 0px 2px 0px 0px rgba(255,255,255,0.15);
}
}
.map_right {
// border:1px solid #F00;
// margin-top:50px;
iframe {
width: 100%;
height: 705px;
}
}
}
.ol-overviewmap .ol-overviewmap-map{
height: 110px!important;
}
// openlayer 样式
.resource-container {
.ol-overviewmap {
left: 89%;
}
}
</style>