diff --git a/src/views/deviceSetting/components/add.vue b/src/views/deviceSetting/components/add.vue index b2f8d7d..90b6d51 100644 --- a/src/views/deviceSetting/components/add.vue +++ b/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/*" >
diff --git a/src/views/deviceSetting/components/deviceAttr.vue b/src/views/deviceSetting/components/deviceAttr.vue index 3b604ca..3385b72 100644 --- a/src/views/deviceSetting/components/deviceAttr.vue +++ b/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 事件以限制移动范围 diff --git a/src/views/deviceSetting/components/deviceSelect.vue b/src/views/deviceSetting/components/deviceSelect.vue index 15c3150..7bf0abf 100644 --- a/src/views/deviceSetting/components/deviceSelect.vue +++ b/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(); }); } diff --git a/src/views/deviceSetting/components/edit.vue b/src/views/deviceSetting/components/edit.vue new file mode 100644 index 0000000..848b73d --- /dev/null +++ b/src/views/deviceSetting/components/edit.vue @@ -0,0 +1,191 @@ + + + + + diff --git a/src/views/deviceSetting/hooks/usePointObject.ts b/src/views/deviceSetting/hooks/usePointObject.ts index 30b610b..e7baea6 100644 --- a/src/views/deviceSetting/hooks/usePointObject.ts +++ b/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, diff --git a/src/views/deviceSetting/index.vue b/src/views/deviceSetting/index.vue index aa4ee13..9e0d509 100644 --- a/src/views/deviceSetting/index.vue +++ b/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);
+