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-30 17:52:06 +08:00
parent 86db97ae7a
commit 141f6e805a
7 changed files with 227 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/js/http.js
View File

@ -41,9 +41,9 @@ if (process.env.NODE_ENV == 'development') {
// tag: 本地
// axios.defaults.baseURL = 'http://192.168.34.174:6023/' // 老大本地
// axios.defaults.baseURL = 'http://192.168.34.125:6023/' //杨意本地 http/1.1
// axios.defaults.baseURL = 'http://192.168.34.216:6023/' // 邱平毅本地
axios.defaults.baseURL = 'http://192.168.34.216:6025/' // 邱平毅本地
// axios.defaults.baseURL = 'http://192.168.34.125:6023/' //杨意本地 http/1.1
axios.defaults.baseURL = 'http://192.168.34.216:6025/' // 邱平毅本地
// axios.defaults.baseURL = 'http://192.168.34.216:6025/' // 邱平毅本地
// axios.defaults.baseURL = 'http://192.168.34.231:6023/'; //杨思瑞本地
// axios.defaults.baseURL = 'http://47.97.202.104:6023/';
// axios.defaults.baseURL = 'http://139.9.66.234:8/';

BIN
src/views/projectAdmin/zjsj/assets/images/common/bgc_air.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 387 B

BIN
src/views/projectAdmin/zjsj/assets/images/common/bgc_orangechart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
src/views/projectAdmin/zjsj/assets/images/common/bgc_time.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

224
src/views/projectAdmin/zjsj/carbon/rightTop.vue
View File

@ -1,14 +1,228 @@
<template>
<!-- 空气分析 -->
<Card title="空气分析">
空气分析
<div class="contentBox">
<div class=" dataBoardContent operateBar">
<span
class="greenBtn"
:class="airType == 1 ? 'active' : ''"
@click="airType = 1;getAirQualityStatistics();"
>
<img v-for="item in 2" :key="item" :class="'arrow' + item" class="arrow" src="@/assets/images/greenOverview/arrow.png" />
{{ $t("message.environmentalOverview.e5SelectArr")[0].title }}
</span>
<span
class="greenBtn"
:class="airType == 2 ? 'active' : ''"
@click="airType = 2; getAirQualityStatistics();"
>
<img v-for="item in 2" :key="item" :class="'arrow' + item" class="arrow" src="@/assets/images/greenOverview/arrow.png" />
{{ $t("message.environmentalOverview.e5SelectArr")[1].title }}
</span>
<div class="progressBox">
<vue-scroll>
<ul>
<li>
<el-progress
class="progressleft"
:show-text="false"
:stroke-width="4"
:percentage="airAnalysis.length > 0 ? airAnalysis[0].num : 0"
:color="'#3aae99'"
></el-progress>
<div class="point" style="background-color: #3aae99;"></div>
<div class="types">
{{
$t("message.environmentalOverview.typeList")[0]
}}
</div>
<div class="day">
{{ airAnalysis.length > 0 ? airAnalysis[0].num : 0
}}{{ $t("message.environmentalOverview.Days") }}
</div>
</li>
<li>
<el-progress
class="progressleft"
:show-text="false"
:stroke-width="4"
:percentage="airAnalysis.length > 0 ? airAnalysis[1].num : 0"
:color="'#efb806'"
></el-progress>
<div class="point" style="background-color: #efb806;"></div>
<div class="types">
{{
$t("message.environmentalOverview.typeList")[1]
}}
</div>
<div class="day">
{{ airAnalysis.length > 0 ? airAnalysis[1].num : 0
}}{{ $t("message.environmentalOverview.Days") }}
</div>
</li>
<li>
<el-progress
:show-text="false"
class="progressleft"
:stroke-width="4"
:percentage="airAnalysis.length > 0 ? airAnalysis[2].num : 0"
:color="'#57b1b8'"
></el-progress>
<div class="point" style="background-color: #57b1b8;"></div>
<div class="types">
{{
$t("message.environmentalOverview.typeList")[2]
}}
</div>
<div class="day">
{{ airAnalysis.length > 0 ? airAnalysis[2].num : 0
}}{{ $t("message.environmentalOverview.Days") }}
</div>
</li>
<li>
<el-progress
:show-text="false"
class="progressleft"
:stroke-width="4"
:percentage="airAnalysis.length > 0 ? airAnalysis[3].num : 0"
:color="'#086eac'"
></el-progress>
<div class="point" style="background-color: #086eac;"></div>
<div class="types">
{{
$t("message.environmentalOverview.typeList")[3]
}}
</div>
<div class="day">
{{ airAnalysis.length > 0 ? airAnalysis[3].num : 0
}}{{ $t("message.environmentalOverview.Days") }}
</div>
</li>
<li>
<el-progress
class="progressleft"
:show-text="false"
:stroke-width="4"
:percentage="airAnalysis.length > 0 ? airAnalysis[4].num : 0"
:color="'#c6582c'"
></el-progress>
<div class="point" style="background-color: #c6582c;"></div>
<div class="types">
{{
$t("message.environmentalOverview.typeList")[4]
}}
</div>
<div class="day">
{{ airAnalysis.length > 0 ? airAnalysis[4].num : 0
}}<span>{{ $t("message.environmentalOverview.Days") }}</span>
</div>
</li>
<li>
<el-progress
class="progressleft"
:show-text="false"
:stroke-width="4"
:percentage="airAnalysis.length > 0 ? airAnalysis[5].num : 0"
:color="'#921014'"
></el-progress>
<div class="point" style="background-color: #921014;"></div>
<div class="types">
{{
$t("message.environmentalOverview.typeList")[5]
}}
</div>
<div class="day">
{{ airAnalysis.length > 0 ? airAnalysis[5].num : 0
}}{{ $t("message.environmentalOverview.Days") }}
</div>
</li>
</ul>
</vue-scroll>
</div>
</div>
</div>
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import { getAirQualityStatisticsApi } from "@/assets/js/api/environmentManage";
import Card from "../components/Card";
export default {
components: { Card }
}
components: { Card },
data() {
return {
airType: 1,
airAnalysis: []
};
},
mounted() {
this.getAirQualityStatistics();
},
methods: {
//空气质量分析--统计
getAirQualityStatistics() {
let data = {
type: this.airType,
projectSn: this.$store.state.projectSn
};
getAirQualityStatisticsApi(data).then(res => {
console.log(res);
if (res.code == 200) {
this.airAnalysis = res.result;
}
});
}
}
};
</script>
<style></style>
<style lang="less" scoped>
.contentBox {
display: flex;
flex-direction: column;
justify-content: space-around;
width: 100%;
height: 100%;
color: #c4ccd1;
.operateBar {
margin-top: 20px;
}
.progressBox {
width: 100%;
font-size: 12px;
ul li{
display: flex;
justify-content: center;
align-items: center;
margin: 20px 10px 10px 0px;
.progressleft {
height: 10px;
width: 65%;
}
.point {
display: inline-block;
width: 5px;
height: 5px;
margin-left: 10px;
border-radius: 50%;
background-color: #fff;
}
.types {
margin-left: 15px;
width: 80px;
}
.day {
width: 45px;
}
}
}
}
</style>

2
src/views/projectAdmin/zjsj/index.vue
View File

@ -54,7 +54,7 @@ export default {
</script>
<style lang="less" scoped>
// @import url('./style.less');
@import url("./style.less");
.zjsj-large-screen {
width: 100%;
height: 100%;

10
src/views/projectAdmin/zjsj/style.less
View File

@ -69,9 +69,9 @@
}
/deep/.dataBoardContent{
height: 88%;
margin: 10px 60px 20px;
width: calc(100% - 120px);
height: 100%;
margin:10px ;
width: calc(100% - 20px);
.blockTitle{
text-align: center;
color: rgba(108, 233, 240, 100);
@ -94,7 +94,7 @@
.greenBtn{
font-size: 12px;
color: rgba(255, 255, 254, 1);
background-color: rgba(25, 59, 67, 1);
background-color: #3b4455;
position: relative;
height: 22px;
line-height: 22px;
@ -104,7 +104,7 @@
cursor: pointer;
&.active{
color: #fcfcfd;
background-color: #2e394b;
background-color: #325d6e;
}
.arrow{
position: absolute;