fix:改变模型方向
This commit is contained in:
parent
824f0cd6bc
commit
46742f99b4
|
|
@ -1,14 +1,31 @@
|
|||
|
||||
<template>
|
||||
<div style="width: 100%; height: 100%;">
|
||||
<div id="cesiumContainer" style="width: 100%;height: 100%;"></div>
|
||||
<div style="width: 100%; height: 100%">
|
||||
<div id="cesiumContainer" style="width: 100%; height: 100%"></div>
|
||||
<div v-show="activeIndex == 0" class="btns_enp">
|
||||
<div style="position: relative;">
|
||||
<div style="position: relative">
|
||||
<div class="btns" @click="showChange(1)">生产设备</div>
|
||||
<div class="bottomMenu bottomMenu1" @mouseleave="handleMouseLeave(1)">
|
||||
<el-checkbox class="bottomMenu_item" v-model="eq_big" label="大型生产设备" @change="checkboxChange('eq_big')"/>
|
||||
<el-checkbox class="bottomMenu_item" v-model="eq_main" label="主要生产设备" @change="checkboxChange('eq_main')"/>
|
||||
<el-checkbox class="bottomMenu_item" v-model="eq_trans" label="输送设备" @change="checkboxChange('eq_trans')"/>
|
||||
<div
|
||||
class="bottomMenu bottomMenu1"
|
||||
@mouseleave="handleMouseLeave(1)"
|
||||
>
|
||||
<el-checkbox
|
||||
class="bottomMenu_item"
|
||||
v-model="eq_big"
|
||||
label="大型生产设备"
|
||||
@change="checkboxChange('eq_big')"
|
||||
/>
|
||||
<el-checkbox
|
||||
class="bottomMenu_item"
|
||||
v-model="eq_main"
|
||||
label="主要生产设备"
|
||||
@change="checkboxChange('eq_main')"
|
||||
/>
|
||||
<el-checkbox
|
||||
class="bottomMenu_item"
|
||||
v-model="eq_trans"
|
||||
label="输送设备"
|
||||
@change="checkboxChange('eq_trans')"
|
||||
/>
|
||||
<!-- <el-checkbox-group v-model="equCheck" @change="checkChange(equCheck)">
|
||||
<el-checkbox class="bottomMenu_item" value="eq_big" label="大型生产设备"/>
|
||||
<el-checkbox class="bottomMenu_item" value="eq_main" label="主要生产设备"/>
|
||||
|
|
@ -16,15 +33,48 @@
|
|||
</el-checkbox-group> -->
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: relative;">
|
||||
<div style="position: relative">
|
||||
<div class="btns" @click="showChange(2)">治理设备</div>
|
||||
<div class="bottomMenu bottomMenu2" @mouseleave="handleMouseLeave(2)">
|
||||
<el-checkbox class="bottomMenu_item" v-model="fog_cannon" label="雾炮" @change="checkboxChange('fog_cannon')"/>
|
||||
<el-checkbox class="bottomMenu_item" v-model="dry_fog" label="干雾" @change="checkboxChange('dry_fog')"/>
|
||||
<el-checkbox class="bottomMenu_item" v-model="dust_clean" label="除尘器" @change="checkboxChange('dust_clean')"/>
|
||||
<el-checkbox class="bottomMenu_item" v-model="truck_clean" label="环卫车" @change="checkboxChange('truck_clean')"/>
|
||||
<el-checkbox class="bottomMenu_item" v-model="wstation" label="洗车台" @change="checkboxChange('wstation')"/>
|
||||
<el-checkbox class="bottomMenu_item" v-model="tltx" label="脱硫脱硝" @change="checkboxChange('tltx')"/>
|
||||
<div
|
||||
class="bottomMenu bottomMenu2"
|
||||
@mouseleave="handleMouseLeave(2)"
|
||||
>
|
||||
<el-checkbox
|
||||
class="bottomMenu_item"
|
||||
v-model="fog_cannon"
|
||||
label="雾炮"
|
||||
@change="checkboxChange('fog_cannon')"
|
||||
/>
|
||||
<el-checkbox
|
||||
class="bottomMenu_item"
|
||||
v-model="dry_fog"
|
||||
label="干雾"
|
||||
@change="checkboxChange('dry_fog')"
|
||||
/>
|
||||
<el-checkbox
|
||||
class="bottomMenu_item"
|
||||
v-model="dust_clean"
|
||||
label="除尘器"
|
||||
@change="checkboxChange('dust_clean')"
|
||||
/>
|
||||
<el-checkbox
|
||||
class="bottomMenu_item"
|
||||
v-model="truck_clean"
|
||||
label="环卫车"
|
||||
@change="checkboxChange('truck_clean')"
|
||||
/>
|
||||
<el-checkbox
|
||||
class="bottomMenu_item"
|
||||
v-model="wstation"
|
||||
label="洗车台"
|
||||
@change="checkboxChange('wstation')"
|
||||
/>
|
||||
<el-checkbox
|
||||
class="bottomMenu_item"
|
||||
v-model="tltx"
|
||||
label="脱硫脱硝"
|
||||
@change="checkboxChange('tltx')"
|
||||
/>
|
||||
<!-- <el-checkbox-group v-model="equCheck2">
|
||||
<el-checkbox class="bottomMenu_item" value="wp" label="雾炮"/>
|
||||
<el-checkbox class="bottomMenu_item" value="gw" label="干雾"/>
|
||||
|
|
@ -35,22 +85,48 @@
|
|||
</el-checkbox-group> -->
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: relative;">
|
||||
<div style="position: relative">
|
||||
<div class="btns" @click="showChange(3)">监测设备</div>
|
||||
<div class="bottomMenu bottomMenu3" @mouseleave="handleMouseLeave(3)">
|
||||
<el-checkbox class="bottomMenu_item" v-model="tsp" label="TSP" @change="checkboxChange('tsp')"/>
|
||||
<el-checkbox class="bottomMenu_item" v-model="cems" label="CEMS" @change="checkboxChange('cems')"/>
|
||||
<el-checkbox class="bottomMenu_item" v-model="aqms" label="空气微站" @change="checkboxChange('aqms')"/>
|
||||
<div
|
||||
class="bottomMenu bottomMenu3"
|
||||
@mouseleave="handleMouseLeave(3)"
|
||||
>
|
||||
<el-checkbox
|
||||
class="bottomMenu_item"
|
||||
v-model="tsp"
|
||||
label="TSP"
|
||||
@change="checkboxChange('tsp')"
|
||||
/>
|
||||
<el-checkbox
|
||||
class="bottomMenu_item"
|
||||
v-model="cems"
|
||||
label="CEMS"
|
||||
@change="checkboxChange('cems')"
|
||||
/>
|
||||
<el-checkbox
|
||||
class="bottomMenu_item"
|
||||
v-model="aqms"
|
||||
label="空气微站"
|
||||
@change="checkboxChange('aqms')"
|
||||
/>
|
||||
<!-- <el-checkbox-group v-model="equCheck3">
|
||||
<el-checkbox class="bottomMenu_item" value="cems" label="CEMS"/>
|
||||
<el-checkbox class="bottomMenu_item" value="tsp" label="TSP"/>
|
||||
</el-checkbox-group> -->
|
||||
</div>
|
||||
</div>
|
||||
<div style="position: relative;">
|
||||
<div style="position: relative">
|
||||
<div class="btns" @click="showChange(4)">监控设备</div>
|
||||
<div class="bottomMenu bottomMenu4" @mouseleave="handleMouseLeave(4)">
|
||||
<el-checkbox class="bottomMenu_item" v-model="monitor" label="监控设备" @cahnge="checkboxChange('monitor')"/>
|
||||
<div
|
||||
class="bottomMenu bottomMenu4"
|
||||
@mouseleave="handleMouseLeave(4)"
|
||||
>
|
||||
<el-checkbox
|
||||
class="bottomMenu_item"
|
||||
v-model="monitor"
|
||||
label="监控设备"
|
||||
@cahnge="checkboxChange('monitor')"
|
||||
/>
|
||||
<!-- <el-checkbox-group v-model="equCheck4">
|
||||
<el-checkbox class="bottomMenu_item" value="jksb" label="监控设备" />
|
||||
</el-checkbox-group> -->
|
||||
|
|
@ -59,29 +135,75 @@
|
|||
</div>
|
||||
<div v-show="infoShow" class="infoDom">
|
||||
<h4 class="infoDom_header">
|
||||
<el-icon class="infoDom_close" @click="closeInfo()"><el-icon-close /></el-icon>
|
||||
<el-icon class="infoDom_close" @click="closeInfo()"
|
||||
><el-icon-close
|
||||
/></el-icon>
|
||||
{{ objItem.name }}
|
||||
<el-button size="small" class="infoDom_toDetail" @click="infoToDetail()">详情</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
class="infoDom_toDetail"
|
||||
@click="infoToDetail()"
|
||||
>详情</el-button
|
||||
>
|
||||
</h4>
|
||||
<div class="infoBody">
|
||||
<p class="bodyTitle" v-if="objItem.cate_code=='tsp'||objItem.cate_code=='cems'||objItem.cate_code=='aqms'"><span class="titleIcon"></span>实时监测</p>
|
||||
<p class="bodyTitle" v-else-if="objItem.cate_code!='monitor'"><span class="titleIcon"></span>实时状态</p>
|
||||
<p
|
||||
class="bodyTitle"
|
||||
v-if="
|
||||
objItem.cate_code == 'tsp' ||
|
||||
objItem.cate_code == 'cems' ||
|
||||
objItem.cate_code == 'aqms'
|
||||
"
|
||||
>
|
||||
<span class="titleIcon"></span>实时监测
|
||||
</p>
|
||||
<p class="bodyTitle" v-else-if="objItem.cate_code != 'monitor'">
|
||||
<span class="titleIcon"></span>实时状态
|
||||
</p>
|
||||
<div class="bodyContainer">
|
||||
<div class="rdio-group" v-if="objItem.type==10||objItem.type==30">
|
||||
<div :class="['radio-item' ,objItem.state==10?'greenIcon':'']">
|
||||
<el-icon class="radio-ico"><el-icon-successFilled /></el-icon>
|
||||
<div
|
||||
class="rdio-group"
|
||||
v-if="objItem.type == 10 || objItem.type == 30"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'radio-item',
|
||||
objItem.state == 10 ? 'greenIcon' : '',
|
||||
]"
|
||||
>
|
||||
<el-icon class="radio-ico"
|
||||
><el-icon-successFilled
|
||||
/></el-icon>
|
||||
<span>运行</span>
|
||||
</div>
|
||||
<div :class="['radio-item' ,objItem.state==20?'orangeIcon':'']">
|
||||
<el-icon class="radio-ico"><el-icon-removeFilled /></el-icon>
|
||||
<div
|
||||
:class="[
|
||||
'radio-item',
|
||||
objItem.state == 20 ? 'orangeIcon' : '',
|
||||
]"
|
||||
>
|
||||
<el-icon class="radio-ico"
|
||||
><el-icon-removeFilled
|
||||
/></el-icon>
|
||||
<span>待机</span>
|
||||
</div>
|
||||
<div :class="['radio-item' ,objItem.state==30?'redIcon':'']">
|
||||
<el-icon class="radio-ico"><el-icon-warningFilled /></el-icon>
|
||||
<div
|
||||
:class="[
|
||||
'radio-item',
|
||||
objItem.state == 30 ? 'redIcon' : '',
|
||||
]"
|
||||
>
|
||||
<el-icon class="radio-ico"
|
||||
><el-icon-warningFilled
|
||||
/></el-icon>
|
||||
<span>离线</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="objItem.type==40&&objItem.cate_code=='cems'">
|
||||
<div
|
||||
v-else-if="
|
||||
objItem.type == 40 && objItem.cate_code == 'cems'
|
||||
"
|
||||
>
|
||||
<div class="infoTableTr">
|
||||
<div class="infoTableHeadTh">颗粒物</div>
|
||||
<div class="infoTableHeadTh">SO₂</div>
|
||||
|
|
@ -103,7 +225,11 @@
|
|||
<div class="infoTableBodytd">0.80%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="objItem.type==40&&objItem.cate_code=='tsp'">
|
||||
<div
|
||||
v-else-if="
|
||||
objItem.type == 40 && objItem.cate_code == 'tsp'
|
||||
"
|
||||
>
|
||||
<div class="infoTableTr">
|
||||
<div class="infoTableHeadTh">TSP</div>
|
||||
<div class="infoTableHeadTh">温度</div>
|
||||
|
|
@ -117,19 +243,23 @@
|
|||
</div>
|
||||
</div>
|
||||
<p class="bodyTitle"><span class="titleIcon"></span>历史监测</p>
|
||||
<div class="infoCharts" id="infoCharts" style="width:360px;height: 150px;"></div>
|
||||
<div
|
||||
class="infoCharts"
|
||||
id="infoCharts"
|
||||
style="width: 360px; height: 150px"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import tool from '@/utils/tool'
|
||||
import * as Cesium from 'cesium';
|
||||
import tool from "@/utils/tool";
|
||||
import * as Cesium from "cesium";
|
||||
import * as echarts from "echarts";
|
||||
import cems from './enpComponents/cems.vue';
|
||||
import cems from "./enpComponents/cems.vue";
|
||||
export default {
|
||||
name: 'cesium',
|
||||
props: ['activeIndex'],
|
||||
name: "cesium",
|
||||
props: ["activeIndex"],
|
||||
data() {
|
||||
return {
|
||||
objItem: {},
|
||||
|
|
@ -151,70 +281,98 @@ export default {
|
|||
intervalequ: null, //标签状态更新定时器
|
||||
basicOption: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: "axis",
|
||||
formatter: function (params) {
|
||||
var result = '';
|
||||
let text = params[0].data[1] == 1 ? '运行' : params[0].data[1] == 0 ? '待机' : '故障';
|
||||
let colors = text=='运行'?'#21a51f':text=='待机'?'#ff8608':'#c7c7c7';
|
||||
var lineHtml = '<div style="height:1px;background:#333333;width:100%"></div>';
|
||||
var dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:4px;width:8px;height:8px;background-color:' + colors + '"></span>';
|
||||
let state = '<span style="color:' + colors + '">'+text+'</span>';
|
||||
result += params[0].name + lineHtml + "</br>" + dotHtml + params[0].seriesName + '：' + state + "</br>";
|
||||
var result = "";
|
||||
let text =
|
||||
params[0].data[1] == 1
|
||||
? "运行"
|
||||
: params[0].data[1] == 0
|
||||
? "待机"
|
||||
: "故障";
|
||||
let colors =
|
||||
text == "运行"
|
||||
? "#21a51f"
|
||||
: text == "待机"
|
||||
? "#ff8608"
|
||||
: "#c7c7c7";
|
||||
var lineHtml =
|
||||
'<div style="height:1px;background:#333333;width:100%"></div>';
|
||||
var dotHtml =
|
||||
'<span style="display:inline-block;margin-right:5px;border-radius:4px;width:8px;height:8px;background-color:' +
|
||||
colors +
|
||||
'"></span>';
|
||||
let state =
|
||||
'<span style="color:' +
|
||||
colors +
|
||||
'">' +
|
||||
text +
|
||||
"</span>";
|
||||
result +=
|
||||
params[0].name +
|
||||
lineHtml +
|
||||
"</br>" +
|
||||
dotHtml +
|
||||
params[0].seriesName +
|
||||
"：" +
|
||||
state +
|
||||
"</br>";
|
||||
return result;
|
||||
}
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "3%",
|
||||
containLabel: true,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
type: "value",
|
||||
axisLine: { show: true },
|
||||
axisTick: { show: false },
|
||||
splitLine: {show: false}
|
||||
splitLine: { show: false },
|
||||
},
|
||||
dataset: { source: [] },
|
||||
xAxis: { type: 'category', splitLine: {show:false} },
|
||||
xAxis: { type: "category", splitLine: { show: false } },
|
||||
visualMap: {
|
||||
top: 5,
|
||||
right: 10,
|
||||
symbolSize: 1,
|
||||
orient: "horizontal",
|
||||
textStyle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 10
|
||||
color: "#ffffff",
|
||||
fontSize: 10,
|
||||
},
|
||||
pieces: [
|
||||
{
|
||||
gt: 0.5,
|
||||
lte: 1,
|
||||
label: '运行',
|
||||
color: '#21a51f'
|
||||
label: "运行",
|
||||
color: "#21a51f",
|
||||
},
|
||||
{
|
||||
gt: -0.5,
|
||||
lte: 0.5,
|
||||
label: '待机',
|
||||
color: '#ff8608'
|
||||
label: "待机",
|
||||
color: "#ff8608",
|
||||
},
|
||||
{
|
||||
gt: -1,
|
||||
lte: -0.5,
|
||||
label: '离线',
|
||||
color: '#c7c7c7'
|
||||
label: "离线",
|
||||
color: "#c7c7c7",
|
||||
},
|
||||
],
|
||||
},
|
||||
series: [{type: 'line',}]
|
||||
}
|
||||
}
|
||||
series: [{ type: "line" }],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
const scriptInfo = document.createElement("script");
|
||||
scriptInfo.setAttribute("data-callType", "callScript");
|
||||
scriptInfo.src = "https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js";
|
||||
scriptInfo.src =
|
||||
"https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js";
|
||||
document.head.appendChild(scriptInfo);
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -233,10 +391,11 @@ export default {
|
|||
selectionIndicator: false, //选取指示器组件
|
||||
timeline: false, //时间轴
|
||||
navigationHelpButton: false, //帮助按钮
|
||||
navigationInstructionsInitiallyVisible:false
|
||||
navigationInstructionsInitiallyVisible: false,
|
||||
});
|
||||
this.viewer = viewer;
|
||||
if(Cesium.FeatureDetection.supportsImageRenderingPixelated()){//判断是否支持图像渲染像素化处理
|
||||
if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
|
||||
//判断是否支持图像渲染像素化处理
|
||||
viewer.resolutionScale = window.devicePixelRatio;
|
||||
}
|
||||
//是否开启抗锯齿
|
||||
|
|
@ -259,7 +418,7 @@ export default {
|
|||
// viewer.scene.globe.show = false
|
||||
//隐藏logo信息
|
||||
viewer.scene.globe.enableLighting = true;
|
||||
viewer._cesiumWidget._creditContainer.style.display = 'none';
|
||||
viewer._cesiumWidget._creditContainer.style.display = "none";
|
||||
//*****cesium加载3dtiles*****//
|
||||
// const tileset = new Cesium.Cesium3DTileset({
|
||||
// url: "/3dtiles/tileset.json",
|
||||
|
|
@ -362,7 +521,7 @@ export default {
|
|||
// },60000)
|
||||
//*****cesium加载3dtiles*****//
|
||||
|
||||
console.log('');
|
||||
console.log("");
|
||||
//*****cesium加载.glb格式的文件*****//
|
||||
//1、viewer.scene.primitives.add
|
||||
// var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.1);
|
||||
|
|
@ -392,34 +551,39 @@ export default {
|
|||
//2、viewer.entities.add
|
||||
var url = "factory.glb";
|
||||
var height = 0;
|
||||
viewer.entities.removeAll() //加载之前先清楚所有entity
|
||||
var position = Cesium.Cartesian3.fromDegrees(88.644, 42.7229, height)
|
||||
var heading = Cesium.Math.toRadians(191) //310度转弧度
|
||||
viewer.entities.removeAll(); //加载之前先清楚所有entity
|
||||
var position = Cesium.Cartesian3.fromDegrees(88.644, 42.723, height);
|
||||
var heading = Cesium.Math.toRadians(191); //310度转弧度
|
||||
var pitch = Cesium.Math.toRadians(0);
|
||||
var roll = Cesium.Math.toRadians(0);
|
||||
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
|
||||
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
|
||||
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
||||
position,hpr
|
||||
)
|
||||
position,
|
||||
hpr
|
||||
);
|
||||
var modelScale = 30.0; // 假设模型原始单位是厘米，需要转换为米
|
||||
var modelEntity = viewer.entities.add({
|
||||
name: 'photon',
|
||||
name: "photon",
|
||||
position: position,
|
||||
orientation: orientation,
|
||||
model: {
|
||||
uri: url, //注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
|
||||
scale: modelScale, //缩放比例
|
||||
modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(position),
|
||||
modelMatrix:
|
||||
Cesium.Transforms.eastNorthUpToFixedFrame(position),
|
||||
minimumPixelSize: 256, //最小像素大小，可以避免太小看不见
|
||||
maximumScale: 20000, //模型的最大比例尺大小。minimumPixelSize的上限
|
||||
incrementallyLoadTextures: true, //加载模型后纹理是否可以继续流入
|
||||
shadows: Cesium.ShadowMode.ENABLED,
|
||||
heightReference: Cesium.HeightReference.NONE
|
||||
heightReference: Cesium.HeightReference.NONE,
|
||||
},
|
||||
})
|
||||
});
|
||||
viewer.trackedEntity = modelEntity; // 聚焦模型
|
||||
//设置相机位置
|
||||
viewer.zoomTo(modelEntity, new Cesium.HeadingPitchRange(-3.1, -0.6, 900));
|
||||
viewer.zoomTo(
|
||||
modelEntity,
|
||||
new Cesium.HeadingPitchRange(0.3, -0.5, 900)
|
||||
);
|
||||
that.getEquipmentList();
|
||||
// 监听鼠标左键点击事件
|
||||
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
|
||||
|
|
@ -434,19 +598,21 @@ export default {
|
|||
var pickedPosition = viewer.scene.pickPosition(click.position);
|
||||
if (Cesium.defined(pickedPosition)) {
|
||||
// 将点击位置的世界坐标转换为地理坐标（经纬度）
|
||||
var cartographic = Cesium.Cartographic.fromCartesian(pickedPosition);
|
||||
var longitude = Cesium.Math.toDegrees(cartographic.longitude);//经度
|
||||
var cartographic =
|
||||
Cesium.Cartographic.fromCartesian(pickedPosition);
|
||||
var longitude = Cesium.Math.toDegrees(
|
||||
cartographic.longitude
|
||||
); //经度
|
||||
var latitude = Cesium.Math.toDegrees(cartographic.latitude); //纬度
|
||||
var height = cartographic.height; // 获取高度值
|
||||
console.log('Longitude: ' + longitude);
|
||||
console.log('Latitude: ' + latitude);
|
||||
console.log('Height: ' + height);
|
||||
console.log("Longitude: " + longitude);
|
||||
console.log("Latitude: " + latitude);
|
||||
console.log("Height: " + height);
|
||||
// 可以在这里执行更多操作，例如在点击位置添加标记等
|
||||
//获取该点信息，查询相关数据
|
||||
}
|
||||
}
|
||||
},
|
||||
Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
},
|
||||
methods: {
|
||||
getChartTime() {
|
||||
|
|
@ -459,20 +625,20 @@ export default {
|
|||
end_time: tool.dateFormat1(endDate),
|
||||
start_time: tool.dateFormat1(startDate),
|
||||
time_bucket: "1 minute",
|
||||
equipment_id: this.objItem.id
|
||||
equipment_id: this.objItem.id,
|
||||
},
|
||||
};
|
||||
let myChart = echarts.init(document.getElementById('infoCharts'));
|
||||
let myChart = echarts.init(document.getElementById("infoCharts"));
|
||||
myChart.showLoading();
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
// myChart.setOption(option)
|
||||
this.$API.bi.dataset.exec.req('eq_status', params).then(res => {
|
||||
console.log(res)
|
||||
this.$API.bi.dataset.exec.req("eq_status", params).then((res) => {
|
||||
console.log(res);
|
||||
let newOption = Object.assign({}, this.basicOption);
|
||||
newOption.dataset.source = res.data.ds0;
|
||||
myChart.setOption(newOption);
|
||||
myChart.hideLoading()
|
||||
})
|
||||
myChart.hideLoading();
|
||||
});
|
||||
// this.initChart();
|
||||
},
|
||||
//获取类型对应的图标
|
||||
|
|
@ -509,13 +675,14 @@ export default {
|
|||
//画线
|
||||
createoutLine() {
|
||||
const orangeOutlined = this.viewer.entities.add({
|
||||
name:
|
||||
"Orange line with black outline at height and following the surface",
|
||||
name: "Orange line with black outline at height and following the surface",
|
||||
polyline: {
|
||||
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
|
||||
119.196653, 26.031937, //线的初始经纬度
|
||||
119.196653,
|
||||
26.031937, //线的初始经纬度
|
||||
10, //高度
|
||||
119.196653, 26.031947, //结束位置
|
||||
119.196653,
|
||||
26.031947, //结束位置
|
||||
250,
|
||||
]),
|
||||
width: 5,
|
||||
|
|
@ -541,100 +708,167 @@ export default {
|
|||
// that.removePointer();
|
||||
that.$API.em.equipment.list.req({ page: 0 }).then((res) => {
|
||||
res.forEach((item) => {
|
||||
if ( item.cate!==null&&item.coordinates && item.coordinates.longitude && item.coordinates.latitude) {
|
||||
let imgUrl = that.getItemIcon(item.cate_code)
|
||||
if (
|
||||
item.cate !== null &&
|
||||
item.coordinates &&
|
||||
item.coordinates.longitude &&
|
||||
item.coordinates.latitude
|
||||
) {
|
||||
let imgUrl = that.getItemIcon(item.cate_code);
|
||||
let lon = parseFloat(item.coordinates.longitude);
|
||||
let lat = parseFloat(item.coordinates.latitude);
|
||||
let height = parseInt(item.coordinates.height) + 15;
|
||||
let type = item.cate_code;
|
||||
let arrs = { name:item.name, lon: lon, lat:lat, height:height, id:item.id, type: type };
|
||||
let config = { show: true, fontSize: '16px', fillColor: '#ffffff', fillWidth: 1, pixelOffsetX: 10, pixelOffsetY: -30, image: imgUrl, imgWidth: 50, imgHeight: 50, textDistance: 550000, imgDistance: 550000 };
|
||||
let arrs = {
|
||||
name: item.name,
|
||||
lon: lon,
|
||||
lat: lat,
|
||||
height: height,
|
||||
id: item.id,
|
||||
type: type,
|
||||
};
|
||||
let config = {
|
||||
show: true,
|
||||
fontSize: "16px",
|
||||
fillColor: "#ffffff",
|
||||
fillWidth: 1,
|
||||
pixelOffsetX: 10,
|
||||
pixelOffsetY: -30,
|
||||
image: imgUrl,
|
||||
imgWidth: 50,
|
||||
imgHeight: 50,
|
||||
textDistance: 550000,
|
||||
imgDistance: 550000,
|
||||
};
|
||||
that.addPointer(arrs, config);
|
||||
}
|
||||
})
|
||||
})
|
||||
});
|
||||
});
|
||||
},
|
||||
//调用此方法创建点用于标注在地图上
|
||||
creatgetInfoePoint(attrs, config) {
|
||||
const { name = '测试', lon, lat, id='11111', type = 'display' ,height} = attrs
|
||||
const { show = true, fontSize, fillColor, fillWidth,pixelOffsetX, pixelOffsetY, image, imgWidth, imgHeight, textDistance, imgDistance } = config
|
||||
const {
|
||||
name = "测试",
|
||||
lon,
|
||||
lat,
|
||||
id = "11111",
|
||||
type = "display",
|
||||
height,
|
||||
} = attrs;
|
||||
const {
|
||||
show = true,
|
||||
fontSize,
|
||||
fillColor,
|
||||
fillWidth,
|
||||
pixelOffsetX,
|
||||
pixelOffsetY,
|
||||
image,
|
||||
imgWidth,
|
||||
imgHeight,
|
||||
textDistance,
|
||||
imgDistance,
|
||||
} = config;
|
||||
return new Cesium.Entity({
|
||||
attrs: attrs,
|
||||
id: id,
|
||||
type: type,
|
||||
position: Cesium.Cartesian3.fromDegrees(lon||117.08387268794274, lat||31.6557737395655433,height), // 文字标签
|
||||
position: Cesium.Cartesian3.fromDegrees(
|
||||
lon || 117.08387268794274,
|
||||
lat || 31.6557737395655433,
|
||||
height
|
||||
), // 文字标签
|
||||
label: {
|
||||
show: show,
|
||||
text: name,
|
||||
font: (fontSize || '14px'),
|
||||
font: fontSize || "14px",
|
||||
style: Cesium.LabelStyle.FILL,
|
||||
fillColor: Cesium.Color.LIME,
|
||||
fillColor: Cesium.Color.fromCssColorString(fillColor || '#fff'),
|
||||
fillColor: Cesium.Color.fromCssColorString(
|
||||
fillColor || "#fff"
|
||||
),
|
||||
outline: false, // 字体边框
|
||||
outlineColor: Cesium.Color.WHITE, // 字体边框颜色
|
||||
outlineWidth: fillWidth || 4, // 字体边框尺寸
|
||||
showBackground: true, // 是否显示背景颜色
|
||||
backgroundColor: Cesium.Color.fromCssColorString('#1ca50a'), // 背景颜色
|
||||
backgroundColor: Cesium.Color.fromCssColorString("#1ca50a"), // 背景颜色
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直方向以底部来计算标签的位置
|
||||
pixelOffset: new Cesium.Cartesian2(pixelOffsetX || 50, pixelOffsetY || -25), // 偏移量
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, textDistance || 550000) // 文字标签多少距离内设置可见
|
||||
pixelOffset: new Cesium.Cartesian2(
|
||||
pixelOffsetX || 50,
|
||||
pixelOffsetY || -25
|
||||
), // 偏移量
|
||||
distanceDisplayCondition:
|
||||
new Cesium.DistanceDisplayCondition(
|
||||
0,
|
||||
textDistance || 550000
|
||||
), // 文字标签多少距离内设置可见
|
||||
},
|
||||
billboard: {
|
||||
// 图标
|
||||
image: image || 'img/enp_blue/warning_enp.png',
|
||||
image: image || "img/enp_blue/warning_enp.png",
|
||||
width: imgWidth || 30,
|
||||
height: imgHeight || 30,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, imgDistance || 550000) // 图片多少距离内设置可见
|
||||
}
|
||||
})
|
||||
distanceDisplayCondition:
|
||||
new Cesium.DistanceDisplayCondition(
|
||||
0,
|
||||
imgDistance || 550000
|
||||
), // 图片多少距离内设置可见
|
||||
},
|
||||
});
|
||||
},
|
||||
//用于把创建好的点加载到地图上
|
||||
addPointer(attrs, config) {
|
||||
let that = this;
|
||||
let obj = that.creatgetInfoePoint(attrs, config);
|
||||
that.viewer.entities.add(obj)
|
||||
that.viewer.entities.add(obj);
|
||||
},
|
||||
//调用此方法获取相关信息显示在页面
|
||||
getInfo(equpmentId) {
|
||||
let that = this;
|
||||
that.infoShow = true;
|
||||
console.log(equpmentId)
|
||||
console.log(equpmentId);
|
||||
//根据id获取相关信息
|
||||
this.$API.em.equipment.item.req(equpmentId).then((res) => {
|
||||
that.objItem = res;
|
||||
console.log(res)
|
||||
})
|
||||
console.log(res);
|
||||
});
|
||||
this.getChartTime();
|
||||
},
|
||||
initChart() {
|
||||
var that = this;
|
||||
var myChart = echarts.getInstanceByDom(document.getElementById('infoCharts'));
|
||||
var myChart = echarts.getInstanceByDom(
|
||||
document.getElementById("infoCharts")
|
||||
);
|
||||
if (myChart == undefined) {
|
||||
myChart = echarts.init(document.getElementById('infoCharts'));
|
||||
myChart = echarts.init(document.getElementById("infoCharts"));
|
||||
}
|
||||
myChart.showLoading();
|
||||
this.$API.bi.dataset.exec.req('enp_edata2', {
|
||||
this.$API.bi.dataset.exec
|
||||
.req("enp_edata2", {
|
||||
query: this.query,
|
||||
raise_exception: true
|
||||
}).then(res => {
|
||||
raise_exception: true,
|
||||
})
|
||||
.then((res) => {
|
||||
let newOption = Object.assign({}, this.basicOption);
|
||||
let ds0 = res.data.ds0
|
||||
ds0.pop()
|
||||
let ds0 = res.data.ds0;
|
||||
ds0.pop();
|
||||
newOption.dataset.source = res.data.ds0;
|
||||
newOption.title.text = this.currentEquipmentName;
|
||||
myChart.setOption(newOption);
|
||||
}).then(() => { myChart.hideLoading() })
|
||||
})
|
||||
.then(() => {
|
||||
myChart.hideLoading();
|
||||
});
|
||||
},
|
||||
//添加点之前可以调用一下移除所有的点防止重复添加
|
||||
removePointer() {
|
||||
let allEntitiesPoint = [];
|
||||
this.viewer.entities.values.forEach((item) => {
|
||||
allEntitiesPoint.push(item.id)
|
||||
})
|
||||
allEntitiesPoint.push(item.id);
|
||||
});
|
||||
allEntitiesPoint.forEach((item) => {
|
||||
const entity_obj = this.viewer.entities.getById(item)
|
||||
this.viewer.entities.remove(entity_obj)
|
||||
})
|
||||
const entity_obj = this.viewer.entities.getById(item);
|
||||
this.viewer.entities.remove(entity_obj);
|
||||
});
|
||||
},
|
||||
closeInfo() {
|
||||
this.infoShow = false;
|
||||
|
|
@ -642,50 +876,57 @@ export default {
|
|||
//跳转到cems、tsp、空气微站
|
||||
infoToDetail() {
|
||||
let that = this;
|
||||
this.$APi.enp.drain_equip.list.req({ equipment: that.objItem.id, page: 0 }).then(res => {
|
||||
this.$APi.enp.drain_equip.list
|
||||
.req({ equipment: that.objItem.id, page: 0 })
|
||||
.then((res) => {
|
||||
let drainId = res[0].drain;
|
||||
})
|
||||
});
|
||||
},
|
||||
// checkChange(val) {
|
||||
// console.log('checkChange',val)
|
||||
// console.log('checkChange',this.equCheck)
|
||||
// },
|
||||
checkboxChange(val) {
|
||||
console.log('checkboxChange', val);
|
||||
let valu = this[val]
|
||||
console.log('valu', valu);
|
||||
let allEntitiesPoint = []
|
||||
console.log("checkboxChange", val);
|
||||
let valu = this[val];
|
||||
console.log("valu", valu);
|
||||
let allEntitiesPoint = [];
|
||||
this.viewer.entities.values.forEach((item) => {
|
||||
allEntitiesPoint.push(item)
|
||||
allEntitiesPoint.push(item);
|
||||
if (item._type == val) {
|
||||
item._show = valu
|
||||
item.show = valu
|
||||
item._show = valu;
|
||||
item.show = valu;
|
||||
}
|
||||
})
|
||||
console.log("allEntitiesPoint",allEntitiesPoint)
|
||||
});
|
||||
console.log("allEntitiesPoint", allEntitiesPoint);
|
||||
},
|
||||
|
||||
//点击大类按钮
|
||||
showChange(val) {
|
||||
let classname = 'bottomMenu' + val;
|
||||
if (document.getElementsByClassName(classname)[0].style.display == 'block') {
|
||||
document.getElementsByClassName(classname)[0].style.display = 'none';
|
||||
let classname = "bottomMenu" + val;
|
||||
if (
|
||||
document.getElementsByClassName(classname)[0].style.display ==
|
||||
"block"
|
||||
) {
|
||||
document.getElementsByClassName(classname)[0].style.display =
|
||||
"none";
|
||||
} else {
|
||||
document.getElementsByClassName(classname)[0].style.display = 'block';
|
||||
document.getElementsByClassName(classname)[0].style.display =
|
||||
"block";
|
||||
}
|
||||
},
|
||||
//鼠标移出小类
|
||||
handleMouseLeave(val) {
|
||||
let classname = 'bottomMenu' + val;
|
||||
document.getElementsByClassName(classname)[0].style.display = 'none';
|
||||
let classname = "bottomMenu" + val;
|
||||
document.getElementsByClassName(classname)[0].style.display =
|
||||
"none";
|
||||
},
|
||||
},
|
||||
beforeUnmount() {
|
||||
// viewer.destroy();
|
||||
this.viewer = null;
|
||||
},
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
/* #cesiumContainer,
|
||||
|
|
@ -704,14 +945,14 @@ export default {
|
|||
min-height: 20vh;
|
||||
min-width: 360px;
|
||||
background: rgba(0, 50, 56, 0.8);
|
||||
border: 1px solid rgba(63,174,229,.5);
|
||||
border: 1px solid rgba(63, 174, 229, 0.5);
|
||||
}
|
||||
.infoDom_header {
|
||||
font-size: 18px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
border-bottom: 1px solid rgba(63,174,229,.5);
|
||||
border-bottom: 1px solid rgba(63, 174, 229, 0.5);
|
||||
}
|
||||
.infoDom_close {
|
||||
position: absolute;
|
||||
|
|
@ -749,13 +990,16 @@ export default {
|
|||
.radio-item {
|
||||
width: 60px;
|
||||
}
|
||||
.greenIcon,.greenIcon>.radio-ico{
|
||||
.greenIcon,
|
||||
.greenIcon > .radio-ico {
|
||||
color: #1ca50a;
|
||||
}
|
||||
.orangeIcon,.orangeIcon>.radio-ico{
|
||||
.orangeIcon,
|
||||
.orangeIcon > .radio-ico {
|
||||
color: orange;
|
||||
}
|
||||
.redIcon,.redIcon>.radio-ico{
|
||||
.redIcon,
|
||||
.redIcon > .radio-ico {
|
||||
color: #f41a1a;
|
||||
}
|
||||
.btns_enp {
|
||||
|
|
@ -773,19 +1017,23 @@ export default {
|
|||
height: 5vh;
|
||||
font-size: 2vh;
|
||||
line-height: 4.9vh;
|
||||
background-image: url('/public/img/enp_blue/btn.png');
|
||||
background-image: url("/public/img/enp_blue/btn.png");
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.btns.btnsActive {
|
||||
background-image: url('/public/img/enp_blue/btn_active.png');
|
||||
background-image: url("/public/img/enp_blue/btn_active.png");
|
||||
}
|
||||
/* 底部多选框--start 调节checkbox大小和颜色*/
|
||||
.bottomMenu {
|
||||
padding: 10px 10px 0 10px;
|
||||
background: linear-gradient(to right, rgba(5, 56, 72,.7), rgba(16, 123, 144,.7));
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(5, 56, 72, 0.7),
|
||||
rgba(16, 123, 144, 0.7)
|
||||
);
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
display: none;
|
||||
|
|
@ -810,7 +1058,11 @@ export default {
|
|||
padding-left: 10px;
|
||||
line-height: 40px;
|
||||
margin-bottom: 10px;
|
||||
background: linear-gradient(to right, rgba(27, 143, 164,.5), rgb(16, 123, 144,.5));
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(27, 143, 164, 0.5),
|
||||
rgb(16, 123, 144, 0.5)
|
||||
);
|
||||
}
|
||||
.bottomMenu_item .el-checkbox__inner {
|
||||
width: 20px;
|
||||
|
|
@ -851,7 +1103,7 @@ export default {
|
|||
background: rgb(80, 127, 80);
|
||||
}
|
||||
.infoTableBodytd {
|
||||
background: rgba(38 ,52 ,38 ,.8);
|
||||
background: rgba(38, 52, 38, 0.8);
|
||||
}
|
||||
.infoCharts {
|
||||
width: 100%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue