feat: 完善设备布点剩余部分接口联调

src/views/deviceSetting/components/add.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-08-07 14:47:44
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-08-14 16:12:34
+ * @LastEditTime: 2024-08-16 14:09:05
  * @FilePath: \General-AI-Platform-Web-Client\src\views\deviceSetting\components\add.vue
  * @Description: 新建位置
 -->
@@ -43,7 +43,7 @@ const handleFileChange = (file: any) => {
     imagePreview.value = e.target?.result as string;
   };
   reader.readAsDataURL(file.raw);
-  console.log(file, "handleFileChange");
+  console.log(file, "handleFileChange", fileList.value);
   formData.value = {
     ...formData.value,
     picture: file.raw
@@ -148,7 +148,7 @@ defineExpose({
               :on-remove="removeFile"
               :auto-upload="false"
               :file-list="fileList"
-              :limit="1"
+              :show-file-list="false"
               accept="image/*"
             >
               <div>

src/views/deviceSetting/components/deviceAttr.vue

@@ -225,7 +225,7 @@ async function editDeviceObject(callback) {
   });
   if (isSuccessApi(resp)) {
     console.log("编辑完成");
-    callback(resp);
+    callback && callback(resp);
   }
 }
 const selectCancel = e => {
@@ -239,7 +239,8 @@ const init = () => {
   event.on("selectOne", getObjectAttr);
   canvasEditor.canvas.on("object:deleteObject", deleteDeviceObject);
   canvasEditor.canvas.on("mouse:up", () => {
-    editDeviceObject();
+    const activeObject = canvasEditor.canvas.getActiveObject();
+    activeObject && activeObject.get("deviceInfo") && editDeviceObject();
   });
   canvasEditor.canvas.on("object:modified", getObjectAttr);
   // 监听 object:moving 事件以限制移动范围

src/views/deviceSetting/components/deviceSelect.vue

@@ -106,19 +106,15 @@ const dragItem = (event, deviceItem) => {
 
     function (objects) {
       // objects 包含从JSON还原的对象，这里我们期望是一个Group对象
+      // 判断是否在边界内
       const item = objects[0];
-      // if (!option) {
-      //   groupText.center();
-      // }
-
-      // 添加Group对象到Canvas中
-      // var canvas = new fabric.Canvas('canvas-id');
-      // canvas.add(group);
       canvasEditor.dragAddItem(event, item);
       console.log(event, item, "dragItem");
-      // fetchDetail(deviceItem);
-      // 更新Canvas以确保更改生效
-      // canvas.renderAll();
+      fetchDetail({
+        ...deviceItem,
+        x_ordinate: item.left,
+        y_ordinate: item.top
+      });
     }
   );
 };
@@ -193,8 +189,8 @@ function renderDeviceToCanvas(record) {
       }
     });
     // objects 包含从JSON还原的对象，这里我们期望是一个Group对象
-    const item = enlivenedObjects[0];
-    canvasEditor.canvas.setActiveObject(item);
+    // const item = enlivenedObjects[0];
+    // canvasEditor.canvas.setActiveObject(item);
     canvasEditor.canvas.requestRenderAll();
   });
 }

src/views/deviceSetting/components/edit.vue

@@ -0,0 +1,191 @@
+<!--
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-08-16 14:28:49
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-08-16 14:48:42
+ * @FilePath: \General-AI-Platform-Web-Client\src\views\deviceSetting\components\edit.vue
+ * @Description: 新建位置
+-->
+<script setup lang="ts">
+// import type { FormInstance } from "element-plus";
+import historyAlarm from "@/assets/history_alarm.png";
+import { UploadFilled } from "@element-plus/icons-vue";
+import { message } from "@/utils/message";
+import { editWorkshopsApi } from "@/api/workshops";
+import { isSuccessApi } from "@/utils/forApi";
+
+defineOptions({
+  name: "DeviceSettingEdit"
+});
+
+const emit = defineEmits(["finishEdit"]);
+const formData = ref({
+  id: "",
+  name: "",
+  picture: null
+});
+const formRef = ref(null);
+const uploadRef = ref(null);
+const imagePreview = ref<string | null>(null); // 预览图像的 URL
+const dialogVisible = ref<boolean>(false);
+const fileList = ref([]);
+const rules = {
+  name: [{ required: true, message: "请输入位置名称", trigger: "blur" }],
+  picture: [{ required: true, message: "请上传图片文件", trigger: "change" }]
+};
+const openDialog = record => {
+  formData.value = {
+    id: record.id,
+    name: record.name,
+    picture: record.picture
+  };
+  imagePreview.value = record.picture;
+  dialogVisible.value = true;
+};
+
+const handleFileChange = (file: any) => {
+  // 使用 FileReader 读取文件内容并生成预览
+  const reader = new FileReader();
+  reader.onload = e => {
+    imagePreview.value = e.target?.result as string;
+  };
+  reader.readAsDataURL(file.raw);
+  console.log(file, "handleFileChange", fileList.value);
+  formData.value = {
+    ...formData.value,
+    picture: file.raw
+  };
+};
+// 手动触发上传
+const removeFile = () => {
+  imagePreview.value = null;
+  formData.value = {
+    ...formData.value,
+    picture: null
+  };
+};
+
+const beforeUpload = (file: File) => {
+  console.log("beforeUpload_file", file);
+  const isJPG = file.type === "image/jpeg" || file.type === "image/png";
+  const isLt500K = file.size / 1024 / 1024 < 20;
+  if (!isJPG) {
+    ElMessage.error("上传图片只能是 JPG/PNG 格式!");
+  }
+  if (!isLt500K) {
+    ElMessage.error("上传图片大小不能超过 20MB!");
+  }
+  return isJPG && isLt500K;
+};
+
+async function fetchEditPoint() {
+  const formParams = new FormData();
+  formParams.append("id", formData.value.id);
+  formParams.append("name", formData.value.name);
+  formParams.append("picture", formData.value.picture);
+  const resp = await editWorkshopsApi(formParams);
+  console.log(resp, "fetchAddPoint_resp");
+  if (isSuccessApi(resp)) {
+    message(resp.msg || "编辑成功", { type: "success" });
+    emit("finishEdit", resp.data);
+    dialogVisible.value = false;
+  } else {
+    message(resp.msg || "编辑失败", { type: "error" });
+  }
+}
+
+const submitForm = () => {
+  formRef.value.validate((valid: boolean) => {
+    if (valid) {
+      fetchEditPoint();
+    } else {
+      message("验证失败", { type: "error" });
+      return false;
+    }
+  });
+};
+
+defineExpose({
+  openDialog
+});
+</script>
+
+<template>
+  <div>
+    <el-dialog
+      top="5vh"
+      v-model="dialogVisible"
+      title="编辑布点位置"
+      append-to-body
+      width="44.445vw"
+      :style="{
+        borderRadius: '6px'
+      }"
+    >
+      <template #header="{ titleId, titleClass }">
+        <div class="flex items-center my-header">
+          <img :src="historyAlarm" class="w-[26px] h-[26px]" />
+          <h4 :id="titleId" class="pl-[10px]" :class="titleClass">
+            编辑布点位置
+          </h4>
+        </div>
+      </template>
+      <div class="deviceSettingAdd_modal_box">
+        <el-form
+          ref="formRef"
+          :rules="rules"
+          :inline="true"
+          :model="formData"
+          class="demo-form-inline"
+          label-position="top"
+        >
+          <el-form-item label="位置名称" class="w-full" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入" clearable />
+          </el-form-item>
+          <el-form-item
+            label="上传图片(请上传png或jpeg格式图片文件，尺寸不超过4096*3112px，容量不超过20M)"
+            class="w-full"
+            prop="picture"
+          >
+            <el-upload
+              ref="uploadRef"
+              class="w-full"
+              drag
+              :on-change="handleFileChange"
+              :before-upload="beforeUpload"
+              :on-remove="removeFile"
+              :auto-upload="false"
+              :file-list="fileList"
+              :show-file-list="false"
+              accept="image/*"
+            >
+              <div>
+                <div v-if="!imagePreview">
+                  <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+                  <div class="el-upload__text">
+                    拖拽图片到这里，或点此添加 <em>点此添加</em>
+                  </div>
+                </div>
+                <el-image
+                  v-if="imagePreview"
+                  :src="imagePreview || ''"
+                  :fit="'contain'"
+                  class="w-full"
+                />
+              </div>
+            </el-upload>
+          </el-form-item>
+        </el-form>
+      </div>
+      <template v-slot:footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitForm">确认</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<style lang="scss">
+@import url("./add.scss");
+</style>

src/views/deviceSetting/hooks/usePointObject.ts

@@ -50,7 +50,8 @@ export const usePointObject = () => {
           ry: 0,
           id: "workspace",
           selectable: false,
-          hasControls: false
+          hasControls: false,
+          selection: false
         },
         {
           type: "image",
@@ -89,6 +90,7 @@ export const usePointObject = () => {
           id: "a3ab29c6-7008-49fe-abf3-edc9a47cd460",
           selectable: false,
           hasControls: false,
+          selection: false,
           evented: false,
           crossOrigin: null,
           src: picture,

src/views/deviceSetting/index.vue

@@ -2,7 +2,7 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-08-02 10:52:32
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-08-15 17:11:29
+ * @LastEditTime: 2024-08-16 15:40:58
  * @FilePath: \General-AI-Platform-Web-Client\src\views\deviceSetting\index.vue
  * @Description: 设备点位管理设置
  @ 交互说明
@@ -16,6 +16,8 @@
 // 设备设置
 import DeviceAttr from "./components/deviceAttr.vue";
 import DeviceSettingAdd from "./components/add.vue";
+import DeviceSettingEdit from "./components/edit.vue";
+
 import DeviceSelect from "./components/deviceSelect.vue";
 import { IsDelete } from "@/components/Action";
 import { usePointObject } from "./hooks/usePointObject";
@@ -77,6 +79,8 @@ const { getPointObject } = usePointObject();
 
 const pointList = ref([]);
 const deviceSettingAddRef = ref("");
+const deviceSettingEditRef = ref("");
+
 const deviceSelectRef = ref("");
 const activePointId = ref("");
 const activePoint = ref({
@@ -86,7 +90,7 @@ const deviceList = ref([]); // 所有设备列表
 const currDeviceList = ref([]); // 当前点位下设备列表
 const isDeleteVisible = ref(false);
 // 插入文件绘制图
-const refreshCanvas = () => {
+const refreshCanvas = (isLoadDevice = true) => {
   const currWorkSpace = document.getElementById("workspace");
   canvasEditor.insertSvgFile(
     getPointObject(toRaw(activePoint.value), {
@@ -94,8 +98,7 @@ const refreshCanvas = () => {
       height: currWorkSpace.clientHeight
     })
   );
-  fetchDeviceByPoint();
-
+  isLoadDevice && fetchDeviceByPoint();
   console.log("插入文件");
 };
 // 初始化fabric&编辑器
@@ -103,7 +106,10 @@ const initFabric = () => {
   const canvas = new fabric.Canvas("canvas", {
     fireRightClick: false, // 启用右键，button的数字为3
     stopContextMenu: true, // 禁止默认右键菜单
-    controlsAboveOverlay: true // 超出clipPath后仍然展示控制条
+    controlsAboveOverlay: true, // 超出clipPath后仍然展示控制条
+    selectable: false,
+    hasControls: false,
+    selection: false
   });
   // 初始化编辑器
   canvasEditor.init(canvas);
@@ -128,9 +134,6 @@ const initFabric = () => {
   canvasEditor.use(MaterialPlugin);
   event.init(canvas);
   state.showFabric = true;
-  nextTick(() => {
-    refreshCanvas();
-  });
 };
 
 /**
@@ -167,6 +170,9 @@ async function fetchPointList() {
   // ];
   activePointId.value = pointList.value[0].id;
   activePoint.value = pointList.value[0];
+  nextTick(() => {
+    refreshCanvas();
+  });
 }
 // 获取设备列表
 async function fetchDeviceList() {
@@ -200,14 +206,22 @@ function afterFinishAdd(record) {
   activePoint.value = record;
   console.log("afterFinishAdd", record);
   nextTick(() => {
-    refreshCanvas();
+    refreshCanvas(false); // 新增无需刷新获取当前点位下设备
   });
 }
 
 // 编辑点位
 function editPoint() {
-  deviceSettingAddRef.value?.openDialog();
+  deviceSettingEditRef.value?.openDialog(toRaw(activePoint.value));
 }
+
+// 完成编辑点位后
+function afterFinishEdit(record) {
+  console.log("afterFinishEdit", record);
+
+  // 手动修改点位，不额外刷新接口
+}
+
 // 开始删除点位
 function beforeDeletePoint() {
   isDeleteVisible.value = true;
@@ -278,54 +292,12 @@ async function addDevice(record) {
   }
 }
 
-// //
-// async function deleteDevice(record) {
-//   const resp = await deleteWorkshopDeviceApi({
-//     id: record.id
-//   });
-//   if (isSuccessApi(resp)) {
-//     isDeleteDeviceVisible.value = false;
-//     afterFinishDeleteDevice();
-//   }
-// }
-
-// //
-// async function updateDevice(record) {
-//   const resp = await updateWorkshopDeviceApi({
-//     id: record.id,
-
-//   });
-// }
-
-// 有点位了再初始化
-watch(
-  () => pointList.value,
-  () => {
-    console.log("pointList", pointList);
-    if (pointList.value?.length) {
-      nextTick(() => {
-        initFabric();
-      });
-    }
-  }
-);
-
-// watch(
-//   () => activePoint.value,
-//   () => {
-//     console.log("activePoint", activePoint);
-//     if (activePoint.value?.id) {
-//       nextTick(() => {
-//         refreshCanvas();
-//       });
-//     }
-//   }
-// );
-
 onMounted(() => {
+  initFabric();
   fetchPointList();
   fetchDeviceList();
 });
+
 // 发射全局事件
 provide("fabric", fabric);
 provide("event", event);
@@ -413,6 +385,10 @@ provide("canvasEditor", canvasEditor);
       </div>
     </div>
     <DeviceSettingAdd ref="deviceSettingAddRef" @finishAdd="afterFinishAdd" />
+    <DeviceSettingEdit
+      ref="deviceSettingEditRef"
+      @finishEdit="afterFinishEdit"
+    />
   </div>
 </template>