湖里大屏(数字工地):环境监测模块

This commit is contained in:
骆乐 2022-08-05 11:57:01 +08:00
parent eb69ab2477
commit 85554fbf72
2 changed files with 64 additions and 22 deletions

View File

@ -1,13 +1,40 @@
<template> <template>
<!-- 安全培训 --> <!-- 环境监测 -->
<div class="container"> <Card :title="title">
<div class="titleTxt">{{ title }}</div> <div class="airChart">
<airQulityChart></airQulityChart>
</div> </div>
<div class="counts">
<div class="count">
<div class="icon"></div>
<div class="info">
<p class="num">PM2.5</p>
<p class="label">21μg/m3</p>
</div>
</div>
<div class="count">
<div class="icon"></div>
<div class="info">
<p class="num">PM2.5</p>
<p class="label">21μg/m3</p>
</div>
</div>
<div class="count">
<div class="icon"></div>
<div class="info">
<p class="num">噪声</p>
<p class="label">58dB</p>
</div>
</div>
</div>
</Card>
</template> </template>
<script> <script>
import Card from "../components/Card.vue";
import airQulityChart from "../../homePage/environmentWatch.vue";
export default { export default {
components: { Card, airQulityChart },
props: { props: {
title: { title: {
@ -16,26 +43,42 @@ export default {
} }
}, },
data() { data() {
return { return {};
}
}; };
},
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container { .airChart {
width: 100%; width: 60%;
height: 100%; height: 100%;
border: 1px solid #0081c3; float: left;
}
.titleTxt { .counts {
font-size: 18px; padding-top: 5%;
color: #6ee4f0; display: flex;
margin-top: 5px; flex-direction: column;
margin-left: 5px; .count {
display: flex;
align-items: center;
.icon {
margin-right: 10px;
margin-bottom: 10px;
width: 40px;
height: 40px;
border-radius: 5px;
border: 1px solid #2e9586;
}
.info {
color: #fff;
.num {
margin-bottom: 6px;
font-size: 1px;
}
.label {
font-size: 14px;
}
}
} }
} }
</style> </style>

View File

@ -10,7 +10,6 @@
</template> </template>
<script> <script>
import echarts from "echarts4";
import airQulityChart from "../../homePage/environmentWatch.vue" import airQulityChart from "../../homePage/environmentWatch.vue"
export default { export default {
components:{airQulityChart}, components:{airQulityChart},