| | |
| | | :key="i" |
| | | style="flex: 1; display: flex" |
| | | > |
| | | <span style="width: 33%; font-size: 0.9rem" @click="chuan(val)">{{ |
| | | <span |
| | | style="width: 33%; font-size: 0.9rem" |
| | | @click="chuan(val)" |
| | | >{{ |
| | | val.sensorCode | sensorFilter |
| | | }}</span> |
| | | <span |
| | |
| | | " |
| | | > |
| | | <div style="position: relative"> |
| | | <img style="width: 5.5rem; height: 5.5rem" :src="compassBg"> |
| | | <img |
| | | style="width: 5.5rem; height: 5.5rem" |
| | | :src="compassBg" |
| | | > |
| | | <img |
| | | style=" |
| | | font-size: 2rem; |
| | |
| | | justify-content: center; |
| | | " |
| | | > |
| | | <div style="font-size: 0.9rem">空气质量指数(小时平均)</div> |
| | | <div style="font-size: 0.9rem"> |
| | | 空气质量指数(小时平均) |
| | | </div> |
| | | <div style="font-size: 1.5rem; margin-top: 7px"> |
| | | {{ aqi }}<span style="font-size: 0.8rem">(AQI)</span> |
| | | </div> |
| | |
| | | </div> |
| | | </el-main> |
| | | </el-aside> |
| | | <el-container class="border-left border-right" style="margin: 0 10px"> |
| | | <el-container |
| | | class="border-left border-right" |
| | | style="margin: 0 10px" |
| | | > |
| | | <el-header |
| | | class="title0" |
| | | style="text-align: center; display: unset !important; margin-top: 10px" |
| | | ><h1 |
| | | > |
| | | <h1 |
| | | style=" |
| | | text-align: center; |
| | | text-align: center; |
| | |
| | | @click="websocketData()" |
| | | > |
| | | {{ deviceName ? deviceName : '停机' }} |
| | | </h1></el-header> |
| | | </h1> |
| | | </el-header> |
| | | <el-main |
| | | style=" |
| | | padding-left: 0; |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="border-top" style="display: flex; height: 50%"> |
| | | <div ref="main" class="middle1" style="flex: 1; padding-top: 2rem" /> |
| | | <div |
| | | class="border-top" |
| | | style="display: flex; height: 50%" |
| | | > |
| | | <div |
| | | ref="main" |
| | | class="middle1" |
| | | style="flex: 1; padding-top: 2rem" |
| | | /> |
| | | <!-- <line-chart :chart-data="lineChartData" /> --> |
| | | <div |
| | | class="border-left middle2" |
| | |
| | | margin-left: 10px; |
| | | " |
| | | > |
| | | <h3 style="font-size: 0.9rem">本月平均值</h3> |
| | | <h3 style="font-size: 0.9rem"> |
| | | 本月平均值 |
| | | </h3> |
| | | <div> |
| | | <div style="font-size: 0.9rem">{{ chartSensorName }}</div> |
| | | <div style="font-size: 0.9rem"> |
| | | {{ chartSensorName }} |
| | | </div> |
| | | <div |
| | | style="padding: 8px 0 0; font-size: 2.3rem; font-weight: bold" |
| | | > |
| | |
| | | > |
| | | <div style="height: 100%; display: flex; flex-direction: column"> |
| | | <div style="height: 30%"> |
| | | <h3 v-if="macLat" style="text-align: center; font-size: 0.9rem"> |
| | | <h3 |
| | | v-if="macLat" |
| | | style="text-align: center; font-size: 0.9rem" |
| | | > |
| | | <span>坐标:</span> {{ macLat }}, {{ macLng }} |
| | | </h3> |
| | | <h3 style="font-size: 0.9rem">实时监测超标预警</h3> |
| | | <h3 style="font-size: 0.9rem"> |
| | | 实时监测超标预警 |
| | | </h3> |
| | | </div> |
| | | <div style="height: 70%"> |
| | | <!-- padding-top: 4%--> |
| | | <img :src="url1" alt="" style="width: 70%"> |
| | | <img |
| | | :src="url1" |
| | | alt="" |
| | | style="width: 70%" |
| | | > |
| | | </div> |
| | | <div> |
| | | <img style="width: 75%" :src="url2" alt=""> |
| | | <img |
| | | style="width: 75%" |
| | | :src="url2" |
| | | alt="" |
| | | > |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | class="right1" |
| | | style="height: 40%; display: flex; flex-direction: column" |
| | | > |
| | | <h3 style="text-align: center; font-size: 0.9rem">设备列表</h3> |
| | | <h3 style="text-align: center; font-size: 0.9rem"> |
| | | 设备列表 |
| | | </h3> |
| | | <ul |
| | | class="listUl" |
| | | style=" |
| | |
| | | class="right1" |
| | | style="height: 40%; display: flex; flex-direction: column" |
| | | > |
| | | <h3 style="text-align: center; font-size: 0.9rem">标准值</h3> |
| | | <h3 style="text-align: center; font-size: 0.9rem"> |
| | | 标准值 |
| | | </h3> |
| | | <ul |
| | | class="listUl" |
| | | style=" |
| | |
| | | <script> |
| | | // 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等) |
| | | // 例如:import《组件名称》from'《组件路径》'; |
| | | |
| | | import { WWindUtil } from '@/components/Wind/WRatingArr.js' |
| | | import json from '@/assets/json/sensor.json' |
| | | import * as echarts from 'echarts' |
| | | // import { parse } from 'path-to-regexp' |
| | |
| | | that.windDeg = windDirs |
| | | if (windDirs === 0) { |
| | | that.windDir = '北风' |
| | | } else if (windDirs > 0 && windDirs < 90) { |
| | | that.windDir = '东北风' |
| | | } else if (windDirs === 90) { |
| | | that.windDir = '东风' |
| | | } else if (windDirs > 90 && windDirs < 180) { |
| | | that.windDir = '东南风' |
| | | } else if (windDirs === 180) { |
| | | that.windDir = '南风' |
| | | } else if (windDirs > 180 && windDirs < 270) { |
| | | that.windDir = '西南风' |
| | | } else if (windDirs === 270) { |
| | | that.windDir = '西风' |
| | | } else if (windDirs > 270 && windDirs < 360) { |
| | | that.windDir = '西北风' |
| | | } else { |
| | | that.windDir = WWindUtil.windValueFormat(windDirs) |
| | | } |
| | | } |
| | | that.alarmColour = {} |