智能管理表头
This commit is contained in:
parent
beac9f3733
commit
6ca6565791
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-header class="searchWrap">
|
||||
<div class="left-panel">
|
||||
<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>
|
||||
|
|
@ -105,7 +105,8 @@ export default {
|
|||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-right: 10px;
|
||||
display: flex
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.radio {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-header class="panel_title">
|
||||
<el-menu mode="horizontal" :default-active="activeIndex" :ellipsis="false" @select="handleSelect">
|
||||
<el-menu-item index="1">厂区环境治理</el-menu-item>
|
||||
<el-menu-item index="2">生产过程治理</el-menu-item>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-aside width="70%">
|
||||
<el-aside width="69%" style="margin-right:1%;border-right:0">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-header class="searchWrap">
|
||||
<div class="left-panel">
|
||||
<div class="left-panel">洗车行为统计</div>
|
||||
</div>
|
||||
|
|
@ -30,12 +30,12 @@
|
|||
</el-aside>
|
||||
<el-main class="nopadding">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-header class="searchWrap">
|
||||
<div class="left-panel">环卫车智能调度</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-header class="">
|
||||
<div class="left-panel">
|
||||
<span>厂区环境(PM10):</span>
|
||||
<span style="color: green"> 36ug/m3</span>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-header class="searchWrap">
|
||||
<div class="left-panel">
|
||||
<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>
|
||||
|
|
@ -105,7 +105,8 @@ export default {
|
|||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
margin-right: 10px;
|
||||
display: flex
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.radio {
|
||||
|
|
|
|||
|
|
@ -1,340 +1,342 @@
|
|||
<template>
|
||||
<div class="dashboard">
|
||||
<header>
|
||||
<div class="headerImg">
|
||||
<img src="img/enp_blue/header_enp.png" style="width:100%;">
|
||||
<div class="sysName">
|
||||
水泥有限公司</div>
|
||||
</div>
|
||||
<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"
|
||||
@click="configDark"></el-button>
|
||||
<div class="dashboard" style="height:100%">
|
||||
<el-container style="height:100%">
|
||||
<el-header style="height:8vh">
|
||||
<div class="headerImg">
|
||||
<img src="img/enp_blue/header_enp.png" style="width:100%;height:100%">
|
||||
<div class="sysName">{{ this.$TOOL.data.get("BASE_INFO").base.base_name }}</div>
|
||||
</div>
|
||||
<!-- <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"
|
||||
@click="configDark"></el-button>
|
||||
|
||||
</div>
|
||||
<div style="position: absolute;top:0.7vh;height:6vh">
|
||||
<div style="display: flex;padding-top: 1vh;margin-left: 1vw;">
|
||||
<div :class="bindClass(0)" @click="menuClick(0)">
|
||||
<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 style="position: absolute;top:0.7vh;height:6vh">
|
||||
<div style="display: flex;padding-top: 1vh;margin-left: 1vw;">
|
||||
<div :class="bindClass(0)" @click="menuClick(0)">
|
||||
<div class="menuItem">首页</div>
|
||||
</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 :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 :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 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 :class="bindClass(3)">
|
||||
<div class="menuItem">
|
||||
<el-dropdown class="dropdown" trigger="click" @command="handleClick3">
|
||||
<span class="el-dropdown-link">
|
||||
清洁运输
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="enpMenu">
|
||||
<el-dropdown-item command="transport">厂外运输</el-dropdown-item>
|
||||
<el-dropdown-item command="innerClean">厂内清洁</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<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 :class="bindClass(3)">
|
||||
<div class="menuItem">
|
||||
<el-dropdown class="dropdown" trigger="click" @command="handleClick3">
|
||||
<span class="el-dropdown-link">
|
||||
清洁运输
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="enpMenu">
|
||||
<el-dropdown-item command="transport">厂外运输</el-dropdown-item>
|
||||
<el-dropdown-item command="innerClean">厂内清洁</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="bindClass(4)" @click="menuClick(4)">
|
||||
<!-- <div class="menuItem">环保管理</div> -->
|
||||
<div class="menuItem">
|
||||
<el-dropdown class="dropdown" trigger="click" @command="handleClick4">
|
||||
<span class="el-dropdown-link">
|
||||
环保管理
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="enpMenu">
|
||||
<el-dropdown-item command="envirmonitor">环境监测清单</el-dropdown-item>
|
||||
<el-dropdown-item command="envirqualmonitor">环境质量监测</el-dropdown-item>
|
||||
<!-- <el-dropdown-item command="pollutecalendar">污染日历</el-dropdown-item> -->
|
||||
<!-- <el-dropdown-item command="">决策分析</el-dropdown-item> -->
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<div :class="bindClass(4)" @click="menuClick(4)">
|
||||
<!-- <div class="menuItem">环保管理</div> -->
|
||||
<div class="menuItem">
|
||||
<el-dropdown class="dropdown" trigger="click" @command="handleClick4">
|
||||
<span class="el-dropdown-link">
|
||||
环保管理
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="enpMenu">
|
||||
<el-dropdown-item command="envirmonitor">环境监测清单</el-dropdown-item>
|
||||
<el-dropdown-item command="envirqualmonitor">环境质量监测</el-dropdown-item>
|
||||
<!-- <el-dropdown-item command="pollutecalendar">污染日历</el-dropdown-item> -->
|
||||
<!-- <el-dropdown-item command="">决策分析</el-dropdown-item> -->
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="bindClass(5)" @click="menuClick(5)">
|
||||
<!-- <div class="menuItem">台账管理</div> -->
|
||||
<div class="menuItem">
|
||||
<el-dropdown class="dropdown" trigger="click" @command="handleClick5">
|
||||
<span class="el-dropdown-link">
|
||||
台账管理
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="enpMenu">
|
||||
<el-dropdown-item command="eqments">设备清单</el-dropdown-item>
|
||||
<el-dropdown-item command="alarmrecord">报警记录 </el-dropdown-item>
|
||||
<el-dropdown-item command="video">视屏墙 </el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<div :class="bindClass(5)" @click="menuClick(5)">
|
||||
<!-- <div class="menuItem">台账管理</div> -->
|
||||
<div class="menuItem">
|
||||
<el-dropdown class="dropdown" trigger="click" @command="handleClick5">
|
||||
<span class="el-dropdown-link">
|
||||
台账管理
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="enpMenu">
|
||||
<el-dropdown-item command="eqments">设备清单</el-dropdown-item>
|
||||
<el-dropdown-item command="alarmrecord">报警记录 </el-dropdown-item>
|
||||
<el-dropdown-item command="video">视屏墙 </el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wraning_icon"></div>
|
||||
<div class="user_icon" @click="backSystem"></div>
|
||||
</div>
|
||||
<div class="wraning_icon"></div>
|
||||
<div class="user_icon" @click="backSystem"></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<el-main style="padding:0;overflow: hidden;">
|
||||
<div v-show="activeIndex == 0" class="model" style="">
|
||||
<div id="loadingScreen">
|
||||
</el-header>
|
||||
<el-main style="padding:0;">
|
||||
<div v-show="activeIndex == 0" class="model" style="">
|
||||
<!-- <div id="loadingScreen">
|
||||
<el-progress type="circle" :percentage="loadedPercent" :width=220 status="warning">
|
||||
<template #default="{ percentage }">
|
||||
<div style="font-size: 30px; color: white; font-weight: bold">{{ percentage }}%</div>
|
||||
<div style="font-size: 18px; color: white; margin-top: 10px">工厂模型加载中</div>
|
||||
</template>
|
||||
</el-progress>
|
||||
</div> -->
|
||||
<Cesium />
|
||||
<!-- <canvas id="renderCanvas"></canvas> -->
|
||||
</div>
|
||||
<Cesium />
|
||||
<canvas id="renderCanvas"></canvas>
|
||||
</div>
|
||||
<!-- 左侧列表数据 -->
|
||||
<div v-show="activeIndex == 0" class="left_other animate__animated animate__backInLeft">
|
||||
<!-- 无组织污染源一览 -->
|
||||
<div class="panel panel1">
|
||||
<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 v-show="activeIndex == 0" class="left_other animate__animated animate__backInLeft">
|
||||
<!-- 无组织污染源一览 -->
|
||||
<div class="panel panel1">
|
||||
<div class="blockTitle">
|
||||
<div class="blockTitleText">无组织污染源一览</div>
|
||||
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
||||
</div>
|
||||
<div style="width: 60%;">
|
||||
<div class="pieDataItem">
|
||||
<div class="pieDataText">总计</div>
|
||||
<div class="pieDataNumber">{{ wryData.count }}</div>
|
||||
<div style="display: flex;">
|
||||
<div style="padding:0.5vw">
|
||||
<div class="chart" id="chart1" style="width:7vw;height:7vw;"></div>
|
||||
</div>
|
||||
<div class="pieDataItem">
|
||||
<div class="pieDataText">生产工艺过程</div>
|
||||
<div class="pieDataNumber">{{ wryData.count_mtrans }}</div>
|
||||
</div>
|
||||
<div class="pieDataItem">
|
||||
<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 style="width: 60%;">
|
||||
<div class="pieDataItem">
|
||||
<div class="pieDataText">总计</div>
|
||||
<div class="pieDataNumber">{{ wryData.count }}</div>
|
||||
</div>
|
||||
<div class="pieDataItem">
|
||||
<div class="pieDataText">生产工艺</div>
|
||||
<div class="pieDataNumber">{{ wryData.count_mtrans }}</div>
|
||||
</div>
|
||||
<div class="pieDataItem">
|
||||
<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 class="panel panel2">
|
||||
<div class="blockTitle">
|
||||
<div class="blockTitleText">接入设备数量总览</div>
|
||||
<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 class="panel panel2">
|
||||
<div class="blockTitle">
|
||||
<div class="blockTitleText">接入设备数量总览</div>
|
||||
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
||||
</div>
|
||||
<div style="width: 50%;">
|
||||
<div class="eqItem">
|
||||
<img class="eqImg " src="img/enp_blue/eq_z.svg">
|
||||
<div class="eqText">
|
||||
<div class="eqName">治理设备</div>
|
||||
<div class="eqNumWrap"><span class="eqNum">{{ eqNumData.zl }}</span>台</div>
|
||||
<div style="display: flex;padding: 1vh 1vw;">
|
||||
<div style="width: 50%;height:100%">
|
||||
<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 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 style="width: 50%;height:100%">
|
||||
<div class="eqItem">
|
||||
<img class="eqImg " src="img/enp_blue/eq_z.svg">
|
||||
<div class="eqText">
|
||||
<div class="eqName">治理设备</div>
|
||||
<div class="eqNumWrap"><span class="eqNum">{{ eqNumData.zl }}</span>台</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">
|
||||
<div class="eqText eqText_s">
|
||||
<div class="eqName">环境质量检测</div>
|
||||
<div class="eqNumWrap"><span class="eqNum">9</span>台</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 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 v-show="activeIndex == 0" class="right_other animate__animated animate__backInRight">
|
||||
<!-- 统计 -->
|
||||
<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 class="rightNumbers">
|
||||
<div class="numberItem">
|
||||
<div class="numberItemName">压力</div>
|
||||
<div><span class="numberItemNum">721.215 </span><span class="numberItemUnit">KPa</span></div>
|
||||
</div>
|
||||
<div class="numberItem">
|
||||
<div class="numberItemName">湿度</div>
|
||||
<div><span class="numberItemNum">3.615 </span><span class="numberItemUnit">%RH</span> </div>
|
||||
</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 v-show="activeIndex == 0" class="right_other animate__animated animate__backInRight">
|
||||
<!-- 统计 -->
|
||||
<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 class="panel panel_big panel5">
|
||||
<div class="blockTitle">
|
||||
<div class="blockTitleText">环境质量实时监测清单</div>
|
||||
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
||||
</div>
|
||||
<div class="rightNumbers">
|
||||
<div class="numberItem">
|
||||
<div class="numberItemName">压力</div>
|
||||
<div><span class="numberItemNum">721.215 </span><span class="numberItemUnit">KPa</span></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="numberItem">
|
||||
<div class="numberItemName">湿度</div>
|
||||
<div><span class="numberItemNum">3.615 </span><span class="numberItemUnit">%RH</span> </div>
|
||||
</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 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 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>
|
||||
<span style="flex:1">{{ item.pm10 }}</span>
|
||||
<span style="flex:1">{{ item.pm25 }}</span>
|
||||
</div>
|
||||
<span style="flex:1">{{ item.pm10 }}</span>
|
||||
<span style="flex:1">{{ item.pm25 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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="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="bottom_enp"></div>
|
||||
<div v-if="activeIndex != 0" class="container">
|
||||
<el-drawer v-model="elDrawer" :modal="false" :close-on-click-modal="false" size="95%" :with-header="false"
|
||||
direction="ltr" :show-close="false" id="enpElDrawer">
|
||||
<!-- <div class="sysName">智能环保一体化管控平台</div> -->
|
||||
<org-dialog v-if="activeDrawerName == 'paikou'" @close="closeDialog"></org-dialog>
|
||||
<cems-drawer v-else-if="activeDrawerName == 'cems'" @close="closeDialog"></cems-drawer>
|
||||
<cems2-drawer v-else-if="activeDrawerName == 'cems2'" @close="closeDialog"></cems2-drawer>
|
||||
<cems-export v-else-if="activeDrawerName == 'cemsExport'" @close="closeDialog"></cems-export>
|
||||
<pollutant v-else-if="activeDrawerName == 'pollutant'" @close="closeDialog"></pollutant>
|
||||
<!-- 运输清洁 -->
|
||||
<transport v-else-if="activeDrawerName == 'transport'" @close="closeDialog"></transport>
|
||||
<innerclean v-else-if="activeDrawerName == 'innerClean'" @close="closeDialog"></innerclean>
|
||||
<!-- 环保管理 -->
|
||||
<envirqualmonitor v-else-if="activeDrawerName == 'envirqualmonitor'" @close="closeDialog"></envirqualmonitor>
|
||||
<envirmonitor v-else-if="activeDrawerName == 'envirmonitor'" @close="closeDialog"></envirmonitor>
|
||||
<pollutecalendar v-else-if="activeDrawerName == 'pollutecalendar'" @close="closeDialog"></pollutecalendar>
|
||||
<!-- 台账管理 -->
|
||||
<eqments v-else-if="activeDrawerName == 'eqments'" @close="closeDialog"></eqments>
|
||||
<alarmrecord v-else-if="activeDrawerName == 'alarmrecord'" @close="closeDialog"></alarmrecord>
|
||||
<pollutant2 v-else-if="activeDrawerName == 'pollutant2'" @close="closeDialog"></pollutant2>
|
||||
<smartg v-else-if="activeDrawerName == 'smartg'" @close="closeDialog"></smartg>
|
||||
<videowall v-else-if="activeDrawerName == 'video'" @close="closeDialog"></videowall>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</el-main>
|
||||
<!-- <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="bottom_enp"></div>
|
||||
<div v-if="activeIndex != 0" class="container">
|
||||
<el-drawer v-model="elDrawer" :modal="false" :close-on-click-modal="false" size="95%" :with-header="false"
|
||||
direction="ltr" :show-close="false" id="enpElDrawer">
|
||||
<!-- <div class="sysName">智能环保一体化管控平台</div> -->
|
||||
<org-dialog v-if="activeDrawerName == 'paikou'" @close="closeDialog"></org-dialog>
|
||||
<cems-drawer v-else-if="activeDrawerName == 'cems'" @close="closeDialog"></cems-drawer>
|
||||
<cems2-drawer v-else-if="activeDrawerName == 'cems2'" @close="closeDialog"></cems2-drawer>
|
||||
<cems-export v-else-if="activeDrawerName == 'cemsExport'" @close="closeDialog"></cems-export>
|
||||
<pollutant v-else-if="activeDrawerName == 'pollutant'" @close="closeDialog"></pollutant>
|
||||
<!-- 运输清洁 -->
|
||||
<transport v-else-if="activeDrawerName == 'transport'" @close="closeDialog"></transport>
|
||||
<innerclean v-else-if="activeDrawerName == 'innerClean'" @close="closeDialog"></innerclean>
|
||||
<!-- 环保管理 -->
|
||||
<envirqualmonitor v-else-if="activeDrawerName == 'envirqualmonitor'" @close="closeDialog"></envirqualmonitor>
|
||||
<envirmonitor v-else-if="activeDrawerName == 'envirmonitor'" @close="closeDialog"></envirmonitor>
|
||||
<pollutecalendar v-else-if="activeDrawerName == 'pollutecalendar'" @close="closeDialog"></pollutecalendar>
|
||||
<!-- 台账管理 -->
|
||||
<eqments v-else-if="activeDrawerName == 'eqments'" @close="closeDialog"></eqments>
|
||||
<alarmrecord v-else-if="activeDrawerName == 'alarmrecord'" @close="closeDialog"></alarmrecord>
|
||||
<pollutant2 v-else-if="activeDrawerName == 'pollutant2'" @close="closeDialog"></pollutant2>
|
||||
<smartg v-else-if="activeDrawerName == 'smartg'" @close="closeDialog"></smartg>
|
||||
<videowall v-else-if="activeDrawerName == 'video'" @close="closeDialog"></videowall>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -495,20 +497,24 @@ export default {
|
|||
],
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'config.dark'(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)
|
||||
}
|
||||
// watch: {
|
||||
// 'config.dark'(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")
|
||||
this.$TOOL.data.set("APP_DARK", true)
|
||||
},
|
||||
mounted() {
|
||||
let that = this;
|
||||
|
|
@ -651,8 +657,8 @@ export default {
|
|||
left_other.style.width = '100%';
|
||||
right_other.style.position = 'static';
|
||||
right_other.style.width = '100%';
|
||||
model.style.position = 'relative';
|
||||
model.style.height = chartHeight;
|
||||
// model.style.position = 'relative';
|
||||
// model.style.height = chartHeight;
|
||||
var charts = document.getElementsByClassName('chart')
|
||||
for (var i = 0; i < charts.length; i++) {
|
||||
var chart = charts[i]
|
||||
|
|
@ -1155,6 +1161,8 @@ export default {
|
|||
},
|
||||
unmounted() {
|
||||
this.close();
|
||||
document.documentElement.classList.remove("dark");
|
||||
this.$TOOL.data.remove("APP_DARK")
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1189,8 +1197,8 @@ header {
|
|||
|
||||
.headerImg {
|
||||
width: 100%;
|
||||
height: 6.7vh;
|
||||
line-height: 6.3vh;
|
||||
height: 6.6vh;
|
||||
line-height: 6.5vh;
|
||||
color: #ffffff;
|
||||
font-size: 1.8vw;
|
||||
text-align: center;
|
||||
|
|
@ -1310,6 +1318,7 @@ header {
|
|||
top: 8%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/public/img/enp_blue/bg_enp.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
|
@ -1393,7 +1402,6 @@ header {
|
|||
|
||||
.eqItem {
|
||||
display: flex;
|
||||
/* height: 9vh; */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
flex-wrap: nowrap;
|
||||
|
|
@ -1414,10 +1422,10 @@ header {
|
|||
|
||||
.eqText {
|
||||
flex: 1;
|
||||
height: 8vh;
|
||||
height: 9vh;
|
||||
font-size: 1.4vh;
|
||||
padding-left: 0.5vw;
|
||||
margin-bottom: 1vh;
|
||||
margin: 0.5vh 0;
|
||||
background: url('/public/img/enp_blue/eq_border2.svg') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-size: contain;
|
||||
|
|
@ -1441,7 +1449,7 @@ header {
|
|||
|
||||
.eqNumWrap {
|
||||
font-size: 1.2vh;
|
||||
line-height: 2.5vh;
|
||||
line-height: 3.5vh;
|
||||
}
|
||||
|
||||
.eqNum {
|
||||
|
|
@ -1462,24 +1470,25 @@ header {
|
|||
|
||||
.pieDataItem {
|
||||
width: 50%;
|
||||
height: 35%;
|
||||
height: 49%;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-top: 10%;
|
||||
padding-left: 0.5vw;
|
||||
/* border-left: 1px solid #0070FF; */
|
||||
}
|
||||
|
||||
.pieDataText {
|
||||
height: 2vh;
|
||||
line-height: 1.9vh;
|
||||
font-size: 1.1vh;
|
||||
font-size: 1.5vh;
|
||||
color: #ffffff;
|
||||
padding-left: 0.2vw;
|
||||
}
|
||||
|
||||
.pieDataItem:nth-of-type(1) {
|
||||
.pieDataText {
|
||||
border-left: 0.3vh solid #0091ff;
|
||||
border-left: 0.5vh solid #0091ff;
|
||||
}
|
||||
|
||||
.pieDataNumber {
|
||||
|
|
@ -1489,7 +1498,7 @@ header {
|
|||
|
||||
.pieDataItem:nth-of-type(2) {
|
||||
.pieDataText {
|
||||
border-left: 0.3vh solid #0Ed877;
|
||||
border-left: 0.5vh solid #0Ed877;
|
||||
}
|
||||
|
||||
.pieDataNumber {
|
||||
|
|
@ -1499,7 +1508,7 @@ header {
|
|||
|
||||
.pieDataItem:nth-of-type(3) {
|
||||
.pieDataText {
|
||||
border-left: 0.3vh solid #ffbf60;
|
||||
border-left: 0.5vh solid #ffbf60;
|
||||
}
|
||||
|
||||
.pieDataNumber {
|
||||
|
|
@ -1509,7 +1518,7 @@ header {
|
|||
|
||||
.pieDataItem:nth-of-type(4) {
|
||||
.pieDataText {
|
||||
border-left: 0.3vh solid #67dbff;
|
||||
border-left: 0.5vh solid #67dbff;
|
||||
}
|
||||
|
||||
.pieDataNumber {
|
||||
|
|
|
|||
Loading…
Reference in New Issue