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

智能管理表头

This commit is contained in:
shijing 2024-02-28 16:02:08 +08:00
parent beac9f3733
commit 6ca6565791
5 changed files with 339 additions and 328 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template> <template>
<el-container> <el-container>
<el-header> <el-header class="searchWrap">
<div class="left-panel"> <div class="left-panel">
<el-select v-model="query.mgroup" placeholder="工段 " @change="handleQuery" clearable> <el-select v-model="query.mgroup" placeholder="工段 " @change="handleQuery" clearable>
<el-option v-for="item in mgroupOptions" :key="item" :label="item.name" :value="item.id"></el-option> <el-option v-for="item in mgroupOptions" :key="item" :label="item.name" :value="item.id"></el-option>
@ -105,7 +105,8 @@ export default {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
margin-right: 10px; margin-right: 10px;
display: flex display: flex;
align-items: center;
} }
.radio { .radio {

2
src/views/bigScreen/enpComponents/smartg.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<el-container> <el-container>
<el-header> <el-header class="panel_title">
<el-menu mode="horizontal" :default-active="activeIndex" :ellipsis="false" @select="handleSelect"> <el-menu mode="horizontal" :default-active="activeIndex" :ellipsis="false" @select="handleSelect">
<el-menu-item index="1">厂区环境治理</el-menu-item> <el-menu-item index="1">厂区环境治理</el-menu-item>
<el-menu-item index="2">生产过程治理</el-menu-item> <el-menu-item index="2">生产过程治理</el-menu-item>

8
src/views/bigScreen/enpComponents/smartg_carwash.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<el-container> <el-container>
<el-aside width="70%"> <el-aside width="69%" style="margin-right:1%;border-right:0">
<el-container> <el-container>
<el-header> <el-header class="searchWrap">
<div class="left-panel"> <div class="left-panel">
<div class="left-panel">洗车行为统计</div> <div class="left-panel">洗车行为统计</div>
</div> </div>
@ -30,12 +30,12 @@
</el-aside> </el-aside>
<el-main class="nopadding"> <el-main class="nopadding">
<el-container> <el-container>
<el-header> <el-header class="searchWrap">
<div class="left-panel">环卫车智能调度</div> <div class="left-panel">环卫车智能调度</div>
</el-header> </el-header>
<el-main class="nopadding"> <el-main class="nopadding">
<el-container> <el-container>
<el-header> <el-header class="">
<div class="left-panel"> <div class="left-panel">
<span>厂区环境(PM10):</span> <span>厂区环境(PM10):</span>
<span style="color: green"> 36ug/m3</span> <span style="color: green"> 36ug/m3</span>

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

@ -1,6 +1,6 @@
<template> <template>
<el-container> <el-container>
<el-header> <el-header class="searchWrap">
<div class="left-panel"> <div class="left-panel">
<el-select v-model="query.mgroup" placeholder="工段 " @change="handleQuery" clearable> <el-select v-model="query.mgroup" placeholder="工段 " @change="handleQuery" clearable>
<el-option v-for="item in mgroupOptions" :key="item" :label="item.name" :value="item.id"></el-option> <el-option v-for="item in mgroupOptions" :key="item" :label="item.name" :value="item.id"></el-option>
@ -105,7 +105,8 @@ export default {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
margin-right: 10px; margin-right: 10px;
display: flex display: flex;
align-items: center;
} }
.radio { .radio {

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

@ -1,16 +1,16 @@
<template> <template>
<div class="dashboard"> <div class="dashboard" style="height:100%">
<header> <el-container style="height:100%">
<el-header style="height:8vh">
<div class="headerImg"> <div class="headerImg">
<img src="img/enp_blue/header_enp.png" style="width:100%;"> <img src="img/enp_blue/header_enp.png" style="width:100%;height:100%">
<div class="sysName"> <div class="sysName">{{ this.$TOOL.data.get("BASE_INFO").base.base_name }}</div>
水泥有限公司</div>
</div> </div>
<div class="login_config" style="z-index:1000;position: absolute;right: 1vw;bottom: 0;"> <!-- <div class="login_config" style="z-index:1000;position: absolute;right: 1vw;bottom: 0;">
<el-button :icon="config.dark ? 'el-icon-sunny' : 'el-icon-moon'" circle type="info" <el-button :icon="config.dark ? 'el-icon-sunny' : 'el-icon-moon'" circle type="info"
@click="configDark"></el-button> @click="configDark"></el-button>
</div> </div> -->
<div style="position: absolute;top:0.7vh;height:6vh"> <div style="position: absolute;top:0.7vh;height:6vh">
<div style="display: flex;padding-top: 1vh;margin-left: 1vw;"> <div style="display: flex;padding-top: 1vh;margin-left: 1vw;">
<div :class="bindClass(0)" @click="menuClick(0)"> <div :class="bindClass(0)" @click="menuClick(0)">
@ -107,19 +107,19 @@
<div class="user_icon" @click="backSystem"></div> <div class="user_icon" @click="backSystem"></div>
</div> </div>
</div> </div>
</header> </el-header>
<el-main style="padding:0;overflow: hidden;"> <el-main style="padding:0;">
<div v-show="activeIndex == 0" class="model" style=""> <div v-show="activeIndex == 0" class="model" style="">
<div id="loadingScreen"> <!-- <div id="loadingScreen">
<el-progress type="circle" :percentage="loadedPercent" :width=220 status="warning"> <el-progress type="circle" :percentage="loadedPercent" :width=220 status="warning">
<template #default="{ percentage }"> <template #default="{ percentage }">
<div style="font-size: 30px; color: white; font-weight: bold">{{ percentage }}%</div> <div style="font-size: 30px; color: white; font-weight: bold">{{ percentage }}%</div>
<div style="font-size: 18px; color: white; margin-top: 10px">工厂模型加载中</div> <div style="font-size: 18px; color: white; margin-top: 10px">工厂模型加载中</div>
</template> </template>
</el-progress> </el-progress>
</div> </div> -->
<Cesium /> <Cesium />
<canvas id="renderCanvas"></canvas> <!-- <canvas id="renderCanvas"></canvas> -->
</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">
@ -139,7 +139,7 @@
<div class="pieDataNumber">{{ wryData.count }}</div> <div class="pieDataNumber">{{ wryData.count }}</div>
</div> </div>
<div class="pieDataItem"> <div class="pieDataItem">
<div class="pieDataText">生产工艺过程</div> <div class="pieDataText">生产工艺</div>
<div class="pieDataNumber">{{ wryData.count_mtrans }}</div> <div class="pieDataNumber">{{ wryData.count_mtrans }}</div>
</div> </div>
<div class="pieDataItem"> <div class="pieDataItem">
@ -160,7 +160,7 @@
<img class="blockTitleImg" src="img/enp_blue/block_title.png"> <img class="blockTitleImg" src="img/enp_blue/block_title.png">
</div> </div>
<div style="display: flex;padding: 1vh 1vw;"> <div style="display: flex;padding: 1vh 1vw;">
<div style="width: 50%;"> <div style="width: 50%;height:100%">
<div class="eqItem"> <div class="eqItem">
<img class="eqImg" src="img/enp_blue/eq_s.svg"> <img class="eqImg" src="img/enp_blue/eq_s.svg">
<div class="eqText"> <div class="eqText">
@ -176,7 +176,7 @@
</div> </div>
</div> </div>
</div> </div>
<div style="width: 50%;"> <div style="width: 50%;height:100%">
<div class="eqItem"> <div class="eqItem">
<img class="eqImg " src="img/enp_blue/eq_z.svg"> <img class="eqImg " src="img/enp_blue/eq_z.svg">
<div class="eqText"> <div class="eqText">
@ -300,14 +300,14 @@
</div> </div>
</div> </div>
</div> </div>
<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(0)">生产设备</div>
<div class="btns" :class="bindBtnClass(1)">治理设备</div> <div class="btns" :class="bindBtnClass(1)">治理设备</div>
<div class="btns" :class="bindBtnClass(2)">监测设备</div> <div class="btns" :class="bindBtnClass(2)">监测设备</div>
<div class="btns" :class="bindBtnClass(3)">监控设备</div> <div class="btns" :class="bindBtnClass(3)">监控设备</div>
<div class="btns" :class="bindBtnClass(4)">环境监测</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">
@ -335,6 +335,8 @@
</el-drawer> </el-drawer>
</div> </div>
</el-main> </el-main>
</el-container>
</div> </div>
</template> </template>
<script> <script>
@ -495,20 +497,24 @@ export default {
], ],
} }
}, },
watch: { // watch: {
'config.dark'(val) { // 'config.dark'(val) {
if (val) { // if (val) {
// document.documentElement.classList.add("dark")
// this.$TOOL.data.set("APP_DARK", val)
// } else {
// document.documentElement.classList.remove("dark")
// this.$TOOL.data.remove("APP_DARK")
// }
// },
// 'config.lang'(val) {
// this.$i18n.locale = val
// this.$TOOL.data.set("APP_LANG", val)
// }
// },
created() {
document.documentElement.classList.add("dark") document.documentElement.classList.add("dark")
this.$TOOL.data.set("APP_DARK", val) this.$TOOL.data.set("APP_DARK", true)
} else {
document.documentElement.classList.remove("dark")
this.$TOOL.data.remove("APP_DARK")
}
},
'config.lang'(val) {
this.$i18n.locale = val
this.$TOOL.data.set("APP_LANG", val)
}
}, },
mounted() { mounted() {
let that = this; let that = this;
@ -651,8 +657,8 @@ export default {
left_other.style.width = '100%'; left_other.style.width = '100%';
right_other.style.position = 'static'; right_other.style.position = 'static';
right_other.style.width = '100%'; right_other.style.width = '100%';
model.style.position = 'relative'; // model.style.position = 'relative';
model.style.height = chartHeight; // model.style.height = chartHeight;
var charts = document.getElementsByClassName('chart') var charts = document.getElementsByClassName('chart')
for (var i = 0; i < charts.length; i++) { for (var i = 0; i < charts.length; i++) {
var chart = charts[i] var chart = charts[i]
@ -1155,6 +1161,8 @@ export default {
}, },
unmounted() { unmounted() {
this.close(); this.close();
document.documentElement.classList.remove("dark");
this.$TOOL.data.remove("APP_DARK")
}, },
} }
</script> </script>
@ -1189,8 +1197,8 @@ header {
.headerImg { .headerImg {
width: 100%; width: 100%;
height: 6.7vh; height: 6.6vh;
line-height: 6.3vh; line-height: 6.5vh;
color: #ffffff; color: #ffffff;
font-size: 1.8vw; font-size: 1.8vw;
text-align: center; text-align: center;
@ -1310,6 +1318,7 @@ header {
top: 8%; top: 8%;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%;
background-image: url('/public/img/enp_blue/bg_enp.png'); background-image: url('/public/img/enp_blue/bg_enp.png');
background-size: cover; background-size: cover;
} }
@ -1393,7 +1402,6 @@ header {
.eqItem { .eqItem {
display: flex; display: flex;
/* height: 9vh; */
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -1414,10 +1422,10 @@ header {
.eqText { .eqText {
flex: 1; flex: 1;
height: 8vh; height: 9vh;
font-size: 1.4vh; font-size: 1.4vh;
padding-left: 0.5vw; padding-left: 0.5vw;
margin-bottom: 1vh; margin: 0.5vh 0;
background: url('/public/img/enp_blue/eq_border2.svg') no-repeat; background: url('/public/img/enp_blue/eq_border2.svg') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
background-size: contain; background-size: contain;
@ -1441,7 +1449,7 @@ header {
.eqNumWrap { .eqNumWrap {
font-size: 1.2vh; font-size: 1.2vh;
line-height: 2.5vh; line-height: 3.5vh;
} }
.eqNum { .eqNum {
@ -1462,24 +1470,25 @@ header {
.pieDataItem { .pieDataItem {
width: 50%; width: 50%;
height: 35%; height: 49%;
position: relative; position: relative;
display: inline-block; display: inline-block;
margin-top: 10%; margin-top: 10%;
padding-left: 0.5vw;
/* border-left: 1px solid #0070FF; */ /* border-left: 1px solid #0070FF; */
} }
.pieDataText { .pieDataText {
height: 2vh; height: 2vh;
line-height: 1.9vh; line-height: 1.9vh;
font-size: 1.1vh; font-size: 1.5vh;
color: #ffffff; color: #ffffff;
padding-left: 0.2vw; padding-left: 0.2vw;
} }
.pieDataItem:nth-of-type(1) { .pieDataItem:nth-of-type(1) {
.pieDataText { .pieDataText {
border-left: 0.3vh solid #0091ff; border-left: 0.5vh solid #0091ff;
} }
.pieDataNumber { .pieDataNumber {
@ -1489,7 +1498,7 @@ header {
.pieDataItem:nth-of-type(2) { .pieDataItem:nth-of-type(2) {
.pieDataText { .pieDataText {
border-left: 0.3vh solid #0Ed877; border-left: 0.5vh solid #0Ed877;
} }
.pieDataNumber { .pieDataNumber {
@ -1499,7 +1508,7 @@ header {
.pieDataItem:nth-of-type(3) { .pieDataItem:nth-of-type(3) {
.pieDataText { .pieDataText {
border-left: 0.3vh solid #ffbf60; border-left: 0.5vh solid #ffbf60;
} }
.pieDataNumber { .pieDataNumber {
@ -1509,7 +1518,7 @@ header {
.pieDataItem:nth-of-type(4) { .pieDataItem:nth-of-type(4) {
.pieDataText { .pieDataText {
border-left: 0.3vh solid #67dbff; border-left: 0.5vh solid #67dbff;
} }
.pieDataNumber { .pieDataNumber {