环境监测页面添加拟动态数据

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

@@ -7,90 +7,65 @@
         </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%">
+            <el-card style="width: 60%; margin-right: 20px; border-radius: 16px">
               <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-select
+                    v-model="currentDevice"
+                    placeholder="Select"
+                    size="small"
+                    style="width: 160px; margin-left: 10px"
+                    @change="changeDevice($event)"
+                  >
                     <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="values">{{ monitorData.co2 }}</div>
                   <div class="points">空气温度</div>
                 </div>
                 <div class="dt">
-                  <div class="values">61%</div>
+                  <div class="values">{{ monitorData.humidity }}</div>
                   <div class="points">空气湿度</div>
                 </div>
                 <div class="dt">
-                  <div class="values">1600mm</div>
-                  <div class="points">空气温度</div>
+                  <div class="values">{{ monitorData.rainfall }}</div>
+                  <div class="points">降水量</div>
                 </div>
                 <div class="dt">
-                  <div class="values">东南风</div>
+                  <div class="values">{{ monitorData.wind }}</div>
                   <div class="points">风向</div>
                 </div>
-              </div>
-              <div class="envData">
+
                 <div class="dt">
-                  <div class="values">12μg/m³</div>
+                  <div class="values">{{ monitorData.pm25 }}</div>
                   <div class="points">PM2.5</div>
                 </div>
                 <div class="dt">
-                  <div class="values">679Lux</div>
+                  <div class="values">{{ monitorData.light }}</div>
                   <div class="points">光照强度</div>
                 </div>
                 <div class="dt">
-                  <div class="values">440ppm</div>
+                  <div class="values">{{ monitorData.co2 }}</div>
                   <div class="points">二氧化碳浓度</div>
                 </div>
                 <div class="dt">
-                  <div class="values">1.5m/s</div>
+                  <div class="values">{{ monitorData.windSpeed }}</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" />
+                  <img :src="getAssetsFile('images/smartFarm/bell.png')" alt="" style="height: 20px; margin-right: 5px" />
                   <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>
+            <DataDisplay :title="'环境分析报告'" :data="rightData" style="flex: 1"></DataDisplay>
           </div>
         </div>
       </template>
@@ -99,10 +74,12 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { onMounted, 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';
+import DataDisplay from '@/views/smartFarm/components/dataDisplay.vue';
+import Mock from 'mockjs';
 
 /* --------------- data --------------- */
 // #region
@@ -195,14 +172,68 @@ const devices = ref([
 const currentDevice = ref(0);
 const notices = ref([
   {
-    title: '2025年1月1日，预计将会有特大暴雨，请提前做好防护措施！',
+    title: '2025年1月2日，预计将会有特大暴雨，请提前做好防护措施！',
     content: '',
   },
   {
-    title: '2025年1月1日，预计将会有特大暴雨，请提前做好防护措施！',
+    title: '2025年1月1日，预计将会有大雨，请提前做好防护措施！',
     content: '',
   },
 ]);
+let monitorData = ref({});
+let rightData = ref([]);
+const changeDevice = (id) => {
+  currentDevice.value = id;
+  monitorData.value = getMockData()[0];
+  rightData.value = getMockData()[1];
+};
+// 生成模拟数据
+const getMockData = () => {
+  // 左侧环境监测数据
+  const leftData = Mock.mock({
+    co2: () => randomRange(200, 800, 0) + 'ppm', // CO₂浓度（300~800ppm）
+    temperature: () => randomRange(-10, 40, 1) + '℃', // 温度（-10~40℃）
+    humidity: () => randomRange(10, 100, 0) + '%', // 湿度（10%~100%）
+    wind: '@pick(["东南风", "西南风", "东北风", "西北风"])',
+    rainfall: () => randomRange(0, 200, 1) + 'mm', // 降水量（0~200mm，1位小数）
+    pm25: () => randomRange(0, 300, 0) + 'μg/m³', // PM2.5（0~300μg/m³，整数）
+    light: () => randomRange(100, 1000, 0) + 'Lux', // 光照强度（100~1000Lux，整数）
+    windSpeed: () => randomRange(0, 10, 1) + 'm/s', // 风速（0~10m/s，1位小数）
+  });
+  // 右侧环境分析报告数据
+  const rightData = Mock.mock({
+    'list|6': [
+      {
+        // 基础字段
+        'title|+1': ['酸碱度(pH)', '养分含量', '重金属含量', '水温', '水浑浊度', '盐分含量'],
+        'status|1': ['0', '1'],
+        'unit|+1': ['pH值', '%', 'mg/kg', '℃', 'NTU', 'dS/m'],
+
+        // 动态生成异常文本
+        statusText: function () {
+          const statusMap = {
+            '酸碱度(pH)':
+              this.status === '0' ? `酸碱度${Mock.mock('@float(4.0, 9.0, 1, 1)')}（${Mock.mock('@pick(["酸性过强","碱性过强"])')}）` : '正常',
+            养分含量: this.status === '0' ? `${Mock.mock('@pick(["N","P","K","Ca","Mg"])')}元素含量不足` : '正常',
+            重金属含量: this.status === '0' ? `${Mock.mock('@pick(["镉","铅","砷","汞"])')}超标(${Mock.mock('@float(1, 5, 1, 1)')}mg/kg)` : '正常',
+            水温: this.status === '0' ? `${Mock.mock('@integer(10, 40)')}℃（${Mock.mock('@pick(["低温胁迫","高温胁迫"])')}）` : '正常',
+            水浑浊度: this.status === '0' ? `浊度${Mock.mock('@integer(10, 50)')}NTU` : '正常',
+            盐分含量: this.status === '0' ? `盐分${Mock.mock('@float(2, 5, 1, 1)')}dS/m` : '正常',
+          };
+          return statusMap[this.title];
+        },
+      },
+    ],
+  });
+  return [leftData, rightData.list];
+};
+// 自定义随机范围函数
+const randomRange = (min, max, fixed = 0) => {
+  return Mock.Random.float(min, max, fixed).toFixed(fixed);
+};
+onMounted(() => {
+  changeDevice(0);
+});
 // #endregion
 
 /* --------------- methods --------------- */
@@ -253,10 +284,12 @@ const chooseIcon = (type) => {
 .envData {
   display: flex;
   justify-content: space-between;
-  margin: 20px 0;
+  flex-wrap: wrap;
+  margin-top: 20px;
   .dt {
-    width: 24%;
+    width: 25%;
     text-align: left;
+    margin-bottom: 20px;
     .values {
       color: #25bf82;
       font-size: 20px;