<template lang="pug"> //div(onselectstart="return false;" @mousedown="regionMousedown" @mousemove="regionMousemove" @mouseup="regionMouseup") div(onselectstart="return false;") div(class="top_button" style="width:100%;height:40px; padding-top:3px") div(style="float:left;margin-left:16px;") div(:class="[item.value,iconId==item.id?item.value+'2':'']" name="iconListNow" :title="item.name" :style="{cursor:editable?'pointer':''}" :id="item.id" @click="changeIcon(item)" v-for="item in typeList") div(style="float:right; margin-top:6px;") el-button(type="primary" size='mini' style="margin-right:10px;" @click="changeEditable" v-if="!editable && isAuth('sys:point:edit')") 编辑 el-button(type="primary" size='mini' style="margin-right:10px;" @click="handleCancel" v-if="editable" :disabled='cancelDisabled') 取消 el-button(type="primary" size='mini' style="margin-right:10px;" @click="updateHandle" v-if="editable && isAuth('sys:point:update')" :disabled='listItem?false:true') 修改 el-button(type="primary" size='mini' style="margin-right:10px;" @click="deleteHandle" v-if="editable && isAuth('sys:point:delete')" :disabled='listItem?false:true') 删除 el-button(type="primary" size='mini' style="margin-right:10px;" @click="saveResourceList" :disabled='submitlDisabled' v-if="editable && isAuth('sys:point:save')") 保存 div(style="clear:both") el-container( style='padding-left:0px;') el-aside(width="18vw" style='height:750px') el-card.treeCard.tree-container(style='min-height:630px;background:#f4f4f4;') div(class="monitor_point_left_top") div.title-bold(slot='header' class="monitor_point_left_topL") 资源点列表 div(class="monitor_point_left_topR") el-input(suffix-icon="el-icon-search" size='mini' placeholder="" v-model="searchInput" clearable) //- el-tree(style='background:#f4f4f4;' :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :check-on-click-node='true' :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' ) el-tree.dic_tree( :data="treeData" ref='tree' :accordion='true' :highlight-current='true' :filter-node-method="filterNode" :props="defaultProps" :default-expand-all='false' @node-click="handleNodeClick2" :default-expanded-keys='defaultExpandedKeys' :node-key='nodeKey' ) span(class="custom-tree-node" style='width:90%;line-height: 18px;' slot-scope="{ node, data }") span(v-if="node.data.level == 3" class="el-icon-zhandian xa-icon") //- span(v-if="node.data.level == 3 && node.data.iconB" class="el-icon-wq-treeIcon1") span(v-if="node.data.level == 4 && node.data.iconB" class="el-icon-wq-treeIcon1 xa-icon") span(v-if="node.data.level == 4 && !node.data.iconB" class="el-icon-wq-treeIcon xa-icon") span(v-if="node.data.level == 5 && node.data.name == '视频监控'" class="el-icon-shipin xa-icon") span(v-if="node.data.level == 5 && node.data.name == '出入口控制'" class="el-icon-churukoukongzhi xa-icon") span(v-if="node.data.level == 5 && node.data.name == '入侵报警'" class="el-icon-ruqinbaojing xa-icon") span(v-if="node.data.level == 5 && node.data.name == '安全检查'" class="el-icon-anquanjiancha xa-icon") span(v-if="node.data.level == 6 " :class="node.data.icon+'7'" class='xa-icon') <span style="position: relative;" > {{node.label}}<span style="width:25px; height:16px; position: absolute;left: -46px;top: -3px;"></span></span> span(v-if=" node.data.iconB" class='el-icon-my-treeFlag') el-main(style="padding:0px;") el-card.tableCard div(slot='header' ref="sprtDom" ) el-row(:span="24") el-col(:md='12' :sm="5" class='tier-btn') el-button(type="primary" size='mini' plain :class="[checkedData.tierId===item.id?'active-tier':'']" style="float:left;margin:6px 10px 0 0; " v-for="item in mapList" :key='item.id' @click="changeMap(item)") {{item.name}} el-col(:md='12' :sm="5") div(style="float:right;") div( :class="item.value" :title="item.name" style="margin:5px 5px 0 0;" v-for="item in iconNameListBottom" @click="iconClick(item)") el-row(style="padding-bottom:15px;height:680px" ,:span="24") el-col() <div id="map" style="width: 100%;height: 680px;position: relative;"></div> el-col() // 弹窗, 新增 / 修改 add-or-update(v-if='addOrUpdateVisible', ref='addOrUpdate', :p-list='list' @refreshdatalist='refreshdatalist' @refreshBean='refreshBean' @addNotify='addNotify') query-detail(v-if='queryDetailVisible', ref='queryDetail') span(:class="spanDragData.name" v-if="spanDragData.show" :style="{left:spanDragData.x+'px',top:spanDragData.y+'px',position:'fixed'}") </template> <script> import AddOrUpdate from './add-or-update' import QueryDetail from './query-detail' import { getUUID } from '@/util' import Vue from 'vue' // openlayer import 'ol/ol.css' import { Map, View } from 'ol' import { Projection } from 'ol/proj' import { getCenter } from 'ol/extent' import Modify from 'ol/interaction/Modify' import ImageLayer from 'ol/layer/Image' import ImageStatic from 'ol/source/ImageStatic' import Zoom from 'ol/control/Zoom' import { DoubleClickZoom } from 'ol/interaction' import Draw from 'ol/interaction/Draw' import LineString from 'ol/geom/LineString' // 图上图标相关 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 Text from 'ol/style/Text' import Fill from 'ol/style/Fill' import Stroke from 'ol/style/Stroke' let that export default { data() { return { featureItem: '', listItem: '', imgLayerList: [], iconId: '', iconStyle: null, mapsrc1: null, imgurl1: '', mapsrc2: null, imgurl2: '', mapsrc3: null, imgurl3: '', imageSrc: '', //资源点图片名称 jing: '', wei: '', hwId: [], gxRotate: '', ssId: '', isDone: false, drawer: false, isCollapse: true, delflag: true, addOrUpdateVisible: false, queryDetailVisible: false, urlPath: window.CONFIG.urlPath, treeData: [], systemList: [], defaultExpandedKeys: [], defaultProps: { children: 'children', label: 'name', level: 'level' }, nodeKey: 'id', station: {}, //当前选择的站点 mapList: [], //当前站点的所有层 stationMap: {}, //当前选择的层 resource: {}, //当前选择的资源点 typeList: [], checkedData: { stationId: '', stationName: '', type: '', tierId: '', tierName: '', resourceId: '', sId: localStorage.getItem('stationId') }, currentNode: {}, dragAble: false, list: [], searchInput: '', obj: 'pointer-events:none', editable: false, clickItem: {}, iconNameListBottom: [], spanDragData: { x: 0, y: 0, show: false, name: '' }, spanDragListNow: {}, mousemoveStatus: false, drawType: 'None', draw: null, lineList: [], vectorLayer: null, lineVectorLayer: null, modify: null, //当前选择的层级 tierMap: null, cancelDisabled: false, submitlDisabled: false } }, components: { AddOrUpdate, QueryDetail }, watch: { searchInput(val) { this.$refs.tree.filter(val) } }, created() { that = this this.initTree() this.initResourceTypeDicList() }, methods: { changeIcon(e) { this.iconId = e.id this.iconStyle = null this.lineList = [] this.drawType = 'None' if (!this.map) { return } this.map.removeInteraction(this.draw) if (this.editable) { this.iconStyle = e if ( this.iconStyle.name === '红外探测器' || this.iconStyle.name === '振动光纤' ) { this.drawType = 'LineString' } else { this.drawType = 'Point' } } this.addInteraction() }, // 初始化地图 initMap(url) { let mapList = this.mapList // 计算静态地图映射到地图上的范围 let extent = [-1100, 110, 1460, 820] 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 zoomControl = new Zoom({ delta: 0.2, zoomInTipLabel: '', zoomOutTipLabel: '' }) // 大图 this.map = new Map({ target: 'map', layers: this.imgLayerList, controls: [zoomControl], view: new View({ projection: projection, center: getCenter([0, 0, 418, 600]), // 获取范围的中心坐标。 zoom: 2.5, maxZoom: 5, 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) this.changeVectorLayer(this.list) this.map.on('click', function(evt) { let feature = evt.map.forEachFeatureAtPixel(evt.pixel, function( feature ) { return feature }) console.log('***当前点击***', feature) let coordinate = evt.coordinate //鼠标单击点的坐标 if (feature) { that.cancelDisabled = false for (let i in that.list) { //true弹出详情页面 that.mapClick(feature, that.list[i], true) } } else { //编辑状态下添加资源点事件(不包含红外探测器和振动光纤) if (that.iconStyle === null || !that.editable) { } else { if ( that.iconStyle.name === '红外探测器' || that.iconStyle.name === '振动光纤' ) { return } let bean = that.addPoint(coordinate) that.cancelDisabled = false that.list.push(bean) that.iconStyle = null that.lineList = [] let newFeature = that.vectorLayer .getSource() .getFeatureById(bean.key) for (let i in that.list) { //true弹出详情页面 that.mapClick(newFeature, that.list[i], false) } that.updateHandle() } } }) }, openAddOrUpdate(item) { if (this.editable) { this.addOrUpdateHandle(item) } else { this.queryDetail(item) } }, mapClick(feature, item, flag) { console.log(item, 11) //默认样式 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.key + 'end') if (feature_) { if (feature_ === feature || featureEnd === feature) { //console.log(feature_) //修改选中样式 feature_.setStyle(style2) if (featureEnd) { featureEnd.setStyle(style2) } //未编辑状态下 点击查看 if (flag) { if (!this.editable) this.openAddOrUpdate(item) } that.listItem = JSON.parse(JSON.stringify(item)) //地图上图标对应 list中的数据 } 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) { if (!this.editable) this.openAddOrUpdate(item) } that.listItem = JSON.parse(JSON.stringify(item)) } else { //清除选中以外的样式 newFeature.setStyle(style) if (newFeatureEnd) { newFeatureEnd.setStyle(style) } } } } }, //添加点 addPoint(coordinate) { let bean = this.getNewBox( this.iconStyle, parseFloat(coordinate[0]).toFixed(2), parseFloat(coordinate[1]).toFixed(2), this.iconStyle.value ) //新建一个要素ol.Feature let newFeature = new OlFeature({ geometry: new OlGeomPoint(coordinate) //几何信息 }) newFeature.setStyle( this.getPointStyle(this.iconStyle.value + '.png', this.iconStyle.name) ) //设置要素样式 newFeature.setId(bean.key) this.vectorLayer.getSource().addFeature(newFeature) //添加需要拖动的点 this.modify.source_.addFeature(newFeature) return bean }, //添加线 addInteraction() { let value = this.drawType if (value === 'LineString') { //创建类型为LineString的Draw对象 this.draw = new Draw({ source: this.vectorLayer.getSource(), type: this.drawType, maxPoints: 2, style: this.getLineStyle(), // 绘制时停止点击事件 stopClick: true }) //添加绘制对象 this.map.addInteraction(this.draw) let bean = null //画线开始事件 this.draw.on('drawstart', function(evt) { //获取坐标 let coordinate = evt.target.sketchCoords_[0] //添加点 bean = that.addPoint(coordinate) bean.addOrUpdate = 'save' that.list.push(bean) }) //画线结束事件 this.draw.on('drawend', function(evt) { //将draw绘制的线设置为透明色 evt.feature.setStyle(that.setLineNone) //获取坐标 let coordinate_ = evt.target.sketchCoords_[0] let coordinate = evt.target.sketchCoords_[1] let lineCoordinate = [] lineCoordinate.push([coordinate_[0], coordinate_[1]]) lineCoordinate.push([coordinate[0], coordinate[1]]) //自定义绘制线 let lineFeature = new OlFeature(new LineString(lineCoordinate)) lineFeature.setId(bean.key + 'line') that.lineVectorLayer.getSource().addFeature(lineFeature) //添加需要拖动的线 that.modify.source_.addFeature(lineFeature) //新建一个要素ol.Feature let newFeature = new OlFeature({ geometry: new OlGeomPoint(coordinate) //几何信息 }) newFeature.setStyle( that.getPointStyle( that.iconStyle.value + '.png', that.iconStyle.name ) ) //设置要素样式 newFeature.setId(bean.key + 'end') //添加结束的点 that.vectorLayer.getSource().addFeature(newFeature) //添加需要拖动的点 that.modify.source_.addFeature(newFeature) bean.xpoint = parseFloat(coordinate[0]).toFixed(2) bean.ypoint = parseFloat(coordinate[1]).toFixed(2) that.list.push(bean) that.iconStyle = null that.lineList = [] //删除绘制对象 that.map.removeInteraction(that.draw) for (let i in that.list) { //true弹出详情页面 that.mapClick( that.vectorLayer.getSource().getFeatureById(bean.key), that.list[i], false ) } that.updateHandle() }) } }, setLineNone() { let style = new OlStyleStyle({ stroke: new Stroke({ color: 'transparent', width: 1 }) }) return style }, getLineStyle(src, name, flag) { let style = new OlStyleStyle({ stroke: new Stroke({ color: '#409EFF', width: 3 }) }) return 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 }, changeVectorLayer(list) { if (list) { this.list = list } else { return } if (this.map) { this.map.removeLayer(this.vectorLayer) this.map.removeLayer(this.lineVectorLayer) this.map.removeInteraction(this.modify) } else { return } this.lineVectorLayer = new OlLayerVector({ source: new OlSourceVector({ features: [] }), style: new OlStyleStyle({ stroke: new Stroke({ color: '#409EFF', width: 3 }) }) }) this.map.addLayer(this.lineVectorLayer) let featuresArr = [] let lineLastArr = [] 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]) let lineFeature = new OlFeature(new LineString(lineFeatures)) lineFeature.setId(list[i].id + 'line') this.lineVectorLayer.getSource().addFeature(lineFeature) 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) { 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) lineLastArr[i].key = lineLastArr[i].id LinefeaturesArr[i].setId(lineLastArr[i].key + 'end') this.list.push(lineLastArr[i]) } this.vectorLayer = new OlLayerVector({ source: new OlSourceVector({ features: featuresArr.concat(LinefeaturesArr) }) }) this.map.addLayer(this.vectorLayer) //将点和线的Feature对象 ,放在一个数组里面 let modifyFeatures = this.lineVectorLayer .getSource() .getFeatures() .concat(this.vectorLayer.getSource().getFeatures()) // this.modify = new Modify({ // source: this.vectorLayer.getSource() // }) this.modify = new Modify({ source: new OlSourceVector({ features: modifyFeatures }) }) this.modify.on('modifyend', (e) => { let pixel = this.map.getEventPixel(e.mapBrowserEvent.originalEvent) //获取当前拖拽的feature对象,该feature没有id, let feature = e.mapBrowserEvent.map.forEachFeatureAtPixel( pixel, function(feature) { return feature } ) if (feature) { that.cancelDisabled = false //feature与features数组对象比较Geometry对象的坐标是否相等可得出当前拖拽的feature的对象 for (let i in that.list) { //根据id获取feature对象 //let feature_ = that.vectorLayer.getSource().getFeatureById(that.list[i].id) //新增的feature对象没保存,是没有id通过,key获取feature对象 let featureKey = that.vectorLayer .getSource() .getFeatureById(that.list[i].key) //红外探测器和振动光纤的第二点同过key+'end'获取feature对象 let featureEnd = that.vectorLayer .getSource() .getFeatureById(that.list[i].key + 'end') if (featureKey || featureEnd) { //获取坐标 let coordinate //if (feature_) coordinate = feature_.getGeometry().flatCoordinates if (featureKey) { coordinate = featureKey.getGeometry().flatCoordinates } if ( featureKey && coordinate.toString() === feature.getGeometry().flatCoordinates.toString() ) { that.list[i].xlongit = parseFloat(coordinate[0]).toFixed(2) that.list[i].ylat = parseFloat(coordinate[1]).toFixed(2) that.listItem = JSON.parse(JSON.stringify(that.list[i])) // if (that.listItem) { // that.listItem.xlongit = parseFloat(coordinate[0]).toFixed(2) // that.listItem.ylat = parseFloat(coordinate[1]).toFixed(2) // } let style = that.getPointStyle( that.list[i].imageSrc + '2.png', that.list[i].name, '0.3' ) featureKey.setStyle(style) //break } else { if (featureKey) { let style = that.getPointStyle( that.list[i].imageSrc + '.png', that.list[i].name ) featureKey.setStyle(style) } } if (featureEnd) { coordinate = featureEnd.getGeometry().flatCoordinates } if ( featureEnd && coordinate.toString() === feature.getGeometry().flatCoordinates.toString() ) { that.list[i].xpoint = parseFloat(coordinate[0]).toFixed(2) that.list[i].ypoint = parseFloat(coordinate[1]).toFixed(2) that.listItem = JSON.parse(JSON.stringify(that.list[i])) // if (that.listItem) { // that.listItem.xpoint = parseFloat(coordinate[0]).toFixed(2) // that.listItem.ypoint = parseFloat(coordinate[1]).toFixed(2) // } let style = that.getPointStyle( that.list[i].imageSrc + '2.png', that.list[i].name, '0.3' ) featureEnd.setStyle(style) //break } else { if (featureEnd) { let style = that.getPointStyle( that.list[i].imageSrc + '.png', that.list[i].name ) featureEnd.setStyle(style) } } } } } }) if (this.editable) { //添加拖拽监听事件 this.map.addInteraction(this.modify) } }, handRotate(id) { this.hwId.push(id) }, getFeature(x, y) { return new OlFeature({ type: 'icon', geometry: new OlGeomPoint([x, y]) }) }, handwheel(e, item) { let str = e.wheelDelta if (str < 0) { // 下滚动 100 item.width = parseInt(item.width) - 10 if (item.width <= 40) { item.width = 40 } //console.log(item.width) } if (str > 0) { // 上滚动 -100 item.width = parseInt(item.width) + 10 if (item.width >= 600) { item.width = 600 } //console.log(item.width) } }, //新建资源点对象 getNewBox(item, j, w, src) { let uuid = getUUID() .replace('-', '') .replace('-', '') .replace('-', '') .replace('-', '') return { id: uuid, key: uuid, level: 6, name: item.name, password: '', port: '', remark: '', stationId: this.checkedData.stationId, stationName: this.checkedData.stationName, tierId: this.checkedData.tierId, tierName: this.checkedData.tierName, type: item.id, equipmentModel: '', maxPower: '', installDate: null, maintenanceDate: null, region: '', icon: item.value, iconPath: '', username: 'admin', // xpoint: x || '100', // ypoint: y || '100', width: 200, xlongit: j || '', ylat: w || '', imageSrc: src, isLine: 0, //生成资源点编码的前缀 codeType: item.remark, addOrUpdate: 'save' } }, // 树节点过滤 filterNode(value, data) { if (!value) return true return data.name.indexOf(value) !== -1 }, initTree() { // console.log('stationId:', this.checkedData.sId) this.$http({ url: this.$http.adornUrl('/liResource/getTreeList'), method: 'post', data: { stationId: this.checkedData.sId, name: this.searchInput } }).then((data) => { if (data && data.code === 0) { this.treeData = data.tree console.log('treeData', this.treeData) this.defaultExpandedKeys = [] this.$nextTick(() => { if ( !this.treeData || this.treeData.length <= 0 || !this.treeData[0].children || this.treeData[0].children.length <= 0 ) { return } if (!this.tierMap) { this.currentNode = this.$refs.tree.getNode( this.treeData[0].children[0].id ).data //将选中的层级树节点设置为选中 this.$refs.tree.setCurrentNode(this.currentNode) Vue.set(this.treeData[0].children[0], 'iconB', true) this.defaultExpandedKeys = [this.currentNode.id] this.isFlag(this.treeData, this.currentNode.id) this.initStation(this.treeData[0].id, null, 1) } else { //层级 if (this.tierMap.level === 4) { this.currentNode = this.$refs.tree.getNode(this.tierMap.id).data this.initStation(this.tierMap.stationId, null, this.tierMap.id) } //资源点类型 if (this.tierMap.level === 5) { this.currentNode = this.$refs.tree.getNode(this.tierMap.id).data this.initStation( this.tierMap.stationId, this.tierMap.children, this.tierMap.id ) } //资源点 if (this.tierMap.level === 6) { this.currentNode = this.$refs.tree.getNode(this.tierMap.id).data let res = this.$refs.tree.getNode( this.tierMap.tierId + this.tierMap.type ).data this.initStation( this.tierMap.stationId, res.children, this.tierMap.tierId + this.tierMap.type ) } //将选中的层级树节点设置为选中 this.$refs.tree.setCurrentNode(this.currentNode) Vue.set(this.tierMap, 'iconB', true) this.defaultExpandedKeys = [this.currentNode.id] this.isFlag(this.treeData, this.currentNode.id) } }) } }) }, initStation(id, res, subId) { // console.log('初始化站点id:', id) this.$http({ url: this.$http.adornUrl(`/liStation/getId/${id}`), method: 'get', params: this.$http.adornParams() }) .then((data) => { if (data && data.code === 0) { if (data.bean) { this.station = data.bean this.mapList = data.bean.mapList this.mapList.forEach((element) => { element.readPath = this.urlPath + element.filePath }) this.checkedData.stationId = this.station.id this.checkedData.stationName = this.station.stationName } if (res) { this.mapList.forEach((e) => { if (res.tierId === e.id) { this.checkedData.tierId = e.id this.checkedData.tierName = e.name this.stationMap = e } }) } else { if (!this.checkedData.tierId) { this.checkedData.tierId = this.mapList[0].id this.checkedData.tierName = this.mapList[0].name this.stationMap = this.mapList[0] } } // console.log('站点地图:', this.mapList) } }) .then(() => { if (subId === 1) { this.showResourceByMapId(null) } else { this.showResourceByParentId(subId) } 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) } }) }, // 改变层级和鹰眼图 changeImgControl(id) { 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) } } }, handleNodeClick2(node) { //判断是否为编辑状态,如果为编辑状态提示是否保存编辑的图层在跳转 // if (this.editable && (node.level === 5 || node.level === 4)) { // this.$confirm(`请确认编辑图层是否保存?`, '提示', { // confirmButtonText: '确认', // cancelButtonText: '取消', // type: 'warning', // closeOnClickModal: false // }).then(() => { // this.handleNodeClick(node) // }).catch(() => { // // }) // } else { // this.handleNodeClick(node) // } this.handleNodeClick(node) }, //线路资源点树节点点击事件 handleNodeClick(node) { // console.log('node.id', node.id) //console.log('选中树节点', node) this.currentNode = node let level = node.level let name = node.name let id = node.id let code = node.code this.isFlag(this.treeData, id) // this.treeData.forEach(res => { // if (res.id === id) { // Vue.set(res, 'iconB', true) // } else { // Vue.set(res, 'iconB', false) // } // }) //每次选择节点都先清空资源位 if (level !== 6) { // this.list = [] this.listItem = '' //控制编辑按钮 } if (level === 2) { //线路 this.checkedData.lineId = id this.checkedData.lineName = name } else if (level === 3) { //站点 this.checkedData.stationId = id this.checkedData.stationName = name // this.initTreeStationMap(node) } else if (level === 4) { this.tierMap = node //层级 this.checkedData.tierId = id this.checkedData.tierName = name this.checkedData.stationId = node.stationId this.stationMap = node // console.log('选中节点的层级id', this.tierId) this.showResourceByMapId(null) this.changeVectorLayer(this.list) this.changeImgControl(id) } else if (level === 5) { this.tierMap = node //子系统 this.checkedData.subCode = code this.checkedData.subSystem = name this.checkedData.stationId = node.stationId this.checkedData.tierId = node.tierId this.mapList.forEach((element) => { if (element.id === node.tierId) { this.stationMap = element return false } }) this.list = JSON.parse(JSON.stringify(node.children)) // console.log('资源点列表:', this.list) this.list.forEach((res) => { Vue.set(res, 'active', false) }) this.changeVectorLayer(this.list) this.changeImgControl(node.tierId) } else if (level === 6) { this.tierMap = node var sysId = '' this.systemList.forEach((element) => { if (node.subCode === element.value) { sysId = element.id } }) // 资源点 let subNode = this.$refs.tree.getNode(node.tierId + sysId).data // console.log('当前要选中的层级节点', subNode) this.list = [] subNode.children.forEach((res) => { this.list.push(res) }) this.checkedData.resourceId = id this.checkedData.tierId = node.tierId this.changeImgControl(node.tierId) this.changeVectorLayer(this.list) let feature = this.vectorLayer.getSource().getFeatureById(id) if (feature) { for (let i in this.list) { // if (feature.id_ == that.list[i].id) { // this.listItem = JSON.parse(JSON.stringify(that.list[i])) // } //flag为ture打开详情或者编辑页面 this.mapClick(feature, that.list[i], false) } } } this.iconNameListBottom.forEach((res) => { if (this.clickItem && res.id === this.clickItem.id) { if ( res.value.substring(res.value.length - 1, res.value.length) == 4 ) { res.value = res.value.substring(0, res.value.length - 1) + '3' } } }) //console.log(this.list) // this.clickItem = '' }, //切换层级 changeMap(map) { //图层缩放级别设置为默认 this.map.getView().setZoom(1) for (var k = 0; k < this.imgLayerList.length; k++) { if (this.imgLayerList[k].values_.id == map.id) { // that.imgurl=map.readPath this.imgLayerList[k].setVisible(true) } else { this.imgLayerList[k].setVisible(false) } } this.currentNode = this.$refs.tree.getNode(map.id).data this.tierMap = this.currentNode // 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.checkedData.tierId = map.id this.checkedData.tierName = map.name let stationNode = this.$refs.tree.getNode(map.stationId).data // console.log('当前要选中的站点', stationNode) this.checkedData.stationId = stationNode.id this.checkedData.stationName = stationNode.name this.stationMap = map this.iconNameListBottom.forEach((res) => { if (res.id === this.clickItem.id) { if ( res.value.substring(res.value.length - 1, res.value.length) == 4 ) { res.value = res.value.substring(0, res.value.length - 1) + '3' } } }) if (!this.checkedData.tierId) { return } this.showResourceByMapId(null) this.changeVectorLayer(this.list) this.changeImgControl(map.id) }, //根据层级id展示当前层级所有的资源点 showResourceByMapId(item) { if (!this.checkedData.tierId) { return } let tierNode = this.$refs.tree.getNode(this.checkedData.tierId).data // console.log('当前要选中的层级节点', tierNode.children) this.list = [] tierNode.children.forEach((type) => { type.children.forEach((res) => { if (item === null || (item != null && item.id === res.type)) { this.list.push(res) } }) }) this.list.forEach((res) => { Vue.set(res, 'active', false) }) // console.log(this.list, '++++++') }, //根据上级id展示所有的资源点 showResourceByParentId(id) { let node = this.$refs.tree.getNode(id).data this.list = [] if (node.level === 4) { node.children.forEach((type) => { type.children.forEach((res) => { this.list.push(res) }) }) } else { node.children.forEach((e) => { this.list.push(e) }) } }, refreshBean(bean) { this.listItem = JSON.parse(JSON.stringify(bean)) }, refreshdatalist(res) { let style = this.getPointStyle(res.imageSrc + '2.png', res.name, '0.3') let newItem = this.vectorLayer.getSource().getFeatureById(res.key) let newItemEnd = this.vectorLayer .getSource() .getFeatureById(res.key + 'end') if (newItem) newItem.setStyle(style) if (newItemEnd) newItemEnd.setStyle(style) for (let i in this.list) { if (this.list[i].key === res.key) { this.list[i] = res } } }, //保存当前页面上的资源点位置 saveResourceList() { if (this.list.length === 0) { this.$message.error('资源点为空不能保存!') return } //数组去重 let paramList = Array.from(new Set(this.list)) let flag = true //判断是否有无id的新增资源点 this.list.forEach((res) => { if (res.addOrUpdate === 'save') { flag = false return false } }) // console.log(this.list) this.submitlDisabled = true if (flag) { this.$http({ url: this.$http.adornUrl(`/liResource/updateList`), method: 'post', data: paramList }).then((data) => { // console.log(data) if (data.message) { this.addNotify(data.message) return } if (data && data.code === 0) { this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.initTree() this.changeEditable() this.checkedData.resourceId = '' this.delflag = true this.iconId = '' this.listItem = '' this.submitlDisabled = false } }) } else { this.iconId = '' this.$message.error(data.msg) this.submitlDisabled = false } }) this.submitlDisabled = false } else { this.$confirm( `未填写信息的新增资源点将被忽略,是否继续?`, '保存资源点', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', closeOnClickModal: false } ) .then(() => { // console.log('当前页面资源点位置:', this.list) this.$http({ url: this.$http.adornUrl(`/liResource/updateList`), method: 'post', data: paramList }) .then((data) => { // console.log(data) if (data && data.code === 0) { if (data.message) { this.addNotify(data.message) return } this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.initTree() this.changeEditable() this.checkedData.resourceId = '' this.delflag = true this.submitlDisabled = false } }) } else { this.$message.error(data.msg) this.submitlDisabled = false } }) .catch(() => { this.submitlDisabled = false }) }) .catch(() => { this.submitlDisabled = false }) } }, //提示 addNotify(message) { this.$message({ type: 'error', message: '存在重复信息,保存失败!', duration: 1500, showClose: true }) this.$notify({ title: '以下信息存在重复,请核实:', message: message, duration: 0, dangerouslyUseHTMLString: true }) this.submitlDisabled = false }, // 详情 queryDetail(item) { this.queryDetailVisible = true //this.handleNodeClick(item) this.currentNode = this.$refs.tree.getNode(item.id).data //将选中的层级树节点设置为选中 this.$refs.tree.setCurrentNode(this.currentNode) this.defaultExpandedKeys = [this.currentNode.id] this.isFlag(this.treeData, this.currentNode.id) this.$nextTick(() => { this.$refs.queryDetail.init(item.id) }) }, // 新增 / 修改 addOrUpdateHandle(item) { this.resource = null this.addOrUpdateVisible = true // this.list.forEach(res => { // if (res.id === id) { // this.resource = res // console.log(this.resource) // } // }) this.$nextTick(() => { this.$refs.addOrUpdate.init(item) }) }, // 移动资源位坐标 changeResourceLocation(id, x, y) { // console.log('changeResourceLocation:', id, x, y) this.list.forEach((res) => { if (res.id === id) { // console.log('移动坐标1:', res.name, res.xpoint, res.ypoint) res.xpoint = x res.ypoint = y // console.log('移动坐标2:', res.name, res.xpoint, res.ypoint) } }) }, handleCancel() { this.iconId = '' this.initTree() this.listItem = '' this.cancelDisabled = true this.editable = false }, // 修改 updateHandle() { let listItem = this.listItem if (listItem) { this.openAddOrUpdate(listItem) } }, // 删除 deleteHandle() { // console.log('dataListSelections:', this.dataListSelections) // var ids = this.checkedData.resourceId // ? [this.checkedData.resourceId] // : this.dataListSelections.map(item => { // return item.id // }) // this.listItem.id // var ids = [this.checkedData.resourceId] let ids = [] if (this.listItem.id) { ids.push(this.listItem.id) } else { ids.push(this.listItem.key) } for (let i in ids) { //删除绘制的图标和线 // this.delPoint(ids[i]) for (let j in this.list) { if (this.list[j].id === ids[i]) { this.$http({ url: this.$http.adornUrl('/liResource/validateDeleteResource'), method: 'get', params: this.$http.adornParams({ stationId: localStorage.getItem('stationId'), id: ids[i] }) }).then((data) => { if (data && data.code === 0) { //删除绘制的图标和线 this.delPoint(ids[i]) this.list[j].deleted = 1 this.listItem = '' this.cancelDisabled = false } }) } if (!this.list[j].id) { if (this.list[j].key === ids[i]) { //删除绘制的图标和线 this.delPoint(ids[i]) this.list.splice(j, 1) } } } } }, //删除绘制的图标和线 delPoint(id) { let feature = this.vectorLayer.getSource().getFeatureById(id) //删除id对应的资源点 this.vectorLayer.getSource().removeFeature(feature) let featureEnd = this.vectorLayer.getSource().getFeatureById(id + 'end') if (featureEnd) { //删除红外探测器或者振动光纤id对应的资源点 this.vectorLayer.getSource().removeFeature(featureEnd) let lineFeature = this.lineVectorLayer .getSource() .getFeatureById(id + 'line') if (lineFeature) { //删除id对应的连线 this.lineVectorLayer.getSource().removeFeature(lineFeature) } } }, changeEditable() { this.$nextTick(() => { this.clickMap(true) }) this.isDone = !this.isDone this.editable = !this.editable //保存按钮切换显示 this.cancelDisabled = false this.$forceUpdate() //设置是否启动拖动 if (!this.editable) { this.map.removeInteraction(this.modify) } else { //添加拖拽监听事件 this.map.addInteraction(this.modify) } }, statusClick(item) { //icon状态切换 if (!this.editable) { return } item.value = item.value + '2' this.typeList.forEach((res) => { if (item.id !== res.id) { if ( res.value.substring(res.value.length - 1, res.value.length) == 2 ) { res.value = res.value.substring(0, res.value.length - 1) } } }) }, clickMap() { let that = this this.map.on('click', function(e) { that.jing = parseFloat(e.coordinate[0]).toFixed(2) that.wei = parseFloat(e.coordinate[1]).toFixed(2) }) }, regionMousedown(e) { if (!this.editable) { return } if (e.srcElement.id === '') { return } // if (e.path) { // if ( // e.path[0].attributes.name && // e.path[0].attributes.name.nodeValue != 'iconListNow' // ) { // return // } // } else { // } this.typeList.forEach((res) => { // if ((e.path && e.path[0].id !== res.id) || e.srcElement.id !== res.id) { if (e.srcElement.id !== res.id) { if ( res.value.substring(res.value.length - 1, res.value.length) == 2 ) { res.value = res.value.substring(0, res.value.length - 1) } } else { if ( res.value.substring(res.value.length - 1, res.value.length) == 2 ) { return } res.value = res.value + '2' this.spanDragData.name = res.value this.spanDragListNow = res this.mousemoveStatus = true } }) }, regionMousemove(e) { if (this.mousemoveStatus) { this.spanDragData.x = e.clientX - 24 this.spanDragData.y = e.clientY - 106 this.spanDragData.show = true } }, regionMouseup(e) { this.mousemoveStatus = false this.typeList.forEach((res) => { if (res.value.substring(res.value.length - 1, res.value.length) == 2) { res.value = res.value.substring(0, res.value.length - 1) } }) this.spanDragData.x = 0 this.spanDragData.y = 0 this.spanDragData.show = false this.spanDragData.name = '' }, iconClick(item) { console.log(this.currentNode) this.iconNameListBottom.forEach((res) => { if (res.id === item.id) { if ( res.value.substring(res.value.length - 1, res.value.length) != 4 ) { res.value = res.value.substring(0, res.value.length - 1) + '4' } } else { if ( res.value.substring(res.value.length - 1, res.value.length) == 4 ) { res.value = res.value.substring(0, res.value.length - 1) + '3' } } }) if (this.currentNode.level == 5) { this.list = [] this.currentNode.children.forEach((el) => { if (item.id === el.type) { this.list.push(el) } }) this.list.forEach((res) => { Vue.set(res, 'active', false) }) } else { this.showResourceByMapId(item) } this.clickItem = item this.changeVectorLayer(this.list) }, initResourceTypeDicList() { this.$http({ url: this.$http.adornUrl('/sysDictionary/getResourceTypeDicList'), method: 'get', params: this.$http.adornParams({ stationId: localStorage.getItem('stationId') }) }).then((data) => { if (data && data.code === 0) { this.typeList = JSON.parse(JSON.stringify(data.list)) this.iconNameListBottom = JSON.parse(JSON.stringify(data.list)) this.iconNameListBottom.forEach((res) => { res.value += '3' }) } }) }, iconMousedown(e) { e.width = Number(e.width) + 10 //console.log(e.width) } } } </script> <style lang="scss" scoped> .dic_tree { background: #f4f4f4; font-size: 14px; transform: translateX(-6px); margin-top: 20px; } .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: 10px; } .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: 35px; } .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: 1px; } .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"> .line_warp { // width: 300px; height: 45px; display: flex; align-items: center; .point_left { width: 50px; height: 50px; transform: translateX(14px); } .point_right { width: 50px; height: 50px; transform: translateX(-14px); } } .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content .custom-tree-node { background-color: #33b0f6 !important; color: aliceblue; } .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { background-color: transparent; } </style> <style lang="scss" scoped> #map { /deep/.ol-zoom { // display: none; } /deep/ .ol-zoom .ol-unselectable .ol-control { display: none; } } .treeCard { .el-tree { overflow-y: scroll; height: 640px; } } .tree_house { width: 12px; height: 18px; display: inline-block; img { width: 20px; height: 20px; vertical-align: middle; // transform: translateY(-8px); transform: translateX(-40px); } } .tree_point { width: 12px; height: 18px; display: inline-block; img { width: 15px; height: 15px; vertical-align: middle; transform: translateY(-2px); } } .resource-container { width: 100%; height: 100%; position: relative; border: 0px solid black; overflow: auto; .span-box { height: 30px; // width: 30px; font-size: 12px; border-radius: 5px; /* border: 1px solid red; */ position: absolute; // left: 0; // top: 0; .span-img { width: 100%; height: 100%; border-radius: 5px; background-size: 182%; } } .active { background-color: #fd949d; height: 40px; width: 40px; } } .tier-btn { .active-tier { background-color: #409eff; color: #ffffff; } } .monitor_point_left_top { height: 42px; background: #e1edf4; padding-left: 16px; display: flex; justify-content: space-between; align-items: center; .monitor_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-family: Microsoft YaHei; font-size: 14px; span { color: #35aff8; } } div.on { background: #fff; border: 1px solid #c3c3c3; border-bottom: none; font-family: Microsoft YaHei; font-weight: 400; } } .monitor_point_left_topR { // float: right; margin-right: 20px; // margin-top: 10px; .el-input { width: 109px; } /deep/ .el-input--mini .el-icon-search { line-height: 28px; color: #35aff8; font-weight: bold; } } } .top_button { background: url(~@/assets/images/sysiconbg.png); } </style>