daimp-front/sub-operation-service/src/views/smartFarm/inspection/IntelligentIrrigation.vue

<template>
  <section>
    <common>
      <template #main>
        <div>
          <devices :title="'智能灌溉设备'" :devices="devices"></devices>
        </div>
        <div style="display: flex; align-items: stretch; justify-content: space-between; margin-top: 20px">
          <stream :title="'灌溉监测实时监控'" :devices="devices" style="width: 60%; margin-right: 20px; height: fit-content"></stream>
          <DataDisplay :title="'灌溉分析'" :data="rightData" :show-image="true" :image-list="srcList" style="flex: 1"></DataDisplay>
        </div>
      </template>
    </common>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Common from '../components/common.vue';
import Devices from '@/views/smartFarm/components/devices.vue';
import Stream from '@/views/smartFarm/components/stream.vue';
import DataDisplay from '@/views/smartFarm/components/dataDisplay.vue';

const devices = ref([
  {
    name: 'A-001',
    icon: 'temperature',
    detail: 'A区-监控设备9',
    status: '1', //  0: 离线 1: 正常 -1: 异常
    id: 0,
  },
  {
    name: 'A-002',
    icon: 'temperature',
    detail: 'A区-监控设备66',
    status: '1',
    id: 1,
  },
  {
    name: 'A-003',
    icon: 'humidity',
    detail: 'A区-监控设备7',
    status: '0',
    id: 2,
  },
  {
    name: 'A-004',
    icon: 'humidity',
    detail: 'A区-监控设备1',
    status: '-1',
    id: 3,
  },
  {
    name: 'A-005',
    icon: 'valve',
    detail: 'A区-监控设备5',
    status: '-1',
    id: 4,
  },
  {
    name: 'A-006',
    icon: 'valve',
    status: '0',
    detail: 'A区-监控设备21',
    id: 5,
  },
  {
    name: 'A-007',
    icon: 'sprinkler',
    status: '0',
    detail: 'A区-监控设备4',
    id: 6,
  },
  {
    name: 'A-008',
    detail: 'A区-监控设备3',
    icon: 'sprinkler',
    status: '-1',
    id: 7,
  },
  {
    name: 'A-009',
    detail: 'A区-监控设备9',
    icon: 'waterSupplyValve',
    status: '-1',
    id: 8,
  },
  {
    name: 'A-010',
    detail: 'A区-监控设备10',
    icon: 'waterSupplyValve',
    status: '0',
    id: 9,
  },
  {
    name: 'A-011',
    detail: 'A区-监控设备3',
    icon: 'intelligentValveControl',
    status: '1',
    id: 10,
  },
  {
    name: 'A-012',
    detail: 'A区-监控设备3',
    icon: 'intelligentValveControl',
    status: '1',
    id: 11,
  },
]);

const srcList = ref(['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']);
const rightData = ref([
  {
    title: '土壤温度', //左侧文本
    status: '1', //  0:不正常 1:正常
    statusText: '正常', //右侧文本
  },
  {
    title: '土壤养分含量',
    status: '1',
    statusText: '正常',
  },
  {
    title: '光照强度',
    status: '0',
    statusText: '偏高',
  },
  {
    title: '降水量',
    status: '0',
    statusText: '偏低',
  },
  {
    title: '空气湿度',
    status: '1',
    statusText: '正常',
  },
  {
    title: '风速',
    status: '1',
    statusText: '微风',
  },
  {
    title: '设备状态',
    status: '1',
    statusText: '正常',
  },
  {
    title: '用水储备',
    status: '1',
    statusText: '充足',
  },
]);
</script>

<style lang="scss" scoped></style>