feat:监测和溯源

sub-government-affairs-service/src/views/plantingAndBreeding/environment/index.vue

@@ -23,11 +23,9 @@
           @row-save="rowSave"
           @row-update="rowUpdate"
         >
-          <!-- <template #menu-left>
+          <template #menu-left>
-            <el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
+            <el-button type="primary" icon="plus" @click="onThreshold">阀值设置</el-button>
-            <el-button type="success" icon="download" @click="onExport">导出</el-button>
+          </template>
-          </template> -->
-
           <template #menu="scope">
             <custom-table-operate :actions="state.options.actions" :data="scope" />
           </template>
@@ -35,17 +33,22 @@
       </el-col>
     </el-row>
   </div>
+
+  <custom-info ref="customInfoRef" :row="state.currentRow" />
 </template>
 <script setup>
 import { ref, reactive } from 'vue';
+import { useRouter } from 'vue-router';
 import { useApp } from '@/hooks';
 import { useUserStore } from '@/store/modules/user';
 import { CRUD_OPTIONS } from '@/config';
 import { mockData, sleep } from '@/utils';
+import CustomInfo from './info.vue';
 
-const { VITE_APP_BASE_API } = import.meta.env;
+const { VITE_APP_BASE_API, VITE_APP_NAME } = import.meta.env;
 const app = useApp();
 const UserStore = useUserStore();
+const router = useRouter();
 const crudRef = ref(null);
 const landTypeData = ref([
   {
@@ -78,6 +81,7 @@ const state = reactive({
   options: {
     ...CRUD_OPTIONS,
     addBtnText: '阀值设置',
+    addBtn: false,
     selection: false,
     column: [
       {
@@ -230,16 +234,16 @@ const state = reactive({
         icon: 'edit',
         event: ({ row }) => rowEdit(row),
       },
-      {
+      // {
-        type: 'success',
+      //   type: 'success',
-        name: ({ row }) => {
+      //   name: ({ row }) => {
-          return row.status === 1 ? '禁用' : '启用';
+      //     return row.status === 1 ? '禁用' : '启用';
-        },
+      //   },
-        icon: ({ row }) => {
+      //   icon: ({ row }) => {
-          return row.status === 1 ? 'turnOff' : 'open';
+      //     return row.status === 1 ? 'turnOff' : 'open';
-        },
+      //   },
-        event: ({ row }) => rowStatus(row),
+      //   event: ({ row }) => rowStatus(row),
-      },
+      // },
       {
         type: 'danger',
         name: '删除',
@@ -301,7 +305,7 @@ const loadData = async () => {
       p16: '正常',
       p17: '偏低',
       p18: '正常',
-      status: 1,
+      // status: 1,
       createTime: '2025-01-01',
       updateTime: '2025-01-15',
     },
@@ -348,8 +352,10 @@ const selectionChange = (rows) => {
 };
 
 // 查看
+const customInfoRef = ref(null);
 const rowView = (row) => {
-  crudRef.value && crudRef.value.rowView(row);
+  state.currentRow = row;
+  customInfoRef.value && customInfoRef.value.show();
 };
 
 // 启用、禁用
@@ -403,4 +409,9 @@ const rowUpdate = (row, index, done, loading) => {
 
 // 删除
 const rowDel = (row) => {};
+
+// 阀值设置
+const onThreshold = () => {
+  router.push({ path: `/${VITE_APP_NAME}/threshold-value-setting` });
+};
 </script>

sub-government-affairs-service/src/views/plantingAndBreeding/environment/info.vue

@@ -0,0 +1,292 @@
+<template>
+  <el-dialog
+    v-model="state.visible"
+    draggable
+    title="查看"
+    width="70%"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="state.visible = false"
+  >
+    <div class="monitor">
+      <div class="monitor-tabs">
+        <el-radio-group v-model="state.currentTab">
+          <el-radio-button :value="1">环境检测报告</el-radio-button>
+          <el-radio-button :value="2">环境监测数据</el-radio-button>
+        </el-radio-group>
+      </div>
+      <div v-if="state.currentTab === 1" class="monitor-panel">
+        <div class="monitor-panel-item">
+          <h3>土壤环境报告</h3>
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="酸碱度（PH值）">正常</el-descriptions-item>
+            <el-descriptions-item label="土壤质地">砂土含量大，通气性良好，含水性较差</el-descriptions-item>
+            <el-descriptions-item label="养分含量">氮元素含量不足</el-descriptions-item>
+            <el-descriptions-item label="重金属含量">重金属含量超标</el-descriptions-item>
+          </el-descriptions>
+          <div class="suggestion">
+            <el-tag type="primary">处理建议</el-tag>
+            <p>根据大气情况及时浇灌，适宜施加配肥，清理田中污染物。</p>
+          </div>
+        </div>
+
+        <div class="monitor-panel-item">
+          <h3>水环境报告</h3>
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="水温">偏高</el-descriptions-item>
+            <el-descriptions-item label="浑浊度">正常</el-descriptions-item>
+            <el-descriptions-item label="酸碱度">正常</el-descriptions-item>
+            <el-descriptions-item label="盐分含量">正常</el-descriptions-item>
+            <el-descriptions-item label="重金属和有毒物">铜金属含量接近预警值</el-descriptions-item>
+          </el-descriptions>
+          <div class="suggestion">
+            <el-tag type="primary">处理建议</el-tag>
+            <p>温度偏高，不宜在此处取水灌溉，建议观察水源。</p>
+          </div>
+        </div>
+
+        <div class="monitor-panel-item">
+          <h3>大气环境报告</h3>
+          <el-descriptions :column="2" border>
+            <el-descriptions-item label="温度">正常</el-descriptions-item>
+            <el-descriptions-item label="湿度">偏低</el-descriptions-item>
+            <el-descriptions-item label="风速">微风</el-descriptions-item>
+          </el-descriptions>
+          <div class="suggestion">
+            <el-tag type="primary">处理建议</el-tag>
+            <p>可进行适量浇灌，如需进行浇灌，农药喷洒，请注意风向。同时注解。</p>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="state.currentTab === 2" class="monitor-panel">
+        <div class="monitor-panel-item">
+          <h3>土壤环境检测</h3>
+          <div class="data-row">
+            <span class="label">酸碱度（PH值）：</span>
+            <span class="value">6.3</span>
+          </div>
+
+          <div class="data-row">
+            <span class="label">土壤质地：</span>
+            <div class="value">
+              <el-descriptions :column="3" border>
+                <el-descriptions-item label="砂土含量">75%</el-descriptions-item>
+                <el-descriptions-item label="土壤含量">50%</el-descriptions-item>
+                <el-descriptions-item label="黏土含量">30%</el-descriptions-item>
+              </el-descriptions>
+            </div>
+          </div>
+
+          <div class="data-row nutrient-table">
+            <span class="label">养分含量：</span>
+            <div class="value">
+              <el-descriptions :column="3" border>
+                <el-descriptions-item v-for="(item, index) in nutrientData" :key="index" :label="item.name">{{ item.value }}</el-descriptions-item>
+              </el-descriptions>
+            </div>
+          </div>
+
+          <div class="data-row">
+            <span class="label">重金属含量：</span>
+            <div class="value">
+              <el-descriptions :column="2" border>
+                <el-descriptions-item v-for="(item, index) in waterMetalData" :key="index" :label="item.name">{{ item.value }}</el-descriptions-item>
+              </el-descriptions>
+            </div>
+          </div>
+        </div>
+        <div class="monitor-panel-item">
+          <h3>水环境检测</h3>
+          <div class="data-row">
+            <span class="label"></span>
+            <div class="value">
+              <el-descriptions :column="2" border>
+                <el-descriptions-item label="水温">15℃%</el-descriptions-item>
+                <el-descriptions-item label="浑浊度">8NTU</el-descriptions-item>
+                <el-descriptions-item label="酸碱度">5.8</el-descriptions-item>
+                <el-descriptions-item label="盐分含量">1500us/cm</el-descriptions-item>
+              </el-descriptions>
+            </div>
+          </div>
+
+          <div class="data-row">
+            <span class="label">重金属和有毒物：</span>
+            <div class="value">
+              <el-descriptions :column="2" border>
+                <el-descriptions-item v-for="(item, index) in waterMetalData" :key="index" :label="item.name">{{ item.value }}</el-descriptions-item>
+              </el-descriptions>
+            </div>
+          </div>
+        </div>
+        <div class="monitor-panel-item">
+          <h3>大气环境检测</h3>
+          <div class="data-row">
+            <span class="label"></span>
+            <div class="value">
+              <el-descriptions :column="2" border>
+                <el-descriptions-item label="温度">15℃</el-descriptions-item>
+                <el-descriptions-item label="湿度">50%</el-descriptions-item>
+                <el-descriptions-item label="风速">1.5m/s</el-descriptions-item>
+                <el-descriptions-item label="风向">东南风</el-descriptions-item>
+                <el-descriptions-item label="光照强度">10000lx</el-descriptions-item>
+                <el-descriptions-item label="降雨量">500mm</el-descriptions-item>
+              </el-descriptions>
+            </div>
+          </div>
+        </div>
+        <div class="monitor-panel-item">
+          <h3>传感器工作情况</h3>
+          <div class="data-row">
+            <span class="label"></span>
+            <div class="value sensor-status">
+              <div class="status-item">
+                <span>土壤传感器</span>
+                <el-tag type="success">正常</el-tag>
+              </div>
+              <div class="status-item">
+                <span>水传感器</span>
+                <el-tag type="success">正常</el-tag>
+              </div>
+              <div class="status-item">
+                <span>大气传感器</span>
+                <el-tag type="danger">异常</el-tag>
+              </div>
+              <div class="status-item">
+                <span>雨量剂</span>
+                <el-tag type="success">正常</el-tag>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script setup>
+import { ref, reactive } from 'vue';
+
+const props = defineProps({
+  row: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const state = reactive({
+  visible: false,
+  currentTab: 1,
+});
+
+const nutrientData = ref([
+  { name: '全氮', value: '0.2%' },
+  { name: '有效磷', value: '20mg/kg' },
+  { name: '速效钾', value: '150mg/kg' },
+  { name: '硼元素', value: '300mg/kg' },
+  { name: '锌元素', value: '40mg/kg' },
+  { name: '铁元素', value: '10mg/kg' },
+  { name: '锰元素', value: '5mg/kg' },
+  { name: '铜元素', value: '3mg/kg' },
+]);
+
+const metalData = ref([
+  { name: '铅', value: '0.2mg/kg' },
+  { name: '铬', value: '45mg/kg' },
+  { name: '汞', value: '1.3mg/kg' },
+  { name: '镉', value: '0.3mg/kg' },
+]);
+
+const waterMetalData = ref([
+  { name: '铜', value: '0.5mg/L' },
+  { name: '锌', value: '1.5mg/L' },
+  { name: '铅', value: '0.08mg/L' },
+  { name: '镉', value: '0.005mg/L' },
+]);
+
+defineExpose({
+  show: () => {
+    state.visible = true;
+  },
+  hide: () => {
+    state.visible = false;
+  },
+});
+</script>
+<style lang="scss" scoped>
+.monitor {
+  padding: 20px;
+  margin: 0 auto;
+
+  &-tabs {
+    margin-bottom: 20px;
+    text-align: center;
+  }
+
+  &-panel {
+    &-item {
+      margin-bottom: 20px;
+
+      h3 {
+        margin-bottom: 16px;
+        font-size: 14px;
+        color: var(--el-text-color-primary);
+      }
+
+      .suggestion {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-top: 16px;
+        padding: 10px;
+        background-color: var(--el-color-info-light-9);
+        border-radius: 4px;
+        color: var(--el-text-color-secondary);
+
+        p {
+          padding-left: 20px;
+        }
+      }
+
+      :deep(.el-descriptions__label) {
+        width: 150px;
+      }
+
+      :deep(.el-descriptions__content) {
+        padding: 12px;
+      }
+
+      .data-row {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 16px;
+      }
+
+      .label {
+        min-width: 120px;
+        color: var(--el-text-color-secondary);
+        text-align: right;
+        margin-right: 16px;
+      }
+
+      .value {
+        flex: 1;
+      }
+
+      .sensor-status {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      .status-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 10px;
+      }
+    }
+  }
+}
+</style>

sub-government-affairs-service/src/views/trace/search/index.vue

@@ -35,6 +35,7 @@ import { useRouter } from 'vue-router';
 import { useApp } from '@/hooks';
 import { isEmpty, getAssetsFile } from '@/utils';
 
+const { VITE_APP_NAME } = import.meta.env;
 const router = useRouter();
 const app = useApp();
 const code = ref('');
@@ -44,7 +45,7 @@ const onSearch = () => {
     app.$message.error('请输入溯源码进行查询！');
     return;
   }
-  router.push({ path: '/trace-info', query: { code: code.value } });
+  router.push({ path: `/${VITE_APP_NAME}/trace-info`, query: { code: code.value } });
 };
 </script>
 <style lang="scss" scoped>

sub-government-affairs-service/src/views/trace/search/info.vue

@@ -105,6 +105,7 @@ import { CRUD_VIEW_OPTIONS } from '@/config';
 import { isEmpty } from '@/utils';
 import { GetTraceDetail } from '@/apis/coding';
 
+const { VITE_APP_NAME } = import.meta.env;
 const router = useRouter();
 const route = useRoute();
 const app = useApp();
@@ -209,7 +210,7 @@ const onSelect = (index) => {
 };
 
 const onBack = () => {
-  router.push({ path: '/trace-search' });
+  router.push({ path: `/${VITE_APP_NAME}/trace-search` });
 };
 </script>
 <style lang="scss" scoped>