Skip to content

Z
zhxf_vue
Commit b4f15f47 authored by co_dengxiongwen's avatar co_dengxiongwen
Browse files
Options

tj

parent 0d415dc6
Show whitespace changes
Inline Side-by-side
Showing with 1933 additions and 1834 deletions
src/pages/sys/point/index.vue
View file @ b4f15f47
......@@ -58,36 +58,36 @@
</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 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 {
// 图上图标相关
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: '',
......@@ -208,7 +208,10 @@
this.map.removeInteraction(this.draw)
if (this.editable) {
this.iconStyle = e
if (this.iconStyle.name === '红外探测器' || this.iconStyle.name === '振动光纤') {
if (
this.iconStyle.name === '红外探测器' ||
this.iconStyle.name === '振动光纤'
) {
this.drawType = 'LineString'
} else {
this.drawType = 'Point'
......@@ -257,22 +260,24 @@
zoom: 2.5,
maxZoom: 5,
minZoom: 1.5,
extent: [-1100, -100, 2000, 1000]//[minX,minY,maxX,maxY] 控制拖动
extent: [-1100, -100, 2000, 1000] //[minX,minY,maxX,maxY] 控制拖动
})
})
// 删除默认的双击事件
const dblClickInteraction = this.map
.getInteractions()
.getArray()
.find(interaction => {
.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) {
this.map.on('click', function(evt) {
let feature = evt.map.forEachFeatureAtPixel(evt.pixel, function(
feature
) {
return feature
})
console.log('***当前点击***', feature)
......@@ -290,9 +295,11 @@
} else {
//编辑状态下添加资源点事件（不包含红外探测器和振动光纤）
if (that.iconStyle === null || !that.editable) {
} else {
if (that.iconStyle.name === '红外探测器' || that.iconStyle.name === '振动光纤') {
if (
that.iconStyle.name === '红外探测器' ||
that.iconStyle.name === '振动光纤'
) {
return
}
let bean = that.addPoint(coordinate)
......@@ -301,7 +308,9 @@
that.iconStyle = null
that.lineList = []
let newFeature = that.vectorLayer.getSource().getFeatureById(bean.key)
let newFeature = that.vectorLayer
.getSource()
.getFeatureById(bean.key)
for (let i in that.list) {
//true弹出详情页面
that.mapClick(newFeature, that.list[i], false)
......@@ -326,7 +335,9 @@
//获取feature对象
let feature_ = this.vectorLayer.getSource().getFeatureById(item.id)
//获取红外探测器或者振动光纤第二个点的feature对象
let featureEnd = this.vectorLayer.getSource().getFeatureById(item.key + 'end')
let featureEnd = this.vectorLayer
.getSource()
.getFeatureById(item.key + 'end')
if (feature_) {
if (feature_ === feature || featureEnd === feature) {
//console.log(feature_)
......@@ -352,7 +363,9 @@
//获取新增的feature对象
let newFeature = this.vectorLayer.getSource().getFeatureById(item.key)
//获取红外探测器或者振动光纤第二个点的feature对象
let newFeatureEnd = this.vectorLayer.getSource().getFeatureById(item.key + 'end')
let newFeatureEnd = this.vectorLayer
.getSource()
.getFeatureById(item.key + 'end')
if (newFeature) {
if (newFeature === feature || newFeatureEnd === feature) {
newFeature.setStyle(style2)
......@@ -376,12 +389,19 @@
},
//添加点
addPoint(coordinate) {
let bean = this.getNewBox(this.iconStyle, parseFloat(coordinate[0]).toFixed(2), parseFloat(coordinate[1]).toFixed(2), this.iconStyle.value)
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.setStyle(
this.getPointStyle(this.iconStyle.value + '.png', this.iconStyle.name)
) //设置要素样式
newFeature.setId(bean.key)
this.vectorLayer.getSource().addFeature(newFeature)
//添加需要拖动的点
......@@ -435,7 +455,12 @@
let newFeature = new OlFeature({
geometry: new OlGeomPoint(coordinate) //几何信息
})
newFeature.setStyle(that.getPointStyle(that.iconStyle.value + '.png', that.iconStyle.name)) //设置要素样式
newFeature.setStyle(
that.getPointStyle(
that.iconStyle.value + '.png',
that.iconStyle.name
)
) //设置要素样式
newFeature.setId(bean.key + 'end')
//添加结束的点
that.vectorLayer.getSource().addFeature(newFeature)
......@@ -453,7 +478,11 @@
for (let i in that.list) {
//true弹出详情页面
that.mapClick(that.vectorLayer.getSource().getFeatureById(bean.key), that.list[i], false)
that.mapClick(
that.vectorLayer.getSource().getFeatureById(bean.key),
that.list[i],
false
)
}
that.updateHandle()
})
......@@ -545,7 +574,10 @@
for (let i in list) {
if (list[i].imageSrc) {
//振动光纤和红外线对射
if (list[i].type === 'e670524ecb9e4a03b8ddbc7d91a63b1b' || list[i].type === '4f69755dbc0c45e49c142857286c5669') {
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])
......@@ -555,7 +587,10 @@
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)
let style = this.getPointStyle(
list[i].imageSrc + '.png',
this.list[i].name
)
featuresArr[i].setStyle(style)
featuresArr[i].setId(list[i].id)
} else {
......@@ -564,8 +599,13 @@
}
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.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')
......@@ -579,7 +619,10 @@
})
this.map.addLayer(this.vectorLayer)
//将点和线的Feature对象 ，放在一个数组里面
let modifyFeatures = this.lineVectorLayer.getSource().getFeatures().concat(this.vectorLayer.getSource().getFeatures())
let modifyFeatures = this.lineVectorLayer
.getSource()
.getFeatures()
.concat(this.vectorLayer.getSource().getFeatures())
// this.modify = new Modify({
// source: this.vectorLayer.getSource()
// })
......@@ -588,13 +631,15 @@
features: modifyFeatures
})
})
this.modify.on('modifyend', e => {
this.modify.on('modifyend', (e) => {
let pixel = this.map.getEventPixel(e.mapBrowserEvent.originalEvent)
//获取当前拖拽的feature对象，该feature没有id，
let feature = e.mapBrowserEvent.map.forEachFeatureAtPixel(pixel,
let feature = e.mapBrowserEvent.map.forEachFeatureAtPixel(
pixel,
function(feature) {
return feature
})
}
)
if (feature) {
that.cancelDisabled = false
......@@ -603,15 +648,25 @@
//根据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)
let featureKey = that.vectorLayer
.getSource()
.getFeatureById(that.list[i].key)
//红外探测器和振动光纤的第二点同过key+'end'获取feature对象
let featureEnd = that.vectorLayer.getSource().getFeatureById(that.list[i].key + 'end')
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()) {
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]))
......@@ -619,18 +674,31 @@
// 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')
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)
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()) {
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]))
......@@ -638,12 +706,19 @@
// 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')
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)
let style = that.getPointStyle(
that.list[i].imageSrc + '.png',
that.list[i].name
)
featureEnd.setStyle(style)
}
}
......@@ -687,7 +762,11 @@
},
//新建资源点对象
getNewBox(item, j, w, src) {
let uuid = getUUID().replace('-', '').replace('-', '').replace('-', '').replace('-', '')
let uuid = getUUID()
.replace('-', '')
.replace('-', '')
.replace('-', '')
.replace('-', '')
return {
id: uuid,
key: uuid,
......@@ -696,8 +775,6 @@
password: '',
port: '',
remark: '',
lineId: this.checkedData.lineId,
lineName: this.checkedData.lineName,
stationId: this.checkedData.stationId,
stationName: this.checkedData.stationName,
subCode: this.checkedData.subCode,
......@@ -731,19 +808,25 @@
url: this.$http.adornUrl('/liResource/getTreeList'),
method: 'post',
data: {
stationId: this.checkedData.sId,
name: this.searchInput
}
}).then(data => {
}).then((data) => {
if (data && data.code === 0) {
this.treeData = data.tree
this.defaultExpandedKeys = []
this.$nextTick(() => {
if (!this.treeData || this.treeData.length <= 0 || !this.treeData[0].children || this.treeData[0].children.length <= 0) {
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.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)
......@@ -758,19 +841,28 @@
}
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)
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 sysId = ''
this.systemList.forEach(element => {
this.systemList.forEach((element) => {
if (this.tierMap.subCode === element.value) {
sysId = element.id
}
})
let res = this.$refs.tree.getNode(this.tierMap.tierId + sysId).data
this.initStation(this.tierMap.stationId, res.children, this.tierMap.tierId + sysId)
let res = this.$refs.tree.getNode(this.tierMap.tierId + sysId)
.data
this.initStation(
this.tierMap.stationId,
res.children,
this.tierMap.tierId + sysId
)
}
//将选中的层级树节点设置为选中
this.$refs.tree.setCurrentNode(this.currentNode)
......@@ -820,7 +912,7 @@
url: this.$http.adornUrl('/liResource/getResourceTreeList'),
method: 'post',
data: data
}).then(data => {
}).then((data) => {
// console.log('初始化线路树：', data.nodes)
if (data && data.code === 0) {
this.$refs.tree.updateKeyChildren(node.id, data.nodes)
......@@ -834,12 +926,12 @@
method: 'get',
params: this.$http.adornParams()
})
.then(data => {
.then((data) => {
if (data && data.code === 0) {
if (data.bean) {
this.station = data.bean
this.mapList = data.bean.mapList
this.mapList.forEach(element => {
this.mapList.forEach((element) => {
element.readPath = this.urlPath + element.filePath
})
this.checkedData.lineId = this.station.lineId
......@@ -852,7 +944,7 @@
// this.$refs.tree.setCurrentNode(this.treeData[0].children[0])
// this.defaultExpandedKeys = [this.checkedData.tierId]
if (res) {
this.mapList.forEach(e => {
this.mapList.forEach((e) => {
if (res.tierId === e.id) {
this.checkedData.tierId = e.id
this.checkedData.tierName = e.name
......@@ -885,7 +977,7 @@
},
isFlag(data, id) {
data.forEach(res => {
data.forEach((res) => {
if (res.id === id) {
Vue.set(res, 'iconB', true)
} else {
......@@ -975,7 +1067,7 @@
this.checkedData.stationId = node.stationId
this.checkedData.tierId = node.tierId
this.mapList.forEach(element => {
this.mapList.forEach((element) => {
if (element.id === node.tierId) {
this.stationMap = element
return false
......@@ -986,7 +1078,7 @@
this.list = JSON.parse(JSON.stringify(node.children))
// console.log('资源点列表：', this.list)
this.list.forEach(res => {
this.list.forEach((res) => {
Vue.set(res, 'active', false)
})
this.changeVectorLayer(this.list)
......@@ -994,7 +1086,7 @@
} else if (level === 6) {
this.tierMap = node
var sysId = ''
this.systemList.forEach(element => {
this.systemList.forEach((element) => {
if (node.subCode === element.value) {
sysId = element.id
}
......@@ -1003,7 +1095,7 @@
let subNode = this.$refs.tree.getNode(node.tierId + sysId).data
// console.log('当前要选中的层级节点', subNode)
this.list = []
subNode.children.forEach(res => {
subNode.children.forEach((res) => {
this.list.push(res)
})
......@@ -1024,7 +1116,7 @@
}
}
this.iconNameListBottom.forEach(res => {
this.iconNameListBottom.forEach((res) => {
if (this.clickItem && res.id === this.clickItem.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
......@@ -1064,7 +1156,7 @@
this.checkedData.stationId = stationNode.id
this.checkedData.stationName = stationNode.name
this.stationMap = map
this.iconNameListBottom.forEach(res => {
this.iconNameListBottom.forEach((res) => {
if (res.id === this.clickItem.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 4
......@@ -1088,15 +1180,15 @@
let tierNode = this.$refs.tree.getNode(this.checkedData.tierId).data
// console.log('当前要选中的层级节点', tierNode.children)
this.list = []
tierNode.children.forEach(subSystem => {
subSystem.children.forEach(res => {
tierNode.children.forEach((subSystem) => {
subSystem.children.forEach((res) => {
if (item === null || (item != null && item.id === res.type)) {
this.list.push(res)
}
})
})
this.list.forEach(res => {
this.list.forEach((res) => {
Vue.set(res, 'active', false)
})
// console.log(this.list, '++++++')
......@@ -1106,13 +1198,13 @@
let node = this.$refs.tree.getNode(id).data
this.list = []
if (node.level === 4) {
node.children.forEach(subSystem => {
subSystem.children.forEach(res => {
node.children.forEach((subSystem) => {
subSystem.children.forEach((res) => {
this.list.push(res)
})
})
} else {
node.children.forEach(e => {
node.children.forEach((e) => {
this.list.push(e)
})
}
......@@ -1123,7 +1215,9 @@
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')
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) {
......@@ -1143,7 +1237,7 @@
name: this.searchInput
}
})
.then(data => {
.then((data) => {
if (data && data.code === 0) {
this.treeData = data.tree
// if (!this.checkedData.sId) {
......@@ -1176,18 +1270,18 @@
//console.log(res, '++++++++++')
var sysId = ''
this.systemList.forEach(element => {
this.systemList.forEach((element) => {
if (res.subCode === element.value) {
sysId = element.id
}
})
var subId = ''
this.treeData.forEach(e => {
this.treeData.forEach((e) => {
if (res.stationId === e.id) {
e.children.forEach(el => {
e.children.forEach((el) => {
if (el.id === res.tierId) {
el.children.forEach(element => {
el.children.forEach((element) => {
if (element.id === res.tierId + sysId) {
subId = element.id
Vue.set(element, 'iconB', true)
......@@ -1234,7 +1328,7 @@
let flag = true
//判断是否有无id的新增资源点
this.list.forEach(res => {
this.list.forEach((res) => {
if (res.addOrUpdate === 'save') {
flag = false
return false
......@@ -1247,7 +1341,7 @@
url: this.$http.adornUrl(`/liResource/updateList`),
method: 'post',
data: paramList
}).then(data => {
}).then((data) => {
// console.log(data)
if (data.message) {
this.addNotify(data.message)
......@@ -1276,19 +1370,24 @@
})
this.submitlDisabled = false
} else {
this.$confirm(`未填写信息的新增资源点将被忽略，是否继续?`, '保存资源点', {
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 => {
})
.then((data) => {
// console.log(data)
if (data && data.code === 0) {
if (data.message) {
......@@ -1369,7 +1468,7 @@
// 移动资源位坐标
changeResourceLocation(id, x, y) {
// console.log('changeResourceLocation:', id, x, y)
this.list.forEach(res => {
this.list.forEach((res) => {
if (res.id === id) {
// console.log('移动坐标1：', res.name, res.xpoint, res.ypoint)
res.xpoint = x
......@@ -1420,7 +1519,7 @@
stationId: localStorage.getItem('stationId'),
id: ids[i]
})
}).then(data => {
}).then((data) => {
if (data && data.code === 0) {
//删除绘制的图标和线
this.delPoint(ids[i])
......@@ -1492,7 +1591,9 @@
if (featureEnd) {
//删除红外探测器或者振动光纤id对应的资源点
this.vectorLayer.getSource().removeFeature(featureEnd)
let lineFeature = this.lineVectorLayer.getSource().getFeatureById(id + 'line')
let lineFeature = this.lineVectorLayer
.getSource()
.getFeatureById(id + 'line')
if (lineFeature) {
//删除id对应的连线
this.lineVectorLayer.getSource().removeFeature(lineFeature)
......@@ -1529,7 +1630,7 @@
}
item.value = item.value + '2'
this.typeList.forEach(res => {
this.typeList.forEach((res) => {
if (item.id !== res.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) == 2
......@@ -1564,7 +1665,7 @@
// }
this.typeList.forEach(res => {
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 (
......@@ -1608,7 +1709,7 @@
// console.log(jw)
// }
this.mousemoveStatus = false
this.typeList.forEach(res => {
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)
}
......@@ -1634,7 +1735,7 @@
},
iconClick(item) {
console.log(this.currentNode)
this.iconNameListBottom.forEach(res => {
this.iconNameListBottom.forEach((res) => {
if (res.id === item.id) {
if (
res.value.substring(res.value.length - 1, res.value.length) != 4
......@@ -1651,13 +1752,13 @@
})
if (this.currentNode.level == 5) {
this.list = []
this.currentNode.children.forEach(el => {
this.currentNode.children.forEach((el) => {
if (item.id === el.type) {
this.list.push(el)
}
})
this.list.forEach(res => {
this.list.forEach((res) => {
Vue.set(res, 'active', false)
})
} else {
......@@ -1673,7 +1774,7 @@
params: this.$http.adornParams({
stationId: localStorage.getItem('stationId')
})
}).then(data => {
}).then((data) => {
if (data && data.code === 0) {
this.systemList = data.list
}
......@@ -1686,11 +1787,11 @@
params: this.$http.adornParams({
stationId: localStorage.getItem('stationId')
})
}).then(data => {
}).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 => {
this.iconNameListBottom.forEach((res) => {
res.value += '3'
})
}
......@@ -1701,116 +1802,114 @@
//console.log(e.width)
}
}
}
}
</script>
<style lang='scss' scoped>
.dic_tree {
<style lang="scss" scoped>
.dic_tree {
background: #f4f4f4;
font-size: 14px;
transform: translateX(-6px);
margin-top: 20px;
}
.dic_tree /deep/ .el-tree-node__content {
}
.dic_tree /deep/ .el-tree-node__content {
padding-left: 0px !important;
}
}
.dic_tree /deep/ .el-tree-node {
.dic_tree /deep/ .el-tree-node {
position: relative;
padding-left: 16px;
}
}
.dic_tree /deep/ .el-tree-node__children {
.dic_tree /deep/ .el-tree-node__children {
padding-left: 10px;
}
}
.dic_tree /deep/ .el-tree-node :last-child:before {
.dic_tree /deep/ .el-tree-node :last-child:before {
height: 38px;
}
}
.dic_tree /deep/ .el-tree > .el-tree-node:before {
.dic_tree /deep/ .el-tree > .el-tree-node:before {
border-left: none;
}
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
}
.dic_tree /deep/ .el-tree-node:before {
content: "";
.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: "";
.dic_tree /deep/ .el-tree-node:after {
content: '';
left: -4px;
position: absolute;
right: auto;
border-width: 1px;
}
}
.dic_tree /deep/ .el-tree-node:before {
.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 {
.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 {
}
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}
}
.tree-container {
.tree-container {
/* 树的parent，样式自定 */
}
.dic_tree /deep/ .el-tree-node__expand-icon.expanded {
}
.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");
}
.dic_tree /deep/ .el-icon-caret-right:before {
background: url('../../../assets/images/add.png');
content: "";
content: '';
display: block;
width: 18px;
height: 18px;
font-size: 18px;
background-size: 18px;
}
.dic_tree
}
.dic_tree
/deep/
.el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
background: url("../../../assets/images/sub.png");
content: "";
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 {
}
.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 {
}
.dic_tree /deep/.is-leaf.el-tree-node__expand-icon.el-icon-caret-right {
// margin-left: -15px !important;
}
}
</style>
<style lang='scss'>
.line_warp {
<style lang="scss">
.line_warp {
// width: 300px;
height: 45px;
display: flex;
......@@ -1826,37 +1925,37 @@
height: 50px;
transform: translateX(-14px);
}
}
.el-tree--highlight-current
}
.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 {
}
.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{
<style lang="scss" scoped>
#map {
/deep/.ol-zoom {
// display: none;
}
/deep/ .ol-zoom .ol-unselectable .ol-control{
/deep/ .ol-zoom .ol-unselectable .ol-control {
display: none;
}
}
}
.treeCard {
.treeCard {
.el-tree {
overflow-y: scroll;
height: 640px;
}
}
}
.tree_house {
.tree_house {
width: 12px;
height: 18px;
display: inline-block;
......@@ -1867,8 +1966,8 @@
// transform: translateY(-8px);
transform: translateX(-40px);
}
}
.tree_point {
}
.tree_point {
width: 12px;
height: 18px;
display: inline-block;
......@@ -1878,8 +1977,8 @@
vertical-align: middle;
transform: translateY(-2px);
}
}
.resource-container {
}
.resource-container {
width: 100%;
height: 100%;
position: relative;
......@@ -1906,15 +2005,15 @@
height: 40px;
width: 40px;
}
}
}
.tier-btn {
.tier-btn {
.active-tier {
background-color: #409eff;
color: #ffffff;
}
}
.monitor_point_left_top {
}
.monitor_point_left_top {
height: 42px;
background: #e1edf4;
padding-left: 16px;
......@@ -1958,9 +2057,9 @@
font-weight: bold;
}
}
}
}
.top_button {
.top_button {
background: url(~@/assets/images/sysiconbg.png);
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment