inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/views/processDrawingConfiguration/editor/operationArea.tsx

@@ -1,449 +1,449 @@
-import {
-  computed,
-  defineComponent,
-  inject,
-  nextTick,
-  onMounted,
-  ref,
-  ShallowRef,
-  watch,
-} from "vue";
-import { message, Popover } from "ant-design-vue";
-import api from "@/api/processDrawing";
-import useActiveWidget from "../hooks/useActiveWidget.js";
-import inlTpEditor from "../editor-util/index.js";
-import { widgetTools1, widgetTools2, widgetTools3, layout } from "./config";
-import PropertyForm from "../components/propertyForm.jsx";
-import StyleForm from "../components/styleForm.jsx";
-import EventForm from "../components/EventForm.jsx";
-import colorChoose from "../components/colorPicker";
-import dataCom from "./components/data.jsx";
-import addonAfter from "../components/addonAfter.jsx";
-
-const basicEl = ["line", "property", "shape", "text"];
-
-/**
- * 操作区
- */
-const OperationArea = defineComponent({
-  emits: ["save"],
-  components: {
-    popover: Popover,
-    colorChoose,
-    dataCom,
-    addonAfter,
-  },
-  setup(props, { emit }) {
-    const canvas = inject<ShallowRef<inlTpEditor>>("canvas")!;
-
-    const activeWidget = useActiveWidget(canvas);
-
-    // 选中的元素是否全是基础类型(线、文字)
-    const isAllBasicActiveWidget = computed(() => {
-      return activeWidget.value.every((item) =>
-        basicEl.includes(item.data?.effectType)
-      );
-    });
-
-    // 选中的是否是一个实例
-    const isActiveInstance = computed(() => {
-      return (
-        activeWidget.value.length === 1 &&
-        activeWidget.value[0].data.effectType === "svg" &&
-        activeWidget.value[0].data.instanceId
-      );
-    });
-
-    const prevActiveInstanceId = ref();
-    // 选中实例的属性列表
-    const propertyList = ref<any[]>([]);
-    watch([activeWidget, isActiveInstance], async () => {
-      // 两次选择相同的实例不重复发送请求
-      if (
-        !isActiveInstance.value ||
-        activeWidget.value[0].data.instanceId === prevActiveInstanceId.value
-      ) {
-        return;
-      }
-      const instanceId = activeWidget.value[0].data.instanceId;
-      prevActiveInstanceId.value = instanceId;
-      const { data } = await api.getPropertyListByInstanceId(instanceId);
-      const dynamicMap = data.instMap.dynamicMap?.map ?? {};
-      const staticMap = data.instMap.staticMap?.map ?? {};
-      const logicMap = data.instMap.logicMap?.map ?? {};
-
-      const getProperties = (propertyType: string, map: any) => {
-        return data.thingPropertyList
-          .filter((item) => item.propertyType === propertyType)
-          .map((item) => ({
-            ...item,
-            value: map[item.code],
-          }));
-      };
-      propertyList.value = [
-        {
-          key: "static",
-          name: "基础属性",
-          children: getProperties("property", staticMap),
-        },
-        {
-          key: "dyanmic",
-          name: "动态属性",
-          children: getProperties("metric", dynamicMap),
-        },
-        {
-          key: "logic",
-          name: "逻辑属性",
-          children: getProperties("logic", logicMap),
-        },
-      ];
-    });
-
-    // const isActiveText = computed(() => {
-    //   // console.log(activeWidget.value[0].data.effectType);
-    //   return (
-    //     activeWidget.value.length === 1 &&
-    //     activeWidget.value[0].data.effectType === "text"
-    //   );
-    // });
-
-    // watch([activeWidget, isActiveText], async () => {
-    //   if (!isActiveText.value) {
-    //     return;
-    //   }
-    //   console.log(activeWidget.value[0].data);
-    // });
-
-    const handleOperation = (tool: any) => {
-      switch (tool.key) {
-        case "front":
-          activeWidget.value.forEach((item: any) => {
-            canvas.value?.setLevel(item.id, "before");
-          });
-          break;
-        case "behind":
-          activeWidget.value.forEach((item: any) => {
-            canvas.value?.setLevel(item.id, "after");
-          });
-          break;
-        case "top":
-          activeWidget.value.forEach((item: any) => {
-            canvas.value?.setLevel(item.id, "top");
-          });
-          break;
-        case "bottom":
-          activeWidget.value.forEach((item: any) => {
-            canvas.value?.setLevel(item.id, "bottom");
-          });
-          break;
-        case "horizontal-reverse":
-          canvas.value?.flip.x();
-          break;
-        case "vertical-reverse":
-          canvas.value?.flip.y();
-          break;
-        case "align-left":
-          canvas.value?.align(canvas.value?.enums.Alignparam.left);
-          break;
-        case "align-right":
-          canvas.value?.align(canvas.value?.enums.Alignparam.right);
-          break;
-        case "align-top":
-          canvas.value?.align(canvas.value?.enums.Alignparam.top);
-          break;
-        case "align-bottom":
-          canvas.value?.align(canvas.value?.enums.Alignparam.bottom);
-          break;
-        case "align-horizontal-center":
-          canvas.value?.align(canvas.value?.enums.Alignparam.horizontal_center);
-          break;
-        case "align-vertical-center":
-          canvas.value?.align(canvas.value?.enums.Alignparam.vertical_center);
-          break;
-        case "align-horizontal-justify":
-          canvas.value?.align(
-            canvas.value?.enums.Alignparam.horizontal_distribution
-          );
-          break;
-        case "align-vertical-justify":
-          canvas.value?.align(
-            canvas.value?.enums.Alignparam.vertical_distribution
-          );
-          break;
-        default:
-          break;
-      }
-    };
-
-    // 选中属性 添加到图中
-    const handlePropCheck = (property) => {
-      const instance: any = activeWidget.value[0];
-      if (!instance || !canvas.value) return;
-      const { displayLabel, value, unit, code } = property;
-
-      if (!instance.data) {
-        instance.data = {};
-      }
-      if (!instance.data.propertyList) {
-        instance.data.propertyList = [];
-      }
-      instance.data.propertyList.push(property);
-      const text = canvas.value.draw.text({
-        name: `${displayLabel}: ${value ?? "暂无"}${unit ?? ""}`,
-        parentId: instance.id,
-        option: { fontSize: 14, fill: "#354052" },
-      });
-      text.data.instanceId = instance.id;
-      text.data.effectType = "property";
-      text.data.code = code;
-      text.data.showPropertyName = true;
-    };
-
-    // 取消选中属性 从图中去掉属性文字
-    const handlePropUncheck = (property) => {
-      const instance: any = activeWidget.value[0];
-      if (!instance || !canvas.value) return;
-      const propertyList = instance.data?.propertyList ?? [];
-      const textList = canvas.value.canvas
-        .getObjects()
-        .filter(
-          (item) =>
-            item.data?.instanceId === instance.id &&
-            item.data?.code === property.code
-        );
-      for (const text of textList) {
-        canvas.value.canvas.remove(text);
-      }
-      // 在实例上删除
-      const idx = propertyList.findIndex((item) => item.id === property.id);
-      if (idx !== -1) {
-        propertyList.splice(idx, 1);
-      }
-    };
-
-    // 保存当前实例及属性
-    const handleSave = async () => {
-      const instance: any = activeWidget.value[0];
-      if (!instance && !canvas.value) return;
-      // 当前实例的属性列表
-      const allElements = canvas.value.canvas.getObjects();
-      const propertyList = instance.data?.propertyList ?? [];
-      for (const property of propertyList) {
-        const pEl = allElements.find(
-          (item) =>
-            item.data.instanceId === instance.id &&
-            item.data.code === property.code
-        ) as fabric.Textbox;
-        if (!pEl) continue;
-        const offsetLeft = pEl.left! - instance.left;
-        const offsetTop = pEl.top! - instance.top;
-        property.relativePosition = {
-          offsetLeft,
-          offsetTop,
-        };
-        property.style = {
-          fill: pEl.get("fill"),
-          fontSize: pEl.get("fontSize"),
-        };
-        property.text = pEl.text;
-      }
-      const data = {
-        ...instance.data.originalData,
-        style: null,
-        propertyList,
-      };
-
-      await api.saveInstanceInfo({
-        id: data.id,
-        style: JSON.stringify(data),
-      });
-      message.success("保存成功");
-      emit("save");
-    };
-    // 更新背景色
-    const bg: any = ref("transparent");
-    const handleUpdateColor = (color: string) => {
-      canvas.value.initEditorBackground();
-      if (!canvas.value?.canvas) return;
-      canvas.value.setBackground(color, () => {
-        canvas.value.getBackground();
-      });
-    };
-    const equipment = ref();
-    const layoutList: any = ref([]);
-    const xyList: any = ref([
-      { label: "x轴圆角", type: "rx" },
-      { label: "y轴圆角", type: "ry" },
-    ]);
-    onMounted(async () => {
-      await nextTick();
-      if (canvas.value) {
-        bg.value = canvas.value.getBackground() || "transparent";
-      }
-      // 图例选中状态
-      canvas.value.canvas.on("mouse:down:before", async (e) => {
-        console.log(e.target, "实例");
-        equipment.value = e.target;
-        const effectType = e.target?.data.effectType;
-        layoutList.value = [];
-        if (e.target) {
-          if (
-            effectType === "svg" ||
-            effectType === "text" ||
-            effectType === "property" ||
-            effectType === "shape"
-          ) {
-            layout.forEach((ele) => {
-              ele.val = equipment.value[ele.type];
-              if (effectType !== "shape") {
-                if (ele.type === "width" || ele.type === "height") return;
-              }
-              layoutList.value.push(ele);
-            });
-            if (effectType === "shape") {
-              xyList.value.forEach((ele) => {
-                ele.val = equipment.value[ele.type];
-              });
-            }
-          }
-        }
-      });
-    });
-    const handleUpdate = (item) => {
-      const { type, val } = item;
-      equipment.value.set(type, val);
-      canvas.value.canvas.renderAll();
-    };
-    const activeKey = ref("style");
-    return () => {
-      const renderTool = (tool: any) => (
-        <a-tooltip key={tool.key} title={tool.name}>
-          <div class="tool" onClick={() => handleOperation(tool)}>
-            <icon-font
-              style={{ fontSize: "18px" }}
-              type={tool.icon}
-            ></icon-font>
-          </div>
-        </a-tooltip>
-      );
-
-      return (
-        <div class="operation-area" id="operation-area">
-          <a-tabs v-model={[activeKey.value, "activeKey"]} centered>
-            <a-tab-pane key={"style"} tab={"样式"}>
-              <div class="operation-area-content">
-                {/* <h2 class="title">操作区</h2> */}
-                {!activeWidget.value.length ? (
-                  <a-form-item label="背景颜色">
-                    <colorChoose
-                      color={bg.value}
-                      onUpdate={handleUpdateColor}
-                    />
-                  </a-form-item>
-                ) : (
-                  <div>
-                    {/* 部件操作工具 */}
-                    <div class="property">对齐和排列</div>
-                    <div class="widget-tools">
-                      <div class="top">
-                        {widgetTools1.map((item) => renderTool(item))}
-                        <a-divider class="tool-divider" type="vertical" />
-                        {widgetTools2.map((item) => renderTool(item))}
-                      </div>
-                      <div class="bottom">
-                        {widgetTools3.map((item) => renderTool(item))}
-                      </div>
-                    </div>
-
-                    {layoutList.value.length ? (
-                      <>
-                        <a-divider />
-                        <div class="property">布局</div>
-                        <div class="inputEdit">
-                          <a-form>
-                            {equipment.value.data.effectType === "shape" ? (
-                              <a-form-item label="x轴-y轴圆角" class="flex">
-                                {xyList.value.map((item, inx) => {
-                                  return (
-                                    <>
-                                      <a-input-number
-                                        min="0"
-                                        style="width:40px"
-                                        v-model={[item.val, "value"]}
-                                        onChange={() => handleUpdate(item)}
-                                      ></a-input-number>
-                                      {inx === 0 && <span>-</span>}
-                                    </>
-                                  );
-                                })}
-                              </a-form-item>
-                            ) : null}
-                            {layoutList.value.map((item) => {
-                              return (
-                                <a-form-item label={item.label}>
-                                  <a-input-number
-                                    onChange={() => handleUpdate(item)}
-                                    v-model={[item.val, "value"]}
-                                    // v-slots={{
-                                    // addonAfter: () => <more-outlined />,
-                                    // }}
-                                  ></a-input-number>
-                                </a-form-item>
-                              );
-                            })}
-                          </a-form>
-                        </div>
-                      </>
-                    ) : null}
-                    {isAllBasicActiveWidget.value && (
-                      <StyleForm
-                        widget={activeWidget.value[0]}
-                        widgetList={activeWidget.value}
-                      />
-                    )}
-                  </div>
-                )}
-              </div>
-            </a-tab-pane>
-            <a-tab-pane key={"attribute"} tab={"属性"}>
-              <div class="operation-area-content">
-                {isActiveInstance.value ? (
-                  <PropertyForm
-                    widget={activeWidget.value[0]}
-                    propertyList={propertyList.value}
-                    onCheck={handlePropCheck}
-                    onUncheck={handlePropUncheck}
-                    onSave={handleSave}
-                  />
-                ) : (
-                  <a-empty description="暂无数据"></a-empty>
-                )}
-              </div>
-            </a-tab-pane>
-            <a-tab-pane key={"event"} tab={"事件"}>
-              <div class="operation-area-content">
-                {isActiveInstance.value ? (
-                  <EventForm
-                    widget={activeWidget.value[0]}
-                    onCheck={handlePropCheck}
-                    onUncheck={handlePropUncheck}
-                    onSave={handleSave}
-                  />
-                ) : (
-                  <a-empty description="暂无数据"></a-empty>
-                )}
-              </div>
-            </a-tab-pane>
-            <a-tab-pane key={"data"} tab={"数据"}>
-              <dataCom
-                widget={activeWidget.value[0] ? activeWidget.value[0] : {}}
-              ></dataCom>
-            </a-tab-pane>
-          </a-tabs>
-        </div>
-      );
-    };
-  },
-});
-
-export default OperationArea;
+import {
+  computed,
+  defineComponent,
+  inject,
+  nextTick,
+  onMounted,
+  ref,
+  ShallowRef,
+  watch,
+} from "vue";
+import { message, Popover } from "ant-design-vue";
+import api from "@/api/processDrawing";
+import useActiveWidget from "../hooks/useActiveWidget.js";
+import inlTpEditor from "../editor-util/index.js";
+import { widgetTools1, widgetTools2, widgetTools3, layout } from "./config";
+import PropertyForm from "../components/propertyForm.jsx";
+import StyleForm from "../components/styleForm.jsx";
+import EventForm from "../components/EventForm.jsx";
+import colorChoose from "../components/colorPicker";
+import dataCom from "./components/data.jsx";
+import addonAfter from "../components/addonAfter.jsx";
+
+const basicEl = ["line", "property", "shape", "text"];
+
+/**
+ * 操作区
+ */
+const OperationArea = defineComponent({
+  emits: ["save"],
+  components: {
+    popover: Popover,
+    colorChoose,
+    dataCom,
+    addonAfter,
+  },
+  setup(props, { emit }) {
+    const canvas = inject<ShallowRef<inlTpEditor>>("canvas")!;
+
+    const activeWidget = useActiveWidget(canvas);
+
+    // 选中的元素是否全是基础类型(线、文字)
+    const isAllBasicActiveWidget = computed(() => {
+      return activeWidget.value.every((item) =>
+        basicEl.includes(item.data?.effectType)
+      );
+    });
+
+    // 选中的是否是一个实例
+    const isActiveInstance = computed(() => {
+      return (
+        activeWidget.value.length === 1 &&
+        activeWidget.value[0].data.effectType === "svg" &&
+        activeWidget.value[0].data.instanceId
+      );
+    });
+
+    const prevActiveInstanceId = ref();
+    // 选中实例的属性列表
+    const propertyList = ref<any[]>([]);
+    watch([activeWidget, isActiveInstance], async () => {
+      // 两次选择相同的实例不重复发送请求
+      if (
+        !isActiveInstance.value ||
+        activeWidget.value[0].data.instanceId === prevActiveInstanceId.value
+      ) {
+        return;
+      }
+      const instanceId = activeWidget.value[0].data.instanceId;
+      prevActiveInstanceId.value = instanceId;
+      const { data } = await api.getPropertyListByInstanceId(instanceId);
+      const dynamicMap = data.instMap.dynamicMap?.map ?? {};
+      const staticMap = data.instMap.staticMap?.map ?? {};
+      const logicMap = data.instMap.logicMap?.map ?? {};
+
+      const getProperties = (propertyType: string, map: any) => {
+        return data.thingPropertyList
+          .filter((item) => item.propertyType === propertyType)
+          .map((item) => ({
+            ...item,
+            value: map[item.code],
+          }));
+      };
+      propertyList.value = [
+        {
+          key: "static",
+          name: "基础属性",
+          children: getProperties("property", staticMap),
+        },
+        {
+          key: "dyanmic",
+          name: "动态属性",
+          children: getProperties("metric", dynamicMap),
+        },
+        {
+          key: "logic",
+          name: "逻辑属性",
+          children: getProperties("logic", logicMap),
+        },
+      ];
+    });
+
+    // const isActiveText = computed(() => {
+    //   // console.log(activeWidget.value[0].data.effectType);
+    //   return (
+    //     activeWidget.value.length === 1 &&
+    //     activeWidget.value[0].data.effectType === "text"
+    //   );
+    // });
+
+    // watch([activeWidget, isActiveText], async () => {
+    //   if (!isActiveText.value) {
+    //     return;
+    //   }
+    //   console.log(activeWidget.value[0].data);
+    // });
+
+    const handleOperation = (tool: any) => {
+      switch (tool.key) {
+        case "front":
+          activeWidget.value.forEach((item: any) => {
+            canvas.value?.setLevel(item.id, "before");
+          });
+          break;
+        case "behind":
+          activeWidget.value.forEach((item: any) => {
+            canvas.value?.setLevel(item.id, "after");
+          });
+          break;
+        case "top":
+          activeWidget.value.forEach((item: any) => {
+            canvas.value?.setLevel(item.id, "top");
+          });
+          break;
+        case "bottom":
+          activeWidget.value.forEach((item: any) => {
+            canvas.value?.setLevel(item.id, "bottom");
+          });
+          break;
+        case "horizontal-reverse":
+          canvas.value?.flip.x();
+          break;
+        case "vertical-reverse":
+          canvas.value?.flip.y();
+          break;
+        case "align-left":
+          canvas.value?.align(canvas.value?.enums.Alignparam.left);
+          break;
+        case "align-right":
+          canvas.value?.align(canvas.value?.enums.Alignparam.right);
+          break;
+        case "align-top":
+          canvas.value?.align(canvas.value?.enums.Alignparam.top);
+          break;
+        case "align-bottom":
+          canvas.value?.align(canvas.value?.enums.Alignparam.bottom);
+          break;
+        case "align-horizontal-center":
+          canvas.value?.align(canvas.value?.enums.Alignparam.horizontal_center);
+          break;
+        case "align-vertical-center":
+          canvas.value?.align(canvas.value?.enums.Alignparam.vertical_center);
+          break;
+        case "align-horizontal-justify":
+          canvas.value?.align(
+            canvas.value?.enums.Alignparam.horizontal_distribution
+          );
+          break;
+        case "align-vertical-justify":
+          canvas.value?.align(
+            canvas.value?.enums.Alignparam.vertical_distribution
+          );
+          break;
+        default:
+          break;
+      }
+    };
+
+    // 选中属性 添加到图中
+    const handlePropCheck = (property) => {
+      const instance: any = activeWidget.value[0];
+      if (!instance || !canvas.value) return;
+      const { displayLabel, value, unit, code } = property;
+
+      if (!instance.data) {
+        instance.data = {};
+      }
+      if (!instance.data.propertyList) {
+        instance.data.propertyList = [];
+      }
+      instance.data.propertyList.push(property);
+      const text = canvas.value.draw.text({
+        name: `${displayLabel}: ${value ?? "暂无"}${unit ?? ""}`,
+        parentId: instance.id,
+        option: { fontSize: 14, fill: "#354052" },
+      });
+      text.data.instanceId = instance.id;
+      text.data.effectType = "property";
+      text.data.code = code;
+      text.data.showPropertyName = true;
+    };
+
+    // 取消选中属性 从图中去掉属性文字
+    const handlePropUncheck = (property) => {
+      const instance: any = activeWidget.value[0];
+      if (!instance || !canvas.value) return;
+      const propertyList = instance.data?.propertyList ?? [];
+      const textList = canvas.value.canvas
+        .getObjects()
+        .filter(
+          (item) =>
+            item.data?.instanceId === instance.id &&
+            item.data?.code === property.code
+        );
+      for (const text of textList) {
+        canvas.value.canvas.remove(text);
+      }
+      // 在实例上删除
+      const idx = propertyList.findIndex((item) => item.id === property.id);
+      if (idx !== -1) {
+        propertyList.splice(idx, 1);
+      }
+    };
+
+    // 保存当前实例及属性
+    const handleSave = async () => {
+      const instance: any = activeWidget.value[0];
+      if (!instance && !canvas.value) return;
+      // 当前实例的属性列表
+      const allElements = canvas.value.canvas.getObjects();
+      const propertyList = instance.data?.propertyList ?? [];
+      for (const property of propertyList) {
+        const pEl = allElements.find(
+          (item) =>
+            item.data.instanceId === instance.id &&
+            item.data.code === property.code
+        ) as fabric.Textbox;
+        if (!pEl) continue;
+        const offsetLeft = pEl.left! - instance.left;
+        const offsetTop = pEl.top! - instance.top;
+        property.relativePosition = {
+          offsetLeft,
+          offsetTop,
+        };
+        property.style = {
+          fill: pEl.get("fill"),
+          fontSize: pEl.get("fontSize"),
+        };
+        property.text = pEl.text;
+      }
+      const data = {
+        ...instance.data.originalData,
+        style: null,
+        propertyList,
+      };
+
+      await api.saveInstanceInfo({
+        id: data.id,
+        style: JSON.stringify(data),
+      });
+      message.success("保存成功");
+      emit("save");
+    };
+    // 更新背景色
+    const bg: any = ref("transparent");
+    const handleUpdateColor = (color: string) => {
+      canvas.value.initEditorBackground();
+      if (!canvas.value?.canvas) return;
+      canvas.value.setBackground(color, () => {
+        canvas.value.getBackground();
+      });
+    };
+    const equipment = ref();
+    const layoutList: any = ref([]);
+    const xyList: any = ref([
+      { label: "x轴圆角", type: "rx" },
+      { label: "y轴圆角", type: "ry" },
+    ]);
+    onMounted(async () => {
+      await nextTick();
+      if (canvas.value) {
+        bg.value = canvas.value.getBackground() || "transparent";
+      }
+      // 图例选中状态
+      canvas.value.canvas.on("mouse:down:before", async (e) => {
+        console.log(e.target, "实例");
+        equipment.value = e.target;
+        const effectType = e.target?.data.effectType;
+        layoutList.value = [];
+        if (e.target) {
+          if (
+            effectType === "svg" ||
+            effectType === "text" ||
+            effectType === "property" ||
+            effectType === "shape"
+          ) {
+            layout.forEach((ele) => {
+              ele.val = equipment.value[ele.type];
+              if (effectType !== "shape") {
+                if (ele.type === "width" || ele.type === "height") return;
+              }
+              layoutList.value.push(ele);
+            });
+            if (effectType === "shape") {
+              xyList.value.forEach((ele) => {
+                ele.val = equipment.value[ele.type];
+              });
+            }
+          }
+        }
+      });
+    });
+    const handleUpdate = (item) => {
+      const { type, val } = item;
+      equipment.value.set(type, val);
+      canvas.value.canvas.renderAll();
+    };
+    const activeKey = ref("style");
+    return () => {
+      const renderTool = (tool: any) => (
+        <a-tooltip key={tool.key} title={tool.name}>
+          <div class="tool" onClick={() => handleOperation(tool)}>
+            <icon-font
+              style={{ fontSize: "18px" }}
+              type={tool.icon}
+            ></icon-font>
+          </div>
+        </a-tooltip>
+      );
+
+      return (
+        <div class="operation-area" id="operation-area">
+          <a-tabs v-model={[activeKey.value, "activeKey"]} centered>
+            <a-tab-pane key={"style"} tab={"样式"}>
+              <div class="operation-area-content">
+                {/* <h2 class="title">操作区</h2> */}
+                {!activeWidget.value.length ? (
+                  <a-form-item label="背景颜色">
+                    <colorChoose
+                      color={bg.value}
+                      onUpdate={handleUpdateColor}
+                    />
+                  </a-form-item>
+                ) : (
+                  <div>
+                    {/* 部件操作工具 */}
+                    <div class="property">对齐和排列</div>
+                    <div class="widget-tools">
+                      <div class="top">
+                        {widgetTools1.map((item) => renderTool(item))}
+                        <a-divider class="tool-divider" type="vertical" />
+                        {widgetTools2.map((item) => renderTool(item))}
+                      </div>
+                      <div class="bottom">
+                        {widgetTools3.map((item) => renderTool(item))}
+                      </div>
+                    </div>
+
+                    {layoutList.value.length ? (
+                      <>
+                        <a-divider />
+                        <div class="property">布局</div>
+                        <div class="inputEdit">
+                          <a-form>
+                            {equipment.value.data.effectType === "shape" ? (
+                              <a-form-item label="x轴-y轴圆角" class="flex">
+                                {xyList.value.map((item, inx) => {
+                                  return (
+                                    <>
+                                      <a-input-number
+                                        min="0"
+                                        style="width:40px"
+                                        v-model={[item.val, "value"]}
+                                        onChange={() => handleUpdate(item)}
+                                      ></a-input-number>
+                                      {inx === 0 && <span>-</span>}
+                                    </>
+                                  );
+                                })}
+                              </a-form-item>
+                            ) : null}
+                            {layoutList.value.map((item) => {
+                              return (
+                                <a-form-item label={item.label}>
+                                  <a-input-number
+                                    onChange={() => handleUpdate(item)}
+                                    v-model={[item.val, "value"]}
+                                    // v-slots={{
+                                    // addonAfter: () => <more-outlined />,
+                                    // }}
+                                  ></a-input-number>
+                                </a-form-item>
+                              );
+                            })}
+                          </a-form>
+                        </div>
+                      </>
+                    ) : null}
+                    {isAllBasicActiveWidget.value && (
+                      <StyleForm
+                        widget={activeWidget.value[0]}
+                        widgetList={activeWidget.value}
+                      />
+                    )}
+                  </div>
+                )}
+              </div>
+            </a-tab-pane>
+            <a-tab-pane key={"attribute"} tab={"属性"}>
+              <div class="operation-area-content">
+                {isActiveInstance.value ? (
+                  <PropertyForm
+                    widget={activeWidget.value[0]}
+                    propertyList={propertyList.value}
+                    onCheck={handlePropCheck}
+                    onUncheck={handlePropUncheck}
+                    onSave={handleSave}
+                  />
+                ) : (
+                  <a-empty description="暂无数据"></a-empty>
+                )}
+              </div>
+            </a-tab-pane>
+            <a-tab-pane key={"event"} tab={"事件"}>
+              <div class="operation-area-content">
+                {isActiveInstance.value ? (
+                  <EventForm
+                    widget={activeWidget.value[0]}
+                    onCheck={handlePropCheck}
+                    onUncheck={handlePropUncheck}
+                    onSave={handleSave}
+                  />
+                ) : (
+                  <a-empty description="暂无数据"></a-empty>
+                )}
+              </div>
+            </a-tab-pane>
+            <a-tab-pane key={"data"} tab={"数据"}>
+              <dataCom
+                widget={activeWidget.value[0] ? activeWidget.value[0] : {}}
+              ></dataCom>
+            </a-tab-pane>
+          </a-tabs>
+        </div>
+      );
+    };
+  },
+});
+
+export default OperationArea;