149 lines
6.7 KiB
Vue
149 lines
6.7 KiB
Vue
<script setup>
|
|
import { ref, reactive, onMounted, watch } from 'vue';
|
|
import { isEmpty, getAssetsFile } from '@/utils';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
// 图标icon对照表
|
|
const icons = [
|
|
{ 监控: 'camera' },
|
|
{ 传感器: 'sensor' },
|
|
{ 水质溶解氧: 'O2' },
|
|
{ 温度: 'temp' },
|
|
{ 酸碱度: 'ph' },
|
|
{ 水质电导率: 'elect' },
|
|
{ 浊度: 'dust' },
|
|
{ 悬浮物: 'float' },
|
|
{ 分光器: 'light' },
|
|
{ 阀门: 'valve' },
|
|
{ 喷头: 'sprinkler' },
|
|
{ 计时器: 'timer' },
|
|
{ 加热器: 'heater' },
|
|
{ 搅拌机: 'mixer' },
|
|
{ 热力: 'heat' },
|
|
{ 液位传感器: 'liquidSensor' },
|
|
{ 消毒灯: 'disinfectionLamp' },
|
|
{ 温度传感器: 'tempSensor' },
|
|
{ 智能阀控: 'intelligentValveControl' },
|
|
{ 供水阀: 'waterSupplyValve' },
|
|
{ 混合泵: 'mixingPump' },
|
|
{ 混合罐: 'mixingTank' },
|
|
{ 施肥: 'fertilization' },
|
|
{ 肥料罐: 'fertilizerTank' },
|
|
{ 电磁阀状态: 'solenoidValve' },
|
|
{ 'PM2.5': 'PM2.5' },
|
|
{ 风速仪: 'anemometer' },
|
|
{ 雨量计: 'rainGauge' },
|
|
{ 土壤传感器: 'soilSensor' },
|
|
{ 积水传感器: 'waterLoggingSensor' },
|
|
];
|
|
|
|
const props = defineProps({
|
|
devices: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => [],
|
|
validator: (items) => {
|
|
return items.every((item) => {
|
|
return (
|
|
typeof item === 'object' &&
|
|
item !== null &&
|
|
typeof item.id === 'number' &&
|
|
typeof item.name === 'string' &&
|
|
typeof item.detail === 'string' &&
|
|
typeof item.icon === 'string' &&
|
|
(!item.status || typeof item.status === 'number')
|
|
);
|
|
});
|
|
},
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
default: () => '',
|
|
validator: (items) => {
|
|
return items;
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<el-card style="border-radius: 16px">
|
|
<div style="font-size: 16px; font-weight: bold; text-align: left; color: #000">{{ title }}</div>
|
|
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
|
|
<div v-for="(item, index) in devices" :key="index" class="device">
|
|
<div v-if="item.status == 1" class="status" style="background-color: #25bf82">正常</div>
|
|
<div v-else-if="item.status == 0" class="status" style="background-color: #999999">离线</div>
|
|
<div v-else-if="item.status == -1" class="status" style="background-color: #fe4066">异常</div>
|
|
<div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%">
|
|
<img v-if="item.icon === 'camera'" :src="getAssetsFile('images/smartFarm/监控.png')" alt="" />
|
|
<img v-else-if="item.icon === 'sensor'" :src="getAssetsFile('images/smartFarm/传感器.png')" alt="" />
|
|
<img v-else-if="item.icon === 'O2'" :src="getAssetsFile('images/smartFarm/水质溶解氧.png')" alt="" />
|
|
<img v-else-if="item.icon === 'temp'" :src="getAssetsFile('images/smartFarm/温度.png')" alt="" />
|
|
<img v-else-if="item.icon === 'ph'" :src="getAssetsFile('images/smartFarm/酸碱度.png')" alt="" />
|
|
<img v-else-if="item.icon === 'elect'" :src="getAssetsFile('images/smartFarm/水质电导率.png')" alt="" />
|
|
<img v-else-if="item.icon === 'dust'" :src="getAssetsFile('images/smartFarm/浊度.png')" alt="" />
|
|
<img v-else-if="item.icon === 'float'" :src="getAssetsFile('images/smartFarm/悬浮物.png')" alt="" />
|
|
<img v-else-if="item.icon === 'light'" :src="getAssetsFile('images/smartFarm/分光器.png')" alt="" />
|
|
<img v-else-if="item.icon === 'valve'" :src="getAssetsFile('images/smartFarm/阀门.png')" alt="" />
|
|
<img v-else-if="item.icon === 'sprinkler'" :src="getAssetsFile('images/smartFarm/喷头.png')" alt="" />
|
|
<img v-else-if="item.icon === 'timer'" :src="getAssetsFile('images/smartFarm/计时器.png')" alt="" />
|
|
<img v-else-if="item.icon === 'heater'" :src="getAssetsFile('images/smartFarm/加热器.png')" alt="" />
|
|
<img v-else-if="item.icon === 'mixer'" :src="getAssetsFile('images/smartFarm/搅拌机.png')" alt="" />
|
|
<img v-else-if="item.icon === 'heat'" :src="getAssetsFile('images/smartFarm/热力.png')" alt="" />
|
|
<img v-else-if="item.icon === 'liquidSensor'" :src="getAssetsFile('images/smartFarm/液位传感器.png')" alt="" />
|
|
<img v-else-if="item.icon === 'disinfectionLamp'" :src="getAssetsFile('images/smartFarm/消毒灯.png')" alt="" />
|
|
<img v-else-if="item.icon === 'tempSensor'" :src="getAssetsFile('images/smartFarm/温度传感器.png')" alt="" />
|
|
<img v-else-if="item.icon === 'intelligentValveControl'" :src="getAssetsFile('images/smartFarm/智能阀控.png')" alt="" />
|
|
<img v-else-if="item.icon === 'waterSupplyValve'" :src="getAssetsFile('images/smartFarm/供水阀.png')" alt="" />
|
|
<img v-else-if="item.icon === 'mixingPump'" :src="getAssetsFile('images/smartFarm/混合泵.png')" alt="" />
|
|
<img v-else-if="item.icon === 'mixingTank'" :src="getAssetsFile('images/smartFarm/混合罐.png')" alt="" />
|
|
<img v-else-if="item.icon === 'fertilization'" :src="getAssetsFile('images/smartFarm/施肥.png')" alt="" />
|
|
<img v-else-if="item.icon === 'fertilizerTank'" :src="getAssetsFile('images/smartFarm/肥料罐.png')" alt="" />
|
|
<img v-else-if="item.icon === 'solenoidValve'" :src="getAssetsFile('images/smartFarm/电磁阀状态.png')" alt="" />
|
|
<img v-else-if="item.icon === 'PM2.5'" :src="getAssetsFile('images/smartFarm/PM2.5.png')" alt="" />
|
|
<img v-else-if="item.icon === 'anemometer'" :src="getAssetsFile('images/smartFarm/风速仪.png')" alt="" />
|
|
<img v-else-if="item.icon === 'rainGauge'" :src="getAssetsFile('images/smartFarm/雨量计.png')" alt="" />
|
|
<img v-else-if="item.icon === 'soilSensor'" :src="getAssetsFile('images/smartFarm/土壤传感器.png')" alt="" />
|
|
<img v-else-if="item.icon === 'waterLoggingSensor'" :src="getAssetsFile('images/smartFarm/积水传感器.png')" alt="" />
|
|
<div style="text-align: left; font-weight: bold; font-size: 18px">{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.device {
|
|
height: 100px;
|
|
width: 14%;
|
|
background-color: #f5f5f5;
|
|
margin: 20px 1%;
|
|
border-radius: 16px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
padding: 10px 20px;
|
|
img {
|
|
height: 35px;
|
|
width: 35px;
|
|
}
|
|
}
|
|
.status {
|
|
border-radius: 0 16px 0 16px;
|
|
height: 30px;
|
|
width: 30px;
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #ffffff;
|
|
font-size: 10px;
|
|
}
|
|
</style>
|