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

<script setup>
import Devices from '@/views/smartFarm/components/devices.vue';
import Common from '@/views/smartFarm/components/common.vue';
import { ref } from 'vue';
import { getAssetsFile } from '@/utils/index.js';

const currentDevice = ref(0);
const imgUrl = ref('/images/smartFarm/banner.png');
const srcList = ref([getAssetsFile('images/mockPic/水质检测.png')]);
const devices = ref([
  {
    name: 'A-001',
    icon: 'temp',
    detail: 'A区-监控设备1',
    status: '1',
    id: 0,
  },
  {
    name: 'A-003',
    icon: 'ph',
    detail: 'A区-监控设备3',
    status: '1',
    id: 2,
  },
  {
    name: 'A-005',
    icon: 'O2',
    detail: 'A区-监控设备5',
    status: '1',
    id: 4,
  },
  {
    name: 'A-006',
    icon: 'elect',
    detail: 'A区-监控设备6',
    status: '0',
    id: 5,
  },
  {
    name: 'B-001',
    icon: 'light',
    detail: 'B区-监控设备1',
    status: '1',
    id: 6,
  },
  {
    name: 'B-003',
    icon: 'dust',
    detail: 'B区-监控设备3',
    status: '1',
    id: 8,
  },
  {
    name: 'B-005',
    icon: 'float',
    detail: 'B区-监控设备5',
    status: '1',
    id: 10,
  },
]);
const rules = ref([
  {
    name: '温度',
    icon: 'temp',
    unit: '℃',
    goat: '15',
    status: '1',
  },
  {
    name: 'PH值',
    icon: 'ph',
    unit: '',
    goat: '6.5',
    status: '1',
  },
  {
    name: '溶解氧',
    icon: 'O2',
    goat: '0.4',
    unit: 'mg/L',
    status: '1',
  },
  {
    name: '色度',
    icon: 'light',
    goat: '15',
    unit: 'PCU',
    status: '1',
  },
  {
    name: '浊度',
    icon: 'dust',
    goat: '1.5',
    unit: 'NTU',
    status: '1',
  },
  {
    name: '导电率',
    icon: 'elect',
    goat: '3000',
    unit: 'μS/cm',
    status: '1',
  },
  {
    name: '悬浮物',
    icon: 'float',
    goat: '9000',
    unit: 'mg/L',
    status: '0',
  },
]);
const isFullscreen = ref(false);
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value;
};

/* --------------- 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>

<template>
  <div>
    <common>
      <template #main>
        <div>
          <devices :title="'水质监测设备'" :devices="devices"></devices>
        </div>
        <div style="margin-top: 10px; display: flex; justify-content: space-between">
          <el-card style="border-radius: 16px; width: 58%; height: fit-content">
            <div style="display: flex; justify-content: space-between">
              <div style="font-size: 16px; font-weight: bold; text-align: left">实时水质监测</div>
              <div>
                <div>当前设备状态：</div>
                <div>
                  <div class="dot"></div>
                  <span>正常</span>
                </div>
              </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 style="display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: 10px">
              <div v-for="(item, index) in rules" :key="index" class="rates" :class="{ normal: item.status === '1', danger: item.status !== '1' }">
                <div style="position: relative; font-weight: 800">
                  {{ item.goat }}
                  <div style="position: absolute; top: 0; right: -28px; font-size: 8px">{{ item.unit }}</div>
                </div>
                <div>
                  <img :src="getAssetsFile('images/smartFarm/' + chooseIcon(item.icon))" alt="" />
                  {{ item.name }}
                </div>
              </div>
            </div>
          </el-card>
          <el-card style="border-radius: 16px; width: 40%">
            <div style="text-align: left">
              <div style="font-size: 16px; font-weight: bold; text-align: left">历史水质数据</div>
            </div>
            <div style="margin-top: 20px">
              <el-image
                style="width: 100%"
                :src="getAssetsFile('images/mockPic/水质检测.png')"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="srcList"
                show-progress
                :initial-index="4"
                fit="cover"
              />
            </div>
          </el-card>
        </div>
      </template>
    </common>
  </div>
</template>

<style scoped lang="scss">
.normal {
  background-image: url('@/assets/images/smartFarm/normal.png');
}
.danger {
  background-image: url('@/assets/images/smartFarm/danger.png');
}
.rates {
  margin: 10px 0;
  height: 100px;
  font-size: 14px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  width: 25%;
  img {
    height: 20px;
  }
}
.dot {
  height: 10px;
  width: 10px;
  display: inline-block;
  border-radius: 90px;
  background-color: #25bf82;
}
</style>