农业环境监测修改

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

@@ -59,9 +59,21 @@ export const constantRoutes = [
       },
       {
         path: '/sub-operation-service/smartFarm/fieldInspection',
-        component: () => import('@/views/smartFarm/fieldInspection/index.vue'),
+        component: () => import('@/views/smartFarm/inspection/fieldInspection.vue'),
         name: 'fieldInspection',
-        meta: { title: '田间检测' },
+        meta: { title: '田间监测' },
+      },
+      {
+        path: '/sub-operation-service/smartFarm/waterInspection',
+        component: () => import('@/views/smartFarm/inspection/waterInspection.vue'),
+        name: 'waterInspection',
+        meta: { title: '水质监测' },
+      },
+      {
+        path: '/sub-operation-service/smartFarm/bugInspection',
+        component: () => import('@/views/smartFarm/inspection/bugInspection.vue'),
+        name: 'bugInspection',
+        meta: { title: '病虫害监测' },
       },
     ],
   },

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

@@ -33,7 +33,7 @@ const menus = reactive([
       {
         name: 'supplier',
         title: '田间监测',
-        path: '/sub-operation-service/smartFarm/fieldInspection',
+        path: '/sub-operation-service/smartFarm/inspection',
       },
       {
         name: 'supplier',

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

@@ -41,11 +41,19 @@ const props = defineProps({
       <div style="font-size: 16px; font-weight: bold; text-align: left; color: #000">{{ title }}</div>
       <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
         <div v-for="(item, index) in devices" :key="index" class="device">
-          <div v-if="item.status == 0" class="status" style="background-color: #25bf82">正常</div>
+          <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>
           <div v-else-if="item.status == -1" class="status" style="background-color: #fe4066">异常</div>
           <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%">
             <img v-if="item.icon === 'camera'" :src="getAssetsFile('images/smartFarm/监控.png')" alt="" />
             <img v-else-if="item.icon === 'sensor'" :src="getAssetsFile('images/smartFarm/传感器.png')" alt="" />
+            <img v-else-if="item.icon === 'O2'" :src="getAssetsFile('images/smartFarm/水质溶解氧.png')" alt="" />
+            <img v-else-if="item.icon === 'temp'" :src="getAssetsFile('images/smartFarm/温度.png')" alt="" />
+            <img v-else-if="item.icon === 'ph'" :src="getAssetsFile('images/smartFarm/酸碱度.png')" alt="" />
+            <img v-else-if="item.icon === 'elect'" :src="getAssetsFile('images/smartFarm/水质电导率.png')" alt="" />
+            <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="" />
             <div style="text-align: left; font-weight: bold; font-size: 18px">{{ item.name }}</div>
           </div>
         </div>
@@ -57,7 +65,7 @@ const props = defineProps({
 <style scoped lang="scss">
 .device {
   height: 100px;
-  width: 18%;
+  width: 14%;
   background-color: #f5f5f5;
   margin: 20px 1%;
   border-radius: 16px;

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

@@ -65,13 +65,13 @@ const leftMenu = reactive([
         name: 'supplier',
         title: '水质监测',
         icon: 'menu1.png',
-        path: '/sub-operation-service/ecommerce-supplier',
+        path: '/sub-operation-service/smartFarm/waterInspection',
       },
       {
         name: 'supplier',
         title: '病虫害监测',
         icon: 'menu1.png',
-        path: '/sub-operation-service/ecommerce-supplier',
+        path: '/sub-operation-service/smartFarm/bugInspection',
       },
     ],
   },

sub-operation-service/src/views/smartFarm/index.vue

@@ -3,7 +3,7 @@
     <common>
       <template #main>
         <div>
-          <el-card shadow="hover">
+          <el-card shadow="hover" style="border-radius: 16px">
             <el-row>
               <el-col :span="10">
                 <map-comp style="height: 300px; width: 100%; border: 0"></map-comp>
@@ -89,7 +89,7 @@
               </el-col>
             </el-row>
           </el-card>
-          <el-card shadow="hover" style="margin-top: 10px">
+          <el-card shadow="hover" style="margin-top: 10px; border-radius: 16px">
             <div style="display: flex; padding: 20px">
               <div style="width: 30%">
                 <div style="font-size: 18px; font-weight: bold; text-align: left">土壤数据</div>
@@ -207,7 +207,7 @@
               </div>
             </div>
           </el-card>
-          <el-card shadow="hover" style="margin-top: 10px">
+          <el-card shadow="hover" style="margin-top: 10px; border-radius: 16px">
             <div style="display: flex; padding: 20px">
               <div style="width: 50%">
                 <div style="font-size: 18px; font-weight: bold; text-align: left">产能预测</div>

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

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>
+
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -6,7 +6,7 @@
           <devices :title="'田间监测设备'" :devices="devices"></devices>
         </div>
         <div style="display: flex; justify-content: space-between; margin-top: 10px">
-          <stream :title="'田间监测实时监控'" :devices="devices" style="width: 60%"></stream>
+          <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">
@@ -41,7 +41,7 @@
               <div class="leftKey">生长趋势图</div>
               <div class="rightValue">&nbsp;</div>
             </div>
-            <div ref="chartRef1" style="width: 100%; height: 150px"></div>
+            <div ref="chartRef1" style="width: 100%; height: 200px"></div>
           </el-card>
         </div>
       </template>
@@ -58,11 +58,11 @@ import * as echarts from 'echarts';
 /* --------------- data --------------- */
 // #region
 // 图表 DOM 引用
-const chartRef = ref(null);
+const chartRef1 = ref(null);
 // ECharts 实例
 let chartInstance = null;
 // 颜色列表
-const colorList = ['#9E87FF', '#73DDFF'];
+const colorList = ['#3685FE', '#FFD500', '#25BF82'];
 // x轴数据
 const xData = ['1月', '2月', '3月', '4月', '5月', '6月'];
 const devices = ref([
@@ -123,206 +123,240 @@ const devices = ref([
     id: 7,
   },
 ]);
+// 图表配置
+const option = {
+  backgroundColor: '#fff',
+  title: {
+    text: '',
+    textStyle: {
+      fontSize: 12,
+      fontWeight: 400,
+    },
+    left: 'center',
+    top: '5%',
+  },
+  legend: {
+    icon: 'circle',
+    top: '0',
+    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: [10, 10, 30, 12, 15, 3],
+      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: [5, 12, 11, 14, 25, 16],
+      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: [6, 14, 17, 25, 21, 10],
+      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],
+      },
+    },
+  ],
+};
 // #endregion
 /* --------------- methods --------------- */
 // #region
 // 初始化图表
 const initChart = () => {
-  // 图表配置
-  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: '15%',
-    },
-    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',
-        axisTick: {
-          show: false,
-        },
-        axisLine: {
-          show: true,
-          lineStyle: {
-            color: 'rgba(107,107,107,0.37)',
-          },
-        },
-        axisLabel: {
-          textStyle: {
-            color: '#999',
-          },
-        },
-        splitLine: {
-          show: false,
-        },
-      },
-    ],
-    series: [
-      {
-        name: 'Adidas',
-        type: 'line',
-        data: [10, 10, 30, 12, 15, 3, 7],
-        symbolSize: 1,
-        symbol: 'circle',
-        smooth: true,
-        yAxisIndex: 0,
-        showSymbol: false,
-        lineStyle: {
-          width: 5,
-          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-            {
-              offset: 0,
-              color: '#9effff',
-            },
-            {
-              offset: 1,
-              color: '#9E87FF',
-            },
-          ]),
-          shadowColor: 'rgba(158,135,255, 0.3)',
-          shadowBlur: 10,
-          shadowOffsetY: 20,
-        },
-        itemStyle: {
-          color: colorList[0],
-          borderColor: colorList[0],
-        },
-      },
-      {
-        name: 'Nike',
-        type: 'line',
-        data: [5, 12, 11, 14, 25, 16, 10],
-        symbolSize: 1,
-        symbol: 'circle',
-        smooth: true,
-        yAxisIndex: 0,
-        showSymbol: false,
-        lineStyle: {
-          width: 5,
-          color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
-            {
-              offset: 0,
-              color: '#73DD39',
-            },
-            {
-              offset: 1,
-              color: '#73DDFF',
-            },
-          ]),
-          shadowColor: 'rgba(115,221,255, 0.3)',
-          shadowBlur: 10,
-          shadowOffsetY: 20,
-        },
-        itemStyle: {
-          color: colorList[1],
-          borderColor: colorList[1],
-        },
-      },
-    ],
-  };
-  if (chartRef.value) {
+  if (chartRef1.value) {
     // 基于准备好的dom，初始化echarts实例
-    chartInstance = echarts.init(chartRef.value);
+    chartInstance = echarts.init(chartRef1.value);
     // 绘制图表
     chartInstance.setOption(option);
-
+    // 自动显示最大值点的tooltip
+    // showMaxValueTooltip();
     // 响应式调整
     window.addEventListener('resize', resizeChart);
   }
 };
+
+const showMaxValueTooltip = () => {
+  if (!chartInstance) return;
+
+  // 找出所有系列中的最大值点
+  let maxValue = -Infinity;
+  let maxSeriesIndex = 0;
+  let maxDataIndex = 0;
+
+  option.series.forEach((series, seriesIndex) => {
+    series.data.forEach((value, dataIndex) => {
+      if (value > maxValue) {
+        maxValue = value;
+        maxSeriesIndex = seriesIndex;
+        maxDataIndex = dataIndex;
+      }
+    });
+  });
+
+  // 延迟执行确保图表渲染完成
+  setTimeout(() => {
+    chartInstance.dispatchAction({
+      type: 'showTip',
+      seriesIndex: maxSeriesIndex,
+      dataIndex: maxDataIndex,
+    });
+  }, 300);
+};
+
 // 组件挂载时初始化图表
 onMounted(() => {
   initChart();

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

@@ -0,0 +1,253 @@
+<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(['https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg']);
+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;
+};
+
+/* --------------- 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 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="'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'"
+                :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;
+  }
+}
+</style>