@@ -18,14 +18,17 @@
+
-
+
+
+
@@ -36,9 +39,13 @@
import SelectButton from '@/components/SelectTool/components/selectButton'
import LayoutMap from '../../layout/layoutMap'
import SelectRoute from './components/selectRoute'
+import ThreatDialog from './components/threatDialog'
+import HighConsequenceDialog from './components/highConsequenceDialog'
export default {
name: 'WaterThreat',
components: {
+ HighConsequenceDialog,
+ ThreatDialog,
SelectRoute,
LayoutMap,
Map,
@@ -61,7 +68,7 @@
sinkThreatShow: false, // 显示塌陷隐患位置
boardData: {
name: '巡检人员',
- value: 196
+ value: 6
}, // 统计版展示数据
threatLevel: {
'1': 'A级',
@@ -79,6 +86,7 @@
{ 'x': 113.038394, 'y': 35.850111, 'z': 0, 'name': '长晋管理处' },
{ 'x': 111.491467, 'y': 36.064572, 'z': 0, 'name': '临汾管理处' }
],
+ routeData: [], // 巡检人员数据
highConsequence: [], // 高后果区列表
constructionThreatArea: [], // 第三方施工隐患列表
waterThreatArea: [], // 水保隐患列表
@@ -103,13 +111,55 @@
// this.addHcaPosition()
// 添加管理处
this.addStation()
+ this.addRoute()
// this.addStationDiv()
// 添加水保隐患隐患点
// this.addWaterThreatPosition()
},
// 添加巡线人员位置
addRoute() {
-
+ const { mars3d, Cesium } = this
+ // 创建DIV数据图层
+ var graphicLayer = new mars3d.layer.DivLayer()
+ this.routeLayer = graphicLayer
+ this.map.addLayer(graphicLayer)
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('监听layer,单击了矢量对象', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const lastPosition = route.lineTrackingList[0]
+ const html =
+ '
姓名:' + route.name +
+ '
所属管理处:' + route['depname'] +
+ '
电话:' + route['phone'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + lastPosition.locationdate +
+ '
gps状态:' + lastPosition['gprs'] + '
'
+ return html
+ })
+ axios.get('static/config/patrolReal.json').then((res) => {
+ res = res.data
+ if (res.code === 200) {
+ this.routeData = res.data
+ this.boardData.value = this.routeData.length
+ for (const route of this.routeData) {
+ const lastPosition = route.lineTrackingList[0]
+ const graphic = new mars3d.graphic.DivGraphic({
+ position: [lastPosition.lon, lastPosition.lat, 10000],
+ style: {
+ html: '

',
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000), // 按视距距离显示
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ verticalOrigin: Cesium.VerticalOrigin.CENTER
+ },
+ attr: route,
+ pointerEvents: true // false时不允许拾取和触发任意鼠标事件,但可以穿透div缩放地球
+ })
+ graphicLayer.addGraphic(graphic)
+ }
+ }
+ })
},
// 高后果区位置
addHcaPosition() {
@@ -118,6 +168,10 @@
var graphicLayer = new mars3d.layer.DivLayer()
this.hcaLayer = graphicLayer
this.map.addLayer(graphicLayer)
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('监听layer,单击了矢量对象', event)
+ this.$refs.hcaDialog.initDialog(event.graphic.attr)
+ })
axios.get('static/config/highConsequence.json').then((res) => {
res = res.data
if (res.code === 200) {
@@ -133,6 +187,10 @@
// 创建DIV数据图层
var graphicLayer = new mars3d.layer.DivLayer()
this.waterThreatLayer = graphicLayer
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('监听layer,单击了矢量对象', event)
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ })
this.map.addLayer(graphicLayer)
axios.get('static/config/waterThreat.json').then((res) => {
res = res.data
@@ -149,6 +207,10 @@
// 创建DIV数据图层
var graphicLayer = new mars3d.layer.DivLayer()
this.constructionThreatLayer = graphicLayer
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('监听layer,单击了矢量对象', event)
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ })
this.map.addLayer(graphicLayer)
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -166,23 +228,23 @@
var graphicLayer = new mars3d.layer.DivLayer()
this.sinkThreatLayer = graphicLayer
this.map.addLayer(graphicLayer)
- axios.get('static/config/waterThreat.json').then((res) => {
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('监听layer,单击了矢量对象', event)
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ })
+ axios.get('static/config/sinkThreat.json').then((res) => {
res = res.data
if (res.code === 200) {
// 过滤掉经度为null的
this.sinkThreatArea = res.data.filter(item => item['经度'] !== null)
- this.addFeatures(graphicLayer, this.sinkThreatArea, 'sinkThreat', '#fe48fe')
+ this.addFeatures(graphicLayer, this.sinkThreatArea, 'sinkThreat', '#2c06a1')
}
})
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures(graphicLayer, arr, type, clr) {
const { mars3d, Cesium } = this
- // 创建DIV数据图层
- // 在layer上绑定监听事件
- graphicLayer.on(mars3d.EventType.click, function(event) {
- console.log('监听layer,单击了矢量对象', event)
- })
+ // 创建DIV数据图层\
for (var i = 0, len = arr.length; i < len; i++) {
const item = arr[i]
var jd = item['经度']
@@ -216,39 +278,19 @@
},
tooltip: station.name
})
- debugger
graphicLayer.addGraphic(graphic)
}
- // const stationLayer = new mars3d.layer.ModelLayer({
- // name: '管理处',
- // url: './static/gltf/output/guanlizhan.gltf',
- // style: {
- // scale: 20,
- // heading: 90,
- // minimumPixelSize: 30,
- // clampToGround: true
- // },
- // positions: this.manageStations.map(item => {
- // return { lng: item.x, lat: item.y, alt: 0 }
- // })
- // })
- // stationLayer.bindTooltip((event) => {
- // const attr = event.graphic.attr
- // debugger
- // return attr.name
- // })
- // this.stationLayer = stationLayer
- // this.map.addLayer(stationLayer)
},
// 选框发生变化
selectChange({ area }) {
+ debugger
area = area === '全部' ? '' : area
// 查询数据
let count = 0
- for (const hca of this.highConsequence) {
+ for (const item of this.routeData) {
let flag = true // 标记是否合格
// 比较区域
- if (area && hca['所属管理处'] && hca['所属管理处'].indexOf(area) === -1) {
+ if (area && item['depname'] && item['depname'].indexOf(area) === -1) {
flag = false
}
if (flag) {
@@ -344,11 +386,11 @@
if (show) { // 移除
this.stationShow = false
this.map.removeLayer(this.stationLayer, true)
- this.map.removeLayer(this.graphicLayer, true)
+ // this.map.removeLayer(this.graphicLayer, true)
} else {
this.stationShow = true
this.addStation()
- this.addStationDiv()
+ // this.addStationDiv()
}
},
showRoute(show) {
diff --git a/src/icons/svg/icon-earthquake.svg b/src/icons/svg/icon-earthquake.svg
new file mode 100644
index 0000000..be0e38d
--- /dev/null
+++ b/src/icons/svg/icon-earthquake.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/icons/svg/icon-overview.svg b/src/icons/svg/icon-overview.svg
index a2f9449..d8cdde2 100644
--- a/src/icons/svg/icon-overview.svg
+++ b/src/icons/svg/icon-overview.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/svg/icon-station2.svg b/src/icons/svg/icon-station2.svg
new file mode 100644
index 0000000..457cafd
--- /dev/null
+++ b/src/icons/svg/icon-station2.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/icons/svg/icon-user.svg b/src/icons/svg/icon-user.svg
index fc00eca..73e8cee 100644
--- a/src/icons/svg/icon-user.svg
+++ b/src/icons/svg/icon-user.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/icons/svg/icon-water.svg b/src/icons/svg/icon-water.svg
new file mode 100644
index 0000000..74281e8
--- /dev/null
+++ b/src/icons/svg/icon-water.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/icons/svg/valve.svg b/src/icons/svg/valve.svg
new file mode 100644
index 0000000..30921cb
--- /dev/null
+++ b/src/icons/svg/valve.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/router/modules/marsMap.js b/src/router/modules/marsMap.js
index e4027ad..9a5b623 100644
--- a/src/router/modules/marsMap.js
+++ b/src/router/modules/marsMap.js
@@ -79,7 +79,7 @@
}, {
path: '/pipeTopic',
name: 'PipeTopic',
- component: () => import('@/views/maps/mapOverview'),
+ component: () => import('@/views/maps/pipeOverview'),
meta: { title: '管网分布', icon: '' }
}, {
path: '/hcaTopic',
diff --git a/src/views/maps/components/highConsequenceDialog.vue b/src/views/maps/components/highConsequenceDialog.vue
new file mode 100644
index 0000000..1e3c3a4
--- /dev/null
+++ b/src/views/maps/components/highConsequenceDialog.vue
@@ -0,0 +1,163 @@
+
+
+
+
+
+
+
+ {{ form['高后果区编号'] }}
+
+
+
+
+ {{ form['识别时间'] }}
+
+
+
+
+
+
+ {{ form['机构名称'] }}
+
+
+
+
+ {{ form['识别单位及负责人'] }}
+
+
+
+
+
+
+ {{ form['位置描述'] }}
+
+
+
+
+ {{ form['高后果区长度'] }}m
+
+
+
+
+
+
+ {{ form['行政区域'] }}
+
+
+
+
+ {{ form['地区级别'] }}
+
+
+
+
+
+
+ {{ form['高后果区级别'] }}
+
+
+
+
+ {{ form['户数'] }}
+
+
+
+
+
+
+ {{ form['高后果区特征描述'] }}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/maps/components/threatDialog.vue b/src/views/maps/components/threatDialog.vue
new file mode 100644
index 0000000..5770a1b
--- /dev/null
+++ b/src/views/maps/components/threatDialog.vue
@@ -0,0 +1,152 @@
+
+
+
+
+
+
+
+ {{ form['隐患类型'] }}
+
+
+
+
+ {{ form['隐患发现时间'] }}
+
+
+
+
+
+
+ {{ form['经度'] }}
+
+
+
+
+ {{ form['纬度'] }}
+
+
+
+
+
+
+ {{ form['村庄地址'] }}
+
+
+
+
+ {{ form['所属管理处'] }}
+
+
+
+
+
+
+ {{ form['发现人'] }}
+
+
+
+
+ {{ form['创建时间'] }}
+
+
+
+
+
+
+ {{ form['位置描述'] }}
+
+
+
+
+ {{ form['业主单位'] }}
+
+
+
+
+
+
+ {{ form['隐患描述'] }}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/maps/pipeOverview.vue b/src/views/maps/pipeOverview.vue
index ee505b9..bd2d294 100644
--- a/src/views/maps/pipeOverview.vue
+++ b/src/views/maps/pipeOverview.vue
@@ -1,18 +1,591 @@
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/views/maps/routeTopic.vue b/src/views/maps/routeTopic.vue
index 2e99a0e..0c774ac 100644
--- a/src/views/maps/routeTopic.vue
+++ b/src/views/maps/routeTopic.vue
@@ -5,7 +5,7 @@
-->
-
+
@@ -18,14 +18,17 @@
+
-
+
+
+
@@ -36,9 +39,13 @@
import SelectButton from '@/components/SelectTool/components/selectButton'
import LayoutMap from '../../layout/layoutMap'
import SelectRoute from './components/selectRoute'
+import ThreatDialog from './components/threatDialog'
+import HighConsequenceDialog from './components/highConsequenceDialog'
export default {
name: 'WaterThreat',
components: {
+ HighConsequenceDialog,
+ ThreatDialog,
SelectRoute,
LayoutMap,
Map,
@@ -61,7 +68,7 @@
sinkThreatShow: false, // 显示塌陷隐患位置
boardData: {
name: '巡检人员',
- value: 196
+ value: 6
}, // 统计版展示数据
threatLevel: {
'1': 'A级',
@@ -79,6 +86,7 @@
{ 'x': 113.038394, 'y': 35.850111, 'z': 0, 'name': '长晋管理处' },
{ 'x': 111.491467, 'y': 36.064572, 'z': 0, 'name': '临汾管理处' }
],
+ routeData: [], // 巡检人员数据
highConsequence: [], // 高后果区列表
constructionThreatArea: [], // 第三方施工隐患列表
waterThreatArea: [], // 水保隐患列表
@@ -103,13 +111,55 @@
// this.addHcaPosition()
// 添加管理处
this.addStation()
+ this.addRoute()
// this.addStationDiv()
// 添加水保隐患隐患点
// this.addWaterThreatPosition()
},
// 添加巡线人员位置
addRoute() {
-
+ const { mars3d, Cesium } = this
+ // 创建DIV数据图层
+ var graphicLayer = new mars3d.layer.DivLayer()
+ this.routeLayer = graphicLayer
+ this.map.addLayer(graphicLayer)
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('监听layer,单击了矢量对象', event)
+ })
+ graphicLayer.bindPopup(event => {
+ const route = event.graphic.attr
+ const lastPosition = route.lineTrackingList[0]
+ const html =
+ '
姓名:' + route.name +
+ '
所属管理处:' + route['depname'] +
+ '
电话:' + route['phone'] +
+ '
站名:' + route['unitname'] +
+ '
时间:' + lastPosition.locationdate +
+ '
gps状态:' + lastPosition['gprs'] + '
'
+ return html
+ })
+ axios.get('static/config/patrolReal.json').then((res) => {
+ res = res.data
+ if (res.code === 200) {
+ this.routeData = res.data
+ this.boardData.value = this.routeData.length
+ for (const route of this.routeData) {
+ const lastPosition = route.lineTrackingList[0]
+ const graphic = new mars3d.graphic.DivGraphic({
+ position: [lastPosition.lon, lastPosition.lat, 10000],
+ style: {
+ html: '

',
+ distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 2000000), // 按视距距离显示
+ horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
+ verticalOrigin: Cesium.VerticalOrigin.CENTER
+ },
+ attr: route,
+ pointerEvents: true // false时不允许拾取和触发任意鼠标事件,但可以穿透div缩放地球
+ })
+ graphicLayer.addGraphic(graphic)
+ }
+ }
+ })
},
// 高后果区位置
addHcaPosition() {
@@ -118,6 +168,10 @@
var graphicLayer = new mars3d.layer.DivLayer()
this.hcaLayer = graphicLayer
this.map.addLayer(graphicLayer)
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('监听layer,单击了矢量对象', event)
+ this.$refs.hcaDialog.initDialog(event.graphic.attr)
+ })
axios.get('static/config/highConsequence.json').then((res) => {
res = res.data
if (res.code === 200) {
@@ -133,6 +187,10 @@
// 创建DIV数据图层
var graphicLayer = new mars3d.layer.DivLayer()
this.waterThreatLayer = graphicLayer
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('监听layer,单击了矢量对象', event)
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ })
this.map.addLayer(graphicLayer)
axios.get('static/config/waterThreat.json').then((res) => {
res = res.data
@@ -149,6 +207,10 @@
// 创建DIV数据图层
var graphicLayer = new mars3d.layer.DivLayer()
this.constructionThreatLayer = graphicLayer
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('监听layer,单击了矢量对象', event)
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ })
this.map.addLayer(graphicLayer)
axios.get('static/config/threat.json').then((res) => {
res = res.data
@@ -166,23 +228,23 @@
var graphicLayer = new mars3d.layer.DivLayer()
this.sinkThreatLayer = graphicLayer
this.map.addLayer(graphicLayer)
- axios.get('static/config/waterThreat.json').then((res) => {
+ graphicLayer.on(mars3d.EventType.click, event => {
+ console.log('监听layer,单击了矢量对象', event)
+ this.$refs.threatDialog.initDialog(event.graphic.attr)
+ })
+ axios.get('static/config/sinkThreat.json').then((res) => {
res = res.data
if (res.code === 200) {
// 过滤掉经度为null的
this.sinkThreatArea = res.data.filter(item => item['经度'] !== null)
- this.addFeatures(graphicLayer, this.sinkThreatArea, 'sinkThreat', '#fe48fe')
+ this.addFeatures(graphicLayer, this.sinkThreatArea, 'sinkThreat', '#2c06a1')
}
})
},
// 添加隐患点: type类型,arr数组, clr颜色
addFeatures(graphicLayer, arr, type, clr) {
const { mars3d, Cesium } = this
- // 创建DIV数据图层
- // 在layer上绑定监听事件
- graphicLayer.on(mars3d.EventType.click, function(event) {
- console.log('监听layer,单击了矢量对象', event)
- })
+ // 创建DIV数据图层\
for (var i = 0, len = arr.length; i < len; i++) {
const item = arr[i]
var jd = item['经度']
@@ -216,39 +278,19 @@
},
tooltip: station.name
})
- debugger
graphicLayer.addGraphic(graphic)
}
- // const stationLayer = new mars3d.layer.ModelLayer({
- // name: '管理处',
- // url: './static/gltf/output/guanlizhan.gltf',
- // style: {
- // scale: 20,
- // heading: 90,
- // minimumPixelSize: 30,
- // clampToGround: true
- // },
- // positions: this.manageStations.map(item => {
- // return { lng: item.x, lat: item.y, alt: 0 }
- // })
- // })
- // stationLayer.bindTooltip((event) => {
- // const attr = event.graphic.attr
- // debugger
- // return attr.name
- // })
- // this.stationLayer = stationLayer
- // this.map.addLayer(stationLayer)
},
// 选框发生变化
selectChange({ area }) {
+ debugger
area = area === '全部' ? '' : area
// 查询数据
let count = 0
- for (const hca of this.highConsequence) {
+ for (const item of this.routeData) {
let flag = true // 标记是否合格
// 比较区域
- if (area && hca['所属管理处'] && hca['所属管理处'].indexOf(area) === -1) {
+ if (area && item['depname'] && item['depname'].indexOf(area) === -1) {
flag = false
}
if (flag) {
@@ -344,11 +386,11 @@
if (show) { // 移除
this.stationShow = false
this.map.removeLayer(this.stationLayer, true)
- this.map.removeLayer(this.graphicLayer, true)
+ // this.map.removeLayer(this.graphicLayer, true)
} else {
this.stationShow = true
this.addStation()
- this.addStationDiv()
+ // this.addStationDiv()
}
},
showRoute(show) {
diff --git a/src/views/system/resource/editResource.vue b/src/views/system/resource/editResource.vue
index a824bdd..2a22a73 100644
--- a/src/views/system/resource/editResource.vue
+++ b/src/views/system/resource/editResource.vue
@@ -50,6 +50,11 @@
+
+
+
+
+