-
+
+
+
档案库房智能管理系统
+
-
-
+
+
空气质量指数
+
+
+
实时AQI
+
{{ aqiValue }}
+
+
+
+
-
-
PM2.5浓度
- {{ avgData.pm25 }}{{ avgData.pm25Unit }}
-
- -
-
TVOC
- {{ avgData.tvoc }}{{ avgData.tvocUnit }}
-
- -
-
PM10浓度
- {{ avgData.pm10 }}{{ avgData.pm10Unit }}
-
- -
-
二氧化碳
- {{ avgData.co2 }}{{ avgData.co2Unit }}
-
- -
-
甲醛
- {{ avgData.formaldehyde }}{{ avgData.formaldehydeUnit }}
-
-
-->
-
-
-
实时空气质量指数（AQI）
-
-
-
-
空气质量为
-
{{ aqiStatus }}
-
-
-
-
-
-
-
-
@@ -502,9 +394,16 @@ export default {
}
},
computed: {
- // validDisplayConfigData() {
- // return this.allDisplayConfigData.filter(item => item && item.Name)
- // },
+ // 处理空气质量状态换行的计算属性
+ formatAqiStatus() {
+ const status = this.aqiStatus
+ // 仅当文本长度为4时，在第2个字后插入
换行
+ if (status && status.length === 4) {
+ return status.slice(0, 2) + '
' + 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;
- }
+ font-size: 30px;
+ font-weight: 600;
+ 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 {
- background-color: rgba(255, 140, 0, .2);
+ 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 {
- background-color: rgba(255, 0, 0, .2);
+ 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 {
- background-color: rgba(150, 0, 200, .2);
+ 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 {
- background-color: rgba(120, 0, 0, .2);
+ 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;
+}
diff --git a/src/views/environmentalScreen/module/catePie.vue b/src/views/environmentalScreen/module/catePie.vue
index eb71000..86f6b49 100644
--- a/src/views/environmentalScreen/module/catePie.vue
+++ b/src/views/environmentalScreen/module/catePie.vue
@@ -129,7 +129,7 @@ export default {
itemGap: 15,
textStyle: {
color: '#ffffff',
- fontSize: 11
+ fontSize: 16
},
formatter: function(name) {
if (name.length > 6) {