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

周四会议部分更改

This commit is contained in:
shijing 2024-03-01 14:57:07 +08:00
parent 4da1c33c33
commit 4247366f7a
11 changed files with 486 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/index.html
View File

@ -13,9 +13,9 @@
<title>
<%= VUE_APP_TITLE %>
</title>
<!-- <script src="/cesium/Cesium.js"></script> -->
<script src="http://49.232.14.174:2226/pf/cesium/Cesium.js"></script>
<!-- <link href="style.css" rel="stylesheet" /> -->
<link type="text/css" href="./jsmap/jsmap.css" rel="stylesheet" />
<script src="/cesium/Cesium.js"></script>
<!-- <script src="http://49.232.14.174:2226/pf/cesium/Cesium.js"></script> -->
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./webVideoCtrl.js"></script>
<script type="text/javascript" src="./jsVideoPlugin-1.0.0.min.js"></script>

129
src/views/bigScreen/cesiumtest.vue
View File

@ -11,25 +11,122 @@ export default {
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1Yzg3ZDEzOS0zN2Q1LTQ2N2YtOWJhMy1mNWU4MWY5N2ExYzkiLCJpZCI6MjAxMzIsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzY4MTIzNzR9.SfNeHedDyXWLIPiNbc4qSsHBACm7uvaqRsQprL2J4Cw";
const viewer = new Cesium.Viewer("cesiumContainer", {
//shadows: true,
});
const tileset = new Cesium.Cesium3DTileset({
// url: "/3dtiles/tileset.json",
url: "http://49.232.14.174:2226/pf/3dtiles/tileset.json",
// shadows: false,//模型加阴影
animation: false, //动画小部件,左下角的倍速调控器，暂时用不到
// shouldAnimate: false,
homeButton: false, //是否显示Home按钮,一键回到地球，暂时用不到
fullscreenButton: false, //是否显示全屏按钮，右下角的全屏按钮，跟F11功能类似,可以不要
// baseLayerPicker: true, //地图图层组件,可以选择不同的地理皮肤，右上角的皮肤按钮
// geocoder: true, //是否显示地名查找控件，右上角的搜索
timeline: false, //是否显示时间线控件
// sceneModePicker: true, //场景模式
// selectionIndicator: false,//选取指示器组件
// navigationHelpButton: false, //是否显示帮助信息控件
// infoBox: true, //是否显示点击要素之后显示的信息
// requestRenderMode: true, //启用请求渲染模式
// scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
// sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode
// fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
});
//隐藏logo信息
viewer._cesiumWidget._creditContainer.style.display = 'none';
// var camera = viewer.camera;
//*****cesium加载3dtiles*****//
// const tileset = new Cesium.Cesium3DTileset({
// // url: "/3dtiles/tileset.json",
// url: "/glb/photon4.glb",
// // url: "http://49.232.14.174:2226/pf/3dtiles/tileset.json",
// });
tileset.readyPromise.then(function (tileset) {
viewer.scene.primitives.add(tileset);
viewer.zoomTo(
tileset,
new Cesium.HeadingPitchRange(
0.0,
-0.5,
tileset.boundingSphere.radius * 2.0
// //
// tileset.readyPromise.then(function (tileset) {
// viewer.scene.primitives.add(tileset);
// //将tileset的包围球中心点坐标从笛卡尔坐标系转换为地理坐标系
// const cartographic = Cesium.Cartographic.fromCartesian(
// tileset.boundingSphere.center
// );
// const { longitude, latitude, height } = cartographic;
// // 模型包围球的中心点坐标，输出以笛卡尔坐标系表示的三维坐标点
// const current = Cesium.Cartesian3.fromRadians(
// longitude,
// latitude,
// height
// )
// console.log('current', current);
// //根据中心点坐标计算出的地表坐标点
// const surface = Cesium.Cartesian3.fromRadians(
// cartographic.longitude, //经度
// cartographic.latitude, //纬度
// 0.0 //高度
// )
// console.log('surface', surface);
// debugger;
// //根据中心点坐标和height值计算出的新的坐标点
// const offset = Cesium.Cartesian3.fromRadians(
// longitude, latitude, 0
// );
// //更新tileset模型矩阵(modelMatrix)的,实现tileset位置的平移变换
// const translation = Cesium.Cartesian3.subtract(
// offset, //根据中心点坐标和height值计算出的新的坐标点
// surface, //根据中心点坐标计算出的地表坐标点
// new Cesium.Cartesian3()
// );
// tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
// viewer.zoomTo(
// tileset,
// new Cesium.HeadingPitchRange(
// -4.0,
// -0.65,
// 500
// )
// );
// var boundingSphere = tileset.boundingSphere;
// // viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, 0, boundingSphere.radius * 4.0));
// // var rootNode = tileset.root;
// // var modelMatrix2 = rootNode.computedTransform;
// // var translation2 = new Cesium.Cartesian3();
// // Cesium.Matrix4.getTranslation(modelMatrix2, translation2);
// // var offset2 = new Cesium.Cartesian3(0, -1000, 0); // 沿着 Z 轴负方向移动 100 单位
// // var newModelMatrix2 = Cesium.Matrix4.fromTranslation(translation2, offset2);
// // rootNode.computedTransform = newModelMatrix2;
// });
//*****cesium加载3dtiles*****//
//*****cesium加载.glb格式的文件*****//
// 隐藏地球
viewer.scene.globe.show = false
var url = "/glb/photon4.glb";
var height = 0;
viewer.entities.removeAll() //加载之前先清楚所有entity
const position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height)
const heading = Cesium.Math.toRadians(135) //135度转弧度
const pitch = Cesium.Math.toRadians(0);
const roll = 0
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
)
);
});
const entity = viewer.entities.add({
name: 'photon',
position: position,
orientation: orientation,
model: {
uri: url,//注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
scale: 1.5,//缩放比例
minimumPixelSize: 1000,//最小像素大小，可以避免太小看不见
maximumScale: 20000,//模型的最大比例尺大小。minimumPixelSize的上限
incrementallyLoadTextures: true,//加载模型后纹理是否可以继续流入
runAnimations: true,//是否启动模型中制定的gltf动画
clampAnimations: true,//制定gltf动画是否在没有关键帧的持续时间内保持最后一个姿势
shadows: Cesium.ShadowMode.ENABLED,
heightReference: Cesium.HeightReference.NONE
}
})
viewer.trackedEntity = entity; // 聚焦模型
viewer.zoomTo(entity)
//*****cesium加载.glb格式的文件*****//
}
}
</script>

10
src/views/bigScreen/enpComponents/cems.vue
View File

@ -17,6 +17,16 @@
{{ scope.row.equipment_envdata.dust_rtd ? scope.row.equipment_envdata.dust_rtd : '-' }}
</template>
</el-table-column>
<el-table-column label="SO2(mg/m3)" width="180">
<template #default="scope">
{{ scope.row.equipment_envdata.SO2_rtd ? scope.row.equipment_envdata.SO2_rtd : '-' }}
</template>
</el-table-column>
<el-table-column label="NOX(mg/m3)" width="180">
<template #default="scope">
{{ scope.row.equipment_envdata.NOX_rtd ? scope.row.equipment_envdata.NOX_rtd : '-' }}
</template>
</el-table-column>
<el-table-column label="颗粒物折算(mg/m3)" width="180">
<template #default="scope">
{{ scope.row.equipment_envdata.dust_zs ? scope.row.equipment_envdata.dust_zs : '-' }}

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

@ -2,7 +2,7 @@
<el-container>
<el-header class="panel_title">
<div class="left-panel">
环境监测清单
空气质量监测微站
</div>
<div class="right-panel">
<div class="backMap" @click="backtoMap">

6
src/views/bigScreen/enpComponents/innerclean.vue
View File

@ -53,10 +53,10 @@ export default {
query: {},
params: { type: 30, tags: 'carwash' },
cateOptions: [
{ id: 1, name: '场内运输车辆（白名单）' },
{ id: 1, name: '场内运输车辆' },
{ id: 2, name: '非路道移动机械' },
{ id: 3, name: '环卫车辆' },
{ id: 4, name: '其他车辆' },
// { id: 3, name: '环卫车辆' },
// { id: 4, name: '其他车辆' },
],
apiObj: this.$API.em.equipment.list,

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

@ -165,9 +165,6 @@
<el-col :span="12">
<div><span class="infotitle">PM超低排放限值： </span> {{ detailItem.pm_limit }} mg/Nm³</div>
</el-col>
<el-col :span="12">
<div><span class="infotitle">排污许可状况： </span>已许可</div>
</el-col>
<el-col :span="12">
<div><span class="infotitle">治理措施： </span>{{ detailItem.measure }}</div>
</el-col>
@ -223,7 +220,7 @@
<el-main>
<div class="aside_side">
<div class="pageTitle">排放口及关联设备动态信息</div>
<div id="dataChart" style="width: 100%; height:500px;margin-top:1vh"></div>
<div id="dataChart" style="width: 100%; height:300px;margin-top:1vh"></div>
<div id="dataChart2" style="width: 100%; height:200px;margin-top:1vh"></div>
</div>
@ -242,7 +239,7 @@ export default {
params: { type: 10 },
options: [
{ value: '10', label: '主要排放口' },
{ value: '20', label: '次要排放口' }
{ value: '20', label: '一般排放口' }
],
query: {
search: ''
@ -252,7 +249,7 @@ export default {
},
level_: {
10: '主要排放口',
20: '次要排放口'
20: '一般排放口'
},
pfkdetail: false,
tableData: [],
@ -271,13 +268,17 @@ export default {
basicOption: {
title: {
text: '设备名称',
left: 'center',
left: 0,
top: 'top',
textStyle: {
color: '#fff'
}
},
legend: {
top: "8%",
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis'

86
src/views/bigScreen/enpComponents/pollutant.vue
View File

@ -50,6 +50,25 @@
<div class="aside_one">
<div class="pageTitle">污染源及关联设备静态信息</div>
<div class="linesWrap">
<div class="typeLine">
<div class="greenBlock">
<div class="greenBlockInner"></div>
</div>
<span>污染源</span>
</div>
<div class="infoLine">
<span class="circles"></span>
<span>{{ detailItem.name }}</span>
</div>
<el-row class="infoLine">
<el-col :span="12">
<div><span class="infotitle">物料名称</span>{{ detailItem.height }} </div>
</el-col>
<el-col :span="12">
<div><span class="infotitle">治理措施： </span>{{ detailItem.measure }}</div>
</el-col>
</el-row>
<div class="typeLine">
<div class="greenBlock">
<div class="greenBlockInner"></div>
@ -125,35 +144,6 @@
</div>
</el-col>
</el-row>
<div class="typeLine">
<div class="greenBlock">
<div class="greenBlockInner"></div>
</div>
<span>污染源</span>
</div>
<div class="infoLine">
<span class="circles"></span>
<span>{{ detailItem.name }}</span>
</div>
<el-row class="infoLine">
<el-col :span="12">
<div><span class="infotitle">排气筒高度：</span>{{ detailItem.height }} m</div>
</el-col>
<el-col :span="12">
<div><span class="infotitle">废气处理量：</span> {{ detailItem.treatment_capacity }} m³/h
</div>
</el-col>
<el-col :span="12">
<div><span class="infotitle">PM超低排放限值： </span> {{ detailItem.pm_limit }} mg/Nm³</div>
</el-col>
<el-col :span="12">
<div><span class="infotitle">排污许可状况： </span>已许可</div>
</el-col>
<el-col :span="12">
<div><span class="infotitle">治理措施： </span>{{ detailItem.measure }}</div>
</el-col>
</el-row>
<div class="typeLine">
<div class="greenBlock">
<div class="greenBlockInner"></div>
@ -165,38 +155,8 @@
<span>{{ eqc.name }}</span>
</div>
<el-row class="infoLine">
<el-col :span="24">
<div>
<span class="infotitle">颗粒物：（实测值）</span>0.218 mg/m³
<span class="infotitle">（折算值）</span>0.218 mg/m³
</div>
</el-col>
<el-col :span="24">
<div>
<span class="infotitle">SO2：（实测值）</span>0.218 mg/m³
<span class="infotitle">（折算值）</span>0.218 mg/m³
</div>
</el-col>
<el-col :span="24">
<div>
<span class="infotitle">NOX：（实测值）</span>0.218 mg/m³
<span class="infotitle">（折算值）</span>0.218 mg/m³
</div>
</el-col>
<el-col :span="12">
<div><span class="infotitle">流量：</span> 0.000 m³/h</div>
</el-col>
<el-col :span="12">
<div><span class="infotitle">温度：</span> 0.000 ℃</div>
</el-col>
<el-col :span="12">
<div><span class="infotitle">湿度：</span> 0.000 %</div>
</el-col>
<el-col :span="12">
<div><span class="infotitle">压力：</span> 0.000 MPa</div>
</el-col>
<el-col :span="12">
<div><span class="infotitle">含氧量：</span> 0.000 %</div>
<div><span class="infotitle">TSP：</span> 0.000 m³/h</div>
</el-col>
</el-row>
</div>
@ -246,13 +206,17 @@ export default {
basicOption: {
title: {
text: '设备名称',
left: 'center',
left: 0,
top: 'top',
textStyle: {
color: '#fff'
}
},
legend: {
top: '5%',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis'

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

@ -33,14 +33,6 @@
<el-header class="searchWrap">
<div class="left-panel">环卫车智能调度</div>
</el-header>
<el-main class="nopadding">
<el-container>
<el-header class="">
<div class="left-panel">
<span>厂区环境(PM10):</span>
<span style="color: green"> 36ug/m3</span>
</div>
</el-header>
<el-main class="nopadding">
<scTable style="width: 100%;" size="large" :apiObj="apiObj2" row-key="id" :params="params2"
hidePagination hideDo>
@ -53,8 +45,17 @@
</template>
</el-table-column>
</scTable>
<!-- <el-container>
<el-header class="">
<div class="left-panel">
<span>厂区环境(PM10):</span>
<span style="color: green"> 36ug/m3</span>
</div>
</el-header>
<el-main class="nopadding">
</el-main>
</el-container>
</el-container> -->
</el-main>
</el-container>

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

@ -42,7 +42,7 @@
<div v-for="item in scope.row.equip_data" v-bind:key="item.id">
<div v-if="item.type == 10">
<span>{{ item.name }} |
待机 <span style="font-weight:bold; font-size: 1.6vh">{{ item.total_duration_standby
运行时间 <span style="font-weight:bold; font-size: 1.6vh">{{ item.total_duration_run
}}</span> h
</span>
</div>
@ -54,7 +54,7 @@
<div v-for="item in scope.row.equip_data" v-bind:key="item.id">
<div v-if="item.type == 30">
<span>{{ item.name }} |
待机 <span style="font-weight:bold; font-size: 1.6vh">{{ item.total_duration_standby
运行时间 <span style="font-weight:bold; font-size: 1.6vh">{{ item.total_duration_run
}}</span> h
</span>
</div>
@ -65,9 +65,7 @@
<template #default="scope">
<div v-for="item in scope.row.equip_data" v-bind:key="item.id">
<div v-if="item.type == 20">
<span>{{ item.name }} |
待机 <span style="font-weight:bold; font-size: 1.6vh">{{ item.total_duration_standby
}}</span> h
<span>{{ item.avg_tsp }}
</span>
</div>
</div>

3
src/views/bigScreen/enpComponents/transport.vue
View File

@ -2,7 +2,7 @@
<el-container>
<el-header class="panel_title">
<div class="left-panel">
进出厂记录
场外运输
</div>
<div class="right-panel">
<!-- <div class="backMap" @click="backtoMap">
@ -50,6 +50,7 @@
<el-table-column prop="door_name" label="门禁名称"></el-table-column>
<el-table-column prop="vehicle_number" label="车辆识别代号（VIN）"></el-table-column>
<el-table-column prop="emission_standard" label="排放标准"></el-table-column>
<el-table-column prop="" label="新能源"></el-table-column>
</scTable>
</el-main>
</el-container>

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

@ -6,11 +6,6 @@
<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)">
@ -69,18 +64,15 @@
</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>
@ -97,6 +89,7 @@
<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>
@ -110,45 +103,63 @@
</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>
<!-- 左侧列表数据 -->
<div v-show="activeIndex == 0" class="left_other animate__animated animate__backInLeft">
<!-- 无组织污染源一览 -->
<!-- 主要排放口实时监测清单 -->
<div class="panel panel1">
<div class="blockTitle">
<div class="blockTitleText">无组织污染源一览</div>
<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 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 style="width: 60%;">
<div class="pieDataItem">
<div class="pieDataText">总计</div>
<div class="pieDataNumber">{{ wryData.count }}</div>
<div class="rowItem">
<div class="rowindex">1</div>
<div class="rowname">颗粒物(mg/m³)</div>
<div class="rownum">
<span v-if="cemsData.envdata && cemsData.envdata.dust_rtd !== null">{{ cemsData.envdata.dust_rtd
}}</span>
<span v-else>-</span>
</div>
<div class="pieDataItem">
<div class="pieDataText">生产工艺</div>
<div class="pieDataNumber">{{ wryData.count_mtrans }}</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="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 class=" rowItem">
<div class="rowindex">2</div>
<div class="rowname">SO₂(mg/m³)</div>
<div class="rownum">
<span v-if="cemsData.envdata && cemsData.envdata.so2_rtd !== null">{{ cemsData.envdata.so2_rtd
}}</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>
<div class="rowItem">
<div class="rowindex">3</div>
<div class="rowname">NOx(mg/m³)</div>
<div class="rownum">
<span v-if="cemsData.envdata && cemsData.envdata.nox_rtd !== null">{{ cemsData.envdata.nox_rtd
}}</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>
@ -191,18 +202,11 @@
<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="panel panel1">
<div class="blockTitle">
<div class="blockTitleText">主要排放口实时监测清单</div>
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
@ -219,61 +223,173 @@
<div class="rowItem">
<div class="rowindex">1</div>
<div class="rowname">颗粒物(mg/m³)</div>
<div class="rownum">1</div>
<div class="rownum">
<span v-if="cemsData.envdata && cemsData.envdata.dust_rtd !== null">{{ cemsData.envdata.dust_rtd
}}</span>
<span v-else>-</span>
</div>
<div class="rowItem">
<div class="rownum">
<span v-if="cemsData.envdata && cemsData.envdata.dust_zs !== null">{{ cemsData.envdata.dust_zs }}</span>
<span v-else>-</span>
</div>
</div>
<div class=" rowItem">
<div class="rowindex">2</div>
<div class="rowname">SO₂(mg/m³)</div>
<div class="rownum">2</div>
<div class="rownum">
<span v-if="cemsData.envdata && cemsData.envdata.so2_rtd !== null">{{ cemsData.envdata.so2_rtd
}}</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>
<div class="rowItem">
<div class="rowindex">3</div>
<div class="rowname">NOx(mg/m³)</div>
<div class="rownum">3</div>
<div class="rownum">
<span v-if="cemsData.envdata && cemsData.envdata.nox_rtd !== null">{{ cemsData.envdata.nox_rtd
}}</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>
<!-- 右侧数据 -->
<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 class="panel panel1">
<div class="blockTitle">
<div class="blockTitleText">环境质量实时监测清单</div>
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
</div>
<div class="numberItem">
<div class="numberItemName">温度</div>
<div><span class="numberItemNum">73.5</span><span class="numberItemUnit">℃</span></div>
<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="numberItem">
<div class="numberItemName">流速</div>
<div><span class="numberItemNum">4.185</span><span class="numberItemUnit">m/s</span></div>
<div class="rowItem">
<div class="rowindex">1</div>
<div class="rowname">颗粒物(mg/m³)</div>
<div class="rownum">
<span v-if="cemsData.envdata && cemsData.envdata.dust_rtd !== null">{{ cemsData.envdata.dust_rtd
}}</span>
<span v-else>-</span>
</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>
<div class="rightNumbers">
<div class="numberItem">
<div class="numberItemName">压力</div>
<div><span class="numberItemNum">721.215 </span><span class="numberItemUnit">KPa</span></div>
<div class=" rowItem">
<div class="rowindex">2</div>
<div class="rowname">SO₂(mg/m³)</div>
<div class="rownum">
<span v-if="cemsData.envdata && cemsData.envdata.so2_rtd !== null">{{ cemsData.envdata.so2_rtd
}}</span>
<span v-else>-</span>
</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 class="rownum">
<span v-if="cemsData.envdata && cemsData.envdata.so2_zs !== null">{{ cemsData.envdata.so2_zs
}}</span>
<span v-else>-</span>
</div>
</div>
<div class="ballImg">
<span class="right_one_status">正常</span>
<div class="rowItem">
<div class="rowindex">3</div>
<div class="rowname">NOx(mg/m³)</div>
<div class="rownum">
<span v-if="cemsData.envdata && cemsData.envdata.nox_rtd !== null">{{ cemsData.envdata.nox_rtd
}}</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>
<div class="chart" id="chart1" style="width:7vw;height:7vw;"></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 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">
<span v-if="cemsData.envdata && cemsData.envdata.dust_rtd !== null">{{ cemsData.envdata.dust_rtd
}}</span>
<span v-else>-</span>
</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>
<div class=" rowItem">
<div class="rowindex">2</div>
<div class="rowname">SO₂(mg/m³)</div>
<div class="rownum">
<span v-if="cemsData.envdata && cemsData.envdata.so2_rtd !== null">{{ cemsData.envdata.so2_rtd
}}</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>
<div class="rowItem">
<div class="rowindex">3</div>
<div class="rowname">NOx(mg/m³)</div>
<div class="rownum">
<span v-if="cemsData.envdata && cemsData.envdata.nox_rtd !== null">{{ cemsData.envdata.nox_rtd
}}</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 panel_big panel5">
<!-- <div class="panel panel1">
<div class="blockTitle">
<div class="blockTitleText">环境质量实时监测清单</div>
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
@ -299,7 +415,76 @@
</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> -->
<!-- 环境质量实时监测清单 -->
<!-- <div class="panel panel1">
<div class="blockTitle">
<div class="blockTitleText">环境质量实时监测清单</div>
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
</div>
<div>
<div class="tableHear"
style="margin:1vh 0;height:2.6vh;line-height:2.6vh;display:flex;padding:1vh;font-size:1.3vh">
<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>
<!-- <div v-show="activeIndex == 0" class="left_border"></div> -->
<!-- <div v-show="activeIndex == 0" class="right_border"></div> -->
@ -324,7 +509,8 @@
<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>
<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>
<!-- 台账管理 -->
@ -337,7 +523,6 @@
</div>
</el-main>
</el-container>
</div>
</template>
<script>
@ -419,9 +604,9 @@ export default {
containLabel: true
},
series: {
name: '无组织污染源',
name: '出入场车辆数量统计',
type: 'pie',
radius: [35, 40],
radius: [45, 55],
center: ['50%', '50%'],
emphasis: {
focus: 'series',
@ -438,13 +623,15 @@ export default {
labelLine: {
show: false
},
data: [],
data: [
{ value: 2, name: '新能源' },
{ value: 6, name: '其他' },
],
},
},
pieData: [
{ value: 0, name: '物料输送' },
{ value: 0, name: '生产工艺过程' },
{ value: 0, name: '物料储存' },
{ value: 2, name: '新能源' },
{ value: 6, name: '其他' },
],
wryData: {
count: 0,
@ -460,6 +647,7 @@ export default {
},
cemsData: [],
tspData: [],
monitorData: [
{ value: 1.167, name: '颗粒物(mg/m³)' },
{ value: 5.714, name: 'SO₂(mg/m³)' },
@ -552,7 +740,7 @@ export default {
//有组织排放口实时监测清单数据（ CEMS）
getleft3Data() {
let that = this;
that.$API.enp.drain_equip.list.req({ drain__type: 10, equipment__type: 20, has_envdata: 'yes' }).then(res => {
that.$API.em.equipment.list.req({ type: 20, cate__code: 'cems', has_envdata: 'yes' }).then(res => {
that.cemsDataList = res.results;
that.cemsData = res.results[0];
})
@ -560,9 +748,9 @@ export default {
//无组织排放口实时监测数据（TSP）
getright1Data() {
let that = this;
that.$API.enp.drain_equip.list.req({ drain__type: 20, equipment__type: 20, has_envdata: 'yes' }).then(res => {
// that.cemsDataList = res.results;
// that.cemsData = res.results[0];
that.$API.em.equipment.list.req({ type: 20, cate__code: 'tsp', has_envdata: 'yes' }).then(res => {
that.tspDataList = res.results;
that.tspData = res.results[0];
})
},
//环境质量实时监测清单---（小微站）
@ -606,10 +794,12 @@ export default {
// model.style.height = (windowHeight - 4) + 'px';
// model.style.top = 0;
var chartHeight1 = (100 - 18) * 0.31 + 'vh';
var chartHeight2 = (100 - 18) * 0.37 + 'vh';
var chartHeight3 = (100 - 17) * 0.28 + 'vh';
var chartHeight4 = (100 - 17) * 0.715 + 'vh';
var chartHeight1 = (100 - 18) * 0.37 + 'vh';
var chartHeight2 = (100 - 18) * 0.25 + 'vh';
console.log(chartHeight1);
console.log(chartHeight2);
// 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]
@ -618,19 +808,22 @@ export default {
chart.style.height = chartHeight1;
break;
case 1:
chart.style.height = chartHeight1;
break;
case 2:
chart.style.height = chartHeight2;
break;
case 2:
chart.style.height = chartHeight1;
break;
case 3:
chart.style.height = chartHeight3;
chart.style.height = chartHeight1;
break;
case 4:
chart.style.height = chartHeight4;
chart.style.height = chartHeight2;
break;
case 5:
chart.style.height = chartHeight1;
break;
}
chart.style.height = chartHeight;
// chart.style.height = chartHeight;
}
}
else {
@ -761,7 +954,7 @@ export default {
},
}
</script>
<style scoped>
<!-- <style scoped>
.container {
width: 100%;
position: absolute;
@ -948,26 +1141,24 @@ header {
.panel {
margin-top: 1.5vh;
background-size: 100% 100%;
}
.panel1,
.panel1 {
background-image: url('/public/img/enp_blue/left_bg2.png');
}
.panel2 {
background-image: url('/public/img/enp_blue/left_bg1.png');
}
.panel3 {
background-image: url('/public/img/enp_blue/left_bg2.png');
}
.panel4 {
/* .panel4 {
background-image: url('/public/img/enp_blue/right_bg1.png');
}
} */
.panel.panel_big {
/* .panel.panel_big {
background-image: url('/public/img/enp_blue/right_bg2.png');
}
} */
.blockTitle {
width: 100%;
@ -1053,7 +1244,7 @@ header {
.chart {
width: 100%;
height: 220px;
height: 100%;
}
#chart1 {
@ -1191,7 +1382,7 @@ header {
}
.rownum {
flex: 4;
flex: 2;
height: 4vh;
padding: 0.5vh;
line-height: 3vh;
@ -1311,4 +1502,4 @@ header {
bottom: 0;
left: 0;
}
</style>
</style> -->