286 lines
7.3 KiB
Vue
286 lines
7.3 KiB
Vue
<template>
|
||
<div>
|
||
<common>
|
||
<template #main>
|
||
<div>
|
||
<devices :title="'环境监测设备'" :devices="devices"></devices>
|
||
</div>
|
||
<div style="margin-top: 10px; display: flex; justify-content: space-between">
|
||
<div style="display: flex; justify-content: space-between; margin-top: 10px; width: 100%">
|
||
<el-card style="width: 60%">
|
||
<div style="display: flex; justify-content: space-between">
|
||
<div style="font-size: 16px; font-weight: bold; text-align: left">实时环境监测</div>
|
||
<div style="color: #999999; line-height: 25px">
|
||
当前设备
|
||
<el-select v-model="currentDevice" placeholder="Select" size="small" style="width: 160px; margin-left: 10px">
|
||
<el-option v-for="item in devices" :key="item.value" :label="item.detail" :value="item.id" />
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div class="envData">
|
||
<div class="dt">
|
||
<div class="values">21℃</div>
|
||
<div class="points">空气温度</div>
|
||
</div>
|
||
<div class="dt">
|
||
<div class="values">61%</div>
|
||
<div class="points">空气湿度</div>
|
||
</div>
|
||
<div class="dt">
|
||
<div class="values">1600mm</div>
|
||
<div class="points">空气温度</div>
|
||
</div>
|
||
<div class="dt">
|
||
<div class="values">东南风</div>
|
||
<div class="points">风向</div>
|
||
</div>
|
||
</div>
|
||
<div class="envData">
|
||
<div class="dt">
|
||
<div class="values">12μg/m³</div>
|
||
<div class="points">PM2.5</div>
|
||
</div>
|
||
<div class="dt">
|
||
<div class="values">679Lux</div>
|
||
<div class="points">光照强度</div>
|
||
</div>
|
||
<div class="dt">
|
||
<div class="values">440ppm</div>
|
||
<div class="points">二氧化碳浓度</div>
|
||
</div>
|
||
<div class="dt">
|
||
<div class="values">1.5m/s</div>
|
||
<div class="points">风速</div>
|
||
</div>
|
||
</div>
|
||
<div class="notices">
|
||
<div v-for="(item, index) in notices" :key="index">
|
||
<img :src="getAssetsFile('images/smartFarm/bell.png')" alt="" style="height: 20px" />
|
||
<span style="font-size: 14px">{{ item.title }}</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
<el-card style="width: calc(40% - 20px); border-radius: 16px; padding: 10px">
|
||
<div style="font-size: 16px; font-weight: bold; text-align: left">作物生长状态</div>
|
||
<div class="plantStatus">
|
||
<div class="leftKey">酸碱度:</div>
|
||
<div class="rightValue">6.5 正常</div>
|
||
</div>
|
||
<div class="plantStatus">
|
||
<div class="leftKey">养分含量:</div>
|
||
<div class="errorValue">N 元素含量不足</div>
|
||
</div>
|
||
<div class="plantStatus">
|
||
<div class="leftKey">重金属含量:</div>
|
||
<div class="errorValue">Hg 金属含量超标</div>
|
||
</div>
|
||
<div class="plantStatus">
|
||
<div class="leftKey">水温:</div>
|
||
<div class="errorValue">38℃ 偏高</div>
|
||
</div>
|
||
<div class="plantStatus">
|
||
<div class="leftKey">水浑浊度:</div>
|
||
<div class="rightValue">良好</div>
|
||
</div>
|
||
<div class="plantStatus">
|
||
<div class="leftKey">酸碱度:</div>
|
||
<div class="rightValue">正常</div>
|
||
</div>
|
||
<div class="plantStatus">
|
||
<div class="leftKey">盐分含量:</div>
|
||
<div class="rightValue">正常</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</common>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import Devices from '@/views/smartFarm/components/devices.vue';
|
||
import Common from '@/views/smartFarm/components/common.vue';
|
||
import { getAssetsFile } from '@/utils/index.js';
|
||
|
||
/* --------------- data --------------- */
|
||
// #region
|
||
const devices = ref([
|
||
{
|
||
name: 'A-001',
|
||
icon: 'temp',
|
||
detail: 'A区-监控设备1',
|
||
status: '1',
|
||
id: 0,
|
||
},
|
||
{
|
||
name: 'A-002',
|
||
icon: 'temp',
|
||
detail: 'A区-监控设备2',
|
||
status: '1',
|
||
id: 1,
|
||
},
|
||
{
|
||
name: 'A-003',
|
||
icon: 'temp',
|
||
detail: 'A区-监控设备3',
|
||
status: '1',
|
||
id: 2,
|
||
},
|
||
{
|
||
name: 'A-004',
|
||
icon: 'soilSensor',
|
||
detail: 'A区-监控设备4',
|
||
status: '-1',
|
||
id: 3,
|
||
},
|
||
{
|
||
name: 'A-005',
|
||
icon: 'anemometer',
|
||
detail: 'A区-监控设备5',
|
||
status: '1',
|
||
id: 4,
|
||
},
|
||
{
|
||
name: 'A-006',
|
||
icon: 'anemometer',
|
||
detail: 'A区-监控设备6',
|
||
status: '0',
|
||
id: 5,
|
||
},
|
||
{
|
||
name: 'B-001',
|
||
icon: 'rainGauge',
|
||
detail: 'B区-监控设备1',
|
||
status: '1',
|
||
id: 6,
|
||
},
|
||
{
|
||
name: 'B-002',
|
||
icon: 'rainGauge',
|
||
detail: 'B区-监控设备2',
|
||
status: '-1',
|
||
id: 7,
|
||
},
|
||
{
|
||
name: 'B-003',
|
||
icon: 'waterLoggingSensor',
|
||
detail: 'B区-监控设备3',
|
||
status: '1',
|
||
id: 8,
|
||
},
|
||
{
|
||
name: 'B-004',
|
||
icon: 'PM2.5',
|
||
detail: 'B区-监控设备4',
|
||
status: '1',
|
||
id: 9,
|
||
},
|
||
{
|
||
name: 'B-005',
|
||
icon: 'PM2.5',
|
||
detail: 'B区-监控设备5',
|
||
status: '1',
|
||
id: 10,
|
||
},
|
||
{
|
||
name: 'B-006',
|
||
icon: 'light',
|
||
detail: 'B区-监控设备6',
|
||
status: '1',
|
||
id: 11,
|
||
},
|
||
]);
|
||
const currentDevice = ref(0);
|
||
const notices = ref([
|
||
{
|
||
title: '2025年1月1日，预计将会有特大暴雨，请提前做好防护措施！',
|
||
content: '',
|
||
},
|
||
{
|
||
title: '2025年1月1日，预计将会有特大暴雨，请提前做好防护措施！',
|
||
content: '',
|
||
},
|
||
]);
|
||
// #endregion
|
||
|
||
/* --------------- methods --------------- */
|
||
// #region
|
||
const chooseIcon = (type) => {
|
||
switch (type) {
|
||
case 'light':
|
||
return '分光器.png';
|
||
case 'float':
|
||
return '悬浮物.png';
|
||
case 'O2':
|
||
return '水质溶解氧.png';
|
||
case 'elect':
|
||
return '水质电导率.png';
|
||
case 'dust':
|
||
return '浊度.png';
|
||
case 'temp':
|
||
return '温度.png';
|
||
case 'ph':
|
||
return '酸碱度.png';
|
||
}
|
||
};
|
||
// #endregion
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.plantStatus {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
margin: 7px 0;
|
||
.leftKey {
|
||
color: #000000;
|
||
}
|
||
.rightValue {
|
||
color: #25bf82;
|
||
}
|
||
.errorValue {
|
||
color: #fe4066;
|
||
}
|
||
}
|
||
.notices {
|
||
div {
|
||
margin: 10px 0;
|
||
}
|
||
text-align: left;
|
||
}
|
||
.envData {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 20px 0;
|
||
.dt {
|
||
width: 24%;
|
||
text-align: left;
|
||
.values {
|
||
color: #25bf82;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
.points {
|
||
color: #999999;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
.plantStatus {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 14px;
|
||
margin: 10px 0;
|
||
|
||
.leftKey {
|
||
color: #000000;
|
||
}
|
||
|
||
.rightValue {
|
||
color: #25bf82;
|
||
}
|
||
}
|
||
</style>
|