1454 lines
35 KiB
Vue
1454 lines
35 KiB
Vue
<template>
|
||
<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 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>
|
||
<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
|
||
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 :class="bindClass(4)" @click="menuClick(4)">
|
||
<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-menu>
|
||
</template>
|
||
</el-dropdown>
|
||
</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=""
|
||
>综合查询
|
||
</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>
|
||
</el-header>
|
||
<el-main style="padding: 0">
|
||
<div v-show="activeIndex == 0" class="model" style="">
|
||
<Cesium ref="cesiumDiv" :activeIndex="activeIndex" />
|
||
</div>
|
||
<!-- 左侧列表数据 -->
|
||
<div
|
||
v-show="activeIndex == 0"
|
||
class="left_other animate__animated animate__backInLeft"
|
||
>
|
||
<!-- 有组织排放实时监测清单CEMS -->
|
||
<div class="panel panel1">
|
||
<div class="blockTitle">
|
||
<div class="blockTitleText">
|
||
主要排放口实时监测清单
|
||
</div>
|
||
<img
|
||
class="blockTitleImg"
|
||
src="img/enp_blue/block_title.png"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<scScrollTavle
|
||
v-if="table1Visible"
|
||
:tableHeight="containerHeight"
|
||
:rowData="lineData"
|
||
:titleData="liData1"
|
||
: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>
|
||
<div style="flex:2">颗粒物</div>
|
||
<div style="flex:2">SO₂</div>
|
||
<div style="flex:2">NOx</div>
|
||
</div>
|
||
<div class="rowItem">
|
||
<div class="rowindex">1</div>
|
||
<div class="rowname">设备名称</div>
|
||
<div class="rownum">
|
||
<span v-if="cemsData.envdata && cemsData.envdata.dust_zs !== null">{{ cemsData.envdata.dust_zs }}</span>
|
||
<span v-else>-</span>
|
||
</div>
|
||
<div class="rownum">
|
||
<span v-if="cemsData.envdata && cemsData.envdata.so2_zs !== null">{{ cemsData.envdata.so2_zs
|
||
}}</span>
|
||
<span v-else>-</span>
|
||
</div>
|
||
<div class="rownum">
|
||
<span v-if="cemsData.envdata && cemsData.envdata.nox_zs !== null">{{ cemsData.envdata.nox_zs }}</span>
|
||
<span v-else>-</span>
|
||
</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%; 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 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 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>
|
||
</div>
|
||
</div>
|
||
<!-- 无组织排放实时监测清单 TSP-->
|
||
<div class="panel panel1">
|
||
<div class="blockTitle">
|
||
<div class="blockTitleText">无组织实时监测清单</div>
|
||
<img
|
||
class="blockTitleImg"
|
||
src="img/enp_blue/block_title.png"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<scScrollTavle
|
||
v-if="table2Visible"
|
||
:tableHeight="containerHeight"
|
||
:rowData="lineData2"
|
||
:titleData="liData2"
|
||
:refValue="refValue2"
|
||
class="bigScreenTable"
|
||
:noIndex="noIndex"
|
||
></scScrollTavle>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧数据 -->
|
||
<div
|
||
v-show="activeIndex == 0"
|
||
class="right_other animate__animated animate__backInRight"
|
||
>
|
||
<!-- 空气微站实时监测清单 -->
|
||
<div class="panel panel1">
|
||
<div class="blockTitle">
|
||
<div class="blockTitleText">
|
||
空气微站实时监测清单
|
||
</div>
|
||
<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"
|
||
: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">
|
||
<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>
|
||
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm10 }}</span>
|
||
<span style="flex:1" v-if="item.envdata">{{ item.envdata.pm25 }}</span>
|
||
</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">
|
||
<div class="chart" id="pieChart"></div>
|
||
<div
|
||
style="
|
||
flex-shrink: 1;
|
||
width: 100px;
|
||
align-self: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
"
|
||
>
|
||
<div
|
||
class="todyCarItem"
|
||
v-for="item in pieData"
|
||
:key="item"
|
||
>
|
||
<span style="color: #d5d5d5">{{
|
||
item.name
|
||
}}</span>
|
||
<span
|
||
style="
|
||
font-size: 35px;
|
||
color: #00f6ff;
|
||
font-weight: bold;
|
||
display: inline-block;
|
||
text-align: center;
|
||
"
|
||
>{{ item.value }}</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 环卫车作业情况 -->
|
||
<div class="panel panel1">
|
||
<div class="blockTitle">
|
||
<div class="blockTitleText">环卫车作业情况</div>
|
||
<img
|
||
class="blockTitleImg"
|
||
src="img/enp_blue/block_title.png"
|
||
/>
|
||
</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(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> -->
|
||
<!-- 底部背景图片 -->
|
||
<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>
|
||
import * as echarts from "echarts";
|
||
import Cesium from "./cesiumtest.vue";
|
||
import orgDialog from "./enpComponents/orgwryList";
|
||
import cemsDrawer from "./enpComponents/cems.vue";
|
||
import cems2Drawer from "./enpComponents/cems2.vue";
|
||
import cemsExport from "./enpComponents/cemsExport.vue";
|
||
import pollutant from "./enpComponents/pollutant.vue";
|
||
import innerclean from "./enpComponents/innerclean.vue";
|
||
import transport from "./enpComponents/transport.vue";
|
||
import envirqualmonitor from "./enpComponents/envirqualmonitor.vue";
|
||
import envirmonitor from "./enpComponents/envirmonitor.vue";
|
||
import pollutecalendar from "./enpComponents/pollutecalendar.vue";
|
||
import eqments from "./enpComponents/eqments.vue"; //台账
|
||
import alarmrecord from "./enpComponents/alarmrecord.vue";
|
||
import pollutant2 from "./enpComponents/pollutant2.vue";
|
||
import smartg from "./enpComponents/smartg.vue";
|
||
import videowall from "./enpComponents/video.vue";
|
||
import scScrollTavle from "@/components/scScrollTable.vue";
|
||
// import 'babylonjs-loaders';
|
||
import "animate.css";
|
||
export default {
|
||
components: {
|
||
Cesium,
|
||
orgDialog,
|
||
cemsDrawer,
|
||
cems2Drawer,
|
||
cemsExport,
|
||
pollutant,
|
||
innerclean,
|
||
transport,
|
||
envirqualmonitor,
|
||
envirmonitor,
|
||
pollutecalendar,
|
||
eqments,
|
||
alarmrecord,
|
||
pollutant2,
|
||
smartg,
|
||
videowall,
|
||
scScrollTavle,
|
||
},
|
||
data() {
|
||
return {
|
||
config: {
|
||
dark: this.$TOOL.data.get("APP_DARK") || false,
|
||
},
|
||
elDrawer: true,
|
||
isCollapse: false,
|
||
nowDay: 1,
|
||
initialAlpha: -Math.PI / 0.89,
|
||
initialBeta: Math.PI / 3.3,
|
||
initialRadius: 18,
|
||
initialTarget: null,
|
||
scene: null,
|
||
myui: null,
|
||
is_mainviewpoint: false,
|
||
resizeTimeout: null,
|
||
engine: null,
|
||
loadedPercent: 0,
|
||
showKgcet: true,
|
||
currentLightMesh: null,
|
||
// activeBtns: 10,
|
||
activeDrawerName: "",
|
||
activeIndex: 0,
|
||
activeSection: 2,
|
||
activeSectionName: "回转窑",
|
||
updateTime: "2023-08-17 16:00:00",
|
||
pieOption: {
|
||
title: {
|
||
text: "",
|
||
subtext: "",
|
||
left: "center",
|
||
},
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: "{a} <br/>{b}: {c} ({d}%)",
|
||
},
|
||
legend: {
|
||
// orient: 'vertical',
|
||
center: true,
|
||
bottom: 1,
|
||
data: ["新能源", "其他"],
|
||
},
|
||
backgroundColor: "rgba(255,255,255,0)",
|
||
color: [
|
||
"rgb(3,195,198)",
|
||
"rgb(155,248,249)",
|
||
"rgb(110,181,249)",
|
||
"rgb(205,248,248)",
|
||
],
|
||
grid: {
|
||
left: "3%",
|
||
top: "3%",
|
||
containLabel: true,
|
||
},
|
||
series: {
|
||
name: "今日车辆数量统计",
|
||
type: "pie",
|
||
radius: [25, 45],
|
||
center: ["50%", "50%"],
|
||
emphasis: {
|
||
focus: "series",
|
||
label: {
|
||
show: true,
|
||
fontSize: 10,
|
||
fontWeight: "bold",
|
||
},
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: "center",
|
||
},
|
||
labelLine: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{ value: 2, name: "新能源" },
|
||
{ value: 6, name: "其他" },
|
||
],
|
||
},
|
||
},
|
||
pieData: [
|
||
{ value: 2, name: "新能源" },
|
||
{ value: 6, name: "其他" },
|
||
],
|
||
containerHeight: 100,
|
||
refValue1: "moocBox1",
|
||
table1Visible: true,
|
||
lineData: [],
|
||
liData1: ["设备名称", "颗粒物", "SO₂", "NOx"],
|
||
refValue2: "moocBox2",
|
||
table2Visible: true,
|
||
lineData2: [],
|
||
liData2: ["设备名称", "TSP测量值"],
|
||
refValue3: "moocBox3",
|
||
table3Visible: true,
|
||
lineData3: [],
|
||
liData3: ["设备名称", "PM10", "PM2.5"],
|
||
noIndex: true,
|
||
eqNumData: {
|
||
sc: 0,
|
||
jc: 0,
|
||
zl: 0,
|
||
jk: 0,
|
||
},
|
||
cemsDataList: [],
|
||
cemsData: [],
|
||
tspData: [],
|
||
wData: [],
|
||
intervalinfo: null, //窗口数据更新定时器
|
||
};
|
||
},
|
||
created() {
|
||
document.documentElement.classList.add("dark");
|
||
this.$TOOL.data.set("APP_DARK", true);
|
||
},
|
||
mounted() {
|
||
let that = this;
|
||
that.initDomStyle();
|
||
that.getleft1Data();
|
||
that.getleft2Data();
|
||
that.getleft3Data();
|
||
that.getright1Data();
|
||
that.getright2Data();
|
||
that.getright3Data();
|
||
that.initCharts();
|
||
that.addListener();
|
||
that.$nextTick(() => {
|
||
setTimeout(function () {}, 5000);
|
||
});
|
||
// that.intervalinfo = setInterval(() => {
|
||
// that.getleft1Data();
|
||
// // that.getleft2Data();
|
||
// that.getleft3Data();
|
||
// that.getright1Data();
|
||
// that.getright2Data();
|
||
// that.getright3Data();
|
||
// },60000)
|
||
},
|
||
beforeUnmount() {
|
||
// 性能优化
|
||
const canvas = document.getElementById("renderCanvas");
|
||
if (canvas) {
|
||
canvas.parentNode.removeChild(canvas);
|
||
}
|
||
},
|
||
methods: {
|
||
//有组织排放口实时监测清单数据（ CEMS）
|
||
getleft1Data() {
|
||
let that = this;
|
||
that.$API.em.equipment.list
|
||
.req({ type: 40, cate__code: "cems", has_envdata: "yes" })
|
||
.then((res) => {
|
||
that.cemsDataList = res.results;
|
||
that.cemsData = res.results[0];
|
||
let lineData = [];
|
||
res.results.forEach((item, index) => {
|
||
let arr = [],
|
||
obj1 = {},
|
||
obj2 = {},
|
||
obj3 = {},
|
||
obj4 = {};
|
||
obj1.elType = "primary";
|
||
obj1.value = item.name; //设备名称
|
||
obj2.elType = "primary";
|
||
obj2.value =
|
||
item.envdata && item.envdata.dust_zs
|
||
? item.envdata.dust_zs
|
||
: "-"; //颗粒物折算值
|
||
obj3.elType = "primary";
|
||
obj3.value =
|
||
item.envdata && item.envdata.so2_zs
|
||
? item.envdata.so2_zs
|
||
: "-"; //SO₂折算值
|
||
obj4.elType = "primary";
|
||
obj4.value =
|
||
item.envdata && item.envdata.nox_zs
|
||
? item.envdata.nox_zs
|
||
: "-"; //NOx折算值
|
||
arr.push(obj1);
|
||
arr.push(obj2);
|
||
arr.push(obj3);
|
||
arr.push(obj4);
|
||
lineData.push(arr);
|
||
});
|
||
this.lineData = lineData;
|
||
});
|
||
},
|
||
//接入设备数量
|
||
getleft2Data() {
|
||
//生产
|
||
this.$API.em.equipment.list
|
||
.req({ type: 10, query: {} })
|
||
.then((res1) => {
|
||
// console.log(res1)
|
||
this.eqNumData.sc = res1.count;
|
||
});
|
||
//监测
|
||
this.$API.em.equipment.list
|
||
.req({ type: 40, query: {} })
|
||
.then((res2) => {
|
||
// console.log(res2)
|
||
this.eqNumData.jc = res2.count;
|
||
});
|
||
//治理
|
||
this.$API.em.equipment.list
|
||
.req({ type: 30, query: {} })
|
||
.then((res3) => {
|
||
// console.log(res3)
|
||
this.eqNumData.zl = res3.count;
|
||
});
|
||
//监控
|
||
this.$API.em.equipment.list
|
||
.req({ type: 50, query: {} })
|
||
.then((res4) => {
|
||
// console.log(res4)
|
||
this.eqNumData.jk = res4.count;
|
||
});
|
||
},
|
||
//无组织排放口实时监测数据（TSP）
|
||
getleft3Data() {
|
||
let that = this;
|
||
that.$API.em.equipment.list
|
||
.req({ type: 40, cate__code: "tsp", has_envdata: "yes" })
|
||
.then((res) => {
|
||
that.tspDataList = res.results;
|
||
that.tspData = res.results[0];
|
||
let lineData = [];
|
||
res.results.forEach((item, index) => {
|
||
let arr = [],
|
||
obj1 = {},
|
||
obj2 = {};
|
||
obj1.elType = "primary";
|
||
obj1.value = item.name; //设备名称
|
||
obj2.elType = "primary";
|
||
obj2.value =
|
||
item.envdata && item.envdata.tsp
|
||
? item.envdata.tsp
|
||
: "-"; //颗粒物折算值
|
||
arr.push(obj1);
|
||
arr.push(obj2);
|
||
lineData.push(arr);
|
||
});
|
||
this.lineData2 = lineData;
|
||
});
|
||
},
|
||
//空气微站实时监测---（小微站）
|
||
getright1Data() {
|
||
let that = this;
|
||
that.$API.em.equipment.list
|
||
.req({ type: 40, cate__code: "aqms", has_envdata: "yes" })
|
||
.then((res) => {
|
||
that.wData = res.results;
|
||
let lineData = [];
|
||
res.results.forEach((item, index) => {
|
||
let arr = [],
|
||
obj1 = {},
|
||
obj2 = {},
|
||
obj3 = {};
|
||
obj1.elType = "primary";
|
||
obj1.value = item.name; //设备名称
|
||
obj2.elType = "primary";
|
||
obj2.value =
|
||
item.envdata && item.envdata.pm10
|
||
? item.envdata.pm10
|
||
: "-"; //PM10
|
||
obj3.elType = "primary";
|
||
obj3.value =
|
||
item.envdata && item.envdata.pm25
|
||
? item.envdata.pm25
|
||
: "-"; //PM2.5
|
||
arr.push(obj1);
|
||
arr.push(obj2);
|
||
arr.push(obj3);
|
||
lineData.push(arr);
|
||
});
|
||
this.lineData3 = lineData;
|
||
});
|
||
},
|
||
//今日车辆统计数据
|
||
getright2Data() {},
|
||
//环卫车作业情况
|
||
getright3Data() {},
|
||
configDark() {
|
||
this.config.dark = this.config.dark ? false : true;
|
||
},
|
||
backSystem() {
|
||
this.$router.push({ path: "/dashboard_enp" });
|
||
},
|
||
closeDialog() {
|
||
this.elDrawer = false;
|
||
this.activeIndex = 0;
|
||
},
|
||
drawerClick() {
|
||
this.elDrawer = true;
|
||
},
|
||
initDomStyle() {
|
||
let that = this;
|
||
// 获取窗口的总高度
|
||
var windowHeight = window.innerHeight;
|
||
var windowWidth = window.innerWidth;
|
||
// 获取目标元素
|
||
var dashboard = document.getElementsByClassName("dashboard")[0];
|
||
var left_other = document.getElementsByClassName("left_other")[0];
|
||
var right_other = document.getElementsByClassName("right_other")[0];
|
||
var model = document.getElementsByClassName("model")[0];
|
||
if (windowWidth > 960) {
|
||
dashboard.style.overflow = "hidden";
|
||
// 设置目标元素的高度
|
||
left_other.style.position = "absolute";
|
||
left_other.style.width = "20%";
|
||
right_other.style.position = "absolute";
|
||
// right_other.style.width = '20%';
|
||
// model.style.position = 'absolute';
|
||
// model.style.height = (windowHeight - 4) + 'px';
|
||
// model.style.top = 0;
|
||
|
||
var chartHeight1 = (100 - 18) * 0.35 + "vh";
|
||
var chartHeight2 = (100 - 18) * 0.29 + "vh";
|
||
let piechart = document.getElementById("pieChart");
|
||
piechart.style.height = (100 - 18) * 0.29 - 4 + "vh";
|
||
// var chartHeight3 = (100 - 17) * 0.28 + 'vh';
|
||
// var chartHeight4 = (100 - 17) * 0.715 + 'vh';
|
||
var charts = document.getElementsByClassName("panel");
|
||
for (var i = 0; i < charts.length; i++) {
|
||
var chart = charts[i];
|
||
switch (i) {
|
||
case 0:
|
||
chart.style.height = chartHeight1;
|
||
break;
|
||
case 1:
|
||
chart.style.height = chartHeight2;
|
||
break;
|
||
case 2:
|
||
chart.style.height = chartHeight1;
|
||
break;
|
||
case 3:
|
||
chart.style.height = chartHeight1;
|
||
break;
|
||
case 4:
|
||
chart.style.height = chartHeight2;
|
||
break;
|
||
case 5:
|
||
chart.style.height = chartHeight1;
|
||
break;
|
||
}
|
||
// chart.style.height = chartHeight;
|
||
}
|
||
} else {
|
||
dashboard.style.overflow = "auto";
|
||
var chartHeight = windowWidth * 0.6;
|
||
left_other.style.position = "static";
|
||
left_other.style.width = "100%";
|
||
right_other.style.position = "static";
|
||
right_other.style.width = "100%";
|
||
// 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];
|
||
chart.style.height = chartHeight;
|
||
}
|
||
}
|
||
let containerHeight =
|
||
document.getElementsByClassName("panel1")[0].clientHeight;
|
||
debugger;
|
||
// console.log('containerHeight', containerHeight);
|
||
that.containerHeight = containerHeight;
|
||
if (this.engine != null) {
|
||
this.engine.resize();
|
||
}
|
||
},
|
||
// bindBtnClass(index) {
|
||
// let classInfo = { btns: true, btnsActive: false };
|
||
// if (index == this.activeBtns) {
|
||
// classInfo.btnsActive = true;
|
||
// }
|
||
// return classInfo;
|
||
// },
|
||
//切换设备类型
|
||
// equipmentTypeChange(index) {
|
||
// let that = this;
|
||
// that.activeBtns = index;
|
||
// // this.$refs.typeChange.setData(index);
|
||
// // this.$refs.cesiumDiv.typeChange(index);
|
||
// },
|
||
// 动态绑定Class
|
||
bindClass(index) {
|
||
let that = this;
|
||
let classInfo = {
|
||
menuWrap: true,
|
||
menuWrap1: false,
|
||
menuWrap2: false,
|
||
menuWrapActive: false,
|
||
};
|
||
if (index == that.activeIndex) {
|
||
classInfo.menuWrapActive = true;
|
||
}
|
||
if (index == 1 || index == 2) {
|
||
classInfo.menuWrap2 = true;
|
||
} else {
|
||
classInfo.menuWrap1 = true;
|
||
}
|
||
return classInfo;
|
||
},
|
||
menuClick(index) {
|
||
if (index == 0) {
|
||
this.activeIndex = index;
|
||
}
|
||
},
|
||
handleClick(command) {
|
||
this.activeIndex = 1;
|
||
this.elDrawer = true;
|
||
this.activeDrawerName = command;
|
||
},
|
||
handleClick2(command) {
|
||
this.activeIndex = 2;
|
||
this.elDrawer = true;
|
||
this.activeDrawerName = command;
|
||
},
|
||
handleClick3(command) {
|
||
this.activeIndex = 3;
|
||
this.elDrawer = true;
|
||
this.activeDrawerName = command;
|
||
},
|
||
handleClick4(command) {
|
||
this.activeIndex = 4;
|
||
this.elDrawer = true;
|
||
this.activeDrawerName = command;
|
||
},
|
||
handleClick5(command) {
|
||
this.activeIndex = 5;
|
||
this.elDrawer = true;
|
||
this.activeDrawerName = command;
|
||
},
|
||
compare(property) {
|
||
return function (a, b) {
|
||
return a[property] - b[property];
|
||
};
|
||
},
|
||
initCharts() {
|
||
let that = this;
|
||
// 初始化所有表
|
||
that.pieOption.series.data = that.pieData;
|
||
that.setChart("pieChart", that.pieOption);
|
||
},
|
||
addListener() {
|
||
var that = this;
|
||
window.addEventListener("resize", function () {
|
||
// 如果已经有 resizeTimeout，清除它
|
||
if (this.resizeTimeout) {
|
||
clearTimeout(this.resizeTimeout);
|
||
}
|
||
// 设置一个新的 resizeTimeout，延迟调整样式
|
||
this.resizeTimeout = setTimeout(function () {
|
||
that.initDomStyle();
|
||
}, 300); // 延迟 300 毫秒，可以根据需要调整
|
||
});
|
||
},
|
||
|
||
resizeChart(name) {
|
||
// 根据name resize chart
|
||
var myChart = echarts.getInstanceByDom(
|
||
document.getElementById(name)
|
||
);
|
||
if (myChart != undefined) {
|
||
// console.log(name + ' :resize')
|
||
myChart.resize();
|
||
}
|
||
},
|
||
setChart(name, option = null) {
|
||
// 根据name 渲染数据, option需填写，否则option为模拟数据
|
||
var myChart = echarts.getInstanceByDom(
|
||
document.getElementById(name)
|
||
);
|
||
if (myChart == undefined) {
|
||
myChart = echarts.init(document.getElementById(name), "dark", {
|
||
renderer: "svg",
|
||
});
|
||
}
|
||
if (option == null) {
|
||
option = Object.assign({}, this.pieOption);
|
||
}
|
||
setTimeout(() => {
|
||
try {
|
||
myChart.setOption(option);
|
||
} catch (error) {}
|
||
}, 500);
|
||
},
|
||
},
|
||
unmounted() {
|
||
this.intervalinfo = null;
|
||
document.documentElement.classList.remove("dark");
|
||
this.$TOOL.data.remove("APP_DARK");
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.container {
|
||
width: 100%;
|
||
position: absolute;
|
||
height: 100vh;
|
||
top: 0vh;
|
||
z-index: 0;
|
||
padding-top: 8vh;
|
||
box-sizing: border-box;
|
||
background-image: url("/public/img/enp_blue/bg_enp.png");
|
||
background-size: cover;
|
||
}
|
||
|
||
.dashboard {
|
||
background-color: black;
|
||
font-family: Inter, "-apple-system", BlinkMacSystemFont, "PingFang SC",
|
||
"Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue",
|
||
Helvetica, Arial, sans-serif;
|
||
}
|
||
|
||
header {
|
||
z-index: 10;
|
||
display: flex;
|
||
position: relative;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0.7vh 0.4vw;
|
||
justify-content: space-between;
|
||
background-image: url("/public/img/enp_blue/bg_enp.png");
|
||
}
|
||
|
||
.headerImg {
|
||
width: 100%;
|
||
height: 6.6vh;
|
||
line-height: 6.5vh;
|
||
color: #ffffff;
|
||
font-size: 1.8vw;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
|
||
.sysName {
|
||
width: 100%;
|
||
text-align: center;
|
||
line-height: 6.3vh;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.sysName {
|
||
color: #ffffff;
|
||
padding-left: 1vw;
|
||
font-size: 2.6vh;
|
||
}
|
||
.bottom_enp {
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
height: 5vh;
|
||
position: absolute;
|
||
background-size: 100% 100%;
|
||
background-position: center;
|
||
background-image: url("/public/img/enp_blue/bottom_enp.png");
|
||
}
|
||
|
||
.menuWrap {
|
||
height: 4.6vh;
|
||
margin-right: 1vw;
|
||
}
|
||
|
||
.menuWrap1 {
|
||
width: 4.4vw;
|
||
background-image: url("/public/img/enp_blue/menu_bg1.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.menuWrap2 {
|
||
width: 7vw;
|
||
background-image: url("/public/img/enp_blue/menu_bg2.png");
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.menuWrapActive.menuWrap1 {
|
||
background-image: url("/public/img/enp_blue/menu_bg1_active.png");
|
||
}
|
||
|
||
.menuWrapActive.menuWrap2 {
|
||
background-image: url("/public/img/enp_blue/menu_bg2_active.png");
|
||
}
|
||
|
||
.menuItem {
|
||
color: #ffffff;
|
||
line-height: 4.4vh;
|
||
font-size: 1.5vh;
|
||
text-align: center;
|
||
}
|
||
|
||
.dropdown {
|
||
color: #ffffff;
|
||
line-height: 4.5vh;
|
||
font-size: 1.4vh;
|
||
}
|
||
|
||
.wraning_icon {
|
||
width: 2vh;
|
||
height: 2.3vh;
|
||
margin-top: 0.9vh;
|
||
background-size: cover;
|
||
background-image: url("/public/img/enp_blue/warning_enp.png");
|
||
}
|
||
|
||
.user_icon {
|
||
width: 2.3vh;
|
||
height: 2.3vh;
|
||
margin-top: 0.9vh;
|
||
margin-left: 2vh;
|
||
background-size: cover;
|
||
background-image: url("/public/img/enp_blue/user_enp.png");
|
||
}
|
||
|
||
.model {
|
||
top: 8%;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: url("/public/img/enp_blue/bg_enp.png");
|
||
background-size: cover;
|
||
}
|
||
|
||
#renderCanvas {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
#loadingScreen {
|
||
position: absolute;
|
||
width: 100%;
|
||
top: 260px;
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30px;
|
||
}
|
||
|
||
.left_other,
|
||
.right_other {
|
||
position: absolute;
|
||
top: 8vh;
|
||
width: 20%;
|
||
padding: 10px;
|
||
}
|
||
|
||
.right_other {
|
||
right: 0;
|
||
}
|
||
|
||
.panel {
|
||
margin-top: 1.5vh;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.panel1 {
|
||
background-image: url("/public/img/enp_blue/left_bg2.png");
|
||
}
|
||
|
||
.panel2 {
|
||
background-image: url("/public/img/enp_blue/left_bg1.png");
|
||
}
|
||
|
||
/* .panel4 {
|
||
background-image: url('/public/img/enp_blue/right_bg1.png');
|
||
} */
|
||
|
||
/* .panel.panel_big {
|
||
background-image: url('/public/img/enp_blue/right_bg2.png');
|
||
} */
|
||
|
||
.blockTitle {
|
||
width: 100%;
|
||
height: 4vh;
|
||
position: relative;
|
||
}
|
||
|
||
.blockTitleText {
|
||
width: 100%;
|
||
height: 4vh;
|
||
line-height: 4vh;
|
||
position: absolute;
|
||
left: 0px;
|
||
top: 0px;
|
||
z-index: 10;
|
||
padding-left: 2.5vw;
|
||
color: #ffffff;
|
||
font-size: 1vw;
|
||
}
|
||
|
||
.blockTitleImg {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.eqItem {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
flex-wrap: nowrap;
|
||
overflow: hidden;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.eqImg {
|
||
width: 4.8vh;
|
||
height: 5.5vh;
|
||
flex-shrink: 0;
|
||
padding-top: 1.5vh;
|
||
}
|
||
|
||
.eqImg_s {
|
||
padding-top: 0;
|
||
}
|
||
|
||
.eqText {
|
||
flex: 1;
|
||
height: 100%;
|
||
font-size: 1.4vh;
|
||
padding-left: 0.5vw;
|
||
margin: 0.5vh 0;
|
||
background: url("/public/img/enp_blue/eq_border2.svg") no-repeat;
|
||
background-size: 100% 100%;
|
||
background-size: contain;
|
||
}
|
||
|
||
.eqText_s {
|
||
height: 5.5vh;
|
||
margin-bottom: 1vh;
|
||
background: url("/public/img/enp_blue/eq_border.svg") no-repeat;
|
||
background-size: cover;
|
||
}
|
||
|
||
.eqName {
|
||
line-height: 4.5vh;
|
||
}
|
||
|
||
.eqText_s > .eqName {
|
||
padding-top: 0.5vh;
|
||
line-height: 2.5vh;
|
||
}
|
||
|
||
.eqNumWrap {
|
||
font-size: 1.2vh;
|
||
line-height: 3.5vh;
|
||
}
|
||
|
||
.eqNum {
|
||
font-size: 1.8vh;
|
||
}
|
||
|
||
.chart {
|
||
width: 50%;
|
||
height: 80%;
|
||
}
|
||
|
||
#pieChart {
|
||
flex: 1;
|
||
}
|
||
.todyCarItem {
|
||
color: white;
|
||
font-size: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.pieDataItem {
|
||
width: 50%;
|
||
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.5vh;
|
||
color: #ffffff;
|
||
padding-left: 0.2vw;
|
||
}
|
||
|
||
.status {
|
||
height: 2.6vh;
|
||
display: flex;
|
||
padding: 0 1vh;
|
||
line-height: 2.6vh;
|
||
color: #ffffff;
|
||
justify-content: space-between;
|
||
}
|
||
/* table相关样式 */
|
||
.tableHear {
|
||
display: flex;
|
||
color: #ffffff;
|
||
margin-bottom: 0.5vh;
|
||
}
|
||
.tableBody {
|
||
padding: 0 1vh;
|
||
}
|
||
.badyItem {
|
||
height: 4.6vh;
|
||
line-height: 4.6vh;
|
||
margin-bottom: 1.4vh;
|
||
border-radius: 3px;
|
||
color: #ffffff;
|
||
font-size: 1.4vh;
|
||
display: flex;
|
||
border: 1px solid #0091ff;
|
||
}
|
||
.rowItem {
|
||
display: flex;
|
||
color: #ffffff;
|
||
padding: 0 1vh;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.rowindex {
|
||
flex: 1;
|
||
height: 4vh;
|
||
line-height: 4vh;
|
||
text-align: center;
|
||
margin-bottom: 1vh;
|
||
background-image: url("/public/img/enp_blue/index_bg.png");
|
||
background-size: cover;
|
||
}
|
||
|
||
.rowname {
|
||
flex: 5;
|
||
height: 4vh;
|
||
margin: 0 1vh;
|
||
padding: 0.5vh;
|
||
line-height: 3vh;
|
||
box-sizing: border-box;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.rownum {
|
||
flex: 2;
|
||
height: 4vh;
|
||
padding: 0.5vh;
|
||
line-height: 3vh;
|
||
box-sizing: border-box;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
/* table */
|
||
|
||
/* 左右两边border，暂时没展示 */
|
||
.left_border {
|
||
width: 1vh;
|
||
height: 70vh;
|
||
position: absolute;
|
||
left: 21%;
|
||
top: 15vh;
|
||
background-size: cover;
|
||
background-image: url("/public/img/enp_blue/left_border.png");
|
||
}
|
||
|
||
.right_border {
|
||
width: 1vh;
|
||
height: 70vh;
|
||
position: absolute;
|
||
right: 21%;
|
||
top: 15vh;
|
||
background-size: cover;
|
||
background-image: url("/public/img/enp_blue/right_border.png");
|
||
}
|
||
/* 左右两边border，暂时没展示 */
|
||
</style>
|