feat:大屏设备小类选择展示隐藏

This commit is contained in:
shijing 2024-03-14 08:42:56 +08:00
parent 8311cb7d1b
commit dc1130a5ee
13 changed files with 209 additions and 58 deletions

View File

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

Before

Width:  |  Height:  |  Size: 4.6 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

View File

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

View File

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

View File

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

View File

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

View File

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

View File

Before

Width:  |  Height:  |  Size: 5.1 KiB

After

Width:  |  Height:  |  Size: 5.1 KiB

View File

@ -12,7 +12,7 @@
<div>
<table :class="{ marquee_top: animate }">
<tr v-for="(itemy, index) in rowData" class="rollData" ref="con1" :key="itemy">
<td>{{ index + 1 }}</td>
<td v-if="!noIndex">{{ index + 1 }}</td>
<td v-for="itemz in itemy" :key="itemz">
<el-progress v-if="itemz.elType == 'progress'" :text-inside="true"
:stroke-width="14" :percentage="itemz.value" :status="getStatus(itemz.value)" />
@ -24,7 +24,7 @@
</table>
<table :class="{ marquee_top: animate }" v-show="scrollVivible">
<tr v-for="(itemy, index) in rowData" class="rollData" ref="con1" :key="itemy">
<td>{{ index + 1 }}</td>
<td v-if="!noIndex">{{ index + 1 }}</td>
<td v-for="itemz in itemy" :key="itemz">
<!-- <el-progress v-if="itemz.elType=='progress'" :text-inside="true" :stroke-width="14" :percentage="itemz.value"
:status="getStatus(itemz.value)"/> -->
@ -48,6 +48,10 @@
<script>
export default {
props: {
noIndex: {
type: Boolean,
default: false
},
rowData: {
type: Array,
default() {

View File

@ -1,12 +1,61 @@
<template>
<div style="width: 100%; height: 100%;">
<div id="cesiumContainer" style="width: 100%; height: 100%;"></div>
<div id="cesiumContainer" style="width: 100%;height: 100%;"></div>
<div v-show="activeIndex == 0" class="btns_enp">
<div 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 style="position: relative;">
<div class="btns" @click="showChange(1)">生产设备</div>
<div class="bottomMenu bottomMenu1" @mouseleave="handleMouseLeave(1)">
<el-checkbox class="bottomMenu_item" v-model="eq_big" label="大型生产设备" @change="checkboxChange('eq_big')"/>
<el-checkbox class="bottomMenu_item" v-model="eq_main" label="主要生产设备" @change="checkboxChange('eq_main')"/>
<el-checkbox class="bottomMenu_item" v-model="eq_trans" label="输送设备" @change="checkboxChange('eq_trans')"/>
<!-- <el-checkbox-group v-model="equCheck" @change="checkChange(equCheck)">
<el-checkbox class="bottomMenu_item" value="eq_big" label="大型生产设备"/>
<el-checkbox class="bottomMenu_item" value="eq_main" label="主要生产设备"/>
<el-checkbox class="bottomMenu_item" value="eq_trans" label="输送设备"/>
</el-checkbox-group> -->
</div>
</div>
<div style="position: relative;">
<div class="btns" @click="showChange(2)">治理设备</div>
<div class="bottomMenu bottomMenu2" @mouseleave="handleMouseLeave(2)">
<el-checkbox class="bottomMenu_item" v-model="fog_cannon" label="雾炮" @change="checkboxChange('fog_cannon')"/>
<el-checkbox class="bottomMenu_item" v-model="dry_fog" label="干雾" @change="checkboxChange('dry_fog')"/>
<el-checkbox class="bottomMenu_item" v-model="dust_clean" label="除尘器" @change="checkboxChange('dust_clean')"/>
<el-checkbox class="bottomMenu_item" v-model="truck_clean" label="环卫车" @change="checkboxChange('truck_clean')"/>
<el-checkbox class="bottomMenu_item" v-model="wstation" label="洗车台" @change="checkboxChange('wstation')"/>
<el-checkbox class="bottomMenu_item" v-model="tltx" label="脱硫脱硝" @change="checkboxChange('tltx')"/>
<!-- <el-checkbox-group v-model="equCheck2">
<el-checkbox class="bottomMenu_item" value="wp" label="雾炮"/>
<el-checkbox class="bottomMenu_item" value="gw" label="干雾"/>
<el-checkbox class="bottomMenu_item" value="dust_clean" label="除尘器"/>
<el-checkbox class="bottomMenu_item" value="hec" label="环卫车"/>
<el-checkbox class="bottomMenu_item" value="xct" label="洗车台"/>
<el-checkbox class="bottomMenu_item" value="tltx" label="脱硫脱硝"/>
</el-checkbox-group> -->
</div>
</div>
<div style="position: relative;">
<div class="btns" @click="showChange(3)">监测设备</div>
<div class="bottomMenu bottomMenu3" @mouseleave="handleMouseLeave(3)">
<el-checkbox class="bottomMenu_item" v-model="tsp" label="TSP" @change="checkboxChange('tsp')"/>
<el-checkbox class="bottomMenu_item" v-model="cems" label="CEMS" @change="checkboxChange('cems')"/>
<el-checkbox class="bottomMenu_item" v-model="aqms" label="空气微站" @change="checkboxChange('aqms')"/>
<!-- <el-checkbox-group v-model="equCheck3">
<el-checkbox class="bottomMenu_item" value="cems" label="CEMS"/>
<el-checkbox class="bottomMenu_item" value="tsp" label="TSP"/>
</el-checkbox-group> -->
</div>
</div>
<div style="position: relative;">
<div class="btns" @click="showChange(4)">监控设备</div>
<div class="bottomMenu bottomMenu4" @mouseleave="handleMouseLeave(4)">
<el-checkbox class="bottomMenu_item" v-model="monitor" label="监控设备" @cahnge="checkboxChange('monitor')"/>
<!-- <el-checkbox-group v-model="equCheck4">
<el-checkbox class="bottomMenu_item" value="jksb" label="监控设备" />
</el-checkbox-group> -->
</div>
</div>
</div>
<div v-show="infoShow" class="infoDom">
<h4 class="infoDom_header">
@ -38,6 +87,7 @@
</template>
<script>
import * as Cesium from 'cesium';
import cems from './enpComponents/cems.vue';
export default {
name: 'cesium',
props: ['activeIndex'],
@ -45,7 +95,20 @@ export default {
return {
objItem: {},
activeBtns: 10,
infoShow:false,
infoShow: false,
eq_big:true,//
eq_main:true,//
eq_trans: true,//
fog_cannon: true,//
dry_fog: true,//
dust_clean: true,//
truck_clean:true,//
wstation:true,//
tltx:true,//
aqms:true,//
tsp:true,//TSP
cems: true,//CEMS
monitor:true,//
}
},
created() {
@ -54,12 +117,6 @@ export default {
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 =
@ -155,7 +212,7 @@ export default {
500
)
);
// that.equipmentTypeChange(10);
that.getEquipmentList();
});
//
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
@ -436,6 +493,7 @@ export default {
//*****cesium.glb*****//
},
methods: {
//class
bindBtnClass(index) {
let classInfo = { btns: true, btnsActive: false };
if (index == this.activeBtns) {
@ -443,53 +501,23 @@ export default {
}
return classInfo;
},
//
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) {
//
getEquipmentList() {
let that = this;
that.removePointer();
that.activeBtns = index;
that.$API.em.equipment.list.req({ type: index,page:0}).then((res) => {
that.$API.em.equipment.list.req({page:0}).then((res) => {
res.forEach((item) => {
if ( item.cate!==null&&item.coordinates && item.coordinates.longitude && item.coordinates.latitude) {
let imgUrl = that.getItemIcon(item.cate_code)
let lon = parseFloat(item.coordinates.longitude);
let lat = parseFloat(item.coordinates.latitude);
let height = parseInt(item.coordinates.height);
let arrs = { name:item.name, lon: lon, lat:lat, height:height, id:item.id, type: 'display' };
let height = parseInt(item.coordinates.height) + 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 };
that.addPointer(arrs, config);
}
})
})
},
//
@ -558,10 +586,77 @@ export default {
closeInfo() {
this.infoShow = false;
},
// checkChange(val) {
// console.log('checkChange',val)
// console.log('checkChange',this.equCheck)
// },
checkboxChange(val) {
console.log('checkboxChange', val);
let valu = this[val]
console.log('valu', valu);
let allEntitiesPoint = []
this.viewer.entities.values.forEach((item) => {
allEntitiesPoint.push(item)
if (item._type == val) {
item._show = valu
item.show = valu
}
})
console.log("allEntitiesPoint",allEntitiesPoint)
},
//
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';
},
//
handleMouseLeave(val) {
let classname = 'bottomMenu' + val;
document.getElementsByClassName(classname)[0].style.display = 'none';
},
}
}
</script>
<style>
/* #cesiumContainer,
#cesiumContainer>.cesium-viewer,
#cesiumContainer>.cesium-viewer>.cesium-viewer-cesiumWidgetContainer,
#cesiumContainer>.cesium-viewer>.cesium-viewer-cesiumWidgetContainer>.cesium-widget,
#cesiumContainer>.cesium-viewer>.cesium-viewer-cesiumWidgetContainer>.cesium-widget>canvas{
width: 100%;
height: 100%;
} */
.infoDom{
position: fixed;
right: 22%;
@ -643,5 +738,56 @@ export default {
.btns.btnsActive {
background-image: url('/public/img/enp_blue/btn_active.png');
}
/* 底部多选框--start 调节checkbox大小和颜色*/
.bottomMenu{
padding: 10px 10px 0 10px;
background: linear-gradient(to right, rgba(5, 56, 72,.7), rgba(16, 123, 144,.7));
width: 200px;
position: absolute;
display: none;
}
.bottomMenu1,
.bottomMenu3{
height: 160px;
top: -160px;
}
.bottomMenu2{
height: 310px;
top: -310px;
}
.bottomMenu4{
height: 60px;
top: -60px;
}
.bottomMenu_item{
color: #ffffff;
width: 100%;
height:40px;
padding-left: 10px;
line-height: 40px;
margin-bottom: 10px;
background: linear-gradient(to right, rgba(27, 143, 164,.5), rgb(16, 123, 144,.5));
}
.bottomMenu_item .el-checkbox__inner{
width: 20px;
height: 20px;
border-color: #ffffff;
border-radius:0;
}
.bottomMenu_item>.el-checkbox__input.is-checked>.el-checkbox__inner {
width: 20px;
height: 20px;
background-color: #00f6ff;
border-color: #00f6ff;
}
.bottomMenu_item>.el-checkbox__input.is-checked+.el-checkbox__label{
color: #00f6ff;
}
.bottomMenu_item>.el-checkbox__input.is-checked .el-checkbox__inner::after{
height: 11px;
left: 5px;
top: 1px;
width: 6px;
}
/* 底部多选框--end */
</style>

View File

@ -115,7 +115,7 @@
</div>
<div>
<scScrollTavle v-if="table1Visible" :tableHeight="containerHeight" :rowData="lineData" :titleData="liData1"
:refValue="refValue1" class="bigScreenTable"></scScrollTavle>
:refValue="refValue1" class="bigScreenTable" :noIndex="noIndex"></scScrollTavle>
<!-- <div class="tableHear" style="padding: 0 1vh;">
<div style="flex:1;height:1vh"></div>
<div style="flex:5;margin: 0 1vh;">设备名称</div>
@ -191,7 +191,7 @@
</div>
<div>
<scScrollTavle v-if="table2Visible" :tableHeight="containerHeight" :rowData="lineData2" :titleData="liData2"
:refValue="refValue2" class="bigScreenTable"></scScrollTavle>
:refValue="refValue2" class="bigScreenTable" :noIndex="noIndex"></scScrollTavle>
</div>
</div>
</div>
@ -204,7 +204,7 @@
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
</div>
<scScrollTavle v-if="table3Visible" :tableHeight="containerHeight" :rowData="lineData3" :titleData="liData3"
:refValue="refValue3" class="bigScreenTable"></scScrollTavle>
:refValue="refValue3" class="bigScreenTable" :noIndex="noIndex"></scScrollTavle>
<!-- <div>
<div class="tableHear"
style="margin:1vh 0;height:2.6vh;line-height:2.6vh;display:flex;padding:1vh;font-size:1.2vh">
@ -416,15 +416,16 @@ export default {
refValue1: 'moocBox1',
table1Visible: true,
lineData: [],
liData1: ['', '设备名称', '颗粒物', 'SO₂', 'NOx'],
liData1: ['设备名称', '颗粒物', 'SO₂', 'NOx'],
refValue2: 'moocBox2',
table2Visible: true,
lineData2: [],
liData2: ['', '设备名称', 'TSP测量值'],
liData2: ['设备名称', 'TSP测量值'],
refValue3: 'moocBox3',
table3Visible: true,
lineData3: [],
liData3: ['', '设备名称', 'PM10', 'PM2.5'],
liData3: ['设备名称', 'PM10', 'PM2.5'],
noIndex:true,
eqNumData: {
sc: 0,
jc: 0,