This commit is contained in:
caoqianming 2024-03-13 11:19:36 +08:00
commit 8311cb7d1b
19 changed files with 362 additions and 425 deletions

View File

@ -17,6 +17,7 @@
"babylonjs": "^6.16.0", "babylonjs": "^6.16.0",
"babylonjs-gui": "^6.16.0", "babylonjs-gui": "^6.16.0",
"babylonjs-loaders": "^6.16.0", "babylonjs-loaders": "^6.16.0",
"cesium": "1.75",
"codemirror": "5.65.5", "codemirror": "5.65.5",
"core-js": "3.29.0", "core-js": "3.29.0",
"cropperjs": "1.5.13", "cropperjs": "1.5.13",

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

BIN
public/img/enp_blue/TSP.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
public/img/enp_blue/ccq.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
public/img/enp_blue/hwc.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
public/img/enp_blue/xct.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@ -14,18 +14,11 @@
<%= VUE_APP_TITLE %> <%= VUE_APP_TITLE %>
</title> </title>
<link type="text/css" href="./jsmap/jsmap.css" rel="stylesheet" /> <link type="text/css" href="./jsmap/jsmap.css" rel="stylesheet" />
<!-- 本地引用 -->
<!-- <script src="/cesium/Cesium.js"></script> --> <!-- <script src="/cesium/Cesium.js"></script> -->
<script src="http://49.232.14.174:2226/pf/cesium/Cesium.js"></script> <!-- <script src="http://49.232.14.174:2226/pf/cesium/Cesium.js"></script> -->
<!--引入cesium基础lib--> <!--引入cesium基础lib-->
<!-- <link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" /> <!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js" type="text/javascript"></script> -->
<script src="http://mars3d.cn/lib/Cesium/Cesium.js" type="text/javascript"></script>
<script src="http://mars3d.cn/lib/turf/turf.min.js" type="text/javascript"></script> -->
<!--引入mars3d库lib-->
<!-- <link href="http://mars3d.cn/lib/mars3d/mars3d.css" rel="stylesheet" type="text/css" />
<script src="http://mars3d.cn/lib/mars3d/mars3d.js" type="text/javascript"></script> -->
<!--引入mars3d库插件lib按需引入-->
<!-- <script src="http://mars3d.cn/lib/mars3d/plugins/space/mars3d-space.js" type="text/javascript"></script> -->
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script> <script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./webVideoCtrl.js"></script> <script type="text/javascript" src="./webVideoCtrl.js"></script>
<script type="text/javascript" src="./jsVideoPlugin-1.0.0.min.js"></script> <script type="text/javascript" src="./jsVideoPlugin-1.0.0.min.js"></script>

View File

@ -156,19 +156,19 @@ export default {
.enpMenu.el-dropdown-menu { .enpMenu.el-dropdown-menu {
padding: 0.7vh 0.7vh 0.2vh; padding: 0.7vh 0.7vh 0.2vh;
background: linear-gradient(to right, #10608e, #1dabfd); //background: linear-gradient(to right, #10608e, #1dabfd);
// background: linear-gradient(to right, #053949, #107b90); background: linear-gradient(to right, #053949, #107b90);
} }
.enpMenu>.el-dropdown-menu__item { .enpMenu>.el-dropdown-menu__item {
margin-bottom: 0.5vh; margin-bottom: 0.5vh;
background: linear-gradient(to right, #29d, #1dabfd); //background: linear-gradient(to right, #29d, #1dabfd);
// background: linear-gradient(to right, #1b8fa4, #107b90); background: linear-gradient(to right, #1b8fa4, #107b90);
} }
.enpMenu>.el-dropdown-menu__item:not(.is-disabled):focus { .enpMenu>.el-dropdown-menu__item:not(.is-disabled):focus {
background: linear-gradient(to right, #10608e, #1dabfd); //background: linear-gradient(to right, #10608e, #1dabfd);
// background: linear-gradient(to right, #053949, #107b90); background: linear-gradient(to right, #053949, #107b90);
color: #ffffff; color: #ffffff;
} }

View File

@ -13,9 +13,8 @@ import preventReClick from './utils/preventReClick'
import Print from './utils/print2' import Print from './utils/print2'
import Xlsx from './utils/xlsx' import Xlsx from './utils/xlsx'
import DataVVue3 from '@kjgl77/datav-vue3' import DataVVue3 from '@kjgl77/datav-vue3'
import * as Cesium from '../public/cesium/Cesium.js' import * as Cesium from 'cesium'
import '../public/cesium/Widgets/widgets.css' // import 'cesium/Source/Widgets/widgets.css'
// Vue.prototype.Cesium = Cesium
const app = createApp(App); const app = createApp(App);

View File

@ -1,14 +1,51 @@
<template> <template>
<div id="cesiumContainer" style="width: 100%; height: 100%;"></div> <div style="width: 100%; height: 100%;">
<div id="cesiumContainer" style="width: 100%; height: 100%;"></div>
<div v-show="activeIndex == 0" class="btns_enp">
<div class="btns" :class="bindBtnClass(10)" @click="equipmentTypeChange(10)">生产设备</div>
<div class="btns" :class="bindBtnClass(30)" @click="equipmentTypeChange(30)">治理设备</div>
<div class="btns" :class="bindBtnClass(40)" @click="equipmentTypeChange(40)">监测设备</div>
<div class="btns" :class="bindBtnClass(50)" @click="equipmentTypeChange(50)">监控设备</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}}
</h4>
<div class="infoBody">
<p class="bodyTitle"><span class="titleIcon"></span>实时状态</p>
<div class="bodyContainer">
<div class="rdio-group">
<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>
<p class="bodyTitle"><span class="titleIcon"></span>历史监测数据</p>
</div>
</div>
</div>
</template> </template>
<script> <script>
import * as Cesium from 'cesium';
export default { export default {
name: 'cesium', name: 'cesium',
props: ['activeIndex'],
data() { data() {
return { return {
viewer: null objItem: {},
activeBtns: 10,
infoShow:false,
} }
}, },
created() { created() {
@ -16,50 +53,47 @@ export default {
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);
}, },
// watch: {
// activeBtns:function(newVal, oldVal) {
// console.log('activeBtns :', newVal, oldVal);
// this.getInfo(newVal);
// }
// },
mounted() { mounted() {
let that = this;
Cesium.Ion.defaultAccessToken = Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1Yzg3ZDEzOS0zN2Q1LTQ2N2YtOWJhMy1mNWU4MWY5N2ExYzkiLCJpZCI6MjAxMzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzY4MTIzNzR9.SfNeHedDyXWLIPiNbc4qSsHBACm7uvaqRsQprL2J4Cw"; "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1Yzg3ZDEzOS0zN2Q1LTQ2N2YtOWJhMy1mNWU4MWY5N2ExYzkiLCJpZCI6MjAxMzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzY4MTIzNzR9.SfNeHedDyXWLIPiNbc4qSsHBACm7uvaqRsQprL2J4Cw";
const viewer = new Cesium.Viewer("cesiumContainer", { const viewer = new Cesium.Viewer("cesiumContainer",{
// shadows: false,// animation:false,//
animation: false, //, baseLayerPicker:false,//
// shouldAnimate: false, fullscreenButton:false,//
homeButton: false, //Home, geocoder:false,//
fullscreenButton: false, //F11, homeButton:false,//
// baseLayerPicker: true, //, infoBox:false,//
// geocoder: true, // sceneModePicker:false,//
timeline: false, //线 selectionIndicator:false,//
// sceneModePicker: true, // timeline:false,//
// selectionIndicator: false,// navigationHelpButton:false,//
// navigationHelpButton: false, // navigationInstructionsInitiallyVisible:false
// infoBox: true, // });
// requestRenderMode: true, //
// scene3DOnly: false, //3DGPU
// sceneMode: 3, // 1 2D 2 2D 3 3D Cesium.SceneMode
// fullscreenElement: document.body, //HTML
});
this.viewer = viewer; this.viewer = viewer;
// this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); // viewer.scene.globe.depthTestAgainstTerrain = false
// document.querySelector('.cesium-widget-credits').style.display = 'none'
// // viewer.scene.globe.depthTestAgainstTerrain = false
// //
// viewer.scene.screenSpaceCameraController.minimumZoomDistance = 0 // viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1
//logo //logo
viewer.scene.globe.enableLighting = true; // viewer.scene.globe.enableLighting = true;
viewer._cesiumWidget._creditContainer.style.display = 'none'; // viewer._cesiumWidget._creditContainer.style.display = 'none';
var camera = viewer.camera;
//*****cesium3dtiles*****// //*****cesium3dtiles*****//
const tileset = new Cesium.Cesium3DTileset({ const tileset = new Cesium.Cesium3DTileset({
url: "/3dtiles/tileset.json", url: "/3dtiles/tileset.json",
// url: "http://49.232.14.174:2226/pf/3dtiles/tileset.json", // url: "http://49.232.14.174:2226/pf/3dtiles/tileset.json",
}); });
//
tileset.readyPromise.then(function (tileset) { tileset.readyPromise.then(function (tileset) {
viewer.scene.primitives.add(tileset); viewer.scene.primitives.add(tileset);
console.log("tileset",tileset);
//tileset //tileset
const cartographic = Cesium.Cartographic.fromCartesian( const cartographic = Cesium.Cartographic.fromCartesian(
tileset.boundingSphere.center tileset.boundingSphere.center
@ -72,14 +106,12 @@ export default {
latitude, latitude,
height height
) )
console.log('current', current);
// //
const surface = Cesium.Cartesian3.fromRadians( const surface = Cesium.Cartesian3.fromRadians(
cartographic.longitude, // cartographic.longitude, //
cartographic.latitude, // cartographic.latitude, //
0 // 0 //
) )
debugger;
//height //height
const offset = Cesium.Cartesian3.fromRadians( const offset = Cesium.Cartesian3.fromRadians(
longitude, latitude, 0 longitude, latitude, 0
@ -91,59 +123,30 @@ export default {
new Cesium.Cartesian3() new Cesium.Cartesian3()
); );
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation); tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
//tileset
tileset.tileLoad.addEventListener(function(tile) { // tileset.tileLoad.addEventListener(function (tile) {
let content = tile.content; // let content = tile.content;
let featuresLength = content.featuresLength; // // let featuresLength = content.featuresLength;
// console.log(""); // let feature = content.getFeature(0);
// console.log(featuresLength); // //tileset
// console.log(""); // const cartographicMesh = Cesium.Cartographic.fromCartesian(
let feature = content.getFeature(0); // feature._content._model._boundingSphere.center
// console.log(feature); // );
// feature // //
// console.log(feature._content._model._boundingSphere.center) // const currentMesh = Cesium.Cartesian3.fromRadians(
let featurePosition = feature._content._model._boundingSphere.center; // cartographicMesh.longitude, //
//tileset // cartographicMesh.latitude, //
const cartographicMesh = Cesium.Cartographic.fromCartesian( // cartographicMesh.height
feature._content._model._boundingSphere.center // )
); // //
// // const surfaceMesh = Cesium.Cartesian3.fromRadians(
const currentMesh = Cesium.Cartesian3.fromRadians( // cartographicMesh.longitude, //
cartographicMesh.longitude, // // cartographicMesh.latitude, //
cartographicMesh.latitude, // // 2 //
cartographicMesh.height // )
)
// console.log('currentMesh', currentMesh); // })
// //tileset
const surfaceMesh = Cesium.Cartesian3.fromRadians(
cartographicMesh.longitude, //
cartographicMesh.latitude, //
2 //
)
// console.log('surfaceMesh', surfaceMesh);
// let position = feature.getGeometry().getPosition()
// var labelEntity = viewer.entities.add({
// position: Cesium.Cartesian3.fromDegrees(featurePosition.x, featurePosition.y, 2),
// // point: {
// // pixelSize: 8,
// // color: Cesium.Color.YELLOW
// // },
// label: {
// text: "",
// font: 'bold 14px sans-serif',
// fillColor: Cesium.Color.BLACK,
// outlineWidth: 2,
// style: Cesium.LabelStyle.FILLED_AND_OUTLINED,
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
// pixelOffset: new Cesium.Cartesian2(-16, -16),
// scale: 1.0,
// show: true
// }
// });
})
viewer.zoomTo( viewer.zoomTo(
tileset, tileset,
new Cesium.HeadingPitchRange( new Cesium.HeadingPitchRange(
@ -152,48 +155,34 @@ export default {
500 500
) )
); );
var boundingSphere = tileset.boundingSphere; // that.equipmentTypeChange(10);
}); });
//
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (movement) { handler.setInputAction(function (click) {
var feature = viewer.scene.pick(movement.position); var feature = viewer.scene.pick(click.position);
console.log(feature); console.log("feature",feature);
let featurePosition = feature._content._model._boundingSphere.center; console.log("_attrs", feature.id._attrs);
const cartographicFeature = Cesium.Cartographic.fromCartesian( that.objItem = feature.id._attrs;
feature._content._model._boundingSphere.center that.getInfo(feature.id._id);
); if (Cesium.defined(feature)) {
console.log(cartographicFeature); //
var position = Cesium.Cartesian3.fromDegrees(cartographicFeature.longitude, cartographicFeature.latitude,1); var pickedPosition = viewer.scene.pickPosition(click.position);
// if (Cesium.defined(pickedPosition)) {
var entity = viewer.entities.add({ //
name: 'Text', var cartographic = Cesium.Cartographic.fromCartesian(pickedPosition);
position: position, var longitude = Cesium.Math.toDegrees(cartographic.longitude);//
label: { var latitude = Cesium.Math.toDegrees(cartographic.latitude);//
text: 'Hello, Cesium!', var height = cartographic.height; //
font: '24px sans-serif', // console.log('Longitude: ' + longitude);
color:Cesium.Color.fromCssColorString('#ff0000'), // console.log('Latitude: ' + latitude);
fillColor: Cesium.Color.WHITE, // console.log('Height: ' + height);
outlineColor: Cesium.Color.BLACK, //
outlineWidth: 2, //
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
pixelOffset: new Cesium.Cartesian2(0, -50) }
} }
});
if (Cesium.defined(feature) && feature instanceof Cesium.Cesium3DTileFeature) {
var propertyNames = feature.getPropertyNames();
var length = propertyNames.length;
for (var i = 0; i < length; ++i) {
var propertyName = propertyNames[i];
console.log(propertyName + ": " + feature.getProperty(propertyName));
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//*****cesium3dtiles*****// //*****cesium3dtiles*****//
//*****cesium.glb*****// //*****cesium.glb*****//
// //
@ -446,75 +435,213 @@ export default {
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK); // }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//*****cesium.glb*****// //*****cesium.glb*****//
}, },
mothods: { methods: {
mapViweinit() { bindBtnClass(index) {
this.fly({ lon: 117.077665, lat: 30.838531, h: 50000, duration: 1 }) let classInfo = { btns: true, btnsActive: false };
if (index == this.activeBtns) {
classInfo.btnsActive = true;
}
return classInfo;
}, },
//id 使viewer.camera.flyTo //
flyTo(key) { getItemIcon(cateCode) {
let rider = viewer.entities.getById(key) switch (cateCode) {
let offset = new Cesium.HeadingPitchRange(0.10074559078582723, -0.49977131690671905, 3000) case "aqms":
viewer.flyTo(rider, { return "img/enp_blue/jcwz.png";
offset, case "tsp":
duration: 0.8 return "img/enp_blue/TSP.png";
case "cems":
return "img/enp_blue/xct.png";
case "wstation":
return "img/enp_blue/CEMS.png";
case "truck_clean":
return "img/enp_blue/hwc.png";
case "除尘器":
return "img/enp_blue/ccq.png";
case "干雾":
return "img/enp_blue/gwfkx.png";
case "雾炮":
return "img/enp_blue/gxswq.png";
case "监控设备":
return "img/enp_blue/jksb.png";
case "输送设备":
return "img/enp_blue/sssb.png";
case "eq":
return "img/enp_blue/zyscsb.png";
case "大型生产设备":
return "img/enp_blue/dxscsb.png";
}
},
//
equipmentTypeChange(index) {
let that = this;
that.removePointer();
that.activeBtns = index;
that.$API.em.equipment.list.req({ type: index,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 arrs = { name:item.name, lon: lon, lat:lat, height:height, id:item.id, type: 'display' };
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);
}
}) })
})
}, },
// //
createPoint(attrs, config) { creatgetInfoePoint(attrs, config) {
const { name = '', lon, lat, id, type = 'display' } = attrs const { name = '测试', lon, lat, id='11111', type = 'display' ,height} = attrs
const { height, show = true, fontSize, fillColor, pixelOffsetX, pixelOffsetY, image, imgWidth, imgHeight, textDistance, imgDistance } = config 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 * 1, lat * 1, height || 100), // position: Cesium.Cartesian3.fromDegrees(lon||117.08387268794274, lat||31.6557737395655433,height), //
label: { label: {
show: show, show: show,
text: name, text: name,
font: (fontSize || '12px') + ' monospace', font: (fontSize || '14px'),
// style: Cesium.LabelStyle.FILL_AND_OUTLINE, 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: true,// outline: false,//
outlineColor: Cesium.Color.WHITE, // outlineColor: Cesium.Color.WHITE, //
outlineWidth: fillWidth || 4, // outlineWidth: fillWidth || 4, //
showBackground: true, // showBackground: true, //
backgroundColor: Cesium.Color.fromCssColorString('#018081'), // backgroundColor: Cesium.Color.fromCssColorString('#1ca50a'), //
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // verticalOrigin: Cesium.VerticalOrigin.BOTTOM, //
pixelOffset: new Cesium.Cartesian2(pixelOffsetX || 50, pixelOffsetY || -30), // pixelOffset: new Cesium.Cartesian2(pixelOffsetX || 50, pixelOffsetY || -25), //
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, textDistance || 550000) // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, textDistance || 550000) //
}, },
billboard: { billboard: {
// //
image: image || '/public/img/ele.png', image: image || 'img/enp_blue/warning_enp.png',
width: imgWidth || 61, width: imgWidth || 30,
height: imgHeight || 113, height: imgHeight || 30,
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, imgDistance || 550000) // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, imgDistance || 550000) //
} }
}) })
}, },
// //
addPointer(obj) { addPointer(attrs, config) {
viewer.entities.add(obj) 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)
})
}, },
// //
removePointer() { removePointer() {
let allEntitiesPoint = [] let allEntitiesPoint = []
// console.log(viewer.entities.values) // console.log(viewer.entities.values)
this.viewer.entities.values.forEach((item) => {
viewer.entities.values.forEach((item) => {
allEntitiesPoint.push(item.id) allEntitiesPoint.push(item.id)
}) })
allEntitiesPoint.forEach((item) => { allEntitiesPoint.forEach((item) => {
const entity_obj = viewer.entities.getById(item) const entity_obj = this.viewer.entities.getById(item)
viewer.entities.remove(entity_obj) this.viewer.entities.remove(entity_obj)
}) })
}, },
closeInfo() {
this.infoShow = false;
},
} }
} }
</script> </script>
<style></style> <style>
.infoDom{
position: fixed;
right: 22%;
bottom: 10%;
width: 20%;
min-height: 20vh;
min-width: 360px;
background: rgba(0, 50, 56, 0.8);
border: 1px solid rgba(63,174,229,.5);
}
.infoDom_header{
font-size:18px;
padding: 10px;
text-align: center;
position: relative;
border-bottom: 1px solid rgba(63,174,229,.5);
}
.infoDom_close{
position: absolute;
left: 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');
}
</style>

View File

@ -103,7 +103,7 @@
</el-header> </el-header>
<el-main style="padding:0;"> <el-main style="padding:0;">
<div v-show="activeIndex == 0" class="model" style=""> <div v-show="activeIndex == 0" class="model" style="">
<Cesium /> <Cesium ref="cesiumDiv" :activeIndex="activeIndex"/>
</div> </div>
<!-- 左侧列表数据 --> <!-- 左侧列表数据 -->
<div v-show="activeIndex == 0" class="left_other animate__animated animate__backInLeft"> <div v-show="activeIndex == 0" class="left_other animate__animated animate__backInLeft">
@ -114,9 +114,7 @@
<img class="blockTitleImg" src="img/enp_blue/block_title.png"> <img class="blockTitleImg" src="img/enp_blue/block_title.png">
</div> </div>
<div> <div>
<!-- <div class="title_s">{{ cemsData.equipment_name }}</div> --> <scScrollTavle v-if="table1Visible" :tableHeight="containerHeight" :rowData="lineData" :titleData="liData1"
<!-- <div class="status"><span style="color:#32D74B">数据正常</span><span>2024-01-26 14:32:06</span></div> -->
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight" :rowData="lineData" :titleData="liData1"
:refValue="refValue1" class="bigScreenTable"></scScrollTavle> :refValue="refValue1" class="bigScreenTable"></scScrollTavle>
<!-- <div class="tableHear" style="padding: 0 1vh;"> <!-- <div class="tableHear" style="padding: 0 1vh;">
<div style="flex:1;height:1vh"></div> <div style="flex:1;height:1vh"></div>
@ -226,28 +224,6 @@
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm25 }}</span> <span style="flex:1" v-if="item.envdata">{{ item.envdata.pm25 }}</span>
</div> </div>
</div> </div>
<div v-for="item in wData" :key="item">
<div class="badyItem">
<div style="flex:2">
<img src="img/enp_blue/listImg.png"
style="width:2vh;height:2vh;margin:1.2vh 1vh;vertical-align:middle">
<span>{{ item.name }}</span>
</div>
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm10 }}</span>
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm25 }}</span>
</div>
</div>
<div v-for="item in wData" :key="item">
<div class="badyItem">
<div style="flex:2">
<img src="img/enp_blue/listImg.png"
style="width:2vh;height:2vh;margin:1.2vh 1vh;vertical-align:middle">
<span>{{ item.name }}</span>
</div>
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm10 }}</span>
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm25 }}</span>
</div>
</div>
</div> </div>
</div> --> </div> -->
</div> </div>
@ -259,7 +235,11 @@
</div> </div>
<div style="display:flex;"> <div style="display:flex;">
<div class="chart" id="pieChart"></div> <div class="chart" id="pieChart"></div>
<div style="width:50%"> <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>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -275,13 +255,12 @@
<!-- <div v-show="activeIndex == 0" class="left_border"></div> --> <!-- <div v-show="activeIndex == 0" class="left_border"></div> -->
<!-- <div v-show="activeIndex == 0" class="right_border"></div> --> <!-- <div v-show="activeIndex == 0" class="right_border"></div> -->
<!-- 设备分类 --> <!-- 设备分类 -->
<div v-show="activeIndex == 0" class="btns_enp"> <!-- <div v-show="activeIndex == 0" class="btns_enp">
<div class="btns" :class="bindBtnClass(0)">生产设备</div> <div class="btns" :class="bindBtnClass(10)" @click="equipmentTypeChange(10)">生产设备</div>
<div class="btns" :class="bindBtnClass(1)">治理设备</div> <div class="btns" :class="bindBtnClass(30)" @click="equipmentTypeChange(30)">治理设备</div>
<div class="btns" :class="bindBtnClass(2)">监测设备</div> <div class="btns" :class="bindBtnClass(40)" @click="equipmentTypeChange(40)">监测设备</div>
<div class="btns" :class="bindBtnClass(3)">监控设备</div> <div class="btns" :class="bindBtnClass(50)" @click="equipmentTypeChange(50)">监控设备</div>
<!-- <div class="btns" :class="bindBtnClass(4)">环境监测</div> --> </div> -->
</div>
<!-- 底部背景图片 --> <!-- 底部背景图片 -->
<div v-show="activeIndex == 0" class="bottom_enp"></div> <div v-show="activeIndex == 0" class="bottom_enp"></div>
<div v-if="activeIndex != 0" class="container"> <div v-if="activeIndex != 0" class="container">
@ -374,7 +353,7 @@ export default {
loadedPercent: 0, loadedPercent: 0,
showKgcet: true, showKgcet: true,
currentLightMesh: null, currentLightMesh: null,
activeBtns: 0, // activeBtns: 10,
activeDrawerName: '', activeDrawerName: '',
activeIndex: 0, activeIndex: 0,
activeSection: 2, activeSection: 2,
@ -392,7 +371,7 @@ export default {
}, },
legend: { legend: {
// orient: 'vertical', // orient: 'vertical',
right: 10, center:true,
bottom: 1, bottom: 1,
data: ['新能源', '其他'] data: ['新能源', '其他']
}, },
@ -438,25 +417,21 @@ export default {
table1Visible: true, table1Visible: true,
lineData: [], lineData: [],
liData1: ['', '设备名称', '颗粒物', 'SO₂', 'NOx'], liData1: ['', '设备名称', '颗粒物', 'SO₂', 'NOx'],
refValue2: 'moocBox2', refValue2: 'moocBox2',
table2Visible: true, table2Visible: true,
lineData2: [], lineData2: [],
liData2: ['', '设备名称', 'TSP测量值'], liData2: ['', '设备名称', 'TSP测量值'],
refValue3: 'moocBox3', refValue3: 'moocBox3',
table3Visible: true, table3Visible: true,
lineData3: [], lineData3: [],
liData3: ['', '设备名称', 'PM10', 'PM2.5'], liData3: ['', '设备名称', 'PM10', 'PM2.5'],
eqNumData: { eqNumData: {
sc: 0, sc: 0,
jc: 0, jc: 0,
zl: 0, zl: 0,
jk: 0 jk: 0
}, },
cemsDataList:[],
cemsData: [], cemsData: [],
tspData: [], tspData: [],
wData: [], wData: [],
@ -493,7 +468,7 @@ export default {
// CEMS // CEMS
getleft1Data() { getleft1Data() {
let that = this; let that = this;
that.$API.em.equipment.list.req({ type: 20, cate__code: 'cems', has_envdata: 'yes' }).then(res => { that.$API.em.equipment.list.req({ type: 40, cate__code: 'cems', has_envdata: 'yes' }).then(res => {
that.cemsDataList = res.results; that.cemsDataList = res.results;
that.cemsData = res.results[0]; that.cemsData = res.results[0];
let lineData = []; let lineData = [];
@ -518,19 +493,23 @@ export default {
}, },
// //
getleft2Data() { getleft2Data() {
//
this.$API.em.equipment.list.req({ type: 10, query: {} }).then((res1) => { this.$API.em.equipment.list.req({ type: 10, query: {} }).then((res1) => {
// console.log(res1) // console.log(res1)
this.eqNumData.sc = res1.count; this.eqNumData.sc = res1.count;
}) })
this.$API.em.equipment.list.req({ type: 20, query: {} }).then((res2) => { //
this.$API.em.equipment.list.req({ type: 40, query: {} }).then((res2) => {
// console.log(res2) // console.log(res2)
this.eqNumData.jc = res2.count; this.eqNumData.jc = res2.count;
}) })
//
this.$API.em.equipment.list.req({ type: 30, query: {} }).then((res3) => { this.$API.em.equipment.list.req({ type: 30, query: {} }).then((res3) => {
// console.log(res3) // console.log(res3)
this.eqNumData.zl = res3.count; this.eqNumData.zl = res3.count;
}) })
this.$API.em.equipment.list.req({ type: 40, query: {} }).then((res4) => { //
this.$API.em.equipment.list.req({ type: 50, query: {} }).then((res4) => {
// console.log(res4) // console.log(res4)
this.eqNumData.jk = res4.count; this.eqNumData.jk = res4.count;
}) })
@ -538,7 +517,7 @@ export default {
//TSP //TSP
getleft3Data() { getleft3Data() {
let that = this; let that = this;
that.$API.em.equipment.list.req({ type: 20, cate__code: 'tsp', has_envdata: 'yes' }).then(res => { that.$API.em.equipment.list.req({ type: 40, cate__code: 'tsp', has_envdata: 'yes' }).then(res => {
that.tspDataList = res.results; that.tspDataList = res.results;
that.tspData = res.results[0]; that.tspData = res.results[0];
let lineData = []; let lineData = [];
@ -558,9 +537,8 @@ export default {
//--- //---
getright1Data() { getright1Data() {
let that = this; let that = this;
that.$API.em.equipment.list.req({ type: 20, cate__code: 'aqms', has_envdata: 'yes' }).then(res => { that.$API.em.equipment.list.req({ type: 40, cate__code: 'aqms', has_envdata: 'yes' }).then(res => {
that.wData = res.results; that.wData = res.results;
// console.log('wData', this.wData)
let lineData = []; let lineData = [];
res.results.forEach((item, index) => { res.results.forEach((item, index) => {
let arr = [], obj1 = {}, obj2 = {}, obj3 = {}; let arr = [], obj1 = {}, obj2 = {}, obj3 = {};
@ -673,13 +651,20 @@ export default {
this.engine.resize(); this.engine.resize();
} }
}, },
bindBtnClass(index) { // bindBtnClass(index) {
let classInfo = { btns: true, btnsActive: false }; // let classInfo = { btns: true, btnsActive: false };
if (index == this.activeBtns) { // if (index == this.activeBtns) {
classInfo.btnsActive = true; // classInfo.btnsActive = true;
} // }
return classInfo; // return classInfo;
}, // },
//
// equipmentTypeChange(index) {
// let that = this;
// that.activeBtns = index;
// // this.$refs.typeChange.setData(index);
// // this.$refs.cesiumDiv.typeChange(index);
// },
// Class // Class
bindClass(index) { bindClass(index) {
let that = this; let that = this;
@ -832,32 +817,6 @@ header {
padding-left: 1vw; padding-left: 1vw;
font-size: 2vh; font-size: 2vh;
} }
.btns_enp {
bottom: 7vh;
left: 28.7vw;
width: 42.6vw;
height: 4.3vh;
position: absolute;
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');
}
.bottom_enp { .bottom_enp {
left: 0; left: 0;
bottom: 0; bottom: 0;
@ -1071,12 +1030,14 @@ header {
} }
#pieChart { #pieChart {
/* background-image: url('/public/img/enp_blue/huan_bg.png'); flex: 1;
background-size: 75%; }
background-repeat: no-repeat; .todyCarItem{
background-position: center; */ color: white;
font-size: 16px;
display: flex;
flex-direction: column;
} }
.pieDataItem { .pieDataItem {
width: 50%; width: 50%;
height: 49%; height: 49%;
@ -1095,73 +1056,6 @@ header {
padding-left: 0.2vw; padding-left: 0.2vw;
} }
.pieDataItem:nth-of-type(1) {
.pieDataText {
border-left: 0.5vh solid #0091ff;
}
.pieDataNumber {
border-left: 0.1vh solid #0091ff;
}
}
.pieDataItem:nth-of-type(2) {
.pieDataText {
border-left: 0.5vh solid #0Ed877;
}
.pieDataNumber {
border-left: 0.1vh solid #0Ed877;
}
}
.pieDataItem:nth-of-type(3) {
.pieDataText {
border-left: 0.5vh solid #ffbf60;
}
.pieDataNumber {
border-left: 0.1vh solid #ffbf60;
}
}
.pieDataItem:nth-of-type(4) {
.pieDataText {
border-left: 0.5vh solid #67dbff;
}
.pieDataNumber {
border-left: 0.1vh solid #67dbff;
}
}
.pieDataNumber {
height: 3vh;
line-height: 2.9vh;
font-size: 2vh;
color: #ffffff;
padding-left: 0.2vw;
border-left: 0.1vh solid #0070FF;
}
.beforeLine {
width: 2px;
height: 30%;
position: absolute;
background: #0070FF;
}
.title_s {
height: 3.7vh;
line-height: 3.7vh;
color: #ffffff;
margin-top: 1vh;
font-size: 1.4vh;
text-align: center;
background-image: url('/public/img/enp_blue/little_title.png');
}
.status { .status {
height: 2.6vh; height: 2.6vh;
display: flex; display: flex;
@ -1170,13 +1064,25 @@ header {
color: #ffffff; color: #ffffff;
justify-content: space-between; justify-content: space-between;
} }
/* table相关样式 */
.tableHear { .tableHear {
display: flex; display: flex;
color: #ffffff; color: #ffffff;
margin-bottom: 0.5vh; margin-bottom: 0.5vh;
} }
.tableBody {
padding: 0 1vh;
}
.badyItem {
height: 4.6vh;
line-height: 4.6vh;
margin-bottom: 1.4vh;
border-radius: 3px;
color: #ffffff;
font-size: 1.4vh;
display: flex;
border: 1px solid #0091ff;
}
.rowItem { .rowItem {
display: flex; display: flex;
color: #ffffff; color: #ffffff;
@ -1212,92 +1118,9 @@ header {
box-sizing: border-box; box-sizing: border-box;
background: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .1);
} }
/* table */
.right_one { /* 左右两边border暂时没展示 */
height: 100%;
display: flex;
color: #ffffff;
position: relative;
justify-content: space-between;
background: url('/public/img/enp_blue/right_one.svg') no-repeat;
background-size: 100% 100%;
}
.leftNumbers {
padding: 2.5vh 1vh;
}
.rightNumbers {
padding: 2.5vh 1vh;
text-align: right;
}
.numberItem {
height: 33.3%;
line-height: 1.6vh;
}
.numberItemName {
font-size: 1.4vh;
line-height: 4vh;
}
.numberItemNum {
font-size: 1.6vh;
}
.numberItemUnit {
font-size: 1.2vh;
}
.ballImg {
position: absolute;
width: 5vw;
height: 5vw;
background-image: url('/public/img/enp_blue/ball.png');
background-size: cover;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.right_one_status {
top: 50%;
left: 50%;
width: 100%;
z-index: 10;
color: #ffffff;
font-size: 2vh;
text-align: center;
position: absolute;
transform: translate(-50%, -50%);
}
/* right2 */
.tableBody {
padding: 0 1vh;
}
.badyItem {
height: 4.6vh;
line-height: 4.6vh;
margin-bottom: 1.4vh;
border-radius: 3px;
color: #ffffff;
font-size: 1.4vh;
display: flex;
border: 1px solid #0091ff;
}
/* right2 */
/* 表格 */
.drawer_container {
background-image: url('/public/img/enp_blue/tableBg.png');
}
/* 表格 */
.left_border { .left_border {
width: 1vh; width: 1vh;
height: 70vh; height: 70vh;
@ -1317,12 +1140,6 @@ header {
background-size: cover; background-size: cover;
background-image: url('/public/img/enp_blue/right_border.png'); background-image: url('/public/img/enp_blue/right_border.png');
} }
/* 左右两边border暂时没展示 */
.pageClass {
width: 100%;
height: 89vh;
position: absolute;
bottom: 0;
left: 0;
}
</style> </style>