<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 v-if="wellTypeList.length>1">
<el-select v-model="listQuery.wellType" placeholder="选择井类型" clearable size="small" @change="changetype">
<el-option
v-for="item in wellTypeList"
:key="'welltype_'+item.value"
:label="item.name"
:value="item.value"/>
</el-select>
</el-form-item>
<!--<el-form-item>-->
<!--<dept-select ref="deptSelect" v-model="listQuery.deptid" :need-top="deptShowTop" dept-type="03" placeholder="选择权属单位" size="small"/>-->
<!--</el-form-item>-->
<el-button class="filter-item" type="primary" icon="el-icon-search" size="small" style="margin-top: 2px" @click="getWellList">搜索</el-button>
<!--<el-button v-show="showClearBtn" class="filter-item" @click="clearSearch">清除查询</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-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=='clock'" class="refresh-div">-->
<!--<span class="font-red">{{ count }}</span> s后刷新<i class="el-icon-refresh" @click="refreshAlarm"/>-->
<!--<el-button :type="showAlarm?'danger':'info'" icon="el-icon-bell" circle @click="showAlarm=!showAlarm"/>-->
<!--</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 && alarmWells.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 class="overview-map-container">
<!--地图-->
<div id="cesiumContainer" class="map-demo">
<div v-if="trackPopUp" id="trackPopUp">
<div id="trackPopUpContent" :style="winPosition" class="leaflet-popup">
<el-button type="text" class="leaflet-popup-close-button" href="#" @click="closeInfoWindow">×</el-button>
<div class="leaflet-popup-content-wrapper">
<div id="trackPopUpLink" class="leaflet-popup-content" style="width: 240px;">
<div v-if="currentWindow.windowType=='pipeline'?true:false" class="info-window">
<div class="info-header">{{ pipelineInfo.Handle }}</div>
<div class="info-body">
<div>FID：{{ pipelineInfo.FID }}</div>
<div>D_Type：{{ pipelineInfo.D_Type }}</div>
<div>Diameter：{{ pipelineInfo.Diameter }}</div>
<div>Material：{{ pipelineInfo.Material }}</div>
<div>Memo：{{ pipelineInfo.Memo }}</div>
<div>Use_Years：{{ pipelineInfo.Use_Years }}</div>
<div>x1：{{ pipelineInfo.x1 }} / y1：{{ pipelineInfo.y1 }}</div>
<div>x2：{{ pipelineInfo.x2 }} / y2：{{ pipelineInfo.y2 }}</div>
<div>Deep1：{{ pipelineInfo.Deep1 }} / Deep2：{{ pipelineInfo.Deep2 }}</div>
<div>H1：{{ pipelineInfo.H1 }} / H2：{{ pipelineInfo.H2 }}</div>
</div>
</div>
<div v-if="currentWindow.windowType=='info'?true:false" class="info-window">
<div class="info-header">{{ wellInfo.wellCode }}</div>
<div class="info-body">
<div>井类型：{{ wellInfo.wellTypeName }}</div>
<div>权属单位：{{ wellInfo.deptName }}</div>
<div>详细地址：{{ wellInfo.position }}</div>
</div>
</div>
<div v-if="currentWindow.windowType=='alarm'?true:false" class="alarm-window">
<div class="alarm-header">
<svg-icon icon-class="alarm-red" />
{{ alarmInfo.wellCode }}
</div>
<div class="alarm-body">
<div v-for="alarm in alarmInfo.alarms" :key="alarm.id">
<div>告警原因：<span class="alarm-red">{{ alarm.alarmContent }}</span></div>
<div>设备编号：<span>{{ alarm.devcode }}</span></div>
</div>
<el-divider/>
<div>井类型：{{ alarmInfo.wellTypeName }}</div>
<div>权属单位：{{ alarmInfo.deptName }}</div>
<div>详细地址：{{ alarmInfo.position }}</div>
</div>
</div>
</div>
</div>
<div class="leaflet-popup-tip-container">
<div class="leaflet-popup-tip"/>
</div>
</div>
</div>
</div>
</div>
</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 Viewer from 'cesium/Source/Widgets/Viewer/Viewer' // 导入Cesium源码中的Viewer组件，注意这里是用的Viewer组件的方式加载，而不是加载整个Cesium
import buildModuleUrl from 'cesium/Source/Core/buildModuleUrl' // 让Cesium知道静态资源在哪里的API
import 'cesium/Source/Widgets/widgets.css'// 导入必须的样式表
var Cesium = require('../../../node_modules/cesium/Source/Cesium')
var rectangle = null
var building = null
var entities = []
var alarmIcons = []
var typeList = []
export default {
name: 'OverviewBj',
components: { DeptSelect, SelectTree },
data() {
return {
// rectangle: null,
// building: null,
// viewer: null,
type: 'massMarkers', // 加载数据方式：massMarkers或cluster
refreshType: 'clock', // 刷新数据方式：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显示平面
commonIcon: 'well-common-green', // 通用图标 绿
commonIconAlarm: 'well-common-red', // 通用图标 红
center: [this.$store.getters.lng, this.$store.getters.lat], // 地图中心
zoom: 12, // 地图缩放比例
markers: [], // 所有井的点原始数据
alarmListOri: [], // 原始报警列表
alarmList: [], // 报警列表
alarmWells: [], // 报警井列表
offset: [-10, -10], // 偏移量
alarmOffset: [-15, -30], // 偏移量
winPosition: '',
wellInfo: {
wellCode: '',
position: '',
wellTypeName: '',
deptName: '',
bfztName: '',
deep: ''
}, // 显示井详细信息气泡内容
pipelineInfo: {
Build_Com: '',
Build_Date: '',
Build_Per: '',
Cable_Type: '',
Code: '',
D_Type: '',
Deep1: '',
Deep2: '',
Design_Com: '',
Design_Per: '',
Diameter: '',
FID: '',
H1: '',
H2: '',
Handle: '',
Material: '',
Memo: '',
Mon_Com: '',
Mon_Per: '',
Shape: '',
Street: '',
Top_H1: '',
Top_H2: '',
Use_Years: '',
x1: '',
x2: '',
y1: '',
y2: ''
}, // 显示井详细信息气泡内容
alarmInfo: {
wellCode: '',
deptName: '',
position: '',
deep: '',
alarms: []
}, // 显示报警详情气泡内容
currentWindow: {
visible: false, // 窗体显示与否
position: [this.$store.getters.lng, this.$store.getters.lat],
windowType: 'info' // 窗体类型：详情info或报警alarm
}, // 当前窗体属性
infoWindowClass: 'nomal-info-window',
deptShowTop: false, // 是否显示顶级
clock: null, // 计时器
hasAlarm: false, // 是否有报警,
loading: true, // 加载图标是否显示
trackPopUp: false,
removeHandler: null,
provider: null,
provider_marker: null,
promise_marker: null,
showClearBtn: false // 是否显示清除查询按钮
}
},
computed: {
...mapGetters([
'needRefresh'
])
},
watch: {
alpha(val) {
window.viewer.imageryLayers._layers.forEach(layer => {
layer.alpha = val / 100 // 我们可以设置为0
})
// console.log(this.building)
if (building !== null) {
building.color.alpha = val / 100
}
},
showAll(val) {
console.log(typeList[1])
if (val) { // 显示全部
for (var i = 0; i < typeList.length; i++) {
typeList[i].show = true
}
} else { // 仅显示报警
for (var i = 0; i < typeList.length; i++) {
typeList[i].show = false
}
this.changetype()
}
},
'provider.ready': {
handler: function() {
if (this.provider.ready) {
var promise = this.provider.pickFeatures(842, 142, 0, 2.029164431539006, 0.6965965212763974)
var that = this
Cesium.when(promise, function(layerInfo) {
console.log(layerInfo)
// 查询结果展示
if (layerInfo && layerInfo.length > 0) {
for (var i = 0; i < layerInfo.length; i++) {
var item = layerInfo[i].data.geometry.paths[0]
var d1 = parseFloat(layerInfo[i].data.attributes.Deep1)
var d2 = parseFloat(layerInfo[i].data.attributes.Deep2)
var pos = [
item[0][0], item[0][1], -d1,
item[1][0], item[1][1], -d2
]
var color = Cesium.Color.YELLOW
if (layerInfo[i].data.attributes.备注 === 'DXGX') {
color = Cesium.Color.BLUE
} else if (layerInfo[i].data.attributes.备注 === 'GSGX') {
color = Cesium.Color.STEELBLUE
} else if (layerInfo[i].data.attributes.备注 === 'GDGX') {
color = Cesium.Color.ORANGE
} else if (layerInfo[i].data.attributes.备注 === 'LDGX') {
color = Cesium.Color.PALEGOLDENROD
} else if (layerInfo[i].data.attributes.备注 === 'RQGX') {
color = Cesium.Color.RED
} else if (layerInfo[i].data.attributes.备注 === 'RLGX') {
color = Cesium.Color.BROWN
} else if (layerInfo[i].data.attributes.备注 === 'WSGX') {
color = Cesium.Color.GRAY
} else if (layerInfo[i].data.attributes.备注 === 'YSGX') {
color = Cesium.Color.DODGERBLUE
}
if (pos[0] === pos[3] && pos[1] === pos[4]) {
var d = d1 < d2 ? d1 : d2
var entity = window.viewer.entities.add({
name: 'pipeline',
description: layerInfo[i].data.attributes,
position: Cesium.Cartesian3.fromDegrees(pos[0], pos[1], -(d1 + d2) / 2),
cylinder: {
length: Math.abs(d2 - d1),
topRadius: layerInfo[i].data.attributes.Diameter / 1000, // 圆柱体的顶部半径。
bottomRadius: layerInfo[i].data.attributes.Diameter / 1000, // 圆柱体底部的半径。
material: color
}})
} else {
var entity = window.viewer.entities.add({
name: 'pipeline',
description: layerInfo[i].data.attributes,
polylineVolume: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(pos),
shape: that.computeCircle(layerInfo[i].data.attributes.Diameter / 1000),
material: color
}})
}
}
}
})
}
}
},
'provider_marker.ready': {
handler: function() {
if (this.provider_marker.ready) {
this.promise_marker = this.provider_marker.pickFeatures(842, 142, 0, 2.029164431539006, 0.6965965212763974)
var that = this
Cesium.when(this.promise_marker, function(layerInfo) {
// 查询结果展示
if (layerInfo && layerInfo.length > 0) {
console.log(layerInfo)
for (var i = 0; i < layerInfo.length; i++) {
var center = new Cesium.Cartesian3.fromDegrees(layerInfo[i].data.geometry.x, layerInfo[i].data.geometry.y, -parseFloat(layerInfo[i].data.attributes.井深) + 2.5)
var matrix = Cesium.Transforms.eastNorthUpToFixedFrame(center)
var icon = window.viewer.scene.primitives.add(
Cesium.Model.fromGltf({
id: {
id: layerInfo[i].data.attributes.编号,
position: [layerInfo[i].data.geometry.x, layerInfo[i].data.geometry.y, -parseFloat(layerInfo[i].data.attributes.井深) + 2.5]
},
url: '../static/model/baojing.gltf',
color: Cesium.Color.fromAlpha(Cesium.Color.RED, parseFloat(1.0)), // 包含透明度的颜色
scale: 1,
minimumPixelSize: 50,
maximumScale: 2,
colorBlendMode: Cesium.ColorBlendMode['MIX'], // 常用的有三个HIGHLIGHT,REPLACE,MIX
colorBlendAmount: 0.1, // 这个属性必须是MIX混合属性才能生效,见colorBlendMode
modelMatrix: matrix,
allowPicking: true,
show: false
})
)
icon.show = false
alarmIcons.push(icon)
var color = Cesium.Color.YELLOW
if (layerInfo[i].data.attributes.备注.startsWith('DX')) {
color = Cesium.Color.BLUE
} else if (layerInfo[i].data.attributes.备注.startsWith('GS')) {
color = Cesium.Color.STEELBLUE
} else if (layerInfo[i].data.attributes.备注.startsWith('GD')) {
color = Cesium.Color.ORANGE
} else if (layerInfo[i].data.attributes.备注.startsWith('LD')) {
color = Cesium.Color.PALEGOLDENROD
} else if (layerInfo[i].data.attributes.备注.startsWith('RQ')) {
color = Cesium.Color.RED
} else if (layerInfo[i].data.attributes.备注.startsWith('RL')) {
color = Cesium.Color.BROWN
} else if (layerInfo[i].data.attributes.备注.startsWith('WS')) {
color = Cesium.Color.GRAY
} else if (layerInfo[i].data.attributes.备注.startsWith('YS')) {
color = Cesium.Color.DODGERBLUE
}
var type = window.viewer.entities.add({
name: layerInfo[i].data.attributes.备注,
position: Cesium.Cartesian3.fromDegrees(layerInfo[i].data.geometry.x, layerInfo[i].data.geometry.y, -parseFloat(layerInfo[i].data.attributes.井深) + 1.5),
point: {
color: color,
pixelSize: 10,
outlineColor: Cesium.Color.WHITE,
outlineWidth: 2,
disableDepthTestDistance: Number.POSITIVE_INFINITY
}
})
type.show = false
typeList.push(type)
center = new Cesium.Cartesian3.fromDegrees(layerInfo[i].data.geometry.x, layerInfo[i].data.geometry.y, -parseFloat(layerInfo[i].data.attributes.井深))
matrix = Cesium.Transforms.eastNorthUpToFixedFrame(center)
var item = window.viewer.scene.primitives.add(
Cesium.Model.fromGltf({
id: {
id: layerInfo[i].data.attributes.编号,
position: [layerInfo[i].data.geometry.x, layerInfo[i].data.geometry.y, -parseFloat(layerInfo[i].data.attributes.井深)]
},
url: '../static/model/yubi.gltf',
scale: 2,
modelMatrix: matrix,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 1000),
allowPicking: true
})
)
entities.push(item)
}
that.getWellList()
}
})
}
}
},
needRefresh(val) {
// 需要刷新
if (val) {
this.playAudio()
this.refreshAlarm()
}
},
showAlarm(val) {
if (!val && this.currentWindow.windowType == 'alarm') {
this.currentWindow.visible = false
}
}
},
mounted() {
this.init()
// 设置静态资源目录
buildModuleUrl.setBaseUrl('../static/Cesium/')
this.initcesium()
},
created() {
this.fetchWellType()
},
methods: {
changetype() {
var str = '3333'
if (this.listQuery.wellType !== '' && this.showAll) {
this.showAll = false
}
if (this.listQuery.wellType === '8') {
str = 'DX'
} else if (this.listQuery.wellType === '10') {
str = 'GS'
} else if (this.listQuery.wellType === '5') {
str = 'GD'
} else if (this.listQuery.wellType === '7') {
str = 'LD'
} else if (this.listQuery.wellType === '3') {
str = 'RQ'
} else if (this.listQuery.wellType === '4') {
str = 'RL'
} else if (this.listQuery.wellType === '2') {
str = 'WS'
} else if (this.listQuery.wellType === '1') {
str = 'YS'
}
for (var i = 0; i < typeList.length; i++) {
if (typeList[i].name.startsWith(str)) {
typeList[i].show = true
} else {
typeList[i].show = false
}
}
},
computeCircle(radius) {
var positions = []
for (var i = 0; i < 360; i++) {
var radians = Cesium.Math.toRadians(i)
positions.push(
new Cesium.Cartesian2(
radius * Math.cos(radians),
radius * Math.sin(radians)
)
)
}
return positions
},
// 初始化放这里
initcesium() {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0N2E2M2ZmYi1iMDhjLTQwN2QtODZmOC0zNDZjNTMxYjgyNWEiLCJpZCI6MzY5MDMsImlhdCI6MTYwNzMzMTE2Nn0.5xsFCB0dxpcNGUkJOEpsVhUW9bf66XZIwV3hkZl09UI'
// var myTerrain = Cesium.createWorldTerrain({
// requestVertexNormals : true,
// requestWaterMask: true,
// name: 'terrain'
// })
// myTerrain = null
// 创建viewer实例
window.viewer = new Viewer('cesiumContainer',
{
geocoder: false, // 是否显示地名查找控件
infoBox: false,
animation: false, // 是否显示动画控件(左下方那个)
timeline: false, // 是否显示时间线控件
shadows: false, // 阴影是否被太阳投射
showldAnimate: true, // 让场景中的动画自动播放
sceneModePicker: false, // 是否显示投影方式控件
fullscreenButton: false, // 全屏按钮不显示
homeButton: false,
navigationHelpButton: false, // 帮助按钮
baseLayerPicker: false
// terrainProvider : myTerrain
})
window.viewer.imageryLayers._layers[0].show = false
window.viewer.scene.globe.baseColor = Cesium.Color.WHITE
var that = this
window.viewer.imageryLayers.addImageryProvider(new Cesium.TileMapServiceImageryProvider({
url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
// name: 'baselayer'
}))
window.viewer._cesiumWidget._creditContainer.style.display = 'none' // 去除版权信息
window.viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({ // 调用影响中文注记服务
url: 'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=216ee92889e17ab1b083fae665d522b8',
layer: 'tdtAnnoLayer',
style: 'default',
format: 'image/jpeg',
tileMatrixSetID: 'GoogleMapsCompatible'
// name: 'baselayer'
}))
window.viewer.scene.screenSpaceCameraController.enableCollisionDetection = false
// 倾斜视图 鼠标右键旋转
window.viewer.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
// 缩放设置 重新设置缩放成员
window.viewer.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
// 鼠标左键平移
window.viewer.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
var instance = new Cesium.GeometryInstance({
geometry: new Cesium.RectangleGeometry({
rectangle: Cesium.Rectangle.fromDegrees(116.2595, 39.9065, 116.2647, 39.908967),
height: 0,
vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEXT_FORMAT
})
})
window.viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances: instance,
allowPicking: false,
appearance: new Cesium.EllipsoidSurfaceAppearance({
material: Cesium.Material.fromType('Color', {
color: new Cesium.Color(1.0, 1.0, 1.0, 0.2)
})
})
}))
// rectangle= window.viewer.entities.add({
// name: 'under',
// polyline : {
// positions : Cesium.Cartesian3.fromDegreesArray([116.2595, 39.9065,
// 116.2647, 39.9065,
// 116.2647, 39.908967,
// 116.2595, 39.908967,
// 116.2595, 39.9065]),
// width : 10,
// clampToGround: true,
// zIndex: 50,
// material : Cesium.Color.RED
// }});
// window.viewer.flyTo(rectangle)
rectangle = window.viewer.entities.add({
name: 'under',
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([
116.2595, 39.9065,
116.2647, 39.9065,
116.2647, 39.908967,
116.2595, 39.908967,
116.2595, 39.9065]),
width: 10,
clampToGround: true,
zIndex: 50,
material: Cesium.Color.RED
}})
window.viewer.flyTo(rectangle, {
offset: {
heading: 0,
pitch: Cesium.Math.toRadians(-90),
range: 500
}})
var that = this
var center = new Cesium.Cartesian3.fromDegrees(116.2555, 39.908358, 6)
var matrix = Cesium.Transforms.eastNorthUpToFixedFrame(center)
that.provider = new Cesium.ArcGisMapServerImageryProvider({
url: 'http://111.198.10.15:13002/arcgis/rest/services/erMapService/MapServer',
layers: ['7', '8', '9', '10', '11', '12', '13', '14']
})
that.provider_marker = new Cesium.ArcGisMapServerImageryProvider({
url: 'http://111.198.10.15:13002/arcgis/rest/services/erMapService/MapServer',
layers: ['5', '6']
})
window.viewer.scene.primitives.add(
Cesium.Model.fromGltf({
url: '../static/model/building.gltf',
scale: 0.8,
modelMatrix: matrix,
allowPicking: false
})
).readyPromise.then(e => {
building = e
}).otherwise(e => {
})
var handler = new Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas)
handler.setInputAction(function(movement) {
var pick = window.viewer.scene.pick(movement['position'])
if (Cesium.defined(pick) && (pick.id.name !== 'under')) {
// 点击管线
if (pick.id.name === 'pipeline') {
that.trackPopUp = false
that.pipelineInfo = pick.id.description._value
that.currentWindow.visible = true
that.currentWindow.windowType = 'pipeline'
that.trackPopUp = true
movement['position'].z = 3000.0
var cartographic = Cesium.Cartographic.fromCartesian(movement['position'])
var point = [cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180]
var destination = Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0)
var id = pick.id._id.replace(/[^0-9]/ig, '')
var obj = { position: movement['position'], destination: destination }
that.infoWindow(obj)
}
// 点击报警
else if (pick.primitive.basePath === '../static/model/baojing.gltf') {
var position = Cesium.Cartesian3.fromDegrees(pick.id.position[0], pick.id.position[1], pick.id.position[2])
var c = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, position) // 返回Cartesian2
console.log(c)
if (c === undefined) {
return
}
var obj = { position: c, entity: pick }
that.infoAlarmWindow(obj)
getWellByCode(pick.id.id).then(response => {
var id = response.data.id
if (id) {
that.openAlarmWindow(id, position)
}
})
}
// 点击井
else if (pick.primitive.basePath === '../static/model/yubi.gltf') {
that.trackPopUp = false
getWellByCode(pick.id.id).then(response => {
console.log(response)
var id = response.data.id
if (id) {
that.openInfoWindow(id)
}
})
movement['position'].z = 3000.0
var cartographic = Cesium.Cartographic.fromCartesian(movement['position'])
var point = [cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180]
var destination = Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0)
var obj = { position: movement['position'], destination: destination }
that.infoWellWindow(obj)
}
} else {
that.closeInfoWindow()
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK)
},
positionPopUp(c) {
try {
if (c === undefined) {
this.trackPopUp = false
if (this.removeHandler !== null) {
this.removeHandler.call()
}
return
}
var x = c.x - 130
var y = c.y - 150
this.winPosition = 'transform: translate3d(' + x + 'px, ' + y + 'px, 0)'
} catch (e) {
this.trackPopUp = false
if (this.removeHandler !== null) {
this.removeHandler.call()
}
}
},
infoWindow(obj) {
if (obj.position === undefined) {
return
}
var picked = window.viewer.scene.pick(obj.position)
if (Cesium.defined(picked)) {
var id = Cesium.defaultValue(picked.id, picked.primitive.id)
if (id instanceof Cesium.Entity) {
var c = new Cesium.Cartesian2(obj.position.x, obj.position.y)
this.positionPopUp(c) // Initial position
var that = this
if (this.removeHandler !== null) {
this.removeHandler.call()
}
this.removeHandler = window.viewer.scene.postRender.addEventListener(function() {
if (picked.id._polyline != null) {
var pos = {}
pos.x = (id._polyline._positions._value['0'].x + id._polyline._positions._value[1].x) / 2
pos.y = (id._polyline._positions._value['0'].y + id._polyline._positions._value[1].y) / 2
pos.z = (id._polyline._positions._value['0'].z + id._polyline._positions._value[1].z) / 2
var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, pos)
} else if (picked.id._polylineVolume != null) {
var pos = {}
pos.x = (id._polylineVolume._positions._value['0'].x + id._polylineVolume._positions._value[1].x) / 2
pos.y = (id._polylineVolume._positions._value['0'].y + id._polylineVolume._positions._value[1].y) / 2
pos.z = (id._polylineVolume._positions._value['0'].z + id._polylineVolume._positions._value[1].z) / 2
var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, pos)
if (changedC === undefined) {
return
}
changedC.y -= 170
} else {
var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, id._position._value)
}
if (changedC === undefined) {
return
}
if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
that.positionPopUp(changedC)
c = changedC
}
})
return id
}
}
},
infoWellWindow(obj) {
if (obj.position === undefined) {
return
}
var picked = window.viewer.scene.pick(obj.position)
if (Cesium.defined(picked)) {
console.log(picked instanceof Cesium.Primitive)
var c = new Cesium.Cartesian2(obj.position.x, obj.position.y)
this.positionPopUp(c) // Initial position
var that = this
if (this.removeHandler !== null) {
this.removeHandler.call()
}
this.removeHandler = window.viewer.scene.postRender.addEventListener(function() {
var position = Cesium.Cartesian3.fromDegrees(picked.id.position[0], picked.id.position[1], picked.id.position[2])
var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, position)
if (changedC === undefined) {
return
}
if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
that.positionPopUp(changedC)
c = changedC
}
})
}
},
infoAlarmWindow(obj) {
var picked = obj.entity
if (Cesium.defined(picked)) {
var c = obj.position
c.y -= 150
this.positionPopUp(c) // Initial position
var that = this
if (this.removeHandler !== null) {
this.removeHandler.call()
}
this.removeHandler = window.viewer.scene.postRender.addEventListener(function() {
var position = Cesium.Cartesian3.fromDegrees(picked.id.position[0], picked.id.position[1], picked.id.position[2])
var changedC = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, position)
if (changedC === undefined) {
return
}
changedC.y -= 150
if ((c.x !== changedC.x) || (c.y !== changedC.y)) {
that.positionPopUp(changedC)
c = changedC
}
})
}
},
closeInfoWindow() {
this.trackPopUp = false
if (this.removeHandler !== null) {
this.removeHandler.call()
}
},
init() {
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() {
// if(rectangle!==null){
// window.viewer.flyTo(rectangle)
// }
window.viewer.flyTo(rectangle, {
offset: {
heading: 0,
pitch: Cesium.Math.toRadians(-90),
range: 500
}})
},
// 获取全部井列表
getWellList() {
this.loading = true
console.log('getWellList')
getWellList(this.listQuery).then(response => {
this.loading = false
if (response.code === 200) {
this.markers = response.data
if (entities.length >= 0) {
for (var i = 0; i < entities.length; i++) {
alarmIcons[i].show = false
for (var j = 0; j < this.markers.length; j++) {
if (this.markers[j].wellCode === entities[i].id.id) {
alarmIcons[i].show = true
break
}
}
}
}
}
})
},
// 点击井详情气泡
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() {
console.log('refreshAlarm')
this.count = 60
this.loading = true
getAlarmsNow().then(response => {
if (response.code === 200) {
this.loading = false
// 获取当前报警列表
this.alarmListOri = response.data // 列表原始
this.alarmList = response.data
if (this.alarmList.length > 0) {
this.hasAlarm = true
}
this.alarmWells = []
for (const alarm of response.data) {
this.alarmWells.push({
wellCode: alarm.wellCode,
wellId: alarm.wellId,
position: [alarm.lngGaode, alarm.latGaode],
positionInfo: alarm.position,
visible: true
})
// }
}
}
})
},
// 点击报警详情
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) {
console.log('alarmRowClick')
console.log(row)
const wellId = row.wellCode
for (const alarmWell of alarmIcons) {
if (alarmWell.id.id === wellId) {
window.viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(alarmWell.id.position[0], alarmWell.id.position[1], alarmWell.id.position[2] + 2.5),
orientation: {
heading: Cesium.Math.toRadians(0),
pitch: Cesium.Math.toRadians(-90),
range: 18
}
})
// window.viewer.flyTo(alarmWell,{
// offset : {
// heading : Cesium.Math.toRadians(0.0),
// pitch : Cesium.Math.toRadians(-18),
// range : 18
// }})
var position = Cesium.Cartesian3.fromDegrees(alarmWell.id.position[0], alarmWell.id.position[1], alarmWell.id.position[2])
var c = Cesium.SceneTransforms.wgs84ToWindowCoordinates(window.viewer.scene, position) // 返回Cartesian2
if (c === undefined) {
return
}
var obj = { position: c, entity: alarmWell }
this.infoAlarmWindow(obj)
console.log(row.wellId)
// getWellByCode(alarmWell.id.id).then(response => {
// var id = response.data.id
// if(id){
// that.openAlarmWindow(id, position)
// }
// })
this.openAlarmWindow(row.wellId, position)
}
}
},
// 获取当前deptid的所有下级id,仅最多支持3级
fetchDeptList(deptid) {
console.log('fetchDeptList')
const deptids = [deptid] // 储存了该pid和其子集
const deptlist = this.$refs.deptSelect.fetchDeptTree()
for (const dept of deptlist) {
if (dept.pid === deptid) {
deptids.push(dept.id)
}
}
const result = []
// 查找所有列表中有没有deptids里面的本人或子集
if (deptlist.length > 0) {
for (const dept of deptlist) {
if (deptids.indexOf(dept.id) !== -1) {
result.push(dept.id)
} else if (deptids.indexOf(dept.pid) !== -1) {
result.push(dept.id)
}
}
}
console.log(result)
return result
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
@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: 504px;
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;
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;
}
}
// 地图
.overview-map-container{
width: 100%;
padding: 0px;
z-index: 11111;
.map-demo{
z-index: 11111;
width: 100%;
height: calc(100vh - 146px);
.svg-icon{
width: 20px;
height: 20px;
}
.alarm-icon{
width: 29px;
height: 30px;
}
.nomal-info-window{
background-color: pink;
}
/*leaflet风格气泡窗口样式模板*/
.leaflet-popup {
z-index: 999;
position: absolute;
text-align: center;
}
.leaflet-popup-close-button {
position: absolute;
top: 0;
right: 0;
padding: 4px 4px 0 0;
text-align: center;
width: 18px;
height: 14px;
font: 16px/14px Tahoma, Verdana, sans-serif;
color: #c3c3c3;
text-decoration: none;
font-weight: bold;
background: transparent;
}
.leaflet-popup-content-wrapper {
text-align: center;
/*max-height: 200px;*/
overflow-y: auto;
background: white;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
padding: 1px;
text-align: left;
border-radius: 12px;
}
.leaflet-popup-content {
z-index: 99999;
/*height: 200px;*/
margin: 10px 10px;
/*line-height: 1.4;*/
.info-window{
z-index: 100001;
max-width: 260px;
min-width:200px;
.info-header{
padding: 5px 8px 0px 8px;
line-height: 30px;
font-weight: bold;
}
.info-body{
padding: 5px 10px 10px 10px;
line-height: 23px;
font-size: 14px;
}
}
.alarm-window{
z-index: 100002;
max-width: 250px;
.alarm-header {
padding: 5px 8px 0px 8px;
line-height: 30px;
color: red;
font-weight: bold;
}
.alarm-body{
padding: 5px 10px 10px 10px;
line-height: 23px;
font-size: 14px;
.alarm-red{
color: #ff0000;
}
}
}
}
.leaflet-popup-tip-container {
margin: 0 auto;
width: 200px;
height: 100px;
position: relative;
overflow: hidden;
}
.leaflet-popup-tip {
background: white;
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
width: 17px;
height: 17px;
padding: 1px;
margin: -10px auto 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
}
}
.el-divider--horizontal{
margin: 5px 0;
}
/*按钮样式*/
.add-button{
}
</style>
