daimp-front/sub-operation-service/src/views/smartFarm/components/devices.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 == 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="" />
            <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>