icons 设备组件完善。环境监测页面完成

sub-operation-service/src/router/index.js

@@ -127,6 +127,12 @@ export const constantRoutes = [
         name: 'bugInspection',
         meta: { title: '病虫害监测' },
       },
+      {
+        path: '/sub-operation-service/smartFarm/envInspection',
+        component: () => import('@/views/smartFarm/inspection/envInspection.vue'),
+        name: 'envInspection',
+        meta: { title: '环境监测' },
+      },
       {
         path: '/sub-operation-service/smartFarm/growSeedlings',
         component: () => import('@/views/smartFarm/growSeedlings/index.vue'),

sub-operation-service/src/views/smartFarm/components/bugData.vue

@@ -0,0 +1,266 @@
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { getAssetsFile } from '@/utils/index.js';
+import * as echarts from 'echarts';
+
+// 图表 DOM 引用
+const chartRef2 = ref(null);
+// ECharts 实例
+let chartInstance = null;
+// 颜色列表
+const colorList = ['#3685FE', '#FFD500', '#25BF82', '#FE4066'];
+// x轴数据
+const xData = ['1月', '2月', '3月', '4月', '5月', '6月'];
+
+/* --------------- methods --------------- */
+// #region
+// 图表配置
+const option = {
+  backgroundColor: '#fff',
+  title: {
+    text: '',
+    textStyle: {
+      fontSize: 12,
+      fontWeight: 400,
+    },
+    left: 'center',
+    top: '5%',
+  },
+  legend: {
+    icon: 'circle',
+    top: '5%',
+    right: '5%',
+    itemWidth: 6,
+    itemGap: 20,
+    textStyle: {
+      color: '#556677',
+    },
+  },
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      label: {
+        show: true,
+        backgroundColor: '#fff',
+        color: '#556677',
+        borderColor: 'rgba(0,0,0,0)',
+        shadowColor: 'rgba(0,0,0,0)',
+        shadowOffsetY: 0,
+      },
+      lineStyle: {
+        width: 0,
+      },
+    },
+    backgroundColor: '#fff',
+    textStyle: {
+      color: '#5c6c7c',
+    },
+    padding: [10, 10],
+    extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
+  },
+  grid: {
+    top: '20%',
+  },
+  xAxis: [
+    {
+      type: 'category',
+      data: xData,
+      axisLine: {
+        lineStyle: {
+          color: 'rgba(107,107,107,0.37)',
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        interval: 0,
+        textStyle: {
+          color: '#999',
+        },
+        margin: 15,
+      },
+      axisPointer: {
+        label: {
+          padding: [11, 5, 7],
+          backgroundColor: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: '#fff',
+              },
+              {
+                offset: 0.9,
+                color: '#fff',
+              },
+              {
+                offset: 0.9,
+                color: '#33c0cd',
+              },
+              {
+                offset: 1,
+                color: '#33c0cd',
+              },
+            ],
+            global: false,
+          },
+        },
+      },
+      boundaryGap: false,
+    },
+  ],
+  yAxis: [
+    {
+      type: 'value',
+      show: false,
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: 'rgba(107,107,107,0.37)',
+        },
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#999',
+        },
+      },
+      splitLine: {
+        show: false,
+      },
+    },
+  ],
+  series: [
+    {
+      name: '蝗虫',
+      type: 'line',
+      data: [235, 852, 1208, 1988, 1657, 643],
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 0,
+      showSymbol: false,
+      lineStyle: {
+        width: 5,
+        color: '#3685FE',
+        shadowColor: 'rgba(158,135,255, 0.3)',
+        shadowBlur: 10,
+        shadowOffsetY: 20,
+      },
+      itemStyle: {
+        color: colorList[0],
+        borderColor: colorList[0],
+      },
+    },
+    {
+      name: '飞蛾',
+      type: 'line',
+      data: [1124, 1055, 1654, 1764, 922, 55],
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 0,
+      showSymbol: false,
+      lineStyle: {
+        width: 5,
+        color: '#FFD500',
+        shadowColor: 'rgba(115,221,255, 0.3)',
+        shadowBlur: 10,
+        shadowOffsetY: 20,
+      },
+      itemStyle: {
+        color: colorList[1],
+        borderColor: colorList[1],
+      },
+    },
+    {
+      name: '毛虫',
+      type: 'line',
+      data: [1245, 618, 1468, 1814, 2175],
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 0,
+      showSymbol: false,
+      lineStyle: {
+        width: 5,
+        color: '#25BF82',
+        shadowColor: 'rgba(115,221,255, 0.3)',
+        shadowBlur: 10,
+        shadowOffsetY: 20,
+      },
+      itemStyle: {
+        color: colorList[2],
+        borderColor: colorList[2],
+      },
+    },
+    {
+      name: '其他昆虫',
+      type: 'line',
+      data: [1673, 1732, 783, 179, 963, 2068],
+      symbolSize: 1,
+      symbol: 'circle',
+      smooth: true,
+      yAxisIndex: 0,
+      showSymbol: false,
+      lineStyle: {
+        width: 5,
+        color: '#FE4066',
+        shadowColor: 'rgba(115,221,255, 0.3)',
+        shadowBlur: 10,
+        shadowOffsetY: 20,
+      },
+      itemStyle: {
+        color: colorList[3],
+        borderColor: colorList[3],
+      },
+    },
+  ],
+};
+const initChart = () => {
+  if (chartRef2.value) {
+    // 基于准备好的dom，初始化echarts实例
+    chartInstance = echarts.init(chartRef2.value);
+    // 绘制图表
+    chartInstance.setOption(option);
+    // 自动显示最大值点的tooltip
+    // showMaxValueTooltip();
+    // 响应式调整
+    window.addEventListener('resize', resizeChart);
+    setTimeout(() => chartInstance.resize(), 10);
+  }
+};
+// 组件挂载时初始化图表
+onMounted(() => {
+  initChart();
+});
+// 组件卸载前销毁图表
+onBeforeUnmount(() => {
+  if (chartInstance) {
+    window.removeEventListener('resize', resizeChart);
+    chartInstance.dispose();
+    chartInstance = null;
+  }
+});
+// 调整图表大小
+const resizeChart = () => {
+  if (chartInstance) {
+    chartInstance.resize();
+  }
+};
+</script>
+
+<template>
+  <div style="width: 100%; min-height: 210px">
+    <div ref="chartRef2" style="width: 100%; height: 210px; margin-top: 20px"></div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

sub-operation-service/src/views/smartFarm/components/devices.vue

@@ -5,6 +5,40 @@ import { useRoute, useRouter } from 'vue-router';
 const route = useRoute();
 const router = useRouter();
 
+// 图标icon对照表
+const icons = [
+  { 监控: 'camera' },
+  { 传感器: 'sensor' },
+  { 水质溶解氧: 'O2' },
+  { 温度: 'temp' },
+  { 酸碱度: 'ph' },
+  { 水质电导率: 'elect' },
+  { 浊度: 'dust' },
+  { 悬浮物: 'float' },
+  { 分光器: 'light' },
+  { 阀门: 'valve' },
+  { 喷头: 'sprinkler' },
+  { 计时器: 'timer' },
+  { 加热器: 'heater' },
+  { 搅拌机: 'mixer' },
+  { 热力: 'heat' },
+  { 液位传感器: 'liquidSensor' },
+  { 消毒灯: 'disinfectionLamp' },
+  { 温度传感器: 'tempSensor' },
+  { 智能阀控: 'intelligentValveControl' },
+  { 供水阀: 'waterSupplyValve' },
+  { 混合阀: 'mixingPump' },
+  { 混合罐: 'mixingTank' },
+  { 施肥: 'fertilization' },
+  { 肥料罐: 'fertilizerTank' },
+  { 电磁阀状态: 'solenoidValve' },
+  { 'PM2.5': 'PM2.5' },
+  { 风速仪: 'anemometer' },
+  { 雨量计: 'rainGauge' },
+  { 土壤传感器: 'soilSensor' },
+  { 积水传感器: 'waterLoggingSensor' },
+];
+
 const props = defineProps({
   devices: {
     type: Array,
@@ -54,6 +88,27 @@ const props = defineProps({
             <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="" />
+            <img v-else-if="item.icon === 'valve'" :src="getAssetsFile('images/smartFarm/阀门.png')" alt="" />
+            <img v-else-if="item.icon === 'sprinkler'" :src="getAssetsFile('images/smartFarm/喷头.png')" alt="" />
+            <img v-else-if="item.icon === 'timer'" :src="getAssetsFile('images/smartFarm/计时器.png')" alt="" />
+            <img v-else-if="item.icon === 'heater'" :src="getAssetsFile('images/smartFarm/加热器.png')" alt="" />
+            <img v-else-if="item.icon === 'mixer'" :src="getAssetsFile('images/smartFarm/搅拌机.png')" alt="" />
+            <img v-else-if="item.icon === 'heat'" :src="getAssetsFile('images/smartFarm/热力.png')" alt="" />
+            <img v-else-if="item.icon === 'liquidSensor'" :src="getAssetsFile('images/smartFarm/液位传感器.png')" alt="" />
+            <img v-else-if="item.icon === 'disinfectionLamp'" :src="getAssetsFile('images/smartFarm/消毒灯.png')" alt="" />
+            <img v-else-if="item.icon === 'tempSensor'" :src="getAssetsFile('images/smartFarm/温度传感器.png')" alt="" />
+            <img v-else-if="item.icon === 'intelligentValveControl'" :src="getAssetsFile('images/smartFarm/智能阀控.png')" alt="" />
+            <img v-else-if="item.icon === 'waterSupplyValve'" :src="getAssetsFile('images/smartFarm/供水阀.png')" alt="" />
+            <img v-else-if="item.icon === 'mixingPump'" :src="getAssetsFile('images/smartFarm/混合泵.png')" alt="" />
+            <img v-else-if="item.icon === 'mixingTank'" :src="getAssetsFile('images/smartFarm/混合罐.png')" alt="" />
+            <img v-else-if="item.icon === 'fertilization'" :src="getAssetsFile('images/smartFarm/施肥.png')" alt="" />
+            <img v-else-if="item.icon === 'fertilizerTank'" :src="getAssetsFile('images/smartFarm/肥料罐.png')" alt="" />
+            <img v-else-if="item.icon === 'solenoidValve'" :src="getAssetsFile('images/smartFarm/电磁阀状态.png')" alt="" />
+            <img v-else-if="item.icon === 'PM2.5'" :src="getAssetsFile('images/smartFarm/PM2.5.png')" alt="" />
+            <img v-else-if="item.icon === 'anemometer'" :src="getAssetsFile('images/smartFarm/风速仪.png')" alt="" />
+            <img v-else-if="item.icon === 'rainGauge'" :src="getAssetsFile('images/smartFarm/雨量计.png')" alt="" />
+            <img v-else-if="item.icon === 'soilSensor'" :src="getAssetsFile('images/smartFarm/土壤传感器.png')" alt="" />
+            <img v-else-if="item.icon === 'waterLoggingSensor'" :src="getAssetsFile('images/smartFarm/积水传感器.png')" alt="" />
             <div style="text-align: left; font-weight: bold; font-size: 18px">{{ item.name }}</div>
           </div>
         </div>

sub-operation-service/src/views/smartFarm/components/leftMenu.vue

@@ -56,23 +56,29 @@ const leftMenu = reactive([
     isOpen: true,
     children: [
       {
-        name: 'supplier',
+        name: 'fieldInspection',
         title: '田间监测',
         icon: 'menu1.png',
         path: '/sub-operation-service/smartFarm/fieldInspection',
       },
       {
-        name: 'supplier',
+        name: 'waterInspection',
         title: '水质监测',
         icon: 'menu1.png',
         path: '/sub-operation-service/smartFarm/waterInspection',
       },
       {
-        name: 'supplier',
+        name: 'bugInspection',
         title: '病虫害监测',
         icon: 'menu1.png',
         path: '/sub-operation-service/smartFarm/bugInspection',
       },
+      {
+        name: 'envInspection',
+        title: '环境监测',
+        icon: 'menu1.png',
+        path: '/sub-operation-service/smartFarm/envInspection',
+      },
     ],
   },
   {

sub-operation-service/src/views/smartFarm/components/myTable.vue

@@ -40,8 +40,8 @@ onMounted(() => {
           </tr>
           <tr v-for="(item, index) in data" :key="item.id || index">
             <td v-for="(cell, i) of item" :key="item.id || i">
-              <span style="color: #25bf82" v-if="cell == '开启'">{{ cell }}</span>
-              <span style="color: #fe4066" v-else-if="cell == '关闭'">{{ cell }}</span>
+              <span v-if="cell == '开启'" style="color: #25bf82">{{ cell }}</span>
+              <span v-else-if="cell == '关闭'" style="color: #fe4066">{{ cell }}</span>
               <span v-else>{{ cell }}</span>
             </td>
           </tr>

sub-operation-service/src/views/smartFarm/components/sickData.vue

@@ -0,0 +1,124 @@
+<template>
+  <div ref="chartRef" style="width: 100%; height: 230px"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import * as echarts from 'echarts';
+
+const chartRef = ref(null);
+let chartInstance = null;
+
+const initChart = () => {
+  if (!chartRef.value) return;
+
+  chartInstance = echarts.init(chartRef.value);
+
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '8%',
+      top: '15%',
+      containLabel: true,
+    },
+    legend: {
+      data: ['黑星病', '火疫病', '叶腐病'],
+      right: 10,
+      top: 10,
+      textStyle: {
+        color: '#000',
+      },
+      itemWidth: 12,
+      itemHeight: 10,
+    },
+    xAxis: {
+      type: 'category',
+      data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+      axisLine: {
+        lineStyle: {
+          color: '#fff',
+        },
+      },
+      axisLabel: {
+        color: '#333',
+        fontSize: 12,
+      },
+      axisTick: {
+        alignWithLabel: true, // 刻度线与标签对齐
+        lineStyle: {
+          color: 'rgba(255,255,255,0.3)', // 浅灰色刻度线
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      max: 1000,
+      axisLine: {
+        show: false,
+      },
+      axisLabel: {
+        show: false, // 隐藏Y轴刻度
+      },
+      splitLine: {
+        show: false, // 隐藏网格线
+      },
+    },
+    series: [
+      {
+        name: '黑星病',
+        type: 'bar',
+        barWidth: '15%',
+        itemStyle: {
+          borderRadius: 4,
+          color: '#3685FE', // 橙色
+        },
+        data: [400, 400, 300, 300, 300, 400],
+      },
+      {
+        name: '火疫病',
+        type: 'bar',
+        barWidth: '15%',
+        itemStyle: {
+          borderRadius: 4,
+          color: '#25BF82', // 绿色
+        },
+        data: [400, 500, 500, 500, 500, 400],
+      },
+      {
+        name: '叶腐病',
+        type: 'bar',
+        barWidth: '15%',
+        itemStyle: {
+          borderRadius: 4,
+          color: '#FFD500', // 蓝绿色
+        },
+        data: [400, 600, 700, 700, 700, 400],
+      },
+    ],
+  };
+
+  chartInstance.setOption(option);
+
+  // 窗口大小变化时自适应
+  const resizeChart = () => {
+    chartInstance?.resize();
+  };
+  window.addEventListener('resize', resizeChart);
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', resizeChart);
+    chartInstance?.dispose();
+  });
+};
+
+onMounted(() => {
+  initChart();
+});
+</script>

sub-operation-service/src/views/smartFarm/inspection/bugInspection.vue

@@ -1,13 +1,227 @@
 <script setup>
+import Devices from '@/views/smartFarm/components/devices.vue';
+import Common from '@/views/smartFarm/components/common.vue';
+import stream from '@/views/smartFarm/components/stream.vue';
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { getAssetsFile } from '@/utils/index.js';
+import * as echarts from 'echarts';
+import BugData from '@/views/smartFarm/components/bugData.vue';
+import SickData from '@/views/smartFarm/components/sickData.vue';
 
+const currentDevice = ref(0);
+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: 'ph',
+    detail: 'A区-监控设备3',
+    status: '1',
+    id: 2,
+  },
+  {
+    name: 'A-004',
+    icon: 'ph',
+    detail: 'A区-监控设备4',
+    status: '-1',
+    id: 3,
+  },
+  {
+    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-002',
+    icon: 'elect',
+    detail: 'B区-监控设备2',
+    status: '-1',
+    id: 7,
+  },
+  {
+    name: 'B-003',
+    icon: 'dust',
+    detail: 'B区-监控设备3',
+    status: '1',
+    id: 8,
+  },
+  {
+    name: 'B-004',
+    icon: 'dust',
+    detail: 'B区-监控设备4',
+    status: '1',
+    id: 9,
+  },
+  {
+    name: 'B-005',
+    icon: 'float',
+    detail: 'B区-监控设备5',
+    status: '1',
+    id: 10,
+  },
+  {
+    name: 'B-006',
+    icon: 'float',
+    detail: 'B区-监控设备6',
+    status: '1',
+    id: 11,
+  },
+]);
+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;
+};
+
+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">
+          <div style="display: flex; justify-content: space-between; margin-top: 10px">
+            <stream :title="'病害监测实时监控'" :devices="devices" style="width: 60%; height: fit-content"></stream>
+            <div style="width: 38%">
+              <el-card style="border-radius: 16px; padding: 10px">
+                <div style="font-size: 16px; font-weight: bold; text-align: left; color: #000">虫害数据</div>
+                <sick-data style="width: 38%; min-width: 300px"></sick-data>
+              </el-card>
+            </div>
+          </div>
+        </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%">
+            <stream :title="'虫害监测实时监控'" :devices="devices" style="width: 60%; height: fit-content"></stream>
+            <div style="width: 38%">
+              <el-card style="border-radius: 16px; padding: 10px">
+                <div style="font-size: 16px; font-weight: bold; text-align: left; color: #000">虫害数据</div>
+                <bug-data style="width: 38%; min-width: 300px"></bug-data>
+              </el-card>
+            </div>
+          </div>
+        </div>
+      </template>
+    </common>
   </div>
 </template>
 
 <style scoped lang="scss">
-
+.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;
+  }
+}
 </style>

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

@@ -0,0 +1,285 @@
+<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>