zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:改变模型方向

This commit is contained in:
shijing 2024-04-03 10:48:59 +08:00
parent 824f0cd6bc
commit 46742f99b4
1 changed files with 1033 additions and 781 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

586
src/views/bigScreen/cesiumtest.vue
View File

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