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

wry

This commit is contained in:
shijing 2024-01-31 14:00:36 +08:00
parent 58e7ea29ad
commit 55c36acaec
3 changed files with 201 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/img/enp_blue/smallTableBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 KiB

45
src/App.vue
View File

@ -133,36 +133,40 @@ export default {
} }
// 排放系统 // 排放系统
.el-popper {
border-radius: 0;
}
.el-popper[data-popper-placement^=bottom]>.el-popper__arrow { // .el-popper {
top: -5px; // border-radius: 0;
display: none !important; // }
}
.el-popper.is-light { // .el-popper[data-popper-placement^=bottom]>.el-popper__arrow {
background: linear-gradient(to right, #116a7c, #92f2ff); // top: -5px;
border-image-source: linear-gradient(to right, #92f2ff, #116a7c); // display: none !important;
} // }
.el-dropdown-menu { // .el-popper.is-light {
// background: linear-gradient(to right, #116a7c, #92f2ff);
// border-image-source: linear-gradient(to right, #92f2ff, #116a7c);
// }
.enpMenu.el-dropdown-menu {
padding: 0.7vh 0.7vh 0.2vh; padding: 0.7vh 0.7vh 0.2vh;
background: linear-gradient(to right, #053949, #107b90); background: linear-gradient(to right, #10608e, #1dabfd);
// background: linear-gradient(to right, #053949, #107b90);
} }
.el-dropdown-menu__item { .enpMenu>.el-dropdown-menu__item {
margin-bottom: 0.5vh; margin-bottom: 0.5vh;
background: linear-gradient(to right, #1b8fa4, #107b90); background: linear-gradient(to right, #29d, #1dabfd);
// background: linear-gradient(to right, #1b8fa4, #107b90);
} }
.el-dropdown-menu__item:not(.is-disabled):focus { .enpMenu>.el-dropdown-menu__item:not(.is-disabled):focus {
background: linear-gradient(to right, #053949, #107b90); background: linear-gradient(to right, #10608e, #1dabfd);
// background: linear-gradient(to right, #053949, #107b90);
color: #ffffff; color: #ffffff;
} }
.el-dropdown-menu__item { .enpMenu>.el-dropdown-menu__item {
color: #ffffff; color: #ffffff;
} }
@ -183,7 +187,6 @@ export default {
// background-image: url('/public/img/enp_blue/bg_enp_half.png'); // background-image: url('/public/img/enp_blue/bg_enp_half.png');
} }
#enpTable .el-table { #enpTable .el-table {
background-color: none !important; background-color: none !important;
background: none !important; background: none !important;
@ -222,6 +225,10 @@ export default {
background: none !important; background: none !important;
} }
#enpTable .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
background-color: rgba(0, 50, 45, .5) !important;
}
.enpelCard.el-card { .enpelCard.el-card {
background: none !important; background: none !important;
} }

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

@ -1,7 +1,89 @@
<template> <template>
<div> <div>
<div class="tableBg"> <el-card v-if="pfkdetail" class="enpelCard">
<div style="height:5vh;line-height:5vh;color:#ffffff;font-size:1.2vw;padding-left:6vw">排放口清单</div> <div style="display:flex;">
<!-- 设备信息 -->
<div class="leftCard">
<div class="pageTitle">排放口及关联设备静态信息</div>
<div class="linesWrap">
<div class="typeLine">
<div class="greenBlock">
<div style="width:100%;height:100%;background:#0ED877"></div>
</div>
生产设备
</div>
<el-row class="infoLine">
<el-col :span="12">
<div><span class="infotitle">设备类型：</span>主要生产设备</div>
</el-col>
<el-col :span="12">
<div><span class="infotitle">电机功率：</span>5352kw</div>
</el-col>
</el-row>
<div class="infoLine">
<div><span class="infotitle">生产能力：</span>140~150t/h</div>
</div>
<div class="typeLine">
<div class="greenBlock">
<div style="width:100%;height:100%;background:#0ED877"></div>
</div>
治理设备
</div>
<el-row class="infoLine">
<el-col :span="12">
<div><span class="infotitle">设备类型：</span>主要生产设备</div>
</el-col>
<el-col :span="12">
<div><span class="infotitle">电机功率：</span>5352kw</div>
</el-col>
</el-row>
<div class="infoLine">
<div><span class="infotitle">生产能力：</span>140~150t/h</div>
</div>
<div class="typeLine">
<div class="greenBlock">
<div style="width:100%;height:100%;background:#0ED877"></div>
</div>
排放口
</div>
<el-row class="infoLine">
<el-col :span="12">
<div><span class="infotitle">设备类型：</span>主要生产设备</div>
</el-col>
<el-col :span="12">
<div><span class="infotitle">电机功率：</span>5352kw</div>
</el-col>
</el-row>
<div class="infoLine">
<div><span class="infotitle">生产能力：</span>140~150t/h</div>
</div>
<div class="typeLine">
<div class="greenBlock">
<div style="width:100%;height:100%;background:#0ED877"></div>
</div>
监测设备
</div>
<el-row class="infoLine">
<el-col :span="12">
<div><span class="infotitle">设备类型：</span>主要生产设备</div>
</el-col>
<el-col :span="12">
<div><span class="infotitle">电机功率：</span>5352kw</div>
</el-col>
</el-row>
<div class="infoLine">
<div><span class="infotitle">生产能力：</span>140~150t/h</div>
</div>
</div>
</div>
<!-- 表 -->
<div class="rightCard">
<div class="pageTitle">排放口及关联设备动态信息</div>
</div>
</div>
</el-card>
<div class="tableBg" v-else>
<div class="pageTitle">排放口清单</div>
<div class="backMap" @click="backtoMap"> <div class="backMap" @click="backtoMap">
切换地图 切换地图
<el-icon> <el-icon>
@ -10,8 +92,7 @@
</div> </div>
<el-card class="enpelCard" style="margin: 2vh 1vw"> <el-card class="enpelCard" style="margin: 2vh 1vw">
<!-- 全程排放口统计 --> <!-- 全程排放口统计 -->
<div <div class="totalWrap" style="">
style="display:flex;justify-content:space-between;color:#ffffff;font-size:1.6vh;padding:0 0.5vw;height:3vh;line-height:3vh">
<div>全场</div> <div>全场</div>
<div>总排放口：<span class="totalNumber">5</span></div> <div>总排放口：<span class="totalNumber">5</span></div>
</div> </div>
@ -28,7 +109,7 @@
</div> </div>
<!-- table表格 --> <!-- table表格 -->
<div style="margin-top:2vh" id="enpTable"> <div style="margin-top:2vh" id="enpTable">
<scTable :data="tableData" calss="enpTable" style="background:none;background-color:none;"> <scTable :data="tableData" calss="enpTable" style="" @row-click="rowClick">
<el-table-column prop="index" label="序号"></el-table-column> <el-table-column prop="index" label="序号"></el-table-column>
<el-table-column prop="number" label="排放口编号"></el-table-column> <el-table-column prop="number" label="排放口编号"></el-table-column>
<el-table-column prop="name" label="排放口名称"></el-table-column> <el-table-column prop="name" label="排放口名称"></el-table-column>
@ -38,7 +119,6 @@
</scTable> </scTable>
</div> </div>
</el-card> </el-card>
</div> </div>
</div> </div>
</template> </template>
@ -54,35 +134,72 @@ export default {
searchInputStyle: { searchInputStyle: {
color: '#fff', color: '#fff',
}, },
pfkdetail: false,
tableData: [ tableData: [
{ index: 1, number: '20240130', name: 'name1', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' }, { index: 1, number: '20240130', name: '排放口1', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
{ index: 1, number: '20240130', name: 'name1', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' }, { index: 1, number: '20240130', name: '排放口2', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
{ index: 1, number: '20240130', name: 'name1', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' }, { index: 1, number: '20240130', name: '排放口3', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
{ index: 1, number: '20240130', name: 'name1', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' }, { index: 1, number: '20240130', name: '排放口4', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
{ index: 1, number: '20240130', name: 'name1', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' }, { index: 1, number: '20240130', name: '排放口5', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
{ index: 1, number: '20240130', name: 'name1', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' }, { index: 1, number: '20240130', name: '排放口6', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
{ index: 1, number: '20240130', name: 'name1', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' }, { index: 1, number: '20240130', name: '排放口7', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
{ index: 1, number: '20240130', name: 'name1', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' }, { index: 1, number: '20240130', name: '排放口8', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
{ index: 1, number: '20240130', name: 'name1', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' }, { index: 1, number: '20240130', name: '排放口9', type: '主要设备', mgroup: '水泥制成', eqpment: '达标' },
], ],
detailItem: {},
} }
}, },
methods: { methods: {
backtoMap() { backtoMap() {
this.$emit('close') this.$emit('close')
}, },
rowClick(row) {
this.pfkdetail = true;
this.detailItem = row;
this.getDetailData(row);
},
getDetailData() { },
} }
} }
</script> </script>
<style> <style>
.tableBg { .tableBg {
width: 100%; width: 100%;
height: 80vh; height: 88vh;
background-image: url('/public/img/enp_blue/bigtableBg.png'); background-image: url('/public/img/enp_blue/bigtableBg.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.leftCard {
height: 80vh;
flex: 1;
color: #ffffff;
font-size: 0.75vw;
background-image: url('/public/img/enp_blue/smallTableBg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
margin-right: 1vw;
}
.rightCard {
flex: 2;
height: 80vh;
background-image: url('/public/img/enp_blue/tableBg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
.totalWrap {
display: flex;
justify-content: space-between;
color: #ffffff;
font-size: 1.6vh;
padding: 0 0.5vw;
height: 3vh;
line-height: 3vh;
}
.totalNumber { .totalNumber {
color: #64D2FF; color: #64D2FF;
} }
@ -103,9 +220,50 @@ export default {
right: 3vh; right: 3vh;
top: 01.5vh; top: 01.5vh;
font-size: 1vh; font-size: 1vh;
width: 4vw; width: fit-content;
color: #ffffff; color: #ffffff;
padding: 0 0.5vw; padding: 0 0.5vw;
background-image: url('/public/img/enp_blue/back.png'); background-image: url('/public/img/enp_blue/back.png');
} }
.pageTitle {
height: 5vh;
line-height: 5vh;
color: #ffffff;
font-size: 1.2vw;
padding-left: 6vw;
}
/* */
.greenBlock {
width: 0.6vw;
height: 0.6vw;
border: 1px solid rgb(14, 216, 119);
padding: 0.1vw;
box-sizing: border-box;
display: inline-block;
}
.linesWrap {
padding: 1vh 0.5vw;
font-weight: bold;
line-height: 3.5vh;
}
.typeLine {
height: 3.5vh;
line-height: 4vh;
}
.infoLine {
height: 3.5vh;
padding-left: 0.5vw;
display: flex
}
.infotitle {
font-weight: normal;
color: #dddddd;
}
</style> </style>