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-31 13:44:38 +08:00
parent 2d51ecaf4c
commit 5437c971d7
6 changed files with 523 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/greenOverview/blue_lb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 648 B

BIN
src/assets/images/greenOverview/orange_lb.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 637 B

BIN
src/assets/images/greenOverview/qy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

311
src/views/projectAdmin/zjsj/carbon/centerTop.vue
View File

@ -1,14 +1,315 @@
<template>
<Card title="实时数据">
实时数据
<div class="containerBox">
<div class="dataBoardContent">
<el-popover style="margin-left:900px" placement="bottom" width="70" trigger="click">
<ul class="devList">
<li
v-for="(item, index) in devList"
:class="{ active: item.deviceId == currentDevDetail.deviceId }"
:key="index"
@click="realTimeMonitor(item)"
>{{ item.deviceName }}</li>
</ul>
<p class="greenBtn selectDev" slot="reference">
<img
v-for="item in 4"
:key="item"
:class="'arrow' + item"
class="arrow"
src="@/assets/images/greenOverview/arrow.png"
/>
{{ currentDevDetail.deviceName }}
<i class="el-icon-arrow-down"></i>
</p>
</el-popover>
<!-- 下面的部分 -->
<div class="realTimeData">
<div class="realTimeData_item">
<div class="realTimeData_item_img">
<img src="@/assets/images/greenOverview/PM2.5@1x.png" alt />
</div>
<div class="realTimeData_item_text">
<p>PM2.5</p>
<p>{{plantCap.pm25?plantCap.pm25:'--'}}μg/m3</p>
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
<!-- v-if="plantCap.pm25AlarmType == 1"-->
<img
src="@/assets/images/greenOverview/形状备份-2.gif"
alt
/>
</div>
</div>
<div class="realTimeData_item">
<div class="realTimeData_item_img">
<img src="@/assets/images/greenOverview/PM10@1x.png" alt />
</div>
<div class="realTimeData_item_text">
<p>PM10</p>
<p>{{plantCap.pm10?plantCap.pm10:'--'}}μg/m3</p>
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt=""> -->
<!-- 显示条件 v-if="plantCap.pm10AlarmType == 1" -->
<img
src="@/assets/images/greenOverview/形状备份-2.gif"
alt
/>
</div>
</div>
<div class="realTimeData_item">
<div class="realTimeData_item_img">
<img src="@/assets/images/greenOverview/qy.png" alt />
</div>
<div class="realTimeData_item_text">
<p>
<!-- 温度 -->
{{'气压'}}
</p>
<p>{{plantCap.temperature?plantCap.temperature:'--'}}℃</p>
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
<!-- v-if="plantCap.temperatureAlarmType == 1" -->
<img
src="@/assets/images/greenOverview/形状备份-2.gif"
alt
/>
</div>
</div>
<div class="realTimeData_item">
<div class="realTimeData_item_img">
<img src="@/assets/images/greenOverview/温度@1x.png" alt />
</div>
<div class="realTimeData_item_text">
<p>
<!-- 温度 -->
{{$t('message.dataBoard.temperature')}}
</p>
<p>{{plantCap.temperature?plantCap.temperature:'--'}}℃</p>
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
<!-- v-if="plantCap.temperatureAlarmType == 1"-->
<img
src="@/assets/images/greenOverview/形状备份-2.gif"
alt
/>
</div>
</div>
<div class="realTimeData_item">
<div class="realTimeData_item_img">
<img src="@/assets/images/greenOverview/湿度@1x.png" alt />
</div>
<div class="realTimeData_item_text">
<p>
<!-- 湿度 -->
{{$t('message.dataBoard.humidity')}}
</p>
<p>{{plantCap.humidity?plantCap.humidity:'--'}}%</p>
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
<!-- v-if="plantCap.humidityAlarmType == 1" -->
<img
src="@/assets/images/greenOverview/形状备份-2.gif"
alt
/>
</div>
</div>
<div class="realTimeData_item">
<div class="realTimeData_item_img">
<img src="@/assets/images/greenOverview/编组 27.png" alt />
</div>
<div class="realTimeData_item_text">
<p>TSP</p>
<p>{{plantCap.tsp?plantCap.tsp:'--'}}μg/m3</p>
<img src="@/assets/images/greenOverview/blue_lb.png" alt="">
<!-- <img
v-if="plantCap.tspAlarmType == 1"
src="@/assets/images/greenOverview/形状备份-2.gif"
alt
/> -->
</div>
</div>
<div class="realTimeData_item">
<div class="realTimeData_item_img">
<img src="@/assets/images/greenOverview/噪声@1x.png" alt />
</div>
<div class="realTimeData_item_text">
<p>
<!-- 噪声 -->
{{$t('message.dataBoard.noise')}}
</p>
<p>{{plantCap.noise?plantCap.noise:'--'}}dB</p>
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
<img
v-if="plantCap.noiseAlarmType == 1"
src="@/assets/images/greenOverview/形状备份-2.gif"
alt
/>
</div>
</div>
<div class="realTimeData_item">
<div class="realTimeData_item_img">
<img src="@/assets/images/greenOverview/风速@1x.png" alt />
</div>
<div class="realTimeData_item_text">
<p>
<!-- 风速 -->
{{$t('message.dataBoard.windSpeed')}}
</p>
<p>{{plantCap.windspeed?plantCap.windspeed:'--'}}m/s</p>
<!-- <img src="@/assets/images/greenOverview/形状.gif" alt="">-->
<img
v-if="plantCap.windSpeedAlarmType == 1"
src="@/assets/images/greenOverview/形状备份-2.gif"
alt
/>
</div>
</div>
</div>
</div>
</div>
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import Card from "../components/Card";
import echarts from "echarts4";
import { environmentDevList } from "@/assets/js/api/environmentManage";
import { getRealTimeDustNoiseDataApi } from "@/assets/js/api/environmentManage";
export default {
components: { Card }
}
components: { Card },
data() {
return {
devList: [],
currentDevDetail: {},
onlineDevNum: 0,
offlineDevNum: 0,
realTimeDustNoiseDataTime: null, //圆形图实时刷新计时器
plantCap: {
crc: "--",
humidity: "--",
noise: "--",
plateHumidity: "--",
plateTemperature: "--",
pm10: "--",
pm25: "--",
pressure: "--",
temperature: "--",
tsp: "--",
voltage: "--",
winddirectionName: "--",
windspeed: "--"
}
};
},
mounted() {
// this.createCenterChart();
this.$nextTick(() => {
this.getDevList();
});
},
methods: {
getDevList() {
environmentDevList({ projectSn: this.$store.state.projectSn }).then(
result => {
console.log("列表", result);
this.devList = result.result;
console.log(this.devList);
if (result.result.length > 0) {
this.currentDevDetail = result.result[0];
this.$emit("custClick", this.currentDevDetail);
this.offlineDevNum = 0;
this.onlineDevNum = 0;
this.devList.forEach(element => {
if (element.isClosed == 2) {
this.offlineDevNum++;
} else {
this.onlineDevNum++;
}
});
this.getRealTimeDustNoiseData();
// this.realTimeDustNoiseDataTime = setInterval( () => {
// this.getRealTimeDustNoiseData();
// },5000)
// this.selectDustNoiseData(); 近24H
} else {
// this.createCenterChart();
}
}
);
},
//获取环境设备详情数据
getRealTimeDustNoiseData() {
let data = {
deviceId: this.currentDevDetail.deviceId,
projectSn: this.projectSn
};
console.log(data);
getRealTimeDustNoiseDataApi(data).then(res => {
console.log(res);
if (res.code == 200) {
console.log(res.result);
if (res.result) {
this.plantCap = res.result;
} else {
this.plantCap = {
crc: "--",
humidity: "--",
noise: "--",
plateHumidity: "--",
plateTemperature: "--",
pm10: "--",
pm25: "--",
pressure: "--",
temperature: "--",
tsp: "--",
voltage: "--",
winddirectionName: "--",
windspeed: "--"
};
}
// this.createCenterChart();
}
});
},
// // 切换设备
realTimeMonitor(value) {
if (this.realTimeDustNoiseDataTime) {
clearInterval(this.realTimeDustNoiseDataTime);
}
console.log("id换了吗", value);
this.currentDevDetail = value;
this.getRealTimeDustNoiseData();
}
}
};
</script>
<style></style>
<style lang="less" scoped>
.containerBox {
width: 100%;
height: 100%;
margin-top: 3%;
.realTimeData {
width: 100%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
/*justify-content:space-between;*/
padding: 50px 100px;
.realTimeData_item {
box-sizing: border-box;
display: flex;
width: 280px;
height: 100px;
padding: 0px 50px;
margin-top: 40px;
.realTimeData_item_img {
box-sizing: border-box;
margin-right: 20px;
}
}
/*margin: auto;*/
}
}
</style>

221
src/views/projectAdmin/zjsj/carbon/leftBottom.vue
View File

@ -1,14 +1,225 @@
<template>
<Card title="趋势图">
趋势图
<div class="contentBox">
<div class="dataBoardContent">
<span class="greenBtn" @click="switchingData(1)" :class="checked == 1 ? 'active' : ''">
<img
v-for="item in 4"
:key="item"
:class="'arrow' + item"
class="arrow"
src="@/assets/images/greenOverview/arrow.png"
/>
{{ $t("message.environmentalOverview.e6SelectArr")[0].title }}
</span>
<span class="greenBtn" @click="switchingData(2)" :class="checked == 2 ? 'active' : ''">
<img
v-for="item in 4"
:key="item"
:class="'arrow' + item"
class="arrow"
src="@/assets/images/greenOverview/arrow.png"
/>
{{ $t("message.environmentalOverview.e6SelectArr")[1].title }}
</span>
<span class="greenBtn" @click="switchingData(3)" :class="checked == 3 ? 'active' : ''">
<img
v-for="item in 4"
:key="item"
:class="'arrow' + item"
class="arrow"
src="@/assets/images/greenOverview/arrow.png"
/>
{{ $t("message.environmentalOverview.e6SelectArr")[2].title }}
</span>
<span class="greenBtn" @click="switchingData(4)" :class="checked == 4 ? 'active' : ''">
<img
v-for="item in 4"
:key="item"
:class="'arrow' + item"
class="arrow"
src="@/assets/images/greenOverview/arrow.png"
/>
{{ $t("message.environmentalOverview.e6SelectArr")[3].title }}
</span>
<div class="myChart" ref="myChart" />
</div>
</div>
</Card>
</template>
<script>
import Card from '../components/Card.vue'
import Card from "../components/Card.vue";
import echarts from "echarts4";
import {
getEnvironmentWarningInfo
} from "@/assets/js/api/environmentManage";
export default {
components: { Card }
}
components: { Card },
data() {
return {
data : [90, 85, 100, 96, 100, 150, 190, 125 ],
checked:1,
dustData_24:[],
};
},
mounted() {
this.initMyChart();
},
methods: {
getEnvironmentWarningInfoApi(){
// console.log('执行');
getEnvironmentWarningInfo({
deviceId: this.currentDevDetail.deviceId,
projectSn: this.projectSn,
warningType: 1
}).then(res => {
console.log(res.result);
this.pm10Warning = res.result.pm10Warning
this.pm25Warning = res.result.pm25Warning
this.noiseWarning = res.result.noiseWarning
this.windSpeedWarning = res.result.windSpeed
this.createdEcharts2();
})
},
//切换 24小时数据
switchingData(value) {
this.checked = value;
this.initMyChart();
},
initMyChart() {
const myChart = echarts.init(this.$refs.myChart);
// this.dustData_24.forEach((element) => {
// xdata.push(element.uploadDate.split(" ")[1]);
// switch (this.checked) {
// case 1:
// ydata.push(element.pm25);
// Alert = 'pm25'+this.$t('message.dataBoard.guard') + '(' + this.pm25Warning + ')'
// AlertNumber = this.pm25Warning
// break;
// case 2:
// ydata.push(element.pm10);
// Alert = 'pm10'+this.$t('message.dataBoard.guard')+ '(' + this.pm10Warning + ')'
// AlertNumber = this.pm10Warning
// break;
// case 3:
// ydata.push(element.windspeed);
// Alert = this.$t('message.dataBoard.windSpeed')+this.$t('message.dataBoard.guard')+ '(' + this.windSpeedWarning + ')'
// AlertNumber = this.windSpeedWarning
// break;
// case 4:
// ydata.push(element.noise);
// Alert = this.$t('message.dataBoard.noise')+this.$t('message.dataBoard.guard')+ '(' + this.noiseWarning + ')'
// AlertNumber = this.noiseWarning
// break;
// }
// });
switch (this.checked) {
case 1:
this.data = [90, 85, 100, 96, 100, 150, 190, 125 ]
break;
case 2:
this.data = [ 100, 150, 190, 125,90, 85, 100, 96 ]
break;
case 3:
this.data = [100, 96, 100, 150,90, 85, 190, 125 ]
break;
case 4:
this.data = [90, 96, 100, 85, 100,150, 190, 125 ]
break;
}
const option = {
grid: {
x: "10%",//x 偏移量
y: "5%", // y 偏移量
width: "85%", // 宽度
height: "78%"// 高度
},
xAxis: {
type: "category",
boundaryGap: false,
data: [
"01:00",
"02:00",
"03:00",
"04:00",
"05:00",
"06:00",
"07:00",
"08:00"
],
axisLabel: {
show: true,
textStyle: {
color: "#9ea3ab"
}
}
},
yAxis: {
type: "value",
max: 300,
splitNumber: 4,
axisLabel: {
// y轴文字的配置
textStyle: {
color: "#92a1bc"
}
},
splitLine: {
show: true,
lineStyle: {
type: "dashed",
color: "#777f8a"
}
}
},
series: [
{
itemStyle: {
normal: {
color: "#6ae6ef",
lineStyle: {
color: "#6ae6ef"
}
}
},
data: this.data,
type: "line",
smooth: true,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: "rgba(53, 98, 111,0.5)" },
{ offset: 1, color: "rgba(53, 98, 111,0.3)" }
])
}
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style></style>
<style lang="less" scoped>
.contentBox {
width: 100%;
height: 100%;
margin-top: 5%;
.titleTxt {
font-size: 18px;
color: #6ee4f0;
margin-top: 5px;
margin-left: 5px;
}
.myChart {
margin-top: 5%;
width: 100%;
height: 90%;
}
}
</style>

2
src/views/projectAdmin/zjsj/carbon/leftCenter.vue
View File

@ -88,7 +88,7 @@ export default {
border-bottom: 1px solid rgba(31, 68, 86, 0.3);
}
td {
color: white;
color: #c5c7cc;
line-height: 25px;
}
}