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 {

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

@ -1,340 +1,342 @@
<template> <template>
<div class="dashboard"> <div class="dashboard" style="height:100%">
<header> <el-container style="height:100%">
<div class="headerImg"> <el-header style="height:8vh">
<img src="img/enp_blue/header_enp.png" style="width:100%;"> <div class="headerImg">
<div class="sysName"> <img src="img/enp_blue/header_enp.png" style="width:100%;height:100%">
水泥有限公司</div> <div class="sysName">{{ this.$TOOL.data.get("BASE_INFO").base.base_name }}</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)">
<div class="menuItem">首页</div> <div class="menuItem">首页</div>
</div>
<div :class="bindClass(1)">
<div class="menuItem">
<el-dropdown class="dropdown" trigger="click" @command="handleClick">
<span class="el-dropdown-link">
有组织排放管理
</span>
<template #dropdown>
<el-dropdown-menu class="enpMenu">
<el-dropdown-item command="paikou">排放口清单</el-dropdown-item>
<el-dropdown-item command="cems">CEMS监测清单</el-dropdown-item>
<el-dropdown-item command="cems2">CEMS监测预警</el-dropdown-item>
<el-dropdown-item command="cemsExport">CEMS报表导出</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div> </div>
</div> <div :class="bindClass(1)">
<div :class="bindClass(2)"> <div class="menuItem">
<div class="menuItem"> <el-dropdown class="dropdown" trigger="click" @command="handleClick">
<el-dropdown class="dropdown" trigger="click" @command="handleClick2"> <span class="el-dropdown-link">
<span class="el-dropdown-link"> 有组织排放管理
无组织排放管理 </span>
</span> <template #dropdown>
<template #dropdown> <el-dropdown-menu class="enpMenu">
<el-dropdown-menu class="enpMenu"> <el-dropdown-item command="paikou">排放口清单</el-dropdown-item>
<el-dropdown-item command="pollutant">污染源清单</el-dropdown-item> <el-dropdown-item command="cems">CEMS监测清单</el-dropdown-item>
<el-dropdown-item command="pollutant2">污染源监测</el-dropdown-item> <el-dropdown-item command="cems2">CEMS监测预警</el-dropdown-item>
<el-dropdown-item command="smartg">智能治理</el-dropdown-item> <el-dropdown-item command="cemsExport">CEMS报表导出</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</div>
</div>
<div :class="bindClass(2)">
<div class="menuItem">
<el-dropdown class="dropdown" trigger="click" @command="handleClick2">
<span class="el-dropdown-link">
无组织排放管理
</span>
<template #dropdown>
<el-dropdown-menu class="enpMenu">
<el-dropdown-item command="pollutant">污染源清单</el-dropdown-item>
<el-dropdown-item command="pollutant2">污染源监测</el-dropdown-item>
<el-dropdown-item command="smartg">智能治理</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div style="position: absolute;top:0.7vh;right: 8px;height: 6vh;">
<div style="position: absolute;top:0.7vh;right: 8px;height: 6vh;"> <div style="display: flex;padding-top: 1vh;padding-right: 1vw;justify-content: flex-end;">
<div style="display: flex;padding-top: 1vh;padding-right: 1vw;justify-content: flex-end;"> <div :class="bindClass(3)">
<div :class="bindClass(3)"> <div class="menuItem">
<div class="menuItem"> <el-dropdown class="dropdown" trigger="click" @command="handleClick3">
<el-dropdown class="dropdown" trigger="click" @command="handleClick3"> <span class="el-dropdown-link">
<span class="el-dropdown-link"> 清洁运输
清洁运输 </span>
</span> <template #dropdown>
<template #dropdown> <el-dropdown-menu class="enpMenu">
<el-dropdown-menu class="enpMenu"> <el-dropdown-item command="transport">厂外运输</el-dropdown-item>
<el-dropdown-item command="transport">厂外运输</el-dropdown-item> <el-dropdown-item command="innerClean">厂内清洁</el-dropdown-item>
<el-dropdown-item command="innerClean">厂内清洁</el-dropdown-item> </el-dropdown-menu>
</el-dropdown-menu> </template>
</template> </el-dropdown>
</el-dropdown> </div>
</div> </div>
</div> <div :class="bindClass(4)" @click="menuClick(4)">
<div :class="bindClass(4)" @click="menuClick(4)"> <!-- <div class="menuItem">环保管理</div> -->
<!-- <div class="menuItem">环保管理</div> --> <div class="menuItem">
<div class="menuItem"> <el-dropdown class="dropdown" trigger="click" @command="handleClick4">
<el-dropdown class="dropdown" trigger="click" @command="handleClick4"> <span class="el-dropdown-link">
<span class="el-dropdown-link"> 环保管理
环保管理 </span>
</span> <template #dropdown>
<template #dropdown> <el-dropdown-menu class="enpMenu">
<el-dropdown-menu class="enpMenu"> <el-dropdown-item command="envirmonitor">环境监测清单</el-dropdown-item>
<el-dropdown-item command="envirmonitor">环境监测清单</el-dropdown-item> <el-dropdown-item command="envirqualmonitor">环境质量监测</el-dropdown-item>
<el-dropdown-item command="envirqualmonitor">环境质量监测</el-dropdown-item> <!-- <el-dropdown-item command="pollutecalendar">污染日历</el-dropdown-item> -->
<!-- <el-dropdown-item command="pollutecalendar">污染日历</el-dropdown-item> --> <!-- <el-dropdown-item command="">决策分析</el-dropdown-item> -->
<!-- <el-dropdown-item command="">决策分析</el-dropdown-item> --> </el-dropdown-menu>
</el-dropdown-menu> </template>
</template> </el-dropdown>
</el-dropdown> </div>
</div> </div>
</div> <div :class="bindClass(5)" @click="menuClick(5)">
<div :class="bindClass(5)" @click="menuClick(5)"> <!-- <div class="menuItem">台账管理</div> -->
<!-- <div class="menuItem">台账管理</div> --> <div class="menuItem">
<div class="menuItem"> <el-dropdown class="dropdown" trigger="click" @command="handleClick5">
<el-dropdown class="dropdown" trigger="click" @command="handleClick5"> <span class="el-dropdown-link">
<span class="el-dropdown-link"> 台账管理
台账管理 </span>
</span> <template #dropdown>
<template #dropdown> <el-dropdown-menu class="enpMenu">
<el-dropdown-menu class="enpMenu"> <el-dropdown-item command="eqments">设备清单</el-dropdown-item>
<el-dropdown-item command="eqments">设备清单</el-dropdown-item> <el-dropdown-item command="alarmrecord">报警记录 </el-dropdown-item>
<el-dropdown-item command="alarmrecord">报警记录 </el-dropdown-item> <el-dropdown-item command="video">视屏墙 </el-dropdown-item>
<el-dropdown-item command="video">视屏墙 </el-dropdown-item> </el-dropdown-menu>
</el-dropdown-menu> </template>
</template> </el-dropdown>
</el-dropdown> </div>
</div> </div>
<div class="wraning_icon"></div>
<div class="user_icon" @click="backSystem"></div>
</div> </div>
<div class="wraning_icon"></div>
<div class="user_icon" @click="backSystem"></div>
</div> </div>
</div> </el-header>
</header> <el-main style="padding:0;">
<el-main style="padding:0;overflow: hidden;"> <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> -->
<Cesium />
<!-- <canvas id="renderCanvas"></canvas> -->
</div> </div>
<Cesium /> <!-- 左侧列表数据 -->
<canvas id="renderCanvas"></canvas> <div v-show="activeIndex == 0" class="left_other animate__animated animate__backInLeft">
</div> <!-- 无组织污染源一览 -->
<!-- 左侧列表数据 --> <div class="panel panel1">
<div v-show="activeIndex == 0" class="left_other animate__animated animate__backInLeft"> <div class="blockTitle">
<!-- 无组织污染源一览 --> <div class="blockTitleText">无组织污染源一览</div>
<div class="panel panel1"> <img class="blockTitleImg" src="img/enp_blue/block_title.png">
<div class="blockTitle">
<div class="blockTitleText">无组织污染源一览</div>
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
</div>
<div style="display: flex;">
<div style="padding:0.5vw">
<div class="chart" id="chart1" style="width:7vw;height:7vw;"></div>
</div> </div>
<div style="width: 60%;"> <div style="display: flex;">
<div class="pieDataItem"> <div style="padding:0.5vw">
<div class="pieDataText">总计</div> <div class="chart" id="chart1" style="width:7vw;height:7vw;"></div>
<div class="pieDataNumber">{{ wryData.count }}</div>
</div> </div>
<div class="pieDataItem"> <div style="width: 60%;">
<div class="pieDataText">生产工艺过程</div> <div class="pieDataItem">
<div class="pieDataNumber">{{ wryData.count_mtrans }}</div> <div class="pieDataText">总计</div>
</div> <div class="pieDataNumber">{{ wryData.count }}</div>
<div class="pieDataItem"> </div>
<div class="pieDataText">物料储存</div> <div class="pieDataItem">
<div class="pieDataNumber">{{ wryData.count_mstore }}</div> <div class="pieDataText">生产工艺</div>
</div> <div class="pieDataNumber">{{ wryData.count_mtrans }}</div>
<div class="pieDataItem"> </div>
<div class="pieDataText">物料输送</div> <div class="pieDataItem">
<div class="pieDataNumber">{{ wryData.count_product }}</div> <div class="pieDataText">物料储存</div>
<div class="pieDataNumber">{{ wryData.count_mstore }}</div>
</div>
<div class="pieDataItem">
<div class="pieDataText">物料输送</div>
<div class="pieDataNumber">{{ wryData.count_product }}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> <!-- 接入设备数量总览 -->
<!-- 接入设备数量总览 --> <div class="panel panel2">
<div class="panel panel2"> <div class="blockTitle">
<div class="blockTitle"> <div class="blockTitleText">接入设备数量总览</div>
<div class="blockTitleText">接入设备数量总览</div> <img class="blockTitleImg" src="img/enp_blue/block_title.png">
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
</div>
<div style="display: flex;padding: 1vh 1vw;">
<div style="width: 50%;">
<div class="eqItem">
<img class="eqImg" src="img/enp_blue/eq_s.svg">
<div class="eqText">
<div class="eqName">生产设备</div>
<div class="eqNumWrap"><span class="eqNum">{{ eqNumData.sc }}</span>台</div>
</div>
</div>
<div class="eqItem">
<img class="eqImg" src="img/enp_blue/eq_v.svg">
<div class="eqText">
<div class="eqName">监测设备</div>
<div class="eqNumWrap"><span class="eqNum">{{ eqNumData.jc }}</span>台</div>
</div>
</div>
</div> </div>
<div style="width: 50%;"> <div style="display: flex;padding: 1vh 1vw;">
<div class="eqItem"> <div style="width: 50%;height:100%">
<img class="eqImg " src="img/enp_blue/eq_z.svg"> <div class="eqItem">
<div class="eqText"> <img class="eqImg" src="img/enp_blue/eq_s.svg">
<div class="eqName">治理设备</div> <div class="eqText">
<div class="eqNumWrap"><span class="eqNum">{{ eqNumData.zl }}</span>台</div> <div class="eqName">生产设备</div>
<div class="eqNumWrap"><span class="eqNum">{{ eqNumData.sc }}</span>台</div>
</div>
</div>
<div class="eqItem">
<img class="eqImg" src="img/enp_blue/eq_v.svg">
<div class="eqText">
<div class="eqName">监测设备</div>
<div class="eqNumWrap"><span class="eqNum">{{ eqNumData.jc }}</span>台</div>
</div>
</div> </div>
</div> </div>
<div class="eqItem"> <div style="width: 50%;height:100%">
<img class="eqImg" src="img/enp_blue/eq_c.svg"> <div class="eqItem">
<div class="eqText"> <img class="eqImg " src="img/enp_blue/eq_z.svg">
<div class="eqName">监控设备</div> <div class="eqText">
<div class="eqNumWrap"><span class="eqNum">{{ eqNumData.jk }}</span>台</div> <div class="eqName">治理设备</div>
<div class="eqNumWrap"><span class="eqNum">{{ eqNumData.zl }}</span>台</div>
</div>
</div> </div>
</div> <div class="eqItem">
<!-- <div class="eqItem"> <img class="eqImg" src="img/enp_blue/eq_c.svg">
<div class="eqText">
<div class="eqName">监控设备</div>
<div class="eqNumWrap"><span class="eqNum">{{ eqNumData.jk }}</span>台</div>
</div>
</div>
<!-- <div class="eqItem">
<img class="eqImg eqImg_s" src="img/enp_blue/hjzljc.svg"> <img class="eqImg eqImg_s" src="img/enp_blue/hjzljc.svg">
<div class="eqText eqText_s"> <div class="eqText eqText_s">
<div class="eqName">环境质量检测</div> <div class="eqName">环境质量检测</div>
<div class="eqNumWrap"><span class="eqNum">9</span>台</div> <div class="eqNumWrap"><span class="eqNum">9</span>台</div>
</div> </div>
</div> --> </div> -->
</div>
</div>
</div>
<!-- 主要排放口实时监测清单 -->
<div class="panel panel3">
<div class="blockTitle">
<div class="blockTitleText">主要排放口实时监测清单</div>
<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>
<div class="tableHear" style="padding: 0 1vh;">
<div style="flex:1;height:1vh"></div>
<div style="flex:5;margin: 0 1vh;">项目</div>
<div style="flex:2">实测</div>
<div style="flex:2">折算</div>
</div>
<div class="rowItem">
<div class="rowindex">1</div>
<div class="rowname">颗粒物(mg/m³)</div>
<div class="rownum">1</div>
</div>
<div class="rowItem">
<div class="rowindex">2</div>
<div class="rowname">SO₂(mg/m³)</div>
<div class="rownum">2</div>
</div>
<div class="rowItem">
<div class="rowindex">3</div>
<div class="rowname">NOx(mg/m³)</div>
<div class="rownum">3</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- 主要排放口实时监测清单 --> <!-- 右侧数据 -->
<div class="panel panel3"> <div v-show="activeIndex == 0" class="right_other animate__animated animate__backInRight">
<div class="blockTitle"> <!-- 统计 -->
<div class="blockTitleText">主要排放口实时监测清单</div> <div class="panel panel4" style="box-sizing:border-box;padding:0 1vh">
<img class="blockTitleImg" src="img/enp_blue/block_title.png"> <div class="right_one">
</div> <div class="leftNumbers">
<div> <div class="numberItem">
<div class="title_s">{{ cemsData.equipment_name }}</div> <div class="numberItemName">含氧量</div>
<div class="status"><span style="color:#32D74B">数据正常</span><span>2024-01-26 14:32:06</span></div> <div><span class="numberItemNum">1.56</span><span class="numberItemUnit">%</span></div>
<div class="tableHear" style="padding: 0 1vh;"> </div>
<div style="flex:1;height:1vh"></div> <div class="numberItem">
<div style="flex:5;margin: 0 1vh;">项目</div> <div class="numberItemName">温度</div>
<div style="flex:2">实测</div> <div><span class="numberItemNum">73.5</span><span class="numberItemUnit">℃</span></div>
<div style="flex:2">折算</div> </div>
</div> <div class="numberItem">
<div class="rowItem"> <div class="numberItemName">流速</div>
<div class="rowindex">1</div> <div><span class="numberItemNum">4.185</span><span class="numberItemUnit">m/s</span></div>
<div class="rowname">颗粒物(mg/m³)</div> </div>
<div class="rownum">1</div> </div>
</div> <div class="rightNumbers">
<div class="rowItem"> <div class="numberItem">
<div class="rowindex">2</div> <div class="numberItemName">压力</div>
<div class="rowname">SO₂(mg/m³)</div> <div><span class="numberItemNum">721.215 </span><span class="numberItemUnit">KPa</span></div>
<div class="rownum">2</div> </div>
</div> <div class="numberItem">
<div class="rowItem"> <div class="numberItemName">湿度</div>
<div class="rowindex">3</div> <div><span class="numberItemNum">3.615 </span><span class="numberItemUnit">%RH</span> </div>
<div class="rowname">NOx(mg/m³)</div> </div>
<div class="rownum">3</div> <div class="numberItem">
<div class="numberItemName">流量</div>
<div>-</div>
</div>
</div>
<div class="ballImg">
<span class="right_one_status">正常</span>
</div>
</div> </div>
</div> </div>
</div> <!-- 环境质量实时监测清单 -->
</div> <div class="panel panel_big panel5">
<!-- 右侧数据 --> <div class="blockTitle">
<div v-show="activeIndex == 0" class="right_other animate__animated animate__backInRight"> <div class="blockTitleText">环境质量实时监测清单</div>
<!-- 统计 --> <img class="blockTitleImg" src="img/enp_blue/block_title.png">
<div class="panel panel4" style="box-sizing:border-box;padding:0 1vh">
<div class="right_one">
<div class="leftNumbers">
<div class="numberItem">
<div class="numberItemName">含氧量</div>
<div><span class="numberItemNum">1.56</span><span class="numberItemUnit">%</span></div>
</div>
<div class="numberItem">
<div class="numberItemName">温度</div>
<div><span class="numberItemNum">73.5</span><span class="numberItemUnit">℃</span></div>
</div>
<div class="numberItem">
<div class="numberItemName">流速</div>
<div><span class="numberItemNum">4.185</span><span class="numberItemUnit">m/s</span></div>
</div>
</div> </div>
<div class="rightNumbers"> <div>
<div class="numberItem"> <div class="tableHear" style="margin-top:1vh;height:2.6vh;line-height:2.6vh;display:flex;padding:1vh">
<div class="numberItemName">压力</div> <div style="flex:2">项目</div>
<div><span class="numberItemNum">721.215 </span><span class="numberItemUnit">KPa</span></div> <div style="flex:1">PM10(μg/m³)</div>
<div style="flex:1">PM2.5(μg/m³)</div>
</div> </div>
<div class="numberItem"> <div class="tableBody">
<div class="numberItemName">湿度</div> <div v-for="item in wData" :key="item">
<div><span class="numberItemNum">3.615 </span><span class="numberItemUnit">%RH</span> </div> <div class="badyItem">
</div> <div style="flex:2">
<div class="numberItem"> <img src="img/enp_blue/listImg.png"
<div class="numberItemName">流量</div> style="width:2vh;height:2vh;margin:1.2vh 1vh;vertical-align:middle">
<div>-</div> <span>{{ item.name }}</span>
</div> </div>
</div> <span style="flex:1">{{ item.pm10 }}</span>
<div class="ballImg"> <span style="flex:1">{{ item.pm25 }}</span>
<span class="right_one_status">正常</span>
</div>
</div>
</div>
<!-- 环境质量实时监测清单 -->
<div class="panel panel_big panel5">
<div class="blockTitle">
<div class="blockTitleText">环境质量实时监测清单</div>
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
</div>
<div>
<div class="tableHear" style="margin-top:1vh;height:2.6vh;line-height:2.6vh;display:flex;padding:1vh">
<div style="flex:2">项目</div>
<div style="flex:1">PM10(μg/m³)</div>
<div style="flex:1">PM2.5(μg/m³)</div>
</div>
<div class="tableBody">
<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> </div>
<span style="flex:1">{{ item.pm10 }}</span>
<span style="flex:1">{{ item.pm25 }}</span>
</div> </div>
</div> </div>
</div> </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"> <el-drawer v-model="elDrawer" :modal="false" :close-on-click-modal="false" size="95%" :with-header="false"
<el-drawer v-model="elDrawer" :modal="false" :close-on-click-modal="false" size="95%" :with-header="false" direction="ltr" :show-close="false" id="enpElDrawer">
direction="ltr" :show-close="false" id="enpElDrawer"> <!-- <div class="sysName">智能环保一体化管控平台</div> -->
<!-- <div class="sysName">智能环保一体化管控平台</div> --> <org-dialog v-if="activeDrawerName == 'paikou'" @close="closeDialog"></org-dialog>
<org-dialog v-if="activeDrawerName == 'paikou'" @close="closeDialog"></org-dialog> <cems-drawer v-else-if="activeDrawerName == 'cems'" @close="closeDialog"></cems-drawer>
<cems-drawer v-else-if="activeDrawerName == 'cems'" @close="closeDialog"></cems-drawer> <cems2-drawer v-else-if="activeDrawerName == 'cems2'" @close="closeDialog"></cems2-drawer>
<cems2-drawer v-else-if="activeDrawerName == 'cems2'" @close="closeDialog"></cems2-drawer> <cems-export v-else-if="activeDrawerName == 'cemsExport'" @close="closeDialog"></cems-export>
<cems-export v-else-if="activeDrawerName == 'cemsExport'" @close="closeDialog"></cems-export> <pollutant v-else-if="activeDrawerName == 'pollutant'" @close="closeDialog"></pollutant>
<pollutant v-else-if="activeDrawerName == 'pollutant'" @close="closeDialog"></pollutant> <!-- 运输清洁 -->
<!-- 运输清洁 --> <transport v-else-if="activeDrawerName == 'transport'" @close="closeDialog"></transport>
<transport v-else-if="activeDrawerName == 'transport'" @close="closeDialog"></transport> <innerclean v-else-if="activeDrawerName == 'innerClean'" @close="closeDialog"></innerclean>
<innerclean v-else-if="activeDrawerName == 'innerClean'" @close="closeDialog"></innerclean> <!-- 环保管理 -->
<!-- 环保管理 --> <envirqualmonitor v-else-if="activeDrawerName == 'envirqualmonitor'" @close="closeDialog"></envirqualmonitor>
<envirqualmonitor v-else-if="activeDrawerName == 'envirqualmonitor'" @close="closeDialog"></envirqualmonitor> <envirmonitor v-else-if="activeDrawerName == 'envirmonitor'" @close="closeDialog"></envirmonitor>
<envirmonitor v-else-if="activeDrawerName == 'envirmonitor'" @close="closeDialog"></envirmonitor> <pollutecalendar v-else-if="activeDrawerName == 'pollutecalendar'" @close="closeDialog"></pollutecalendar>
<pollutecalendar v-else-if="activeDrawerName == 'pollutecalendar'" @close="closeDialog"></pollutecalendar> <!-- 台账管理 -->
<!-- 台账管理 --> <eqments v-else-if="activeDrawerName == 'eqments'" @close="closeDialog"></eqments>
<eqments v-else-if="activeDrawerName == 'eqments'" @close="closeDialog"></eqments> <alarmrecord v-else-if="activeDrawerName == 'alarmrecord'" @close="closeDialog"></alarmrecord>
<alarmrecord v-else-if="activeDrawerName == 'alarmrecord'" @close="closeDialog"></alarmrecord> <pollutant2 v-else-if="activeDrawerName == 'pollutant2'" @close="closeDialog"></pollutant2>
<pollutant2 v-else-if="activeDrawerName == 'pollutant2'" @close="closeDialog"></pollutant2> <smartg v-else-if="activeDrawerName == 'smartg'" @close="closeDialog"></smartg>
<smartg v-else-if="activeDrawerName == 'smartg'" @close="closeDialog"></smartg> <videowall v-else-if="activeDrawerName == 'video'" @close="closeDialog"></videowall>
<videowall v-else-if="activeDrawerName == 'video'" @close="closeDialog"></videowall> </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") // document.documentElement.classList.add("dark")
this.$TOOL.data.set("APP_DARK", val) // this.$TOOL.data.set("APP_DARK", val)
} else { // } else {
document.documentElement.classList.remove("dark") // document.documentElement.classList.remove("dark")
this.$TOOL.data.remove("APP_DARK") // this.$TOOL.data.remove("APP_DARK")
} // }
}, // },
'config.lang'(val) { // 'config.lang'(val) {
this.$i18n.locale = val // this.$i18n.locale = val
this.$TOOL.data.set("APP_LANG", val) // this.$TOOL.data.set("APP_LANG", val)
} // }
// },
created() {
document.documentElement.classList.add("dark")
this.$TOOL.data.set("APP_DARK", true)
}, },
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 {