-
- ![]()
- ==
- ![]()
- {{ item }}
+
+ —
+ ![]()
+ ![]()
+ ![]()
+ {{ item }}
@@ -42,10 +43,6 @@
import MapSearchComp from '@/views/overview/components/mapSearchComp'
import { RSAencrypt } from '@/utils/security'
import axios from 'axios'
-// import 'cesium/Source/Widgets/widgets.css'// 导入必须的样式表
-// import 'cesium/Source/Cesium'// 导入必须的样式表
-// var Cesium = require('../../../node_modules/cesium/Source/Cesium')
-var Cesium = require('../../../node_modules/mars3d-cesium/Build/Cesium/Cesium')
import 'mars3d/dist/mars3d.css'
import 'mars3d/dist/mars3d.js'
import * as mars3d from 'mars3d'
@@ -53,29 +50,32 @@
import { breadcrumb } from '@/settings'
import Mars3dMap from '@/components/Mars3D/Mars3dMap'
import { polylineC, polylineVolumeP } from '@/components/Mars3D/utils/ArcGisWfsLayer'
-import { createPointLayer } from '@/components/Mars3D/utils/GeoJsonLayer'
+import { createPointLayer, createPointModelLayer } from '@/components/Mars3D/utils/GeoJsonLayer'
+// import { Tetrahedron } from '@/components/Mars3D/utils/GraphicLayer'
+
+const Cesium = require('../../../node_modules/mars3d-cesium/Build/Cesium/Cesium')
let layer2021 = null
let layer2020 = null
-let zrbs_layer = null
-let sjbs_layer = null
+// 设备
+const dev_layer = []
const alarm_layer = null
const rqline_layer = []
-let rqpoint_layer = null
-let rqpoint3D_layer = null
+let rqwell_layer = null
+let rqbox_layer = null
let underground = null
export default {
name: 'Overview3D',
components: { Mars3dMap, MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AlarmList },
data() {
return {
- layerName: ['燃气管线', '燃气附属物', '中燃燃气标识器', '圣井燃气标识器'],
+ layerName: ['燃气阀门井', '燃气调压箱', '中燃燃气标识器', '圣井燃气标识器', '正和燃气标识器', '华润燃气标识器', '华气燃气标识器', '井盖状态监测仪', '管盯', '燃气智能监测终端', '燃气管线'],
+ labelName: ['燃气管线', '燃气阀门井', '燃气调压箱', '中燃-圣井-正和-华润-华气标识器', '井盖状态监测仪', '管盯', '燃气智能监测终端'],
+ index: ['8', '10', '7', '0', '9', '1', '5', '6'],
basemap: 1113,
baseLayer: 'gaode_vec', // 底图图层
layers: [{ id: 'well', name: '井图层', children: [] }, { id: 'line', name: '管线图层', children: [] }, { id: 'dev', name: '设备图层', children: [] }], //, { id: 'alarm', name: '报警图层' }], // 图层列表
checkedLayer: [], // 选中的图层
center: ['', ''], // 地图中心
- showLine: true,
- showModel: true,
// center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
type: this.baseConfig.showPointType, // 加载数据方式：massMarkers海量点或cluster聚合点
refreshType: this.baseConfig.refreshType, // 刷新数据方式：clock定时器或websocket推送
@@ -130,13 +130,18 @@
// })
window.map.basemap.opacity = val / 100
underground.alpha = val / 100
- if (window.map.level >= 19 && this.alpha < 90 && this.showModel) {
- rqpoint3D_layer.show = true
+ if (window.map.level >= 19 && this.alpha < 90) {
+ // 展示该展示的
+ rqwell_layer['3D'].show = this.checkedLayer.indexOf('well-燃气阀门井') !== -1
+ rqbox_layer['3D'].show = this.checkedLayer.indexOf('well-燃气调压箱') !== -1
} else {
- rqpoint3D_layer.show = false
+ // 隐藏
+ rqwell_layer['3D'].show = false
+ rqbox_layer['3D'].show = false
}
},
needRefresh(val) { // 需要刷新报警
+ console.log('socket报警刷新')
if (val) this.refreshAlarm()
},
'menus.locationWindowShow'(val) { // 打开弹窗设置默认中心，关闭弹窗清空屏幕
@@ -229,8 +234,9 @@
layer2021.show = false
},
// 初始化放这里
- onMapload(map) {
+ onMapload(map, center) {
window.map = map
+ this.center = center
underground = new mars3d.thing.Underground({ alpha: this.alpha / 100 })
window.map.addThing(underground)
// 崩溃后刷新
@@ -243,84 +249,51 @@
},
async initLine() {
// 三维管线
- rqline_layer.push(polylineVolumeP('3', '#FF7FE9', '燃气管线', 0.1))
+ rqline_layer.push(polylineVolumeP('11', '#FF7FE9', '燃气管线', 0.1))
// 二维管线
- rqline_layer.push(polylineC('3', '#FF7FE9', '燃气管线', 3))
+ rqline_layer.push(polylineC('11', '#FF7FE9', '燃气管线', 3))
},
async initPoint(condition = '') {
this.mapLoading = true
+ if (rqwell_layer !== null) {
+ window.map.removeLayer(rqwell_layer['2D'])
+ window.map.removeLayer(rqwell_layer['3D'])
+ }
+ if (rqbox_layer !== null) {
+ window.map.removeLayer(rqbox_layer['2D'])
+ window.map.removeLayer(rqbox_layer['3D'])
+ }
+
+ // 设备图层
+ if (dev_layer.length !== 0) {
+ dev_layer.forEach(item => window.map.removeLayer(item))
+ }
const rq = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 附属物名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
const bsq = condition === '' ? '1<>1' : "编号 LIKE '%" + condition + "%' or 对象名称 LIKE '%" + condition + "%' or 所属道路 LIKE '%" + condition + "%'"
- rqpoint_layer = createPointLayer(rqpoint_layer, '2', '../static/images/燃气附属物.png', rq)
- zrbs_layer = createPointLayer(zrbs_layer, '0', '../static/images/标识器.png', bsq)
- sjbs_layer = createPointLayer(sjbs_layer, '1', '../static/images/标识器.png', bsq)
+ rqwell_layer = createPointModelLayer('3', '燃气阀门井', '../static/images/燃气附属物.png', '../static/model/ys.gltf', 1.5, rq)
+ rqbox_layer = createPointModelLayer('4', '燃气调压箱', '../static/images/燃气附属物.png', '../static/model/tyx.glb', 0.1, rq)
+ for (let i = 2; i < 10; i++) {
+ dev_layer.push(createPointLayer(this.layerName[i], this.index[i - 2], i <= 6 ? '../static/images/标识器.png' : '../static/images/dev.png', bsq))
+ }
const that = this
- rqpoint_layer.on(mars3d.EventType.load, function(event) {
+ rqwell_layer['2D'].on(mars3d.EventType.load, function(event) {
that.mapReady()
that.mapLoading = false
})
- if (rqpoint3D_layer !== null) window.map.removeLayer(rqpoint3D_layer)
- const queryPointserver = new mars3d.query.QueryArcServer({
- url: this.baseConfig.arcgisUrl + '2',
- popup: 'all',
- pageSize: 5000
- })
- rqpoint3D_layer = new mars3d.layer.GraphicLayer().bindPopup(function(event) {
- const attr = event.graphic.attr || {}
- return mars3d.Util.getTemplateHtml({ template: 'all', attr: attr })
- })
- rqpoint3D_layer.show = false
- window.map.addLayer(rqpoint3D_layer)
- queryPointserver.query({
- where: rq,
- success: (result) => {
- if (result.count === 0) {
- console.log('未查询到相关记录！')
- return
- }
- const well = []
- const box = []
- result.geojson.features.forEach(item => {
- item.properties.附属物编码 === 5001 ? well.push({
- position: [item.geometry.coordinates[0], item.geometry.coordinates[1], 0],
- style: {
- scaleX: 1,
- scaleY: 1,
- scaleZ: item.properties.井深
- },
- attr: item.properties
- }) : box.push({
- position: [item.geometry.coordinates[0], item.geometry.coordinates[1], 0],
- style: { scale: 0.1 },
- attr: item.properties
- })
- })
- let modelCombine = new mars3d.graphic.ModelCombine({
- url: '../static/model/ys.gltf',
- instances: well
- })
- rqpoint3D_layer.addGraphic(modelCombine)
- modelCombine = new mars3d.graphic.ModelCombine({
- url: '../static/model/tyx.glb',
- instances: box
- })
- rqpoint3D_layer.addGraphic(modelCombine)
- this.mapLoading = false
- },
- error: (error, msg) => {
- this.$message.error('服务访问错误,' + error)
- }
- })
},
// 控制二维线的显隐
// todo
cameraChange() {
// console.log('map-level:' + window.map.level)
// console.log('alpha:' + this.alpha)
- if (window.map.level >= 19 && this.alpha < 90 && this.showModel) {
- rqpoint3D_layer.show = true
+ if (window.map.level >= 19 && this.alpha < 90) {
+ // 展示该展示的
+ rqwell_layer['3D'].show = this.checkedLayer.indexOf('well-燃气阀门井') !== -1
+ rqbox_layer['3D'].show = this.checkedLayer.indexOf('well-燃气调压箱') !== -1
} else {
- rqpoint3D_layer.show = false
+ // 隐藏
+ rqwell_layer['3D'].show = false
+ rqbox_layer['3D'].show = false
}
},
// 初始化放这里
@@ -329,28 +302,35 @@
this.fetchWellList() // 加载全部井
this.firstAmount = true
this.toolShow = true
- if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
- setTimeout(() => { this.countDown() }, 1000)
- }
+ // if (this.refreshType === 'clock') { // 如果需要倒计时刷新的
+ setTimeout(() => { this.countDown() }, 1000)
+ // }
},
// 过滤图层
filterLayer(checkedLayer) {
+ this.checkedLayer = checkedLayer
// 0.选中or没选中井图层
- if (checkedLayer.indexOf('well') !== -1) {
- rqpoint_layer.show = true
- rqpoint3D_layer.show = true
- this.showModel = true
+ if (checkedLayer.indexOf('well-燃气阀门井') !== -1) {
+ rqwell_layer['2D'].show = true
+ rqwell_layer['3D'].show = true
} else {
- rqpoint_layer.show = false
- rqpoint3D_layer.show = false
- this.showModel = false
+ rqwell_layer['2D'].show = false
+ rqwell_layer['3D'].show = false
}
+ if (checkedLayer.indexOf('well-燃气调压箱') !== -1) {
+ rqbox_layer['2D'].show = true
+ rqbox_layer['3D'].show = true
+ } else {
+ rqbox_layer['2D'].show = false
+ rqbox_layer['3D'].show = false
+ }
+
// 1.选中or没选中管线图层
checkedLayer.indexOf('line') !== -1 ? rqline_layer.forEach(item => { item.show = true }) : rqline_layer.forEach(item => { item.show = false })
// 2.选中or没选中设备图层
- checkedLayer.indexOf('dev-中燃燃气标识器') !== -1 ? zrbs_layer.show = true : zrbs_layer.show = false
- checkedLayer.indexOf('dev-圣井燃气标识器') !== -1 ? sjbs_layer.show = true : sjbs_layer.show = false
+ const devTypes = checkedLayer.filter(item => item.indexOf('dev-') > -1).map(item => item.substring(4))
+ dev_layer.forEach(layer => { layer.show = devTypes.indexOf(layer.options.name) > -1 })
// // 3.选中or没选中报警图层
// checkedLayer.indexOf('alarm') !== -1 ? alarm_layer.show = true : alarm_layer.show = false
@@ -408,10 +388,10 @@
name: '井图层',
children: this.layerName.map(item => {
return {
- id: 'line-' + item,
+ id: 'well-' + item,
name: item
}
- }).splice(1, 1)
+ }).splice(0, 2)
}
const lineLayer = {
id: 'line',
@@ -421,7 +401,7 @@
id: 'line-' + item,
name: item
}
- }).splice(0, 1)
+ }).splice(10, 1)
}
const devLayer = {
id: 'dev',
@@ -431,7 +411,7 @@
id: 'dev-' + item,
name: item
}
- }).splice(2, 2)
+ }).splice(2, 8)
}
this.layers.splice(0, 1, wellLayer)
this.layers.splice(1, 1, lineLayer)
@@ -480,7 +460,7 @@
},
// 点击搜索结果项居中，弹窗
searchItemClick(marker) {
- const point = rqpoint_layer.graphics.filter(item => {
+ const point = rqwell_layer['2D'].graphics.filter(item => {
return item.options.id === marker.wellCode
})[0]
if (point === undefined) {
@@ -517,6 +497,41 @@
if (this.showAlarm && this.checkedLayer.indexOf('alarm') == -1) {
this.checkedLayer.push('alarm')
}
+ this.alarmWells.forEach(item => {
+ const point = rqwell_layer['2D'].graphics.filter(rq => {
+ return rq.options.id === item.wellCode
+ })[0]
+ if (point !== undefined) {
+ const attr = point.options.attr || {}
+ this.$delete(attr, '报警内容')
+ this.$delete(attr, '报警数值')
+ this.$delete(attr, '报警时间')
+ point.setStyle({
+ image: '../static/images/燃气附属物.png',
+ scale: 0.6,
+ hasPixelOffset: true,
+ pixelOffsetY: -10,
+ scaleByDistance: true,
+ scaleByDistance_far: 20000,
+ scaleByDistance_farValue: 0.6,
+ scaleByDistance_near: 0,
+ scaleByDistance_nearValue: 1.4,
+ clampToGround: true
+ }).unbindHighlight()
+ point.unbindPopup()
+ var str = `
`
+ for (const j in attr) {
+ if (j === 'FID') continue
+ str += `
`
+ point.bindPopup(str)
+ // alarm_layer.addGraphic(point)
+ // this.initAlarmPoint(point, item)
+ }
+ })
getAlarmsNow().then(response => {
if (response.code === 200) {
this.loading = false
@@ -543,11 +558,8 @@
}
}
console.log('alarmWells Length', this.alarmWells.length)
- // if (alarm_layer !== null) window.map.removeLayer(alarm_layer)
- // alarm_layer = new mars3d.layer.GraphicLayer()
- // window.map.addLayer(alarm_layer)
this.alarmWells.forEach(item => {
- const point = rqpoint_layer.graphics.filter(rq => {
+ const point = rqwell_layer['2D'].graphics.filter(rq => {
return rq.options.id === item.wellCode
})[0]
if (point !== undefined) {
@@ -569,7 +581,7 @@
visibleDepth: false
}).unbindHighlight()
point.unbindPopup()
- var str = `
+
+ ${attr[j]}
`
+ }
+ str += ``
+ var str = `
`
for (const j in attr) {
if (j === 'FID') continue
str += `
@@ -598,7 +610,7 @@
return
}
const wellId = row.wellId
- const point = rqpoint_layer.graphics.filter(item => {
+ const point = rqwell_layer['2D'].graphics.filter(item => {
return item.options.id === row.wellCode
})[0]
if (point === undefined) {
@@ -691,8 +703,8 @@
flex-wrap: wrap;
background-color: #fcfbe8;
border-radius: 5px;
- width: 190px;
- height: 150px;
+ width: 270px;
+ height: 200px;
padding: 10px;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
diff --git a/public/config/project.config.json b/public/config/project.config.json
index 36c6f79..b0804c0 100644
--- a/public/config/project.config.json
+++ b/public/config/project.config.json
@@ -3,16 +3,18 @@
"subtitle": "",
"theme":"blue",
"baseUrl": "http://60.208.121.150:5001/",
+ "wsUrl": "ws://60.208.121.150:5001/websocket/",
"mainPage": "http://111.198.10.15:11404/dcms/#",
"amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad",
"amapKey": "1733551f35b56f6d8e9c0a9d4c2523b",
"mapType": "gaode",
"singleSys": true,
"refreshType":"websocket",
+ "refreshTime": 60,
"showPointType":"massMarkers",
"showAllWells": true,
"provinceCode":"360000",
"cityCode":"361000",
"areaCode":"361024",
- "arcgisUrl": "http://111.198.10.15:13002/arcgis/rest/services/zqRq/MapServer/"
+ "arcgisUrl": "http://111.198.10.15:13002/arcgis/rest/services/zq_GxData0825/MapServer/"
}
diff --git a/src/api/overview/wellOverview.js b/src/api/overview/wellOverview.js
index b7984d0..e4643d2 100644
--- a/src/api/overview/wellOverview.js
+++ b/src/api/overview/wellOverview.js
@@ -5,7 +5,7 @@
// 井查询
export function getWellList(params) {
return request({
- baseURL: '/5002',
+ baseURL: 'http://60.208.121.150:5002/',
url: 'overview/wellList',
method: 'get',
params
@@ -24,7 +24,7 @@
// 获取报警列表
export function getAlarmsNow(params) {
return request({
- baseURL: '/5002',
+ baseURL: 'http://60.208.121.150:5002/',
url: 'overview/alarmNow',
method: 'get',
params
diff --git a/src/assets/images/info-bg.png b/src/assets/images/info-bg.png
index 45e75be..1a6445e 100644
--- a/src/assets/images/info-bg.png
+++ b/src/assets/images/info-bg.png
Binary files differ
diff --git a/src/components/Mars3D/Mars3dMap.vue b/src/components/Mars3D/Mars3dMap.vue
index 67592b1..b6ba864 100644
--- a/src/components/Mars3D/Mars3dMap.vue
+++ b/src/components/Mars3D/Mars3dMap.vue
@@ -3,6 +3,9 @@
diff --git a/src/views/overview/overview3dzq.vue b/src/views/overview/overview3dzq.vue
index 7dda3b6..d22ea8d 100644
--- a/src/views/overview/overview3dzq.vue
+++ b/src/views/overview/overview3dzq.vue
@@ -3,11 +3,12 @@