diff --git a/public/config/project.config.json b/public/config/project.config.json index 115d931..e748472 100644 --- a/public/config/project.config.json +++ b/public/config/project.config.json @@ -2,7 +2,7 @@ "title": "管网运行监测系统", "subtitle": "", "theme":"blue", - "baseUrl": "http://111.198.10.15:11309/", + "baseUrl": "http://111.198.10.15:11306/", "mainPage": "http://111.198.10.15:11404/dcms/#", "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad", "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b", diff --git a/public/config/project.config.json b/public/config/project.config.json index 115d931..e748472 100644 --- a/public/config/project.config.json +++ b/public/config/project.config.json @@ -2,7 +2,7 @@ "title": "管网运行监测系统", "subtitle": "", "theme":"blue", - "baseUrl": "http://111.198.10.15:11309/", + "baseUrl": "http://111.198.10.15:11306/", "mainPage": "http://111.198.10.15:11404/dcms/#", "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad", "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b", diff --git a/src/api/device/device.js b/src/api/device/device.js index 131110c..89923da 100644 --- a/src/api/device/device.js +++ b/src/api/device/device.js @@ -4,7 +4,7 @@ import request from '@/utils/request' import qs from 'qs' -// 设备查询 +// 设备查询分页 export function getDeviceList(params) { return request({ url: 'device/list-page', @@ -13,6 +13,14 @@ }) } +export function getDeviceAllList(params) { + return request({ + url: 'device/list', + method: 'get' + // params + }) +} + // 设备类别 export function getDeviceType(params) { return request({ diff --git a/public/config/project.config.json b/public/config/project.config.json index 115d931..e748472 100644 --- a/public/config/project.config.json +++ b/public/config/project.config.json @@ -2,7 +2,7 @@ "title": "管网运行监测系统", "subtitle": "", "theme":"blue", - "baseUrl": "http://111.198.10.15:11309/", + "baseUrl": "http://111.198.10.15:11306/", "mainPage": "http://111.198.10.15:11404/dcms/#", "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad", "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b", diff --git a/src/api/device/device.js b/src/api/device/device.js index 131110c..89923da 100644 --- a/src/api/device/device.js +++ b/src/api/device/device.js @@ -4,7 +4,7 @@ import request from '@/utils/request' import qs from 'qs' -// 设备查询 +// 设备查询分页 export function getDeviceList(params) { return request({ url: 'device/list-page', @@ -13,6 +13,14 @@ }) } +export function getDeviceAllList(params) { + return request({ + url: 'device/list', + method: 'get' + // params + }) +} + // 设备类别 export function getDeviceType(params) { return request({ diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js index 318c03c..ffafa14 100644 --- a/src/store/modules/settings.js +++ b/src/store/modules/settings.js @@ -18,7 +18,7 @@ const mutations = { CHANGE_SETTING: (state, { key, value }) => { - if (Object.prototype.hasOwnProperty.call(state, 'key')) { + if (Object.prototype.hasOwnProperty.call(state, key)) { state[key] = value } }, diff --git a/public/config/project.config.json b/public/config/project.config.json index 115d931..e748472 100644 --- a/public/config/project.config.json +++ b/public/config/project.config.json @@ -2,7 +2,7 @@ "title": "管网运行监测系统", "subtitle": "", "theme":"blue", - "baseUrl": "http://111.198.10.15:11309/", + "baseUrl": "http://111.198.10.15:11306/", "mainPage": "http://111.198.10.15:11404/dcms/#", "amapSecurityCode": "182a2c5889f7fe6d90546d9b8f4781ad", "amapKey": "1733551f35b56f6d8e9c0a9d4c2523b", diff --git a/src/api/device/device.js b/src/api/device/device.js index 131110c..89923da 100644 --- a/src/api/device/device.js +++ b/src/api/device/device.js @@ -4,7 +4,7 @@ import request from '@/utils/request' import qs from 'qs' -// 设备查询 +// 设备查询分页 export function getDeviceList(params) { return request({ url: 'device/list-page', @@ -13,6 +13,14 @@ }) } +export function getDeviceAllList(params) { + return request({ + url: 'device/list', + method: 'get' + // params + }) +} + // 设备类别 export function getDeviceType(params) { return request({ diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js index 318c03c..ffafa14 100644 --- a/src/store/modules/settings.js +++ b/src/store/modules/settings.js @@ -18,7 +18,7 @@ const mutations = { CHANGE_SETTING: (state, { key, value }) => { - if (Object.prototype.hasOwnProperty.call(state, 'key')) { + if (Object.prototype.hasOwnProperty.call(state, key)) { state[key] = value } }, diff --git a/src/views/overview/overview3d.vue b/src/views/overview/overview3d.vue index f4e2a49..d5bdd95 100644 --- a/src/views/overview/overview3d.vue +++ b/src/views/overview/overview3d.vue @@ -1,38 +1,36 @@ @@ -61,22 +59,27 @@ import 'mars3d/dist/mars3d.css' import 'mars3d/dist/mars3d.js' import * as mars3d from 'mars3d' +import store from '@/store' +import { breadcrumb } from '@/settings' var underground = null var line_layer = [] var point_layer = [] - +var point_layer_3D = [] +var line_layer_3D = [] export default { name: 'Overview3D', components: { MapSearchComp, PopupLocation, PopupDataFilter, ToolBox, AlarmList, AMapMarker, AMapContainer, DeptSelect }, data() { return { + showLine: true, + showModel: false, colors: ['#7f0000', '#804000', '#00ff00', '#ff7fe9', '#ff7fe9', '#ff0000', '#00bfff', '#00ff00', '#ff0000'], layerName: ['雨水附属物', '污水附属物', '天然气附属物', '燃气附属物', '给水附属物', '电信附属物', '电力附属物', '标识器', '雨水管线', '污水管线', '通信管线', '天然气管线', '燃气管线', '路灯管线', '给水管线', '电信管线', '电力管线'], baseLayer: 'gaode_vec', // 底图图层 - layers: [{ id: 'well', name: '井图层', children: [] }, { id: 'alarm', name: '报警图层' }], // 图层列表 + layers: [{ id: 'well', name: '井图层', children: [] }, { id: 'line', name: '管线图层', children: [] }, { id: 'alarm', name: '报警图层' }], // 图层列表 checkedLayer: [], // 选中的图层 center: ['114.88', '25.68'], // 地图中心 // center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心 @@ -147,15 +150,15 @@ alpha(val) { window.map.basemap.opacity = val / 100 underground.alpha = val / 100 - if (val <= 90 && window.map.level >= 19) { - line_layer.forEach(layer => { - layer.show = false - }) - } else { - line_layer.forEach(layer => { - layer.show = true - }) - } + // if (val <= 90 && window.map.level >= 19) { + // line_layer.forEach(layer => { + // layer.show = false + // }) + // } else { + // line_layer.forEach(layer => { + // layer.show = true + // }) + // } }, needRefresh(val) { // 需要刷新报警 if (val) this.refreshAlarm() @@ -168,22 +171,58 @@ } } }, + beforeCreate() { + this.$store.dispatch('settings/changeSetting', { + key: 'breadcrumb', + value: false + }) + this.$store.dispatch('settings/changeSetting', { + key: 'tagsView', + value: false + }) + }, created() { this.fetchWellType() }, mounted() { this.$nextTick(() => { + this.windowResize(window.innerHeight, window.innerWidth) + // this.$refs['app'].windowResize(window.innerHeight, window.innerWidth) this.initmars3d() this.resultList = [] }) }, beforeDestroy() { + this.$store.dispatch('settings/changeSetting', { + key: 'breadcrumb', + value: true + }) + this.$store.dispatch('settings/changeSetting', { + key: 'tagsView', + value: true + }) if (this.clock) { clearInterval(this.clock) this.clock = null } }, methods: { + windowResize(height, width) { + // 查找header高度 + const el_header = document.getElementById('app-header') + let bodyHeight = height - (el_header ? el_header.clientHeight : 56) + if (store.getters.tagsView) { + const el_tagsView = document.getElementById('tags-view-container') + bodyHeight -= el_tagsView ? el_tagsView.clientHeight : 34 + } + if (breadcrumb) { + const el_navbar = document.getElementsByClassName('navbar') + bodyHeight -= el_navbar ? el_navbar[0].clientHeight : 48 + } + // 减去2个padding + bodyHeight -= 5 + store.dispatch('settings/ChangeHeight', bodyHeight) + }, // 初始化放这里 async initmars3d() { const mapOptions = { @@ -282,9 +321,9 @@ }, initLine() { for (let i = 8; i <= 16; i++) { - // 三维地下管线 + // 三维地下管线 (19) const wfsLayer = new mars3d.layer.ArcGisWfsLayer({ - name: '三维' + this.layerName[i], + name: this.layerName[i], popup: 'all', url: 'http://111.198.10.15:13002/arcgis/rest/services/gztest/MapServer/' + i, minimumLevel: 19, @@ -296,14 +335,15 @@ radius: 0.1 }, callback: function(attr, styleOpt) { - return { setHeight: -3 } + return { setHeight: -2 } } // callback: function(attr, styleOpt) { // var val = { attr }.attr - // return { addHeight: [-3, -3] } + // return { addHeight: [-2, -2] } // } } }) + line_layer_3D.push(wfsLayer) window.map.addLayer(wfsLayer) // 二维管线 const queryLineserver = new mars3d.query.QueryArcServer({ @@ -337,9 +377,11 @@ } }) } - window.map.on(mars3d.EventType.cameraChanged, this.changeLine, this) + window.map.on(mars3d.EventType.cameraChanged, this.cameraChange, this) }, initPoint(condition = '') { + point_layer = [] + point_layer_3D = [] 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, @@ -366,22 +408,29 @@ popup: 'all' }) point_layer.push(point) + window.map.addLayer(point) const point3D = new mars3d.layer.GeoJsonLayer({ name: this.layerName[i], symbol: { type: 'modelP', styleOptions: { - url: '../static/model/yubi.gltf', + url: '../static/model/ys.gltf', scale: 1.5 }, callback: function(attr, styleOpt) { - return { setHeight: -3 } + return { setHeight: -2 } } }, + show: false, popup: 'all' }) - window.map.addLayer(point) - window.map.addLayer(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) => { @@ -421,17 +470,39 @@ } }, // 控制二维线的显隐 - changeLine() { - console.log('map-level:' + window.map.level) - console.log('alpha:' + this.alpha) - if (window.map.level <= 19) { - line_layer.forEach(layer => { - layer.show = true - }) - } else if (this.alpha < 90) { - line_layer.forEach(layer => { - layer.show = false - }) + cameraChange() { + // console.log('map-level:' + window.map.level) + // console.log('alpha:' + this.alpha) + if (window.map.level <= 19) { // 远 + // 线 + if (!this.showLine) { + const lineTypes = this.checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5)) + line_layer.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 }) + this.showLine = true + } + if (this.showModel) { + point_layer_3D.forEach(layer => { layer.show = false }) + this.showModel = false + } + } else if (this.alpha < 80) { // 近，透 + if (this.showLine) { + line_layer.forEach(layer => { layer.show = false }) + this.showLine = false + } + if (!this.showModel) { + const wellTypes = this.checkedLayer.filter(item => item.indexOf('well-') > -1).map(item => item.substring(5)) + point_layer_3D.forEach(layer => { layer.show = wellTypes.indexOf(layer.options.name) > -1 }) + this.showModel = true + } + } else { // 近，不透 + if (this.showLine) { + line_layer.forEach(layer => { layer.show = false }) + this.showLine = false + } + if (this.showModel) { + point_layer_3D.forEach(layer => { layer.show = false }) + this.showModel = false + } } }, // 初始化放这里 @@ -446,10 +517,17 @@ }, // 过滤图层 filterLayer(checkedLayer) { + this.checkedLayer = checkedLayer // 1.过滤井图层 const wellTypes = checkedLayer.filter(item => item.indexOf('well-') > -1).map(item => item.substring(5)) - point_layer.filter((item) => wellTypes.indexOf(item.options.name) > -1).forEach(layer => { layer.show = true }) - point_layer.filter((item) => wellTypes.indexOf(item.options.name) === -1).forEach(layer => { layer.show = false }) + const lineTypes = checkedLayer.filter(item => item.indexOf('line-') > -1).map(item => item.substring(5)) + // 点 + point_layer.forEach(layer => { layer.show = wellTypes.indexOf(layer.options.name) > -1 }) + point_layer_3D.forEach(layer => { layer.show = wellTypes.indexOf(layer.options.name) > -1 }) + // 线 + line_layer.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 }) + line_layer_3D.forEach(layer => { layer.show = lineTypes.indexOf(layer.options.name) > -1 }) + // 2.选中or没选中报警图层 if (checkedLayer.indexOf('alarm') !== -1) { this.showAlarm = true @@ -484,40 +562,51 @@ }, // 获取点位类型，显示点位类型下拉 fetchWellType() { - getWellType().then(response => { - this.wellTypeList = [] - // 如果该用户支持的点位类型只有一个，则不显示该筛选框 - const supportWellTypes = this.$store.getters.wellTypes - // this.wellTypeList = response.data.filter(wellType => { - // return supportWellTypes.findIndex(item => item == wellType.value) > -1 - // }) - this.wellTypeList = this.layerName.map((item, index) => { - return { - value: item, - name: item - } - }) - this.wellTypeList.length = 8 - const wellLayer = { - id: 'well', - name: '井图层', - children: this.wellTypeList.map(item => { - return { - id: 'well-' + item.value, - name: item.name - } - }) - } - this.layers.splice(0, 1, wellLayer) - if (this.baseConfig.showAllWells) { - this.checkedLayer = [...this.checkedLayer, 'well', this.wellTypeList.map(item => 'well-' + item.value)] - } else { - this.checkedLayer = [...this.checkedLayer] - } - if (this.wellTypeList.length <= 1) { - this.showWellType = false + // getWellType().then(response => { + // this.wellTypeList = [] + // // 如果该用户支持的点位类型只有一个，则不显示该筛选框 + // const supportWellTypes = this.$store.getters.wellTypes + // this.wellTypeList = response.data.filter(wellType => { + // return supportWellTypes.findIndex(item => item == wellType.value) > -1 + // }) + // }) + this.wellTypeList = this.layerName.map((item, index) => { + return { + value: item, + name: item } }) + this.wellTypeList.length = 8 + const wellLayer = { + id: 'well', + name: '井图层', + children: this.wellTypeList.map(item => { + return { + id: 'well-' + item.value, + name: item.name + } + }) + } + const lineLayer = { + id: 'line', + name: '管线图层', + children: this.layerName.map(item => { + return { + id: 'line-' + item, + name: item + } + }).splice(8, 9) + } + 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)] + } else { + this.checkedLayer = [...this.checkedLayer] + } + if (this.wellTypeList.length <= 1) { + this.showWellType = false + } }, /** * 数据筛选 @@ -529,7 +618,7 @@ this.filterMassMarker(listQuery, showMessage) this.filterAlarm(listQuery, showMessage) } else if (this.type === 'cluster') { // 过滤聚合点 - this.filterClusters(listQuery, showMessage) + // this.filterClusters(listQuery, showMessage) this.filterAlarm(listQuery, showMessage) } }, @@ -561,7 +650,7 @@ // 点击搜索结果项居中，弹窗 searchItemClick(marker) { // this.center = marker.lnglat - this.openInfoWindow(marker.wellId, marker.lnglat, this.searchResultOffset[1]) + // this.openInfoWindow(marker.wellId, marker.lnglat, this.searchResultOffset[1]) }, // 过滤海量点，给markers赋visible值 filterMassMarker(listQuery, showMessage = false) { @@ -766,32 +855,6 @@ } }) }, - /** - * 打开井详情弹窗 - * @param wellId 井id - * @param coordinates 弹窗位置： [经度，纬度] - * @param offsetY 弹窗Y轴偏移，为负值 - */ - openInfoWindow(wellId, coordinates, offsetY) { - this.clearInfoWindow() - // 首先获取井详情 - getWellInfo(wellId).then(response => { - if (response.code === 200) { - const wellInfo = { ...response.data } - // 加载弹窗组件 - const WellInfo = Vue.extend({ - render: h => h(WellInfoWindow, { props: { wellInfo: wellInfo }}) - }) - const wellWindow = new WellInfo().$mount() - const infoWindow = new window.AMap.InfoWindow({ - content: wellWindow.$el, // 显示内容 - offset: [0, offsetY], // 偏移 - autoMove: true // 是否自动调整窗体到视野内 - }) - infoWindow.open(window.map, new toLngLat(coordinates)) - } - }) - }, // 关闭所有弹窗 clearInfoWindow() { const { map } = this @@ -948,6 +1011,8 @@ // 地图 .overview-map-container{ width: 100%; + overflow-y: hidden; + padding: 0px; .map-demo{ width: 100%; .svg-icon{ @@ -961,7 +1026,6 @@ .nomal-info-window{ background-color: pink; } - } } @@ -984,19 +1048,23 @@ } .cover{ position: absolute; - bottom: 5px; - left: 5px; + bottom: 0px; + left: 0px; display: flex; flex-wrap: wrap; - /*background-color: red;*/ background-color: #fcfbe8; - width: 250px; - height: 220px; - padding: 15px; + width: 210px; + height: 180px; + padding: 6px; .cover-item{ width: 50%; padding: 1px; - font-size: 14px; + font-size: 13px; } } +