Merge branch 'master' of https://e.coding.net/ctcdevteam/ehs/ehs_web
This commit is contained in:
commit
8311cb7d1b
|
|
@ -17,6 +17,7 @@
|
|||
"babylonjs": "^6.16.0",
|
||||
"babylonjs-gui": "^6.16.0",
|
||||
"babylonjs-loaders": "^6.16.0",
|
||||
"cesium": "1.75",
|
||||
"codemirror": "5.65.5",
|
||||
"core-js": "3.29.0",
|
||||
"cropperjs": "1.5.13",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
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 |
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 |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
|
|
@ -14,18 +14,11 @@
|
|||
<%= VUE_APP_TITLE %>
|
||||
</title>
|
||||
<link type="text/css" href="./jsmap/jsmap.css" rel="stylesheet" />
|
||||
<!-- 本地引用 -->
|
||||
<!-- <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-->
|
||||
<!-- <link href="http://mars3d.cn/lib/Cesium/Widgets/widgets.css" rel="stylesheet" type="text/css" />
|
||||
<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 src="https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js" type="text/javascript"></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="./jsVideoPlugin-1.0.0.min.js"></script>
|
||||
|
|
|
|||
12
src/App.vue
12
src/App.vue
|
|
@ -156,19 +156,19 @@ export default {
|
|||
|
||||
.enpMenu.el-dropdown-menu {
|
||||
padding: 0.7vh 0.7vh 0.2vh;
|
||||
background: linear-gradient(to right, #10608e, #1dabfd);
|
||||
// background: linear-gradient(to right, #053949, #107b90);
|
||||
//background: linear-gradient(to right, #10608e, #1dabfd);
|
||||
background: linear-gradient(to right, #053949, #107b90);
|
||||
}
|
||||
|
||||
.enpMenu>.el-dropdown-menu__item {
|
||||
margin-bottom: 0.5vh;
|
||||
background: linear-gradient(to right, #29d, #1dabfd);
|
||||
// background: linear-gradient(to right, #1b8fa4, #107b90);
|
||||
//background: linear-gradient(to right, #29d, #1dabfd);
|
||||
background: linear-gradient(to right, #1b8fa4, #107b90);
|
||||
}
|
||||
|
||||
.enpMenu>.el-dropdown-menu__item:not(.is-disabled):focus {
|
||||
background: linear-gradient(to right, #10608e, #1dabfd);
|
||||
// background: linear-gradient(to right, #053949, #107b90);
|
||||
//background: linear-gradient(to right, #10608e, #1dabfd);
|
||||
background: linear-gradient(to right, #053949, #107b90);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,9 +13,8 @@ import preventReClick from './utils/preventReClick'
|
|||
import Print from './utils/print2'
|
||||
import Xlsx from './utils/xlsx'
|
||||
import DataVVue3 from '@kjgl77/datav-vue3'
|
||||
import * as Cesium from '../public/cesium/Cesium.js'
|
||||
import '../public/cesium/Widgets/widgets.css'
|
||||
// Vue.prototype.Cesium = Cesium
|
||||
import * as Cesium from 'cesium'
|
||||
// import 'cesium/Source/Widgets/widgets.css'
|
||||
|
||||
|
||||
const app = createApp(App);
|
||||
|
|
|
|||
|
|
@ -1,14 +1,51 @@
|
|||
|
||||
<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>
|
||||
|
||||
<script>
|
||||
import * as Cesium from 'cesium';
|
||||
export default {
|
||||
name: 'cesium',
|
||||
props: ['activeIndex'],
|
||||
data() {
|
||||
return {
|
||||
viewer: null
|
||||
objItem: {},
|
||||
activeBtns: 10,
|
||||
infoShow:false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -16,50 +53,47 @@ export default {
|
|||
scriptInfo.setAttribute("data-callType", "callScript");
|
||||
scriptInfo.src = "https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js";
|
||||
document.head.appendChild(scriptInfo);
|
||||
},
|
||||
},
|
||||
// watch: {
|
||||
// activeBtns:function(newVal, oldVal) {
|
||||
// console.log('activeBtns 发生变化:', newVal, oldVal);
|
||||
// this.getInfo(newVal);
|
||||
// }
|
||||
// },
|
||||
mounted() {
|
||||
let that = this;
|
||||
Cesium.Ion.defaultAccessToken =
|
||||
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1Yzg3ZDEzOS0zN2Q1LTQ2N2YtOWJhMy1mNWU4MWY5N2ExYzkiLCJpZCI6MjAxMzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzY4MTIzNzR9.SfNeHedDyXWLIPiNbc4qSsHBACm7uvaqRsQprL2J4Cw";
|
||||
|
||||
const viewer = new Cesium.Viewer("cesiumContainer", {
|
||||
// shadows: false,//模型加阴影
|
||||
animation: false, //动画小部件,左下角的倍速调控器，暂时用不到
|
||||
// shouldAnimate: false,
|
||||
homeButton: false, //是否显示Home按钮,一键回到地球，暂时用不到
|
||||
fullscreenButton: false, //是否显示全屏按钮，右下角的全屏按钮，跟F11功能类似,可以不要
|
||||
// baseLayerPicker: true, //地图图层组件,可以选择不同的地理皮肤，右上角的皮肤按钮
|
||||
// geocoder: true, //是否显示地名查找控件，右上角的搜索
|
||||
timeline: false, //是否显示时间线控件
|
||||
// sceneModePicker: true, //场景模式
|
||||
// selectionIndicator: false,//选取指示器组件
|
||||
// navigationHelpButton: false, //是否显示帮助信息控件
|
||||
// infoBox: true, //是否显示点击要素之后显示的信息
|
||||
// requestRenderMode: true, //启用请求渲染模式
|
||||
// scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
|
||||
// sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode
|
||||
// fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
|
||||
});
|
||||
const viewer = new Cesium.Viewer("cesiumContainer",{
|
||||
animation:false,//动画小部件
|
||||
baseLayerPicker:false,//地图图层组件
|
||||
fullscreenButton:false,//全屏组件
|
||||
geocoder:false,//地理编码搜索组件
|
||||
homeButton:false,//首页组件
|
||||
infoBox:false,//信息框
|
||||
sceneModePicker:false,//场景模式
|
||||
selectionIndicator:false,//选取指示器组件
|
||||
timeline:false,//时间轴
|
||||
navigationHelpButton:false,//帮助按钮
|
||||
navigationInstructionsInitiallyVisible:false
|
||||
});
|
||||
this.viewer = viewer;
|
||||
// this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
|
||||
// document.querySelector('.cesium-widget-credits').style.display = 'none'
|
||||
// // viewer.scene.globe.depthTestAgainstTerrain = false
|
||||
// viewer.scene.globe.depthTestAgainstTerrain = false
|
||||
|
||||
//设置限制缩放大小
|
||||
// viewer.scene.screenSpaceCameraController.minimumZoomDistance = 0
|
||||
// viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1
|
||||
|
||||
//隐藏logo信息
|
||||
viewer.scene.globe.enableLighting = true;
|
||||
viewer._cesiumWidget._creditContainer.style.display = 'none';
|
||||
var camera = viewer.camera;
|
||||
// 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);
|
||||
|
||||
console.log("tileset",tileset);
|
||||
//将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
|
||||
const cartographic = Cesium.Cartographic.fromCartesian(
|
||||
tileset.boundingSphere.center
|
||||
|
|
@ -72,14 +106,12 @@ export default {
|
|||
latitude,
|
||||
height
|
||||
)
|
||||
console.log('current', current);
|
||||
//根据中心点坐标计算出的地表坐标点
|
||||
const surface = Cesium.Cartesian3.fromRadians(
|
||||
cartographic.longitude, //经度
|
||||
cartographic.latitude, //纬度
|
||||
0 //高度
|
||||
)
|
||||
debugger;
|
||||
//根据中心点坐标和height值计算出的新的坐标点
|
||||
const offset = Cesium.Cartesian3.fromRadians(
|
||||
longitude, latitude, 0
|
||||
|
|
@ -91,59 +123,30 @@ export default {
|
|||
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.tileLoad.addEventListener(function(tile) {
|
||||
let content = tile.content;
|
||||
let featuresLength = content.featuresLength;
|
||||
// console.log("要素数量为：");
|
||||
// console.log(featuresLength);
|
||||
// console.log("第一个要素为：");
|
||||
let feature = content.getFeature(0);
|
||||
// console.log(feature);
|
||||
// 根据需求添加标注到每个feature上
|
||||
// console.log(feature._content._model._boundingSphere.center)
|
||||
let featurePosition = feature._content._model._boundingSphere.center;
|
||||
//将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
|
||||
const cartographicMesh = Cesium.Cartographic.fromCartesian(
|
||||
feature._content._model._boundingSphere.center
|
||||
);
|
||||
// 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
|
||||
const currentMesh = Cesium.Cartesian3.fromRadians(
|
||||
cartographicMesh.longitude, //经度
|
||||
cartographicMesh.latitude, //纬度
|
||||
cartographicMesh.height
|
||||
)
|
||||
// console.log('currentMesh', currentMesh);
|
||||
//根据中心点坐标计算出的地表坐标点
|
||||
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
|
||||
// }
|
||||
// });
|
||||
|
||||
})
|
||||
// })
|
||||
//视野转到tileset模型
|
||||
viewer.zoomTo(
|
||||
tileset,
|
||||
new Cesium.HeadingPitchRange(
|
||||
|
|
@ -152,48 +155,34 @@ export default {
|
|||
500
|
||||
)
|
||||
);
|
||||
var boundingSphere = tileset.boundingSphere;
|
||||
|
||||
// that.equipmentTypeChange(10);
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
// 监听鼠标左键点击事件
|
||||
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
|
||||
handler.setInputAction(function (movement) {
|
||||
var feature = viewer.scene.pick(movement.position);
|
||||
console.log(feature);
|
||||
let featurePosition = feature._content._model._boundingSphere.center;
|
||||
const cartographicFeature = Cesium.Cartographic.fromCartesian(
|
||||
feature._content._model._boundingSphere.center
|
||||
);
|
||||
console.log(cartographicFeature);
|
||||
var position = Cesium.Cartesian3.fromDegrees(cartographicFeature.longitude, cartographicFeature.latitude,1);
|
||||
// 创建实体
|
||||
var entity = viewer.entities.add({
|
||||
name: 'Text',
|
||||
position: position,
|
||||
label: {
|
||||
text: 'Hello, Cesium!',
|
||||
font: '24px sans-serif',
|
||||
color:Cesium.Color.fromCssColorString('#ff0000'),
|
||||
fillColor: Cesium.Color.WHITE,
|
||||
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);
|
||||
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格式的文件*****//
|
||||
// 隐藏地球
|
||||
|
|
@ -446,75 +435,213 @@ export default {
|
|||
// }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
//*****cesium加载.glb格式的文件*****//
|
||||
},
|
||||
mothods: {
|
||||
mapViweinit() {
|
||||
this.fly({ lon: 117.077665, lat: 30.838531, h: 50000, duration: 1 })
|
||||
methods: {
|
||||
bindBtnClass(index) {
|
||||
let classInfo = { btns: true, btnsActive: false };
|
||||
if (index == this.activeBtns) {
|
||||
classInfo.btnsActive = true;
|
||||
}
|
||||
return classInfo;
|
||||
},
|
||||
//地图添加点之后可以通过id默认飞行到点的对应位置 使用viewer.camera.flyTo可能会有经纬度不准的情况
|
||||
flyTo(key) {
|
||||
let rider = viewer.entities.getById(key)
|
||||
let offset = new Cesium.HeadingPitchRange(0.10074559078582723, -0.49977131690671905, 3000)
|
||||
viewer.flyTo(rider, {
|
||||
offset,
|
||||
duration: 0.8
|
||||
//获取类型对应的图标
|
||||
getItemIcon(cateCode) {
|
||||
switch (cateCode) {
|
||||
case "aqms":
|
||||
return "img/enp_blue/jcwz.png";
|
||||
case "tsp":
|
||||
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) {
|
||||
const { name = '', lon, lat, id, type = 'display' } = attrs
|
||||
const { height, show = true, fontSize, fillColor, pixelOffsetX, pixelOffsetY, image, imgWidth, imgHeight, textDistance, imgDistance } = config
|
||||
creatgetInfoePoint(attrs, config) {
|
||||
const { name = '测试', lon, lat, id='11111', type = 'display' ,height} = attrs
|
||||
const { show = true, fontSize, fillColor, fillWidth,pixelOffsetX, pixelOffsetY, image, imgWidth, imgHeight, textDistance, imgDistance } = config
|
||||
return new Cesium.Entity({
|
||||
attrs: attrs,
|
||||
id: id,
|
||||
type: type,
|
||||
position: Cesium.Cartesian3.fromDegrees(lon * 1, lat * 1, height || 100), // 文字标签
|
||||
position: Cesium.Cartesian3.fromDegrees(lon||117.08387268794274, lat||31.6557737395655433,height), // 文字标签
|
||||
label: {
|
||||
show: show,
|
||||
text: name,
|
||||
font: (fontSize || '12px') + ' monospace',
|
||||
// style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
||||
// fillColor: Cesium.Color.LIME,
|
||||
font: (fontSize || '14px'),
|
||||
style: Cesium.LabelStyle.FILL ,
|
||||
fillColor: Cesium.Color.LIME,
|
||||
fillColor: Cesium.Color.fromCssColorString(fillColor || '#fff'),
|
||||
// outline: true,// 字体边框
|
||||
outline: false,// 字体边框
|
||||
outlineColor: Cesium.Color.WHITE, // 字体边框颜色
|
||||
outlineWidth: fillWidth || 4, // 字体边框尺寸
|
||||
showBackground: true, // 是否显示背景颜色
|
||||
backgroundColor: Cesium.Color.fromCssColorString('#018081'), // 背景颜色
|
||||
backgroundColor: Cesium.Color.fromCssColorString('#1ca50a'), // 背景颜色
|
||||
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) // 文字标签多少距离内设置可见
|
||||
},
|
||||
billboard: {
|
||||
// 图标
|
||||
image: image || '/public/img/ele.png',
|
||||
width: imgWidth || 61,
|
||||
height: imgHeight || 113,
|
||||
image: image || 'img/enp_blue/warning_enp.png',
|
||||
width: imgWidth || 30,
|
||||
height: imgHeight || 30,
|
||||
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, imgDistance || 550000) // 图片多少距离内设置可见
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//用于把创建好的点加载到地图上
|
||||
addPointer(obj) {
|
||||
viewer.entities.add(obj)
|
||||
addPointer(attrs, config) {
|
||||
let that = this;
|
||||
let obj = that.creatgetInfoePoint(attrs, config);
|
||||
that.viewer.entities.add(obj)
|
||||
},
|
||||
//调用此方法获取相关信息显示在页面
|
||||
getInfo(equpmentId) {
|
||||
let that = this;
|
||||
that.infoShow = true;
|
||||
console.log(equpmentId)
|
||||
//根据id获取相关信息
|
||||
this.$API.em.equipment.item.req(equpmentId).then((res) => {
|
||||
that.objItem = res;
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
|
||||
//添加点之前可以调用一下移除所有的点防止重复添加
|
||||
removePointer() {
|
||||
let allEntitiesPoint = []
|
||||
|
||||
// console.log(viewer.entities.values)
|
||||
|
||||
viewer.entities.values.forEach((item) => {
|
||||
this.viewer.entities.values.forEach((item) => {
|
||||
allEntitiesPoint.push(item.id)
|
||||
})
|
||||
|
||||
allEntitiesPoint.forEach((item) => {
|
||||
const entity_obj = viewer.entities.getById(item)
|
||||
viewer.entities.remove(entity_obj)
|
||||
const entity_obj = this.viewer.entities.getById(item)
|
||||
this.viewer.entities.remove(entity_obj)
|
||||
})
|
||||
},
|
||||
closeInfo() {
|
||||
this.infoShow = false;
|
||||
},
|
||||
}
|
||||
}
|
||||
</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>
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
</el-header>
|
||||
<el-main style="padding:0;">
|
||||
<div v-show="activeIndex == 0" class="model" style="">
|
||||
<Cesium />
|
||||
<Cesium ref="cesiumDiv" :activeIndex="activeIndex"/>
|
||||
</div>
|
||||
<!-- 左侧列表数据 -->
|
||||
<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">
|
||||
</div>
|
||||
<div>
|
||||
<!-- <div class="title_s">{{ cemsData.equipment_name }}</div> -->
|
||||
<!-- <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"
|
||||
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight" :rowData="lineData" :titleData="liData1"
|
||||
:refValue="refValue1" class="bigScreenTable"></scScrollTavle>
|
||||
<!-- <div class="tableHear" style="padding: 0 1vh;">
|
||||
<div style="flex:1;height:1vh"></div>
|
||||
|
|
@ -226,28 +224,6 @@
|
|||
<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 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>
|
||||
|
|
@ -259,7 +235,11 @@
|
|||
</div>
|
||||
<div style="display:flex;">
|
||||
<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>
|
||||
|
|
@ -275,13 +255,12 @@
|
|||
<!-- <div v-show="activeIndex == 0" class="left_border"></div> -->
|
||||
<!-- <div v-show="activeIndex == 0" class="right_border"></div> -->
|
||||
<!-- 设备分类 -->
|
||||
<div v-show="activeIndex == 0" class="btns_enp">
|
||||
<div class="btns" :class="bindBtnClass(0)">生产设备</div>
|
||||
<div class="btns" :class="bindBtnClass(1)">治理设备</div>
|
||||
<div class="btns" :class="bindBtnClass(2)">监测设备</div>
|
||||
<div class="btns" :class="bindBtnClass(3)">监控设备</div>
|
||||
<!-- <div class="btns" :class="bindBtnClass(4)">环境监测</div> -->
|
||||
</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="activeIndex == 0" class="bottom_enp"></div>
|
||||
<div v-if="activeIndex != 0" class="container">
|
||||
|
|
@ -374,7 +353,7 @@ export default {
|
|||
loadedPercent: 0,
|
||||
showKgcet: true,
|
||||
currentLightMesh: null,
|
||||
activeBtns: 0,
|
||||
// activeBtns: 10,
|
||||
activeDrawerName: '',
|
||||
activeIndex: 0,
|
||||
activeSection: 2,
|
||||
|
|
@ -392,7 +371,7 @@ export default {
|
|||
},
|
||||
legend: {
|
||||
// orient: 'vertical',
|
||||
right: 10,
|
||||
center:true,
|
||||
bottom: 1,
|
||||
data: ['新能源', '其他']
|
||||
},
|
||||
|
|
@ -438,25 +417,21 @@ export default {
|
|||
table1Visible: true,
|
||||
lineData: [],
|
||||
liData1: ['', '设备名称', '颗粒物', 'SO₂', 'NOx'],
|
||||
|
||||
refValue2: 'moocBox2',
|
||||
table2Visible: true,
|
||||
lineData2: [],
|
||||
liData2: ['', '设备名称', 'TSP测量值'],
|
||||
|
||||
refValue3: 'moocBox3',
|
||||
table3Visible: true,
|
||||
lineData3: [],
|
||||
liData3: ['', '设备名称', 'PM10', 'PM2.5'],
|
||||
|
||||
|
||||
eqNumData: {
|
||||
sc: 0,
|
||||
jc: 0,
|
||||
zl: 0,
|
||||
jk: 0
|
||||
|
||||
},
|
||||
cemsDataList:[],
|
||||
cemsData: [],
|
||||
tspData: [],
|
||||
wData: [],
|
||||
|
|
@ -493,7 +468,7 @@ export default {
|
|||
//有组织排放口实时监测清单数据（ CEMS）
|
||||
getleft1Data() {
|
||||
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.cemsData = res.results[0];
|
||||
let lineData = [];
|
||||
|
|
@ -518,19 +493,23 @@ export default {
|
|||
},
|
||||
//接入设备数量
|
||||
getleft2Data() {
|
||||
//生产
|
||||
this.$API.em.equipment.list.req({ type: 10, query: {} }).then((res1) => {
|
||||
// console.log(res1)
|
||||
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)
|
||||
this.eqNumData.jc = res2.count;
|
||||
})
|
||||
//治理
|
||||
this.$API.em.equipment.list.req({ type: 30, query: {} }).then((res3) => {
|
||||
// console.log(res3)
|
||||
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)
|
||||
this.eqNumData.jk = res4.count;
|
||||
})
|
||||
|
|
@ -538,7 +517,7 @@ export default {
|
|||
//无组织排放口实时监测数据（TSP）
|
||||
getleft3Data() {
|
||||
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.tspData = res.results[0];
|
||||
let lineData = [];
|
||||
|
|
@ -558,9 +537,8 @@ export default {
|
|||
//空气微站实时监测---（小微站）
|
||||
getright1Data() {
|
||||
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;
|
||||
// console.log('wData', this.wData)
|
||||
let lineData = [];
|
||||
res.results.forEach((item, index) => {
|
||||
let arr = [], obj1 = {}, obj2 = {}, obj3 = {};
|
||||
|
|
@ -673,13 +651,20 @@ export default {
|
|||
this.engine.resize();
|
||||
}
|
||||
},
|
||||
bindBtnClass(index) {
|
||||
let classInfo = { btns: true, btnsActive: false };
|
||||
if (index == this.activeBtns) {
|
||||
classInfo.btnsActive = true;
|
||||
}
|
||||
return classInfo;
|
||||
},
|
||||
// bindBtnClass(index) {
|
||||
// let classInfo = { btns: true, btnsActive: false };
|
||||
// if (index == this.activeBtns) {
|
||||
// classInfo.btnsActive = true;
|
||||
// }
|
||||
// return classInfo;
|
||||
// },
|
||||
//切换设备类型
|
||||
// equipmentTypeChange(index) {
|
||||
// let that = this;
|
||||
// that.activeBtns = index;
|
||||
// // this.$refs.typeChange.setData(index);
|
||||
// // this.$refs.cesiumDiv.typeChange(index);
|
||||
// },
|
||||
// 动态绑定Class
|
||||
bindClass(index) {
|
||||
let that = this;
|
||||
|
|
@ -832,32 +817,6 @@ header {
|
|||
padding-left: 1vw;
|
||||
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 {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -1071,12 +1030,14 @@ header {
|
|||
}
|
||||
|
||||
#pieChart {
|
||||
/* background-image: url('/public/img/enp_blue/huan_bg.png');
|
||||
background-size: 75%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center; */
|
||||
flex: 1;
|
||||
}
|
||||
.todyCarItem{
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pieDataItem {
|
||||
width: 50%;
|
||||
height: 49%;
|
||||
|
|
@ -1095,73 +1056,6 @@ header {
|
|||
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 {
|
||||
height: 2.6vh;
|
||||
display: flex;
|
||||
|
|
@ -1170,13 +1064,25 @@ header {
|
|||
color: #ffffff;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* table相关样式 */
|
||||
.tableHear {
|
||||
display: flex;
|
||||
color: #ffffff;
|
||||
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 {
|
||||
display: flex;
|
||||
color: #ffffff;
|
||||
|
|
@ -1212,92 +1118,9 @@ header {
|
|||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, .1);
|
||||
}
|
||||
/* table */
|
||||
|
||||
.right_one {
|
||||
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');
|
||||
}
|
||||
|
||||
/* 表格 */
|
||||
|
||||
/* 左右两边border，暂时没展示 */
|
||||
.left_border {
|
||||
width: 1vh;
|
||||
height: 70vh;
|
||||
|
|
@ -1317,12 +1140,6 @@ header {
|
|||
background-size: cover;
|
||||
background-image: url('/public/img/enp_blue/right_border.png');
|
||||
}
|
||||
/* 左右两边border，暂时没展示 */
|
||||
|
||||
.pageClass {
|
||||
width: 100%;
|
||||
height: 89vh;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue