智能配肥

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

@@ -133,6 +133,12 @@ export const constantRoutes = [
         name: 'envInspection',
         meta: { title: '环境监测' },
       },
+      {
+        path: '/sub-operation-service/smartFarm/intelligentFertilizer',
+        component: () => import('@/views/smartFarm/inspection/intelligentFertilizer.vue'),
+        name: 'intelligentFertilizer',
+        meta: { title: '智能配肥' },
+      },
       {
         path: '/sub-operation-service/smartFarm/growSeedlings',
         component: () => import('@/views/smartFarm/growSeedlings/index.vue'),

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

@@ -27,7 +27,7 @@ const icons = [
   { 温度传感器: 'tempSensor' },
   { 智能阀控: 'intelligentValveControl' },
   { 供水阀: 'waterSupplyValve' },
-  { 混合阀: 'mixingPump' },
+  { 混合泵: 'mixingPump' },
   { 混合罐: 'mixingTank' },
   { 施肥: 'fertilization' },
   { 肥料罐: 'fertilizerTank' },

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

@@ -79,6 +79,12 @@ const leftMenu = reactive([
         icon: 'menu1.png',
         path: '/sub-operation-service/smartFarm/envInspection',
       },
+      {
+        name: 'intelligentFertilizer',
+        title: '智能配肥',
+        icon: 'menu1.png',
+        path: '/sub-operation-service/smartFarm/intelligentFertilizer',
+      },
     ],
   },
   {

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

@@ -0,0 +1,161 @@
+<template>
+  <section>
+    <common>
+      <template #main>
+        <div>
+          <devices :title="'智能配肥设备'" :devices="devices"></devices>
+        </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">
+            <div style="font-size: 16px; font-weight: bold; text-align: left">配肥分析</div>
+            <div class="plantStatus">
+              <div class="leftKey">土壤酸碱度:</div>
+              <div class="rightValue">正常</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">偏高</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>
+            <div class="plantStatus">
+              <div class="leftKey">肥料储备:</div>
+              <div class="rightValue">充足</div>
+            </div>
+          </el-card>
+        </div>
+      </template>
+    </common>
+  </section>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } 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 * as echarts from 'echarts';
+/* --------------- data --------------- */
+// #region
+const devices = ref([
+  {
+    name: 'A-001',
+    icon: 'fertilizerTank',
+    detail: 'A区-监控设备9',
+    status: '0',
+    id: 0,
+  },
+  {
+    name: 'A-002',
+    icon: 'fertilizerTank',
+    detail: 'A区-监控设备66',
+    status: '0',
+    id: 1,
+  },
+  {
+    name: 'A-003',
+    icon: 'fertilization',
+    detail: 'A区-监控设备7',
+    status: '0',
+    id: 2,
+  },
+  {
+    name: 'A-004',
+    icon: 'mixingTank',
+    detail: 'A区-监控设备1',
+    status: '-1',
+    id: 3,
+  },
+  {
+    name: 'A-005',
+    icon: 'mixingTank',
+    detail: 'A区-监控设备5',
+    status: '-1',
+    id: 4,
+  },
+  {
+    name: 'A-006',
+    icon: 'mixingTank',
+    status: '0',
+    detail: 'A区-监控设备21',
+    id: 5,
+  },
+  {
+    name: 'A-007',
+    icon: 'mixingPump',
+    status: '0',
+    detail: 'A区-监控设备4',
+    id: 6,
+  },
+  {
+    name: 'A-008',
+    detail: 'A区-监控设备3',
+    icon: 'mixingPump',
+    status: '0',
+    id: 7,
+  },
+  {
+    name: 'A-009',
+    detail: 'A区-监控设备9',
+    icon: 'mixingPump',
+    status: '0',
+    id: 8,
+  },
+  {
+    name: 'A-010',
+    detail: 'A区-监控设备10',
+    icon: 'solenoidValve',
+    status: '0',
+    id: 9,
+  },
+  {
+    name: 'A-008',
+    detail: 'A区-监控设备3',
+    icon: 'solenoidValve',
+    status: '0',
+    id: 10,
+  },
+  {
+    name: 'A-008',
+    detail: 'A区-监控设备3',
+    icon: 'solenoidValve',
+    status: '0',
+    id: 11,
+  },
+]);
+// #endregion
+/* --------------- methods --------------- */
+// #region
+
+// #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;
+  }
+}
+</style>