|
|
|
@ -1,6 +1,9 @@ |
|
|
|
<template> |
|
|
|
<div class="env-container"> |
|
|
|
<div class="env-top-title" /> |
|
|
|
<div class="env-top-title"> |
|
|
|
<img src="@/assets/images/logo-2.png" alt=""> |
|
|
|
<p>档案库房智能管理系统</p> |
|
|
|
</div> |
|
|
|
<div class="header-date"> |
|
|
|
<div class="time">{{ nowDate.split(' ')[1] }}</div> |
|
|
|
<div class="time-other"> |
|
|
|
@ -72,60 +75,47 @@ |
|
|
|
<svg-icon icon-class="pm25" class-name="msg-list-svg" /> |
|
|
|
<div class="msg-txt"> |
|
|
|
<span class="msg-list-num">{{ avgData.pm25 }}</span> |
|
|
|
<p class="msg-list-unit">PM2.5浓度 {{ avgData.pm25Unit }}</p> |
|
|
|
<p class="msg-list-unit">PM2.5浓度 <br>{{ avgData.pm25Unit }}</p> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<svg-icon icon-class="pm10" class-name="msg-list-svg" /> |
|
|
|
<div class="msg-txt"> |
|
|
|
<span class="msg-list-num">{{ avgData.pm10 }}</span> |
|
|
|
<p class="msg-list-unit">PM10浓度 {{ avgData.pm10Unit }}</p> |
|
|
|
<p class="msg-list-unit">PM10浓度 <br>{{ avgData.pm10Unit }}</p> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<svg-icon icon-class="voc" class-name="msg-list-svg" /> |
|
|
|
<div class="msg-txt"> |
|
|
|
<span class="msg-list-num">{{ avgData.tvoc }}</span> |
|
|
|
<p class="msg-list-unit">TVOC {{ avgData.tvocUnit }}</p> |
|
|
|
<p class="msg-list-unit">TVOC <br>{{ avgData.tvocUnit }}</p> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<svg-icon icon-class="co2" class-name="msg-list-svg" /> |
|
|
|
<div class="msg-txt"> |
|
|
|
<span class="msg-list-num">{{ avgData.co2 }}</span> |
|
|
|
<p class="msg-list-unit">二氧化碳 {{ avgData.co2Unit }}</p> |
|
|
|
<p class="msg-list-unit">二氧化碳 <br>{{ avgData.co2Unit }}</p> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<svg-icon icon-class="jiaquan" class-name="msg-list-svg" style="font-size: 64px; margin-left: 10px;" /> |
|
|
|
<svg-icon icon-class="jiaquan" class-name="msg-list-svg" style="font-size: 68px;" /> |
|
|
|
<div class="msg-txt"> |
|
|
|
<span class="msg-list-num">{{ avgData.formaldehyde }}</span> |
|
|
|
<p class="msg-list-unit">甲醛 {{ avgData.formaldehydeUnit }}</p> |
|
|
|
<p class="msg-list-unit">甲醛 <br>{{ avgData.formaldehydeUnit }}</p> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
<!-- <div class="env-item container-wrap left-wrap"> |
|
|
|
<span class="right-top-line" /> |
|
|
|
<span class="left-bottom-line" /> |
|
|
|
<h3> |
|
|
|
<svg-icon icon-class="jiankong" style="font-size: 18px; margin-right: 10px;" />视频监控 |
|
|
|
</h3> |
|
|
|
<div style="height: calc(100% - 40px);"> |
|
|
|
<video id="video" controls autoplay muted width="100%" height="100%" /> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
<div class="env-item container-wrap left-wrap"> |
|
|
|
<span class="right-top-line" /> |
|
|
|
<span class="left-bottom-line" /> |
|
|
|
<h3> |
|
|
|
<i class="iconfont icon-kongqizhiliangshuju" />设备联调状态 |
|
|
|
</h3> |
|
|
|
<!-- :style="{ |
|
|
|
height: showScroll ? 'calc(100% - 40px)' : 'auto', |
|
|
|
overflow: showScroll ? 'auto' : 'hidden' |
|
|
|
}" --> |
|
|
|
<ul class="leakage-list"> |
|
|
|
<div style="display: flex; justify-content: space-between; height: calc(100% - 40px);"> |
|
|
|
<ul v-if="hasValidData" class="leakage-list"> |
|
|
|
<li :class="alarmStatus.infrared === '告警' ? 'leakage-warn' : ''"> |
|
|
|
<p><i class="iconfont icon-shebei" />红外</p> |
|
|
|
<span class="leakage-state-tip" /> |
|
|
|
@ -138,14 +128,19 @@ |
|
|
|
<p><i class="iconfont icon-shebei" />漏水</p> |
|
|
|
<span class="leakage-state-tip" /> |
|
|
|
</li> |
|
|
|
<!-- :style="{ |
|
|
|
width: liWidth, |
|
|
|
height: liHeight, |
|
|
|
marginRight: '12px', |
|
|
|
marginBottom: '12px' |
|
|
|
}" --> |
|
|
|
</ul> |
|
|
|
<ul class="leakage-list"> |
|
|
|
<li |
|
|
|
v-for="item in validDisplayConfigData" |
|
|
|
v-for="item in validDisplayConfigData.slice().sort((a, b) => { |
|
|
|
// 空值处理 |
|
|
|
if (!a.Name) return 1; |
|
|
|
if (!b.Name) return -1; |
|
|
|
// 按长度升序，长度相同则按名称排序 |
|
|
|
if (a.Name.length === b.Name.length) { |
|
|
|
return a.Name.localeCompare(b.Name, 'zh-CN', { numeric: true }); |
|
|
|
} |
|
|
|
return a.Name.length - b.Name.length; // 升序；降序则 b.Name.length - a.Name.length |
|
|
|
})" |
|
|
|
:key="item.id" |
|
|
|
:class="{ 'leakage-warn': item.NetStatus === 0 }" |
|
|
|
> |
|
|
|
@ -155,13 +150,12 @@ |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="env-main-middle"> |
|
|
|
<div class="env-3d"> |
|
|
|
<iframe id="myIframe" ref="myIframe" name="iframeMap" class="iframe_box" src="/web3D/index.html" frameborder="0" scrolling="no" style=" margin: 0 auto; display: block;" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="env-alarm-container"> |
|
|
|
<!-- 温湿度 --> |
|
|
|
<ul v-if="hasValidData" class="env-alarm-list env-alarm-list-first"> |
|
|
|
<li> |
|
|
|
<svg-icon icon-class="temperature" class-name="msg-list-svg" /> |
|
|
|
@ -178,7 +172,32 @@ |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<el-row :gutter="20" class="panel-group" type="flex" justify="space-between"> |
|
|
|
<div |
|
|
|
v-if="hasValidData" |
|
|
|
class="air-quality" |
|
|
|
:class="[ |
|
|
|
aqiStatus === '优' ? 'air-excellent' : '', |
|
|
|
aqiStatus === '良' ? 'air-good' : '', |
|
|
|
aqiStatus === '轻度污染' ? 'air-lightPollution' : '', |
|
|
|
aqiStatus === '中度污染' ? 'air-mediumPollution' : '', |
|
|
|
aqiStatus === '重度污染' ? 'air-heavyPollution' : '', |
|
|
|
aqiStatus === '严重污染' ? 'air-severePollution' : '' |
|
|
|
]" |
|
|
|
> |
|
|
|
<h3>空气质量指数</h3> |
|
|
|
<div class="air-params"> |
|
|
|
<div class="air-left"> |
|
|
|
<span class="air-title">实时AQI</span> |
|
|
|
<div class="air-result">{{ aqiValue }}</div> |
|
|
|
</div> |
|
|
|
<div class="air-right"> |
|
|
|
<span>空气质量</span> |
|
|
|
<!-- <p>{{ aqiStatus }}</p> --> |
|
|
|
<p class="air-status-text" v-html="formatAqiStatus" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- <el-row :gutter="10" class="panel-group" type="flex" justify="space-between"> |
|
|
|
<el-col class="card-panel-col"> |
|
|
|
<div class="card-panel zaixianshebei"> |
|
|
|
<div class="card-panel-icon-wrapper icon-shopping"> |
|
|
|
@ -207,154 +226,27 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
|
|
|
|
<!-- 第二行：其他指标 --> |
|
|
|
<!-- <ul class="env-alarm-list-second"> |
|
|
|
<li :class="alarmStatus.infrared === '告警' ? 'li-warn' : ''"> |
|
|
|
<p>红外</p> |
|
|
|
<span>{{ alarmStatus.infrared }}</span> |
|
|
|
</li> |
|
|
|
<li :class="alarmStatus.fire === '告警' ? 'li-warn' : ''"> |
|
|
|
<p>消防</p> |
|
|
|
<span>{{ alarmStatus.fire }}</span> |
|
|
|
</li> |
|
|
|
<li :class="alarmStatus.waterLeak === '告警' ? 'li-warn' : ''"> |
|
|
|
<p>漏水</p> |
|
|
|
<span>{{ alarmStatus.waterLeak }}</span> |
|
|
|
</li> |
|
|
|
</el-row> --> |
|
|
|
<ul class="env-alarm-list env-alarm-list-first"> |
|
|
|
<li> |
|
|
|
<p>PM2.5浓度</p> |
|
|
|
<span>{{ avgData.pm25 }}{{ avgData.pm25Unit }}</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<p>TVOC</p> |
|
|
|
<span>{{ avgData.tvoc }}{{ avgData.tvocUnit }}</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<p>PM10浓度</p> |
|
|
|
<span>{{ avgData.pm10 }}{{ avgData.pm10Unit }}</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<p>二氧化碳</p> |
|
|
|
<span>{{ avgData.co2 }}{{ avgData.co2Unit }}</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<p>甲醛</p> |
|
|
|
<span>{{ avgData.formaldehyde }}{{ avgData.formaldehydeUnit }}</span> |
|
|
|
</li> |
|
|
|
</ul> --> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-if="hasValidData" |
|
|
|
class="air-quality" |
|
|
|
:class="[ |
|
|
|
aqiStatus === '优' ? 'air-excellent' : '', |
|
|
|
aqiStatus === '良' ? 'air-good' : '', |
|
|
|
aqiStatus === '轻度污染' ? 'air-lightPollution' : '', |
|
|
|
aqiStatus === '中度污染' ? 'air-mediumPollution' : '', |
|
|
|
aqiStatus === '重度污染' ? 'air-heavyPollution' : '', |
|
|
|
aqiStatus === '严重污染' ? 'air-severePollution' : '' |
|
|
|
]" |
|
|
|
> |
|
|
|
<h3>实时空气质量指数（AQI）</h3> |
|
|
|
<div class="air-params"> |
|
|
|
<div class="air-left"> |
|
|
|
<span class="air-title">实时AQI</span> |
|
|
|
<div class="air-result"><p>{{ aqiValue }}</p><span>(AQI-中国标准)</span></div> |
|
|
|
</div> |
|
|
|
<div class="air-right"> |
|
|
|
<span>空气质量为</span> |
|
|
|
<p>{{ aqiStatus }}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- <ul class="env-alarm-list-second"> |
|
|
|
<li :class="alarmStatus.infrared === '告警' ? 'li-warn' : ''"> |
|
|
|
<p><i class="iconfont icon-weihubaojing" />红外</p> |
|
|
|
<span>{{ alarmStatus.infrared }}</span> |
|
|
|
</li> |
|
|
|
<li :class="alarmStatus.fire === '告警' ? 'li-warn' : ''"> |
|
|
|
<p><i class="iconfont icon-weihubaojing" />消防</p> |
|
|
|
<span>{{ alarmStatus.fire }}</span> |
|
|
|
</li> |
|
|
|
<li :class="alarmStatus.waterLeak === '告警' ? 'li-warn' : ''"> |
|
|
|
<p><i class="iconfont icon-weihubaojing" />漏水</p> |
|
|
|
<span>{{ alarmStatus.waterLeak }}</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<p><i class="iconfont icon-weihubaojing" />PM2.5浓度</p> |
|
|
|
<span>{{ avgData.pm25 }} {{ avgData.pm25Unit }}</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<p><i class="iconfont icon-weihubaojing" />TVOC</p> |
|
|
|
<span>{{ avgData.tvoc }} {{ avgData.tvocUnit }}</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<p><i class="iconfont icon-weihubaojing" />PM10浓度</p> |
|
|
|
<span>{{ avgData.pm10 }} {{ avgData.pm10Unit }}</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<p><i class="iconfont icon-weihubaojing" />二氧化碳</p> |
|
|
|
<span>{{ avgData.co2 }} {{ avgData.co2Unit }}</span> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<p><i class="iconfont icon-weihubaojing" />甲醛</p> |
|
|
|
<span>{{ avgData.formaldehyde }} {{ avgData.formaldehydeUnit }}</span> |
|
|
|
</li> |
|
|
|
</ul> --> |
|
|
|
<div class="device-container"> |
|
|
|
<!-- container-wrap --> |
|
|
|
<!-- <span class="right-top-line" /> |
|
|
|
<span class="left-bottom-line" /> |
|
|
|
|
|
|
|
<ul class="device-info"> |
|
|
|
<li> |
|
|
|
<div class="row-item"> |
|
|
|
<div class="svg-box"> |
|
|
|
<svg-icon icon-class="zaixianshebei" class-name="card-panel-icon" /> |
|
|
|
</div> |
|
|
|
<span>在线设备</span> |
|
|
|
</div> |
|
|
|
<div class="card-panel-text"> |
|
|
|
<count-to :start-val="0" :end-val="lineDevNum" :duration="3200" class="row-num" /> |
|
|
|
<svg-icon icon-class="zaixian" class-name="msg-list-svg" /> |
|
|
|
<div> |
|
|
|
<!-- <span>{{ avgData.temperature }} </span> --> |
|
|
|
<count-to v-if="getDeviceFlag" :start-val="0" :end-val="onlineDeviceNum" :duration="3200" class="card-panel-num" /> |
|
|
|
<div v-if="!getDeviceFlag" class="card-panel-text"><span class="card-panel-num">获取中...</span></div> |
|
|
|
<p>在线设备</p> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<div class="row-item"> |
|
|
|
<div class="svg-box"> |
|
|
|
<svg-icon icon-class="lixianshebei" class-name="card-panel-icon" /> |
|
|
|
</div> |
|
|
|
<span>离线设备</span> |
|
|
|
</div> |
|
|
|
<div class="card-panel-text"> |
|
|
|
<count-to :start-val="0" :end-val="offDevNum" :duration="3200" class="row-num" /> |
|
|
|
<svg-icon icon-class="lixian" class-name="msg-list-svg" /> |
|
|
|
<div> |
|
|
|
<!-- <span>{{ avgData.humidity }}</span> --> |
|
|
|
<count-to v-if="getDeviceFlag" :start-val="0" :end-val="offlineDeviceNum" :duration="3200" class="card-panel-num" /> |
|
|
|
<div v-if="!getDeviceFlag" class="card-panel-text"><span class="card-panel-num">获取中...</span></div> |
|
|
|
<p>离线设备</p> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</ul> --> |
|
|
|
<!-- <ul v-if="hasValidData" class="leakage-list new-leakage-list"> |
|
|
|
<li :class="alarmStatus.infrared === '告警' ? 'leakage-warn' : ''"> |
|
|
|
<p><i class="iconfont icon-shebei" />红外</p> |
|
|
|
<span class="leakage-state-tip" /> |
|
|
|
</li> |
|
|
|
<li :class="alarmStatus.fire === '告警' ? 'leakage-warn' : ''"> |
|
|
|
<p><i class="iconfont icon-shebei" />消防</p> |
|
|
|
<span class="leakage-state-tip" /> |
|
|
|
</li> |
|
|
|
<li :class="alarmStatus.waterLeak === '告警' ? 'leakage-warn' : ''"> |
|
|
|
<p><i class="iconfont icon-shebei" />漏水</p> |
|
|
|
<span class="leakage-state-tip" /> |
|
|
|
</li> |
|
|
|
<li |
|
|
|
v-for="item in validDisplayConfigData" |
|
|
|
:key="item.id" |
|
|
|
:class="{ 'leakage-warn': item.NetStatus === 0 }" |
|
|
|
> |
|
|
|
<p><i class="iconfont icon-shebei" />{{ item.Name }}</p> |
|
|
|
<span class="leakage-state-tip" /> |
|
|
|
</li> |
|
|
|
</ul> --> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="env-main-right"> |
|
|
|
@ -502,9 +394,16 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
// validDisplayConfigData() { |
|
|
|
// return this.allDisplayConfigData.filter(item => item && item.Name) |
|
|
|
// }, |
|
|
|
// 处理空气质量状态换行的计算属性 |
|
|
|
formatAqiStatus() { |
|
|
|
const status = this.aqiStatus |
|
|
|
// 仅当文本长度为4时，在第2个字后插入<br/>换行 |
|
|
|
if (status && status.length === 4) { |
|
|
|
return status.slice(0, 2) + '<br/>' + status.slice(2) |
|
|
|
} |
|
|
|
// 其他长度（2字/3字）直接返回原文本 |
|
|
|
return status || '' |
|
|
|
}, |
|
|
|
validDisplayConfigData() { |
|
|
|
return this.allDisplayConfigData.filter(item => { |
|
|
|
return item && item.Name && this.targetDeviceIps.includes(item.IP?.trim()) |
|
|
|
@ -536,10 +435,7 @@ export default { |
|
|
|
}, 1000) |
|
|
|
this.getDevice() |
|
|
|
this.getTodayHikAlarmLog() |
|
|
|
// this.alarmRefreshTimer = setInterval(() => { |
|
|
|
// this.getTodayHikAlarmLog() |
|
|
|
// }, 100000) |
|
|
|
// 初始化逻辑 |
|
|
|
// 初始化 |
|
|
|
window.getIframeLoading = this.getIframeLoading |
|
|
|
// this.allDisplayConfigData = allDeviceData |
|
|
|
// this.handleDeviceIpList() |
|
|
|
@ -948,6 +844,7 @@ export default { |
|
|
|
finalAQI >= grade.aqiMin && finalAQI <= grade.aqiMax |
|
|
|
) |
|
|
|
this.aqiStatus = matchedGrade ? matchedGrade.level : '严重污染' |
|
|
|
// this.aqiStatus = '严重污染' |
|
|
|
|
|
|
|
console.log('IAQI-PM2.5：', iaqiPm25, 'IAQI-PM10：', iaqiPm10, '最终AQI：', finalAQI, '| 等级：', this.aqiStatus) |
|
|
|
}, |
|
|
|
@ -967,10 +864,27 @@ export default { |
|
|
|
height: calc(100vh); |
|
|
|
background-color: #031435; |
|
|
|
.env-top-title { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: flex-start; |
|
|
|
font-size: 44px; |
|
|
|
letter-spacing: 0.1em; |
|
|
|
text-align: center; |
|
|
|
color: #fff; |
|
|
|
width: calc(100vw); |
|
|
|
height: 130px; |
|
|
|
background: url("~@/assets/images/largeScreen/top-title.png") no-repeat 0 -14px; |
|
|
|
background: url("~@/assets/images/largeScreen/top.png") no-repeat 0 -14px; |
|
|
|
background-size: contain; |
|
|
|
font-family: 'LianMengQiYiLuShuaiZhengRuiHei'; |
|
|
|
img{ |
|
|
|
display: block; |
|
|
|
height: 50px; |
|
|
|
margin-right: 10px; |
|
|
|
margin-top: 26px; |
|
|
|
} |
|
|
|
p{ |
|
|
|
margin-top: 26px; |
|
|
|
} |
|
|
|
} |
|
|
|
.header-date { |
|
|
|
position: fixed; |
|
|
|
@ -1008,6 +922,14 @@ export default { |
|
|
|
height: calc(100vh - 138px); |
|
|
|
overflow: hidden; |
|
|
|
z-index: 9999; |
|
|
|
::v-deep .el-table .el-table__body-wrapper td.el-table__cell, |
|
|
|
::v-deep .el-table .el-table__fixed-right td.el-table__cell{ |
|
|
|
font-size: 15px !important; |
|
|
|
} |
|
|
|
::v-deep .el-table .el-table__header .el-table__cell .cell, |
|
|
|
::v-deep .el-table.warehose-el-table .el-table__header .el-table__cell .cell{ |
|
|
|
font-size: 16px !important; |
|
|
|
} |
|
|
|
} |
|
|
|
.env-main-middle { |
|
|
|
position: relative; |
|
|
|
@ -1035,7 +957,7 @@ export default { |
|
|
|
position: relative; |
|
|
|
display: inline-block; |
|
|
|
padding: 10px 70px; |
|
|
|
font-size: 16px; |
|
|
|
font-size: 20px; |
|
|
|
color: #fff; |
|
|
|
.iconfont { |
|
|
|
margin-right: 10px; |
|
|
|
@ -1070,7 +992,7 @@ export default { |
|
|
|
.env-3d { |
|
|
|
position: fixed; |
|
|
|
left: 0; |
|
|
|
top: -40px; |
|
|
|
top: 10px; |
|
|
|
width: 100%; |
|
|
|
// height: calc(100%); |
|
|
|
height: 100%; |
|
|
|
@ -1103,26 +1025,34 @@ export default { |
|
|
|
border-radius: 4px; |
|
|
|
} |
|
|
|
.air-quality{ |
|
|
|
position: absolute; |
|
|
|
bottom: 10px; |
|
|
|
right: 20px; |
|
|
|
// position: absolute; |
|
|
|
// bottom: 10px; |
|
|
|
// right: 20px; |
|
|
|
// width: calc(100% / 3 - 100px); |
|
|
|
width: calc(20% + 100px); |
|
|
|
color: #fff; |
|
|
|
padding: 20px 20px 10px 20px; |
|
|
|
background-image: linear-gradient(to top, rgba(24, 176, 143, .5), rgba(24, 176, 143, 0)); |
|
|
|
margin: 0 20px 0 0; |
|
|
|
padding: 10px; |
|
|
|
height: 90px; |
|
|
|
background-image: linear-gradient(to bottom, rgba(24, 176, 143, .5), rgba(24, 176, 143, 0)); |
|
|
|
border-radius: 5px; |
|
|
|
z-index: 9999; |
|
|
|
h3{ |
|
|
|
padding: 30px 0; |
|
|
|
font-size: 18px; |
|
|
|
padding: 0 0 6px 0; |
|
|
|
} |
|
|
|
.air-params{ |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: last baseline; |
|
|
|
align-items: center; |
|
|
|
.air-left{ |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
.air-title{ |
|
|
|
position: relative; |
|
|
|
padding-left: 12px; |
|
|
|
font-size: 14px; |
|
|
|
font-size: 12px; |
|
|
|
&::before{ |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
@ -1132,82 +1062,112 @@ export default { |
|
|
|
height: 6px; |
|
|
|
background-color: #18B08F; |
|
|
|
border-radius: 50%; |
|
|
|
margin-top: -3px; |
|
|
|
} |
|
|
|
} |
|
|
|
.air-result{ |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: last baseline; |
|
|
|
padding-top: 10px; |
|
|
|
p{ |
|
|
|
font-size: 30px; |
|
|
|
font-weight: 600; |
|
|
|
padding: 0 6px 0 10px; |
|
|
|
} |
|
|
|
span{ |
|
|
|
display: block; |
|
|
|
font-size: 12px; |
|
|
|
opacity: .6; |
|
|
|
} |
|
|
|
padding: 0 0 0 10px; |
|
|
|
// p{ |
|
|
|
// font-size: 22px; |
|
|
|
// font-weight: 600; |
|
|
|
// padding: 0 6px 0 10px; |
|
|
|
// } |
|
|
|
// span{ |
|
|
|
// display: block; |
|
|
|
// font-size: 11px; |
|
|
|
// opacity: .6; |
|
|
|
// } |
|
|
|
} |
|
|
|
} |
|
|
|
.air-right{ |
|
|
|
text-align: center; |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
span{ |
|
|
|
display: block; |
|
|
|
font-size: 12px; |
|
|
|
// padding: 8px 0; |
|
|
|
margin-right: 6px; |
|
|
|
} |
|
|
|
p{ |
|
|
|
font-size: 18px; |
|
|
|
font-size: 24px; |
|
|
|
font-weight: 600; |
|
|
|
padding: 10px 30px; |
|
|
|
margin-top: 10px; |
|
|
|
padding: 8px 15px; |
|
|
|
background-color: rgba(24, 176, 143, .2); |
|
|
|
border-radius: 5px; |
|
|
|
margin-top: -4px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 原有基础样式保留 |
|
|
|
&.air-excellent { // 优 - 绿色 |
|
|
|
background-image: linear-gradient(to top, rgba(40, 180, 40, .5), rgba(40, 180, 40, 0)); |
|
|
|
background-image: linear-gradient(to bottom, rgba(40, 180, 40, .5), rgba(40, 180, 40, 0)); |
|
|
|
.air-params .air-right p { |
|
|
|
background-color: rgba(40, 180, 40, .2); |
|
|
|
} |
|
|
|
} |
|
|
|
&.air-good { // 良 - 黄色 |
|
|
|
background-image: linear-gradient(to top, rgba(255, 200, 0, .5), rgba(255, 200, 0, 0)); |
|
|
|
background-image: linear-gradient(to bottom, rgba(255, 200, 0, .5), rgba(255, 200, 0, 0)); |
|
|
|
.air-params .air-right p { |
|
|
|
background-color: rgba(255, 200, 0, .2); |
|
|
|
} |
|
|
|
} |
|
|
|
&.air-lightPollution { // 轻度污染 - 橙色 |
|
|
|
background-image: linear-gradient(to top, rgba(255, 140, 0, .5), rgba(255, 140, 0, 0)); |
|
|
|
.air-params .air-right p { |
|
|
|
h3{ |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
background-image: linear-gradient(to bottom, rgba(255, 140, 0, .5), rgba(255, 140, 0, 0)); |
|
|
|
.air-params { |
|
|
|
margin-top: -6px; |
|
|
|
.air-right p { |
|
|
|
background-color: rgba(255, 140, 0, .2); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
&.air-mediumPollution { // 中度污染 - 红色 |
|
|
|
background-image: linear-gradient(to top, rgba(255, 0, 0, .5), rgba(255, 0, 0, 0)); |
|
|
|
.air-params .air-right p { |
|
|
|
h3{ |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
background-image: linear-gradient(to bottom, rgba(255, 0, 0, .5), rgba(255, 0, 0, 0)); |
|
|
|
.air-params { |
|
|
|
margin-top: -6px; |
|
|
|
.air-right p { |
|
|
|
background-color: rgba(255, 0, 0, .2); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
&.air-heavyPollution { // 重度污染 - 紫色 |
|
|
|
background-image: linear-gradient(to top, rgba(150, 0, 200, .5), rgba(150, 0, 200, 0)); |
|
|
|
.air-params .air-right p { |
|
|
|
h3{ |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
background-image: linear-gradient(to bottom, rgba(150, 0, 200, .5), rgba(150, 0, 200, 0)); |
|
|
|
|
|
|
|
.air-params { |
|
|
|
margin-top: -6px; |
|
|
|
.air-right p { |
|
|
|
background-color: rgba(150, 0, 200, .2); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
&.air-severePollution { // 严重污染 - 褐红色 |
|
|
|
background-image: linear-gradient(to top, rgba(120, 0, 0, .5), rgba(120, 0, 0, 0)); |
|
|
|
.air-params .air-right p { |
|
|
|
h3{ |
|
|
|
padding: 0; |
|
|
|
} |
|
|
|
background-image: linear-gradient(to bottom, rgba(120, 0, 0, .5), rgba(120, 0, 0, 0)); |
|
|
|
|
|
|
|
.air-params { |
|
|
|
margin-top: -6px; |
|
|
|
.air-right p { |
|
|
|
background-color: rgba(120, 0, 0, .2); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.air-warn{ |
|
|
|
background-image: linear-gradient(to top, rgba(246, 81, 99, .5), rgba(24, 176, 143, 0)); |
|
|
|
background-image: linear-gradient(to bottom, rgba(246, 81, 99, .5), rgba(24, 176, 143, 0)); |
|
|
|
.air-params{ |
|
|
|
.air-right{ |
|
|
|
p{ |
|
|
|
@ -1218,22 +1178,14 @@ export default { |
|
|
|
} |
|
|
|
.leakage-list { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
flex-wrap: wrap; |
|
|
|
// padding: 0 0 0 14px; |
|
|
|
text-align: left; |
|
|
|
height: calc(100% - 40px); |
|
|
|
// &::-webkit-scrollbar { |
|
|
|
// width: 4px; |
|
|
|
// height: 4px; |
|
|
|
// } |
|
|
|
// &::-webkit-scrollbar-thumb { |
|
|
|
// background-color: #339cff; |
|
|
|
// border-radius: 2px; |
|
|
|
// } |
|
|
|
// &::-webkit-scrollbar-track { |
|
|
|
// background-color: #021941; |
|
|
|
// } |
|
|
|
width: calc(100% / 2 - 14px); |
|
|
|
height: calc(100%); |
|
|
|
margin: 0 7px; |
|
|
|
padding: 20px 0; |
|
|
|
li { |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
@ -1243,9 +1195,9 @@ export default { |
|
|
|
border: 1px solid #3581cc; |
|
|
|
background-color: #02255f; |
|
|
|
border-radius: 2px; |
|
|
|
width: calc(100% / 2 - 14px); |
|
|
|
height: calc(100% / 4 - 20px); |
|
|
|
margin: 20px 7px 0 7px; |
|
|
|
width: calc(100%); |
|
|
|
height: calc(100% / 4 - 10px); |
|
|
|
margin: 10px 0; |
|
|
|
&::before { |
|
|
|
content: ""; |
|
|
|
position: absolute; |
|
|
|
@ -1258,7 +1210,7 @@ export default { |
|
|
|
border-style: solid; |
|
|
|
} |
|
|
|
p { |
|
|
|
font-size: 12px; |
|
|
|
font-size: 16px; |
|
|
|
color: #fff; |
|
|
|
i { |
|
|
|
margin-right: 4px; |
|
|
|
@ -1303,7 +1255,7 @@ export default { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
// width: 100%; |
|
|
|
width: calc(100% / 2); |
|
|
|
width: calc(40%); |
|
|
|
li{ |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
@ -1311,7 +1263,7 @@ export default { |
|
|
|
align-content: center; |
|
|
|
justify-content: center; |
|
|
|
height: 66px; |
|
|
|
margin-right: 10px; |
|
|
|
margin-right: 24px; |
|
|
|
background: url('~@/assets/images/data_border_default.png') no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
position: relative; |
|
|
|
@ -1323,6 +1275,7 @@ export default { |
|
|
|
} |
|
|
|
p{ |
|
|
|
color: #339CFF; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
span{ |
|
|
|
display: block; |
|
|
|
@ -1337,7 +1290,7 @@ export default { |
|
|
|
position: absolute; |
|
|
|
top: 10px; |
|
|
|
left: 10px; |
|
|
|
width: calc(100% - 20px); |
|
|
|
width: calc(100%); |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
|
|
|
|
@ -1364,14 +1317,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
// .env-alarm-list-second { |
|
|
|
// li{ |
|
|
|
// width: calc(100% / 10 - 10px); |
|
|
|
// } |
|
|
|
// } |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.env-alarm-list-second { |
|
|
|
position: absolute; |
|
|
|
bottom: 10px; |
|
|
|
@ -1424,9 +1370,6 @@ export default { |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
left: 10px; |
|
|
|
// height: 160px; |
|
|
|
// padding: 14px 0 10px 14px; |
|
|
|
// min-height: auto; |
|
|
|
} |
|
|
|
|
|
|
|
.new-leakage-list{ |
|
|
|
@ -1487,11 +1430,10 @@ export default { |
|
|
|
|
|
|
|
.screen-env-list { |
|
|
|
flex-wrap: wrap; |
|
|
|
// justify-content: space-between; |
|
|
|
// justify-content: center; |
|
|
|
height: calc(100% - 54px); |
|
|
|
padding: 0 10px; |
|
|
|
li { |
|
|
|
position: relative; |
|
|
|
flex: none; |
|
|
|
width: calc(100% / 2 - 22px); |
|
|
|
margin: 10px 10px 0 10px; |
|
|
|
@ -1501,6 +1443,7 @@ export default { |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
padding-left: 40px; |
|
|
|
height: calc(100%); |
|
|
|
.msg-list-num{ |
|
|
|
font-size: 18px; |
|
|
|
@ -1509,12 +1452,15 @@ export default { |
|
|
|
.msg-list-unit{ |
|
|
|
font-size: 12px; |
|
|
|
position: static; |
|
|
|
margin-top: 4px; |
|
|
|
margin-top: 8px; |
|
|
|
} |
|
|
|
} |
|
|
|
.msg-list-svg { |
|
|
|
position: absolute; |
|
|
|
left: 20px; |
|
|
|
top: 0; |
|
|
|
font-size: 40px; |
|
|
|
margin-left: 20px !important; |
|
|
|
margin-left: 0 !important; |
|
|
|
} |
|
|
|
&.msg-pm { |
|
|
|
.msg-list-svg { |
|
|
|
@ -1535,7 +1481,8 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.panel-group { |
|
|
|
width: calc(100% / 2); |
|
|
|
// width: calc(100% / 3 + 60px); |
|
|
|
width: calc(40% - 100px); |
|
|
|
.card-panel-col { |
|
|
|
margin-bottom: 20px; |
|
|
|
} |
|
|
|
@ -1573,25 +1520,25 @@ export default { |
|
|
|
} |
|
|
|
.card-panel-icon-wrapper { |
|
|
|
float: left; |
|
|
|
margin: 0 10px 0 12px; |
|
|
|
padding: 20px; |
|
|
|
margin: 0 8px; |
|
|
|
padding: 20px 0; |
|
|
|
transition: all 0.38s ease-out; |
|
|
|
border-radius: 6px; |
|
|
|
} |
|
|
|
|
|
|
|
.card-panel-icon { |
|
|
|
float: left; |
|
|
|
font-size: 60px; |
|
|
|
font-size: 40px; |
|
|
|
} |
|
|
|
|
|
|
|
.card-panel-description { |
|
|
|
margin: 19px; |
|
|
|
margin: 20px 4px; |
|
|
|
margin-left: 0px; |
|
|
|
|
|
|
|
.card-panel-text { |
|
|
|
line-height: 30px; |
|
|
|
color: rgba(0, 0, 0, 0.45); |
|
|
|
font-size: 22px; |
|
|
|
font-size: 20px; |
|
|
|
margin-bottom: 11px; |
|
|
|
& span { |
|
|
|
-webkit-background-clip: text; |
|
|
|
@ -1602,4 +1549,7 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
::v-deep .table-title{ |
|
|
|
font-size: 20px; |
|
|
|
} |
|
|
|
</style> |
