From cfa759eea15bca0516ad9bd3b35b77818e3a712a Mon Sep 17 00:00:00 2001 From: donghao Date: Tue, 20 Aug 2024 16:51:22 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=9F=E4=B8=80=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E5=92=8C=E7=BC=96=E8=BE=91=E7=9A=84=E5=9B=9E=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/modelSetting/warn_icon.png | Bin 0 -> 1625 bytes src/components/Action/index.ts | 13 +- src/components/Action/src/isAction.scss | 16 +++ src/components/Action/src/isAction.tsx | 88 ++++++++++++ src/components/Action/src/isDelete.tsx | 10 +- .../deviceSetting/components/deviceAttr.vue | 42 +++--- .../deviceSetting/components/deviceSelect.vue | 128 ++++++++++-------- src/views/deviceSetting/index.vue | 80 +++++++++-- 8 files changed, 284 insertions(+), 93 deletions(-) create mode 100644 src/assets/modelSetting/warn_icon.png create mode 100644 src/components/Action/src/isAction.scss create mode 100644 src/components/Action/src/isAction.tsx diff --git a/src/assets/modelSetting/warn_icon.png b/src/assets/modelSetting/warn_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..78a4887c5e3c2adb829cf02c4cbdb82eef082625 GIT binary patch literal 1625 zcmV-f2B!ImP)Px*6G=otRA@uhT3u4xRuuk@B+HPdi8{7t`c|@nniT|A5Qrh2KE+-^$O-~02w4Hn zQ)dXoWChqOz+FL{w@xurPbMw3tgF*XSn`!D>0TT15FRu4UY+lp?|kRSA$;S1^o`q( zI|aZ;j`R0-r8OI<`@{|bPT(L0M&$FrH)yo-#p_dRG`cIt-5S7`POV<@`3W&LK-kbS zjL~IA&-c9c>aU}L)}5R~O9QxmSKTlPue6QMvy#yjKEGXkcGX@6$ie`=9M|f$!LRcS zXT~Rhy9A7wDWnP!I}BPQ!Ww{|GYw_*#l+iQG$IQD`1iEBX8^A=4Coomho&jIv|Y?^ z?l_JR=7xZ=Ma0k3Z!xf6ZVV4}qoD;LNY2UkRwwOs1`ce)J5(8+XUuiy$2CKU{WK5; z&g{=#ODEZt0Iq*?)=b+x2Pg=C^w$%H)m+{F<5me6Jr)2l**iiY1k*nT4}4c_swhFN(9HR zPisvRd=!1l^YQZDZuYk`0o?H3`WS~&lQvWD1r!J?@VvtCz!x~s(fl->TtVyipI!FT zZ)O5;PpTIn+;|V@*^QyH!lolu6e(S)bl+Fch7>x1T<79-;0@$b!Q%cj2hIo8<#B=@7>eN z$5^Qd{StYb>Dmw!unAj%N2hsFoSe}&6I9BGLIOaV`#RotkDWS9>tg!Bkua?FyogOf zd<5U*NFJ|chlO{1>#ykF(svR7#_y{8WJEfw=Y3iBe8z{Bonb7yS&iuAB?$I+OsAILO9!dFRhF6@6sTIz?{L^TGGWCzUNC>fA_jl6oPuJ&{v zSDg#TPT}uG)CuVZYOOXdwWl!mq;d$N7isFvA|NS{PBN;D4kfu{9f5*2d{)51JY;%X z-nne5-bh3*$G)!yASua`DN9B-Prbexg%SV=BQSmsx?A0(O-DybA@{h}gc-H4+_oE6 z$`+!C0?X)q;d>{QGa`C&L%~^%iX)J033y;PuCx^*v*O-yPRSjzEWfudWO-h@%Lr%{ zvamo%ov0k9MbsiXyJ&@0&}Y_4_~_ZYv-u?1%*jKwViwf_6?jg!LMs5o?MHDl*QwRv zbJQ9`w;$30v+NmFi(fd<+@_!f!@YaY3`f!OFIUR0HaC}~<_{_Qgwai3Opk}c^&aVL z66AN%`=nq=rP}Xg0hsfCM*ERH)N2gWMU+U-)#?64mrm|U^*ml@GWzz;aIQnn1Q05S zlnc6BgvhY0C9rPqAH9*@a^#J-xr?niBZ!;!)2p{S-ka_^FQVBOgptm$ljneFnq&Sen6U@azIYf*K|12dZ)r1d({z$bH46*(n0#c zj_X@T@}~O67;Xz!94reYtQ8Ne7ylcPUf1_ZhPS0NV`~A3L!8>*&pgU)_VB^}M|4%2 zjHtkoNiVW~XVcw+N8eruKyWEg7>m6QM=QcKFBp9W1_b^j|HuczL%`TbkC)Q*o@>zF z{q6Y;bWt8H3?NpE(^?bYV6J_ X>5`^iEH?S`00000NkvXXu0mjf2T};p literal 0 HcmV?d00001 diff --git a/src/components/Action/index.ts b/src/components/Action/index.ts index b697c9c..2008d77 100644 --- a/src/components/Action/index.ts +++ b/src/components/Action/index.ts @@ -1,3 +1,10 @@ -import isDelete from "./src/isDelete"; - -export const IsDelete = isDelete; +/* + * @Author: donghao donghao@supervision.ltd + * @Date: 2024-08-14 17:19:37 + * @LastEditors: donghao donghao@supervision.ltd + * @LastEditTime: 2024-08-20 15:32:48 + * @FilePath: \General-AI-Platform-Web-Client\src\components\Action\index.ts + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ +import isAction from "./src/isAction"; +export const IsAction = isAction; diff --git a/src/components/Action/src/isAction.scss b/src/components/Action/src/isAction.scss new file mode 100644 index 0000000..83b0f8c --- /dev/null +++ b/src/components/Action/src/isAction.scss @@ -0,0 +1,16 @@ +.action_model_wrap { + .el-dialog__header { + display: none; + } + .el-dialog__body { + padding: 40px 24px 14px; + } + .model_content_box { + .icon_box { + img { + width: 24px; + height: 24px; + } + } + } +} diff --git a/src/components/Action/src/isAction.tsx b/src/components/Action/src/isAction.tsx new file mode 100644 index 0000000..48f5b2f --- /dev/null +++ b/src/components/Action/src/isAction.tsx @@ -0,0 +1,88 @@ +/* + * @Author: donghao donghao@supervision.ltd + * @Date: 2024-08-20 15:31:30 + * @LastEditors: donghao donghao@supervision.ltd + * @LastEditTime: 2024-08-20 16:00:47 + * @FilePath: \General-AI-Platform-Web-Client\src\components\TableActionCard\isAction.tsx + * @Description: 是否操作行为 + */ +import { defineComponent, PropType } from "vue"; +import { ElDialog, ElButton } from "element-plus"; +import warnIcon from "@/assets/modelSetting/warn_icon.png"; +import "./isAction.scss"; +// TODO 完善操作交互 +export default defineComponent({ + name: "IsDelete", + props: { + title: { + type: String as PropType, + default: "提示" + }, + message: { + type: String as PropType, + default: "确定要操作吗？" + }, + visible: { + type: Boolean as PropType, + required: true + } + }, + emits: ["update:visible", "confirm"], + setup(props, { emit }) { + // const visible = ref(props.visible); + + const handleConfirm = () => { + emit("confirm"); + // visible.value = false; + // emit("update:visible", false); + }; + + const handleCancel = () => { + // visible.value = false; + emit("update:visible", false); + }; + + const handleClose = () => { + // visible.value = false; + emit("update:visible", false); + // done(); + }; + + watch( + () => props.visible, + val => { + visible.value = val; + } + ); + + return () => ( + ( + <> + 取消 + + 确认 + + + ) + }} + > +
+
+ + {props.title} +
+
+ {props.message} +
+
+ + ); + } +}); diff --git a/src/components/Action/src/isDelete.tsx b/src/components/Action/src/isDelete.tsx index d1055cd..47eb629 100644 --- a/src/components/Action/src/isDelete.tsx +++ b/src/components/Action/src/isDelete.tsx @@ -2,13 +2,13 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2024-02-22 13:38:04 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2024-08-14 17:03:45 + * @LastEditTime: 2024-08-20 15:28:31 * @FilePath: \General-AI-Platform-Web-Client\src\components\TableActionCard\isDelete.tsx * @Description: 是否删除 */ import { defineComponent, ref, PropType } from "vue"; import { ElDialog, ElButton } from "element-plus"; - +// TODO 完善删除交互 export default defineComponent({ name: "IsDelete", props: { @@ -55,10 +55,14 @@ export default defineComponent({ return () => ( <>123 + }} v-slots={{ footer: () => ( <> diff --git a/src/views/deviceSetting/components/deviceAttr.vue b/src/views/deviceSetting/components/deviceAttr.vue index 3385b72..d80bc7a 100644 --- a/src/views/deviceSetting/components/deviceAttr.vue +++ b/src/views/deviceSetting/components/deviceAttr.vue @@ -17,6 +17,7 @@ const props = defineProps({ type: Object as Record } }); +const emit = defineEmits(["afterDelete", "editDevice"]); const event = inject("event"); const update = getCurrentInstance(); @@ -207,26 +208,31 @@ async function deleteDeviceObject(deleteObject) { }); if (isSuccessApi(resp)) { deleteObject.deleteCallback(); + emit("afterDelete", currDeviceInfo); } } // 编辑当前集合 -async function editDeviceObject(callback) { - const activeObject = canvasEditor.canvas.getActiveObject(); - const currDeviceInfo = activeObject.get("deviceInfo"); - console.log(activeObject, "editDeviceObject_activeObject", currDeviceInfo); - const resp = await editWorkshopDevicesApi({ - id: currDeviceInfo.id, - device_id: currDeviceInfo.device_id, - workshop_id: currDeviceInfo.workshop_id, - x_ordinate: activeObject.get("left"), - y_ordinate: activeObject.get("top"), - icon: formData.value.icon - }); - if (isSuccessApi(resp)) { - console.log("编辑完成"); - callback && callback(resp); - } +// async function editDeviceObject(callback) { +// const activeObject = canvasEditor.canvas.getActiveObject(); +// const currDeviceInfo = activeObject.get("deviceInfo"); +// console.log(activeObject, "editDeviceObject_activeObject", currDeviceInfo); +// const resp = await editWorkshopDevicesApi({ +// id: currDeviceInfo.id, +// device_id: currDeviceInfo.device_id, +// workshop_id: currDeviceInfo.workshop_id, +// x_ordinate: activeObject.get("left"), +// y_ordinate: activeObject.get("top"), +// icon: formData.value.icon +// }); +// if (isSuccessApi(resp)) { +// console.log("编辑完成"); +// callback && callback(resp); +// } +// } + +function startEditDevice(callback) { + emit("editDevice", { formData: toRaw(formData.value), callback }); } const selectCancel = e => { baseAttr.fill = ""; @@ -240,7 +246,7 @@ const init = () => { canvasEditor.canvas.on("object:deleteObject", deleteDeviceObject); canvasEditor.canvas.on("mouse:up", () => { const activeObject = canvasEditor.canvas.getActiveObject(); - activeObject && activeObject.get("deviceInfo") && editDeviceObject(); + activeObject && activeObject.get("deviceInfo") && startEditDevice(); }); canvasEditor.canvas.on("object:modified", getObjectAttr); // 监听 object:moving 事件以限制移动范围 @@ -300,7 +306,7 @@ const changeCommon = (key, value) => { if (targetIcon) { // 修改图片路径 - editDeviceObject(() => { + startEditDevice(() => { imageObject.setSrc( targetIcon.url, () => { diff --git a/src/views/deviceSetting/components/deviceSelect.vue b/src/views/deviceSetting/components/deviceSelect.vue index 7bf0abf..0e0aef5 100644 --- a/src/views/deviceSetting/components/deviceSelect.vue +++ b/src/views/deviceSetting/components/deviceSelect.vue @@ -15,6 +15,9 @@ import { useDeviceObject } from "../hooks/useDeviceObject"; const props = defineProps({ deviceList: { type: Array as Record[] + }, + currDeviceList: { + type: Array as Record[] } }); @@ -57,6 +60,17 @@ const state = reactive({ materialist: [] // 列表内容 }); const detailInfo = ref({}); +const currDetailInfo = ref({ + name: "设备", + workshop_name: "点位" +}); + +const isUpdateVisible = ref(false); +const isAllowUpdate = ref(false); + +const updateMessage = computed(() => { + return `“${currDetailInfo.value.name}”已绑定至“${currDetailInfo.value.workshop_name}”，确定解除绑定并重新配置吗？`; +}); // 获取素材分类 canvasEditor.getMaterialType("svg").then((list: materialTypeI[]) => { state.materialTypelist = [...list]; @@ -73,26 +87,30 @@ canvasEditor.getMaterialType("svg").then((list: materialTypeI[]) => { state.materialist = list; }); -function fetchDetail(record) { +function fetchDetail(record, callback) { detailInfo.value = record; console.log(detailInfo.value, "fetchDetail"); - emit("addDevice", record); + emit("addDevice", { record, callback }); } /** * 校验是否允许添加设备 * @param record 选中的素材 */ -function isValidAdd(record) { - console.log("isValidAdd_record", record); - return false; +function isValidAdd(event, record) { + console.log(props.currDeviceList, "isValidAdd_record", event, record); + // 同一点位重复新增禁用 + if (record.is_binding) { + return false; + } + return true; } const dragItem = (event, deviceItem) => { - if (isValidAdd(deviceItem)) { + console.log(event, deviceItem, "dragItem"); + if (!isValidAdd(event, deviceItem)) { return; } - console.log(event, deviceItem, "dragItem"); fabric.util.enlivenObjects( [ { @@ -106,62 +124,52 @@ const dragItem = (event, deviceItem) => { function (objects) { // objects 包含从JSON还原的对象，这里我们期望是一个Group对象 - // 判断是否在边界内 + // TODO 判断是否在边界内 const item = objects[0]; - canvasEditor.dragAddItem(event, item); console.log(event, item, "dragItem"); - fetchDetail({ - ...deviceItem, - x_ordinate: item.left, - y_ordinate: item.top - }); + + fetchDetail( + { + ...deviceItem, + x_ordinate: item.left, + y_ordinate: item.top + }, + () => { + // 新增完成处理 + canvasEditor.dragAddItem(event, item); + } + ); } ); }; -// 按照类型渲染 -const addItem = deviceItem => { - if (isValidAdd(deviceItem)) { - return; - } - console.log(deviceItem, "addItem_deviceItem"); - fabric.util.enlivenObjects( - [ - { - ...defaultPosition, - // name: "svg元素", - ...initDeviceGroupObjects(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.canvas.add(item); - canvasEditor.canvas.setActiveObject(item); - canvasEditor.canvas.requestRenderAll(); - fetchDetail(deviceItem); - // 更新Canvas以确保更改生效 - // canvas.renderAll(); - } - ); - // console.log(e, "addItem_e"); - // const url = watchOnlineSelected; - // fabric.loadSVGFromURL(url, (objects, options) => { - // const item = fabric.util.groupSVGElements(objects, { - // ...options, - // ...defaultPosition, - // name: "svg元素" - // }); +function updateConfirm() { + isAllowUpdate.value = true; +} - // }); -}; +// 按照类型渲染 +// const addItem = deviceItem => { +// if (isValidAdd(deviceItem)) { +// return; +// } +// console.log(deviceItem, "addItem_deviceItem"); +// fabric.util.enlivenObjects( +// [ +// { +// ...defaultPosition, +// // name: "svg元素", +// ...initDeviceGroupObjects(deviceItem) +// } +// ], +// function (objects) { +// const item = objects[0]; +// canvasEditor.canvas.add(item); +// canvasEditor.canvas.setActiveObject(item); +// canvasEditor.canvas.requestRenderAll(); +// fetchDetail(deviceItem); +// } +// ); +// }; // 渲染设备到点位图上 function renderDeviceToCanvas(record) { @@ -296,7 +304,6 @@ defineExpose({ renderDeviceToCanvas }); v-for="(info, i) in props.deviceList" :key="`${i}-logo1-button`" :draggable="true" - @click="addItem(info)" @dragend="event => dragItem(event, info)" > @@ -307,6 +314,13 @@ defineExpose({ renderDeviceToCanvas }); +