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

fix:会议

This commit is contained in:
shijing 2024-03-15 17:47:03 +08:00
parent b0a0529abd
commit 9eb4058212
10 changed files with 540 additions and 409 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/factory.glb Normal file
View File

Binary file not shown.

17
src/utils/tool.js
View File

@ -173,6 +173,23 @@ tool.dateFormat = function (date, fmt='yyyy-MM-dd hh:mm:ss') {
}
return fmt;
}
tool.dateFormat1 = function (date) {
date = new Date(date);
let newDate = '';
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
let hour = date.getHours();
let minute = date.getMinutes();
let second = date.getSeconds();
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
hour = hour > 9 ? hour : '0' + hour;
minute = minute > 9 ? minute : '0' + minute;
second = second > 9 ? second : '0' + second;
newDate = year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
return newDate;
}
/* 千分符 */
tool.groupSeparator = function (num) {

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

@ -61,11 +61,13 @@
<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"><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">
<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>
@ -78,15 +80,40 @@
<el-icon class="radio-ico"><el-icon-warningFilled /></el-icon>
<span>离线</span>
</div>
</div>
<div v-else-if="objItem.type==40">
<div class="infoTableTr" v-if="objItem.cate_code=='cems'">
<div class="infoTableHeadTh">PM2.5</div>
<div class="infoTableHeadTh">PM10</div>
<div class="infoTableHeadTh">风速</div>
</div>
<div class="infoTableTr" v-if="objItem.cate_code=='cems'">
<div class="infoTableBodytd">13.00μg/m³</div>
<div class="infoTableBodytd">13.00μg/m³</div>
<div class="infoTableBodytd">0.5m/s</div>
</div>
<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>
<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',
@ -108,7 +135,68 @@ export default {
aqms:true,//空气监测微站
tsp:true,//TSP
cems: true,//CEMS
monitor:true,//监控设备
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',}]
}
}
},
created() {
@ -134,365 +222,288 @@ export default {
timeline:false,//时间轴
navigationHelpButton:false,//帮助按钮
navigationInstructionsInitiallyVisible:false
});
});
this.viewer = viewer;
// 修改homeButton的默认返回位置
// this.viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => {
// e.cancel = true;
// //你要飞的位置
// this.viewer.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(119.196653, 26.031937, 50),
// })
// })
// viewer.scene.globe.depthTestAgainstTerrain = false
//设置限制缩放大小
// viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1
// 隐藏地球
// viewer.scene.globe.show = false
//隐藏logo信息
// viewer.scene.globe.enableLighting = true;
// viewer._cesiumWidget._creditContainer.style.display = 'none';
viewer.scene.globe.enableLighting = true;
viewer._cesiumWidget._creditContainer.style.display = 'none';
//*****cesium加载3dtiles*****//
const tileset = new Cesium.Cesium3DTileset({
url: "/3dtiles/tileset.json",
// url: "http://49.232.14.174:2226/pf/3dtiles/tileset.json",
});
tileset.readyPromise.then(function (tileset) {
viewer.scene.primitives.add(tileset);
//将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
const cartographic = Cesium.Cartographic.fromCartesian(
tileset.boundingSphere.center
);
console.log('cartographic',cartographic);
const { longitude, latitude, height } = cartographic;
// 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
const current = Cesium.Cartesian3.fromRadians(
longitude,
latitude,
height
)
//根据中心点坐标计算出的地表坐标点
const surface = Cesium.Cartesian3.fromRadians(
cartographic.longitude, //经度
cartographic.latitude, //纬度
0 //高度
)
//根据中心点坐标和height值计算出的新的坐标点
const offset = Cesium.Cartesian3.fromRadians(
longitude, latitude, 0
);
//更新tileset模型矩阵(modelMatrix)的,实现tileset位置的平移变换
const translation = Cesium.Cartesian3.subtract(
offset, //根据中心点坐标和height值计算出的新的坐标点
surface, //根据中心点坐标计算出的地表坐标点
new Cesium.Cartesian3()
);
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
//tileset加载完成监听
// tileset.tileLoad.addEventListener(function (tile) {
// let content = tile.content;
// // let featuresLength = content.featuresLength;
// let feature = content.getFeature(0);
// //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
// const cartographicMesh = Cesium.Cartographic.fromCartesian(
// feature._content._model._boundingSphere.center
// );
// // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
// const currentMesh = Cesium.Cartesian3.fromRadians(
// cartographicMesh.longitude, //经度
// cartographicMesh.latitude, //纬度
// cartographicMesh.height
// )
// //根据中心点坐标计算出的地表坐标点
// const surfaceMesh = Cesium.Cartesian3.fromRadians(
// cartographicMesh.longitude, //经度
// cartographicMesh.latitude, //纬度
// 2 //高度
// )
// })
//视野转到tileset模型
viewer.zoomTo(
tileset,
new Cesium.HeadingPitchRange(
-4.0,
-0.65,
500
)
);
that.getEquipmentList();
});
// 监听鼠标左键点击事件
// const tileset = new Cesium.Cesium3DTileset({
// url: "/3dtiles/tileset.json",
// // url: "http://49.232.14.174:2226/pf/3dtiles/tileset.json",
// });
// tileset.readyPromise.then(function (tileset) {
// viewer.scene.primitives.add(tileset);
// //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
// const cartographic = Cesium.Cartographic.fromCartesian(
// tileset.boundingSphere.center
// );
// console.log('cartographic',cartographic);
// const { longitude, latitude, height } = cartographic;
// // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
// const current = Cesium.Cartesian3.fromRadians(
// longitude,
// latitude,
// height
// )
// //根据中心点坐标计算出的地表坐标点
// const surface = Cesium.Cartesian3.fromRadians(
// cartographic.longitude, //经度
// cartographic.latitude, //纬度
// 0 //高度
// )
// //根据中心点坐标和height值计算出的新的坐标点
// const offset = Cesium.Cartesian3.fromRadians(
// longitude, latitude, 0
// );
// //更新tileset模型矩阵(modelMatrix)的,实现tileset位置的平移变换
// const translation = Cesium.Cartesian3.subtract(
// offset, //根据中心点坐标和height值计算出的新的坐标点
// surface, //根据中心点坐标计算出的地表坐标点
// new Cesium.Cartesian3()
// );
// tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
// //tileset加载完成监听
// // tileset.tileLoad.addEventListener(function (tile) {
// // let content = tile.content;
// // // let featuresLength = content.featuresLength;
// // let feature = content.getFeature(0);
// // //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
// // const cartographicMesh = Cesium.Cartographic.fromCartesian(
// // feature._content._model._boundingSphere.center
// // );
// // // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
// // const currentMesh = Cesium.Cartesian3.fromRadians(
// // cartographicMesh.longitude, //经度
// // cartographicMesh.latitude, //纬度
// // cartographicMesh.height
// // )
// // //根据中心点坐标计算出的地表坐标点
// // const surfaceMesh = Cesium.Cartesian3.fromRadians(
// // cartographicMesh.longitude, //经度
// // cartographicMesh.latitude, //纬度
// // 2 //高度
// // )
// // })
// //视野转到tileset模型
// viewer.zoomTo(
// tileset,
// new Cesium.HeadingPitchRange(
// -4.0,
// -0.65,
// 500
// )
// );
// that.getEquipmentList();
// });
// // 监听鼠标左键点击事件
// var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
// handler.setInputAction(function (click) {
// var feature = viewer.scene.pick(click.position);
// console.log("feature",feature);
// console.log("_attrs", 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);
// that.intervalequ = setInterval(() => {
// that.getEquipmentList();
// },60000)
//*****cesium加载3dtiles*****//
console.log('');
//*****cesium加载.glb格式的文件*****//
//1、viewer.scene.primitives.add
// var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.1);
// var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
// var url = "factory.glb";
// // 加载 glb 模型
// var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
// url: url,
// modelMatrix: modelMatrix,
// scale: 1000// 可选：设置模型缩放比例
// }));
// // 监听模型加载完成事件
// model.readyPromise.then(function(model) {
// console.log('模型加载完成:', model);
// // 计算模型包围盒的边界
// var boundingSphere = model.boundingSphere;
// // 将相机焦点移动到模型的包围球中心
// viewer.camera.flyToBoundingSphere(boundingSphere, {
// duration: 0 // 设置飞行动画持续时间（单位：秒）
// });
// // 设置相机跟随模型
// viewer.trackedEntity = model;
// }).otherwise(function(error) {
// console.error('模型加载失败:', error);
// });
//2、viewer.entities.add
var url = "factory.glb";
var height = 0;
viewer.entities.removeAll() //加载之前先清楚所有entity
var position = Cesium.Cartesian3.fromDegrees(87.62594666147378, 42.975362631477815, height)
var heading = Cesium.Math.toRadians(310) //135度转弧度
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 modelEntity = viewer.entities.add({
name: 'photon',
position: position,
orientation: orientation,
model: {
uri: url,//注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
scale: 1.0,//缩放比例
minimumPixelSize: 256,//最小像素大小，可以避免太小看不见
maximumScale: 20000,//模型的最大比例尺大小。minimumPixelSize的上限
incrementallyLoadTextures: true,//加载模型后纹理是否可以继续流入
shadows: Cesium.ShadowMode.ENABLED,
heightReference: Cesium.HeightReference.NONE
},
})
viewer.trackedEntity = modelEntity; // 聚焦模型
viewer.zoomTo(modelEntity, new Cesium.HeadingPitchRange(-4.2, -0.5, 30));
that.getEquipmentList();
// 监听鼠标左键点击事件
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (click) {
var feature = viewer.scene.pick(click.position);
console.log("feature",feature);
console.log("_attrs", 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);
//*****cesium加载3dtiles*****//
//*****cesium加载.glb格式的文件*****//
// 隐藏地球
// viewer.scene.globe.show = false
// 设置模型位置
// var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.1);
// var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
// var url = "/glb/photon4.glb";
// // 加载 glb 模型
// var model = viewer.scene.primitives.add(Cesium.Model.fromGltf({
// url: url,
// modelMatrix: modelMatrix,
// scale: 1000// 可选：设置模型缩放比例
// }));
// // 监听模型加载完成事件
// model.readyPromise.then(function(model) {
// console.log('模型加载完成:', model);
// // 计算模型包围盒的边界
// var boundingSphere = model.boundingSphere;
// // 将相机焦点移动到模型的包围球中心
// viewer.camera.flyToBoundingSphere(boundingSphere, {
// duration: 0 // 设置飞行动画持续时间（单位：秒）
// });
// // 设置相机跟随模型
// viewer.trackedEntity = model;
// }).otherwise(function(error) {
// console.error('模型加载失败:', error);
// });
// var url = "/glb/photon4.glb";
// var height = 0;
// viewer.entities.removeAll() //加载之前先清楚所有entity
// var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height)
// var heading = Cesium.Math.toRadians(310) //135度转弧度
// 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 modelEntity = viewer.entities.add({
// name: 'photon',
// position: position,
// orientation: orientation,
// model: {
// uri: url,//注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
// scale: 1.0,//缩放比例
// minimumPixelSize: 2500,//最小像素大小，可以避免太小看不见
// maximumScale: 20000,//模型的最大比例尺大小。minimumPixelSize的上限
// incrementallyLoadTextures: true,//加载模型后纹理是否可以继续流入
// runAnimations: true,//是否启动模型中制定的gltf动画
// clampAnimations: true,//制定gltf动画是否在没有关键帧的持续时间内保持最后一个姿势
// shadows: Cesium.ShadowMode.ENABLED,
// heightReference: Cesium.HeightReference.NONE
// },
// })
// // // 等待模型加载完成
// // modelEntity.model.readyPromise.then(function(model) {
// // // 此时模型已经加载完成
// // // 获取模型的网格（primitives）
// // var primitives = model.primitives;
// // // 遍历所有网格
// // primitives.forEach(function(primitive) {
// // // 每个 primitive 可能是一个网格（GeometryInstance）
// // // 你可以在这里处理每个网格，例如更改其材质或颜色
// // // 获取几何体实例
// // var geometryInstance = primitive.geometryInstance;
// // // 输出网格信息
// // console.log('Mesh:', geometryInstance);
// // });
// // }).otherwise(function(error) {
// // // 如果加载过程中发生错误，这里会被调用
// // console.error('模型加载失败:', error);
// // });
// viewer.trackedEntity = modelEntity; // 聚焦模型
// viewer.zoomTo(modelEntity);
// //点
// viewer.entities.add({
// // fromDegrees（经度，纬度，高度，椭球，结果）从以度为单位的经度和纬度值返回Cartesian3位置
// position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 1),
// point: {
// // 点的大小（像素）
// pixelSize: 5,
// // 点位颜色，fromCssColorString 可以直接使用CSS颜色
// color: Cesium.Color.fromCssColorString('#ee0000'),
// // 边框颜色
// outlineColor: Cesium.Color.fromCssColorString('#fff'),
// // 边框宽度(像素)
// outlineWidth: 2,
// // 显示在距相机的距离处的属性，多少区间内是可以显示的
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
// // 是否显示
// show: true
// }
// });
// //图片
// // console.log('Cesium.Cartesian3.fromDegrees',Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.5))
// viewer.entities.add({
// position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0.5),
// billboard: {
// // 图像地址，URI或Canvas的属性
// image: 'img/elec.png',
// // 设置颜色和透明度
// color: Cesium.Color.WHITE.withAlpha(0.8),
// // 高度（以像素为单位）
// height: 50,
// // 宽度（以像素为单位）
// width: 50,
// // 逆时针旋转
// rotation: 20,
// // 大小是否以米为单位
// sizeInMeters: false,
// // 相对于坐标的垂直位置
// verticalOrigin: Cesium.VerticalOrigin.CENTER,
// // 相对于坐标的水平位置
// horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
// // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
// pixelOffset: new Cesium.Cartesian2(10, 0),
// // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
// scale: 1.0,
// // 显示在距相机的距离处的属性，多少区间内是可以显示的
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 20000),
// // 是否显示
// show: true
// }
// });
// setTimeout(() => {
// if (modelEntity.model.ready) {
// console.log('Model is loaded',modelEntity.model);
// } else {
// console.log('Model is still loading',modelEntity.model);
// }
// }, 10000);
// Cesium.when(modelEntity.model.readyPromise).then(function(model) {
// window.alert(model);
// }).otherwise(function(error){
// window.alert(error);
// });
// // modelEntity.model.readyPromise.then(function(model) {
// // // 模型已加载，可以进行后续操作
// // console.log('Model loaded successfully')
// // }).otherwise(function(error) {
// // // 模型加载失败，处理错误
// // console.error('Failed to load model', error);
// // });
// // // 监听模型加载事件
// // modelEntity.readyPromise.then(function(entity) {
// // var modelInstance = entity._modelInstance;
// // if (!modelInstance || !modelInstance.ready) {
// // console.error('模型未加载或不可用');
// // return;
// // }
// // var geometryInstances = modelInstance.geometryInstances;
// // if (!geometryInstances || geometryInstances.length === 0) {
// // console.error('模型没有几何体实例');
// // return;
// // }
// // var meshData = [];
// // geometryInstances.forEach(function(geometryInstance) {
// // var attributes = geometryInstance.attributes;
// // if (attributes && attributes.position) {
// // var positions = attributes.position.values;
// // // 根据你的模型数据格式，处理positions数组以获取三角形数据
// // // ...
// // meshData.push(/* 三角形数据 */);
// // }
// // });
// // console.log("模型的网格数据：", meshData);
// // }).otherwise(function(error) {
// // console.error("无法加载模型:", error);
// // });
// 判断点击位置是否有模型被选中
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);
// // // 确保entity实际上是一个模型实体
// // if (modelEntity.model) {
// // // 监听模型的加载完成事件
// // modelEntity.model.readyPromise.then(function(model) {
// // // 模型已加载完成，可以获取其网格数据
// // var geometry = model._glTFModel.scene.children[0].geometry; // 假设模型只有一个节点和几何体
// // var attributes = geometry.attributes;
// // var positions = attributes.position.array; // 获取顶点位置数组
// // console.log("模型的网格数据已加载");
// // }).otherwise(function(error) {
// // // 模型加载失败
// // console.error("无法加载模型:", error);
// // });
// // } else {
// // console.error("添加的实体不是一个模型实体");
// // }
// // // 获取实体集合
// // var entityCollection = viewer.entities;
// // // 创建一个空数组用于存储模型元素
// // var modelEntities = [];
// // // 遍历实体集合
// // entityCollection.values.forEach(function(entity) {
// // // 检查实体是否为模型实体
// // if (entity.model) {
// // // 将模型实体添加到数组中
// // modelEntities.push(entity.mesh);
// // }
// // });
// // // // 输出模型元素数组
// // console.log(modelEntities);
// // // 创建一个实体集合
// // var entityCollection = new Cesium.EntityCollection();
// // // 假设modelEntities是一个包含每个模型元素的数组
// // modelEntities.forEach(function(modelEntity) {
// // // 创建一个实体来表示标注
// // var annotationEntity = entityCollection.add(new Cesium.Entity({
// // position: modelEntity.position, // 设置标注位置为模型元素的位置
// // billboard: {
// // image: 'img/elec.png', // 设置标注的图片路径
// // scale: 0.5, // 设置标注的大小
// // // 可以根据需要设置更多的标注属性，比如颜色、偏移等
// // }
// // }));
// // });
// // // 将实体集合添加到场景中
// // viewer.entities.add(entityCollection);
// // 监听鼠标左键点击事件
// viewer.screenSpaceEventHandler.setInputAction(function (click) {
// var pickedObject = viewer.scene.pick(click.position);
// console.log("pickedObject",pickedObject);//被点击的模型中的mesh
// if (Cesium.defined(pickedObject) && pickedObject.id) {
// // 模型被点击了
// var mesh = pickedObject.mesh;//modelMesh
// var node = pickedObject.node;//modelNode
// var position = pickedObject.id.position;
// // 处理模型信息和位置
// console.log('模型信息:', mesh);
// console.log('模型信息:', node);
// console.log('位置:', position);
// }
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//*****cesium加载.glb格式的文件*****//
},
methods: {
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 };
@ -504,14 +515,14 @@ export default {
//获取设备列表
getEquipmentList() {
let that = this;
that.removePointer();
// 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) + 5;
let height = parseInt(item.coordinates.height) + 0.5;
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 };
@ -570,11 +581,30 @@ export default {
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 = []
// console.log(viewer.entities.values)
let allEntitiesPoint = [];
this.viewer.entities.values.forEach((item) => {
allEntitiesPoint.push(item.id)
})
@ -586,6 +616,13 @@ export default {
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)
@ -604,48 +641,27 @@ export default {
})
console.log("allEntitiesPoint",allEntitiesPoint)
},
//获取类型对应的图标
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";
}
},
//点击大类按钮
showChange(val) {
let classname = 'bottomMenu' + val;
document.getElementsByClassName(classname)[0].style.display = 'block';
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 = null;
},
}
</script>
<style>
@ -661,7 +677,7 @@ export default {
position: fixed;
right: 22%;
bottom: 10%;
width: 20%;
width: 380px;
min-height: 20vh;
min-width: 360px;
background: rgba(0, 50, 56, 0.8);
@ -679,6 +695,11 @@ export default {
left: 10px;
top:10px;
}
.infoDom_toDetail{
position: absolute;
right: 10px;
top:10px;
}
.bodyTitle{
height: 24px;
line-height: 24px;
@ -777,11 +798,11 @@ export default {
.bottomMenu_item>.el-checkbox__input.is-checked>.el-checkbox__inner {
width: 20px;
height: 20px;
background-color: #00f6ff;
border-color: #00f6ff;
background-color: #1ca50a;
border-color: #1ca50a;
}
.bottomMenu_item>.el-checkbox__input.is-checked+.el-checkbox__label{
color: #00f6ff;
color: #1ca50a;
}
.bottomMenu_item>.el-checkbox__input.is-checked .el-checkbox__inner::after{
height: 11px;
@ -790,4 +811,27 @@ export default {
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 ,.8);
}
.infoCharts{
width: 100%;
height: 150px;
}
</style>

26
src/views/bigScreen/enpComponents/cems.vue
View File

@ -10,7 +10,7 @@
</el-header>
<el-main class="nopadding">
<scTable :data="tableData" style="width: 100%;" size="large" :apiObj="apiObj" row-key="id"
:params="params" hidePagination hideDo @row-click="rowClick">
:params="params" hidePagination hideDo @row-click="rowClick">
<el-table-column type="index" width="50" />
<el-table-column prop="number" label="设备编号" width="120" />
<el-table-column prop="name" label="设备名称" width="160" />
@ -106,6 +106,20 @@
import * as echarts from "echarts";
import { runningStateEnum } from "@/utils/enum.js";
export default {
props: {
directDetail: {
type: Boolean,
default: () => {
return false;
},
},
eqId: {
type: String,
default: () => {
return '';
},
},
},
data() {
return {
runningStateEnum,
@ -168,6 +182,16 @@ export default {
}
},
mounted() {
if (this.directDetail) {
this.currentEquipmentId = this.eqId;
this.currentEquipmentName = this.eqId;
this.query.equipment_id = this.eqId;
this.$nextTick(() => { this.handleQuery() })
}
console.log(runningStateEnum[50])
this.initTimeRange()
},

13
src/views/bigScreen/enpComponents/cems2.vue
View File

@ -12,7 +12,7 @@
<scTable :data="tableData" style="width: 100%;" size="large" row-key="id" v-loading="tableLoading">
<el-table-column type="index" width="50" />
<el-table-column prop="equipment_number" label="设备编号" width="120" />
<el-table-column prop="drain_name" label="排口名称" width="180" />
<el-table-column prop="equipment_name" label="设备名称" width="180" />
<el-table-column prop="metric_0" label="0分钟" />
<el-table-column prop="metric_5" label="5分钟" />
<el-table-column prop="metric_10" label="10分钟" />
@ -29,9 +29,11 @@
<el-table-column prop="dust_alarm" label="预警值" />
<el-table-column label="是否达标" width="120">
<template #default="scope">
<span v-if="scope.row.metric_hour < scope.row.dust_alarm"
<div v-if="scope.row.dust_alarm">
<span v-if="scope.row.metric_hour < scope.row.dust_alarm"
style="color:green;font-weight: bold;">达标</span>
<span v-else style="color:red;font-weight: bold;">未达标</span>
<span v-else style="color:red;font-weight: bold;">未达标</span>
</div>
</template>
</el-table-column>
</scTable>
@ -50,7 +52,8 @@ export default {
"year": 2024,
"month": 1,
"metric": "dust_rtd",
"drain_type": 10
"drain_type": 10,
"ecate_code":"cems"
}
}
},
@ -69,7 +72,7 @@ export default {
getTableData() {
this.initDate()
this.tableLoading = true
this.$API.bi.dataset.exec.req('enp_edata_metric', { query: this.query, raise_exception: true }).then(res => {
this.$API.bi.dataset.exec.req('enp_edata_metric_nodrain', { query: this.query, raise_exception: true }).then(res => {
let data = res.data2.ds0
for (let i = 0, y = data.length; i < y; i++) {
for (let key in data[i]) {

10
src/views/bigScreen/enpComponents/innerclean.vue
View File

@ -17,7 +17,7 @@
</div>
</div>
<div class="right-panel">
<el-select v-model="query.cate" placeholder="车辆分类" @change="handleQuery" clearable>
<el-select v-model="query.cate__code" placeholder="车辆分类" @change="handleQuery" clearable>
<el-option v-for="item in cateOptions" :key="item.id" :label="item.name"
:value="item.id"></el-option>
</el-select>
@ -27,7 +27,7 @@
</div>
</el-header>
<el-main>
<scTable :data="tableData" :apiObj="apiObj" :params="params" :query="query" size="large" style=""
<scTable ref="table" :data="tableData" :apiObj="apiObj" :params="params" :query="query" size="large" style=""
@row-click="rowClick">
<el-table-column type="index" width="50" />
<el-table-column prop="number" label="车牌号"></el-table-column>
@ -53,10 +53,8 @@ export default {
query: {},
params: { type: 30, tags: 'carwash' },
cateOptions: [
{ id: 1, name: '场内运输车辆' },
{ id: 2, name: '非路道移动机械' },
// { id: 3, name: '环卫车辆' },
// { id: 4, name: '其他车辆' },
{ id: 'inner_car', name: '场内运输车辆' },
{ id: 'inner_car2', name: '非路道移动机械' },
],
apiObj: this.$API.em.equipment.list,

31
src/views/bigScreen/enpComponents/orgwryList.vue
View File

@ -226,6 +226,8 @@
<div id="dataChart" style="width: 100%; height:280px;margin-top:4px; padding: 4px"></div>
<div style="height: 4px"></div>
<div id="dataChart2" style="width: 100%; height:140px; padding: 4px"></div>
<div style="height: 4px"></div>
<div id="dataChart3" style="width: 100%; height:140px;padding: 4px"></div>
</div>
</el-main>
@ -236,6 +238,20 @@
<script>
import * as echarts from "echarts";
export default {
props: {
directDetail: {
type: Boolean,
default: () => {
return false;
},
},
eqId: {
type: String,
default: () => {
return '';
},
},
},
data() {
return {
count: 0,
@ -380,8 +396,11 @@ export default {
var that = this;
var chartDom = document.getElementById('dataChart');
var chartDom2 = document.getElementById('dataChart2');
var chartDom3 = document.getElementById('dataChart3');
var myChart = echarts.init(chartDom, 'dark');
var myChart2 = echarts.init(chartDom2, 'dark');
var myChart3 = echarts.init(chartDom3, 'dark');
echarts.connect([myChart, myChart2,myChart3])
let params = {
query: that.biquery,
// raise_exception: true
@ -420,7 +439,17 @@ export default {
newOption2.title.text = that.eqs.name;
myChart2.setOption(newOption2);
myChart2.hideLoading()
echarts.connect([myChart, myChart2])
})
}).then(() => {
params['equipment_id'] = this.eqz.id
that.$API.bi.dataset.exec.req('eq_status', params).then(res3 => {
let newOption3 = Object.assign({}, this.basicOption);
newOption3.yAxis.minInterval = 1;
newOption3.dataset.source = res3.data.ds0;
newOption3.dataZoom.startValue = that.biquery.start_time;
newOption3.title.text = that.eqz.name;
myChart3.setOption(newOption3);
myChart3.hideLoading()
})
})
},

5
src/views/bigScreen/enpComponents/pollutant.vue
View File

@ -338,8 +338,9 @@ export default {
} else if (type == 2) {
newOption.series = [
{ type: 'line', encode: { y: 'tsp', seriesName: ["tsp"] } },
{ type: 'line', encode: { y: '温度', seriesName: ["温度"] } },
{ type: 'line', encode: { y: '压力', seriesName: ["压力"] } }]
// { type: 'line', encode: { y: '温度', seriesName: ["温度"] } },
// { type: 'line', encode: { y: '压力', seriesName: ["压力"] } }
]
newOption.title.text = that.eqc.name;
newOption.yAxis.minInterval = 1;
myChart2.setOption(newOption);

7
src/views/bigScreen/enpComponents/transport.vue
View File

@ -50,7 +50,12 @@
<el-table-column prop="door_name" label="门禁名称"></el-table-column>
<el-table-column prop="vehicle_number" label="车辆识别代号（VIN）"></el-table-column>
<el-table-column prop="emission_standard" label="排放标准"></el-table-column>
<el-table-column prop="" label="新能源"></el-table-column>
<el-table-column prop="" label="新能源">
<template #default="scope">
<el-tag type="info" v-if="scope.row.is_new_energy">是</el-tag>
<el-tag v-else type="danger">否</el-tag>
</template>
</el-table-column>
</scTable>
</el-main>
</el-container>

20
src/views/bigScreen/index_enp_blue.vue
View File

@ -238,7 +238,7 @@
<div style="flex-shrink:1;width: 100px;align-self: center;display: flex;flex-direction: column;">
<div class="todyCarItem" v-for="item in pieData" :key="item">
<span style="color: #d5d5d5;">{{ item.name }}</span>
<span style="font-size: 30px;color: #00f6ff;font-weight: bold;display: inline-block;text-align: center;">{{ item.value }}</span>
<span style="font-size: 35px;color: #00f6ff;font-weight: bold;display: inline-block;text-align: center;">{{ item.value }}</span>
</div>
</div>
</div>
@ -385,7 +385,7 @@ export default {
series: {
name: '今日车辆数量统计',
type: 'pie',
radius: [35, 45],
radius: [35, 55],
center: ['50%', '50%'],
emphasis: {
focus: 'series',
@ -436,6 +436,7 @@ export default {
cemsData: [],
tspData: [],
wData: [],
intervalinfo:null,//窗口数据更新定时器
}
},
created() {
@ -448,15 +449,23 @@ export default {
that.getleft1Data();
that.getleft2Data();
that.getleft3Data();
this.getright1Data();
this.getright2Data();
this.getright3Data();
that.getright1Data();
that.getright2Data();
that.getright3Data();
that.initCharts();
that.addListener();
that.$nextTick(() => {
setTimeout(function () {
}, 5000);
});
// that.intervalinfo = setInterval(() => {
// that.getleft1Data();
// // that.getleft2Data();
// that.getleft3Data();
// that.getright1Data();
// that.getright2Data();
// that.getright3Data();
// },60000)
},
beforeUnmount() {
// 性能优化
@ -758,6 +767,7 @@ export default {
},
},
unmounted() {
this.intervalinfo = null;
document.documentElement.classList.remove("dark");
this.$TOOL.data.remove("APP_DARK")
},