<!--suppress ALL -->
<template>
<div style="overflow-y: hidden">
<!--筛选条件-->
<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 style="margin-left: 10px">
<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-form-item style="margin-left:5px">
<el-button :type="showAlarm?'danger':'info'" size="small" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>
</el-form-item>
<el-form-item style="margin-left: 5px">
<el-switch
v-model="value"
active-color="#637F2C"
inactive-color="#071a69"
active-text="深蓝"
inactive-text="实景">
</el-switch>
</el-form-item>
<el-form-item style="margin-left: 5px">
<el-switch
v-model="value1"
:disabled="value"
active-text="开启流向"
inactive-text="关闭流向">
</el-switch>
</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 class="cover"/>
</div>
</template>
<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
import SelectTree from '@/components/SelectTree/singleSelect'
import { getWellType } from '@/api/well'
import { getWellList, getWellInfo, getAlarmsNow, getWellAlarms, getWellByCode,getMapping } 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 = []
var ysline = null
var wsline = null
var underground = null
var img_layer = null
var tile_layer = null
var tiles3dLayer = null
var rain_point_layer = null
var rain_point_layer1 = null
var sewage_point_layer = null
var alarm_layer = null
var fly_layer = null
var building = null
var flow = null
var street = null
var well_model_layer = null
var watch_model_layer = null
var zs_model_layer = null
var well_pic_layer = null
var watch_pic_layer = null
var zs_pic_layer = null
export default {
name: 'OverviewSimple',
components: { DeptSelect, SelectTree },
data() {
return {
type: 'massMarkers', // 加载数据方式：massMarkers或cluster
refreshType: 'websocket', // 刷新数据方式：clock或websocket
value: true,
value1: true,
showAlarm: true, // 是否显示报警
showAll: false, // 是否显示全部井
alpha: 40, // 是否显示全部井
listQuery: {
keywords: '', // 关键字
wellType: '', // 井类型
// deptid: '', // 组织机构
// isAlarm: '1' // 是否报警
}, // 筛选条件
columns: [
{
text: '水表检查井编号',
value: 'wellCode',
width: 120,
align: 'center'
},
{
text: '设备编号',
value: 'devcode',
width: 130,
align: 'center'
},
{
text: '告警原因',
value: 'alarmContent',
align: 'center',
width: 200
},
{
text: '时间',
value: 'alarmTime',
width: 170,
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: {
value(val){
if(val){
window.map.basemap = 2011
building.show = false
flow.show = false
street.show = true
}else{
window.map.basemap = 2021
building.show = true
flow.show = true
street.show = false
}
},
value1(val){
if(!val){
flow.show = false
}else{
flow.show = true
}
},
alpha(val){
window.map.basemap.opacity = val/100
underground.alpha = val/100
if(building !== null){
building.setStyle({
opacity: val/100
})
}
},
showAll(val) {
tile_layer.show = val
},
// needRefresh(val) {
// // 需要刷新
// if (val) {
// this.refreshAlarm()
// }
// },
showAlarm(val){
if(!val && this.currentWindow.windowType=='alarm'){
this.currentWindow.visible = false
}
alarm_layer.show = val
}
},
created() {
this.fetchWellType()
},
computed: {
handler() {
return new Cesium.ScreenSpaceEventHandler(window.map.scene.canvas)
}
},
methods: {
changetype(){
if(this.listQuery.wellType==='1'){ // 雨水
rain_point_layer.show = true
rain_point_layer1.show = true
sewage_point_layer.show = false
}else if(this.listQuery.wellType==='2'){ //污水
rain_point_layer.show = false
rain_point_layer1.show = false
sewage_point_layer.show = true
}else{
rain_point_layer.show = true
rain_point_layer1.show = true
sewage_point_layer.show = true
}
},
async initpoints() {
// 井
let params = ''
getMapping(params, this.listQuery.keywords).then(response => {
if (response.code === 200) {
if(well_model_layer!==null) window.map.removeLayer(well_model_layer)
well_model_layer = new mars3d.layer.GraphicLayer()
window.map.addLayer(well_model_layer)
for(let i=0;i<response.data.length;i++){
well_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
position: [response.data[i].longitude,response.data[i].latitude, 0],
style: {
url: '../static/model/ys.gltf',
scale: 2
},
popup: `供水井<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`,
}))
}
}
})
params = '13'
getMapping(params, this.listQuery.keywords).then(response => {
if (response.code === 200) {
if(watch_model_layer!==null) window.map.removeLayer(watch_model_layer)
watch_model_layer = new mars3d.layer.GraphicLayer()
window.map.addLayer(watch_model_layer)
if(watch_pic_layer!==null) window.map.removeLayer(watch_pic_layer)
watch_pic_layer = new mars3d.layer.GraphicLayer()
window.map.addLayer(watch_pic_layer)
for(let i=0;i<response.data.length;i++){
watch_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
position: [response.data[i].longitude,response.data[i].latitude, -0.5],
style: {
url: '../static/model/sb.glb',
scale: 2,
heading: 90
},
popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备模型：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
}))
watch_pic_layer.addGraphic( new mars3d.graphic.BillboardEntity({
id: response.data[i].devcode,
position: [response.data[i].longitude,response.data[i].latitude, 1],
style: {
image: '../static/images/icon/sb.png',
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3),
},
popup: `远程水表<br />设备编号：${response.data[i].devcode}<br />设备模型：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
}))
}
}
})
params = '8'
getMapping(params, this.listQuery.keywords).then(response => {
if (response.code === 200) {
if(zs_model_layer!==null) window.map.removeLayer(zs_model_layer)
zs_model_layer = new mars3d.layer.GraphicLayer()
window.map.addLayer(zs_model_layer)
if(zs_pic_layer!==null) window.map.removeLayer(zs_pic_layer)
zs_pic_layer = new mars3d.layer.GraphicLayer()
window.map.addLayer(zs_pic_layer)
for(let i=0;i<response.data.length;i++){
zs_model_layer.addGraphic(new mars3d.graphic.ModelPrimitive({
position: [response.data[i].longitude,response.data[i].latitude, 0],
style: {
url: '../static/model/zs.glb',
scale: 1,
heading: 90
},
popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备模型：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`,
}))
zs_pic_layer.addGraphic( new mars3d.graphic.BillboardEntity({
id: response.data[i].devcode,
position: [response.data[i].longitude,response.data[i].latitude, 1],
style: {
image: '../static/images/icon/zs.png',
scale: 1,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
scaleByDistance: new Cesium.NearFarScalar(10, 1, 2000, 0.3),
},
popup: `噪声记录仪<br />设备编号：${response.data[i].devcode}<br />设备模型：${response.data[i].modelName}<br />设备类型：${response.data[i].deviceTypeName}<br />井编号：${response.data[i].wellCode}<br />所属单位：${response.data[i].deptName}<br />详细位置：${response.data[i].position}`
}))
}
}
})
},
// 初始化放这里
// lat: 35.9, lng: 120.2384, alt: 10000, heading: 360, pitch: -45
async initmars3d() {
var mapOptions = {
scene: {
sceneMode: Cesium.SceneMode.SCENE2D,
// 默认视角参数
// center: { lat: 35.97, lng: 120.2384, alt: 2000, heading: 360, pitch: -45 },
// [120.24058441929344,35.99170047670947]
center: { lat: 35.991700, lng: 120.2405844, alt: 4000, heading: 360, pitch: -90 },
// 以下是Cesium.Globe对象相关参数
globe: {
depthTestAgainstTerrain: true, // 是否启用深度监测
baseColor: '#071a69', // 地球默认背景色
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 // 是否允许 地形相机的碰撞检测
}
},
control:{
infoBox: false,
sceneModePicker: 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"] },
]
},
// {
// pid: 10,
// id: 2011,
// name: "天地图",
// type: "group",
// layers: [
// {
// name: '行政区划界线',
// type: 'xyz',
// url: 'https://t{s}.tianditu.gov.cn/DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=9ae78c51a0a28f06444d541148496e36',
// subdomains: '01234567',
// maximumLevel: 10,
// show: true,
// id: 1,
// templateValues: {
// dataServer: 'http://data.marsgis.cn'
// },
// zIndex: 0
// },
// {
// name: '天地图注记',
// type: 'tdt',
// layer: 'img_z',
// key: ['9ae78c51a0a28f06444d541148496e36'],
// show: true,
// id: 2,
// // templateValues: {dataServer: 'http://data.marsgis.cn'},
// zIndex: 1
// }
// ]
// },
{
"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"] }
// ]
// },
// {
// crs: 'gcj',
// enablePickFeatures: false,
// icon: 'http://mars3d.cn/example/img/basemaps/bd-c-midnight.png',
// id: 2017,
// name: '蓝色底图(GCJ02偏移)',
// type: 'arcgis',
// url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer'
// }
],
}
// 创建三维地球场景
let 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]
let bloomEffect = new mars3d.effect.BloomEffect({
enabled: true
})
map.addEffect(bloomEffect)
window.map = map
underground = new mars3d.thing.Underground({
alpha: this.alpha/100,
})
map.addThing(underground)
window.map.basemap.opacity = this.alpha/100
// let that = this
// this.handler.setInputAction(function(movement) {
// if(window.map.level<19){
// ysline.show = true
// wsline.show = true
// }else{
// if(that.alpha<90){
// ysline.show = false
// wsline.show = false
// }
// }
// }, Cesium.ScreenSpaceEventType.WHEEL)
// lat: 35.9, lng: 120.2384,
let graphicLayer = new mars3d.layer.GraphicLayer()
map.addLayer(graphicLayer)
building = new mars3d.graphic.ModelPrimitive({
position: [120.242284, 35.983704, 0],
style: {
url: '../static/model/m1/m1.gltf',
scale: 1,
heading: 18.8,
opacity: this.alpha/100
}
})
graphicLayer.addGraphic(building)
building.show = false
var handler = new Cesium.ScreenSpaceEventHandler( map.viewer.canvas);
handler.setInputAction(function(evt) {
var cartesian=map.viewer.camera.pickEllipsoid(evt.position,map.viewer.scene.globe.ellipsoid);
var cartographic=Cesium.Cartographic.fromCartesian(cartesian);
var lng=Cesium.Math.toDegrees(cartographic.longitude);//经度值
var lat=Cesium.Math.toDegrees(cartographic.latitude);//纬度值
var mapPosition={x:lng,y:lat,z:cartographic.height};//cartographic.height的值始终为零。
console.log('['+lng+','+lat+'],')
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
axios.get('./static/position.json').then((result) => {
const positions = result.data.positions
flow = new mars3d.layer.GraphicLayer()
map.addLayer(flow)
street = new mars3d.layer.GraphicLayer()
map.addLayer(street)
for(let j=0;j<positions.length;j++){
flow.addGraphic(this.addFlow(positions[j].items,positions[j].repeat))
street.addGraphic(this.addStreet(positions[j].items))
}
flow.show = false
}).catch((error) => {
console.log('get position error...' + error)
})
// 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(tile_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)
// let wfsLayer = new mars3d.layer.ArcGisWfsLayer({
// name: '管线',//'污水管线',
// url: 'http://223.82.47.232:11408/arcgis/rest/services/qd/MapServer/0',
// minimumLevel: 19,
// symbol: {
// type: 'polylineVolumeP',
// styleOptions: {
// color: '#eb6b0c00',
// 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)
// 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(ysline)
// wsline = new mars3d.layer.ArcGisWfsLayer({
// name: '管线',
// url: 'http://223.82.47.232:11408/arcgis/rest/services/qd/MapServer/0',
// // maximumLevel: 19,
// enablePickFeatures: false,
// symbol: {
// type: 'polylineP',
// styleOptions: {
// color: '#eb6b0c',
// // radius: 0.1
// },
// },
// })
// map.addLayer(wsline)
this.initpoints()
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
}
})
},
addFlow(positions,repeat){
var style = {
width: 10,
material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
color: "#217bd9",
repeat: new Cesium.Cartesian2(repeat, 1),
image: '../static/images/line.png',
speed: 15
})
}
var graphic = new mars3d.graphic.PolylineEntity({
positions: positions,
style: style
})
return graphic
},
addStreet(positions){
var graphic = new mars3d.graphic.PolylineEntity({
positions: positions,
style: {
width: 8,
color: Cesium.Color.AQUA,
clampToGround: true
}
})
return graphic
},
randomPoint() {
//120.242, 35.98342
const jd = this.random(120.242 * 1000, 117.30 * 1000) / 1000
const wd = this.random(35.94342 * 1000, 35.98342 * 1000) / 1000
return new mars3d.LatLngPoint( wd, jd, 100)
},
random(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
},
flytoinit(){
if(window.map._viewer.scene._mode === Cesium.SceneMode.SCENE3D){
var center = { lat: 35.97, lng: 120.2384, alt: 2000, heading: 360, pitch: -45 }
}else{
var center = { lat: 35.991700, lng: 120.2405844, alt: 4000, heading: 360, pitch: -90 }
}
window.map.setCameraView(center)
},
// 获取全部井列表
getWellList() {
if(this.listQuery.keywords=== ''){
this.initpoints()
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
}
for (const alarm of response.data) {
// if()
}
// let str = "1 <> 1"
// var map = {};
// for (const alarm of response.data) {
// str += (" or 编号 = '" + alarm.wellCode + "'")
// map[alarm.wellCode] = alarm
// }
// if(alarm_layer!==null){
// window.map.removeLayer(alarm_layer)
// }
// 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}`
// }
// })
// window.map.addLayer(alarm_layer)
}
})
},
// 点击报警详情
openAlarmWindow(wellId, position) {
// 旧弹窗不显示
this.currentWindow.visible = false
// this.filterIcon()
getWellAlarms(wellId).then(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()
if(fly_layer!==null) window.map.removeLayer(fly_layer)
const wellId = row.wellCode
let str = "编号 = '" + wellId + "'"
fly_layer = null
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}
window.map.setCameraView(center)
}
}
})
window.map.addLayer(fly_layer)
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ .mars3d-popup-content {
margin: 20px;
line-height: 1.9;
font-size: 18px;
}
/deep/ .cesium-toolbar-button {
margin-top: 5px !important;
width: 48px !important;
height: 48px !important;
}
/depp/ span.cesium-sceneModePicker-wrapper {
margin: 0 50px !important;
}
/deep/ .mars3d-popup-close-button {
top: 10px;
right: 10px;
}
/deep/ .mars3d-popup{
margin-top: -40px;
}
/deep/ .mars3d-popup-content {
margin: 15px;
line-height: 1.5;
font-size: 16px;
}
/deep/ .mars3d-popup-content-wrapper {
box-shadow: 0 2px 6px #00192faa;
max-height: 1000px;
}
/deep/ .mars3d-popup-background {
background: #00192faa;
border-radius: 10px;
}
/deep/ .mars3d-popup-tip {
border-radius: 0px !important;
}
/deep/.mars3d-popup-close-button{
top: 10px;
}
@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;
left: 0px;
right: 10px;
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;
}
}
.cover{
position: absolute;
bottom: 3px;
left: 0px;
/*background-color: red;*/
background-color: #122252;
width: 130px;
height: 32px;
}
</style>
