inl-ui 0.0.37 → 0.0.39

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

@@ -1,978 +1,985 @@
-import {
-  defineComponent,
-  onMounted,
-  reactive,
-  ref,
-  watch,
-  PropType,
-} from "vue";
-import { message } from "ant-design-vue";
-import * as thingApis from "@/api/thingInstance";
-import {
-  CaretUpOutlined,
-  CaretRightOutlined,
-  UploadOutlined,
-  DeleteOutlined,
-} 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 { SHOW_ALL } from "ant-design-vue/lib/vc-tree-select/utils/strategyUtil";
-import { cloneDeep } from "lodash";
-import { customRequest } from "@/pageComponent/utils/upload";
-
-const dataTypeList = [
-  { id: 201, name: "BOOL" },
-  { id: 202, name: "CHAR" },
-  { id: 203, name: "I_8" },
-  { id: 204, name: "I_16" },
-  { id: 205, name: "I_32" },
-  { id: 206, name: "I_64" },
-  { id: 207, name: "F_32" },
-  { id: 208, name: "F_64" },
-  { id: 209, name: "STRING" },
-  { id: 210, name: "U_8" },
-  { id: 211, name: "U_16" },
-  { id: 212, name: "U_32" },
-  { id: 240, name: "DWORD" },
-  { id: 241, name: "BIT_BOOL" },
-];
-const outputTypeList = [
-  { id: 351, name: "BOO" },
-  { id: 352, name: "INT" },
-  { id: 353, name: "FLT" },
-  { id: 354, name: "STR" },
-];
-
-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<any>();
-    // 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: "thingPropertyCode",
-      },
-      {
-        title: "pre_point_code",
-        key: "prePointCode",
-        width: 150,
-      },
-      {
-        title: "PDU",
-        key: "pduCode",
-        width: 150,
-      },
-      {
-        title: "地址",
-        key: "address",
-        width: 150,
-      },
-      {
-        title: "输入数据类型",
-        key: "dataTypeId",
-      },
-      {
-        title: "输出数据类型",
-        key: "outputTypeId",
-      },
-      {
-        title: "",
-        key: "action",
-      },
-    ]);
-    const dynamicTableList = ref<any>([]);
-    const pduInfoList = ref<any>([]);
-    // 逻辑表格
-    const LoginColumns = ref([
-      {
-        title: "属性名称",
-        dataIndex: "displayLabel",
-      },
-      {
-        title: "属性编码",
-        dataIndex: "thingPropertyCode",
-      },
-      {
-        title: "触发公式",
-        dataIndex: "triggerMode",
-      },
-      {
-        title: "规则公式",
-        dataIndex: "rule",
-      },
-      {
-        title: "",
-        dataIndex: "action",
-        width: 50,
-      },
-    ]);
-    const LoginTableList = ref<any>([]);
-    const visible = ref(false);
-    // 报警
-    const formState = ref({
-      equipmentFailure: "",
-      maxDensity: "",
-    });
-    const alarmList = ref<any[]>([]);
-    // 动作表格
-    const actionColumns = ref([]);
-    const actionCTableList = ref([]);
-    const form = ref();
-    const formData = reactive({
-      name: null,
-      code: null,
-      fileUrl: null,
-    });
-    // 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;
-      }
-    };
-
-    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",
-            rules: [{ required: true, message: "请输入名称" }],
-          },
-          {
-            displayLabel: "实例编码",
-            code: "code",
-            display: true,
-            value: value.thingInst?.code,
-            displayType: "text",
-            rules: [{ required: true, message: "请输入编码" }],
-            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.rules = [
-              {
-                required: ele.required,
-                message: `${ele.displayType === "text" ? "请输入" : "请选择"}${
-                  ele.displayLabel
-                }`,
-              },
-            ];
-
-            if (ele.columnType === "long" && ele.code !== "ID") {
-              formData[ele.code] = Number(
-                value.staticMap.map[ele.code] || ele.defaultValue
-              );
-              ele.value = Number(
-                value.staticMap.map[ele.code] || ele.defaultValue
-              );
-            } else {
-              formData[ele.code] =
-                value.staticMap.map[ele.code] || ele.defaultValue;
-              ele.value = value.staticMap.map[ele.code] || ele.defaultValue;
-            }
-
-            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];
-
-        dynamicTableList.value = colArr.value.filter(
-          (ele: any) => ele.propertyType === "metric" && ele.display
-        );
-        dynamicTableList.value = dynamicTableList.value.map((item) => ({
-          ...item,
-          ...value.dynamicProperties.find(
-            (n) => n.thingPropertyCode === item.code
-          ),
-        }));
-
-        pduInfoList.value = value.pduInfoList;
-
-        alarmList.value = colArr.value.filter((ele: any) => {
-          return ele.propertyType === "alarm";
-        });
-        LoginTableList.value = colArr.value.filter((ele: any) => {
-          return ele.propertyType === "logic" && ele.display;
-        });
-        LoginTableList.value = LoginTableList.value.map((item) => ({
-          ...item,
-          ...value.logicProperties.find(
-            (n) => n.thingPropertyCode === item.code
-          ),
-        }));
-      },
-      {
-        immediate: true,
-      }
-    );
-
-    const save = async () => {
-      const valid = await form.value.validateFields();
-      const param: any = _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.code !== "ID" &&
-            element.columnType === "long" &&
-            typeof element.value === "number" &&
-            `${element.value}`.indexOf(".") > -1
-          ) {
-            message.error(`${element.name}应为整数`);
-            return false;
-          }
-
-          param.staticMap.map[element.code] = element.value;
-        }
-      });
-      param.dynamicProperties.forEach((element, idx: number) => {
-        const dy: any = dynamicTableList.value.find((ele: any) => {
-          return element.thingPropertyCode === ele.thingPropertyCode;
-        });
-
-        if (dy) {
-          param.dynamicProperties[idx] = dy;
-        }
-      });
-
-      param.logicProperties.forEach((element) => {
-        const dy: any = LoginTableList.value.find((ele: any) => {
-          return element.thingPropertyCode === ele.thingPropertyCode;
-        });
-        if (dy) {
-          element.triggerMode = dy.triggerMode;
-          element.ruleMode = dy.ruleMode;
-          element.rule = dy.rule;
-          element.timeInterval = dy.timeInterval;
-          element.listenProperty = dy.listenProperty;
-        }
-      });
-      const res: any = await thingApis.editThing(param);
-      if (res.code === "M0000") {
-        message.success("保存成功");
-        _context.emit("toDetail", _props.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 customRequest = (options: any) => {
-    //   const { file, onSuccess, onError } = options;
-    //   const fileData = new FormData();
-    //   fileData.append("file", file as any);
-    //   thingApis.uploadCommon(fileData, headers).then((res: any) => {
-    //     if (res.code === "M0000") {
-    //       formData.fileUrl = res.data;
-    //       message.success("上传成功");
-    //       onSuccess("response", file);
-    //     } else {
-    //       message.error("上传失败");
-    //       onError("error", file);
-    //     }
-    //   });
-    // };
-    const beforeUpload = (file) => {
-      let size = file.size / 1024 / 1024;
-      if (size > 2) {
-        message.error("文件不能大于2M");
-        return false;
-      }
-    };
-
-    let timeout: any;
-    const prePointList = ref<any>([]);
-
-    const searchHandle = (val: string, callBack: any) => {
-      if (val) {
-        if (timeout) {
-          clearTimeout(timeout);
-          timeout = null;
-        }
-
-        timeout = setTimeout(async () => {
-          prePointList.value = [];
-          const { data } = await thingApis.prePointCodeByKeywords(val);
-
-          // 直接修改下拉的参数值（第一种方式）
-          callBack();
-          if (data.length > 0) {
-            prePointList.value = data;
-          }
-
-          // 在下拉中显示输入的选项（第二种方式）
-          // if (data.length > 0) {
-          //   let haveSame = false;
-          //   data.forEach((obj: any) => {
-          //     if (obj.code === val) {
-          //       haveSame = true;
-          //     }
-          //   });
-          //   prePointList.value = data;
-          //   if (!haveSame) {
-          //     prePointList.value = [{ code: val }, ...prePointList.value];
-          //   }
-          // } else {
-          //   prePointList.value = [{ code: val }];
-          // }
-        }, 300);
-      }
-    };
-
-    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"
-            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"
-              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?.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}
-                        rules={ele.rules}
-                        style={{ width: "100%" }}
-                        label-col={{ span: 8 }}
-                        wrapper-col={{ span: 16 }}
-                      >
-                        {ele.displayType === "text" ? (
-                          <>
-                            {typeFilter(ele.columnType) === "number" ? (
-                              <a-input-number
-                                v-model={[ele.value, "value"]}
-                                readonly={ele.readonly}
-                                type={
-                                  ele.code === "ID"
-                                    ? "text"
-                                    : typeFilter(ele.columnType)
-                                }
-                                onChange={() => {
-                                  formData[ele.code] = ele.value;
-                                }}
-                                style={{ width: "100%" }}
-                              ></a-input-number>
-                            ) : (
-                              <a-input
-                                v-model={[ele.value, "value"]}
-                                readonly={ele.readonly}
-                                type={
-                                  ele.code === "ID"
-                                    ? "text"
-                                    : 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}
-                      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"
-            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="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.key === "prePointCode") {
-                    return (
-                      <a-select
-                        v-model={[record.prePointCode, "value"]}
-                        allowClear
-                        placeholder="请选择或输入"
-                        style="width: 180px"
-                        show-search
-                        onSearch={(value: string) => {
-                          searchHandle(value, () => {
-                            record.prePointCode = value;
-                            record.prePointEntry.code = value;
-                          });
-                        }}
-                        onChange={(value: string, option: any) => {
-                          if (value && option?.obj?.id) {
-                            record.prePointEntry = option?.obj;
-
-                            // pduCode改变 需修改两个preCode
-                            if (option?.obj?.pduCode) {
-                              const pduObj = pduInfoList.value.find(
-                                (pduInfo: any) =>
-                                  pduInfo.pduCode === option?.obj?.pduCode
-                              );
-
-                              if (pduObj?.preCode) {
-                                record.preCode = pduObj?.preCode;
-                                record.prePointEntry.preCode = pduObj?.preCode;
-                              }
-                            }
-                          }
-                        }}
-                        options={prePointList.value.map(
-                          (prePoint: any, index: number) => {
-                            return {
-                              value: prePoint.code,
-                              label: prePoint.code,
-                              key: index,
-                              obj: prePoint,
-                            };
-                          }
-                        )}
-                        v-slots={{
-                          option: (opt: any) => {
-                            return (
-                              <div
-                                class="flex-center"
-                                style="justify-content: space-between;"
-                              >
-                                {opt.label}
-                              </div>
-                            );
-                          },
-                        }}
-                      ></a-select>
-                    );
-                  }
-
-                  if (
-                    column.key === "pduCode" &&
-                    "prePointEntry" in record &&
-                    "pduCode" in record.prePointEntry
-                  ) {
-                    return (
-                      <a-select
-                        v-model={[record.prePointEntry.pduCode, "value"]}
-                        style="width: 100%"
-                        onChange={(value: string, option: any) => {
-                          // pduCode改变 需修改两个preCode
-                          record.preCode =
-                            pduInfoList.value[option.key].preCode;
-                          record.prePointEntry.preCode =
-                            pduInfoList.value[option.key].preCode;
-                        }}
-                      >
-                        {pduInfoList.value.map((pduInfo: any, idx: number) => (
-                          <a-select-option value={pduInfo.pduCode} key={idx}>
-                            {pduInfo.pduCode}
-                          </a-select-option>
-                        ))}
-                      </a-select>
-                    );
-                  }
-
-                  if (
-                    column.key === "address" &&
-                    "prePointEntry" in record &&
-                    "address" in record.prePointEntry
-                  ) {
-                    return (
-                      <a-input
-                        v-model={[record.prePointEntry.address, "value"]}
-                      ></a-input>
-                    );
-                  }
-
-                  if (
-                    column.key === "dataTypeId" &&
-                    "prePointEntry" in record &&
-                    "dataTypeId" in record.prePointEntry
-                  ) {
-                    return (
-                      <a-select
-                        v-model={[record.prePointEntry.dataTypeId, "value"]}
-                        style="width: 100%"
-                      >
-                        {dataTypeList.map((type: any) => (
-                          <a-select-option value={type.id} key={type.id}>
-                            {type.name}
-                          </a-select-option>
-                        ))}
-                      </a-select>
-                    );
-                  }
-
-                  if (
-                    column.key === "outputTypeId" &&
-                    "prePointEntry" in record &&
-                    "outputTypeId" in record.prePointEntry
-                  ) {
-                    return (
-                      <a-select
-                        v-model={[record.prePointEntry.outputTypeId, "value"]}
-                        style="width: 100%"
-                      >
-                        {outputTypeList.map((type: any) => (
-                          <a-select-option value={type.id} key={type.id}>
-                            {type.name}
-                          </a-select-option>
-                        ))}
-                      </a-select>
-                    );
-                  }
-
-                  if (column.key === "action") {
-                    return (
-                      <a-button
-                        type="link"
-                        onClick={() => {
-                          modalType.value = "dynamic";
-
-                          dynamicIndex.value = `${index}`;
-                          dynamicForm.value = record;
-                          visible.value = true;
-                        }}
-                      >
-                        高级 <double-right-outlined />
-                      </a-button>
-                    );
-                  }
-                },
-              }}
-            ></a-table>
-          </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="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 === "rule") {
-                    return (
-                      <a-input
-                        v-model={[record[column.dataIndex], "value"]}
-                      ></a-input>
-                    );
-                  }
-                },
-              }}
-            ></a-table>
-          </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" : ""}>
-            <div style={{ padding: "10px 20px" }}>
-              创建实例后,可前往
-              <a
-                onClick={() => {
-                  _context.emit("toRoute");
-                }}
-              >
-                烽火报警
-              </a>
-              配置报警规则
-            </div>
-            <a-form
-              model={formState.value}
-              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: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} />
-        <a-modal
-          v-model={[visible.value, "visible"]}
-          title="高级配置"
-          footer={false}
-          bodyStyle={{ height: "600px", overflowY: "auto" }}
-        >
-          {visible.value && modalType.value === "dynamic" ? (
-            <dynamicFormDom
-              v-models={[
-                [dynamicForm.value, "dynamicForm"],
-                [dynamicIndex.value, "dynamicIndex"],
-              ]}
-              triggerModeList={_props.triggerModeList}
-              onClose={() => {
-                if (dynamicIndex.value) {
-                  dynamicTableList.value[Number(dynamicIndex.value)] =
-                    cloneDeep(dynamicForm.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,
+  reactive,
+  ref,
+  watch,
+  PropType,
+} from "vue";
+import { message } from "ant-design-vue";
+import * as thingApis from "@/api/thingInstance";
+import {
+  CaretUpOutlined,
+  CaretRightOutlined,
+  UploadOutlined,
+  DeleteOutlined,
+} 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 { SHOW_ALL } from "ant-design-vue/lib/vc-tree-select/utils/strategyUtil";
+import { cloneDeep } from "lodash";
+import { customRequest } from "@/pageComponent/utils/upload";
+
+const dataTypeList = [
+  { id: 201, name: "BOOL" },
+  { id: 202, name: "CHAR" },
+  { id: 203, name: "I_8" },
+  { id: 204, name: "I_16" },
+  { id: 205, name: "I_32" },
+  { id: 206, name: "I_64" },
+  { id: 207, name: "F_32" },
+  { id: 208, name: "F_64" },
+  { id: 209, name: "STRING" },
+  { id: 210, name: "U_8" },
+  { id: 211, name: "U_16" },
+  { id: 212, name: "U_32" },
+  { id: 240, name: "DWORD" },
+  { id: 241, name: "BIT_BOOL" },
+];
+const outputTypeList = [
+  { id: 351, name: "BOO" },
+  { id: 352, name: "INT" },
+  { id: 353, name: "FLT" },
+  { id: 354, name: "STR" },
+];
+
+export default defineComponent({
+  components: { editRelation, logicFormDom, dynamicFormDom },
+  props: {
+    data: Object,
+    triggerModeList: {
+      type: Array as PropType<Array<{ [key: string]: string }>>,
+      default: [],
+    },
+    hideBackBtn: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(_props, _context) {
+    const headers = {
+      "Content-Type": "multipart/form-data",
+    };
+    // 动态高级配置表单
+    const dynamicForm = ref<any>();
+    // 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: "thingPropertyCode",
+      },
+      {
+        title: "pre_point_code",
+        key: "prePointCode",
+        width: 150,
+      },
+      {
+        title: "PDU",
+        key: "pduCode",
+        width: 150,
+      },
+      {
+        title: "地址",
+        key: "address",
+        width: 150,
+      },
+      {
+        title: "输入数据类型",
+        key: "dataTypeId",
+      },
+      {
+        title: "输出数据类型",
+        key: "outputTypeId",
+      },
+      {
+        title: "",
+        key: "action",
+      },
+    ]);
+    const dynamicTableList = ref<any>([]);
+    const pduInfoList = ref<any>([]);
+    // 逻辑表格
+    const LoginColumns = ref([
+      {
+        title: "属性名称",
+        dataIndex: "displayLabel",
+      },
+      {
+        title: "属性编码",
+        dataIndex: "thingPropertyCode",
+      },
+      {
+        title: "触发公式",
+        dataIndex: "triggerMode",
+      },
+      {
+        title: "规则公式",
+        dataIndex: "rule",
+      },
+      {
+        title: "",
+        dataIndex: "action",
+        width: 50,
+      },
+    ]);
+    const LoginTableList = ref<any>([]);
+    const visible = ref(false);
+    // 报警
+    const formState = ref({
+      equipmentFailure: "",
+      maxDensity: "",
+    });
+    const alarmList = ref<any[]>([]);
+    // 动作表格
+    const actionColumns = ref([]);
+    const actionCTableList = ref([]);
+    const form = ref();
+    const formData = reactive({
+      name: null,
+      code: null,
+      fileUrl: null,
+    });
+    // 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;
+      }
+    };
+
+    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",
+            rules: [{ required: true, message: "请输入名称" }],
+          },
+          {
+            displayLabel: "实例编码",
+            code: "code",
+            display: true,
+            value: value.thingInst?.code,
+            displayType: "text",
+            rules: [{ required: true, message: "请输入编码" }],
+            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.rules = [
+              {
+                required: ele.required,
+                message: `${ele.displayType === "text" ? "请输入" : "请选择"}${
+                  ele.displayLabel
+                }`,
+              },
+            ];
+
+            if (ele.columnType === "long" && ele.code !== "ID") {
+              formData[ele.code] = Number(
+                value.staticMap.map[ele.code] || ele.defaultValue
+              );
+              ele.value = Number(
+                value.staticMap.map[ele.code] || ele.defaultValue
+              );
+            } else {
+              formData[ele.code] =
+                value.staticMap.map[ele.code] || ele.defaultValue;
+              ele.value = value.staticMap.map[ele.code] || ele.defaultValue;
+            }
+
+            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];
+
+        dynamicTableList.value = colArr.value.filter(
+          (ele: any) => ele.propertyType === "metric" && ele.display
+        );
+        dynamicTableList.value = dynamicTableList.value.map((item) => ({
+          ...item,
+          ...value.dynamicProperties.find(
+            (n) => n.thingPropertyCode === item.code
+          ),
+        }));
+
+        pduInfoList.value = value.pduInfoList;
+
+        alarmList.value = colArr.value.filter((ele: any) => {
+          return ele.propertyType === "alarm";
+        });
+        LoginTableList.value = colArr.value.filter((ele: any) => {
+          return ele.propertyType === "logic" && ele.display;
+        });
+        LoginTableList.value = LoginTableList.value.map((item) => ({
+          ...item,
+          ...value.logicProperties.find(
+            (n) => n.thingPropertyCode === item.code
+          ),
+        }));
+      },
+      {
+        immediate: true,
+      }
+    );
+
+    const save = async () => {
+      const valid = await form.value.validateFields();
+      const param: any = _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.code !== "ID" &&
+            element.columnType === "long" &&
+            typeof element.value === "number" &&
+            `${element.value}`.indexOf(".") > -1
+          ) {
+            message.error(`${element.name}应为整数`);
+            return false;
+          }
+
+          param.staticMap.map[element.code] = element.value;
+        }
+      });
+      param.dynamicProperties.forEach((element, idx: number) => {
+        const dy: any = dynamicTableList.value.find((ele: any) => {
+          return element.thingPropertyCode === ele.thingPropertyCode;
+        });
+
+        if (dy) {
+          param.dynamicProperties[idx] = dy;
+        }
+      });
+
+      param.logicProperties.forEach((element) => {
+        const dy: any = LoginTableList.value.find((ele: any) => {
+          return element.thingPropertyCode === ele.thingPropertyCode;
+        });
+        if (dy) {
+          element.triggerMode = dy.triggerMode;
+          element.ruleMode = dy.ruleMode;
+          element.rule = dy.rule;
+          element.timeInterval = dy.timeInterval;
+          element.listenProperty = dy.listenProperty;
+        }
+      });
+      const res: any = await thingApis.editThing(param);
+      if (res.code === "M0000") {
+        message.success("保存成功");
+        _context.emit("toDetail", _props.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 customRequest = (options: any) => {
+    //   const { file, onSuccess, onError } = options;
+    //   const fileData = new FormData();
+    //   fileData.append("file", file as any);
+    //   thingApis.uploadCommon(fileData, headers).then((res: any) => {
+    //     if (res.code === "M0000") {
+    //       formData.fileUrl = res.data;
+    //       message.success("上传成功");
+    //       onSuccess("response", file);
+    //     } else {
+    //       message.error("上传失败");
+    //       onError("error", file);
+    //     }
+    //   });
+    // };
+    const beforeUpload = (file) => {
+      let size = file.size / 1024 / 1024;
+      if (size > 2) {
+        message.error("文件不能大于2M");
+        return false;
+      }
+    };
+
+    let timeout: any;
+    const prePointList = ref<any>([]);
+
+    const searchHandle = (val: string, callBack: any) => {
+      if (val) {
+        if (timeout) {
+          clearTimeout(timeout);
+          timeout = null;
+        }
+
+        timeout = setTimeout(async () => {
+          prePointList.value = [];
+          const { data } = await thingApis.prePointCodeByKeywords(val);
+
+          // 直接修改下拉的参数值（第一种方式）
+          callBack();
+          if (data.length > 0) {
+            prePointList.value = data;
+          }
+
+          // 在下拉中显示输入的选项（第二种方式）
+          // if (data.length > 0) {
+          //   let haveSame = false;
+          //   data.forEach((obj: any) => {
+          //     if (obj.code === val) {
+          //       haveSame = true;
+          //     }
+          //   });
+          //   prePointList.value = data;
+          //   if (!haveSame) {
+          //     prePointList.value = [{ code: val }, ...prePointList.value];
+          //   }
+          // } else {
+          //   prePointList.value = [{ code: val }];
+          // }
+        }, 300);
+      }
+    };
+
+    return () => (
+      <div class="editThing">
+        <div class="header flex">
+          {!_props.hideBackBtn && (
+            <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"
+            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"
+              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?.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}
+                        rules={ele.rules}
+                        style={{ width: "100%" }}
+                        label-col={{ span: 8 }}
+                        wrapper-col={{ span: 16 }}
+                      >
+                        {ele.displayType === "text" ? (
+                          <>
+                            {typeFilter(ele.columnType) === "number" ? (
+                              <a-input-number
+                                v-model={[ele.value, "value"]}
+                                readonly={ele.readonly}
+                                type={
+                                  ele.code === "ID"
+                                    ? "text"
+                                    : typeFilter(ele.columnType)
+                                }
+                                onChange={() => {
+                                  formData[ele.code] = ele.value;
+                                }}
+                                style={{ width: "100%" }}
+                              ></a-input-number>
+                            ) : (
+                              <a-input
+                                v-model={[ele.value, "value"]}
+                                readonly={ele.readonly}
+                                type={
+                                  ele.code === "ID"
+                                    ? "text"
+                                    : 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}
+                      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"
+            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="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.key === "prePointCode") {
+                    return (
+                      <a-select
+                        v-model={[record.prePointCode, "value"]}
+                        allowClear
+                        placeholder="请选择或输入"
+                        style="width: 180px"
+                        show-search
+                        onSearch={(value: string) => {
+                          searchHandle(value, () => {
+                            record.prePointCode = value;
+                            record.prePointEntry.code = value;
+                          });
+                        }}
+                        onChange={(value: string, option: any) => {
+                          if (value && option?.obj?.id) {
+                            record.prePointEntry = option?.obj;
+
+                            // pduCode改变 需修改两个preCode
+                            if (option?.obj?.pduCode) {
+                              const pduObj = pduInfoList.value.find(
+                                (pduInfo: any) =>
+                                  pduInfo.pduCode === option?.obj?.pduCode
+                              );
+
+                              if (pduObj?.preCode) {
+                                record.preCode = pduObj?.preCode;
+                                record.prePointEntry.preCode = pduObj?.preCode;
+                              }
+                            }
+                          }
+                        }}
+                        options={prePointList.value.map(
+                          (prePoint: any, index: number) => {
+                            return {
+                              value: prePoint.code,
+                              label: prePoint.code,
+                              key: index,
+                              obj: prePoint,
+                            };
+                          }
+                        )}
+                        v-slots={{
+                          option: (opt: any) => {
+                            return (
+                              <div
+                                class="flex-center"
+                                style="justify-content: space-between;"
+                              >
+                                {opt.label}
+                              </div>
+                            );
+                          },
+                        }}
+                      ></a-select>
+                    );
+                  }
+
+                  if (
+                    column.key === "pduCode" &&
+                    "prePointEntry" in record &&
+                    "pduCode" in record.prePointEntry
+                  ) {
+                    return (
+                      <a-select
+                        v-model={[record.prePointEntry.pduCode, "value"]}
+                        style="width: 100%"
+                        onChange={(value: string, option: any) => {
+                          // pduCode改变 需修改两个preCode
+                          record.preCode =
+                            pduInfoList.value[option.key].preCode;
+                          record.prePointEntry.preCode =
+                            pduInfoList.value[option.key].preCode;
+                        }}
+                      >
+                        {pduInfoList.value.map((pduInfo: any, idx: number) => (
+                          <a-select-option value={pduInfo.pduCode} key={idx}>
+                            {pduInfo.pduCode}
+                          </a-select-option>
+                        ))}
+                      </a-select>
+                    );
+                  }
+
+                  if (
+                    column.key === "address" &&
+                    "prePointEntry" in record &&
+                    "address" in record.prePointEntry
+                  ) {
+                    return (
+                      <a-input
+                        v-model={[record.prePointEntry.address, "value"]}
+                      ></a-input>
+                    );
+                  }
+
+                  if (
+                    column.key === "dataTypeId" &&
+                    "prePointEntry" in record &&
+                    "dataTypeId" in record.prePointEntry
+                  ) {
+                    return (
+                      <a-select
+                        v-model={[record.prePointEntry.dataTypeId, "value"]}
+                        style="width: 100%"
+                      >
+                        {dataTypeList.map((type: any) => (
+                          <a-select-option value={type.id} key={type.id}>
+                            {type.name}
+                          </a-select-option>
+                        ))}
+                      </a-select>
+                    );
+                  }
+
+                  if (
+                    column.key === "outputTypeId" &&
+                    "prePointEntry" in record &&
+                    "outputTypeId" in record.prePointEntry
+                  ) {
+                    return (
+                      <a-select
+                        v-model={[record.prePointEntry.outputTypeId, "value"]}
+                        style="width: 100%"
+                      >
+                        {outputTypeList.map((type: any) => (
+                          <a-select-option value={type.id} key={type.id}>
+                            {type.name}
+                          </a-select-option>
+                        ))}
+                      </a-select>
+                    );
+                  }
+
+                  if (column.key === "action") {
+                    return (
+                      <a-button
+                        type="link"
+                        onClick={() => {
+                          modalType.value = "dynamic";
+
+                          dynamicIndex.value = `${index}`;
+                          dynamicForm.value = record;
+                          visible.value = true;
+                        }}
+                      >
+                        高级 <double-right-outlined />
+                      </a-button>
+                    );
+                  }
+                },
+              }}
+            ></a-table>
+          </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="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 === "rule") {
+                    return (
+                      <a-input
+                        v-model={[record[column.dataIndex], "value"]}
+                      ></a-input>
+                    );
+                  }
+                },
+              }}
+            ></a-table>
+          </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" : ""}>
+            <div style={{ padding: "10px 20px" }}>
+              创建实例后,可前往
+              <a
+                onClick={() => {
+                  _context.emit("toRoute");
+                }}
+              >
+                烽火报警
+              </a>
+              配置报警规则
+            </div>
+            <a-form
+              model={formState.value}
+              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: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} />
+        <a-modal
+          v-model={[visible.value, "visible"]}
+          title="高级配置"
+          footer={false}
+          bodyStyle={{ height: "600px", overflowY: "auto" }}
+        >
+          {visible.value && modalType.value === "dynamic" ? (
+            <dynamicFormDom
+              v-models={[
+                [dynamicForm.value, "dynamicForm"],
+                [dynamicIndex.value, "dynamicIndex"],
+              ]}
+              triggerModeList={_props.triggerModeList}
+              onClose={() => {
+                if (dynamicIndex.value) {
+                  dynamicTableList.value[Number(dynamicIndex.value)] =
+                    cloneDeep(dynamicForm.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>
+    );
+  },
+});