admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

湖里大屏(环境监测)：空气分析样式更改接口对接

Browse Source
This commit is contained in:
骆乐 2022-08-03 12:10:01 +08:00
parent 271b3b2511
commit 48fac7a94c
1 changed files with 51 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/views/projectAdmin/dataBoard/projectHuScreen/envirManage/rightTop.vue
View File

@ -2,14 +2,6 @@
<!-- 空气分析 -->
<div class="contentBox">
<div class="titleTxt">{{ title }}</div>
<!-- <div>
<el-progress :percentage="50" :color="customColor1"> 优</el-progress>
<el-progress :percentage="55" :color="customColor2"> 良</el-progress>
<el-progress :percentage="35" :color="customColor3">轻度污染</el-progress>
<el-progress :percentage="35" :color="customColor4">中度污染</el-progress>
<el-progress :percentage="30" :color="customColor5">重度污染</el-progress>
<el-progress :percentage="5" :color="customColor6">严重污染</el-progress>
</div> -->
<div class="blockContent">
<div class="operateBar">
<span
@ -52,6 +44,7 @@
<ul>
<li>
<el-progress
class="progressleft"
:show-text="false"
:stroke-width="4"
:percentage="
@ -59,16 +52,18 @@
"
:color="'#1FCCC6'"
></el-progress>
<span class="type type1">{{
<div class="point" style="background-color: #1FCCC6;"></div>
<span class="types">{{
$t("message.environmentalOverview.typeList")[0]
}}</span>
<span
<span class="day"
>{{ airAnalysis.length > 0 ? airAnalysis[0].num : 0
}}{{ $t("message.environmentalOverview.Days") }}</span
>
</li>
<li>
<el-progress
class="progressleft"
:show-text="false"
:stroke-width="4"
:percentage="
@ -76,10 +71,11 @@
"
:color="'#FFBB38'"
></el-progress>
<span class="type type2">{{
<div class="point" style="background-color: #FFBB38;"></div>
<span class="types">{{
$t("message.environmentalOverview.typeList")[1]
}}</span>
<span
<span class="day"
>{{ airAnalysis.length > 0 ? airAnalysis[1].num : 0
}}{{ $t("message.environmentalOverview.Days") }}</span
>
@ -87,16 +83,18 @@
<li>
<el-progress
:show-text="false"
class="progressleft"
:stroke-width="4"
:percentage="
airAnalysis.length > 0 ? airAnalysis[2].num : 0
"
:color="'#FE7A18'"
></el-progress>
<span class="type type3">{{
<div class="point" style="background-color: #FE7A18;"></div>
<span class="types">{{
$t("message.environmentalOverview.typeList")[2]
}}</span>
<span
<span class="day"
>{{ airAnalysis.length > 0 ? airAnalysis[2].num : 0
}}{{ $t("message.environmentalOverview.Days") }}</span
>
@ -104,22 +102,25 @@
<li>
<el-progress
:show-text="false"
class="progressleft"
:stroke-width="4"
:percentage="
airAnalysis.length > 0 ? airAnalysis[3].num : 0
"
:color="'#7718FE'"
></el-progress>
<span class="type type4">{{
<div class="point" style="background-color: #7718FE;"></div>
<span class="types">{{
$t("message.environmentalOverview.typeList")[3]
}}</span>
<span
<span class="day"
>{{ airAnalysis.length > 0 ? airAnalysis[3].num : 0
}}{{ $t("message.environmentalOverview.Days") }}</span
>
</li>
<li>
<el-progress
class="progressleft"
:show-text="false"
:stroke-width="4"
:percentage="
@ -127,16 +128,18 @@
"
:color="'#890EA1'"
></el-progress>
<span class="type type5">{{
<div class="point" style="background-color: #890EA1;"></div>
<span class="types">{{
$t("message.environmentalOverview.typeList")[4]
}}</span>
<span
<span class="day"
>{{ airAnalysis.length > 0 ? airAnalysis[4].num : 0
}}{{ $t("message.environmentalOverview.Days") }}</span
>
</li>
<li>
<el-progress
class="progressleft"
:show-text="false"
:stroke-width="4"
:percentage="
@ -144,10 +147,11 @@
"
:color="'#970C0C'"
></el-progress>
<span class="type type6">{{
<div class="point" style="background-color: #970C0C;"></div>
<span class="types">{{
$t("message.environmentalOverview.typeList")[5]
}}</span>
<span
<span class="day"
>{{ airAnalysis.length > 0 ? airAnalysis[5].num : 0
}}{{ $t("message.environmentalOverview.Days") }}</span
>
@ -172,21 +176,12 @@ export default {
return {
airType: 1,
airAnalysis: [],
// customColor1:"#36cd81",
// customColor2:'#e2cd72',
// customColor3:'#cf8755',
// customColor4:'#6d70fb',
// customColor5:'#e5524a',
// customColor6:'#f84848'
};
},
mounted(){
this.getAirQualityStatistics();
},
methods: {
// format(percentage) {
// return percentage === 100 ? "满" : `${percentage}%`;
// }
//空气质量分析--统计
getAirQualityStatistics() {
let data = {
@ -221,7 +216,33 @@ export default {
}
.progressBox{
margin-top: 20px;
margin-top: 10px;
margin-left: 20px;
// width: 60%;
font-size: 12px;
.progressleft{
display: inline-block;
height: 10px;
width:60%;
}
li{
margin: 10px;
}
.point{
display: inline-block;
width: 5px;
height: 5px;
margin-left: 10px;
border-radius: 50%;
background-color: #fff;
}
.types{
margin-left: 15px;
width: 120px;
}
.day{
margin-left: 30px;
}
}
}
</style>