diff --git a/src/api/device/device.js b/src/api/device/device.js index 9ddf3ee..43b8535 100644 --- a/src/api/device/device.js +++ b/src/api/device/device.js @@ -16,8 +16,8 @@ export function getDeviceAllList(params) { return request({ url: 'device/list', - method: 'get' - // params + method: 'get', + params }) } diff --git a/src/api/device/device.js b/src/api/device/device.js index 9ddf3ee..43b8535 100644 --- a/src/api/device/device.js +++ b/src/api/device/device.js @@ -16,8 +16,8 @@ export function getDeviceAllList(params) { return request({ url: 'device/list', - method: 'get' - // params + method: 'get', + params }) } diff --git a/src/views/overview/overview3d.vue b/src/views/overview/overview3d.vue index d5bdd95..67f9ba9 100644 --- a/src/views/overview/overview3d.vue +++ b/src/views/overview/overview3d.vue @@ -38,6 +38,7 @@ import { mapGetters } from 'vuex' import { getWellType } from '@/api/well/well' import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms } from '@/api/overview/wellOverview' +import { getDeviceAllList, getDeviceType } from '@/api/device/device' import { toPixel, toLngLat, toSize } from '@/components/Amap/utils/convert-helper' import DeptSelect from '../../components/DeptSelect/index' import AMapContainer from '@/components/Amap/AMapContainer' @@ -64,14 +65,18 @@ var underground = null var line_layer = [] +var line_layer_3D = [] var point_layer = [] var point_layer_3D = [] -var line_layer_3D = [] +var dev_layer = [] +var dev_layer_3D = [] +var wellLoc = {} export default { name: 'Overview3D', components: { MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AlarmList, AMapMarker, AMapContainer, DeptSelect }, data() { return { + initWell: false, // 是否初始化井信息 showLine: true, showModel: false, colors: ['#7f0000', '#804000', '#00ff00', '#ff7fe9', '#ff7fe9', '#ff0000', '#00bfff', '#00ff00', '#ff0000'], @@ -79,7 +84,7 @@ ['雨水附属物', '污水附属物', '天然气附属物', '燃气附属物', '给水附属物', '电信附属物', '电力附属物', '标识器', '雨水管线', '污水管线', '通信管线', '天然气管线', '燃气管线', '路灯管线', '给水管线', '电信管线', '电力管线'], baseLayer: 'gaode_vec', // 底图图层 - layers: [{ id: 'well', name: '井图层', children: [] }, { id: 'line', name: '管线图层', children: [] }, { id: 'alarm', name: '报警图层' }], // 图层列表 + layers: [{ id: 'well', name: '井图层', children: [] }, { id: 'line', name: '管线图层', children: [] }, { id: 'dev', name: '设备图层', children: [] }, { id: 'alarm', name: '报警图层' }], // 图层列表 checkedLayer: [], // 选中的图层 center: ['114.88', '25.68'], // 地图中心 // center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心 @@ -118,6 +123,7 @@ clock: null, // 计时器 showWellType: false, // 是否显示点位类型下拉,默认边上 wellTypeList: [], // 点位类型列表 + deviceTypeList: [], // 设备类型列表 commonIcon: 'well-common-green', // 通用图标 绿 commonIconAlarm: 'well-common-red', // 通用图标 红 alarmListOri: [], // 原始报警列表 @@ -187,7 +193,6 @@ mounted() { this.$nextTick(() => { this.windowResize(window.innerHeight, window.innerWidth) - // this.$refs['app'].windowResize(window.innerHeight, window.innerWidth) this.initmars3d() this.resultList = [] }) @@ -309,14 +314,14 @@ map.addEffect(this.bloomEffect) window.map.basemap.opacity = this.alpha / 100 // 崩溃后刷新 - map.on(mars3d.EventType.renderError, function(event) { - window.location.reload() - }) + // map.on(mars3d.EventType.renderError, function(event) { + // window.location.reload() + // }) const that = this map.on(mars3d.EventType.load, function(event) { + window.map.on(mars3d.EventType.cameraChanged, that.cameraChange, that) that.initLine() that.initPoint() - that.mapReady() }) }, initLine() { @@ -377,11 +382,12 @@ } }) } - window.map.on(mars3d.EventType.cameraChanged, this.cameraChange, this) }, initPoint(condition = '') { point_layer = [] point_layer_3D = [] + let comp_layer = 0 + const that = this for (let i = 0; i <= 7; i++) { const queryPointserver = new mars3d.query.QueryArcServer({ url: 'http://111.198.10.15:13002/arcgis/rest/services/gztest/MapServer/' + i, @@ -400,7 +406,7 @@ scaleByDistance_far: 30000, scaleByDistance_farValue: 0.6, scaleByDistance_near: 0, - scaleByDistance_nearValue: 1.4, + scaleByDistance_nearValue: 2, clampToGround: true, highlight: { type: 'click', image: '../static/images/gz-high.png' } } @@ -411,26 +417,34 @@ window.map.addLayer(point) const point3D = new mars3d.layer.GeoJsonLayer({ name: this.layerName[i], - symbol: { - type: 'modelP', - styleOptions: { - url: '../static/model/ys.gltf', - scale: 1.5 - }, - callback: function(attr, styleOpt) { - return { setHeight: -2 } - } + enablePickFeatures: false, + onCreateGraphic: function(options) { + // 在里面就可以处理geojson内部的数据 + const points = options.position // 坐标 + const attr = options.attr // 属性信息 + const primitive = new mars3d.graphic.ModelPrimitive({ + allowDrillPick: true, + // attr: attr, + id: attr.编号, + position: points, + style: { + url: '../static/model/ys.gltf', + scale: 1.5, + setHeight: -2 + } + }) + point3D.addGraphic(primitive) }, - show: false, - popup: 'all' + show: false }) + // point3D.on(mars3d.EventType.load, function(e) { + // console.log('绘制矢量对象完成', e) + // console.log(point3D) + // }) if (i !== 7) { window.map.addLayer(point3D) point_layer_3D.push(point3D) } - point3D.on(mars3d.EventType.load, function(event) { - console.log('矢量数据对象加载完成', event) - }) if (condition === '') { queryPointserver.query({ success: (result) => { @@ -442,6 +456,18 @@ } point.load({ data: result.geojson }) point3D.load({ data: result.geojson }) + if (!this.initWell && comp_layer < 7) { + comp_layer++ + } + if (!this.initWell && comp_layer === 7) { + this.initWell = true + point_layer_3D.forEach(layer => { + layer.options.data.features.forEach(item => { + that.$set(wellLoc, item.properties.编号, item.geometry.coordinates) + }) + }) + that.mapReady() + } }, error: (error, msg) => { this.$message.error('服务访问错误,' + error) @@ -471,8 +497,8 @@ }, // 控制二维线的显隐 cameraChange() { - // console.log('map-level:' + window.map.level) - // console.log('alpha:' + this.alpha) + console.log('map-level:' + window.map.level) + console.log('alpha:' + this.alpha) if (window.map.level <= 19) { // 远 // 线 if (!this.showLine) { @@ -507,7 +533,7 @@ }, // 初始化放这里 mapReady() { - this.fetchWellList() // 加载全部井 + this.fetchDeviceList() this.firstAmount = true this.toolShow = true this.refreshAlarm() @@ -597,16 +623,42 @@ } }).splice(8, 9) } + const deviceTypes = this.$store.getters.deviceTypes this.layers.splice(0, 1, wellLayer) this.layers.splice(1, 1, lineLayer) + if (this.baseConfig.showAllWells) { - this.checkedLayer = [...this.checkedLayer, 'well', this.wellTypeList.map(item => 'well-' + item.value), 'line', lineLayer.children.map(item => item.id)] + // this.checkedLayer = [...this.checkedLayer, 'well', this.wellTypeList.map(item => 'well-' + item.value), 'line', lineLayer.children.map(item => item.id)] + this.checkedLayer = ['well', 'line'] + this.wellTypeList.forEach(item => this.checkedLayer.push('well-' + item.value)) + lineLayer.children.forEach(item => this.checkedLayer.push('line-' + item.value)) } else { this.checkedLayer = [...this.checkedLayer] } if (this.wellTypeList.length <= 1) { this.showWellType = false } + getDeviceType(this.listQuery).then(response => { + this.deviceTypeList = [] + // 过滤掉该单位不支持的设备类型 + const deviceTypes = this.$store.getters.deviceTypes + for (const deviceType of response.data) { + if (deviceTypes.indexOf(deviceType.value) !== -1) { + this.deviceTypeList.push(deviceType) + } + } + const devLayer = { + id: 'dev', + name: '设备图层', + children: this.deviceTypeList.map(item => { + return { + id: 'dev-' + item.value, + name: item.name + } + }) + } + this.layers.splice(2, 1, devLayer) + }) }, /** * 数据筛选 @@ -748,27 +800,52 @@ } }, // 获取全部井列表 - fetchWellList() { - this.loading = true - getWellList().then(response => { - this.loading = false - if (response.code === 200) { - const wells = response.data - if (wells.length > 0) { - this.markers = [] - for (const well of wells) { - const marker = { - ...well, - lnglat: [parseFloat(well.lngGaode), parseFloat(well.latGaode)], - icon: this.commonIcon, - visible: true, - wellStatus: 'normal' - } - this.markers.push(marker) - } - } + fetchDeviceList() { + this.loading = false + this.deviceTypeList.forEach(item => { + const param = { + deviceType: item.value } - this.loading = false + // getDeviceAllList(param).then(response => { + // if (response.code === 200) { + // if (response.data.length === 0) return + // const graphicLayer = new mars3d.layer.GraphicLayer({ name: item.name }) + // window.map.addLayer(graphicLayer) + // dev_layer.push(graphicLayer) + // const name = item.name.substr(0, 1) + // response.data.forEach(data => { + // if (wellLoc[data.wellCode] !== undefined && wellLoc[data.wellCode].length === 2) { + // const primitive = new mars3d.graphic.ModelPrimitive({ + // position: [wellLoc[data.wellCode][0], wellLoc[data.wellCode][1], -3], + // style: { + // url: '../static/model/' + 1 + '.glb', + // scale: 1, + // label: { + // // 面中心点，显示文字的配置 + // text: name, // 对应的属性名称 + // opacity: 1, + // font_size: 14, + // color: '#ffffff', + // font_weight: 'bold', + // font_style: 'normal', + // addHeight: 3, + // // scaleByDistance: true, + // // + // // pixelOffsetY: -40, + // // + // // scaleByDistance_far: 300000, + // // scaleByDistance_farValue: 0.4, + // // scaleByDistance_near: 1, + // // scaleByDistance_nearValue: 1.4, + // visibleDepth: false + // } + // } + // }) + // graphicLayer.addGraphic(primitive) + // } + // }) + // } + // }) }) }, // 刷新报警列表