1028 lines
27 KiB
Vue
1028 lines
27 KiB
Vue
<template>
|
||
<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 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')"
|
||
/>
|
||
<!-- <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="主要生产设备"/>
|
||
<el-checkbox class="bottomMenu_item" value="eq_trans" label="输送设备"/>
|
||
</el-checkbox-group> -->
|
||
</div>
|
||
</div>
|
||
<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')"
|
||
/>
|
||
<!-- <el-checkbox-group v-model="equCheck2">
|
||
<el-checkbox class="bottomMenu_item" value="wp" label="雾炮"/>
|
||
<el-checkbox class="bottomMenu_item" value="gw" label="干雾"/>
|
||
<el-checkbox class="bottomMenu_item" value="dust_clean" label="除尘器"/>
|
||
<el-checkbox class="bottomMenu_item" value="hec" label="环卫车"/>
|
||
<el-checkbox class="bottomMenu_item" value="xct" label="洗车台"/>
|
||
<el-checkbox class="bottomMenu_item" value="tltx" label="脱硫脱硝"/>
|
||
</el-checkbox-group> -->
|
||
</div>
|
||
</div>
|
||
<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')"
|
||
/>
|
||
<!-- <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 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')"
|
||
/>
|
||
<!-- <el-checkbox-group v-model="equCheck4">
|
||
<el-checkbox class="bottomMenu_item" value="jksb" label="监控设备" />
|
||
</el-checkbox-group> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-show="infoShow" class="infoDom">
|
||
<h4 class="infoDom_header">
|
||
<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
|
||
>
|
||
</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>
|
||
<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>
|
||
<span>运行</span>
|
||
</div>
|
||
<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>
|
||
<span>离线</span>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-else-if="
|
||
objItem.type == 40 && objItem.cate_code == 'cems'
|
||
"
|
||
>
|
||
<div class="infoTableTr">
|
||
<div class="infoTableHeadTh">颗粒物</div>
|
||
<div class="infoTableHeadTh">SO₂</div>
|
||
<div class="infoTableHeadTh">NOx</div>
|
||
</div>
|
||
<div class="infoTableTr">
|
||
<div class="infoTableBodytd">13.00mg/m³</div>
|
||
<div class="infoTableBodytd">13.00mg/m³</div>
|
||
<div class="infoTableBodytd">13.00mg/m³</div>
|
||
</div>
|
||
<div class="infoTableTr">
|
||
<div class="infoTableHeadTh">流量</div>
|
||
<div class="infoTableHeadTh">温度</div>
|
||
<div class="infoTableHeadTh">湿度</div>
|
||
</div>
|
||
<div class="infoTableTr">
|
||
<div class="infoTableBodytd">22320.000m³/h</div>
|
||
<div class="infoTableBodytd">70.54℃</div>
|
||
<div class="infoTableBodytd">0.80%</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-else-if="
|
||
objItem.type == 40 && objItem.cate_code == 'tsp'
|
||
"
|
||
>
|
||
<div class="infoTableTr">
|
||
<div class="infoTableHeadTh">TSP</div>
|
||
<div class="infoTableHeadTh">温度</div>
|
||
<div class="infoTableHeadTh">湿度</div>
|
||
</div>
|
||
<div class="infoTableTr">
|
||
<div class="infoTableBodytd">0.18mg/m³</div>
|
||
<div class="infoTableBodytd">18.6℃</div>
|
||
<div class="infoTableBodytd">53.4%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="bodyTitle"><span class="titleIcon"></span>历史监测</p>
|
||
<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 * as echarts from "echarts";
|
||
import cems from "./enpComponents/cems.vue";
|
||
export default {
|
||
name: "cesium",
|
||
props: ["activeIndex"],
|
||
data() {
|
||
return {
|
||
objItem: {},
|
||
activeBtns: 10,
|
||
infoShow: false,
|
||
eq_big: true, //大型生产设备
|
||
eq_main: true, //主要生产设备
|
||
eq_trans: true, //输送设备
|
||
fog_cannon: true, //雾炮
|
||
dry_fog: true, //干雾
|
||
dust_clean: true, //除尘器
|
||
truck_clean: true, //环卫车
|
||
wstation: true, //洗车台
|
||
tltx: true, //脱硫脱硝
|
||
aqms: true, //空气监测微站
|
||
tsp: true, //TSP
|
||
cems: true, //CEMS
|
||
monitor: true, //监控设备
|
||
intervalequ: null, //标签状态更新定时器
|
||
basicOption: {
|
||
tooltip: {
|
||
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>";
|
||
return result;
|
||
},
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "4%",
|
||
bottom: "3%",
|
||
containLabel: true,
|
||
},
|
||
yAxis: {
|
||
type: "value",
|
||
axisLine: { show: true },
|
||
axisTick: { show: false },
|
||
splitLine: { show: false },
|
||
},
|
||
dataset: { source: [] },
|
||
xAxis: { type: "category", splitLine: { show: false } },
|
||
visualMap: {
|
||
top: 5,
|
||
right: 10,
|
||
symbolSize: 1,
|
||
orient: "horizontal",
|
||
textStyle: {
|
||
color: "#ffffff",
|
||
fontSize: 10,
|
||
},
|
||
pieces: [
|
||
{
|
||
gt: 0.5,
|
||
lte: 1,
|
||
label: "运行",
|
||
color: "#21a51f",
|
||
},
|
||
{
|
||
gt: -0.5,
|
||
lte: 0.5,
|
||
label: "待机",
|
||
color: "#ff8608",
|
||
},
|
||
{
|
||
gt: -1,
|
||
lte: -0.5,
|
||
label: "离线",
|
||
color: "#c7c7c7",
|
||
},
|
||
],
|
||
},
|
||
series: [{ type: "line" }],
|
||
},
|
||
modelPosition: [
|
||
{ lng: 88.64154268696439, lat: 42.721977308996635 },
|
||
{ lng: 88.64217853109109, lat: 42.721910071501945 },
|
||
{ lng: 88.64628960011686, lat: 42.72184710482201 },
|
||
{ lng: 88.64619581826986, lat: 42.7215414346846 },
|
||
{ lng: 88.64013560274894, lat: 42.72268219734449 },
|
||
{ lng: 88.64035358529543, lat: 42.72266224153806 },
|
||
{ lng: 88.64013259837789, lat: 42.722622240941305 },
|
||
],
|
||
};
|
||
},
|
||
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";
|
||
document.head.appendChild(scriptInfo);
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
Cesium.Ion.defaultAccessToken =
|
||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1Yzg3ZDEzOS0zN2Q1LTQ2N2YtOWJhMy1mNWU4MWY5N2ExYzkiLCJpZCI6MjAxMzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzY4MTIzNzR9.SfNeHedDyXWLIPiNbc4qSsHBACm7uvaqRsQprL2J4Cw";
|
||
|
||
const viewer = new Cesium.Viewer("cesiumContainer", {
|
||
animation: false, //动画小部件
|
||
baseLayerPicker: false, //地图图层组件
|
||
fullscreenButton: false, //全屏组件
|
||
geocoder: false, //地理编码搜索组件
|
||
homeButton: false, //首页组件
|
||
infoBox: false, //信息框
|
||
sceneModePicker: false, //场景模式
|
||
selectionIndicator: false, //选取指示器组件
|
||
timeline: false, //时间轴
|
||
navigationHelpButton: false, //帮助按钮
|
||
navigationInstructionsInitiallyVisible: false,
|
||
});
|
||
this.viewer = viewer;
|
||
if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
|
||
//判断是否支持图像渲染像素化处理
|
||
viewer.resolutionScale = window.devicePixelRatio;
|
||
}
|
||
//是否开启抗锯齿
|
||
viewer.scene.fxaa = true;
|
||
viewer.scene.postProcessStages.fxaa.enabled = true;
|
||
|
||
//隐藏logo信息
|
||
viewer.scene.globe.enableLighting = true;
|
||
viewer._cesiumWidget._creditContainer.style.display = "none";
|
||
//*****cesium加载.glb格式的文件*****//
|
||
var url = "photon_tree.glb";
|
||
var height = 0;
|
||
viewer.entities.removeAll(); //加载之前先清楚所有entity
|
||
// 88.64349,
|
||
// 42.72285,
|
||
var position = Cesium.Cartesian3.fromDegrees(
|
||
88.64349,
|
||
42.72285,
|
||
// 88.69159,
|
||
// 42.73185,
|
||
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 orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
||
position,
|
||
hpr
|
||
);
|
||
var modelScale = 2.3; // 假设模型原始单位是厘米，需要转换为米
|
||
var modelEntity = viewer.entities.add({
|
||
name: "photon",
|
||
position: position,
|
||
orientation: orientation,
|
||
model: {
|
||
uri: url, //注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
|
||
scale: modelScale, //缩放比例
|
||
modelMatrix:
|
||
Cesium.Transforms.eastNorthUpToFixedFrame(position),
|
||
minimumPixelSize: 256, //最小像素大小，可以避免太小看不见
|
||
maximumScale: 20000, //模型的最大比例尺大小。minimumPixelSize的上限
|
||
},
|
||
});
|
||
var destination_tree = Cesium.Cartesian3.fromDegrees(
|
||
88.64349,
|
||
42.72285,
|
||
900
|
||
);
|
||
var roll_tree = Cesium.Math.toRadians(-100);
|
||
var hpr_tree = new Cesium.HeadingPitchRoll(heading, pitch, roll_tree);
|
||
var orientation_camer = Cesium.Transforms.headingPitchRollQuaternion(
|
||
destination_tree,
|
||
hpr_tree
|
||
);
|
||
viewer.camera.setView({
|
||
destination: destination_tree,
|
||
orientation: orientation_camer,
|
||
});
|
||
|
||
// that.setTrees(viewer, orientation);
|
||
// viewer.trackedEntity = modelEntity; // 聚焦模型
|
||
// //设置相机位置
|
||
// viewer.zoomTo(
|
||
// modelEntity,
|
||
// new Cesium.HeadingPitchRange(0.3, -0.5, 900)
|
||
// );
|
||
that.getEquipmentList();
|
||
// 监听鼠标左键点击事件
|
||
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
|
||
handler.setInputAction(function (click) {
|
||
var feature = viewer.scene.pick(click.position);
|
||
if (feature.id._attrs) {
|
||
that.objItem = feature.id._attrs;
|
||
that.getInfo(feature.id._id);
|
||
}
|
||
if (Cesium.defined(feature)) {
|
||
// 判断点击位置是否有模型被选中
|
||
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 latitude = Cesium.Math.toDegrees(cartographic.latitude); //纬度
|
||
var height = cartographic.height; // 获取高度值
|
||
console.log("Longitude: " + longitude);
|
||
console.log("Latitude: " + latitude);
|
||
console.log("Height: " + height);
|
||
// 可以在这里执行更多操作，例如在点击位置添加标记等
|
||
//获取该点信息，查询相关数据
|
||
}
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
},
|
||
methods: {
|
||
//单独加载树
|
||
setTrees(viewer, orientation) {
|
||
this.modelPosition.forEach((item) => {
|
||
let position = Cesium.Cartesian3.fromDegrees(
|
||
item.lng,
|
||
item.lat,
|
||
0
|
||
);
|
||
viewer.entities.add({
|
||
name: "tree",
|
||
position: position,
|
||
orientation: orientation,
|
||
model: {
|
||
uri: "tree.glb", //注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
|
||
scale: 1, //缩放比例
|
||
modelMatrix:
|
||
Cesium.Transforms.eastNorthUpToFixedFrame(position),
|
||
minimumPixelSize: 10, //最小像素大小，可以避免太小看不见
|
||
maximumScale: 20000, //模型的最大比例尺大小。minimumPixelSize的上限
|
||
incrementallyLoadTextures: true, //加载模型后纹理是否可以继续流入
|
||
shadows: Cesium.ShadowMode.ENABLED,
|
||
heightReference: Cesium.HeightReference.NONE,
|
||
},
|
||
});
|
||
});
|
||
},
|
||
getChartTime() {
|
||
let endDate = new Date();
|
||
let startDate = new Date();
|
||
startDate.setTime(endDate.getTime() - 1000 * 3600 * 6);
|
||
console.log(tool.dateFormat1(startDate), tool.dateFormat1(endDate));
|
||
let params = {
|
||
query: {
|
||
end_time: tool.dateFormat1(endDate),
|
||
start_time: tool.dateFormat1(startDate),
|
||
time_bucket: "1 minute",
|
||
equipment_id: this.objItem.id,
|
||
},
|
||
};
|
||
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);
|
||
let newOption = Object.assign({}, this.basicOption);
|
||
newOption.dataset.source = res.data.ds0;
|
||
myChart.setOption(newOption);
|
||
myChart.hideLoading();
|
||
});
|
||
// this.initChart();
|
||
},
|
||
//获取类型对应的图标
|
||
getItemIcon(cateCode) {
|
||
switch (cateCode) {
|
||
case "eq_big":
|
||
return "img/enp_blue/eq_big.png";
|
||
case "eq_main":
|
||
return "img/enp_blue/eq_main.png";
|
||
case "eq_trans":
|
||
return "img/enp_blue/eq_trans.png";
|
||
case "fog_cannon":
|
||
return "img/enp_blue/fog_cannon.png";
|
||
case "dry_fog":
|
||
return "img/enp_blue/dry_fog.png";
|
||
case "dust_clean":
|
||
return "img/enp_blue/dust_clean.png";
|
||
case "truck_clean":
|
||
return "img/enp_blue/truck_clean.png";
|
||
case "wstation":
|
||
return "img/enp_blue/wstation.png";
|
||
case "tltx":
|
||
return "img/enp_blue/tltx.png";
|
||
case "tsp":
|
||
return "img/enp_blue/tsp.png";
|
||
case "cems":
|
||
return "img/enp_blue/cems.png";
|
||
case "aqms":
|
||
return "img/enp_blue/aqms.png";
|
||
case "monitor":
|
||
return "img/enp_blue/monitor.png";
|
||
}
|
||
},
|
||
//画线
|
||
createoutLine() {
|
||
const orangeOutlined = this.viewer.entities.add({
|
||
name: "Orange line with black outline at height and following the surface",
|
||
polyline: {
|
||
positions: Cesium.Cartesian3.fromDegreesArrayHeights([
|
||
119.196653,
|
||
26.031937, //线的初始经纬度
|
||
10, //高度
|
||
119.196653,
|
||
26.031947, //结束位置
|
||
250,
|
||
]),
|
||
width: 5,
|
||
material: new Cesium.PolylineOutlineMaterialProperty({
|
||
color: Cesium.Color.ORANGE,
|
||
outlineWidth: 2,
|
||
outlineColor: Cesium.Color.BLACK, //颜色
|
||
}),
|
||
},
|
||
});
|
||
},
|
||
//计算赋值class
|
||
bindBtnClass(index) {
|
||
let classInfo = { btns: true, btnsActive: false };
|
||
if (index == this.activeBtns) {
|
||
classInfo.btnsActive = true;
|
||
}
|
||
return classInfo;
|
||
},
|
||
//获取设备列表
|
||
getEquipmentList() {
|
||
let that = this;
|
||
// 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);
|
||
let lon = parseFloat(item.coordinates.longitude);
|
||
let lat = parseFloat(item.coordinates.latitude);
|
||
let height = parseInt(item.coordinates.height);
|
||
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,
|
||
};
|
||
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;
|
||
return new Cesium.Entity({
|
||
attrs: attrs,
|
||
id: id,
|
||
type: type,
|
||
position: Cesium.Cartesian3.fromDegrees(
|
||
lon || 117.08387268794274,
|
||
lat || 31.6557737395655433,
|
||
height
|
||
), // 文字标签
|
||
label: {
|
||
show: show,
|
||
text: name,
|
||
font: fontSize || "14px",
|
||
style: Cesium.LabelStyle.FILL,
|
||
fillColor: Cesium.Color.LIME,
|
||
fillColor: Cesium.Color.fromCssColorString(
|
||
fillColor || "#fff"
|
||
),
|
||
outline: false, // 字体边框
|
||
outlineColor: Cesium.Color.WHITE, // 字体边框颜色
|
||
outlineWidth: fillWidth || 4, // 字体边框尺寸
|
||
showBackground: true, // 是否显示背景颜色
|
||
backgroundColor: Cesium.Color.fromCssColorString("#1ca50a"), // 背景颜色
|
||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直方向以底部来计算标签的位置
|
||
pixelOffset: new Cesium.Cartesian2(
|
||
pixelOffsetX || 50,
|
||
pixelOffsetY || -25
|
||
), // 偏移量
|
||
distanceDisplayCondition:
|
||
new Cesium.DistanceDisplayCondition(
|
||
0,
|
||
textDistance || 550000
|
||
), // 文字标签多少距离内设置可见
|
||
},
|
||
billboard: {
|
||
// 图标
|
||
image: image || "img/enp_blue/warning_enp.png",
|
||
width: imgWidth || 30,
|
||
height: imgHeight || 30,
|
||
distanceDisplayCondition:
|
||
new Cesium.DistanceDisplayCondition(
|
||
0,
|
||
imgDistance || 550000
|
||
), // 图片多少距离内设置可见
|
||
},
|
||
});
|
||
},
|
||
//用于把创建好的点加载到地图上
|
||
addPointer(attrs, config) {
|
||
let that = this;
|
||
let obj = that.creatgetInfoePoint(attrs, config);
|
||
that.viewer.entities.add(obj);
|
||
},
|
||
//调用此方法获取相关信息显示在页面
|
||
getInfo(equpmentId) {
|
||
let that = this;
|
||
that.infoShow = true;
|
||
console.log(equpmentId);
|
||
//根据id获取相关信息
|
||
this.$API.em.equipment.item.req(equpmentId).then((res) => {
|
||
that.objItem = res;
|
||
console.log(res);
|
||
});
|
||
this.getChartTime();
|
||
},
|
||
initChart() {
|
||
var that = this;
|
||
var myChart = echarts.getInstanceByDom(
|
||
document.getElementById("infoCharts")
|
||
);
|
||
if (myChart == undefined) {
|
||
myChart = echarts.init(document.getElementById("infoCharts"));
|
||
}
|
||
myChart.showLoading();
|
||
this.$API.bi.dataset.exec
|
||
.req("enp_edata2", {
|
||
query: this.query,
|
||
raise_exception: true,
|
||
})
|
||
.then((res) => {
|
||
let newOption = Object.assign({}, this.basicOption);
|
||
let ds0 = res.data.ds0;
|
||
ds0.pop();
|
||
newOption.dataset.source = res.data.ds0;
|
||
newOption.title.text = this.currentEquipmentName;
|
||
myChart.setOption(newOption);
|
||
})
|
||
.then(() => {
|
||
myChart.hideLoading();
|
||
});
|
||
},
|
||
//添加点之前可以调用一下移除所有的点防止重复添加
|
||
removePointer() {
|
||
let allEntitiesPoint = [];
|
||
this.viewer.entities.values.forEach((item) => {
|
||
allEntitiesPoint.push(item.id);
|
||
});
|
||
allEntitiesPoint.forEach((item) => {
|
||
const entity_obj = this.viewer.entities.getById(item);
|
||
this.viewer.entities.remove(entity_obj);
|
||
});
|
||
},
|
||
closeInfo() {
|
||
this.infoShow = false;
|
||
},
|
||
//跳转到cems、tsp、空气微站
|
||
infoToDetail() {
|
||
let that = this;
|
||
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 = [];
|
||
this.viewer.entities.values.forEach((item) => {
|
||
allEntitiesPoint.push(item);
|
||
if (item._type == val) {
|
||
item._show = valu;
|
||
item.show = valu;
|
||
}
|
||
});
|
||
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";
|
||
} else {
|
||
document.getElementsByClassName(classname)[0].style.display =
|
||
"block";
|
||
}
|
||
},
|
||
//鼠标移出小类
|
||
handleMouseLeave(val) {
|
||
let classname = "bottomMenu" + val;
|
||
document.getElementsByClassName(classname)[0].style.display =
|
||
"none";
|
||
},
|
||
},
|
||
beforeUnmount() {
|
||
// viewer.destroy();
|
||
this.viewer.entities.removeAll();
|
||
this.viewer = null;
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
/* #cesiumContainer,
|
||
#cesiumContainer>.cesium-viewer,
|
||
#cesiumContainer>.cesium-viewer>.cesium-viewer-cesiumWidgetContainer,
|
||
#cesiumContainer>.cesium-viewer>.cesium-viewer-cesiumWidgetContainer>.cesium-widget,
|
||
#cesiumContainer>.cesium-viewer>.cesium-viewer-cesiumWidgetContainer>.cesium-widget>canvas{
|
||
width: 100%;
|
||
height: 100%;
|
||
} */
|
||
.infoDom {
|
||
position: fixed;
|
||
right: 22%;
|
||
bottom: 10%;
|
||
width: 380px;
|
||
min-height: 20vh;
|
||
min-width: 360px;
|
||
background: rgba(0, 50, 56, 0.8);
|
||
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, 0.5);
|
||
}
|
||
.infoDom_close {
|
||
position: absolute;
|
||
left: 10px;
|
||
top: 10px;
|
||
}
|
||
.infoDom_toDetail {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 10px;
|
||
}
|
||
.bodyTitle {
|
||
height: 24px;
|
||
line-height: 24px;
|
||
padding: 0 10px;
|
||
font-size: 18px;
|
||
}
|
||
.titleIcon {
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
width: 6px;
|
||
height: 20px;
|
||
background: #00f6ff;
|
||
vertical-align: middle;
|
||
}
|
||
.infoBody {
|
||
padding: 10px;
|
||
}
|
||
.rdio-group {
|
||
height: 30px;
|
||
display: flex;
|
||
justify-content: center;
|
||
line-height: 30px;
|
||
}
|
||
.radio-item {
|
||
width: 60px;
|
||
}
|
||
.greenIcon,
|
||
.greenIcon > .radio-ico {
|
||
color: #1ca50a;
|
||
}
|
||
.orangeIcon,
|
||
.orangeIcon > .radio-ico {
|
||
color: orange;
|
||
}
|
||
.redIcon,
|
||
.redIcon > .radio-ico {
|
||
color: #f41a1a;
|
||
}
|
||
.btns_enp {
|
||
bottom: 7vh;
|
||
left: 28.7vw;
|
||
width: 42.6vw;
|
||
height: 4.3vh;
|
||
position: fixed;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.btns {
|
||
width: 8vw;
|
||
height: 5vh;
|
||
font-size: 2vh;
|
||
line-height: 4.9vh;
|
||
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");
|
||
}
|
||
/* 底部多选框--start 调节checkbox大小和颜色*/
|
||
.bottomMenu {
|
||
padding: 10px 10px 0 10px;
|
||
background: linear-gradient(
|
||
to right,
|
||
rgba(5, 56, 72, 0.7),
|
||
rgba(16, 123, 144, 0.7)
|
||
);
|
||
width: 200px;
|
||
position: absolute;
|
||
display: none;
|
||
}
|
||
.bottomMenu1,
|
||
.bottomMenu3 {
|
||
height: 160px;
|
||
top: -160px;
|
||
}
|
||
.bottomMenu2 {
|
||
height: 310px;
|
||
top: -310px;
|
||
}
|
||
.bottomMenu4 {
|
||
height: 60px;
|
||
top: -60px;
|
||
}
|
||
.bottomMenu_item {
|
||
color: #ffffff;
|
||
width: 100%;
|
||
height: 40px;
|
||
padding-left: 10px;
|
||
line-height: 40px;
|
||
margin-bottom: 10px;
|
||
background: linear-gradient(
|
||
to right,
|
||
rgba(27, 143, 164, 0.5),
|
||
rgb(16, 123, 144, 0.5)
|
||
);
|
||
}
|
||
.bottomMenu_item .el-checkbox__inner {
|
||
width: 20px;
|
||
height: 20px;
|
||
border-color: #ffffff;
|
||
border-radius: 0;
|
||
}
|
||
.bottomMenu_item > .el-checkbox__input.is-checked > .el-checkbox__inner {
|
||
width: 20px;
|
||
height: 20px;
|
||
background-color: #1ca50a;
|
||
border-color: #1ca50a;
|
||
}
|
||
.bottomMenu_item > .el-checkbox__input.is-checked + .el-checkbox__label {
|
||
color: #1ca50a;
|
||
}
|
||
.bottomMenu_item > .el-checkbox__input.is-checked .el-checkbox__inner::after {
|
||
height: 11px;
|
||
left: 5px;
|
||
top: 1px;
|
||
width: 6px;
|
||
}
|
||
/* 底部多选框--end */
|
||
.bodyContainer {
|
||
margin: 10px;
|
||
}
|
||
.infoTableTr {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.infoTableTr > div {
|
||
flex: 0 0 33%;
|
||
height: 30px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
}
|
||
.infoTableHeadTh {
|
||
background: rgb(80, 127, 80);
|
||
}
|
||
.infoTableBodytd {
|
||
background: rgba(38, 52, 38, 0.8);
|
||
}
|
||
.infoCharts {
|
||
width: 100%;
|
||
height: 150px;
|
||
}
|
||
</style>
|