智能灌溉和智能浸种开发完成，含右侧展示组件，原文件结构调整，路由调整

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

@@ -139,6 +139,18 @@ export const constantRoutes = [
         name: 'intelligentFertilizer',
         meta: { title: '智能配肥' },
       },
+      {
+        path: '/sub-operation-service/smartFarm/IntelligentIrrigation',
+        component: () => import('@/views/smartFarm/inspection/IntelligentIrrigation.vue'),
+        name: 'IntelligentIrrigation',
+        meta: { title: '智能灌溉' },
+      },
+      {
+        path: '/sub-operation-service/smartFarm/IntelligentSeedSoaking',
+        component: () => import('@/views/smartFarm/inspection/IntelligentSeedSoaking.vue'),
+        name: 'IntelligentSeedSoaking',
+        meta: { title: '智能浸种' },
+      },
       {
         path: '/sub-operation-service/smartFarm/growSeedlings',
         component: () => import('@/views/smartFarm/manageControl/growSeedlings.vue'),

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

@@ -0,0 +1,71 @@
+<script setup>
+import { ref, reactive, onMounted, watch } from 'vue';
+import { isEmpty, getAssetsFile } from '@/utils';
+
+const props = defineProps({
+  data: {
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+  title: {
+    type: String,
+    required: true,
+    default: () => '',
+    validator: (items) => {
+      return items;
+    },
+  },
+  showImage: {
+    type: Boolean,
+    default: false,
+  },
+  imageList: {
+    type: Array,
+    default: () => [],
+  },
+});
+</script>
+
+<template>
+  <div>
+    <el-card style="border-radius: 16px; min-height: 316px">
+      <div class="my-card-title" style="">{{ title }}</div>
+      <div v-for="(item, index) in data" :key="index" class="show-data-box">
+        <div class="left-title">{{ item.title }}:</div>
+        <div :style="{ color: item.status == '0' ? '#FE4066' : '#25BF82' }">{{ item.statusText }}</div>
+      </div>
+      <div v-if="showImage">
+        <p style="font-size: 14px; text-align: left; color: #000000; margin-bottom: 10px">灌溉记录:</p>
+        <el-image
+          style="width: 100%"
+          :src="imageList[0]"
+          :zoom-rate="1.2"
+          :max-scale="7"
+          :min-scale="0.2"
+          :preview-src-list="imageList"
+          show-progress
+          :initial-index="4"
+          fit="cover"
+        />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.my-card-title {
+  font-size: 16px;
+  font-weight: bold;
+  text-align: left;
+  color: #000;
+  margin-bottom: 16px;
+}
+.show-data-box {
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  margin: 7px 0;
+  color: #000000;
+}
+</style>

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

@@ -37,6 +37,8 @@ const icons = [
   { 雨量计: 'rainGauge' },
   { 土壤传感器: 'soilSensor' },
   { 积水传感器: 'waterLoggingSensor' },
+  { 土壤温度: 'temperature' },
+  { 土壤湿度: 'humidity' },
 ];
 
 const props = defineProps({
@@ -44,19 +46,6 @@ const props = defineProps({
     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,
@@ -72,8 +61,8 @@ const props = defineProps({
 <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="font-size: 16px; font-weight: bold; text-align: left; color: #000; margin-bottom: 20px">{{ title }}</div>
-      <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
+      <div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 20px">
         <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>
@@ -109,6 +98,8 @@ const props = defineProps({
             <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="" />
+            <img v-else-if="item.icon === 'temperature'" :src="getAssetsFile('images/smartFarm/土壤温度.png')" alt="" />
+            <img v-else-if="item.icon === 'humidity'" :src="getAssetsFile('images/smartFarm/土壤湿度.png')" alt="" />
             <div style="text-align: left; font-weight: bold; font-size: 18px">{{ item.name }}</div>
           </div>
         </div>
@@ -120,9 +111,8 @@ const props = defineProps({
 <style scoped lang="scss">
 .device {
   height: 100px;
-  width: 14%;
+  width: 14.6%;
   background-color: #f5f5f5;
-  margin: 20px 1%;
   border-radius: 16px;
   position: relative;
   cursor: pointer;

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

@@ -85,6 +85,18 @@ const leftMenu = reactive([
         icon: 'menu1.png',
         path: '/sub-operation-service/smartFarm/intelligentFertilizer',
       },
+      {
+        name: 'IntelligentIrrigation',
+        title: '智能灌溉',
+        icon: 'menu1.png',
+        path: '/sub-operation-service/smartFarm/IntelligentIrrigation',
+      },
+      {
+        name: 'IntelligentSeedSoaking',
+        title: '智能浸种',
+        icon: 'menu1.png',
+        path: '/sub-operation-service/smartFarm/IntelligentSeedSoaking',
+      },
     ],
   },
   {
@@ -179,7 +191,7 @@ const openList = (index) => {
   color: $color-main;
 }
 .smartFarm-left-menu-warp {
-  padding: 0 30px;
+  padding: 0 30px 0 10px;
   width: 100%;
   height: 100%;
   .left-menu {

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

@@ -10,21 +10,6 @@ const props = defineProps({
     type: Array,
     required: true,
     default: () => [],
-    validator: (items) => {
-      return items.every((item) => {
-        return (
-          typeof item === 'object' &&
-          item !== null &&
-          typeof item.id === 'number' &&
-          typeof item.isOpen === 'number' &&
-          typeof item.isOperation === 'number' &&
-          typeof item.name === 'string' &&
-          typeof item.serial === 'string' &&
-          typeof item.icon === 'string' &&
-          (!item.status || typeof item.status === 'number')
-        );
-      });
-    },
   },
   title: {
     type: String,

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

@@ -27,19 +27,6 @@ const props = defineProps({
     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.icon === 'string' &&
-          typeof item.detail === 'string' &&
-          (!item.status || typeof item.status === 'number')
-        );
-      });
-    },
   },
 });
 

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

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

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

@@ -0,0 +1,156 @@
+<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: 'tempSensor',
+    detail: 'A区-监控设备9',
+    status: '1', //  0: 离线 1: 正常 -1: 异常
+    id: 0,
+  },
+  {
+    name: 'A-002',
+    icon: 'tempSensor',
+    detail: 'A区-监控设备66',
+    status: '1',
+    id: 1,
+  },
+  {
+    name: 'A-003',
+    icon: 'heater',
+    detail: 'A区-监控设备7',
+    status: '1',
+    id: 2,
+  },
+  {
+    name: 'A-004',
+    icon: 'heater',
+    detail: 'A区-监控设备1',
+    status: '-1',
+    id: 3,
+  },
+  {
+    name: 'A-005',
+    icon: 'heat',
+    detail: 'A区-监控设备5',
+    status: '1',
+    id: 4,
+  },
+  {
+    name: 'A-006',
+    icon: 'disinfectionLamp',
+    status: '0',
+    detail: 'A区-监控设备21',
+    id: 5,
+  },
+  {
+    name: 'A-007',
+    icon: 'timer',
+    status: '1',
+    detail: 'A区-监控设备4',
+    id: 6,
+  },
+  {
+    name: 'A-008',
+    detail: 'A区-监控设备3',
+    icon: 'timer',
+    status: '-1',
+    id: 7,
+  },
+  {
+    name: 'A-009',
+    detail: 'A区-监控设备9',
+    icon: 'mixer',
+    status: '1',
+    id: 8,
+  },
+  {
+    name: 'A-010',
+    detail: 'A区-监控设备10',
+    icon: 'liquidSensor',
+    status: '1',
+    id: 9,
+  },
+  {
+    name: 'A-011',
+    detail: 'A区-监控设备3',
+    icon: 'liquidSensor',
+    status: '0',
+    id: 10,
+  },
+  {
+    name: 'A-012',
+    detail: 'A区-监控设备3',
+    icon: 'disinfectionLamp',
+    status: '1',
+    id: 11,
+  },
+]);
+
+const srcList = ref(['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']);
+const rightData = ref([
+  {
+    title: '温度', //左侧文本
+    status: '1', //  0:不正常 1:正常
+    statusText: '21℃ 正常', //左侧文本
+  },
+  {
+    title: '湿度',
+    status: '1',
+    statusText: '18℃ 正常',
+  },
+  {
+    title: '光照强度',
+    status: '1',
+    statusText: '正常',
+  },
+  {
+    title: '浸泡液位',
+    status: '1',
+    statusText: '正常',
+  },
+  {
+    title: '溶解氧含量',
+    status: '1',
+    statusText: '36% 正常',
+  },
+  {
+    title: '酸碱度',
+    status: '1',
+    statusText: '6.7 正常',
+  },
+  {
+    title: '设备状态',
+    status: '1',
+    statusText: '正常',
+  },
+  {
+    title: '种子状态',
+    status: '1',
+    statusText: '出芽',
+  },
+]);
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -7,7 +7,7 @@
         </div>
         <div style="display: flex; justify-content: space-between; margin-top: 10px">
           <stream :title="'施肥监测实时监控'" :devices="devices" style="width: 60%; height: fit-content"></stream>
-          <el-card style="width: calc(40% - 20px); border-radius: 16px; padding: 10px">
+          <el-card style="width: calc(40% - 20px); border-radius: 16px">
             <div style="font-size: 16px; font-weight: bold; text-align: left">配肥分析</div>
             <div class="plantStatus">
               <div class="leftKey">土壤酸碱度:</div>

sub-operation-service/vite.config.js

@@ -36,6 +36,7 @@ export default defineConfig(({ command, mode }) => {
       port: VITE_PORT,
       open: true,
       https: false,
+      origin: 'http://localhost:9526',
       headers: {
         'Access-Control-Allow-Origin': '*',
       },