<!--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 v-if="wellTypeList.length>1">
<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-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" @click="getWellList" size="small" style="margin-top: 2px">搜索</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-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=='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 id="trackPopUp" v-if="trackPopUp">
<div id="trackPopUpContent" class="leaflet-popup" :style="winPosition">
<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>
</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: 'Overview',
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'
])
},
mounted() {
this.init()
// 设置静态资源目录
buildModuleUrl.setBaseUrl('../static/Cesium/')
this.initcesium()
},
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) {
//查询结果展示
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) {
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
}
}
},
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>
