inl-ui 0.0.37 → 0.0.39

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

@@ -1,732 +1,737 @@
-import {
-  defineComponent,
-  onMounted,
-  PropType,
-  reactive,
-  ref,
-  watch,
-} from "vue";
-import { message } from "ant-design-vue";
-import { Rule } from "ant-design-vue/lib/form/interface";
-import * as thingApis from "@/api/thingInstance";
-import { CaretUpOutlined, CaretRightOutlined } from "@ant-design/icons-vue";
-import { filter } from "@/pageComponent/hooks/filters";
-import dynamicFormDom from "./dynamicForm";
-import logicFormDom from "./logicForm";
-import editRelation from "./editRelation";
-import "../less/editThing.less";
-import { customRequest } from "@/pageComponent/utils/upload";
-
-export default defineComponent({
-  components: { editRelation, logicFormDom, dynamicFormDom },
-  props: {
-    data: Object,
-    triggerModeList: {
-      type: Array as PropType<Array<{ [key: string]: string }>>,
-      default: [],
-    },
-  },
-  setup(_props, _context) {
-    const headers = {
-      "Content-Type": "multipart/form-data",
-    };
-    // 动态高级配置表单
-    const dynamicForm = ref<{
-      triggerMode: string;
-      ruleMode: string;
-      rule: string | null;
-      timeInterval: string | null;
-      listenProperty: string | null;
-    }>({
-      triggerMode: "",
-      ruleMode: "",
-      rule: null,
-      timeInterval: null,
-      listenProperty: null,
-    });
-    // 动态列表点击索引
-    const dynamicIndex = ref<string | null>(null);
-    // 逻辑高级配置表单
-    const logicForm = ref<{
-      triggerMode: string;
-      ruleMode: string;
-      rule: string | null;
-      timeInterval: string | null;
-      listenProperty: string | null;
-    }>({
-      triggerMode: "",
-      ruleMode: "",
-      rule: null,
-      timeInterval: null,
-      listenProperty: null,
-    });
-    // 逻辑列表点击索引
-    const logicIndex = ref<string | null>(null);
-    const modalType = ref("");
-    // 基础属性
-    const basicForm = ref<any[]>([]);
-    // 全部属性
-    const colArr = ref([]);
-    // 动态表格
-    const dynamicColumns = ref([
-      // {
-      //   title: "id",
-      //   dataIndex: "id",
-      // },
-      {
-        title: "属性名称",
-        dataIndex: "displayLabel",
-      },
-      {
-        title: "属性编码",
-        dataIndex: "code",
-      },
-      {
-        title: "preCode",
-        dataIndex: "preCode",
-      },
-      {
-        title: "prePointCode",
-        dataIndex: "prePointCode",
-      },
-      {
-        title: "resetInterval",
-        dataIndex: "resetInterval",
-      },
-      {
-        title: "resetValue",
-        dataIndex: "resetValue",
-      },
-      {
-        title: "",
-        dataIndex: "action",
-      },
-    ]);
-    // 报警
-    const formState = ref({
-      equipmentFailure: "",
-      maxDensity: "",
-    });
-    const alarmList = ref<any[]>([]);
-
-    const dynamicTableList = ref<any>([]);
-    // 逻辑表格
-    const LoginColumns = ref([
-      {
-        title: "属性名称",
-        dataIndex: "displayLabel",
-      },
-      {
-        title: "属性编码",
-        dataIndex: "code",
-      },
-      {
-        title: "触发方式",
-        dataIndex: "triggerMode",
-      },
-      {
-        title: "规则公式",
-        dataIndex: "rule",
-      },
-      {
-        title: "",
-        dataIndex: "action",
-      },
-    ]);
-    const LoginTableList = ref<any>([]);
-    const visible = ref(false);
-
-    // 动作表格
-    const actionColumns = ref([]);
-    const actionCTableList = ref([]);
-
-    // form输入类型过滤
-    const typeFilter = (val) => {
-      switch (val) {
-        case "string":
-          return "text";
-          break;
-        case "long":
-          return "number";
-          break;
-        case "double":
-          return "number";
-          break;
-        case "boolean":
-          return "boolean";
-          break;
-        default:
-          return "";
-          break;
-      }
-    };
-    const codeRepeatValidator = async (_rule: Rule, value: string) => {
-      const res = await thingApis.checkCode(value);
-      if (res.data) {
-        return Promise.resolve();
-      } else {
-        return Promise.reject();
-      }
-    };
-    const codeCharacterValidator = (_rule: Rule, value: string) => {
-      if (value.match(/^[\u4E00-\u9FA5A-Za-z0-9_]+?$/)) {
-        return Promise.resolve();
-      } else {
-        return Promise.reject();
-      }
-    };
-    watch(
-      () => _props.data,
-      (value: any) => {
-        colArr.value = JSON.parse(
-          JSON.stringify(value.thingPropertyList || [])
-        );
-        basicForm.value = [];
-        const newList = [
-          {
-            displayLabel: "实例名称",
-            code: "name",
-            display: true,
-            value: null,
-            displayType: "text",
-            rules: [{ required: true, message: "请输入名称", trigger: "blur" }],
-          },
-          {
-            displayLabel: "实例编码",
-            code: "code",
-            display: true,
-            value: null,
-            displayType: "text",
-            rules: [
-              { required: true, message: "请输入编码", trigger: "blur" },
-              {
-                validator: codeCharacterValidator,
-                message: "不可包含特殊字符",
-                trigger: "blur",
-              },
-              {
-                validator: codeRepeatValidator,
-                message: "编码重复",
-                trigger: "blur",
-              },
-            ],
-          },
-        ];
-        const colList: any = [];
-
-        colList.push(
-          ...colArr.value.filter((ele: any) => {
-            ele.rules = [
-              {
-                required: ele.required,
-                message: `${ele.displayType === "text" ? "请输入" : "请选择"}${
-                  ele.displayLabel
-                }`,
-                trigger: `${ele.displayType === "text" ? "blur" : "change"}`,
-              },
-            ];
-            if (ele.defaultValue) {
-              ele.value = ele.defaultValue;
-            } else {
-              ele.value = null;
-            }
-
-            return (
-              ele.propertyType === "property" &&
-              ele.code !== "CODE" &&
-              ele.code !== "NAME" &&
-              ele.code !== "ID"
-            );
-          })
-        );
-        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];
-
-        dynamicTableList.value = colArr.value.filter((ele: any) => {
-          return ele.propertyType === "metric";
-        });
-        alarmList.value = colArr.value.filter((ele: any) => {
-          return ele.propertyType === "alarm";
-        });
-        LoginTableList.value = colArr.value.filter((ele: any) => {
-          return ele.propertyType === "logic";
-        });
-      },
-      {
-        immediate: true,
-      }
-    );
-
-    const save = async () => {
-      const valid = await form.value.validateFields();
-      const param: any = {
-        dynamicProperties: [],
-        logicProperties: [],
-        staticMap: {
-          map: {},
-        },
-        thingInst: {
-          thing: _props.data,
-        },
-      };
-      param.thingInst.name = basicForm.value[0].value;
-      param.thingInst.code = basicForm.value[1].value;
-      param.thingInst.photo = formData.fileUrl;
-      basicForm.value.forEach((element: any, index: number) => {
-        if (index !== 0 && index !== 1) {
-          if (
-            element.value &&
-            element.columnType === "long" &&
-            element.value.indexOf(".") > -1 &&
-            typeof element.value === "number"
-          ) {
-            message.error(`${element.name}应为整数`);
-            return false;
-          }
-          param.staticMap.map[element.code] = element.value;
-        }
-      });
-      dynamicTableList.value.forEach((ele: any) => {
-        ele.thingPropertyCode = ele.code;
-      });
-      param.dynamicProperties = dynamicTableList.value;
-      LoginTableList.value.forEach((ele: any) => {
-        ele.thingPropertyCode = ele.code;
-      });
-      param.logicProperties = LoginTableList.value;
-      const res: any = await thingApis.addThing(param);
-      if (res.code === "M0000") {
-        message.success("保存成功");
-        _context.emit("toDetail", res.data.staticMap.map);
-      } else {
-        message.error("服务异常");
-      }
-    };
-    const folds = reactive({
-      basic: false,
-      dynamic: false,
-      logic: false,
-      action: false,
-      alarm: false,
-    });
-    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 (
-        <a-select v-model={[ele.value, "value"]} style={{ width: "100%" }}>
-          {arr.map((info: any) => {
-            return (
-              <a-select-option value={info.key}>{info.value}</a-select-option>
-            );
-          })}
-        </a-select>
-      );
-    };
-
-    const form = ref();
-    const formData = reactive({
-      name: null,
-      code: null,
-      fileUrl: null,
-    });
-    const beforeUpload = (file) => {
-      let size = file.size / 1024 / 1024;
-      if (size > 2) {
-        message.error("文件不能大于2M");
-        return false;
-      }
-    };
-    return () => (
-      <div class="editThing">
-        <div class="header flex">
-          <a-page-header
-            class="flex1 "
-            title="返回物实例列表"
-            onBack={() => {
-              _context.emit("backList");
-            }}
-          />
-          <a-button
-            type="primary"
-            onClick={() => {
-              save();
-            }}
-          >
-            保存
-          </a-button>
-          <a-button
-            onClick={() => {
-              _context.emit("back");
-            }}
-          >
-            取消
-          </a-button>
-        </div>
-        <div class="basic">
-          <div class="title flex">
-            <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"
-              ref={form}
-              model={formData}
-              labelWrap={true}
-            >
-              <div class="flex element">
-                <a-form-item
-                  label="物模型名称"
-                  style={{ width: "100%" }}
-                  label-col={{ span: 8 }}
-                  wrapper-col={{ span: 16 }}
-                >
-                  {_props.data?.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}
-                        rules={ele.rules}
-                        style={{ width: "100%" }}
-                        label-col={{ span: 8 }}
-                        wrapper-col={{ span: 16 }}
-                      >
-                        {ele.displayType === "text" ? (
-                          <a-input
-                            v-model={[ele.value, "value"]}
-                            disabled={ele.readonly}
-                            type={typeFilter(ele.columnType)}
-                            onChange={() => {
-                              formData[ele.code] = ele.value;
-                            }}
-                          ></a-input>
-                        ) : (
-                          ""
-                        )}
-                        {ele.displayType === "select" ? renderSelect(ele) : ""}
-                      </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 class="hover_action">
-                  <a-space size={16}>
-                    <a-upload
-                      headers={headers}
-                      showUploadList={false}
-                      beforeUpload={beforeUpload}
-                      customRequest={async (e) => {
-                        const res = await customRequest(
-                          e,
-                          thingApis.uploadCommon
-                        );
-                        formData.fileUrl = res.data;
-                      }}
-                    >
-                      <upload-outlined class="icon" />
-                    </a-upload>
-                    <delete-outlined
-                      class="icon"
-                      onClick={() => {
-                        formData.fileUrl = null;
-                      }}
-                    />
-                  </a-space>
-                </div>
-                <div class="tip_pic">
-                  支持图片格式：.PNG;.JPG;.JPEG;.SVG; 大小不超过2M;
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        {/* <div class="basic">
-          <div class="title flex">
-            <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="content" style={folds.dynamic ? "display:none" : ""}>
-            <a-table
-              rowKey="id"
-              columns={dynamicColumns.value}
-              dataSource={dynamicTableList.value}
-              pagination={false}
-              v-slots={{
-                bodyCell: ({ column, record, index }: any) => {
-                  if (
-                    column.dataIndex === "preCode" ||
-                    column.dataIndex === "prePointCode" ||
-                    column.dataIndex === "resetInterval" ||
-                    column.dataIndex === "resetValue"
-                  ) {
-                    return (
-                      <a-input
-                        v-model={[record[column.dataIndex], "value"]}
-                      ></a-input>
-                    );
-                  }
-                  if (column.dataIndex === "action") {
-                    return (
-                      <a-button
-                        type="link"
-                        onClick={() => {
-                          modalType.value = "dynamic";
-                          dynamicForm.value = {
-                            triggerMode: "",
-                            ruleMode: "",
-                            rule: null,
-                            timeInterval: null,
-                            listenProperty: null,
-                          };
-                          dynamicIndex.value = null;
-                          dynamicForm.value.triggerMode = record.triggerMode;
-                          dynamicForm.value.ruleMode = record.ruleMode;
-                          dynamicForm.value.rule = record.rule;
-                          dynamicForm.value.timeInterval = record.timeInterval;
-                          dynamicForm.value.listenProperty =
-                            record.listenProperty;
-                          dynamicIndex.value = `${index}`;
-                          visible.value = true;
-                        }}
-                      >
-                        高级 <double-right-outlined />
-                      </a-button>
-                    );
-                  }
-                },
-              }}
-            ></a-table>
-          </div>
-        </div> */}
-        {/* <div class="basic">
-          <div class="title flex">
-            <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="content" style={folds.logic ? "display:none" : ""}>
-            <a-table
-              rowKey="id"
-              columns={LoginColumns.value}
-              dataSource={LoginTableList.value}
-              pagination={false}
-              v-slots={{
-                bodyCell: ({ column, record, index }) => {
-                  if (column.dataIndex === "action") {
-                    return (
-                      <a-button
-                        type="link"
-                        onClick={() => {
-                          modalType.value = "logic";
-                          logicForm.value = {
-                            triggerMode: "",
-                            ruleMode: "",
-                            rule: null,
-                            timeInterval: null,
-                            listenProperty: null,
-                          };
-                          logicIndex.value = null;
-                          logicForm.value.triggerMode = record.triggerMode;
-                          logicForm.value.ruleMode = record.ruleMode;
-                          logicForm.value.rule = record.rule;
-                          logicForm.value.timeInterval = record.timeInterval;
-                          logicForm.value.listenProperty =
-                            record.listenProperty;
-                          logicIndex.value = `${index}`;
-                          visible.value = true;
-                        }}
-                      >
-                        高级 <double-right-outlined />
-                      </a-button>
-                    );
-                  }
-                  if (column.dataIndex === "triggerMode") {
-                    return filter(
-                      _props.triggerModeList,
-                      record.triggerMode,
-                      "code",
-                      "name"
-                    );
-                  }
-                  if (column.dataIndex === "ruleMode") {
-                    return (
-                      <a-input
-                        v-model={[record[column.dataIndex], "value"]}
-                      ></a-input>
-                    );
-                  }
-                },
-              }}
-            ></a-table>
-          </div>
-        </div> */}
-        {/* <div class="basic">
-          <div class="title flex">
-            <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" : ""}>
-            <div style={{ padding: "10px 20px" }}>
-              创建实例后,可前往
-              <a
-                onClick={() => {
-                  _context.emit("toRoute");
-                }}
-              >
-                烽火报警
-              </a>
-              配置报警规则
-            </div>
-            <a-form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
-              <a-row grade={24}>
-                {alarmList.value.map((item) => (
-                  <a-col span={6}>
-                    <a-form-item label={item.displayLabel}>
-                      <a-input
-                        v-model={[formState.value.equipmentFailure, "value"]}
-                        disabled
-                      ></a-input>
-                    </a-form-item>
-                  </a-col>
-                ))}
-              </a-row>
-            </a-form>
-          </div>
-        </div> */}
-        {/* <div class="basic">
-          <div
-            class="title flex"
-            style={folds.action ? "margin-bottom:10px" : ""}
-          >
-            <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> */}
-        <a-modal
-          v-model={[visible.value, "visible"]}
-          title="高级配置"
-          footer={false}
-          bodyStyle={{ height: "800px", overflowY: "auto" }}
-        >
-          {visible.value && modalType.value === "dynamic" ? (
-            <dynamicFormDom
-              v-models={[
-                [logicForm.value, "logicForm"],
-                [logicIndex.value, "logicIndex"],
-              ]}
-              triggerModeList={_props.triggerModeList}
-              onClose={() => {
-                if (logicIndex.value) {
-                  LoginTableList.value[Number(logicIndex.value)] = {
-                    ...LoginTableList.value[logicIndex.value],
-                    ...logicForm.value,
-                  };
-                }
-                visible.value = false;
-              }}
-            ></dynamicFormDom>
-          ) : null}
-          {visible.value && modalType.value === "logic" ? (
-            <logicFormDom
-              v-models={[
-                [logicForm.value, "logicForm"],
-                [logicIndex.value, "logicIndex"],
-              ]}
-              triggerModeList={_props.triggerModeList}
-              onClose={() => {
-                if (logicIndex.value) {
-                  LoginTableList.value[Number(logicIndex.value)] = {
-                    ...LoginTableList.value[logicIndex.value],
-                    ...logicForm.value,
-                  };
-                }
-                visible.value = false;
-              }}
-            ></logicFormDom>
-          ) : null}
-        </a-modal>
-      </div>
-    );
-  },
-});
+import {
+  defineComponent,
+  onMounted,
+  PropType,
+  reactive,
+  ref,
+  watch,
+} from "vue";
+import { message } from "ant-design-vue";
+import { Rule } from "ant-design-vue/lib/form/interface";
+import * as thingApis from "@/api/thingInstance";
+import { CaretUpOutlined, CaretRightOutlined } from "@ant-design/icons-vue";
+import { filter } from "@/pageComponent/hooks/filters";
+import dynamicFormDom from "./dynamicForm";
+import logicFormDom from "./logicForm";
+import editRelation from "./editRelation";
+import "../less/editThing.less";
+import { customRequest } from "@/pageComponent/utils/upload";
+
+export default defineComponent({
+  components: { editRelation, logicFormDom, dynamicFormDom },
+  props: {
+    data: Object,
+    triggerModeList: {
+      type: Array as PropType<Array<{ [key: string]: string }>>,
+      default: [],
+    },
+  },
+  setup(_props, _context) {
+    const headers = {
+      "Content-Type": "multipart/form-data",
+    };
+    // 动态高级配置表单
+    const dynamicForm = ref<{
+      triggerMode: string;
+      ruleMode: string;
+      rule: string | null;
+      timeInterval: string | null;
+      listenProperty: string | null;
+    }>({
+      triggerMode: "",
+      ruleMode: "",
+      rule: null,
+      timeInterval: null,
+      listenProperty: null,
+    });
+    // 动态列表点击索引
+    const dynamicIndex = ref<string | null>(null);
+    // 逻辑高级配置表单
+    const logicForm = ref<{
+      triggerMode: string;
+      ruleMode: string;
+      rule: string | null;
+      timeInterval: string | null;
+      listenProperty: string | null;
+    }>({
+      triggerMode: "",
+      ruleMode: "",
+      rule: null,
+      timeInterval: null,
+      listenProperty: null,
+    });
+    // 逻辑列表点击索引
+    const logicIndex = ref<string | null>(null);
+    const modalType = ref("");
+    // 基础属性
+    const basicForm = ref<any[]>([]);
+    // 全部属性
+    const colArr = ref([]);
+    // 动态表格
+    const dynamicColumns = ref([
+      // {
+      //   title: "id",
+      //   dataIndex: "id",
+      // },
+      {
+        title: "属性名称",
+        dataIndex: "displayLabel",
+      },
+      {
+        title: "属性编码",
+        dataIndex: "code",
+      },
+      {
+        title: "preCode",
+        dataIndex: "preCode",
+      },
+      {
+        title: "prePointCode",
+        dataIndex: "prePointCode",
+      },
+      {
+        title: "resetInterval",
+        dataIndex: "resetInterval",
+      },
+      {
+        title: "resetValue",
+        dataIndex: "resetValue",
+      },
+      {
+        title: "",
+        dataIndex: "action",
+      },
+    ]);
+    // 报警
+    const formState = ref({
+      equipmentFailure: "",
+      maxDensity: "",
+    });
+    const alarmList = ref<any[]>([]);
+
+    const dynamicTableList = ref<any>([]);
+    // 逻辑表格
+    const LoginColumns = ref([
+      {
+        title: "属性名称",
+        dataIndex: "displayLabel",
+      },
+      {
+        title: "属性编码",
+        dataIndex: "code",
+      },
+      {
+        title: "触发方式",
+        dataIndex: "triggerMode",
+      },
+      {
+        title: "规则公式",
+        dataIndex: "rule",
+      },
+      {
+        title: "",
+        dataIndex: "action",
+      },
+    ]);
+    const LoginTableList = ref<any>([]);
+    const visible = ref(false);
+
+    // 动作表格
+    const actionColumns = ref([]);
+    const actionCTableList = ref([]);
+
+    // form输入类型过滤
+    const typeFilter = (val) => {
+      switch (val) {
+        case "string":
+          return "text";
+          break;
+        case "long":
+          return "number";
+          break;
+        case "double":
+          return "number";
+          break;
+        case "boolean":
+          return "boolean";
+          break;
+        default:
+          return "";
+          break;
+      }
+    };
+    const codeRepeatValidator = async (_rule: Rule, value: string) => {
+      const res = await thingApis.checkCode(value);
+      if (res.data) {
+        return Promise.resolve();
+      } else {
+        return Promise.reject();
+      }
+    };
+    const codeCharacterValidator = (_rule: Rule, value: string) => {
+      if (value.match(/^[\u4E00-\u9FA5A-Za-z0-9_]+?$/)) {
+        return Promise.resolve();
+      } else {
+        return Promise.reject();
+      }
+    };
+    watch(
+      () => _props.data,
+      (value: any) => {
+        colArr.value = JSON.parse(
+          JSON.stringify(value.thingPropertyList || [])
+        );
+        basicForm.value = [];
+        const newList = [
+          {
+            displayLabel: "实例名称",
+            code: "name",
+            display: true,
+            value: null,
+            displayType: "text",
+            rules: [{ required: true, message: "请输入名称", trigger: "blur" }],
+          },
+          {
+            displayLabel: "实例编码",
+            code: "code",
+            display: true,
+            value: null,
+            displayType: "text",
+            rules: [
+              { required: true, message: "请输入编码", trigger: "blur" },
+              {
+                validator: codeCharacterValidator,
+                message: "不可包含特殊字符",
+                trigger: "blur",
+              },
+              {
+                validator: codeRepeatValidator,
+                message: "编码重复",
+                trigger: "blur",
+              },
+            ],
+          },
+        ];
+        const colList: any = [];
+
+        colList.push(
+          ...colArr.value.filter((ele: any) => {
+            ele.rules = [
+              {
+                required: ele.required,
+                message: `${ele.displayType === "text" ? "请输入" : "请选择"}${
+                  ele.displayLabel
+                }`,
+                trigger: `${ele.displayType === "text" ? "blur" : "change"}`,
+              },
+            ];
+            if (ele.defaultValue) {
+              ele.value = ele.defaultValue;
+            } else {
+              ele.value = null;
+            }
+
+            return (
+              ele.propertyType === "property" &&
+              ele.code !== "CODE" &&
+              ele.code !== "NAME" &&
+              ele.code !== "ID"
+            );
+          })
+        );
+        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.forEach((base: any) => {
+          if (base.code === "THING_CODE") {
+            base.value = _props.data?.code;
+          }
+        });
+
+        dynamicTableList.value = colArr.value.filter((ele: any) => {
+          return ele.propertyType === "metric";
+        });
+        alarmList.value = colArr.value.filter((ele: any) => {
+          return ele.propertyType === "alarm";
+        });
+        LoginTableList.value = colArr.value.filter((ele: any) => {
+          return ele.propertyType === "logic";
+        });
+      },
+      {
+        immediate: true,
+      }
+    );
+
+    const save = async () => {
+      const valid = await form.value.validateFields();
+      const param: any = {
+        dynamicProperties: [],
+        logicProperties: [],
+        staticMap: {
+          map: {},
+        },
+        thingInst: {
+          thing: _props.data,
+        },
+      };
+      param.thingInst.name = basicForm.value[0].value;
+      param.thingInst.code = basicForm.value[1].value;
+      param.thingInst.photo = formData.fileUrl;
+      basicForm.value.forEach((element: any, index: number) => {
+        if (index !== 0 && index !== 1) {
+          if (
+            element.value &&
+            element.columnType === "long" &&
+            element.value.indexOf(".") > -1 &&
+            typeof element.value === "number"
+          ) {
+            message.error(`${element.name}应为整数`);
+            return false;
+          }
+          param.staticMap.map[element.code] = element.value;
+        }
+      });
+      dynamicTableList.value.forEach((ele: any) => {
+        ele.thingPropertyCode = ele.code;
+      });
+      param.dynamicProperties = dynamicTableList.value;
+      LoginTableList.value.forEach((ele: any) => {
+        ele.thingPropertyCode = ele.code;
+      });
+      param.logicProperties = LoginTableList.value;
+      const res: any = await thingApis.addThing(param);
+      if (res.code === "M0000") {
+        message.success("保存成功");
+        _context.emit("toDetail", res.data.staticMap.map);
+      } else {
+        message.error("服务异常");
+      }
+    };
+    const folds = reactive({
+      basic: false,
+      dynamic: false,
+      logic: false,
+      action: false,
+      alarm: false,
+    });
+    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 (
+        <a-select v-model={[ele.value, "value"]} style={{ width: "100%" }}>
+          {arr.map((info: any) => {
+            return (
+              <a-select-option value={info.key}>{info.value}</a-select-option>
+            );
+          })}
+        </a-select>
+      );
+    };
+
+    const form = ref();
+    const formData = reactive({
+      name: null,
+      code: null,
+      fileUrl: null,
+    });
+    const beforeUpload = (file) => {
+      let size = file.size / 1024 / 1024;
+      if (size > 2) {
+        message.error("文件不能大于2M");
+        return false;
+      }
+    };
+    return () => (
+      <div class="editThing">
+        <div class="header flex">
+          <a-page-header
+            class="flex1 "
+            title="返回物实例列表"
+            onBack={() => {
+              _context.emit("backList");
+            }}
+          />
+          <a-button
+            type="primary"
+            onClick={() => {
+              save();
+            }}
+          >
+            保存
+          </a-button>
+          <a-button
+            onClick={() => {
+              _context.emit("back");
+            }}
+          >
+            取消
+          </a-button>
+        </div>
+        <div class="basic">
+          <div class="title flex">
+            <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"
+              ref={form}
+              model={formData}
+              labelWrap={true}
+            >
+              <div class="flex element">
+                <a-form-item
+                  label="物模型名称"
+                  style={{ width: "100%" }}
+                  label-col={{ span: 8 }}
+                  wrapper-col={{ span: 16 }}
+                >
+                  {_props.data?.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}
+                        rules={ele.rules}
+                        style={{ width: "100%" }}
+                        label-col={{ span: 8 }}
+                        wrapper-col={{ span: 16 }}
+                      >
+                        {ele.displayType === "text" ? (
+                          <a-input
+                            v-model={[ele.value, "value"]}
+                            readonly={ele.readonly}
+                            type={typeFilter(ele.columnType)}
+                            onChange={() => {
+                              formData[ele.code] = ele.value;
+                            }}
+                          ></a-input>
+                        ) : (
+                          ""
+                        )}
+                        {ele.displayType === "select" ? renderSelect(ele) : ""}
+                      </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,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
+                />
+                <div class="hover_action">
+                  <a-space size={16}>
+                    <a-upload
+                      headers={headers}
+                      showUploadList={false}
+                      beforeUpload={beforeUpload}
+                      customRequest={async (e) => {
+                        const res = await customRequest(
+                          e,
+                          thingApis.uploadCommon
+                        );
+                        formData.fileUrl = res.data;
+                      }}
+                    >
+                      <upload-outlined class="icon" />
+                    </a-upload>
+                    <delete-outlined
+                      class="icon"
+                      onClick={() => {
+                        formData.fileUrl = null;
+                      }}
+                    />
+                  </a-space>
+                </div>
+                <div class="tip_pic">
+                  支持图片格式：.PNG;.JPG;.JPEG;.SVG; 大小不超过2M;
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* <div class="basic">
+          <div class="title flex">
+            <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="content" style={folds.dynamic ? "display:none" : ""}>
+            <a-table
+              rowKey="id"
+              columns={dynamicColumns.value}
+              dataSource={dynamicTableList.value}
+              pagination={false}
+              v-slots={{
+                bodyCell: ({ column, record, index }: any) => {
+                  if (
+                    column.dataIndex === "preCode" ||
+                    column.dataIndex === "prePointCode" ||
+                    column.dataIndex === "resetInterval" ||
+                    column.dataIndex === "resetValue"
+                  ) {
+                    return (
+                      <a-input
+                        v-model={[record[column.dataIndex], "value"]}
+                      ></a-input>
+                    );
+                  }
+                  if (column.dataIndex === "action") {
+                    return (
+                      <a-button
+                        type="link"
+                        onClick={() => {
+                          modalType.value = "dynamic";
+                          dynamicForm.value = {
+                            triggerMode: "",
+                            ruleMode: "",
+                            rule: null,
+                            timeInterval: null,
+                            listenProperty: null,
+                          };
+                          dynamicIndex.value = null;
+                          dynamicForm.value.triggerMode = record.triggerMode;
+                          dynamicForm.value.ruleMode = record.ruleMode;
+                          dynamicForm.value.rule = record.rule;
+                          dynamicForm.value.timeInterval = record.timeInterval;
+                          dynamicForm.value.listenProperty =
+                            record.listenProperty;
+                          dynamicIndex.value = `${index}`;
+                          visible.value = true;
+                        }}
+                      >
+                        高级 <double-right-outlined />
+                      </a-button>
+                    );
+                  }
+                },
+              }}
+            ></a-table>
+          </div>
+        </div> */}
+        {/* <div class="basic">
+          <div class="title flex">
+            <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="content" style={folds.logic ? "display:none" : ""}>
+            <a-table
+              rowKey="id"
+              columns={LoginColumns.value}
+              dataSource={LoginTableList.value}
+              pagination={false}
+              v-slots={{
+                bodyCell: ({ column, record, index }) => {
+                  if (column.dataIndex === "action") {
+                    return (
+                      <a-button
+                        type="link"
+                        onClick={() => {
+                          modalType.value = "logic";
+                          logicForm.value = {
+                            triggerMode: "",
+                            ruleMode: "",
+                            rule: null,
+                            timeInterval: null,
+                            listenProperty: null,
+                          };
+                          logicIndex.value = null;
+                          logicForm.value.triggerMode = record.triggerMode;
+                          logicForm.value.ruleMode = record.ruleMode;
+                          logicForm.value.rule = record.rule;
+                          logicForm.value.timeInterval = record.timeInterval;
+                          logicForm.value.listenProperty =
+                            record.listenProperty;
+                          logicIndex.value = `${index}`;
+                          visible.value = true;
+                        }}
+                      >
+                        高级 <double-right-outlined />
+                      </a-button>
+                    );
+                  }
+                  if (column.dataIndex === "triggerMode") {
+                    return filter(
+                      _props.triggerModeList,
+                      record.triggerMode,
+                      "code",
+                      "name"
+                    );
+                  }
+                  if (column.dataIndex === "ruleMode") {
+                    return (
+                      <a-input
+                        v-model={[record[column.dataIndex], "value"]}
+                      ></a-input>
+                    );
+                  }
+                },
+              }}
+            ></a-table>
+          </div>
+        </div> */}
+        {/* <div class="basic">
+          <div class="title flex">
+            <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" : ""}>
+            <div style={{ padding: "10px 20px" }}>
+              创建实例后,可前往
+              <a
+                onClick={() => {
+                  _context.emit("toRoute");
+                }}
+              >
+                烽火报警
+              </a>
+              配置报警规则
+            </div>
+            <a-form labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
+              <a-row grade={24}>
+                {alarmList.value.map((item) => (
+                  <a-col span={6}>
+                    <a-form-item label={item.displayLabel}>
+                      <a-input
+                        v-model={[formState.value.equipmentFailure, "value"]}
+                        disabled
+                      ></a-input>
+                    </a-form-item>
+                  </a-col>
+                ))}
+              </a-row>
+            </a-form>
+          </div>
+        </div> */}
+        {/* <div class="basic">
+          <div
+            class="title flex"
+            style={folds.action ? "margin-bottom:10px" : ""}
+          >
+            <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> */}
+        <a-modal
+          v-model={[visible.value, "visible"]}
+          title="高级配置"
+          footer={false}
+          bodyStyle={{ height: "800px", overflowY: "auto" }}
+        >
+          {visible.value && modalType.value === "dynamic" ? (
+            <dynamicFormDom
+              v-models={[
+                [logicForm.value, "logicForm"],
+                [logicIndex.value, "logicIndex"],
+              ]}
+              triggerModeList={_props.triggerModeList}
+              onClose={() => {
+                if (logicIndex.value) {
+                  LoginTableList.value[Number(logicIndex.value)] = {
+                    ...LoginTableList.value[logicIndex.value],
+                    ...logicForm.value,
+                  };
+                }
+                visible.value = false;
+              }}
+            ></dynamicFormDom>
+          ) : null}
+          {visible.value && modalType.value === "logic" ? (
+            <logicFormDom
+              v-models={[
+                [logicForm.value, "logicForm"],
+                [logicIndex.value, "logicIndex"],
+              ]}
+              triggerModeList={_props.triggerModeList}
+              onClose={() => {
+                if (logicIndex.value) {
+                  LoginTableList.value[Number(logicIndex.value)] = {
+                    ...LoginTableList.value[logicIndex.value],
+                    ...logicForm.value,
+                  };
+                }
+                visible.value = false;
+              }}
+            ></logicFormDom>
+          ) : null}
+        </a-modal>
+      </div>
+    );
+  },
+});