From ffb8a83d8d5bbccda3252bef2769961c2d53dae1 Mon Sep 17 00:00:00 2001
From: 86191 <2160251938@qq.com>
Date: Sun, 22 Sep 2024 22:26:49 +0800
Subject: [PATCH] =?UTF-8?q?feat():=E7=A9=BF=E6=A2=AD=E6=A1=86=E4=BC=98?=
 =?UTF-8?q?=E5=85=88=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/fence/group.js          |   9 +++
 src/views/fence/fence/index.vue | 100 ++++++++++++++++++++++++--------
 2 files changed, 85 insertions(+), 24 deletions(-)
 create mode 100644 src/api/fence/group.js

diff --git a/src/api/fence/group.js b/src/api/fence/group.js
new file mode 100644
index 0000000..486c1e5
--- /dev/null
+++ b/src/api/fence/group.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+//查询围栏组
+export function selectGroupList() {
+  return request({
+    url: '/fence/tbGroup/selectTbGroupList',
+    method: 'get'
+  })
+}
diff --git a/src/views/fence/fence/index.vue b/src/views/fence/fence/index.vue
index 5f8d42a..555693b 100644
--- a/src/views/fence/fence/index.vue
+++ b/src/views/fence/fence/index.vue
@@ -69,7 +69,6 @@
 
     <el-table v-loading="loading" :data="fenceList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="围栏编号" align="center" prop="fenceId" />
       <el-table-column label="围栏名称" align="center" prop="fenceName" />
       <el-table-column label="围栏类型" align="center" prop="fenceType" :formatter="fenceTypeFormatter" />
       <el-table-column label="围栏状态" align="center" prop="fenceFlag" :formatter="fenceFlagFormatter" />
@@ -103,27 +102,45 @@
     />
 
     <!-- 添加或修改电子围栏对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+    <el-dialog :title="title" :visible.sync="open" width="750px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
         <el-form-item label="围栏名称" prop="fenceName">
           <el-input v-model="form.fenceName" placeholder="请输入围栏名称" />
         </el-form-item>
         <el-form-item label="围栏类型" prop="fenceType">
           <el-radio-group v-model="form.fenceType">
-            <el-radio label="1">驶入</el-radio>
-            <el-radio label="2">驶出</el-radio>
+            <el-radio :label="1">驶入</el-radio>
+            <el-radio :label="2">驶出</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="围栏状态" prop="fenceFlag">
           <el-select v-model="form.fenceFlag" placeholder="请选择围栏状态" clearable>
-            <el-option label="正常" value="1"></el-option>
-            <el-option label="停用" value="2"></el-option>
+            <el-option label="正常" :value="1"></el-option>
+            <el-option label="停用" :value="2"></el-option>
           </el-select>
         </el-form-item>
+
+
+        <el-form-item v-if="form.fencePriority != null" label="优先级回显" prop="fencePriority">
+          <el-input v-model="form.fencePriority" placeholder="请输入围栏优先级" />
+        </el-form-item>
+
+        <el-form-item label="优先级" prop="fencePriority">
+          <el-transfer
+            v-model="selectedGroups"
+            :data="transferData"
+            :titles="['围栏组', '优先级']"
+            style="margin-top: 15px;"
+          ></el-transfer>
+        </el-form-item>
+
+
+
         <el-form-item label="经纬度信息" prop="longitudeAndLatitudeInformation">
           <el-input v-model="form.longitudeAndLatitudeInformation" placeholder="请输入经纬度信息" />
-          <el-button type="primary" @click="openLocationDialog">选择经纬度</el-button>
+          <el-button type="primary" @click="openDialog">选择经纬度</el-button>
         </el-form-item>
+
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -144,6 +161,7 @@
 <script>
 import { listFence, getFence, delFence, addFence, updateFence } from "/src/api/fence/fence";
 import SelectLocation from '@/components/SelectLocation.vue'
+import { selectGroupList } from '@/api/fence/group'
 
 export default {
   name: "Fence",
@@ -152,6 +170,15 @@ export default {
   },
   data() {
     return {
+      //定义围栏组集合
+      group:[],
+      // el-transfer 的数据源
+      transferData: [],
+      // el-transfer 的当前选择值,用于存储选中的围栏组编号
+      selectedGroups: [],
+
+
+
       showLocationDialog:false,
       selectedLocation:null,
 
@@ -190,7 +217,8 @@ export default {
         fenceName:'',
         fenceType:null,// 确保类型正确，字符串或数字，取决于您实际的数据类型
         fenceFlag:null,
-        longitudeAndLatitudeInformation:''
+        fencePriority: null, // 初始化为 null
+        longitudeAndLatitudeInformation:[]
       },
       // 表单校验
       rules: {
@@ -212,8 +240,39 @@ export default {
   },
   created() {
     this.getList();
+    this.getGroupList();
   },
   methods: {
+
+    //查询围栏组集合
+    getGroupList() {
+      selectGroupList().then(response => {
+        this.group = response.data;
+        // 格式化数据
+        if (Array.isArray(response.data)) {
+          this.transferData = response.data.map((item, index) => ({
+            key: item.groupId ? item.groupId.toString() : `defaultKey${index}`, // 使用默认键值
+            label: item.groupName || `Group ${index}`
+          }));
+        } else {
+          console.error('Response data is not an array:', response.data);
+          this.transferData = [];
+        }
+
+        // 确保 selectedGroups 包含正确的数据
+        if (this.form.fencePriority) {
+          try {
+            const parsedPriority = JSON.parse(this.form.fencePriority);
+            this.selectedGroups = parsedPriority.map(Number);
+          } catch (error) {
+            console.error('解析 fencePriority 错误:', error);
+          }
+        }
+      }).catch(error => {
+        console.error('Error fetching group list:', error);
+        this.transferData = [];
+      });
+    },
     /** 查询电子围栏列表 */
     getList() {
       this.loading = true;
@@ -278,14 +337,14 @@ export default {
         this.title = "修改电子围栏";
       });
     },
-    /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
+          // 将 selectedGroups 转换为 JSON 格式并赋值给 form.fencePriority
+          this.form.fencePriority = JSON.stringify(this.selectedGroups);
+
           if (this.form.fenceId != null) {
             updateFence(this.form).then(response => {
-              // 提交表单业务逻辑
-              console.log(this.form);
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
@@ -300,6 +359,8 @@ export default {
         }
       });
     },
+
+
     /** 删除按钮操作 */
     handleDelete(row) {
       const fenceIds = row.fenceId || this.ids;
@@ -326,7 +387,7 @@ export default {
 
 
 
-    openLocationDialog() {
+    openDialog() {
       this.showLocationDialog = true;
       // 设置过几秒后关闭弹框
       setTimeout(() => {
@@ -341,16 +402,7 @@ export default {
     },
 
 
-
-    // openLocationDialog() {
-    //   this.openLocationDialogVisible = true;
-    // },
-    // handleLocationSelected(location) {
-    //   this.form.longitudeAndLatitudeInformation = JSON.stringify(location);// 将选中的经纬度信息保存至表单字段
-    //   this.openLocationDialogVisible = false;// 关闭选择经纬度对话框
-    // },
-
-
+  },
 }
-};
+
 </script>