<!--suppress ALL -->
<template>
<div>
<!--筛选条件-->
<div class="map-search-div">
<el-form ref="selectForm" :inline="true" :model="listQuery" class="form-container">
<el-row>
<el-form-item>
<el-input v-model.trim="listQuery.keywords" placeholder="井编号/地址" clearable size="small"/>
</el-form-item>
<el-form-item>
<el-select v-model="listQuery.wellType" placeholder="选择井类型" @change="changetype" clearable size="small">
<el-option
v-for="item in wellTypeList"
:key="'welltype_'+item.value"
:label="item.name"
:value="item.value"/>
</el-select>
</el-form-item>
<el-button class="filter-item" type="primary" icon="el-icon-search" @click="getWellList" size="small" style="margin-top: 2px">搜索</el-button>
<el-form-item style="margin-left:10px">
<el-checkbox v-model="showAll">显示全部井</el-checkbox>
</el-form-item>
<el-form-item >
<el-slider v-model="alpha" style="width: 150px"></el-slider>
</el-form-item>
<el-form-item style="margin-left:5px">
<el-button type="primary" size="small" icon="el-icon-map-location" circle @click="flytoinit"/>
</el-form-item>
</el-row>
</el-form>
</div>
<div v-if="refreshType=='websocket'" class="function-div">
<el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
<!--<el-button type="primary" icon="el-icon-refresh-right" circle @click="refreshAlarm"/>-->
</div>
<div v-if="showAlarm==true && alarmList.length>0" class="map-alarm-div">
<div class="map-alarm-div-header">
告警列表
<span class="icon-right" @click="tableShow=!tableShow">
<i v-if="tableShow" class="el-icon-arrow-up"/>
<i v-else class="el-icon-arrow-down"/>
</span>
</div>
<transition name="el-collapse-transition">
<el-scrollbar
v-show="tableShow"
:style="{visibility: tableShow?'visible':'hidden'}"
:class="{moredatascollor:alarmList.length>6}"
:native="false">
<el-table
:data="alarmList"
class="alarm-list-table"
border
@row-dblclick="alarmRowClick">
<el-table-column v-for="column in columns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row[column.value] }}
</template>
</el-table-column>
</el-table>
</el-scrollbar>
</transition>
</div>
<div id="mars3dContainer" class="mars3d-container"/>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import SelectTree from '@/components/SelectTree/singleSelect'
import { getWellType } from '@/api/well'
import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms, getWellByCode } from '@/api/overview'
import DeptSelect from '../../components/DeptSelect/index'
import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d'
import 'cesium/Source/Widgets/widgets.css'// 导入必须的样式表
var Cesium = require('../../../node_modules/cesium/Source/Cesium')
var rectangle = null
var alarmIcons= []
var typeList = []
export default {
name: 'Overview',
components: { DeptSelect, SelectTree },
data() {
return {
map: null,
ysline: null,
wsline: null,
underground: null,
img_layer: null,
tile_layer: null,
tiles3dLayer: null,
rain_point_layer: null,
rain_point_layer1: null,
sewage_point_layer: null,
alarm_layer: null,
fly_layer: null,
type: 'massMarkers', // 加载数据方式：massMarkers或cluster
refreshType: 'websocket', // 刷新数据方式：clock或websocket
showAlarm: true, // 是否显示报警
showAll: false, // 是否显示全部井
alpha: 100, // 是否显示全部井
listQuery: {
keywords: '', // 关键字
wellType: '', // 井类型
// deptid: '', // 组织机构
// isAlarm: '1' // 是否报警
}, // 筛选条件
columns: [
{
text: '井编号',
value: 'wellCode',
width: 220,
align: 'center'
},
{
text: '设备编号',
value: 'devcode',
width: 120,
align: 'center'
},
{
text: '告警原因',
value: 'alarmContent',
align: 'center',
width: 120
},
{
text: '时间',
value: 'alarmTime',
width: 160,
align: 'center'
}
], // 告警列表显示列
tableShow: true, // 是否显示告警列表
tableIcon: 'el-icon-arrow-up',
showWellType: this.showWellType(), // 是 否显示井类型下拉
wellTypeList: [], // 井类型列表
showDeptTree: 0, // 是否显示权属单位下拉,0不显示，1显示树，2显示平面
center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
zoom: 12, // 地图缩放比例
alarmList: [], // 报警列表
alarmInfo: {
wellCode: '',
deptName: '',
position: '',
deep: '',
alarms: []
}, // 显示报警详情气泡内容
timer :null,
currentWindow: {
visible: false, // 窗体显示与否
position: [this.$store.getters.lng, this.$store.getters.lat],
windowType: 'info' // 窗体类型：详情info或报警alarm
}, // 当前窗体属性
deptShowTop: false, // 是否显示顶级
clock: null, // 计时器
hasAlarm: false, // 是否有报警,
loading: true, // 加载图标是否显示
trackPopUp:false,
removeHandler:null,
showClearBtn: false // 是否显示清除查询按钮
}
},
computed: {
...mapGetters([
'needRefresh'
])
},
mounted() {
this.initmars3d()
},
watch: {
alpha(val){
this.img_layer.alpha = val/100
// this.ysline.alpha = val/100
// this.wsline.alpha = val/100
this.map.basemap.opacity = val/100
this.tiles3dLayer.opacity = val/100
this. underground.alpha = val/100
console.log(val,this.map.level)
if(val<=90 && this.map.level>=19){
// this.map.scene.globe.show = false
this.ysline.show = false
this.wsline.show = false
}else {
// this.map.scene.globe.show = true
this.ysline.show = true
this.wsline.show = true
}
},
showAll(val) {
this.tile_layer.show = val
},
// needRefresh(val) {
// // 需要刷新
// if (val) {
// this.refreshAlarm()
// }
// },
showAlarm(val){
if(!val && this.currentWindow.windowType=='alarm'){
this.currentWindow.visible = false
}
this.alarm_layer.show = val
}
},
created() {
this.fetchWellType()
},
computed: {
handler() {
return new Cesium.ScreenSpaceEventHandler(this.map.scene.canvas)
}
},
methods: {
changetype(){
if(this.listQuery.wellType==='1'){ // 雨水
this.rain_point_layer.show = true
this.rain_point_layer1.show = true
this.sewage_point_layer.show = false
}else if(this.listQuery.wellType==='2'){ //污水
this.rain_point_layer.show = false
this.rain_point_layer1.show = false
this.sewage_point_layer.show = true
}else{
this.rain_point_layer.show = true
this.rain_point_layer1.show = true
this.sewage_point_layer.show = true
}
},
async initpoints(str) {
if(this.sewage_point_layer!==null) this.map.removeLayer(this.sewage_point_layer)
if(this.rain_point_layer!==null) this.map.removeLayer(this.rain_point_layer)
if(this.rain_point_layer1!==null) this.map.removeLayer(this.rain_point_layer1)
this.sewage_point_layer = new mars3d.layer.ArcGisWfsLayer({
name: '污水点',
url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/3',
where: str,
minimumLevel: 19,
symbol: {
type: 'modelP',
styleOptions: {
url: '../static/model/ws3(1).gltf',
scale: 1.3
},
callback: function (attr, styleOpt){
var val= {attr}.attr
return {setHeight: -val.井深}
}
},
popup: '编号：{编号}<br />名称：{附属物名称}<br />所属道路：{所属道路}',
})
this.map.addLayer(this.sewage_point_layer)
this.rain_point_layer = new mars3d.layer.ArcGisWfsLayer({
name: '雨水井',
url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/0',
where: "附属物名称 = '雨水井' and " + str,
minimumLevel: 19,
symbol: {
type: 'modelP',
styleOptions: {
url: '../static/model/ys3.gltf',
scale: 1.3
},
callback: function (attr, styleOpt){
var val= {attr}.attr
return {setHeight: -val.井深}
}
},
popup: '编号：{编号}<br />名称：{附属物名称}<br />所属道路：{所属道路}',
})
this.map.addLayer(this.rain_point_layer)
this.rain_point_layer1 = new mars3d.layer.ArcGisWfsLayer({
name: '雨篦',
url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/0',
where: "附属物名称 <> '雨水井' and " + str,
minimumLevel: 19,
symbol: {
type: 'modelP',
styleOptions: {
url: '../static/model/yubi.gltf',
scale: 1.3
},
callback: function (attr, styleOpt){
var val= {attr}.attr
return {setHeight: -val.井深}
}
},
popup: '编号：{编号}<br />名称：{附属物名称}<br />所属道路：{所属道路}',
})
this.map.addLayer(this.rain_point_layer1)
},
// 初始化放这里
async initmars3d() {
var mapOptions = {
scene: {
// 默认视角参数
center: { lat: 27.68, lng: 116.0935, alt: 10000, heading: 360, pitch: -45 },
// 以下是Cesium.Globe对象相关参数
globe: {
depthTestAgainstTerrain: true, // 是否启用深度监测
// baseColor: '#00192f', // 地球默认背景色
showGroundAtmosphere: false, // 是否在地球上绘制的地面大气
enableLighting: false // 是否显示昼夜区域
},
// 以下是Cesium.ScreenSpaceCameraController对象相关参数
cameraController: {
zoomFactor: 3.0, // 鼠标滚轮放大的步长参数
minimumZoomDistance: 1, // 地球放大的最小值（以米为单位）
maximumZoomDistance: 50000000, // 地球缩小的最大值（以米为单位）
enableRotate: true, // 2D和3D视图下，是否允许用户旋转相机
enableTranslate: true, // 2D和哥伦布视图下，是否允许用户平移地图
enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
enableZoom: true, // 是否允许 用户放大和缩小视图
enableCollisionDetection: true // 是否允许 地形相机的碰撞检测
}
},
basemaps: [
{
pid: 10,
id: 2011,
name: "天地图",
type: "group",
layers: [
// { name: "注记", type: "tdt", layer: "ter_z", key: ["9ae78c51a0a28f06444d541148496e36"] },
{ name: "注记", type: "tdt", layer: "img_z", key: ["9ae78c51a0a28f06444d541148496e36"] },
]
},
// {
// "id": 2021,
// "pid": 10,
// "name": "天地图影像",
// "icon": "http://mars3d.cn/example/img/basemaps/tdt_img.png",
// "type": "tdt",
// "layer": "img_d",
// "key": ["9ae78c51a0a28f06444d541148496e36"],
// "show": true
// },
// {
// "id": 2020,
// "pid": 10,
// "name": "天地图电子",
// "icon": "http://mars3d.cn/example/img/basemaps/tdt_vec.png",
// "type": "group",
// "layers": [
// { "name": "底图", "type": "tdt", "layer": "vec_d", "key": ["9ae78c51a0a28f06444d541148496e36"] },
// { "name": "注记", "type": "tdt", "layer": "vec_z", "key": ["9ae78c51a0a28f06444d541148496e36"] }
// ]
// },
],
}
// 创建三维地球场景
var map = new mars3d.Map('mars3dContainer', mapOptions)
map.basemap = 2011
map.scene.screenSpaceCameraController.enableCollisionDetection = false
// 设置鼠标
map.scene.screenSpaceCameraController.tiltEventTypes = [ Cesium.CameraEventType.RIGHT_DRAG ]
// 缩放设置 重新设置缩放成员
map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
// 鼠标左键平移
map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
this.map = map
this.underground = new mars3d.thing.Underground({
alpha: 1,
})
map.addThing(this.underground)
this.tiles3dLayer = new mars3d.layer.TilesetLayer({
name: '倾斜摄影',
url: 'http://111.198.10.15:20603/CRGroup03/tileset.json',
show:true,
type: '3dtiles',
maximumScreenSpaceError: 8,
maximumMemoryUsage: 1024,
// center: {lat: 27.750462, lng: 116.090196, alt: 130, heading: 3, pitch: 7 },
position: {
lng: 116.069103, lat: 27.756591, alt: -70
},
skipLevelOfDetail: true,
loadSiblings: true,
cullRequestsWhileMoving: true,
cullRequestsWhileMovingMultiplier: 10,
preferLeaves: true,
dynamicScreenSpaceError: true,
preloadWhenHidden: true,
flyTo: true
})
let that = this
this.handler.setInputAction(function(movement) {
console.log(movement,that.map.level)//向上滑是100 向下滑是-100
if(that.map.level<19){
that.ysline.show = true
that.wsline.show = true
}else{
if(that.alpha<90){
that.ysline.show = false
that.wsline.show = false
}
}
}, Cesium.ScreenSpaceEventType.WHEEL)
map.addLayer(this.tiles3dLayer)
this.tile_layer = new mars3d.layer.ArcGisLayer({
url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer',
layers: '0,3',
show:false,
// maximumTerrainLevel: 19,
enablePickFeatures: false,
})
map.addLayer(this.tile_layer)
this.img_layer = new mars3d.layer.XyzLayer({
url: 'http://223.82.47.232:11502/crtiles01/{z}/{x}/{y}.png',
crs: 'EPSG:3857',
queryParameters: {
//可以传自定义url参数，如token等
token: 'mars3d',
}
})
map.addLayer(this.img_layer)
let wfsLayer = new mars3d.layer.ArcGisWfsLayer({
name: '雨水管线',
url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/4',
minimumLevel: 19,
symbol: {
type: 'polylineVolumeP',
styleOptions: {
color: '#375cad',
shape: 'pipeline',
radius: 0.1
},
callback: function (attr, styleOpt){
var val= {attr}.attr
return {setHeight: [-val.起始埋深,-val.终止埋深]}
}
},
popup: '名称：雨水管线<br />编号：{编号}<br />材质：{材质}<br />管径：{管径}<br />所属道路：{所属道路}',
})
map.addLayer(wfsLayer)
wfsLayer = new mars3d.layer.ArcGisWfsLayer({
name: '污水管线',
url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/5',
minimumLevel: 19,
symbol: {
type: 'polylineVolumeP',
styleOptions: {
color: '#eb6b0c',
shape: 'pipeline',
radius: 0.1
},
callback: function (attr, styleOpt){
var val= {attr}.attr
return {setHeight: [-val.起始埋深,-val.终止埋深]}
}
},
popup: '名称：污水管线<br />编号：{编号}<br />材质：{材质}<br />管径：{管径}<br />所属道路：{所属道路}',
})
map.addLayer(wfsLayer)
this.ysline = new mars3d.layer.ArcGisWfsLayer({
name: '雨水线',
url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/4',
// maximumLevel: 19,
enablePickFeatures: false,
symbol: {
type: 'polylineP',
styleOptions: {
color: '#375cad',
// radius: 0.1
},
},
})
map.addLayer(this.ysline)
this.wsline = new mars3d.layer.ArcGisWfsLayer({
name: '污水线',
url: 'http://223.82.47.232:11408/arcgis/rest/services/crgx/MapServer/5',
// maximumLevel: 19,
enablePickFeatures: false,
symbol: {
type: 'polylineP',
styleOptions: {
color: '#eb6b0c',
// radius: 0.1
},
},
})
map.addLayer(this.wsline)
this.initpoints("1=1")
this.refreshAlarm()
},
// 获取井类型，显示井类型下拉
fetchWellType() {
getWellType().then(response => {
this.wellTypeList = []
// 如果该用户支持的井类型只有一个，则不显示该筛选框
// const wellTypes = this.$store.getters.wellTypes
for (const wellType of response.data) {
// if (wellTypes.indexOf(wellType.value) !== -1) {
this.wellTypeList.push(wellType)
// }
}
if (this.wellTypeList.length <= 1) {
this.showWellType = false
}
})
},
flytoinit(){
var center = { lat: 27.68, lng: 116.0935, alt: 10000, heading: 360, pitch: -45 }
this.map.setCameraView(center)
},
// 获取全部井列表
getWellList() {
if(this.listQuery.keywords=== ''){
this.initpoints("1=1")
return
}
getWellList(this.listQuery).then(response => {
if (response.code === 200) { // todo
let str = "1 <> 1"
for (const res of response.data) {
str += (" or 编号 = '" + res.wellCode + "'")
}
this.initpoints(str)
}
})
},
// 点击井详情气泡
openInfoWindow(wellId) {
this.currentWindow.visible = false
getWellInfo(wellId).then(response => {
if (response.code === 200) {
const wellInfo = response.data
this.wellInfo = {
wellCode: wellInfo.wellCode,
position: wellInfo.position,
wellTypeName: wellInfo.wellTypeName,
deptName: wellInfo.deptName,
bfztName: wellInfo.bfztName,
deep: wellInfo.deep
}
this.currentWindow.position = [wellInfo.lngGaode, wellInfo.latGaode]
this.currentWindow.visible = true
this.currentWindow.windowType = 'info'
this.trackPopUp = true
}
})
},
// 刷新报警列表
refreshAlarm() {
this.count = 60
this.loading = true
getAlarmsNow().then(response => {
if (response.code === 200) {
this.loading = false
// 获取当前报警列表
this.alarmList = response.data
if (this.alarmList.length > 0) {
this.hasAlarm = true
}
let str = "1 <> 1"
var map = {};
for (const alarm of response.data) {
str += (" or 编号 = '" + alarm.wellCode + "'")
map[alarm.wellCode] = alarm
}
if(this.alarm_layer!==null){
this.map.removeLayer(this.alarm_layer)
}
this.alarm_layer = new mars3d.layer.ArcGisWfsLayer({
name: '报警点',
url: 'http://223.82.47.232:11408/arcgis/rest/services/sfw/MapServer/1',
where: str,
// minimumLevel: 15,
symbol: {
type: 'modelP',
styleOptions: {
url: '../static/model/baojing.gltf',
minimumPixelSize: 20,
maximumScale: 15,
scale: 1
},
// callback: function (attr, styleOpt){
// var val= {attr}.attr
// return {setHeight: val.井深}
// }
},
popup: function(e){
var val = e.graphic.options.attr
return `井编号：${val.编号}<br />井名称：${val.附属物名称}<br />所属道路：${val.所属道路}<br />告警原因：${map[val.编号].alarmContent}<br />告警时间：${map[val.编号].alarmTime}`
}
})
this.map.addLayer(this.alarm_layer)
}
})
},
// 点击报警详情
openAlarmWindow(wellId, position) {
// 旧弹窗不显示
this.currentWindow.visible = false
// this.filterIcon()
getWellAlarms(wellId).then(response => {
console.log(response)
if (response.code === 200) {
const wellInfo = response.data
this.alarmInfo = {
wellCode: wellInfo.wellCode,
position: wellInfo.position,
deptName: wellInfo.deptName,
wellTypeName: wellInfo.wellTypeName,
alarms: wellInfo.alarmList,
deep: wellInfo.deep
}
this.currentWindow.position = position
this.center = position
this.currentWindow.visible = true
this.currentWindow.windowType = 'alarm'
this.trackPopUp = true
}
})
},
// 点击报警列表
alarmRowClick(row, column, event) {
if(this.alpha<10){
this.alpha = 15
}
this.flytoinit()
var that = this
if(this.fly_layer!==null) this.map.removeLayer(this.fly_layer)
const wellId = row.wellCode
let str = "编号 = '" + wellId + "'"
this.fly_layer = null
this.fly_layer = new mars3d.layer.ArcGisWfsLayer({
name: '报警点',
url: 'http://223.82.47.232:11408/arcgis/rest/services/sfw/MapServer/1',
where: str,
symbol: {
type: 'modelP',
styleOptions: {
url: '../static/model/baojing.gltf',
scale: 0
},
callback: function (attr, styleOpt){
var val= {attr}.attr
var center = {lat: val.wd, lng: val.jd, alt: 50, heading: 360, pitch: -90}
that.map.setCameraView(center)
}
}
})
this.map.addLayer(this.fly_layer)
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ .mars3d-popup-content {
margin: 20px;
line-height: 1.9;
font-size: 18px;
}
@CHARSET "UTF-8";
// 查询框
.map-search-div{
position: absolute;
z-index: 100;
padding: 0px 10px;
background-color: rgba(244, 244, 244, 0.9);
/*left: 90px;*/
.el-form-item{
margin-bottom: 0px;
}
}
// 刷新框
.function-div{
position: absolute;
right: 10px;
top: 7px;
z-index: 1100;
padding: 10px;
color: #ce8b74;
font-size: 14px;
/*background-color: rgba(244, 233, 230, 1.0);*/
.font-red{
color: red;
font-weight: bold;
}
.el-icon-refresh:hover{
color: red;
font-weight: bold;
cursor: pointer;
}
}
// 报警列表
.map-alarm-div{
position: absolute;
z-index: 100;
background-color: rgba(255, 234, 241,0.8);
top: 40px;
left: 0px;
.map-alarm-div-header{
line-height: 35px;
width: 621px;
padding-left: 10px;
.icon-right{
position: absolute;
right: 15px;
}
.icon-right:hover{
color: #409EFF;
cursor: pointer;
}
}
.el-scrollbar {
/*height: 200px;*/
width: 100%;
}
.moredatascollor{
height: 200px;
}
.el-scrollbar__wrap {
overflow-y: auto;
overflow-x: hidden;
padding:0px !important;
margin-bottom: 0px !important;
}
.el-table th{
/*background-color: rgba(255, 229, 230, 0.8);*/
padding: 7px 0px;
}
.el-table td{
/*background-color: rgba(255, 234, 241, 0.8);*/
padding: 5px 0px;
/*line-height: 1;*/
}
.el-table td:hover{
/*background-color: rgba(255, 234, 241, 0.8);*/
}
.transition-box {
margin-bottom: 10px;
width: 200px;
height: 100px;
border-radius: 4px;
background-color: #409EFF;
text-align: center;
color: #fff;
padding: 40px 20px;
box-sizing: border-box;
margin-right: 20px;
}
}
// 刷新框
.refresh-div{
position: absolute;
right: 10px;
top: 7px;
z-index: 100;
padding: 10px;
color: #ce8b74;
font-size: 14px;
background-color: rgba(244, 233, 230, 1.0);
.font-red{
color: red;
font-weight: bold;
}
.el-icon-refresh:hover{
color: red;
font-weight: bold;
cursor: pointer;
}
}
// 地图
.el-divider--horizontal{
margin: 5px 0;
}
/*按钮样式*/
.add-button{
}
</style>
<style rel="stylesheet/scss" lang="scss">
.map-alarm-div {
.el-scrollbar__wrap {
overflow-y: auto;
overflow-x: hidden;
padding: 0px !important;
margin-bottom: 0px !important;
}
}
</style>
