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

<template>
  <div>
    <common>
      <template #main>
        <div>
          <devices :title="'环境监测设备'" :devices="devices"></devices>
        </div>
        <div style="margin-top: 10px; display: flex; justify-content: space-between">
          <div style="display: flex; justify-content: space-between; margin-top: 10px; width: 100%">
            <el-card style="width: 60%">
              <div style="display: flex; justify-content: space-between">
                <div style="font-size: 16px; font-weight: bold; text-align: left">实时环境监测</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 class="envData">
                <div class="dt">
                  <div class="values">21℃</div>
                  <div class="points">空气温度</div>
                </div>
                <div class="dt">
                  <div class="values">61%</div>
                  <div class="points">空气湿度</div>
                </div>
                <div class="dt">
                  <div class="values">1600mm</div>
                  <div class="points">空气温度</div>
                </div>
                <div class="dt">
                  <div class="values">东南风</div>
                  <div class="points">风向</div>
                </div>
              </div>
              <div class="envData">
                <div class="dt">
                  <div class="values">12μg/m³</div>
                  <div class="points">PM2.5</div>
                </div>
                <div class="dt">
                  <div class="values">679Lux</div>
                  <div class="points">光照强度</div>
                </div>
                <div class="dt">
                  <div class="values">440ppm</div>
                  <div class="points">二氧化碳浓度</div>
                </div>
                <div class="dt">
                  <div class="values">1.5m/s</div>
                  <div class="points">风速</div>
                </div>
              </div>
              <div class="notices">
                <div v-for="(item, index) in notices" :key="index">
                  <img :src="getAssetsFile('images/smartFarm/bell.png')" alt="" style="height: 20px" />
                  <span style="font-size: 14px">{{ item.title }}</span>
                </div>
              </div>
            </el-card>
            <el-card style="width: calc(40% - 20px); border-radius: 16px; padding: 10px">
              <div style="font-size: 16px; font-weight: bold; text-align: left">作物生长状态</div>
              <div class="plantStatus">
                <div class="leftKey">酸碱度:</div>
                <div class="rightValue">6.5 正常</div>
              </div>
              <div class="plantStatus">
                <div class="leftKey">养分含量:</div>
                <div class="errorValue">N 元素含量不足</div>
              </div>
              <div class="plantStatus">
                <div class="leftKey">重金属含量:</div>
                <div class="errorValue">Hg 金属含量超标</div>
              </div>
              <div class="plantStatus">
                <div class="leftKey">水温:</div>
                <div class="errorValue">38℃ 偏高</div>
              </div>
              <div class="plantStatus">
                <div class="leftKey">水浑浊度:</div>
                <div class="rightValue">良好</div>
              </div>
              <div class="plantStatus">
                <div class="leftKey">酸碱度:</div>
                <div class="rightValue">正常</div>
              </div>
              <div class="plantStatus">
                <div class="leftKey">盐分含量:</div>
                <div class="rightValue">正常</div>
              </div>
            </el-card>
          </div>
        </div>
      </template>
    </common>
  </div>
</template>

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

/* --------------- data --------------- */
// #region
const devices = ref([
  {
    name: 'A-001',
    icon: 'temp',
    detail: 'A区-监控设备1',
    status: '1',
    id: 0,
  },
  {
    name: 'A-002',
    icon: 'temp',
    detail: 'A区-监控设备2',
    status: '1',
    id: 1,
  },
  {
    name: 'A-003',
    icon: 'temp',
    detail: 'A区-监控设备3',
    status: '1',
    id: 2,
  },
  {
    name: 'A-004',
    icon: 'soilSensor',
    detail: 'A区-监控设备4',
    status: '-1',
    id: 3,
  },
  {
    name: 'A-005',
    icon: 'anemometer',
    detail: 'A区-监控设备5',
    status: '1',
    id: 4,
  },
  {
    name: 'A-006',
    icon: 'anemometer',
    detail: 'A区-监控设备6',
    status: '0',
    id: 5,
  },
  {
    name: 'B-001',
    icon: 'rainGauge',
    detail: 'B区-监控设备1',
    status: '1',
    id: 6,
  },
  {
    name: 'B-002',
    icon: 'rainGauge',
    detail: 'B区-监控设备2',
    status: '-1',
    id: 7,
  },
  {
    name: 'B-003',
    icon: 'waterLoggingSensor',
    detail: 'B区-监控设备3',
    status: '1',
    id: 8,
  },
  {
    name: 'B-004',
    icon: 'PM2.5',
    detail: 'B区-监控设备4',
    status: '1',
    id: 9,
  },
  {
    name: 'B-005',
    icon: 'PM2.5',
    detail: 'B区-监控设备5',
    status: '1',
    id: 10,
  },
  {
    name: 'B-006',
    icon: 'light',
    detail: 'B区-监控设备6',
    status: '1',
    id: 11,
  },
]);
const currentDevice = ref(0);
const notices = ref([
  {
    title: '2025年1月1日，预计将会有特大暴雨，请提前做好防护措施！',
    content: '',
  },
  {
    title: '2025年1月1日，预计将会有特大暴雨，请提前做好防护措施！',
    content: '',
  },
]);
// #endregion

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

<style lang="scss" scoped>
.plantStatus {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin: 7px 0;
  .leftKey {
    color: #000000;
  }
  .rightValue {
    color: #25bf82;
  }
  .errorValue {
    color: #fe4066;
  }
}
.notices {
  div {
    margin: 10px 0;
  }
  text-align: left;
}
.envData {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  .dt {
    width: 24%;
    text-align: left;
    .values {
      color: #25bf82;
      font-size: 20px;
      font-weight: bold;
    }
    .points {
      color: #999999;
      font-size: 14px;
    }
  }
}
.plantStatus {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin: 10px 0;

  .leftKey {
    color: #000000;
  }

  .rightValue {
    color: #25bf82;
  }
}
</style>