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);