Merge branch 'f-dev' into 'main'

feat：设备列表新增TBox远程连接 和修改Teambition上的问题和修改设备配置相关

See merge request huang/yun-teng-iot-front!264

@@ -17,6 +17,7 @@ enum EDeviceConfigApi {
   DEVICE_CONFIG_EXPORT = '/deviceProfile/export',
   DEVICE_CONFIG_IMPORT = '/deviceProfile/import',
   SET_DEVICE_ISDEFAULT = '/deviceProfile',
+  FRP_API = '/frp/',
 }
 
 /**
@@ -114,3 +115,18 @@ export const setDeviceProfileIsDefaultApi = (id: string, v, params?: {}) => {
     }
   );
 };
+
+/**
+ * Frp内网穿透信息API
+ */
+export const frpGetInfoApi = (proxyName: string) => {
+  return defHttp.get({
+    url: `${EDeviceConfigApi.FRP_API}${proxyName}`,
+  });
+};
+
+export const frpPutInfoApi = (proxyName: string, enableRemote: number) => {
+  return defHttp.put({
+    url: `${EDeviceConfigApi.FRP_API}${proxyName}/${enableRemote}`,
+  });
+};

@@ -60,7 +60,7 @@
   });
   const emit = defineEmits(['expand']);
 
-  const show = ref(true);
+  const show = ref(false);
 
   const { prefixCls } = useDesign('collapse-container');
 

@@ -9,5 +9,7 @@ export { useForm } from './src/hooks/useForm';
 export { default as ApiSelect } from './src/components/ApiSelect.vue';
 export { default as RadioButtonGroup } from './src/components/RadioButtonGroup.vue';
 export { default as ApiTreeSelect } from './src/components/ApiTreeSelect.vue';
+export { default as ApiRadioGroup } from './src/components/ApiRadioGroup.vue';
+
 
 export { BasicForm };

@@ -27,6 +27,7 @@ import { BasicUpload } from '/@/components/Upload';
 import { StrengthMeter } from '/@/components/StrengthMeter';
 import { IconPicker } from '/@/components/Icon';
 import { CountdownInput } from '/@/components/CountDown';
+import ApiRadioGroup from './components/ApiRadioGroup.vue';
 //自定义组件
 import JAddInput from './jeecg/components/JAddInput.vue';
 
@@ -39,6 +40,7 @@ componentMap.set('InputSearch', Input.Search);
 componentMap.set('InputTextArea', Input.TextArea);
 componentMap.set('InputNumber', InputNumber);
 componentMap.set('AutoComplete', AutoComplete);
+componentMap.set('ApiRadioGroup', ApiRadioGroup);
 
 componentMap.set('Select', Select);
 componentMap.set('ApiSelect', ApiSelect);

+<!--
+ * @Description:It is troublesome to implement radio button group in the form. So it is extracted independently as a separate component
+-->
+<template>
+  <RadioGroup v-bind="attrs" v-model:value="state" button-style="solid" @change="handleChange">
+    <template v-for="item in getOptions" :key="`${item.value}`">
+      <RadioButton v-if="props.isBtn" :value="item.value" :disabled="item.disabled">
+        {{ item.label }}
+      </RadioButton>
+      <Radio v-else :value="item.value" :disabled="item.disabled">
+        {{ item.label }}
+      </Radio>
+    </template>
+  </RadioGroup>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref, watchEffect, computed, unref, watch } from 'vue';
+  import { Radio } from 'ant-design-vue';
+  import { isFunction } from '/@/utils/is';
+  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
+  import { useAttrs } from '/@/hooks/core/useAttrs';
+  import { propTypes } from '/@/utils/propTypes';
+  import { get, omit } from 'lodash-es';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  type OptionsItem = { label: string; value: string | number | boolean; disabled?: boolean };
+
+  export default defineComponent({
+    name: 'ApiRadioGroup',
+    components: {
+      RadioGroup: Radio.Group,
+      RadioButton: Radio.Button,
+      Radio,
+    },
+    props: {
+      api: {
+        type: Function as PropType<(arg?: Recordable | string) => Promise<OptionsItem[]>>,
+        default: null,
+      },
+      params: {
+        type: [Object, String] as PropType<Recordable | string>,
+        default: () => ({}),
+      },
+      value: {
+        type: [String, Number, Boolean] as PropType<string | number | boolean>,
+      },
+      isBtn: {
+        type: [Boolean] as PropType<boolean>,
+        default: false,
+      },
+      numberToString: propTypes.bool,
+      resultField: propTypes.string.def(''),
+      labelField: propTypes.string.def('label'),
+      valueField: propTypes.string.def('value'),
+      immediate: propTypes.bool.def(true),
+    },
+    emits: ['options-change', 'change'],
+    setup(props, { emit }) {
+      const options = ref<OptionsItem[]>([]);
+      const loading = ref(false);
+      const isFirstLoad = ref(true);
+      const emitData = ref<any[]>([]);
+      const attrs = useAttrs();
+      const { t } = useI18n();
+      // Embedded in the form, just use the hook binding to perform form verification
+      const [state] = useRuleFormItem(props);
+
+      // Processing options value
+      const getOptions = computed(() => {
+        const { labelField, valueField, numberToString } = props;
+
+        return unref(options).reduce((prev, next: Recordable) => {
+          if (next) {
+            const value = next[valueField];
+            prev.push({
+              label: next[labelField],
+              value: numberToString ? `${value}` : value,
+              ...omit(next, [labelField, valueField]),
+            });
+          }
+          return prev;
+        }, [] as OptionsItem[]);
+      });
+
+      watchEffect(() => {
+        props.immediate && fetch();
+      });
+
+      watch(
+        () => props.params,
+        () => {
+          !unref(isFirstLoad) && fetch();
+        },
+        { deep: true },
+      );
+
+      async function fetch() {
+        const api = props.api;
+        if (!api || !isFunction(api)) return;
+        options.value = [];
+        try {
+          loading.value = true;
+          const res = await api(props.params);
+          if (Array.isArray(res)) {
+            options.value = res;
+            emitChange();
+            return;
+          }
+          if (props.resultField) {
+            options.value = get(res, props.resultField) || [];
+          }
+          emitChange();
+        } catch (error) {
+          console.warn(error);
+        } finally {
+          loading.value = false;
+        }
+      }
+
+      function emitChange() {
+        emit('options-change', unref(getOptions));
+      }
+
+      function handleChange(_, ...args) {
+        emitData.value = args;
+      }
+
+      return { state, getOptions, attrs, loading, t, handleChange, props };
+    },
+  });
+</script>

@@ -82,6 +82,7 @@ export interface ColEx {
 
 export type ComponentType =
   | 'Input'
+  | 'ApiRadioGroup'
   | 'InputGroup'
   | 'InputPassword'
   | 'InputSearch'

@@ -77,7 +77,7 @@
         }
 
         let resStr = '';
-        let dirStr = isBefore ? t('component.time.before') : t('component.time.after');
+        let dirStr = isBefore ? t('component.time.after') : t('component.time.before');
 
         if (diff < ONE_SECONDS) {
           resStr = t('component.time.just');

@@ -477,14 +477,14 @@
     cursor: pointer;
     position: absolute;
     top: 0.85rem;
-    left: 1.1rem;
+    left: 1.1vw;
   }
   .fold-right {
     z-index: 1;
     cursor: pointer;
     position: absolute;
     top: 0.85rem;
-    left: 21.6rem;
+    left: 18.2vw;
   }
   @prefix-cls: ~'@{namespace}-basic-tree';
 

@@ -9,9 +9,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { PlayProtocol } from '../manage/config.data';
 
-  const emit = defineEmits({
-    success: null,
-  });
+  const emit = defineEmits(['success','register']);
 
   const createFlag = ref(false);
 

@@ -15,6 +15,7 @@
   import { ref } from 'vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Popconfirm } from 'ant-design-vue';
+  import { Authority } from '/@/components/Authority';
 
   const enabledBatchDelete = ref(true);
   const [register, { reload, getSelectRowKeys }] = useTable({

@@ -51,23 +51,21 @@ export const step1Schemas: FormSchema[] = [
     },
   },
   {
-    field: 'field7',
-    component: 'RadioGroup',
+    field: 'brand',
+    component: 'ApiRadioGroup',
     label: '选择厂家',
+    required: true,
     colProps: {
       span: 8,
     },
+    defaultValue: 'DIY_',
     componentProps: {
-      options: [
-        {
-          label: '自定义厂家',
-          value: '1',
-        },
-        {
-          label: 'TBox边缘网关',
-          value: '2',
-        },
-      ],
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'DEVICE_BRAND_GATEWAY',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
     },
     ifShow: ({ values }) => isGateWay(values.deviceType),
   },

@@ -22,6 +22,15 @@
       <TabPane key="4" tab="子设备" v-if="deviceDetail?.deviceType === 'GATEWAY'">
         <ChildDevice :fromId="deviceDetail?.tbDeviceId" />
       </TabPane>
+      <!-- 网关设备并且场家是TBox -->
+      <TabPane
+        key="6"
+        tab="TBox"
+        v-if="deviceDetail?.deviceType === 'GATEWAY' && deviceDetail?.brand == 'TBox'"
+      >
+        <TBoxDetail :deviceDetail="deviceDetail" />
+      </TabPane>
+      <!-- 网关设备并且是TBox -->
     </Tabs>
   </BasicDrawer>
 </template>
@@ -34,6 +43,7 @@
   import RealTimeData from '../tabs/RealTimeData.vue';
   import Alarm from '../tabs/Alarm.vue';
   import ChildDevice from '../tabs/ChildDevice.vue';
+  import TBoxDetail from '../tabs/TBoxDetail.vue';
   import CommandIssuance from '../tabs/CommandIssuance.vue';
   import { getDeviceDetail } from '/@/api/device/deviceManager';
   export default defineComponent({
@@ -47,6 +57,7 @@
       Alarm,
       ChildDevice,
       CommandIssuance,
+      TBoxDetail,
     },
     emits: ['reload', 'register'],
     setup() {

@@ -53,12 +53,6 @@
       <a-button type="primary" class="mr-4" @click="copyTbDeviceId">复制设备ID</a-button>
       <a-button type="primary" class="mr-4" @click="copyDeviceToken">复制访问令牌</a-button>
       <a-button type="primary" class="mr-4" @click="manageDeviceToken">管理设备凭证</a-button>
-      <a-button
-        type="primary"
-        v-if="deviceDetail.deviceType == 'GATEWAY'"
-        @click="remoteConnectiondGateway"
-        >远程连接边缘网关</a-button
-      >
       <ManageDeviceTokenModal @register="registerModal" />
     </div>
     <div v-if="deviceDetail?.deviceInfo?.address" class="mt-4">

+<template>
+  <div>
+    <BasicTable @register="registerTable" :dataSource="tableData">
+      <template #status>
+        <Switch
+          checked-children="开"
+          un-checked-children="关"
+          v-model:checked="checked"
+          @change="handleChange"
+          :disabled="enableRemoteDisabled"
+        />
+      </template>
+    </BasicTable>
+    <div style="margin-top: -54vh">
+      <a-button type="primary" class="mr-4" :disabled="disabled" @click="handleFrpRemote"
+        >远程连接</a-button
+      >
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, nextTick } from 'vue';
+  import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
+  import { Switch } from 'ant-design-vue';
+  import { h } from 'vue';
+  import { Tag } from 'ant-design-vue';
+  import { frpGetInfoApi, frpPutInfoApi } from '/@/api/device/deviceConfigApi';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { ConsoleSqlOutlined } from '@ant-design/icons-vue';
+
+  const props = defineProps({
+    deviceDetail: {
+      type: Object,
+      required: true,
+    },
+  });
+
+  const { createMessage } = useMessage();
+  const tableData: any = ref([]);
+  const checked = ref<boolean>(false);
+  const disabled = ref<boolean>(true);
+  const viewDeviceColumn: BasicColumn[] = [
+    {
+      title: 'Frp连接状态',
+      dataIndex: 'status',
+      width: 80,
+      customRender: ({ record }) => {
+        const status = record.status;
+        const color = status == 1 ? 'green' : 'red';
+        const text = status == 1 ? '在线' : '离线';
+        return h(Tag, { color }, () => text);
+      },
+    },
+    {
+      title: '远程连接',
+      dataIndex: 'enableRemote',
+      width: 80,
+      slots: { customRender: 'status' },
+    },
+    {
+      title: '设备SN',
+      dataIndex: 'proxyName',
+      width: 120,
+    },
+  ];
+  const [registerTable] = useTable({
+    title: 'TBox信息',
+    columns: viewDeviceColumn,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    showTableSetting: false,
+    bordered: true,
+  });
+  const enableRemote = ref(0);
+  const proxyName = ref('');
+  const remotePort = ref(0);
+  const address = ref('');
+  const enableRemoteDisabled = ref(false);
+  const getTableData = async () => {
+    // const res = await frpGetInfoApi('1000000061664FF');
+    const res = await frpGetInfoApi(props.deviceDetail.sn);
+    enableRemote.value = res.enableRemote;
+    proxyName.value = res.proxyName;
+    remotePort.value = res.remotePort;
+    address.value = res.address;
+    if (res.enableRemote == 1) {
+      checked.value = true;
+      disabled.value = false;
+      enableRemoteDisabled.value = true;
+    } else {
+      checked.value = false;
+      disabled.value = true;
+      enableRemoteDisabled.value = false;
+    }
+    if (res.status == 0) {
+      enableRemoteDisabled.value = true;
+    } else {
+      enableRemoteDisabled.value = false;
+    }
+    tableData.value.push({
+      enableRemote: res.enableRemote,
+      proxyName: res.proxyName,
+      status: res.status,
+    });
+    if (res == '') {
+      enableRemoteDisabled.value = true;
+      disabled.value = true;
+    }
+  };
+  const handleFrpRemote = async () => {
+    window.open(`${address.value}`);
+  };
+  nextTick(() => {
+    getTableData();
+  });
+  const handleChange = async (e) => {
+    if (e) {
+      disabled.value = false;
+      enableRemote.value = 1;
+      const res = await frpPutInfoApi(proxyName.value, enableRemote.value);
+      if (res.enableRemote == 1) {
+        createMessage.success('开启成功');
+        checked.value = true;
+      }
+    } else {
+      disabled.value = true;
+      enableRemote.value = 0;
+      const res = await frpPutInfoApi(proxyName.value, enableRemote.value);
+      if (res.enableRemote == 0) {
+        createMessage.success('关闭成功');
+        checked.value = false;
+      }
+    }
+  };
+</script>
+<style lang="less" scoped></style>

@@ -214,45 +214,49 @@
         if (isUpdate.value == 1) {
           delete postDeviceConfogData.id;
         }
-        //1 TODO 待解决OID对象唯一标识不能重复问题验证
-        let isMappings = false;
-        // let isQuerying = false;
+        let isMappingsKey = ref(false);
+        let isMappingValue = ref(false);
+        let isQueryings = ref(false);
+        let isOIDRepet = ref(false);
         postDeviceConfogData?.profileData?.transportConfiguration?.communicationConfigs?.forEach(
-          (f) => {
-            // if (f.spec == 'TELEMETRY_QUERYING' && f.queryingFrequencyMs == null) {
-            //   isQuerying = true;
-            // } else {
-            //   isQuerying = false;
-            // }
-            // if (f.spec == 'CLIENT_ATTRIBUTES_QUERYING' && f.queryingFrequencyMs == null) {
-            //   isQuerying = true;
-            // } else {
-            //   isQuerying = false;
-            // }
+          (f: any) => {
+            if (f.spec == 'TELEMETRY_QUERYING' || f.spec == 'CLIENT_ATTRIBUTES_QUERYING') {
+              if (f.queryingFrequencyMs == null) {
+                isQueryings.value = true;
+                return createMessage.error('请填写查询频率');
+              } else {
+                isQueryings.value = false;
+              }
+            }
             if (f.mappings.length == 0) {
-              isMappings = true;
+              isMappingsKey.value = true;
+              isMappingValue.value = true;
             } else {
               f.mappings.forEach((f1) => {
                 const findNoneKey = Object.keys(f1).includes('');
                 if (findNoneKey) {
-                  isMappings = findNoneKey;
-                } else {
-                  isMappings = false;
+                  isMappingsKey.value = true;
                 }
               });
               f.mappings.forEach((f2) => {
                 const findNoneVal = Object.values(f2).includes('');
                 if (findNoneVal) {
-                  isMappings = findNoneVal;
-                } else {
-                  isMappings = false;
+                  isMappingValue.value = true;
+                }
+              });
+              //新增OID不能重复=====同一层级的OID不能重复
+              f.mappings.forEach((item, _) => {
+                if (f.mappings.some((citem) => citem !== item && citem.oid === item.oid)) {
+                  isOIDRepet.value = true;
                 }
               });
             }
           }
         );
-        // if (isQuerying) return createMessage.error('请填写Querying frequency,ms');
-        if (isMappings) return createMessage.error('请填写Date key和OID');
+        if (isQueryings.value) return createMessage.error('请填写查询频率');
+        if (isMappingsKey.value) return createMessage.error('请填写Date key和OID');
+        if (isMappingValue.value) return createMessage.error('请填写Date key和OID');
+        if (isOIDRepet.value) return createMessage.error('OID不能重复');
         deviceConfigAddOrEdit(isEdit.value ? noEditObj : postDeviceConfogData)
           .then((res) => {
             if (!res) return;

@@ -32,7 +32,7 @@ export const CoapSchemas: FormSchema[] = [
   {
     field: 'coapDeviceType',
     component: 'Select',
-    label: 'CoAP 设备类型',
+    label: 'CoAP设备类型',
     defaultValue: 'DEFAULT',
     componentProps: {
       options: [
@@ -45,7 +45,7 @@ export const CoapSchemas: FormSchema[] = [
   {
     field: 'transportPayloadType',
     component: 'Select',
-    label: 'CoAP 设备消息 Payload',
+    label: 'CoAP设备消息Payload',
     defaultValue: 'JSON',
     componentProps: {
       options: [
@@ -59,7 +59,7 @@ export const CoapSchemas: FormSchema[] = [
   {
     field: 'powerMode',
     component: 'Select',
-    label: 'Power Saving Mode',
+    label: '节能模式',
     defaultValue: 'DRX',
     componentProps: {
       options: [
@@ -76,11 +76,11 @@ export const CoapSchemas: FormSchema[] = [
   {
     field: 'psmActivityTimer',
     component: 'InputNumber',
-    label: 'PSM Activity Timer',
+    label: 'PSM活动计时器',
     required: true,
-    defaultValue: '10',
+    defaultValue: 10,
     componentProps: {
-      placeholder: '请输入PSM Activity Timer',
+      placeholder: '请输入PSM活动计时器',
     },
     colProps: { span: 11 },
     ifShow: ({ values }) => isPsm(values.powerMode),
@@ -104,11 +104,11 @@ export const CoapSchemas: FormSchema[] = [
   {
     field: 'edrxCycle',
     component: 'InputNumber',
-    label: 'eDRX cycle',
+    label: 'eDRX循环',
     required: true,
-    defaultValue: '81',
+    defaultValue: 81,
     componentProps: {
-      placeholder: '请输入PSM Activity Timer',
+      placeholder: '请输入eDRX循环',
     },
     colProps: { span: 11 },
     ifShow: ({ values }) => isDrx(values.powerMode),
@@ -132,11 +132,11 @@ export const CoapSchemas: FormSchema[] = [
   {
     field: 'pagingTransmissionWindow',
     component: 'InputNumber',
-    label: 'Paging Transmission Window',
+    label: '寻呼传输窗口',
     required: true,
-    defaultValue: '10',
+    defaultValue: 10,
     componentProps: {
-      placeholder: '请输入Paging Transmission Window',
+      placeholder: '请输入寻呼传输窗口',
     },
     colProps: { span: 11 },
     ifShow: ({ values }) => isDrx(values.powerMode),

+<template>
+  <div>
+    <BasicModal
+      v-bind="$attrs"
+      width="30rem"
+      :height="heightNum"
+      @register="register"
+      title="Add new server config"
+      @cancel="handleCancel"
+      :showOkBtn="true"
+      @ok="handleSubmit"
+      v-model:visible="visible"
+    >
+      <div style="display: flex; align-items: center; justify-content: center">
+        <h2>Server type：</h2>
+        <Select
+          v-model:value="selectValue"
+          style="width: 340px"
+          :options="selectOptions"
+          @change="emitChange"
+        />
+      </div>
+    </BasicModal>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { Select } from 'ant-design-vue';
+  import { SelectTypes } from 'ant-design-vue/es/select';
+
+  const emit = defineEmits(['register', 'emitSelect']);
+  const [register] = useModalInner((data) => {
+    console.log(data);
+  });
+  const heightNum = ref(80);
+  const visible = ref(false);
+  const selectValue = ref('LwM2M');
+  const selectOptions = ref<SelectTypes['options']>([
+    {
+      label: 'LwM2M Server',
+      value: 'LwM2M',
+    },
+    {
+      label: 'Bootstrap Server',
+      value: 'Bootstrap',
+    },
+  ]);
+  const emitChange = (e) => {
+    selectValue.value = e;
+  };
+  const handleSubmit = () => {
+    emit('emitSelect', selectValue.value);
+    handleCancel();
+  };
+
+  const handleCancel = () => {
+    visible.value = false;
+  };
+</script>
+<style lang="less" scoped></style>

@@ -236,7 +236,6 @@ export const deviceSchemas: FormSchema[] = [
     colProps: { span: 22 },
     component: 'InputTextArea',
     componentProps: {
-      disabled: true,
       autoSize: {
         maxRows: 50,
       },
@@ -250,45 +249,31 @@ export const deviceSchemas: FormSchema[] = [
         "keyName": {},
         "attributeLwm2m": {}
       },
-      "bootstrap": {
-        "servers": {
-          "binding": "UQ",
-          "shortId": 123,
-          "lifetime": 300,
-          "notifIfDisabled": true,
-          "defaultMinPeriod": 1
-        },
-        "bootstrapServer": {
-          "bootstrapServerIs": true,
-          "host": "0.0.0.0",
-          "port": 5687,
-          "securityHost": "0.0.0.0",
-          "securityPort": 5688,
-          "serverId": 111,
-          "clientHoldOffTime": 1,
-          "serverPublicKey": "",
-          "bootstrapServerAccountTimeout": 0
-        },
-        "lwm2mServer": {
+      "bootstrap": [
+        {
+          "shortServerId": 123,
           "bootstrapServerIs": false,
           "host": "0.0.0.0",
           "port": 5685,
-          "securityHost": "0.0.0.0",
-          "securityPort": 5686,
-          "serverId": 123,
           "clientHoldOffTime": 1,
           "serverPublicKey": "",
-          "bootstrapServerAccountTimeout": 0
+          "serverCertificate": "",
+          "bootstrapServerAccountTimeout": 0,
+          "lifetime": 300,
+          "defaultMinPeriod": 1,
+          "notifIfDisabled": true,
+          "binding": "U",
+          "securityMode": "NO_SEC"
         }
-      },
+      ],
       "clientLwM2mSettings": {
         "clientOnlyObserveAfterConnect": 1,
         "fwUpdateStrategy": 1,
-        "swUpdateStrategy": 2,
-        "swUpdateResource": "coap://localhost:5685",
+        "swUpdateStrategy": 1,
         "powerMode": "DRX",
         "compositeOperationsSupport": false
       },
+      "bootstrapServerUpdateEnable": false,
       "type": "LWM2M"
     }
     `,

@@ -11,29 +11,44 @@
       </TabPane>
       <TabPane forceRender key="2" tab="Bootstrap">
         <div>
-          <Checkbox v-model:checked="bootstrapServerUpdateEnable">包括引导服务器更新</Checkbox>
-          <Card
+          <Checkbox
+            @change="handleCheckChange($event)"
+            v-model:checked="bootstrapServerUpdateEnable"
+            >包括引导服务器更新</Checkbox
+          >
+          <CollapseContainer
             v-for="(item, index) in dynamicBOOTSTRAP.bootstrap"
             :key="item"
-            title="LwM2M Server"
-            style="width: 99%; margin-top: 2vh"
+            :title="collapseTitle(item)"
+            class="mt-4"
           >
-            <template #extra>
-              <Button size="small" type="dashed" @click="handleRemove(index)">
-                <template #icon>
-                  <MinusCircleOutlined />
-                </template>
+            <template #action>
+              <Button
+                style="margin-right: 1vw"
+                size="small"
+                type="text"
+                @click="handleRemove(index)"
+              >
+                <template #icon> <DeleteOutlined /> </template>
               </Button>
             </template>
-            <!-- BootStrapForm表单项 -->
-            <BootStrapForm :ref="dynamicBindRef.BootStrapFormItemRef" :index="index" :item="item" />
-          </Card>
+            <div style="border: 1px solid #d9d9d9; width: 100%">
+              <div style="margin: 10px 15px">
+                <BootStrapForm
+                  :ref="dynamicBindRef.BootStrapFormItemRef"
+                  :index="index"
+                  :item="item"
+                />
+              </div>
+            </div>
+          </CollapseContainer>
           <div style="margin-top: 2vh">
-            <Button size="middle" type="dashed" @click="handleAdd">
+            <Button size="middle" type="text" @click="handleAdd">
               <template #icon>
                 <PlusCircleOutlined />
               </template>
-              Add LwM2M Server
+              <span v-if="selectCheckStatus">Add server config</span>
+              <span v-else>Add LwM2M Server</span>
             </Button>
           </div>
         </div>
@@ -61,6 +76,7 @@
         <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerDevice" />
       </TabPane>
     </Tabs>
+    <ServerConfigModal @register="registerModal" @emitSelect="acceptEmitFunc" />
   </div>
 </template>
 
@@ -70,8 +86,11 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { modelSchemas, settingsSchemas, deviceSchemas } from './index';
   import BootStrapForm from './cpns/BootStrapForm.vue';
-  import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
+  import { DeleteOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
   import { Button, Checkbox } from 'ant-design-vue';
+  import { CollapseContainer } from '/@/components/Container';
+  import { useModal } from '/@/components/Modal';
+  import ServerConfigModal from './cpns/ServerConfigModal.vue';
 
   export default defineComponent({
     name: 'index',
@@ -80,16 +99,21 @@
       TabPane: Tabs.TabPane,
       BasicForm,
       BootStrapForm,
-      MinusCircleOutlined,
+      DeleteOutlined,
       Card,
       PlusCircleOutlined,
       Button,
       Checkbox,
+      CollapseContainer,
+      ServerConfigModal,
     },
     setup() {
+      const collapseTitle = (item) => {
+        return `LwM2M Server        Short server ID: ${item.shortServerId}        Security config mode: ${item.securityMode}`;
+      };
       const bootstrapServerUpdateEnable = ref(false);
       const dynamicBOOTSTRAP: any = reactive({
-        bootstrap: [{}],
+        bootstrap: [{ securityMode: 'NO_SEC', shortServerId: 1234 }],
       });
       const dynamicBindRef: any = {
         BootStrapFormItemRef: ref([]),
@@ -140,9 +164,20 @@
             span: 14,
           },
         });
+      const [registerModal, { openModal }] = useModal();
 
       const handleAdd = () => {
-        dynamicBOOTSTRAP.bootstrap.push({});
+        //TODO 如果是server config 则只弹窗一次
+        if (selectCheckStatus.value) {
+          openModal(true, {
+            isUpdate: true,
+          });
+        } else {
+          dynamicBOOTSTRAP.bootstrap.push({
+            securityMode: 'NO_SEC',
+            shortServerId: 1234,
+          });
+        }
       };
       const handleRemove = (index) => {
         dynamicBOOTSTRAP.bootstrap.splice(index, 1);
@@ -240,7 +275,32 @@
           resetDeviceValue();
         });
       };
-
+      const selectCheckStatus = ref(false);
+      const handleCheckChange = (e) => {
+        selectCheckStatus.value = e.target.checked;
+        if (!selectCheckStatus.value) {
+          const findIndex = dynamicBOOTSTRAP.bootstrap.findIndex((o) => o.type == 'Bootstrap');
+          if (findIndex !== -1) {
+            dynamicBOOTSTRAP.bootstrap.splice(findIndex, 1);
+          }
+        }
+      };
+      const acceptEmitFunc = (e) => {
+        switch (e) {
+          case 'LwM2M':
+            dynamicBOOTSTRAP.bootstrap.push({
+              securityMode: 'NO_SEC',
+              shortServerId: 1234,
+            });
+            break;
+          case 'Bootstrap':
+            dynamicBOOTSTRAP.bootstrap.push({
+              securityMode: 'NO_SEC',
+              shortServerId: 1234,
+            });
+            break;
+        }
+      };
       return {
         currentKey,
         currentSize,
@@ -256,6 +316,11 @@
         handleAdd,
         handleRemove,
         bootstrapServerUpdateEnable,
+        collapseTitle,
+        handleCheckChange,
+        registerModal,
+        acceptEmitFunc,
+        selectCheckStatus,
       };
     },
   });

@@ -20,7 +20,7 @@ export const MqttSchemas: FormSchema[] = [
   {
     field: 'deviceTelemetryTopic',
     component: 'Input',
-    label: '遥测数据 topic 筛选器',
+    label: '遥测数据主题筛选器',
     required: true,
     defaultValue: 'v1/devices/me/telemetry',
     componentProps: {
@@ -32,7 +32,7 @@ export const MqttSchemas: FormSchema[] = [
     field: 'deviceAttributesTopic',
     component: 'Input',
     required: true,
-    label: 'Attributes topic filter',
+    label: '属性主题过滤器',
     defaultValue: 'v1/devices/me/attributes',
     componentProps: {
       placeholder: '请输入Attributes topic 筛选器',
@@ -64,7 +64,14 @@ export const MqttSchemas: FormSchema[] = [
     colProps: { span: 23 },
     defaultValue: false,
     component: 'Checkbox',
-    renderComponentContent: `启用后，平台将默认使用Protobuf有效载荷格式。如果解析失败，平台将尝试使用JSON有效负载格式。用于固件更新期间的向后兼容性。例如，固件的初始版本使用Json，而新版本使用Protobuf。在设备组的固件更新过程中，需要同时支持Protobuf和JSON。兼容性模式会导致性能轻微下降，因此建议在所有设备更新后禁用此模式。`,
+    ifShow: ({ values }) => isProtobuf(values.transportPayloadType),
+    renderComponentContent: '启用与其他有效负载格式的兼容性',
+  },
+  {
+    field: 'desc1',
+    component: 'InputTextArea',
+    label: '',
+    slot: 'desc1',
     ifShow: ({ values }) => isProtobuf(values.transportPayloadType),
   },
   {
@@ -73,7 +80,16 @@ export const MqttSchemas: FormSchema[] = [
     colProps: { span: 23 },
     defaultValue: false,
     component: 'Checkbox',
-    renderComponentContent: `启用后，平台将使用Json有效负载格式通过以下主题推送属性和RPC：v1/devices/me/attributes/response/$request_id, v1/devices/me/attributes, v1/devices/me/rpc/request/$request_id,v1/devices/me/rpc/response/$request_id.此设置不会影响使用新（v2）主题发送的属性和rpc订阅：v2/a/res/$request_id, v2/a, v2/r/req/$request_id, v2/r/res/$request_id. Where $request_id是一个整数请求标识符。`,
+    renderComponentContent: '默认下行主题使用Json格式',
+    ifShow: ({ values }) =>
+      isProtobuf(values.transportPayloadType) &&
+      !!values.useJsonPayloadFormatForDefaultDownlinkTopics,
+  },
+  {
+    field: 'desc2',
+    component: 'InputTextArea',
+    label: '',
+    slot: 'desc2',
     ifShow: ({ values }) =>
       isProtobuf(values.transportPayloadType) &&
       !!values.useJsonPayloadFormatForDefaultDownlinkTopics,

@@ -19,6 +19,28 @@
             </p>
           </div>
         </template>
+        <template #desc1>
+          <div style="width: 47rem; margin-left: 2rem">
+            <p>
+              启用时，默认情况下，平台将使用Protobuf有效载荷格式。如果解析失败，平台将尝试使用JSON负载格式。
+              有助于固件更新期间的向后兼容性。例如，固件的初始版本使用Json，而新版本使用Protobuf。
+              在设备组的固件更新过程中，需要同时支持Protobuf和JSON。兼容性模式会导致性能略有下降，
+              因此建议在更新所有设备后禁用此模式。
+            </p>
+          </div>
+        </template>
+         <template #desc2>
+          <div style="width: 47rem; margin-left: 2rem">
+            <p>
+             启用后，平台将使用Json负载格式通过以下主题推送属性
+             和RPC:v1/devices/me/attributes/response/$request\u id、v1/devices/me/attributes、
+             v1/devices/me/RPC/request/$request\u id、v1/devices/me/RPC/response/$request\u id。
+             此设置不会影响使用新（v2）主题发送的属性和rpc订阅：
+             v2/a/res/$request\u id、v2/a、v2/r/req/$request\u id、v2/r/res/$request\u id。
+             其中，$request\u id是整数请求标识符。
+            </p>
+          </div>
+        </template>
       </BasicForm>
     </div>
   </div>

@@ -2,7 +2,7 @@
   <div
     v-for="(param, index) in dynamicInput.params"
     :key="index"
-    style="display: flex; margin-top: 0.2vh"
+    style="display: flex; margin-top: 0.25vh"
   >
     <Select
       v-model:value="param.dataType"
@@ -17,7 +17,7 @@
       @change="emitChange"
     />
     <a-input
-      placeholder="请输入OID"
+      placeholder="请输入OID(不能重复)"
       v-model:value="param.oid"
       style="width: 38%; margin: 0 0 5px 8px"
       @change="emitChange"
@@ -30,7 +30,7 @@
     />
   </div>
   <div>
-    <a-button type="dashed" style="width: 38%" @click="add">
+    <a-button type="text" style="width: 28%; margin-top: 0.25vh" @click="add">
       <PlusCircleOutlined />
       Add mapping
     </a-button>

@@ -16,10 +16,12 @@
         >
         <InputNumber
           v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"
-          v-model:value="item.queryingFrequencyMs"
-          :min="5000"
-          :max="1000000000"
+          v-model:value="queryingFrequencyMs"
+          :min="0"
+          :max="99999999999999999999"
+          style="margin-top: 0.25vh"
         />
+        <div style="margin-top: 0.65vh"></div>
         <MappingsForm
           :value="item.mappings"
           @change="handleMappingsChange"
@@ -33,7 +35,7 @@
         style="text-align: center; line-height: 20vh"
         :style="{ lineHeight: dynamicHeight + 'vh' }"
       >
-        <Button size="small" type="dashed" @click="handleRemove(item, index)">
+        <Button size="small" type="default" @click="handleRemove(item, index)">
           <template #icon>
             <MinusCircleOutlined />
           </template>
@@ -47,6 +49,7 @@
   import { Button, InputNumber } from 'ant-design-vue';
   import { MinusCircleOutlined } from '@ant-design/icons-vue';
   import MappingsForm from './MappingsForm.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
 
   const props = defineProps({
     item: {
@@ -59,7 +62,8 @@
   });
   const emit = defineEmits(['removeItem']);
   const dynamicHeight = ref(25);
-
+  const queryingFrequencyMs = ref(5000);
+  const { createMessage } = useMessage();
   const handleMappingsChange = (e) => {
     // eslint-disable-next-line vue/no-mutating-props
     props.item.mappings = e;
@@ -70,9 +74,18 @@
   //设置回显的高度
   const setFieldsValueFunc = () => {
     dynamicHeight.value = props.item.mappings.length * 3 + props.item.mappings.length + 15;
+    queryingFrequencyMs.value = props.item.queryingFrequencyMs;
   };
   //获取表单的值
   const getSnmpFormFunc = () => {
+    if (
+      props.item.spec == 'TELEMETRY_QUERYING' ||
+      props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'
+    ) {
+      if (queryingFrequencyMs.value == null) {
+        return createMessage.error('请填写查询频率');
+      }
+    }
     let obj: any = {};
     obj = {
       ...{ spec: props.item.spec },
@@ -80,7 +93,7 @@
       ...{
         queryingFrequencyMs:
           props.item.spec == 'TELEMETRY_QUERYING' || props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'
-            ? props.item.queryingFrequencyMs
+            ? queryingFrequencyMs.value
             : null,
       },
     };

@@ -27,22 +27,14 @@
                   :options="selectOptions"
                   @change="handleChange(item.spec)"
                   allowClear
-                >
-                  <SelectOption
-                    v-for="it in selectOptions"
-                    :value="it.value"
-                    :key="it.value"
-                    :label="it.label"
-                    :disabled="it.disabled"
-                  />
-                </Select>
+                />
               </SnmpForm>
             </template>
             <div
               v-if="dynamicSNMP.communicationConfigs.length < 4"
               style="margin-left: 0vw; margin-top: 2vh"
             >
-              <Button size="middle" type="dashed" @click="handleAdd">
+              <Button size="middle" type="text" @click="handleAdd">
                 <template #icon>
                   <PlusCircleOutlined />
                 </template>
@@ -60,7 +52,7 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { snmpSchemas } from './config';
   import { PlusCircleOutlined } from '@ant-design/icons-vue';
-  import { Button, Select, SelectOption } from 'ant-design-vue';
+  import { Button, Select } from 'ant-design-vue';
   import SnmpForm from './cpns/SnmpForm.vue';
 
   interface mappingsI {
@@ -77,26 +69,22 @@
     {
       label: 'Telemetry',
       value: 'TELEMETRY_QUERYING',
-      disabled: false,
     },
     {
       label: 'Client attributes',
       value: 'CLIENT_ATTRIBUTES_QUERYING',
-      disabled: false,
     },
     {
       label: 'Shared attributes',
       value: 'SHARED_ATTRIBUTES_SETTING',
-      disabled: false,
     },
     {
       label: 'RPC request',
       value: 'TO_DEVICE_RPC_REQUEST',
-      disabled: false,
     },
   ]);
   const selectValue = ref('');
-  //解决新增选择框互斥问题和编辑回显互斥问题
+  //Select互斥
   const handleChange = (value: string) => {
     selectValue.value = value;
     selectOptions.value.forEach((ele: any) => {
@@ -154,12 +142,15 @@
     });
   };
   const handleRemoveItem = (item, index) => {
-    console.log(item.spec);
-    //2 TODO待解决删除时清空互斥问题
+    selectOptions.value.forEach((ele: any) => {
+      if (ele.value == item.spec) {
+        ele.disabled = false;
+      }
+    });
     dynamicSNMP.communicationConfigs.splice(index, 1);
   };
+
   //回显表单值
-  //TODO 采用这种方式动态绑定ref 都会造成回显数据顺序是随机的但不影响回显数据的正确性
   const setStepFieldsValueFunc = (v) => {
     setFieldsValue({
       timeoutMs: v.timeoutMs,
@@ -168,14 +159,13 @@
     dynamicSNMP.communicationConfigs = v.communicationConfigs;
     dynamicSNMP.communicationConfigs.forEach((snmp, index: number) => {
       nextTick(() => {
-        //编辑回显互斥赋值
         handleChange(snmp.spec);
         unref(dynamicBindRef.SnmpFormItemRef)[index]?.setFieldsValueFunc();
       });
     });
   };
 
-  //获取最终的值
+  //获取表单值
   const getSnmpForm = async () => {
     let value = await validate();
     if (!value) return;

+<template>
+  <div>
+    <BasicModal
+      v-bind="$attrs"
+      width="55rem"
+      :height="heightNum"
+      @register="register"
+      title="执行设备及属性"
+      @cancel="handleCancel"
+      :showOkBtn="false"
+    >
+      <div>
+        <BasicTable @register="registerTable" :dataSource="tableData" />
+      </div>
+    </BasicModal>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, nextTick } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { viewDeviceColumn } from './config.data';
+
+  const heightNum = ref(800);
+  const tableData: any = ref([]);
+  const [registerTable] = useTable({
+    title: '执行设备及属性',
+    columns: viewDeviceColumn,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    showTableSetting: false,
+    bordered: true,
+  });
+  const [register] = useModalInner((data) => {
+    console.log(data);
+    const getTableData = () => {
+      for (let i = 0; i < 100; i++) {
+        tableData.value.push({
+          tdDevice: `设备${i}`,
+          attr: `CO${i}、Temp${i}`,
+        });
+      }
+    };
+    nextTick(() => {
+      getTableData();
+    });
+  });
+  const handleCancel = () => {};
+</script>
+<style></style>

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="30%"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, nextTick } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from './config.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { createOrEditCameraManage } from '/@/api/camera/cameraManager';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const emit = defineEmits(['success', 'register']);
+  const isUpdate = ref(true);
+  const editId = ref('');
+  const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
+    labelWidth: 120,
+    schemas: formSchema,
+    showActionButtonGroup: false,
+  });
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await resetFields();
+    setDrawerProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    if (unref(isUpdate)) {
+      await nextTick();
+      editId.value = data.record.id;
+      await setFieldsValue(data.record);
+    } else {
+      editId.value = '';
+    }
+  });
+
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增报表配置' : '编辑报表配置'));
+
+  async function handleSubmit() {
+    setDrawerProps({ confirmLoading: true });
+    try {
+      const { createMessage } = useMessage();
+      const values = await validate();
+      if (!values) return;
+      let saveMessage = '添加成功';
+      let updateMessage = '修改成功';
+      await createOrEditCameraManage(values);
+      closeDrawer();
+      emit('success');
+      createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);
+    } finally {
+      setTimeout(() => {
+        setDrawerProps({ confirmLoading: false });
+      }, 300);
+    }
+  }
+</script>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import type { FormSchema as QFormSchema } from '/@/components/Form/index';
+import moment from 'moment';
+import { getOrganizationList } from '/@/api/system/system';
+import { copyTransFun } from '/@/utils/fnUtils';
+import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';
+import { getAttribute } from '/@/api/ruleengine/ruleengineApi';
+
+export enum TypeEnum {
+  IS_TIMING = 'TIMING',
+  IS_WEEK = 'week',
+  IS_MONTH = 'month',
+}
+export const isTiming = (type: string) => {
+  return type === TypeEnum.IS_TIMING;
+};
+export const isWeek = (type: string) => {
+  return type === TypeEnum.IS_WEEK;
+};
+
+export const isMonth = (type: string) => {
+  return type === TypeEnum.IS_MONTH;
+};
+
+
+export enum AggregateDataEnum {
+  MIN = 'MIN',
+  MAX = 'MAX',
+  AVG = 'AVG',
+  SUM = 'SUM',
+  COUNT = 'COUNT',
+  NONE = 'NONE',
+}
+
+// 表格配置
+export const columns: BasicColumn[] = [
+  {
+    title: '配置名称',
+    dataIndex: '1',
+    width: 80,
+  },
+  {
+    title: '所属组织',
+    dataIndex: '2',
+    width: 120,
+  },
+  {
+    title: '数据类型',
+    dataIndex: '3',
+    width: 120,
+  },
+  {
+    title: '配置状态',
+    dataIndex: '4',
+    width: 120,
+  },
+  {
+    title: '执行方式',
+    dataIndex: '5',
+    width: 160,
+  },
+  {
+    title: '执行设备',
+    dataIndex: '6',
+    width: 160,
+    slots: { customRender: 'doDeviceSlot' },
+  },
+  {
+    title: '创建人',
+    dataIndex: '7',
+    width: 180,
+  },
+  {
+    title: '创建日期',
+    dataIndex: '8',
+    width: 180,
+  },
+];
+export const viewDeviceColumn: BasicColumn[] = [
+  {
+    title: '设备',
+    dataIndex: 'tdDevice',
+    width: 80,
+  },
+  {
+    title: '属性',
+    dataIndex: 'attr',
+    width: 120,
+  },
+];
+
+// 查询配置
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: '1',
+    label: '配置名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入配置名称',
+    },
+  },
+  {
+    field: '2',
+    label: '配置状态',
+    component: 'Select',
+    colProps: { span: 6 },
+    componentProps: {
+      options: [
+        {
+          label: '启用',
+          value: 1,
+        },
+        {
+          label: '禁用',
+          value: 0,
+        },
+      ],
+      placeholder: '请选择配置状态',
+    },
+  },
+  {
+    field: '3',
+    label: '创建时间',
+    component: 'RangePicker',
+    componentProps: {
+      showTime: {
+        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+      },
+    },
+    colProps: { span: 6 },
+  },
+];
+
+// 新增编辑配置
+export const formSchema: QFormSchema[] = [
+  {
+    field: '1',
+    label: '报表名称',
+    colProps: { span: 24 },
+    helpMessage: ['报表配置', '只对拥有数值型属性', '的设备才能配置'],
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入报表名称',
+    },
+  },
+  {
+    field: 'organizationId',
+    label: '所属组织',
+    colProps: { span: 24 },
+    component: 'ApiTreeSelect',
+    required: true,
+    componentProps: ({ formActionType }) => {
+      const { updateSchema } = formActionType;
+      return {
+        async onChange(e) {
+          if (e) {
+            //获取该组织下的设备
+            const { items } = await screenLinkPageByDeptIdGetDevice({
+              organizationId: e,
+            });
+            const options = items.map((item) => {
+              return {
+                label: item.name,
+                value: item.tbDeviceId,
+              };
+            });
+            updateSchema({
+              field: 'entityId',
+              componentProps: {
+                options,
+                async onChange(e1) {
+                  if (e1) {
+                    const res = await getAttribute(e, e1.join(','));
+                    const attr = res.map((item) => {
+                      return {
+                        label: item,
+                        value: item,
+                      };
+                    });
+                    updateSchema({
+                      field: 'attr',
+                      componentProps: {
+                        options: attr,
+                      },
+                    });
+                  }
+                },
+              },
+            });
+          }
+        },
+        maxLength: 250,
+        placeholder: '请选择所属组织',
+        api: async () => {
+          const data = await getOrganizationList();
+          copyTransFun(data as any as any[]);
+          return data;
+        },
+      };
+    },
+  },
+  {
+    field: '3',
+    label: '描述',
+    colProps: { span: 24 },
+    component: 'InputTextArea',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入描述',
+    },
+  },
+  {
+    field: 'actionS',
+    component: 'RadioGroup',
+    label: '执行方式',
+    colProps: {
+      span: 24,
+    },
+    defaultValue: '1',
+    componentProps: {
+      placeholder: '请选择执行方式',
+      options: [
+        {
+          label: '立即执行',
+          value: '1',
+        },
+        {
+          label: '定时执行',
+          value: 'TIMING',
+        },
+      ],
+    },
+  },
+  {
+    field: 'timeWeek',
+    component: 'Select',
+    label: '周期',
+    required: true,
+    colProps: { span: 24 },
+    defaultValue: '1',
+    componentProps: {
+      placeholder: '请选择周期',
+      options: [
+        { label: '每日', value: 'day' },
+        { label: '每周', value: 'week' },
+        { label: '每月', value: 'month' },
+      ],
+    },
+    ifShow: ({ values }) => isTiming(values.actionS),
+  },
+  {
+    field: '5',
+    component: 'Select',
+    label: '每周',
+    required: true,
+    colProps: { span: 24 },
+    defaultValue: '1',
+    componentProps: {
+      placeholder: '请选择周期',
+      options: [
+        { label: '星期一', value: '1' },
+        { label: '星期二', value: '2' },
+        { label: '星期三', value: '3' },
+        { label: '星期四', value: '3' },
+        { label: '星期五', value: '3' },
+      ],
+    },
+    ifShow: ({ values }) => isWeek(values.timeWeek),
+  },
+  {
+    field: '5',
+    component: 'Select',
+    label: '每月',
+    required: true,
+    colProps: { span: 24 },
+    defaultValue: '1',
+    componentProps: {
+      placeholder: '请选择周期',
+      options: [
+        { label: '1日', value: '1' },
+        { label: '2日', value: '7' },
+        { label: '3日', value: '30' },
+      ],
+    },
+    ifShow: ({ values }) => isMonth(values.timeWeek),
+  },
+  {
+    field: '6',
+    component: 'Select',
+    label: '时间',
+    required: true,
+    colProps: { span: 24 },
+    defaultValue: '1',
+    componentProps: {
+      placeholder: '请选择时间',
+      options: [
+        { label: '00点', value: '1' },
+        { label: '01点', value: '2' },
+        { label: '02点', value: '3' },
+      ],
+    },
+    ifShow: ({ values }) => isTiming(values.actionS),
+  },
+  {
+    field: 'entityId',
+    label: '设备',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择设备',
+      mode: 'multiple',
+    },
+    colProps: { span: 24 },
+  },
+  {
+    field: '7',
+    component: 'RadioGroup',
+    label: '属性性质',
+    required: true,
+    colProps: {
+      span: 24,
+    },
+    defaultValue: '1',
+    componentProps: {
+      placeholder: '请选择属性性质',
+      options: [
+        {
+          label: '共有',
+          value: '1',
+        },
+        {
+          label: '全部',
+          value: '2',
+        },
+      ],
+    },
+  },
+  {
+    field: 'attr',
+    label: '设备属性',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择设备属性',
+    },
+    colProps: { span: 24 },
+  },
+  {
+    field: '9',
+    label: '数据类型',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择数据类型',
+      options: [
+        { label: '历史数据', value: '1' },
+        { label: '同比', value: '2' },
+        { label: '环比', value: '2' },
+      ],
+    },
+    colProps: { span: 24 },
+  },
+  {
+    field: '10',
+    label: '聚合条件',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择聚合条件',
+      options: [
+        {
+          label: '平均值',
+          value: AggregateDataEnum.AVG,
+        },
+        {
+          label: '总和',
+          value: AggregateDataEnum.SUM,
+        },
+        {
+          label: '最大值',
+          value: AggregateDataEnum.MAX,
+        },
+        {
+          label: '最小值',
+          value: AggregateDataEnum.MIN,
+        },
+      ],
+    },
+    colProps: { span: 24 },
+  },
+  {
+    field: '9',
+    label: '查询周期',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择查询周期',
+      options: [
+        { label: '1分钟', value: '60000' },
+        { label: '2分钟', value: '120000' },
+        { label: '3分钟', value: '180000' },
+      ],
+    },
+    colProps: { span: 24 },
+  },
+  {
+    field: '10',
+    label: '间隔时间',
+    required: true,
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择间隔时间',
+      options: [
+        { label: '1秒', value: '1000' },
+        { label: '5秒', value: '5000' },
+        { label: '10秒', value: '10000' },
+        { label: '15秒', value: '150000' },
+      ],
+    },
+    colProps: { span: 24 },
+  },
+];

+<template>
+  <div>
+    <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <Authority value="api:yt:report:post">
+          <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增报表 </a-button>
+        </Authority>
+        <Authority value="api:yt:report:get">
+          <a-button type="primary" @click="go('/report/export')"> 下载报表 </a-button>
+        </Authority>
+        <Authority value="api:yt:report:delete">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
+            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #doDeviceSlot="{ record }">
+        <a-button type="text" @click="handleDeviceView(record)">
+          <span style="color: #377dff">查看设备</span>
+        </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              icon: 'clarity:note-edit-line',
+              auth: 'api:yt:report:update',
+              onClick: handleCreateOrEdit.bind(null, record),
+            },
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              auth: 'api:yt:report:delete',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <ReportConfigDrawer @register="registerDrawer" @success="handleSuccess" />
+    <DevicePreviewModal @register="registerModal" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, nextTick } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useDrawer } from '/@/components/Drawer';
+  import ReportConfigDrawer from './ReportConfigDrawer.vue';
+  import DevicePreviewModal from './DevicePreviewModal.vue';
+  import { cameraPage, deleteCameraManage } from '/@/api/camera/cameraManager';
+  import { searchFormSchema, columns } from './config.data';
+  import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Popconfirm } from 'ant-design-vue';
+  import { useModal } from '/@/components/Modal';
+  import { useGo } from '/@/hooks/web/usePage';
+
+  const searchInfo = reactive<Recordable>({});
+
+  const [registerTable, { reload, setProps }] = useTable({
+    title: '报表列表',
+    api: cameraPage,
+    columns,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    rowKey: 'id',
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+
+  // 弹框
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  // 刷新
+  const handleSuccess = () => {
+    reload();
+  };
+
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+    deleteCameraManage,
+    handleSuccess,
+    setProps
+  );
+
+  nextTick(() => {
+    setProps(selectionOptions);
+  });
+
+  // 新增或编辑
+  const handleCreateOrEdit = (record: Recordable | null) => {
+    if (record) {
+      openDrawer(true, {
+        isUpdate: true,
+        record,
+      });
+    } else {
+      openDrawer(true, {
+        isUpdate: false,
+      });
+    }
+  };
+
+  //查看设备
+  const [registerModal, { openModal }] = useModal();
+  const handleDeviceView = (record) => {
+    openModal(true, {
+      isUpdate: true,
+      record,
+    });
+  };
+  const go = useGo();
+</script>

+<template>
+  <div>
+    <BasicModal
+      v-bind="$attrs"
+      width="55rem"
+      :height="heightNum"
+      @register="register"
+      title="报表趋势图"
+      @cancel="handleCancel"
+      :showOkBtn="false"
+    >
+      <div ref="chartRef" :style="{ height, width }"></div>
+    </BasicModal>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, PropType, Ref, nextTick } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useECharts } from '/@/hooks/web/useECharts';
+
+  defineProps({
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: 'calc(100vh - 378px)',
+    },
+  });
+  defineEmits(['register']);
+  const heightNum = ref(800);
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  const [register] = useModalInner((data) => {
+    console.log(data);
+    nextTick(() => {
+      setOptions({
+        title: {
+          text: '报表趋势图',
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        legend: {
+          data: ['CO', 'CO2'],
+        },
+        toolbox: {},
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          boundaryGap: false,
+        },
+        yAxis: {
+          type: 'value',
+          boundaryGap: false,
+        },
+        series: [
+          {
+            name: 'CO',
+            type: 'line',
+            stack: 'Total',
+            data: [150, 230, 224, 218, 135, 147, 260],
+          },
+          {
+            name: 'CO2',
+            type: 'line',
+            stack: 'Total',
+            data: [15, 23, 22, 28, 15, 17, 20],
+          },
+        ],
+      });
+    });
+  });
+
+  const handleCancel = () => {};
+</script>
+<style>
+  .video-sty {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import moment from 'moment';
+
+// 表格配置
+export const columns: BasicColumn[] = [
+  {
+    title: '配置名称',
+    dataIndex: '1',
+    width: 80,
+  },
+  {
+    title: '所属组织',
+    dataIndex: '2',
+    width: 120,
+  },
+  {
+    title: '数据类型',
+    dataIndex: '3',
+    width: 120,
+  },
+  {
+    title: '执行状态',
+    dataIndex: '4',
+    width: 120,
+  },
+  {
+    title: '执行日期',
+    dataIndex: '8',
+    width: 180,
+  },
+];
+
+// 查询配置
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: '1',
+    label: '配置名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入配置名称',
+    },
+  },
+  {
+    field: '2',
+    label: '执行状态',
+    component: 'Select',
+    colProps: { span: 6 },
+    componentProps: {
+      options: [
+        {
+          label: '进行中',
+          value: 1,
+        },
+        {
+          label: '成功',
+          value: 0,
+        },
+        {
+          label: '失败',
+          value: 0,
+        },
+      ],
+      placeholder: '请选择执行状态',
+    },
+  },
+  {
+    field: '3',
+    label: '执行时间',
+    component: 'RangePicker',
+    componentProps: {
+      showTime: {
+        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+      },
+    },
+    colProps: { span: 6 },
+  },
+];

+<template>
+  <div>
+    <BasicTable :clickToRowSelect="false" @register="registerTable" :searchInfo="searchInfo">
+      <template #toolbar>
+        <Authority value="api:yt:reportExport:export">
+          <a-button type="primary" @click="exportCharts"> 导出报表 </a-button>
+        </Authority>
+        <Authority value="api:yt:reportExport:delete">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
+            <a-button type="primary" color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
+          </Popconfirm>
+        </Authority>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '查看',
+              icon: 'clarity:note-edit-line',
+              auth: 'api:yt:reportExport:get',
+              onClick: handleView.bind(null, record),
+            },
+            {
+              label: '导出报表',
+              icon: 'clarity:note-edit-line',
+              auth: 'api:yt:reportExport:export',
+            },
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              auth: 'api:yt:reportExport:delete',
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <ReportPreviewModal @register="registerModal" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, nextTick } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { cameraPage, deleteCameraManage } from '/@/api/camera/cameraManager';
+  import { searchFormSchema, columns } from './config.data';
+  import { Authority } from '/@/components/Authority';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Popconfirm } from 'ant-design-vue';
+  import { useModal } from '/@/components/Modal';
+  import ReportPreviewModal from './ReportPreviewModal.vue';
+
+  const searchInfo = reactive<Recordable>({});
+
+  const [registerTable, { reload, setProps }] = useTable({
+    title: '报表导出列表',
+    api: cameraPage,
+    columns,
+    showIndexColumn: false,
+    clickToRowSelect: false,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    rowKey: 'id',
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+  });
+
+  const handleSuccess = () => {
+    reload();
+  };
+
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+    deleteCameraManage,
+    handleSuccess,
+    setProps
+  );
+
+  nextTick(() => {
+    setProps(selectionOptions);
+  });
+
+  const [registerModal, { openModal }] = useModal();
+  const handleView = (_, record) => {
+    openModal(true, {
+      isUpdate: true,
+      record,
+    });
+  };
+  const exportCharts = () => {};
+</script>

@@ -292,11 +292,15 @@
                 return createMessage.error('请填写属性');
               }
             }
-            await postAddConvertApi(isEdit.value ? noEditObj : allPostForm);
-            createMessage.success('数据流转编辑成功');
-            emit('success');
-            defineClearFunc();
-            closeModal();
+            const res = await postAddConvertApi(isEdit.value ? noEditObj : allPostForm);
+            if (res) {
+              closeModal();
+              createMessage.success('数据流转编辑成功');
+              setTimeout(() => {
+                emit('success');
+              }, 500);
+              defineClearFunc();
+            }
           }
         } catch {
         } finally {