<!--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 >
<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 { 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){
// img_layer.alpha = val/100 //删
// ysline.alpha = val/100
// wsline.alpha = val/100
window.map.basemap.opacity = val/100
// this.tiles3dLayer.opacity = val/100 //删
underground.alpha = val/100
if(building !== null){
building.setStyle({
opacity: val/100
})
}
if(val<=90 && window.map.level>=19){
// window.map.scene.globe.show = false
// ysline.show = false
wsline.show = false
}else {
// window.map.scene.globe.show = true
// ysline.show = true
wsline.show = true
}
},
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(str) {
// 井
let params = ''
getMapping(params).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.5],
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).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({
position: [response.data[i].longitude,response.data[i].latitude, 2],
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),
}
}))
}
}
})
params = '8'
getMapping(params).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({
position: [response.data[i].longitude,response.data[i].latitude, 2],
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),
}
}))
}
}
})
},
// 初始化放这里
// lat: 35.9, lng: 120.2384, alt: 10000, heading: 360, pitch: -45
async initmars3d() {
var mapOptions = {
scene: {
// 默认视角参数
center: { lat: 35.97, lng: 120.2384, alt: 2000, heading: 360, pitch: -45 },
// 以下是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.242, 35.98342, 0],
style: {
url: '../static/model/m1/m1.gltf',
scale: 100,
heading: 19.9,
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)
const positions = [
{
items: [
[120.242408, 35.98488],
[120.241876, 35.983685],
[120.24072915103277,35.98401852183208],
[120.24066226767461,35.98386439467149],
[120.23799263362649,35.98465426248275],
[120.23801324833634,35.98469952646805],
[120.23639754918162,35.98518882140076],
[120.23539196559577,35.985544884160994],
[120.23587638750675,35.986629651642545],
[120.24134390543394,35.98501775509528],
[120.24141583868801,35.98518212509207],
[120.24241275344102,35.984888675335576],
],
repeat: [10,10,2,20,1,14,11,10,30,1,10]
},
{
items: [
[120.24050948131126,35.99887284279618],
[120.24047311802501,35.9988040758718],
[120.24000602145493,35.99892699977368],
[120.23981926929375,35.99852137416065],
[120.23915491144786,35.99872250579834],
[120.23853570540135,35.99733379774669],
[120.23837984743476,35.99738111443608],
[120.23674267613292,35.99368807570592],
[120.23703123073228,35.99359848590085],
[120.23498507485557,35.988981426163406],
[120.23495121044263,35.988852478046866],
[120.23493457581189,35.9887446388562],
[120.23500221125299,35.987278343711246],
[120.23525304463884,35.98721331037898],
[120.23518325934481,35.98704229365617],
[120.23569532569195,35.98688861729297],
[120.23561385795888,35.986706305124514],
[120.23587593489178,35.98662965676274],
],
repeat: [1,7,7,9,20,2,30,3,30,1,1,10,2,2,5,2,3]
},
{
items: [
[120.24586604717854,35.9979288558106],
[120.24136191661452,35.98781757224307],
[120.23671658435623,35.98916014759319],
[120.24077236277236,35.99825670802544],
[120.24310395160609,35.99777018563125],
[120.24313196084067,35.997824634672305],
[120.24551234623144,35.997126522319036],
],
repeat: [40,20,40,10,1,11]
},
{
items: [
[120.24170992858942,35.98509465063411],
[120.24174177004704,35.98516484469789],
[120.2360456729025,35.98684169734963],
[120.23670828292114,35.98832166053783],
[120.23780799338377,35.98799846637085],
[120.23778655706876,35.98795181125743],
[120.2379543649098,35.98790209781134],
[120.23797661371773,35.9879519585988],
[120.24217379986901,35.986717607932476],
[120.24220811458672,35.9867948264816],
[120.24313969751755,35.98651998174397],
[120.24340083435202,35.98710486726242],
[120.24340295539514,35.98711126290699],
[120.24339356799801,35.98712624257708],
[120.24339092481978,35.98712945855344],
[120.24115838881968,35.98778723408122],
[120.2411924668591,35.9878636130951]
],
repeat: [1,25,10,5,1,1,1,20,1,5,4,1,1,1,10,1]
},
{
items: [
[120.24174182594587,35.985164810464816],
[120.24180405689097,35.98514607719034],
[120.24191425728681,35.985388547867004],
[120.24187060946714,35.985401287823926],
[120.24192547998754,35.98552592281015],
[120.24146580657525,35.98566151118688],
[120.2414517838353,35.985689541502474],
[120.24124032536692,35.98575200176583],
[120.24120636806991,35.98574035544765],
[120.24104630737101,35.98578670003935],
[120.24102833122576,35.98581455603924],
[120.23901824229428,35.986405444325726],
[120.23898612720811,35.98639331565721],
[120.23882243311812,35.986441060148216],
[120.23880438027373,35.98646744258787],
[120.23621468727883,35.987233051787086],
],
repeat: [1,2,1,1,3,1,1,1,1,1,10,1,1,1,10]
},
{
items: [
[120.24021438720284,35.99701214436618],
[120.24050170623165,35.99693341577263],
[120.24051205401405,35.996956176259914],
[120.2413187462009,35.996717810278284],
[120.24130817477375,35.99669208098823],
[120.24440953240583,35.99578117928951],
],
repeat: [2,1,6,1,15]
},
{
items: [
[120.23816718389176,35.988738223877995],
[120.23929242395654,35.9912679977301],
],
repeat: [10]
},
{
items: [
[120.23784732551125,35.99170101357662],
[120.23937596388129,35.99124337617866],
[120.23938607335027,35.991266123969915],
[120.24249177080193,35.99034966146303],
],
repeat: [8,1,12]
},
{
items: [
[120.23920119321177,35.99472848102488],
[120.24363465322824,35.99342478987712],
],
repeat: [20]
},
{
items: [
[120.23875388051115,35.993727853651976],
[120.24300125355681,35.992474097571474],
],
repeat: [20]
},
{
items: [
[120.2391698326201,35.99360344192165],
[120.23883486702462,35.992849553442106],
[120.24277278207323,35.99168649112981],
],
repeat: [5,20]
},
]
flow = new mars3d.layer.GraphicLayer()
map.addLayer(flow)
street = new mars3d.layer.GraphicLayer()
map.addLayer(street)
for(let j=0;j<positions.length;j++){
for(let i=0;i<positions[j].items.length-1;i++){
let arr = []
arr.push(positions[j].items[i])
arr.push(positions[j].items[i+1])
flow.addGraphic(this.addFlow(arr,positions[j].repeat[i]))
street.addGraphic(this.addStreet(arr,positions[j].repeat[i]))
}
}
flow.show = false
// 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: '#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)
// 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("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
}
})
},
addFlow(positions,repeat){
var style = {
width: 15,
material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.LineFlow, {
color: '#ff3426',
repeat: new Cesium.Cartesian2(repeat, 1),
image: '../static/images/line.png',
speed: 25
})
}
var graphic = new mars3d.graphic.PolylineEntity({
positions: positions,
style: style
})
return graphic
},
addStreet(positions,repeat){
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(){
var center = { lat: 35.97, lng: 120.2384, alt: 2000, heading: 360, pitch: -45 }
window.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(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: 120px;
height: 28px;
}
</style>
