农业环境监测修改

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,16 +123,11 @@ const devices = ref([
     id: 7,
   },
 ]);
-// #endregion
+// 图表配置
-/* --------------- methods --------------- */
+const option = {
-// #region
-// 初始化图表
-const initChart = () => {
-  // 图表配置
-  const option = {
   backgroundColor: '#fff',
   title: {
-      text: '简单折线图',
+    text: '',
     textStyle: {
       fontSize: 12,
       fontWeight: 400,
@@ -142,7 +137,7 @@ const initChart = () => {
   },
   legend: {
     icon: 'circle',
-      top: '5%',
+    top: '0',
     right: '5%',
     itemWidth: 6,
     itemGap: 20,
@@ -173,7 +168,7 @@ const initChart = () => {
     extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
   },
   grid: {
-      top: '15%',
+    top: '20%',
   },
   xAxis: [
     {
@@ -231,6 +226,7 @@ const initChart = () => {
   yAxis: [
     {
       type: 'value',
+      show: false,
       axisTick: {
         show: false,
       },
@@ -252,9 +248,9 @@ const initChart = () => {
   ],
   series: [
     {
-        name: 'Adidas',
+      name: '茎秆高度',
       type: 'line',
-        data: [10, 10, 30, 12, 15, 3, 7],
+      data: [10, 10, 30, 12, 15, 3],
       symbolSize: 1,
       symbol: 'circle',
       smooth: true,
@@ -262,16 +258,7 @@ const initChart = () => {
       showSymbol: false,
       lineStyle: {
         width: 5,
-          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+        color: '#3685FE',
-            {
-              offset: 0,
-              color: '#9effff',
-            },
-            {
-              offset: 1,
-              color: '#9E87FF',
-            },
-          ]),
         shadowColor: 'rgba(158,135,255, 0.3)',
         shadowBlur: 10,
         shadowOffsetY: 20,
@@ -282,9 +269,9 @@ const initChart = () => {
       },
     },
     {
-        name: 'Nike',
+      name: '叶片温度',
       type: 'line',
-        data: [5, 12, 11, 14, 25, 16, 10],
+      data: [5, 12, 11, 14, 25, 16],
       symbolSize: 1,
       symbol: 'circle',
       smooth: true,
@@ -292,16 +279,7 @@ const initChart = () => {
       showSymbol: false,
       lineStyle: {
         width: 5,
-          color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
+        color: '#FFD500',
-            {
-              offset: 0,
-              color: '#73DD39',
-            },
-            {
-              offset: 1,
-              color: '#73DDFF',
-            },
-          ]),
         shadowColor: 'rgba(115,221,255, 0.3)',
         shadowBlur: 10,
         shadowOffsetY: 20,
@@ -311,18 +289,74 @@ const initChart = () => {
         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],
+      },
+    },
   ],
-  };
+};
-  if (chartRef.value) {
+// #endregion
+/* --------------- methods --------------- */
+// #region
+// 初始化图表
+const initChart = () => {
+  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>