feat:阀值信息设置

sub-government-affairs-service/src/router/index.js

@@ -3,7 +3,7 @@
  * @Author: zenghua.wang
  * @Date: 2023-06-20 11:48:41
  * @LastEditors: zenghua.wang
- * @LastEditTime: 2025-03-11 16:51:49
+ * @LastEditTime: 2025-03-12 11:10:12
  */
 import { createRouter, createWebHistory } from 'vue-router';
 import Layout from '@/layouts/index.vue';
@@ -43,10 +43,10 @@ export const constantRoutes = [
     ],
   },
   ...resourceRouter,
-  ...traceRouter,
   ...productOperateMainRoutes,
   ...inputSuppliesRoutes,
   ...plantingAndBreedingRouter,
+  ...traceRouter,
 ];
 
 /**

sub-government-affairs-service/src/router/modules/plantingAndBreeding.js

@@ -5,7 +5,7 @@ export default [
     path: '/sub-government-affairs-service/plantingAndBreeding',
     name: 'plantingAndBreeding',
     component: Layout,
-    redirect: '/sub-government-affairs-service/breeding-base-information',
+    redirect: '/sub-government-affairs-service/environment-monitor',
     meta: { title: '种养植综合管理', icon: 'Document' },
     children: [
       {
@@ -14,11 +14,24 @@ export default [
         component: () => import('@/views/plantingAndBreeding/environment/index.vue'),
         meta: { title: '环境监测信息', icon: 'Document' },
       },
+      {
+        path: '/sub-government-affairs-service/threshold-value-setting',
+        name: 'threshold-value-setting',
+        component: () => import('@/views/plantingAndBreeding/threshold/index.vue'),
+        hidden: true,
+        meta: { title: '阀值设置', icon: 'Document' },
+      },
+      {
+        path: '/sub-government-affairs-service/pest-monitor',
+        name: 'pest-monitor',
+        component: () => import('@/views/plantingAndBreeding/pest/index.vue'),
+        meta: { title: '病虫害监测信息', icon: 'Document' },
+      },
       // {
       //   path: '/sub-government-affairs-service/breeding-base-information',
       //   name: 'breeding-base-information',
       //   component: () => import('@/views/plantingAndBreeding/base/index.vue'),
-      //   meta: { title: '种养殖基地信息', icon: 'Document' },
+      //   meta: { title: '种养殖基地', icon: 'Document' },
       // },
     ],
   },

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

@@ -0,0 +1,6 @@
+<template>
+  <div class="custom-page">种养殖基地信息</div>
+</template>
+<script setup>
+import { ref, computed, watch } from 'vue';
+</script>

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

@@ -0,0 +1,6 @@
+<template>
+  <div class="custom-page">病虫害监测</div>
+</template>
+<script setup>
+import { ref, computed, watch } from 'vue';
+</script>

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

@@ -0,0 +1,400 @@
+<template>
+  <div class="custom-page">
+    <avue-crud
+      ref="crudRef"
+      v-model="state.form"
+      v-model:search="state.query"
+      v-model:page="state.pageData"
+      :table-loading="state.loading"
+      :data="state.data"
+      :option="state.options"
+      @refresh-change="refreshChange"
+      @search-reset="searchChange"
+      @search-change="searchChange"
+      @selection-change="selectionChange"
+      @current-change="currentChange"
+      @size-change="sizeChange"
+      @row-save="rowSave"
+      @row-update="rowUpdate"
+      @row-del="rowDel"
+    >
+      <template #menu-left>
+        <el-button type="danger" icon="delete" @click="onDel(state.selection)">批量删除</el-button>
+      </template>
+
+      <template #condition="{ row }">
+        <div v-for="item in row.condition" :key="item.thresholdName">
+          <span>
+            {{ item.condition1 }} {{ item.value1 }}
+            <template v-if="item.condition2"> & {{ item.condition2 }} {{ item.value2 }}</template>
+          </span>
+          <span>：{{ item.tip }}</span>
+        </div>
+      </template>
+
+      <template #condition-form="{ column, value }">
+        <el-table :data="value" style="width: 100%" border>
+          <el-table-column prop="thresholdName" label="阈值设置" align="center"></el-table-column>
+          <el-table-column label="条件" width="120" align="center">
+            <template #default="scope">
+              {{ scope.row.condition1 }}
+              <span v-if="scope.row.condition2"> & {{ scope.row.condition2 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="数值" width="120" align="center">
+            <template #default="scope">
+              {{ scope.row.value1 }}
+              <span v-if="scope.row.value2"> & {{ scope.row.value2 }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="warning" label="告警" align="center"></el-table-column>
+          <el-table-column prop="tip" label="提示" align="center"></el-table-column>
+          <el-table-column label="操作" width="130" align="center">
+            <template #default="scope">
+              <el-button type="primary" icon="edit" text></el-button>
+              <el-button type="danger" icon="delete" text></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+
+      <template #status="{ row }">
+        <el-tag v-if="row.status == 1" type="success" size="small">启用</el-tag>
+        <el-tag v-if="row.status == 0" type="danger" size="small">禁用</el-tag>
+      </template>
+
+      <template #menu="scope">
+        <custom-table-operate :actions="state.options.actions" :data="scope" />
+      </template>
+    </avue-crud>
+  </div>
+</template>
+<script setup>
+import { reactive, ref } from 'vue';
+import { useApp } from '@/hooks';
+import { CRUD_OPTIONS } from '@/config';
+import { mockData, sleep } from '@/utils';
+
+const app = useApp();
+const crudRef = ref(null);
+const state = reactive({
+  loading: false,
+  query: {
+    current: 1,
+    size: 10,
+  },
+  form: {},
+  selection: [],
+  options: {
+    ...CRUD_OPTIONS,
+    addBtnText: '告警阀值',
+    column: [
+      {
+        label: '名称',
+        prop: 'name',
+        search: true,
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '数据来源',
+        prop: 'from',
+        hide: true,
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '条件',
+        prop: 'condition',
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+        span: 24,
+      },
+      {
+        label: '状态',
+        prop: 'status',
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+        addDisplay: false,
+        editDisplay: false,
+      },
+      {
+        label: '排序',
+        prop: 'sort',
+        type: 'number',
+      },
+      // {
+      //   label: '提示信息',
+      //   prop: 'tips',
+      //   type: 'textarea',
+      //   span: 24,
+      //   rows: 4,
+      //   overHidden: true,
+      //   width: 300,
+      // },
+    ],
+    actions: [
+      {
+        name: '查看',
+        icon: 'view',
+        event: ({ row }) => rowView(row),
+      },
+      {
+        name: '编辑',
+        icon: 'edit',
+        event: ({ row }) => rowEdit(row),
+      },
+      {
+        type: 'success',
+        name: ({ row }) => {
+          return row.status === 1 ? '禁用' : '启用';
+        },
+        icon: ({ row }) => {
+          return row.status === 1 ? 'turnOff' : 'open';
+        },
+        event: ({ row }) => rowStatus(row),
+      },
+      {
+        type: 'danger',
+        name: '删除',
+        icon: 'delete',
+        event: ({ row }) => rowDel(row),
+      },
+    ],
+  },
+  pageData: {
+    total: 0,
+    currentPage: 1,
+    pageSize: 10,
+  },
+  data: [],
+  currentRow: {},
+});
+
+// 加载
+const loadData = async () => {
+  // state.loading = true;
+  // GetEntityList(state.query)
+  //   .then((res) => {
+  //     if (res.code === 200) {
+  //       const { current, size, total, records } = res.data;
+  //       state.data = records;
+  //       state.pageData = {
+  //         currentPage: current || 1,
+  //         pageSize: size || 10,
+  //         total: total,
+  //       };
+  //     }
+  //   })
+  //   .catch((err) => {
+  //     app.$message.error(err.msg);
+  //     state.data = [];
+  //   })
+  //   .finally(() => {
+  //     state.loading = false;
+  //   });
+
+  state.loading = true;
+  await sleep(500);
+  state.data = [
+    {
+      name: 'PH值',
+      condition: [
+        {
+          thresholdName: '阈值一',
+          condition1: '大于',
+          value1: 7,
+          condition2: '',
+          value2: '',
+          warning: '正常',
+          tip: '土壤为碱性',
+        },
+        {
+          thresholdName: '阈值二',
+          condition1: '小于',
+          value1: 7,
+          condition2: '',
+          value2: '',
+          warning: '正常',
+          tip: '土壤为酸性',
+        },
+      ],
+      sort: 1,
+      status: 1,
+    },
+    {
+      name: '气温',
+      condition: [
+        {
+          thresholdName: '阈值一',
+          condition1: '大于',
+          value1: 25,
+          condition2: '',
+          value2: '',
+          warning: '炎热',
+          tip: '不建议进行劳作',
+        },
+        {
+          thresholdName: '阈值二',
+          condition1: '大于',
+          value1: 20,
+          condition2: '小于',
+          value2: 25,
+          warning: '干燥',
+          tip: '可适量进行劳作',
+        },
+        {
+          thresholdName: '阈值三',
+          condition1: '大于',
+          value1: 15,
+          condition2: '小于',
+          value2: 20,
+          warning: '正常',
+          tip: '可正常进行劳作',
+        },
+        {
+          thresholdName: '阈值四',
+          condition1: '大于',
+          value1: 10,
+          condition2: '小于',
+          value2: 15,
+          warning: '凉爽',
+          tip: '可适量进行劳作',
+        },
+        {
+          thresholdName: '阈值五',
+          condition1: '',
+          value1: '',
+          condition2: '小于',
+          value2: 10,
+          warning: '寒冷',
+          tip: '尽量避免劳作',
+        },
+      ],
+      sort: 2,
+      status: 1,
+    },
+  ];
+  state.loading = false;
+};
+
+loadData();
+
+// 页数
+const currentChange = (current) => {
+  state.query.current = current;
+  loadData();
+};
+
+// 条数
+const sizeChange = (size) => {
+  state.query.size = size;
+  loadData();
+};
+
+// 搜索
+const searchChange = (params, done) => {
+  if (done) done();
+  state.query = params;
+  state.query.current = 1;
+  loadData();
+};
+
+// 刷新
+const refreshChange = () => {
+  loadData();
+  app.$message.success('刷新成功');
+};
+
+// 选择
+const selectionChange = (rows) => {
+  state.selection = rows;
+};
+
+// 查看
+const rowView = (row) => {
+  // state.currentRow = row;
+  crudRef.value.rowView(row);
+};
+
+// 启用、禁用
+const rowStatus = (row) => {
+  console.info('操作状态');
+};
+
+// 新增
+const rowSave = (row, done, loading) => {
+  // AddEntity(row)
+  //   .then((res) => {
+  //     if (res.code === 200) {
+  //       app.$message.success('添加成功！');
+  //       done();
+  //       loadData();
+  //     }
+  //   })
+  //   .catch((err) => {
+  //     app.$message.error(err.msg);
+  //   })
+  //   .finally(() => {
+  //     loading();
+  //   });
+};
+
+// 编辑
+const rowEdit = (row) => {
+  crudRef.value.rowEdit(row);
+};
+const rowUpdate = (row, index, done, loading) => {
+  // UpdateEntity(row)
+  //   .then((res) => {
+  //     if (res.code === 200) {
+  //       app.$message.success('更新成功！');
+  //       done();
+  //       loadData();
+  //     }
+  //   })
+  //   .catch((err) => {
+  //     app.$message.error(err.msg);
+  //   })
+  //   .finally(() => {
+  //     loading();
+  //   });
+};
+
+// 删除
+const rowDel = (row, index, done) => {
+  // if (isEmpty(row)) return;
+  // app
+  //   .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
+  //     confirmButtonText: '确定',
+  //     cancelButtonText: '取消',
+  //     type: 'warning',
+  //   })
+  //   .then(() => {
+  //     DeleteEntity({ id: row.id })
+  //       .then((res) => {
+  //         if (res.code === 200) {
+  //           app.$message.success('删除成功！');
+  //           done();
+  //           loadData();
+  //         }
+  //       })
+  //       .catch((err) => {
+  //         app.$message.error(err.msg);
+  //       });
+  //   })
+  //   .catch(() => {});
+};
+</script>

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

@@ -0,0 +1,444 @@
+<template>
+  <div class="custom-page">
+    <avue-crud
+      ref="crudRef"
+      v-model="state.form"
+      v-model:search="state.query"
+      v-model:page="state.pageData"
+      :table-loading="state.loading"
+      :data="state.data"
+      :option="state.options"
+      @refresh-change="refreshChange"
+      @search-reset="searchChange"
+      @search-change="searchChange"
+      @selection-change="selectionChange"
+      @current-change="currentChange"
+      @size-change="sizeChange"
+      @row-save="rowSave"
+      @row-update="rowUpdate"
+      @row-del="rowDel"
+    >
+      <template #menu-left>
+        <el-button type="primary" icon="plus" @click="rowAdd">告警阀值</el-button>
+        <el-button type="danger" icon="delete" @click="onDel(state.selection)">批量删除</el-button>
+      </template>
+
+      <template #condition="{ row }">
+        <div v-for="item in row.condition" :key="item.thresholdName" style="margin-bottom: 5px; text-align: left">
+          {{ item.min }} ~ {{ item.max }}：<el-tag type="primary">{{ item.warning }}</el-tag> {{ item.tip }}
+        </div>
+      </template>
+
+      <template #condition-form="{ column, value }">
+        <el-button type="primary" style="margin-bottom: 16px" @click="addThreshold(value)">新增</el-button>
+        <el-table :data="value" style="width: 100%" border>
+          <el-table-column prop="thresholdName" label="阈值设置" align="center">
+            <template #default="scope">
+              <el-input v-model="scope.row.thresholdName" :disabled="scope.row.disabled" />
+            </template>
+          </el-table-column>
+          <el-table-column label="最小值" width="120" align="center">
+            <template #default="scope">
+              <el-input v-model="scope.row.min" :disabled="scope.row.disabled" />
+            </template>
+          </el-table-column>
+          <el-table-column label="最大值" width="120" align="center">
+            <template #default="scope">
+              <el-input v-model="scope.row.max" :disabled="scope.row.disabled" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="warning" label="告警" align="center">
+            <template #default="scope">
+              <el-input v-model="scope.row.warning" :disabled="scope.row.disabled" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="tip" label="提示语" align="center">
+            <template #default="scope">
+              <el-input v-model="scope.row.tip" type="textarea" rows="2" :disabled="scope.row.disabled" />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="130" align="center">
+            <template #default="scope">
+              <el-button type="primary" icon="edit" text @click="editThreshold(scope.row)"></el-button>
+              <el-button type="danger" icon="delete" text @click="delThreshold(value, scope.row, scope.$index)"></el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+
+      <template #status="{ row }">
+        <el-tag v-if="row.status == 1" type="success" size="small">启用</el-tag>
+        <el-tag v-if="row.status == 0" type="danger" size="small">禁用</el-tag>
+      </template>
+
+      <template #menu="scope">
+        <custom-table-operate :actions="state.options.actions" :data="scope" />
+      </template>
+    </avue-crud>
+  </div>
+</template>
+<script setup>
+import { reactive, ref } from 'vue';
+import { useApp } from '@/hooks';
+import { CRUD_OPTIONS } from '@/config';
+import { isEmpty, sleep } from '@/utils';
+
+const app = useApp();
+const crudRef = ref(null);
+const state = reactive({
+  loading: false,
+  query: {
+    current: 1,
+    size: 10,
+  },
+  form: {},
+  selection: [],
+  options: {
+    ...CRUD_OPTIONS,
+    addBtnText: '告警阀值',
+    addBtn: false,
+    column: [
+      {
+        label: '名称',
+        prop: 'name',
+        search: true,
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '数据来源',
+        prop: 'from',
+        type: 'select',
+        hide: true,
+        dicData: [
+          {
+            label: '土壤传感器',
+            value: '土壤传感器',
+          },
+          {
+            label: '水传感器',
+            value: '水传感器',
+          },
+          {
+            label: '大气传感器',
+            value: '大气传感器',
+          },
+        ],
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '条件',
+        prop: 'condition',
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+        span: 24,
+      },
+      {
+        label: '状态',
+        prop: 'status',
+        type: 'select',
+        search: true,
+        dicData: [
+          {
+            label: '启用',
+            value: 1,
+          },
+          {
+            label: '禁用',
+            value: 0,
+          },
+        ],
+        rules: {
+          required: true,
+          message: '请输入',
+          trigger: 'blur',
+        },
+      },
+      {
+        label: '排序',
+        prop: 'sort',
+        type: 'number',
+      },
+      // {
+      //   label: '提示信息',
+      //   prop: 'tips',
+      //   type: 'textarea',
+      //   span: 24,
+      //   rows: 4,
+      //   overHidden: true,
+      //   width: 300,
+      // },
+    ],
+    actions: [
+      {
+        type: 'success',
+        name: ({ row }) => {
+          return row.status === 1 ? '禁用' : '启用';
+        },
+        icon: ({ row }) => {
+          return row.status === 1 ? 'turnOff' : 'open';
+        },
+        event: ({ row }) => rowStatus(row),
+      },
+      {
+        name: '编辑',
+        icon: 'edit',
+        event: ({ row }) => rowEdit(row),
+      },
+      {
+        type: 'danger',
+        name: '删除',
+        icon: 'delete',
+        event: ({ row }) => rowDel(row),
+      },
+    ],
+  },
+  pageData: {
+    total: 0,
+    currentPage: 1,
+    pageSize: 10,
+  },
+  data: [],
+  currentRow: {},
+});
+
+// 加载
+const loadData = async () => {
+  // state.loading = true;
+  // GetEntityList(state.query)
+  //   .then((res) => {
+  //     if (res.code === 200) {
+  //       const { current, size, total, records } = res.data;
+  //       state.data = records;
+  //       state.pageData = {
+  //         currentPage: current || 1,
+  //         pageSize: size || 10,
+  //         total: total,
+  //       };
+  //     }
+  //   })
+  //   .catch((err) => {
+  //     app.$message.error(err.msg);
+  //     state.data = [];
+  //   })
+  //   .finally(() => {
+  //     state.loading = false;
+  //   });
+
+  state.loading = true;
+  await sleep(500);
+  state.data = [
+    {
+      name: 'PH值',
+      condition: [
+        {
+          thresholdName: '阈值一',
+          min: 7,
+          max: 14,
+          warning: '正常',
+          tip: '土壤为碱性',
+        },
+        {
+          thresholdName: '阈值二',
+          min: 0,
+          max: 7,
+          warning: '正常',
+          tip: '土壤为酸性',
+        },
+      ],
+      sort: 1,
+      status: 1,
+    },
+    {
+      name: '气温',
+      condition: [
+        {
+          thresholdName: '阈值一',
+          min: 25,
+          max: null,
+          warning: '炎热',
+          tip: '不建议进行劳作',
+        },
+        {
+          thresholdName: '阈值二',
+          min: 20,
+          max: 25,
+          warning: '干燥',
+          tip: '可适量进行劳作',
+        },
+        {
+          thresholdName: '阈值三',
+          min: 15,
+          max: 20,
+          warning: '正常',
+          tip: '可正常进行劳作',
+        },
+        {
+          thresholdName: '阈值四',
+          min: 10,
+          max: 15,
+          warning: '凉爽',
+          tip: '可适量进行劳作',
+        },
+        {
+          thresholdName: '阈值五',
+          min: null,
+          max: 10,
+          warning: '寒冷',
+          tip: '尽量避免劳作',
+        },
+      ],
+      sort: 2,
+      status: 1,
+    },
+  ];
+  state.loading = false;
+};
+
+loadData();
+
+// 页数
+const currentChange = (current) => {
+  state.query.current = current;
+  loadData();
+};
+
+// 条数
+const sizeChange = (size) => {
+  state.query.size = size;
+  loadData();
+};
+
+// 搜索
+const searchChange = (params, done) => {
+  if (done) done();
+  state.query = params;
+  state.query.current = 1;
+  loadData();
+};
+
+// 刷新
+const refreshChange = () => {
+  loadData();
+  app.$message.success('刷新成功');
+};
+
+// 选择
+const selectionChange = (rows) => {
+  state.selection = rows;
+};
+
+// 启用、禁用
+const rowStatus = (row) => {
+  console.info('操作状态');
+};
+
+// 新增
+const rowAdd = () => {
+  state.form = {
+    condition: [],
+  };
+  crudRef.value.rowAdd(state.form);
+};
+const rowSave = (row, done, loading) => {
+  // AddEntity(row)
+  //   .then((res) => {
+  //     if (res.code === 200) {
+  //       app.$message.success('添加成功！');
+  //       done();
+  //       loadData();
+  //     }
+  //   })
+  //   .catch((err) => {
+  //     app.$message.error(err.msg);
+  //   })
+  //   .finally(() => {
+  //     loading();
+  //   });
+};
+
+// 编辑
+const rowEdit = (row) => {
+  if (!isEmpty(row.condition)) {
+    row.condition.forEach((item) => {
+      item.disabled = true;
+    });
+  }
+  crudRef.value.rowEdit(row);
+};
+const rowUpdate = (row, index, done, loading) => {
+  // UpdateEntity(row)
+  //   .then((res) => {
+  //     if (res.code === 200) {
+  //       app.$message.success('更新成功！');
+  //       done();
+  //       loadData();
+  //     }
+  //   })
+  //   .catch((err) => {
+  //     app.$message.error(err.msg);
+  //   })
+  //   .finally(() => {
+  //     loading();
+  //   });
+};
+
+// 删除
+const onDel = (rows = []) => {
+  if (isEmpty(rows)) return;
+  const ids = rows.map((item) => item.id);
+  app
+    .$confirm(`删除后信息将不可查看，确认要删除吗？`, '确定删除', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    .then(() => {
+      // DeleteEntity({ ids: ids.join(',') })
+      //   .then((res) => {
+      //     if (res.code === 200) {
+      //       app.$message.success('删除成功！');
+      //       loadData();
+      //     }
+      //   })
+      //   .catch((err) => {
+      //     app.$message.error(err.msg);
+      //   });
+    })
+    .catch(() => {});
+};
+
+const rowDel = (row, index, done) => {
+  onDel([row]);
+};
+
+// 条件
+const addThreshold = (list) => {
+  list.push({
+    thresholdName: '',
+    min: '',
+    max: '',
+    warning: '',
+    tip: '',
+    disabled: false,
+  });
+};
+
+const editThreshold = (row) => {
+  row.disabled = false;
+};
+
+const delThreshold = (list, row, index) => {
+  list.splice(index, 1);
+};
+</script>