86 lines
2.4 KiB
Vue
86 lines
2.4 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();
|
||
|
|
|
||
|
|
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 == 0" class="status" style="background-color: #25bf82">正常</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="" />
|
||
|
|
<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: 18%;
|
||
|
|
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>
|