inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/views/thingInstance/component/thingDetail.tsx

@@ -1,437 +1,445 @@
-import { defineComponent, onUnmounted, reactive, ref, watch } from "vue";
-import * as thingApis from "@/api/thingInstance";
-import { CaretUpOutlined, CaretRightOutlined } from "@ant-design/icons-vue";
-import editRelation from "./editRelation";
-import "../less/editThing.less";
-
-export default defineComponent({
-  components: { editRelation },
-  props: {
-    data: Object,
-    id: String,
-    hideBtnLine: {
-      type: Boolean,
-      default: false,
-    },
-    hideEditBtn: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(_props, _context) {
-    // 基础属性
-    const basicForm = ref<any[]>([]);
-    // 全部属性
-    const colArr = ref([]);
-    const dynamicTableList = ref<Array<{ [key: string]: any }>>([]);
-    const LoginTableList = ref([]);
-    const alarmList = ref<any[]>([]);
-    // 动作表格
-    const actionColumns = ref([]);
-    const actionCTableList = ref([]);
-    const formData = reactive({
-      name: null,
-      code: null,
-      fileUrl: null,
-    });
-    watch(
-      () => _props.data,
-      (value: any) => {
-        colArr.value = JSON.parse(
-          JSON.stringify(value.thingInst?.thing?.thingPropertyList || [])
-        );
-
-        basicForm.value = [];
-        const newList = [
-          {
-            displayLabel: "实例名称",
-            code: "name",
-            display: true,
-            value: value.thingInst?.name,
-            displayType: "text",
-            readonly: true,
-          },
-          {
-            displayLabel: "实例编码",
-            code: "code",
-            display: true,
-            value: value.thingInst?.code,
-            displayType: "text",
-            readonly: true,
-          },
-        ];
-        formData.name = value.thingInst?.name;
-        formData.code = value.thingInst?.code;
-        formData.fileUrl = value.thingInst?.photo;
-        const colList: any = [];
-        colList.push(
-          ...colArr.value.filter((ele: any) => {
-            ele.value = value.staticMap.map[ele.code];
-
-            return (
-              ele.propertyType === "property" &&
-              ele.code !== "CODE" &&
-              ele.code !== "NAME"
-            );
-          })
-        );
-        colList.sort((a, b) => {
-          return a.sort - b.sort;
-        });
-        const list = colList.filter((n) => n.sort === null);
-        basicForm.value = colList.filter((n) => n.sort !== null);
-        basicForm.value = [...newList, ...basicForm.value, ...list];
-        basicForm.value = basicForm.value.map((item) => ({
-          ...item,
-          unit: (colArr.value.find((n: any) => n.code === item.code) as any)
-            ?.unit,
-        }));
-
-        dynamicTableList.value = value.dynamicProperties
-          .map((item) => ({
-            ...item,
-            name: (
-              colArr.value.find(
-                (n: any) => n.code === item.thingPropertyCode
-              ) as any
-            )?.displayLabel,
-            value: value.dynamicMap?.map[item.thingPropertyCode]?.value,
-            unit: (
-              colArr.value.find(
-                (n: any) => n.code === item.thingPropertyCode
-              ) as any
-            )?.unit,
-            thingProperty: colArr.value.find(
-              (n: any) => n.code === item.thingPropertyCode
-            ) as any,
-          }))
-          .filter((item: any) => item?.prePointEntry?.address)
-          .sort((a, b) => {
-            return a.thingProperty.sort - b.thingProperty.sort;
-          });
-
-        alarmList.value = colArr.value.filter((ele: any) => {
-          return ele.propertyType === "alarm";
-        });
-        LoginTableList.value = value.logicProperties.map((item) => ({
-          ...item,
-          name: (
-            colArr.value.find(
-              (n: any) => n.code === item.thingPropertyCode
-            ) as any
-          )?.displayLabel,
-          value: value.logicMap?.map[item.thingPropertyCode]?.value,
-          unit: (
-            colArr.value.find(
-              (n: any) => n.code === item.thingPropertyCode
-            ) as any
-          )?.unit,
-        }));
-      },
-      {
-        immediate: true,
-      }
-    );
-    const renderSelect = (ele: any) => {
-      const selectInfo = JSON.parse(ele.listInfo || "[]");
-      const arr: any[] = [];
-      if (ele.columnType === "long") {
-        for (const key in selectInfo) {
-          arr.push({ key: Number(key), value: selectInfo[key] });
-        }
-      } else if (ele.columnType === "string") {
-        for (const key in selectInfo) {
-          arr.push({ key: key.toString(), value: selectInfo[key] });
-        }
-      }
-      return arr.find((info: any) => info.key === ele.value)?.value;
-    };
-    const timer = setInterval(async () => {
-      const res: any = await thingApis.findThingProperties(_props.id || "");
-      const value = res.data;
-      colArr.value = JSON.parse(
-        JSON.stringify(value.thingInst?.thing?.thingPropertyList || [])
-      );
-
-      dynamicTableList.value = value.dynamicProperties
-        .map((item) => ({
-          ...item,
-          name: (
-            colArr.value.find(
-              (n: any) => n.code === item.thingPropertyCode
-            ) as any
-          )?.displayLabel,
-          value: value.dynamicMap.map[item.thingPropertyCode]?.value,
-          unit: (
-            colArr.value.find(
-              (n: any) => n.code === item.thingPropertyCode
-            ) as any
-          )?.unit,
-          thingProperty: colArr.value.find(
-            (n: any) => n.code === item.thingPropertyCode
-          ) as any,
-        }))
-        .filter((item: any) => item?.prePointEntry?.address)
-        .sort((a, b) => {
-          return a.thingProperty.sort - b.thingProperty.sort;
-        });
-
-      LoginTableList.value = value.logicProperties.map((item) => ({
-        ...item,
-        name: (
-          colArr.value.find(
-            (n: any) => n.code === item.thingPropertyCode
-          ) as any
-        )?.displayLabel,
-        value: value.logicMap?.map[item.thingPropertyCode]?.value,
-        unit: (
-          colArr.value.find(
-            (n: any) => n.code === item.thingPropertyCode
-          ) as any
-        )?.unit,
-      }));
-    }, 1000);
-    const folds = reactive({
-      basic: false,
-      dynamic: false,
-      logic: true,
-      action: true,
-      alarm: true,
-    });
-    onUnmounted(() => {
-      clearInterval(timer);
-    });
-
-    return () => (
-      <div class="editThing">
-        {!_props.hideBtnLine && (
-          <div class="header flex">
-            <a-page-header
-              class="flex1"
-              title="返回物实例列表"
-              onBack={() => {
-                _context.emit("backList");
-              }}
-            />
-
-            {!_props.hideEditBtn && (
-              <a-button
-                type="primary"
-                onClick={() => {
-                  _context.emit("toEdit", _props.data!.staticMap.map);
-                }}
-              >
-                编辑
-              </a-button>
-            )}
-
-            <a-button
-              onClick={() => {
-                _context.emit("back");
-              }}
-            >
-              返回
-            </a-button>
-          </div>
-        )}
-        <div class="basic">
-          <div
-            class="title flex"
-            style={folds.basic ? "margin-bottom:34px" : ""}
-          >
-            <div class="icon"></div>
-            <div class="name">基础属性</div>
-            <div
-              class="fold flex"
-              onClick={() => {
-                folds.basic = !folds.basic;
-              }}
-            >
-              {folds.basic ? "展开" : "折叠"}
-              {folds.basic ? <CaretRightOutlined /> : <CaretUpOutlined />}
-            </div>
-          </div>
-          <div class="flex content" style={folds.basic ? "display:none" : ""}>
-            <a-form class="flex3 grid">
-              <div class="flex element">
-                <a-form-item label="物模型名称" style={{ width: "100%" }}>
-                  {_props.data?.thingInst?.thing?.name}
-                </a-form-item>
-              </div>
-
-              {basicForm.value
-                .filter((basic: any) => {
-                  return basic.display;
-                })
-                .map((ele: any) => {
-                  return (
-                    <div class="flex element">
-                      <a-form-item
-                        label={ele.displayLabel}
-                        name={ele.code}
-                        style={{ width: "100%" }}
-                      >
-                        {ele.displayType === "text" ? ele.value : ""}
-                        {ele.displayType === "select" ? renderSelect(ele) : ""}
-                        {ele.unit ? ele.unit : null}
-                      </a-form-item>
-                    </div>
-                  );
-                })}
-            </a-form>
-            <div class="flex1 pic">
-              <div class="div_pic">
-                <a-image
-                  src={formData.fileUrl || ""}
-                  preview={false}
-                  fallback="data:image/png;base64,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"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="basic">
-          <div
-            class="title flex"
-            style={folds.dynamic ? "margin-bottom:34px" : ""}
-          >
-            <div class="icon"></div>
-            <div class="name">动态属性</div>
-            <div
-              class="fold flex"
-              onClick={() => {
-                folds.dynamic = !folds.dynamic;
-              }}
-            >
-              {folds.dynamic ? "展开" : "折叠"}
-              {folds.dynamic ? <CaretRightOutlined /> : <CaretUpOutlined />}
-            </div>
-          </div>
-          <div
-            class="flex content"
-            style={folds.dynamic ? "display:none;" : ""}
-          >
-            <a-form class="flex3 grid grid4">
-              {dynamicTableList.value.map((ele: any, dynamicIndex: number) => {
-                return (
-                  <div class="flex element" key={dynamicIndex}>
-                    <a-form-item
-                      label={ele.name}
-                      name={ele.code}
-                      style={{ width: "100%" }}
-                    >
-                      {ele.value &&
-                        (ele.thingProperty.decimalPlace
-                          ? Number(ele.value).toFixed(
-                              ele.thingProperty.decimalPlace
-                            )
-                          : ele.value)}
-                      {ele.unit}
-                    </a-form-item>
-                  </div>
-                );
-              })}
-            </a-form>
-          </div>
-        </div>
-        <div class="basic">
-          <div
-            class="title flex"
-            style={folds.logic ? "margin-bottom:34px" : ""}
-          >
-            <div class="icon"></div>
-            <div class="name">逻辑</div>
-            <div
-              class="fold flex"
-              onClick={() => {
-                folds.logic = !folds.logic;
-              }}
-            >
-              {folds.logic ? "展开" : "折叠"}
-              {folds.logic ? <CaretRightOutlined /> : <CaretUpOutlined />}
-            </div>
-          </div>
-          <div class="flex content" style={folds.logic ? "display:none;" : ""}>
-            <a-form class="flex3 grid grid4">
-              {LoginTableList.value.map((ele: any) => {
-                return (
-                  <div class="flex element">
-                    <a-form-item
-                      label={ele.name}
-                      name={ele.code}
-                      style={{ width: "100%" }}
-                    >
-                      {ele.value}
-                      {ele.unit}
-                    </a-form-item>
-                  </div>
-                );
-              })}
-            </a-form>
-          </div>
-        </div>
-        <div class="basic">
-          <div
-            class="title flex"
-            style={folds.alarm ? "margin-bottom:34px" : ""}
-          >
-            <div class="icon"></div>
-            <div class="name">报警</div>
-            <div
-              class="fold flex"
-              onClick={() => {
-                folds.alarm = !folds.alarm;
-              }}
-            >
-              {folds.alarm ? "展开" : "折叠"}
-              {folds.alarm ? <CaretRightOutlined /> : <CaretUpOutlined />}
-            </div>
-          </div>
-          <div class="content" style={folds.alarm ? "display:none;" : ""}>
-            <a-row grade={24}>
-              {alarmList.value.map((item) => (
-                <a-col span={6}>
-                  <a-row grade={24}>
-                    <a-col span={8} style={{ textAlign: "right" }}>
-                      {item.displayLabel}:
-                    </a-col>
-                    <a-col span={16}>
-                      <span class={`thingSpot green`}></span>
-                    </a-col>
-                  </a-row>
-                </a-col>
-              ))}
-            </a-row>
-          </div>
-        </div>
-        <div class="basic">
-          <div
-            class="title flex"
-            style={folds.action ? "margin-bottom:34px" : ""}
-          >
-            <div class="icon"></div>
-            <div class="name">动作</div>
-            <div
-              class="fold flex"
-              onClick={() => {
-                folds.action = !folds.action;
-              }}
-            >
-              {folds.action ? "展开" : "折叠"}
-              {folds.action ? <CaretRightOutlined /> : <CaretUpOutlined />}
-            </div>
-          </div>
-          <div class="content" style={folds.action ? "display:none;" : ""}>
-            <a-table
-              rowKey="id"
-              columns={actionColumns.value}
-              dataSource={actionCTableList.value}
-              pagination={false}
-            ></a-table>
-          </div>
-        </div>
-        <editRelation ele={_props.data?.staticMap?.map} />
-      </div>
-    );
-  },
-});
+import { defineComponent, onUnmounted, reactive, ref, watch } from "vue";
+import * as thingApis from "@/api/thingInstance";
+import { CaretUpOutlined, CaretRightOutlined } from "@ant-design/icons-vue";
+import editRelation from "./editRelation";
+import "../less/editThing.less";
+
+export default defineComponent({
+  components: { editRelation },
+  props: {
+    data: Object,
+    id: String,
+    hideBtnLine: {
+      type: Boolean,
+      default: false,
+    },
+    hideEditBtn: {
+      type: Boolean,
+      default: false,
+    },
+    hideBackBtn: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(_props, _context) {
+    // 基础属性
+    const basicForm = ref<any[]>([]);
+    // 全部属性
+    const colArr = ref([]);
+    const dynamicTableList = ref<Array<{ [key: string]: any }>>([]);
+    const LoginTableList = ref([]);
+    const alarmList = ref<any[]>([]);
+    // 动作表格
+    const actionColumns = ref([]);
+    const actionCTableList = ref([]);
+    const formData = reactive({
+      name: null,
+      code: null,
+      fileUrl: null,
+    });
+    watch(
+      () => _props.data,
+      (value: any) => {
+        colArr.value = JSON.parse(
+          JSON.stringify(value.thingInst?.thing?.thingPropertyList || [])
+        );
+
+        basicForm.value = [];
+        const newList = [
+          {
+            displayLabel: "实例名称",
+            code: "name",
+            display: true,
+            value: value.thingInst?.name,
+            displayType: "text",
+            readonly: true,
+          },
+          {
+            displayLabel: "实例编码",
+            code: "code",
+            display: true,
+            value: value.thingInst?.code,
+            displayType: "text",
+            readonly: true,
+          },
+        ];
+        formData.name = value.thingInst?.name;
+        formData.code = value.thingInst?.code;
+        formData.fileUrl = value.thingInst?.photo;
+        const colList: any = [];
+        colList.push(
+          ...colArr.value.filter((ele: any) => {
+            ele.value = value.staticMap.map[ele.code];
+
+            return (
+              ele.propertyType === "property" &&
+              ele.code !== "CODE" &&
+              ele.code !== "NAME"
+            );
+          })
+        );
+        colList.sort((a, b) => {
+          return a.sort - b.sort;
+        });
+        const list = colList.filter((n) => n.sort === null);
+        basicForm.value = colList.filter((n) => n.sort !== null);
+        basicForm.value = [...newList, ...basicForm.value, ...list];
+        basicForm.value = basicForm.value.map((item) => ({
+          ...item,
+          unit: (colArr.value.find((n: any) => n.code === item.code) as any)
+            ?.unit,
+        }));
+
+        dynamicTableList.value = value.dynamicProperties
+          .map((item) => ({
+            ...item,
+            name: (
+              colArr.value.find(
+                (n: any) => n.code === item.thingPropertyCode
+              ) as any
+            )?.displayLabel,
+            value: value.dynamicMap?.map[item.thingPropertyCode]?.value,
+            unit: (
+              colArr.value.find(
+                (n: any) => n.code === item.thingPropertyCode
+              ) as any
+            )?.unit,
+            thingProperty: colArr.value.find(
+              (n: any) => n.code === item.thingPropertyCode
+            ) as any,
+          }))
+          .filter((item: any) => item?.prePointEntry?.address)
+          .sort((a, b) => {
+            return a.thingProperty.sort - b.thingProperty.sort;
+          });
+
+        alarmList.value = colArr.value.filter((ele: any) => {
+          return ele.propertyType === "alarm";
+        });
+        LoginTableList.value = value.logicProperties.map((item) => ({
+          ...item,
+          name: (
+            colArr.value.find(
+              (n: any) => n.code === item.thingPropertyCode
+            ) as any
+          )?.displayLabel,
+          value: value.logicMap?.map[item.thingPropertyCode]?.value,
+          unit: (
+            colArr.value.find(
+              (n: any) => n.code === item.thingPropertyCode
+            ) as any
+          )?.unit,
+        }));
+      },
+      {
+        immediate: true,
+      }
+    );
+    const renderSelect = (ele: any) => {
+      const selectInfo = JSON.parse(ele.listInfo || "[]");
+      const arr: any[] = [];
+      if (ele.columnType === "long") {
+        for (const key in selectInfo) {
+          arr.push({ key: Number(key), value: selectInfo[key] });
+        }
+      } else if (ele.columnType === "string") {
+        for (const key in selectInfo) {
+          arr.push({ key: key.toString(), value: selectInfo[key] });
+        }
+      }
+      return arr.find((info: any) => info.key === ele.value)?.value;
+    };
+    const timer = setInterval(async () => {
+      const res: any = await thingApis.findThingProperties(_props.id || "");
+      const value = res.data;
+      colArr.value = JSON.parse(
+        JSON.stringify(value.thingInst?.thing?.thingPropertyList || [])
+      );
+
+      dynamicTableList.value = value.dynamicProperties
+        .map((item) => ({
+          ...item,
+          name: (
+            colArr.value.find(
+              (n: any) => n.code === item.thingPropertyCode
+            ) as any
+          )?.displayLabel,
+          value: value.dynamicMap.map[item.thingPropertyCode]?.value,
+          unit: (
+            colArr.value.find(
+              (n: any) => n.code === item.thingPropertyCode
+            ) as any
+          )?.unit,
+          thingProperty: colArr.value.find(
+            (n: any) => n.code === item.thingPropertyCode
+          ) as any,
+        }))
+        .filter((item: any) => item?.prePointEntry?.address)
+        .sort((a, b) => {
+          return a.thingProperty.sort - b.thingProperty.sort;
+        });
+
+      LoginTableList.value = value.logicProperties.map((item) => ({
+        ...item,
+        name: (
+          colArr.value.find(
+            (n: any) => n.code === item.thingPropertyCode
+          ) as any
+        )?.displayLabel,
+        value: value.logicMap?.map[item.thingPropertyCode]?.value,
+        unit: (
+          colArr.value.find(
+            (n: any) => n.code === item.thingPropertyCode
+          ) as any
+        )?.unit,
+      }));
+    }, 1000);
+    const folds = reactive({
+      basic: false,
+      dynamic: false,
+      logic: true,
+      action: true,
+      alarm: true,
+    });
+    onUnmounted(() => {
+      clearInterval(timer);
+    });
+
+    return () => (
+      <div class="editThing">
+        {!_props.hideBtnLine && (
+          <div class="header flex">
+            {!_props.hideBackBtn && (
+              <a-page-header
+                class="flex1"
+                title="返回物实例列表"
+                onBack={() => {
+                  _context.emit("backList");
+                }}
+              />
+            )}
+
+            {!_props.hideEditBtn && (
+              <a-button
+                type="primary"
+                onClick={() => {
+                  _context.emit("toEdit", _props.data!.staticMap.map);
+                }}
+              >
+                编辑
+              </a-button>
+            )}
+
+            {!_props.hideBackBtn && (
+              <a-button
+                onClick={() => {
+                  _context.emit("back");
+                }}
+              >
+                返回
+              </a-button>
+            )}
+          </div>
+        )}
+        <div class="basic">
+          <div
+            class="title flex"
+            style={folds.basic ? "margin-bottom:34px" : ""}
+          >
+            <div class="icon"></div>
+            <div class="name">基础属性</div>
+            <div
+              class="fold flex"
+              onClick={() => {
+                folds.basic = !folds.basic;
+              }}
+            >
+              {folds.basic ? "展开" : "折叠"}
+              {folds.basic ? <CaretRightOutlined /> : <CaretUpOutlined />}
+            </div>
+          </div>
+          <div class="flex content" style={folds.basic ? "display:none" : ""}>
+            <a-form class="flex3 grid">
+              <div class="flex element">
+                <a-form-item label="物模型名称" style={{ width: "100%" }}>
+                  {_props.data?.thingInst?.thing?.name}
+                </a-form-item>
+              </div>
+
+              {basicForm.value
+                .filter((basic: any) => {
+                  return basic.display;
+                })
+                .map((ele: any) => {
+                  return (
+                    <div class="flex element">
+                      <a-form-item
+                        label={ele.displayLabel}
+                        name={ele.code}
+                        style={{ width: "100%" }}
+                      >
+                        {ele.displayType === "text" ? ele.value : ""}
+                        {ele.displayType === "select" ? renderSelect(ele) : ""}
+                        {ele.unit ? ele.unit : null}
+                      </a-form-item>
+                    </div>
+                  );
+                })}
+            </a-form>
+            <div class="flex1 pic">
+              <div class="div_pic">
+                <a-image
+                  src={formData.fileUrl || ""}
+                  preview={false}
+                  fallback="data:image/png;base64,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"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="basic">
+          <div
+            class="title flex"
+            style={folds.dynamic ? "margin-bottom:34px" : ""}
+          >
+            <div class="icon"></div>
+            <div class="name">动态属性</div>
+            <div
+              class="fold flex"
+              onClick={() => {
+                folds.dynamic = !folds.dynamic;
+              }}
+            >
+              {folds.dynamic ? "展开" : "折叠"}
+              {folds.dynamic ? <CaretRightOutlined /> : <CaretUpOutlined />}
+            </div>
+          </div>
+          <div
+            class="flex content"
+            style={folds.dynamic ? "display:none;" : ""}
+          >
+            <a-form class="flex3 grid grid4">
+              {dynamicTableList.value.map((ele: any, dynamicIndex: number) => {
+                return (
+                  <div class="flex element" key={dynamicIndex}>
+                    <a-form-item
+                      label={ele.name}
+                      name={ele.code}
+                      style={{ width: "100%" }}
+                    >
+                      {ele.value &&
+                        (ele.thingProperty.decimalPlace
+                          ? Number(ele.value).toFixed(
+                              ele.thingProperty.decimalPlace
+                            )
+                          : ele.value)}
+                      {ele.unit}
+                    </a-form-item>
+                  </div>
+                );
+              })}
+            </a-form>
+          </div>
+        </div>
+        <div class="basic">
+          <div
+            class="title flex"
+            style={folds.logic ? "margin-bottom:34px" : ""}
+          >
+            <div class="icon"></div>
+            <div class="name">逻辑</div>
+            <div
+              class="fold flex"
+              onClick={() => {
+                folds.logic = !folds.logic;
+              }}
+            >
+              {folds.logic ? "展开" : "折叠"}
+              {folds.logic ? <CaretRightOutlined /> : <CaretUpOutlined />}
+            </div>
+          </div>
+          <div class="flex content" style={folds.logic ? "display:none;" : ""}>
+            <a-form class="flex3 grid grid4">
+              {LoginTableList.value.map((ele: any) => {
+                return (
+                  <div class="flex element">
+                    <a-form-item
+                      label={ele.name}
+                      name={ele.code}
+                      style={{ width: "100%" }}
+                    >
+                      {ele.value}
+                      {ele.unit}
+                    </a-form-item>
+                  </div>
+                );
+              })}
+            </a-form>
+          </div>
+        </div>
+        <div class="basic">
+          <div
+            class="title flex"
+            style={folds.alarm ? "margin-bottom:34px" : ""}
+          >
+            <div class="icon"></div>
+            <div class="name">报警</div>
+            <div
+              class="fold flex"
+              onClick={() => {
+                folds.alarm = !folds.alarm;
+              }}
+            >
+              {folds.alarm ? "展开" : "折叠"}
+              {folds.alarm ? <CaretRightOutlined /> : <CaretUpOutlined />}
+            </div>
+          </div>
+          <div class="content" style={folds.alarm ? "display:none;" : ""}>
+            <a-row grade={24}>
+              {alarmList.value.map((item) => (
+                <a-col span={6}>
+                  <a-row grade={24}>
+                    <a-col span={8} style={{ textAlign: "right" }}>
+                      {item.displayLabel}:
+                    </a-col>
+                    <a-col span={16}>
+                      <span class={`thingSpot green`}></span>
+                    </a-col>
+                  </a-row>
+                </a-col>
+              ))}
+            </a-row>
+          </div>
+        </div>
+        <div class="basic">
+          <div
+            class="title flex"
+            style={folds.action ? "margin-bottom:34px" : ""}
+          >
+            <div class="icon"></div>
+            <div class="name">动作</div>
+            <div
+              class="fold flex"
+              onClick={() => {
+                folds.action = !folds.action;
+              }}
+            >
+              {folds.action ? "展开" : "折叠"}
+              {folds.action ? <CaretRightOutlined /> : <CaretUpOutlined />}
+            </div>
+          </div>
+          <div class="content" style={folds.action ? "display:none;" : ""}>
+            <a-table
+              rowKey="id"
+              columns={actionColumns.value}
+              dataSource={actionCTableList.value}
+              pagination={false}
+            ></a-table>
+          </div>
+        </div>
+        <editRelation ele={_props.data?.staticMap?.map} />
+      </div>
+    );
+  },
+});