Merge branch 'ft' into 'main_dev'

fix: 修复Teambition上的问题

See merge request yunteng/thingskit-front!534

(cherry picked from commit 518484644c1ee2565e68856a0d7087323c033096)

8c3fb46a fix:DEFECT-1119...
a8dbbbd9 fix:DEFECT-1114 组态名称限制长度
b4c765f4 fix:DEFECT-1080 暗黑模式看板返回看不见
6011295a fix:DEFECT-1131 测试未输入ID时,提示错误,应提示未输入参数
7a7258d6 fix:DEFECT-1131 测试未输入ID时,提示错误,应提示未输入参数
1a7113e4 fix: 修复大屏公共接口管理操作权限问题
eaf22bd7 fix: DEFECT-1138 websocket接口还未选择产品,数据就测试出结果了
8637830f fix: DEFECT-1138 websocket接口还未选择产品,数据就测试出结果了
b3c40c28 fix: 修复报表配置corn表达式问题

-export enum VideoPlayerType {
-  m3u8 = 'application/x-mpegURL',
-  mp4 = 'video/mp4',
-  webm = 'video/webm',
-}
-
-export const getVideoTypeByUrl = (url: string) => {
-  const splitExtReg = /(?:.*)(?<=\.)/;
-
-  const type = url.replace(splitExtReg, '');
-
-  if (VideoPlayerType[type]) return VideoPlayerType[type];
-
-  return VideoPlayerType.mp4;
-};
+export enum VideoPlayerType {
+  m3u8 = 'application/x-mpegURL',
+  mp4 = 'video/mp4',
+  webm = 'video/webm',
+}
+
+export const getVideoTypeByUrl = (url: string) => {
+  const splitExtReg = /(?:.*)(?<=\.)/;
+  const type = url.replace(splitExtReg, '');
+  /**
+   * https://vcsplay.scjtonline.cn:8200/live/HD_1569b634-4789-11eb-ab67-3cd2e55e0b20.m3u8?auth_key=1681179278-0-0-5c54a376f2ca32d05c4a152ee96336e9
+   * 如果是这种格式的m3u8，则截取的是这一部分.m3u8?auth_key=1681179278-0-0-5c54a376f2ca32d05c4a152ee96336e9
+   */
+  if (type.startsWith('m3u8')) return VideoPlayerType.m3u8;
+  if (type.startsWith('mp4')) return VideoPlayerType.mp4;
+  if (type.startsWith('webm')) return VideoPlayerType.webm;
+  return;
+};

@@ -119,7 +119,7 @@ export const formSchema: FormSchema[] = [
     component: 'Input',
     componentProps: {
       placeholder: '请输入组态名称',
-      maxLength: 255,
+      maxLength: 36,
     },
   },
   {

@@ -125,8 +125,8 @@
       const getTable = getTestTableKeyValue();
       const hasRequired = getTable?.some((it) => it.required === true && !it.value);
       if (hasRequired) {
-        createMessage.error('选择项为必须的，参数不能为空');
-        throw new Error('选择项为必须的，参数不能为空');
+        createMessage.error('参数不能为空');
+        throw new Error('参数不能为空');
       }
       getTable?.map((it) => (params[it.key!] = it.value!));
     } else if (props.data?.type === 'json') {

@@ -8,7 +8,7 @@
         <a-col :span="2"> 测试结果 </a-col>
         <a-col :span="22">
           <a-textarea
-            v-if="ifWebSocket === '2'"
+            v-if="isWebSocketType === '2'"
             allow-clear
             show-count
             v-model:value="testResult"
@@ -29,13 +29,12 @@
   </div>
 </template>
 <script lang="ts" setup name="testRequest">
-  import { nextTick, ref, reactive } from 'vue';
+  import { nextTick, ref, reactive, onUnmounted } from 'vue';
   import { Button } from 'ant-design-vue';
   import { otherHttp } from '/@/utils/http/axios';
   import { useWebSocket } from '@vueuse/core';
   import { JWT_TOKEN_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
-  import { useMessage } from '/@/hooks/web/useMessage';
   import { useUtils } from '../../../hooks/useUtils';
 
   const emits = defineEmits(['emitExcute']);
@@ -48,10 +47,6 @@
 
   const showTestFlag = ref(false);
 
-  const ifWebSocket = ref('');
-
-  const { createMessage } = useMessage();
-
   const token = getAuthCache(JWT_TOKEN_KEY);
 
   const socketUrls = ref('');
@@ -87,6 +82,8 @@
 
   const httpResult = ref('');
 
+  const isWebSocketType = ref('');
+
   //执行测试接口
   const handleExcute = () => {
     emits('emitExcute');
@@ -97,15 +94,14 @@
     await nextTick();
     //获取Params和Header和Body
     const Objects = props.data;
-    const isWebSocketType = Objects?.method;
+    isWebSocketType.value = Objects?.method;
     const apiType = Objects?.apiType;
     const url = Objects?.apiGetUrl;
     const headers = Objects?.Header?.params;
     const params = Objects?.Params?.params;
     const body = Objects?.Body?.params;
     const apiUrl = url?.restfulFormat(params);
-    ifWebSocket.value = isWebSocketType;
-    if (isWebSocketType === '2') {
+    if (isWebSocketType.value === '2') {
       socketUrls.value = url;
       socketMessage.server = `${socketUrls.value}?token=${token}`;
       websocketRequest(params);
@@ -117,13 +113,15 @@
   };
 
   //websocket请求
-  const websocketRequest = (params) => {
+  const websocketRequest = (params, destroy = false) => {
     //websocket请求
-    Reflect.deleteProperty(params, 'deviceProfileId');
-    Reflect.deleteProperty(params, 'organizationId');
-    Reflect.set(params, 'cmdId', 1);
-    Reflect.set(params, 'scope', 'LATEST_TELEMETRY');
-    Reflect.set(params, 'entityType', 'DEVICE');
+    if (Object.prototype.toString.call(params) === '[object Object]') {
+      Reflect.deleteProperty(params, 'deviceProfileId');
+      Reflect.deleteProperty(params, 'organizationId');
+      Reflect.set(params, 'cmdId', 1);
+      Reflect.set(params, 'scope', 'LATEST_TELEMETRY');
+      Reflect.set(params, 'entityType', 'DEVICE');
+    }
     socketMessage.sendValue.tsSubCmds.push(params);
     const { send, close } = useWebSocket(socketMessage.server, {
       onConnected() {
@@ -138,12 +136,17 @@
         console.log('断开连接了');
         close();
       },
-      onError() {
-        createMessage.error('webSocket连接超时,请联系管理员');
-      },
+      onError() {},
     });
+    if (destroy) close();
   };
 
+  onUnmounted(() => {
+    if (isWebSocketType.value === '2') {
+      websocketRequest(null, true);
+    }
+  });
+
   //TODO: 待优化 项目自带第三方请求
   const otherHttpRequest = async (
     apiType,
@@ -188,7 +191,7 @@
     }
     httpResult.value = '测试结果为：';
     testResult.value = '测试结果为：';
-    ifWebSocket.value = '0';
+    isWebSocketType.value = '0';
   };
 
   const showTest = () => (showTestFlag.value = true);

@@ -64,8 +64,8 @@
     const getTable = getTestTableKeyValue();
     const hasRequired = getTable?.some((it) => it.required === true && !it.value);
     if (hasRequired) {
-      createMessage.error('选择项为必须的，参数不能为空');
-      throw new Error('选择项为必须的，参数不能为空');
+      createMessage.error('参数不能为空');
+      throw new Error('参数不能为空');
     }
     const params: any = {};
     getTable?.map((it: any) => (params[it.key!] = it.value!));

@@ -105,8 +105,8 @@
     const getTable = getTestTableKeyValue();
     const hasRequired = getTable?.some((it) => it.required === true && !it.value);
     if (hasRequired) {
-      createMessage.error('选择项为必须的，参数不能为空');
-      throw new Error('选择项为必须的，参数不能为空');
+      createMessage.error('参数不能为空');
+      throw new Error('参数不能为空');
     }
     const params: any = {};
     getTable?.map((it) => (params[it.key!] = it.value!));

 <template>
   <div>
     <BasicDrawer
+      destroyOnClose
       showFooter
       v-bind="$attrs"
       @register="registerDrawer"
@@ -46,7 +47,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useUtils } from './hooks/useUtils';
 
-  const { resetReqHttpType, resetUpdateSchema } = useUtils();
+  const { resetReqHttpType } = useUtils();
 
   const emits = defineEmits(['success', 'register']);
 
@@ -69,10 +70,15 @@
   const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
     await resetFields();
     await nextTick();
-    updateSchema(resetUpdateSchema);
     setFieldsValue(resetReqHttpType);
     const title = `${!data.isUpdate ? '新增' : '修改'}公共接口`;
     setDrawerProps({ title });
+    updateSchema({
+      field: 'requestHttpTypeAndUrl',
+      componentProps: {
+        type: '0',
+      },
+    });
     isUpdate.value = data.isUpdate;
     !isUpdate.value ? (putId.value = '') : (putId.value = data.record.id);
     simpleRequestRef.value?.resetValue() && testSqlRef.value?.resetValue();

@@ -39,7 +39,7 @@
               icon: 'ant-design:node-expand-outlined',
               onClick: handlePublish.bind(null, 'publish', record),
               ifShow: () => {
-                return record.state === 0;
+                return record.state === 0 && record.creator === userId;
               },
             },
             {
@@ -47,7 +47,7 @@
               icon: 'ant-design:node-collapse-outlined',
               onClick: handlePublish.bind(null, 'canelPublish', record),
               ifShow: () => {
-                return record.state === 1;
+                return record.state === 1 && record.creator === userId;
               },
             },
             {
@@ -55,7 +55,7 @@
               icon: 'clarity:note-edit-line',
               onClick: handleCreateOrEdit.bind(null, record),
               ifShow: () => {
-                return record.state === 0;
+                return record.state === 0 && record.creator === userId;
               },
             },
             {
@@ -63,7 +63,7 @@
               icon: 'ant-design:delete-outlined',
               color: 'error',
               ifShow: () => {
-                return record.state === 0;
+                return record.state === 0 && record.creator === userId;
               },
               popConfirm: {
                 title: '是否确认删除',
@@ -93,6 +93,12 @@
   import { Popconfirm, Modal } from 'ant-design-vue';
   import { JsonPreview } from '/@/components/CodeEditor';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
+  import { getAuthCache } from '/@/utils/auth';
+
+  const userInfo = getAuthCache(USER_INFO_KEY) as any;
+
+  const userId = ref(userInfo?.userId);
 
   const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
     api: getDataViewInterfacePage,

-<template>
-  <BasicDrawer
-    :maskClosable="false"
-    @close="handleClose"
-    destroyOnClose
-    v-bind="$attrs"
-    @register="registerDrawer"
-    showFooter
-    :title="getTitle"
-    width="30%"
-    @ok="handleSubmit"
-  >
-    <BasicForm @register="registerForm">
-      <template #devices="{ model, field }">
-        <p style="display: none">{{ field }}</p>
-        <p>{{ queryModeFunc(model['queryMode']) }}</p>
-        <p>{{ orgFunc(model['organizationId']) }}</p>
-        <p>{{ dataTypeFunc(model['dataType']) }}</p>
-        <Select
-          placeholder="请选择设备"
-          v-model:value="selectDevice"
-          style="width: 100%"
-          :options="selectOptions"
-          @change="handleDeviceChange"
-          @deselect="handleDeselect"
-          mode="multiple"
-          labelInValue
-          notFoundContent="请选择设备"
-        />
-        <div style="margin-top: 1.5vh"></div>
-        <template v-for="(item, index) in deviceList" :key="item.value">
-          <p style="display: none">{{ index }}</p>
-          <DeviceAttrCpns
-            :ref="bindDeviceRefObj.deviceAttrRef"
-            :value="item"
-            :orgId="organizationId || orgId"
-          />
-        </template>
-      </template>
-    </BasicForm>
-  </BasicDrawer>
-</template>
-<script lang="ts" setup>
-  import { ref, computed, unref, reactive, watch, Ref } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchema, organizationId } from './config.data';
-  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-  import {
-    createOrEditReportManage,
-    putReportConfigManage,
-    reportEditDetailPage,
-  } from '/@/api/report/reportManager';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import moment from 'moment';
-  import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';
-  import { Select } from 'ant-design-vue';
-  import DeviceAttrCpns from './cpns/DeviceAttrCpns.vue';
-  import { SchemaFiled } from './config.data';
-  import { QueryWay } from '../../device/localtion/cpns/TimePeriodForm/config';
-  import { AggregateDataEnum } from '../../device/localtion/cpns/TimePeriodForm/config';
-
-  type TDeviceList = {
-    key?: string;
-    value?: string;
-    label?: string;
-    attribute?: string;
-    device?: string;
-    name?: string;
-    attributes?: string | undefined;
-    deviceProfileId?: string;
-    id?: string;
-  };
-  type TSelectOption = {
-    value?: string;
-    label?: string;
-    deviceProfileId?: string;
-    id?: string;
-  };
-  const emit = defineEmits(['success', 'register']);
-  const bindDeviceRefObj = {
-    deviceAttrRef: ref([]),
-  };
-  const isUpdate = ref(true);
-  const editId = ref('');
-  const orgId = ref('');
-  const selectOptions: Ref<TSelectOption[]> = ref([]);
-  const selectDevice = ref([]);
-  const deviceList: Ref<TDeviceList[]> = ref([]);
-  const editDeviceList: Ref<TDeviceList[]> = ref([]);
-  let editResData: any = reactive({});
-  const editDeviceAttr: any = ref([]);
-  const orgFuncId = ref('');
-  const queryModeStr = ref('');
-  const dataTypeStr = ref(0);
-  const orgFunc = (e) => {
-    orgFuncId.value = e;
-  };
-  const queryModeFunc = (e) => {
-    queryModeStr.value = e;
-  };
-  const dataTypeFunc = (e) => {
-    dataTypeStr.value = e;
-  };
-  watch(
-    () => dataTypeStr.value,
-    (newValue) => {
-      if (newValue == 0) {
-        setFieldsValue({ limit: 100 });
-      } else {
-      }
-    }
-  );
-  watch(
-    () => queryModeStr.value,
-    (newValue: string) => {
-      if (newValue == 'latest') {
-        setFieldsValue({ startTs: 1000 });
-        setFieldsValue({ interval: 1000 });
-      } else {
-      }
-    }
-  );
-  watch(
-    () => orgFuncId.value,
-    async (newValue: string) => {
-      if (newValue) {
-        //获取设备
-        const { items } = await screenLinkPageByDeptIdGetDevice({
-          organizationId: newValue,
-        });
-        selectOptions.value = items.map((item) => {
-          if (item.deviceType !== 'GATEWAY')
-            return {
-              label: item.alias ? item.alias : item.name,
-              value: item.tbDeviceId,
-              id: item.id,
-              deviceProfileId: item.deviceProfileId,
-            };
-        });
-      }
-    }
-  );
-  //设备Select选中
-  const handleDeviceChange = (_, o) => {
-    if (unref(isUpdate)) {
-      //编辑
-      let temp: any = [];
-      editDeviceAttr.value.forEach((f) => {
-        temp = [f, ...o];
-      });
-      let deWeightThree = () => {
-        let map = new Map();
-        for (let item of deviceList.value) {
-          if (!map.has(item.value)) {
-            map.set(item.value, item);
-          }
-        }
-        return [...map.values()];
-      };
-      temp = deWeightThree();
-      deviceList.value = temp;
-      if (o.length !== 0) {
-        deviceList.value = o;
-      }
-    } else {
-      deviceList.value = o;
-    }
-  };
-  //设备取消删除
-  const handleDeselect = (e) => {
-    if (unref(isUpdate)) {
-      //编辑
-      let deWeightThree = () => {
-        let map = new Map();
-        for (let item of deviceList.value) {
-          if (!map.has(item.value)) {
-            map.set(item.value, item);
-          }
-        }
-        return [...map.values()];
-      };
-      deviceList.value = deWeightThree();
-      const findEditValue = deviceList.value.findIndex((f) => f.value == e.value);
-      if (findEditValue !== -1) deviceList.value.splice(findEditValue, 1);
-    } else {
-      const eDevice = e.key || e.value;
-      const findValue = deviceList.value.findIndex((f) => f.value == eDevice);
-      if (findValue !== -1) deviceList.value.splice(findValue, 1);
-    }
-  };
-  const [registerForm, { validate, setFieldsValue, resetFields, updateSchema, getFieldsValue }] =
-    useForm({
-      labelWidth: 120,
-      schemas: formSchema,
-      showActionButtonGroup: false,
-      fieldMapToTime: [[SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS]]],
-    });
-  const isViewDetail = ref(false);
-
-  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
-    await resetFields();
-    setDrawerProps({ confirmLoading: false });
-    isUpdate.value = !!data?.isUpdate;
-    isViewDetail.value = !!data?.isView;
-    if (unref(isViewDetail)) {
-      setDrawerProps({ showFooter: true });
-      if (unref(isUpdate)) {
-        setDrawerProps({ title: '编辑报表配置' });
-      } else {
-        setDrawerProps({ title: '新增报表配置' });
-      }
-    } else {
-      setDrawerProps({ showFooter: false });
-      setDrawerProps({ title: '查看报表配置' });
-    }
-    if (unref(isUpdate)) {
-      //编辑回显数据
-      editResData = await reportEditDetailPage(data.record.id);
-      //回显基础数据
-      editId.value = editResData.data.id;
-      await setFieldsValue(editResData.data);
-      //回显嵌套数据
-      await setFieldsValue({
-        agg: editResData.data.queryCondition?.agg,
-        interval: editResData.data.queryCondition?.interval,
-        limit: editResData.data.queryCondition?.limit,
-        orderBy: editResData.data.queryCondition?.orderBy,
-        useStrictDataTypes: editResData.data.queryCondition?.useStrictDataTypes,
-        startTs: editResData.data.queryCondition?.startTs,
-        endTs: editResData.data.queryCondition?.endTs,
-        way: editResData.data?.way,
-        queryMode: editResData.data.queryCondition?.queryMode === 0 ? 'latest' : 'timePeriod',
-        cronTime: editResData.data?.executeContent,
-        currentCycle: editResData.data?.cycle?.currentCycle,
-        cycleTime: editResData.data?.cycle?.cycleTime,
-        cycleType: editResData.data?.cycle?.cycleType,
-      });
-      const endTsTime = editResData.data.queryCondition?.endTs;
-      const startTsTime = editResData.data.queryCondition?.startTs;
-      const mathFloor = (endTsTime - startTsTime) / 10;
-      const multTen = Math.floor(mathFloor) * 10;
-      await setFieldsValue({
-        startTs: multTen,
-      });
-      if (editResData.data.queryCondition?.queryMode == 1) {
-        await setFieldsValue({
-          dataRange: [
-            editResData.data.queryCondition?.startTs,
-            editResData.data.queryCondition?.endTs,
-          ],
-        });
-      }
-      //回显聚合条件
-      const dataCompareOpions = [
-        { label: '最小值', value: AggregateDataEnum.MIN },
-        { label: '最大值', value: AggregateDataEnum.MAX },
-        { label: '平均值', value: AggregateDataEnum.AVG },
-        { label: '求和', value: AggregateDataEnum.SUM },
-        { label: '空', value: AggregateDataEnum.NONE },
-      ];
-      const updateSchemaAgg = (options: {}) => {
-        updateSchema({
-          field: SchemaFiled.AGG,
-          componentProps: {
-            options,
-          },
-        });
-      };
-      if (editResData.data.dataType == 1) updateSchemaAgg(dataCompareOpions.slice(0, 4));
-      else updateSchemaAgg(dataCompareOpions.slice(4, 5));
-      //回显执行方式和查询周期
-      const dataQueryOpions = [
-        { label: '固定周期', value: QueryWay.LATEST },
-        { label: '自定义周期', value: QueryWay.TIME_PERIOD },
-      ];
-      const updateSchemaQuery = (options: {}) => {
-        updateSchema({
-          field: SchemaFiled.WAY,
-          componentProps: {
-            options,
-          },
-        });
-      };
-      if (editResData.data.executeWay == 0) updateSchemaQuery(dataQueryOpions);
-      else updateSchemaQuery(dataQueryOpions.slice(0, 1));
-      //回显设备
-      orgId.value = editResData.data.organizationId;
-      const { items } = await screenLinkPageByDeptIdGetDevice({
-        organizationId: editResData.data.organizationId,
-      });
-      selectOptions.value = items.map((item) => {
-        if (item.deviceType !== 'GATEWAY')
-          return {
-            label: item.alias ? item.alias : item.name,
-            value: item.tbDeviceId,
-            id: item.id,
-            deviceProfileId: item.deviceProfileId,
-          };
-      });
-      const deviceIds = editResData.data.executeAttributes.map((m) => {
-        return {
-          label: m.name,
-          key: m.device,
-        };
-      });
-      selectDevice.value = deviceIds;
-      //回显设备属性
-      editDeviceAttr.value = editResData.data.executeAttributes?.map((item) => {
-        const T = selectOptions.value.find((o) => {
-          if (item.device === o.value) {
-            return {
-              id: o.id,
-              deviceProfileId: o.deviceProfileId,
-            };
-          }
-        });
-        return {
-          ...T,
-          label: item.alias ? item.alias : item.name,
-          value: item.device,
-          attributes: item.attributes,
-        };
-      });
-      deviceList.value = editDeviceAttr.value;
-      editDeviceList.value = editResData.data.executeAttributes;
-    } else {
-      setFieldsValue({
-        startTs: 1000,
-        interval: 1000,
-      });
-      editId.value = '';
-      orgId.value = '';
-      selectDevice.value = [];
-      selectOptions.value = [];
-      deviceList.value = [];
-      getAttrDevice.value = [];
-      editDeviceList.value = [];
-      editDeviceAttr.value = [];
-      updateSchema({
-        field: SchemaFiled.AGG,
-        componentProps: {
-          options: [],
-        },
-      });
-      //新增显示执行方式和查询周期
-      const dataQueryOpions = [
-        { label: '固定周期', value: QueryWay.LATEST },
-        { label: '自定义周期', value: QueryWay.TIME_PERIOD },
-      ];
-      const updateSchemaQuery = (options: {}) => {
-        updateSchema({
-          field: SchemaFiled.WAY,
-          componentProps: {
-            options,
-          },
-        });
-      };
-      if (getFieldsValue().executeWay == 0) updateSchemaQuery(dataQueryOpions);
-    }
-  });
-  const handleClose = () => {
-    deviceList.value = [];
-    editId.value = '';
-    orgId.value = '';
-    selectDevice.value = [];
-    selectOptions.value = [];
-    getAttrDevice.value = [];
-    editDeviceList.value = [];
-    editDeviceAttr.value = [];
-  };
-  const getAttrDevice: Ref<TDeviceList[]> = ref([]);
-  const getTitle = computed(() => (!unref(isUpdate) ? '新增报表配置' : '编辑报表配置'));
-  let postObj: any = reactive({});
-  let queryCondition: any = reactive({});
-  let executeContent: any = reactive({});
-  const startTs = ref(0);
-  const endTs = ref(0);
-
-  const getFormValueFunc = () => {
-    const item: any = unref(bindDeviceRefObj.deviceAttrRef)?.map((item: any) => item.emitChange());
-    getAttrDevice.value = item;
-  };
-
-  async function handleSubmit() {
-    setDrawerProps({ confirmLoading: true });
-    try {
-      const { createMessage } = useMessage();
-      const values = await validate();
-      if (!values) return;
-      getFormValueFunc();
-      let hasAttr = false;
-      if (!unref(isUpdate)) {
-        if (getAttrDevice.value.length === 0) {
-          return createMessage.error('请选择设备及其属性');
-        } else {
-          getAttrDevice.value.forEach((f: any) => {
-            if (f.attributes == undefined || f.attributes.length == 0) hasAttr = true;
-          });
-        }
-      } else {
-        if (getAttrDevice.value.length === 0) {
-          return createMessage.error('请选择设备及其属性');
-        } else {
-          getAttrDevice.value.forEach((f: any) => {
-            if (f.attributes == undefined || f.attributes.length == 0) hasAttr = true;
-          });
-        }
-      }
-      if (hasAttr) return createMessage.error('请选择设备属性');
-      if (values.executeWay == 0) {
-        executeContent = null;
-      } else {
-        executeContent = values.cronTime;
-      }
-      if (values.queryMode === QueryWay.LATEST) {
-        startTs.value = moment().subtract(values.startTs, 'ms').valueOf();
-        endTs.value = Date.now();
-      } else {
-        const fT = JSON.parse(JSON.stringify(values.dataRange));
-        startTs.value = moment(fT[0]).valueOf();
-        endTs.value = moment(fT[1]).valueOf();
-      }
-      queryCondition = {
-        agg: values.agg,
-        interval: values.interval,
-        limit: values.limit,
-        ...{
-          startTs: startTs.value,
-        },
-        ...{
-          endTs: endTs.value,
-        },
-        queryMode: values?.queryMode === 'latest' ? 0 : 1,
-      };
-      const cycle = {
-        currentCycle: values.currentCycle,
-        cycleTime: values.cycleTime,
-        cycleType: values.cycleType,
-      };
-      delete values.devices;
-      delete values.agg;
-      delete values.interval;
-      delete values.timeZone;
-      delete values.cronTime;
-      delete values.currentCycle;
-      delete values.cycleTime;
-      delete values.limit1;
-      delete values.startTs;
-      delete values.queryMode;
-      delete values.cycleType;
-      postObj = {
-        ...values,
-        ...{
-          executeAttributes:
-            getAttrDevice.value.length == 0 ? editDeviceList.value : getAttrDevice.value,
-        },
-        ...{ queryCondition },
-        ...{ cycle },
-        ...{ executeContent },
-        ...{ id: editId.value !== '' ? editId.value : '' },
-      };
-      let saveMessage = '添加成功';
-      let updateMessage = '修改成功';
-      editId.value !== ''
-        ? await putReportConfigManage(postObj)
-        : await createOrEditReportManage(postObj);
-
-      closeDrawer();
-      emit('success');
-      createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);
-      handleClose();
-    } finally {
-      setTimeout(() => {
-        setDrawerProps({ confirmLoading: false });
-      }, 300);
-    }
-  }
-</script>
+<template>
+  <BasicDrawer
+    :maskClosable="false"
+    @close="handleClose"
+    destroyOnClose
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="30%"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm">
+      <template #devices="{ model, field }">
+        <p style="display: none">{{ field }}</p>
+        <p>{{ queryModeFunc(model['queryMode']) }}</p>
+        <p>{{ orgFunc(model['organizationId']) }}</p>
+        <p>{{ dataTypeFunc(model['dataType']) }}</p>
+        <Select
+          placeholder="请选择设备"
+          v-model:value="selectDevice"
+          style="width: 100%"
+          :options="selectOptions"
+          @change="handleDeviceChange"
+          @deselect="handleDeselect"
+          mode="multiple"
+          labelInValue
+          notFoundContent="请选择设备"
+        />
+        <div style="margin-top: 1.5vh"></div>
+        <template v-for="(item, index) in deviceList" :key="item.value">
+          <p style="display: none">{{ index }}</p>
+          <DeviceAttrCpns
+            :ref="bindDeviceRefObj.deviceAttrRef"
+            :value="item"
+            :orgId="organizationId || orgId"
+          />
+        </template>
+      </template>
+    </BasicForm>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { ref, computed, unref, reactive, watch, Ref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema, organizationId } from './config.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import {
+    createOrEditReportManage,
+    putReportConfigManage,
+    reportEditDetailPage,
+  } from '/@/api/report/reportManager';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import moment from 'moment';
+  import { screenLinkPageByDeptIdGetDevice } from '/@/api/ruleengine/ruleengineApi';
+  import { Select } from 'ant-design-vue';
+  import DeviceAttrCpns from './cpns/DeviceAttrCpns.vue';
+  import { SchemaFiled } from './config.data';
+  import { QueryWay } from '../../device/localtion/cpns/TimePeriodForm/config';
+  import { AggregateDataEnum } from '../../device/localtion/cpns/TimePeriodForm/config';
+
+  type TDeviceList = {
+    key?: string;
+    value?: string;
+    label?: string;
+    attribute?: string;
+    device?: string;
+    name?: string;
+    attributes?: string | undefined;
+    deviceProfileId?: string;
+    id?: string;
+  };
+  type TSelectOption = {
+    value?: string;
+    label?: string;
+    deviceProfileId?: string;
+    id?: string;
+  };
+  const emit = defineEmits(['success', 'register']);
+  const bindDeviceRefObj = {
+    deviceAttrRef: ref([]),
+  };
+  const isUpdate = ref(true);
+  const editId = ref('');
+  const orgId = ref('');
+  const selectOptions: Ref<TSelectOption[]> = ref([]);
+  const selectDevice = ref([]);
+  const deviceList: Ref<TDeviceList[]> = ref([]);
+  const editDeviceList: Ref<TDeviceList[]> = ref([]);
+  let editResData: any = reactive({});
+  const editDeviceAttr: any = ref([]);
+  const orgFuncId = ref('');
+  const queryModeStr = ref('');
+  const dataTypeStr = ref(0);
+  const orgFunc = (e) => {
+    orgFuncId.value = e;
+  };
+  const queryModeFunc = (e) => {
+    queryModeStr.value = e;
+  };
+  const dataTypeFunc = (e) => {
+    dataTypeStr.value = e;
+  };
+  watch(
+    () => dataTypeStr.value,
+    (newValue) => {
+      if (newValue == 0) {
+        setFieldsValue({ limit: 100 });
+      } else {
+      }
+    }
+  );
+  watch(
+    () => queryModeStr.value,
+    (newValue: string) => {
+      if (newValue == 'latest') {
+        setFieldsValue({ startTs: 1000 });
+        setFieldsValue({ interval: 1000 });
+      } else {
+      }
+    }
+  );
+  watch(
+    () => orgFuncId.value,
+    async (newValue: string) => {
+      if (newValue) {
+        //获取设备
+        const { items } = await screenLinkPageByDeptIdGetDevice({
+          organizationId: newValue,
+        });
+        selectOptions.value = items.map((item) => {
+          if (item.deviceType !== 'GATEWAY')
+            return {
+              label: item.alias ? item.alias : item.name,
+              value: item.tbDeviceId,
+              id: item.id,
+              deviceProfileId: item.deviceProfileId,
+            };
+        });
+      }
+    }
+  );
+  //设备Select选中
+  const handleDeviceChange = (_, o) => {
+    if (unref(isUpdate)) {
+      //编辑
+      let temp: any = [];
+      editDeviceAttr.value.forEach((f) => {
+        temp = [f, ...o];
+      });
+      let deWeightThree = () => {
+        let map = new Map();
+        for (let item of deviceList.value) {
+          if (!map.has(item.value)) {
+            map.set(item.value, item);
+          }
+        }
+        return [...map.values()];
+      };
+      temp = deWeightThree();
+      deviceList.value = temp;
+      if (o.length !== 0) {
+        deviceList.value = o;
+      }
+    } else {
+      deviceList.value = o;
+    }
+  };
+  //设备取消删除
+  const handleDeselect = (e) => {
+    if (unref(isUpdate)) {
+      //编辑
+      let deWeightThree = () => {
+        let map = new Map();
+        for (let item of deviceList.value) {
+          if (!map.has(item.value)) {
+            map.set(item.value, item);
+          }
+        }
+        return [...map.values()];
+      };
+      deviceList.value = deWeightThree();
+      const findEditValue = deviceList.value.findIndex((f) => f.value == e.value);
+      if (findEditValue !== -1) deviceList.value.splice(findEditValue, 1);
+    } else {
+      const eDevice = e.key || e.value;
+      const findValue = deviceList.value.findIndex((f) => f.value == eDevice);
+      if (findValue !== -1) deviceList.value.splice(findValue, 1);
+    }
+  };
+  const [registerForm, { validate, setFieldsValue, resetFields, updateSchema, getFieldsValue }] =
+    useForm({
+      labelWidth: 120,
+      schemas: formSchema,
+      showActionButtonGroup: false,
+      fieldMapToTime: [[SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS]]],
+    });
+  const isViewDetail = ref(false);
+
+  const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+    await resetFields();
+    setDrawerProps({ confirmLoading: false });
+    isUpdate.value = !!data?.isUpdate;
+    isViewDetail.value = !!data?.isView;
+    if (unref(isViewDetail)) {
+      setDrawerProps({ showFooter: true });
+      if (unref(isUpdate)) {
+        setDrawerProps({ title: '编辑报表配置' });
+      } else {
+        setDrawerProps({ title: '新增报表配置' });
+      }
+    } else {
+      setDrawerProps({ showFooter: false });
+      setDrawerProps({ title: '查看报表配置' });
+    }
+    if (unref(isUpdate)) {
+      //编辑回显数据
+      editResData = await reportEditDetailPage(data.record.id);
+      //回显基础数据
+      editId.value = editResData.data.id;
+      const spanDisance = editResData.data.executeContent.split(' ');
+      await setFieldsValue(editResData.data);
+      //回显嵌套数据
+      await setFieldsValue({
+        agg: editResData.data.queryCondition?.agg,
+        interval: editResData.data.queryCondition?.interval,
+        limit: editResData.data.queryCondition?.limit,
+        orderBy: editResData.data.queryCondition?.orderBy,
+        useStrictDataTypes: editResData.data.queryCondition?.useStrictDataTypes,
+        startTs: editResData.data.queryCondition?.startTs,
+        endTs: editResData.data.queryCondition?.endTs,
+        way: editResData.data?.way,
+        queryMode: editResData.data.queryCondition?.queryMode === 0 ? 'latest' : 'timePeriod',
+        cronTime:
+          editResData.data?.cycle?.cycleType === 2
+            ? spanDisance[2] < 10
+              ? editResData.data.executeContent.slice(0, 7) + '* * ?'
+              : editResData.data.executeContent.slice(0, 7) + ' ' + '* * ?'
+            : editResData.data?.cycle?.cycleType === 1
+            ? spanDisance[2] < 10
+              ? editResData.data.executeContent.slice(0, 5) + ' ' + ' * * ?'
+              : editResData.data.executeContent.slice(0, 6) + ' ' + ' * * ?'
+            : editResData.data.executeContent,
+        currentCycle: editResData.data?.cycle?.currentCycle,
+        cycleTime: editResData.data?.cycle?.cycleTime,
+        cycleType: editResData.data?.cycle?.cycleType,
+      });
+      const endTsTime = editResData.data.queryCondition?.endTs;
+      const startTsTime = editResData.data.queryCondition?.startTs;
+      const mathFloor = (endTsTime - startTsTime) / 10;
+      const multTen = Math.floor(mathFloor) * 10;
+      await setFieldsValue({
+        startTs: multTen,
+      });
+      if (editResData.data.queryCondition?.queryMode == 1) {
+        await setFieldsValue({
+          dataRange: [
+            editResData.data.queryCondition?.startTs,
+            editResData.data.queryCondition?.endTs,
+          ],
+        });
+      }
+      //回显聚合条件
+      const dataCompareOpions = [
+        { label: '最小值', value: AggregateDataEnum.MIN },
+        { label: '最大值', value: AggregateDataEnum.MAX },
+        { label: '平均值', value: AggregateDataEnum.AVG },
+        { label: '求和', value: AggregateDataEnum.SUM },
+        { label: '空', value: AggregateDataEnum.NONE },
+      ];
+      const updateSchemaAgg = (options: {}) => {
+        updateSchema({
+          field: SchemaFiled.AGG,
+          componentProps: {
+            options,
+          },
+        });
+      };
+      if (editResData.data.dataType == 1) updateSchemaAgg(dataCompareOpions.slice(0, 4));
+      else updateSchemaAgg(dataCompareOpions.slice(4, 5));
+      //回显执行方式和查询周期
+      const dataQueryOpions = [
+        { label: '固定周期', value: QueryWay.LATEST },
+        { label: '自定义周期', value: QueryWay.TIME_PERIOD },
+      ];
+      const updateSchemaQuery = (options: {}) => {
+        updateSchema({
+          field: SchemaFiled.WAY,
+          componentProps: {
+            options,
+          },
+        });
+      };
+      if (editResData.data.executeWay == 0) updateSchemaQuery(dataQueryOpions);
+      else updateSchemaQuery(dataQueryOpions.slice(0, 1));
+      //回显设备
+      orgId.value = editResData.data.organizationId;
+      const { items } = await screenLinkPageByDeptIdGetDevice({
+        organizationId: editResData.data.organizationId,
+      });
+      selectOptions.value = items.map((item) => {
+        if (item.deviceType !== 'GATEWAY')
+          return {
+            label: item.alias ? item.alias : item.name,
+            value: item.tbDeviceId,
+            id: item.id,
+            deviceProfileId: item.deviceProfileId,
+          };
+      });
+      const deviceIds = editResData.data.executeAttributes.map((m) => {
+        return {
+          label: m.name,
+          key: m.device,
+        };
+      });
+      selectDevice.value = deviceIds;
+      //回显设备属性
+      editDeviceAttr.value = editResData.data.executeAttributes?.map((item) => {
+        const T = selectOptions.value.find((o) => {
+          if (item.device === o.value) {
+            return {
+              id: o.id,
+              deviceProfileId: o.deviceProfileId,
+            };
+          }
+        });
+        return {
+          ...T,
+          label: item.alias ? item.alias : item.name,
+          value: item.device,
+          attributes: item.attributes,
+        };
+      });
+      deviceList.value = editDeviceAttr.value;
+      editDeviceList.value = editResData.data.executeAttributes;
+    } else {
+      setFieldsValue({
+        startTs: 1000,
+        interval: 1000,
+      });
+      editId.value = '';
+      orgId.value = '';
+      selectDevice.value = [];
+      selectOptions.value = [];
+      deviceList.value = [];
+      getAttrDevice.value = [];
+      editDeviceList.value = [];
+      editDeviceAttr.value = [];
+      updateSchema({
+        field: SchemaFiled.AGG,
+        componentProps: {
+          options: [],
+        },
+      });
+      //新增显示执行方式和查询周期
+      const dataQueryOpions = [
+        { label: '固定周期', value: QueryWay.LATEST },
+        { label: '自定义周期', value: QueryWay.TIME_PERIOD },
+      ];
+      const updateSchemaQuery = (options: {}) => {
+        updateSchema({
+          field: SchemaFiled.WAY,
+          componentProps: {
+            options,
+          },
+        });
+      };
+      if (getFieldsValue().executeWay == 0) updateSchemaQuery(dataQueryOpions);
+    }
+  });
+  const handleClose = () => {
+    deviceList.value = [];
+    editId.value = '';
+    orgId.value = '';
+    selectDevice.value = [];
+    selectOptions.value = [];
+    getAttrDevice.value = [];
+    editDeviceList.value = [];
+    editDeviceAttr.value = [];
+  };
+  const getAttrDevice: Ref<TDeviceList[]> = ref([]);
+  const getTitle = computed(() => (!unref(isUpdate) ? '新增报表配置' : '编辑报表配置'));
+  let postObj: any = reactive({});
+  let queryCondition: any = reactive({});
+  let executeContent: any = reactive({});
+  const startTs = ref(0);
+  const endTs = ref(0);
+
+  const getFormValueFunc = () => {
+    const item: any = unref(bindDeviceRefObj.deviceAttrRef)?.map((item: any) => item.emitChange());
+    getAttrDevice.value = item;
+  };
+
+  async function handleSubmit() {
+    setDrawerProps({ confirmLoading: true });
+    try {
+      const { createMessage } = useMessage();
+      const values = await validate();
+      if (!values) return;
+      getFormValueFunc();
+      let hasAttr = false;
+      if (!unref(isUpdate)) {
+        if (getAttrDevice.value.length === 0) {
+          return createMessage.error('请选择设备及其属性');
+        } else {
+          getAttrDevice.value.forEach((f: any) => {
+            if (f.attributes == undefined || f.attributes.length == 0) hasAttr = true;
+          });
+        }
+      } else {
+        if (getAttrDevice.value.length === 0) {
+          return createMessage.error('请选择设备及其属性');
+        } else {
+          getAttrDevice.value.forEach((f: any) => {
+            if (f.attributes == undefined || f.attributes.length == 0) hasAttr = true;
+          });
+        }
+      }
+      if (hasAttr) return createMessage.error('请选择设备属性');
+      if (values.executeWay == 0) {
+        executeContent = null;
+      } else {
+        //拼接corn
+        let joinCorn = '';
+        if (values.cycleType === 1) {
+          joinCorn = values.cronTime.slice(0, 6) + values.currentCycle.slice(5);
+          executeContent = joinCorn;
+        } else if (values.cycleType === 0) {
+          executeContent = values.cronTime;
+        } else if (values.cycleType === 2) {
+          joinCorn = values.cronTime.slice(0, 6) + values.cycleTime.slice(5);
+          executeContent = joinCorn;
+        }
+      }
+      if (values.queryMode === QueryWay.LATEST) {
+        startTs.value = moment().subtract(values.startTs, 'ms').valueOf();
+        endTs.value = Date.now();
+      } else {
+        const fT = JSON.parse(JSON.stringify(values.dataRange));
+        startTs.value = moment(fT[0]).valueOf();
+        endTs.value = moment(fT[1]).valueOf();
+      }
+      queryCondition = {
+        agg: values.agg,
+        interval: values.interval,
+        limit: values.limit,
+        ...{
+          startTs: startTs.value,
+        },
+        ...{
+          endTs: endTs.value,
+        },
+        queryMode: values?.queryMode === 'latest' ? 0 : 1,
+      };
+      const cycle: any = {};
+      if (values.cycleType === 0) {
+        cycle.cycleType = values.cycleType;
+        cycle.cronTime = values.cronTime;
+      }
+      if (values.cycleType === 1) {
+        cycle.cycleType = values.cycleType;
+        cycle.currentCycle = values.currentCycle;
+        cycle.cronTime = values.cronTime;
+      }
+      if (values.cycleType === 2) {
+        cycle.cycleType = values.cycleType;
+        cycle.cycleTime = values.cycleTime;
+        cycle.cronTime = values.cronTime;
+      }
+      // const cycle = {
+      //   currentCycle: values.currentCycle,
+      //   cycleTime: values.cycleTime,
+      //   cronTime: values.cronTime,
+      //   cycleType: values.cycleType,
+      // };
+      delete values.devices;
+      delete values.agg;
+      delete values.interval;
+      delete values.timeZone;
+      delete values.cronTime;
+      delete values.currentCycle;
+      delete values.cycleTime;
+      delete values.limit1;
+      delete values.startTs;
+      delete values.queryMode;
+      delete values.cycleType;
+      postObj = {
+        ...values,
+        ...{
+          executeAttributes:
+            getAttrDevice.value.length == 0 ? editDeviceList.value : getAttrDevice.value,
+        },
+        ...{ queryCondition },
+        ...{ cycle },
+        ...{ executeContent },
+        ...{ id: editId.value !== '' ? editId.value : '' },
+      };
+      let saveMessage = '添加成功';
+      let updateMessage = '修改成功';
+      editId.value !== ''
+        ? await putReportConfigManage(postObj)
+        : await createOrEditReportManage(postObj);
+
+      closeDrawer();
+      emit('success');
+      createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);
+      handleClose();
+    } finally {
+      setTimeout(() => {
+        setDrawerProps({ confirmLoading: false });
+      }, 300);
+    }
+  }
+</script>

-import { ref } from 'vue';
-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 { findDictItemByCode } from '/@/api/system/dict';
-import { isTiming, isWeek, isMonth, isFixedTime } from './timeConfig';
-import { AggregateDataEnum } from '../../device/localtion/cpns/TimePeriodForm/config';
-import {
-  getPacketIntervalByRange,
-  getPacketIntervalByValue,
-  intervalOption,
-} from '../../device/localtion/cpns/TimePeriodForm/helper';
-
-export enum QueryWay {
-  LATEST = 'latest',
-  TIME_PERIOD = 'timePeriod',
-}
-export enum SchemaFiled {
-  WAY = 'queryMode',
-  TIME_PERIOD = 'timePeriod',
-  KEYS = 'keys',
-  DATE_RANGE = 'dataRange',
-  START_TS = 'startTs',
-  END_TS = 'endTs',
-  INTERVAL = 'interval',
-  LIMIT = 'limit',
-  AGG = 'agg',
-  ORDER_BY = 'orderBy',
-}
-export const organizationId = ref('');
-
-// 表格配置
-export const columns: BasicColumn[] = [
-  {
-    title: '配置名称',
-    dataIndex: 'name',
-    width: 120,
-  },
-  {
-    title: '所属组织',
-    dataIndex: 'organizationDTO.name',
-    width: 120,
-  },
-  {
-    title: '数据类型',
-    dataIndex: 'dataType',
-    width: 120,
-    format: (_text: string, record: Recordable) => {
-      return record.dataType === 0 ? '原始数据' : '聚合数据';
-    },
-  },
-  {
-    title: '配置状态',
-    dataIndex: 'status',
-    width: 120,
-    slots: { customRender: 'configStatus' },
-  },
-  {
-    title: '执行方式',
-    dataIndex: 'executeWay',
-    width: 160,
-    format: (_text: string, record: Recordable) => {
-      return record.executeWay === 0 ? '立即执行' : '定时执行';
-    },
-  },
-  {
-    title: '执行设备',
-    dataIndex: 'devices',
-    width: 160,
-    slots: { customRender: 'doDeviceSlot' },
-  },
-  {
-    title: '创建人',
-    dataIndex: 'createUserName',
-    width: 180,
-  },
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    width: 180,
-  },
-];
-export const viewDeviceColumn: BasicColumn[] = [
-  {
-    title: '设备',
-    dataIndex: 'device',
-    width: 80,
-  },
-  {
-    title: '属性',
-    dataIndex: 'attribute',
-    width: 120,
-  },
-];
-
-// 查询配置
-export const searchFormSchema: FormSchema[] = [
-  {
-    field: 'name',
-    label: '配置名称',
-    component: 'Input',
-    colProps: { span: 6 },
-    componentProps: {
-      maxLength: 36,
-      placeholder: '请输入配置名称',
-    },
-  },
-  {
-    field: 'status',
-    label: '配置状态',
-    component: 'Select',
-    colProps: { span: 6 },
-    componentProps: {
-      options: [
-        {
-          label: '启用',
-          value: 1,
-        },
-        {
-          label: '禁用',
-          value: 0,
-        },
-      ],
-      placeholder: '请选择配置状态',
-    },
-  },
-  {
-    field: 'sendTime',
-    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: 'name',
-    label: '报表名称',
-    colProps: { span: 24 },
-    required: true,
-    component: 'Input',
-    componentProps: {
-      maxLength: 64,
-      placeholder: '请输入报表名称',
-    },
-  },
-  {
-    field: 'organizationId',
-    label: '所属组织',
-    colProps: { span: 24 },
-    component: 'ApiTreeSelect',
-    required: true,
-    componentProps: () => {
-      return {
-        maxLength: 250,
-        placeholder: '请选择所属组织',
-        api: async () => {
-          const data = await getOrganizationList();
-          copyTransFun(data as any as any[]);
-          return data;
-        },
-        async onChange(e) {
-          organizationId.value = e;
-        },
-      };
-    },
-  },
-  {
-    field: 'remark',
-    label: '描述',
-    colProps: { span: 24 },
-    component: 'InputTextArea',
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入描述',
-    },
-  },
-  {
-    field: 'executeWay',
-    component: 'RadioGroup',
-    helpMessage: [
-      `立即执行，在创建完报表配置后，启用配置即执行。
-    定时执行，用户定义执行时间，启用后，
-    在满足执行时间条件后，自动执行。`,
-    ],
-    label: '执行方式',
-    colProps: {
-      span: 24,
-    },
-    defaultValue: 0,
-    componentProps: ({ formActionType }) => {
-      const { updateSchema, setFieldsValue } = formActionType;
-      const options = [
-        {
-          label: '立即执行',
-          value: 0,
-        },
-        {
-          label: '定时执行',
-          value: 1,
-        },
-      ];
-      return {
-        options,
-        placeholder: '请选择执行方式',
-        onChange(e) {
-          let dataCompareOpions: any = [];
-          setFieldsValue({
-            startTs: 1000,
-            interval: 1000,
-          });
-          if (e.target.value == 0) {
-            setFieldsValue({ queryMode: QueryWay.LATEST });
-            dataCompareOpions = [
-              { label: '固定周期', value: QueryWay.LATEST },
-              { label: '自定义周期', value: QueryWay.TIME_PERIOD },
-            ];
-            updateSchema({
-              field: SchemaFiled.WAY,
-              componentProps: {
-                options: dataCompareOpions,
-              },
-            });
-          } else {
-            setFieldsValue({ queryMode: QueryWay.LATEST });
-            setFieldsValue({ startTs: 5000 });
-            setFieldsValue({ interval: 1000 });
-            dataCompareOpions = [{ label: '固定周期', value: QueryWay.LATEST }];
-            updateSchema({
-              defaultValue: QueryWay.LATEST,
-              field: SchemaFiled.WAY,
-              componentProps: {
-                options: dataCompareOpions,
-              },
-            });
-          }
-        },
-        maxLength: 250,
-      };
-    },
-  },
-  {
-    field: 'cycleType',
-    component: 'Select',
-    label: '周期',
-    required: true,
-    colProps: { span: 24 },
-    defaultValue: 0,
-    componentProps: {
-      placeholder: '请选择周期',
-      options: [
-        { label: '每日', value: 0 },
-        { label: '每周', value: 1 },
-        { label: '每月', value: 2 },
-      ],
-    },
-    ifShow: ({ values }) => isTiming(values.executeWay),
-  },
-  {
-    field: 'currentCycle',
-    component: 'ApiSelect',
-    label: '每周',
-    required: true,
-    colProps: { span: 24 },
-    defaultValue: '0 0 0 ? * 1',
-    componentProps: {
-      placeholder: '请选择周期',
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'every_week',
-      },
-      labelField: 'itemText',
-      valueField: 'itemValue',
-    },
-    ifShow: ({ values }) => isWeek(values.cycleType),
-  },
-  {
-    field: 'cycleTime',
-    component: 'ApiSelect',
-    label: '每月',
-    required: true,
-    colProps: { span: 24 },
-    defaultValue: '0 0 0 1 * ? *',
-    componentProps: {
-      placeholder: '请选择月份',
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'every_month',
-      },
-      labelField: 'itemText',
-      valueField: 'itemValue',
-    },
-    ifShow: ({ values }) => isMonth(values.cycleType),
-  },
-  {
-    field: 'cronTime',
-    component: 'ApiSelect',
-    label: '时间',
-    required: true,
-    colProps: { span: 24 },
-    defaultValue: '0 0 0  * * ?',
-    componentProps: {
-      placeholder: '请选择时间',
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'every_day',
-      },
-      labelField: 'itemText',
-      valueField: 'itemValue',
-    },
-    ifShow: ({ values }) => isTiming(values.executeWay),
-  },
-  {
-    field: 'devices',
-    label: '设备',
-    component: 'Select',
-    slot: 'devices',
-    colProps: { span: 24 },
-  },
-  {
-    field: 'dataType',
-    label: '数据类型',
-    required: true,
-    component: 'Select',
-    componentProps: ({ formActionType }) => {
-      const { updateSchema, setFieldsValue } = formActionType;
-      const options = [
-        { label: '原始数据', value: 0 },
-        { label: '聚合数据', value: 1 },
-      ];
-      return {
-        options,
-        onSelect(e) {
-          let dataCompareOpions: any = [];
-          if (e == 0) {
-            setFieldsValue({ agg: 'NONE' });
-            dataCompareOpions = [{ label: '空', value: AggregateDataEnum.NONE }];
-            updateSchema({
-              field: SchemaFiled.AGG,
-              componentProps: {
-                options: dataCompareOpions,
-              },
-            });
-          } else {
-            setFieldsValue({ agg: '' });
-            dataCompareOpions = [
-              { label: '最小值', value: AggregateDataEnum.MIN },
-              { label: '最大值', value: AggregateDataEnum.MAX },
-              { label: '平均值', value: AggregateDataEnum.AVG },
-              { label: '求和', value: AggregateDataEnum.SUM },
-              { label: '计数', value: AggregateDataEnum.COUNT },
-            ];
-            updateSchema({
-              field: SchemaFiled.AGG,
-              componentProps: {
-                options: dataCompareOpions,
-              },
-            });
-          }
-        },
-        maxLength: 250,
-        placeholder: '请选择属性性质',
-      };
-    },
-    colProps: { span: 24 },
-  },
-  {
-    field: SchemaFiled.AGG,
-    label: '聚合条件',
-    component: 'Select',
-    required: true,
-    componentProps: {
-      placeholder: '请选择聚合条件',
-      getPopupContainer: () => document.body,
-    },
-  },
-  {
-    field: 'limit',
-    required: true,
-    label: '最大条数',
-    component: 'InputNumber',
-    defaultValue: 100,
-    ifShow({ values }) {
-      return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
-    },
-    colProps: { span: 12 },
-    componentProps: {
-      placeholder: '请输入最大条数',
-      min: 7,
-      max: 50000,
-    },
-  },
-  {
-    field: SchemaFiled.WAY,
-    label: '查询周期',
-    component: 'RadioGroup',
-    defaultValue: QueryWay.LATEST,
-    required: true,
-    componentProps({ formActionType }) {
-      const { setFieldsValue } = formActionType;
-      return {
-        placeholder: '请选择查询周期',
-        options: [
-          { label: '固定周期', value: QueryWay.LATEST },
-          { label: '自定义周期', value: QueryWay.TIME_PERIOD },
-        ],
-        onChange(value) {
-          console.log(value);
-          value === QueryWay.LATEST
-            ? setFieldsValue({
-                [SchemaFiled.DATE_RANGE]: [],
-                [SchemaFiled.START_TS]: null,
-                [SchemaFiled.END_TS]: null,
-              })
-            : setFieldsValue({ [SchemaFiled.START_TS]: null });
-        },
-      };
-    },
-  },
-  {
-    field: SchemaFiled.DATE_RANGE,
-    label: '时间段',
-    component: 'RangePicker',
-    required: true,
-    ifShow({ values }) {
-      return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD && !isFixedTime(values.executeWay);
-    },
-    componentProps: {
-      showTime: {
-        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
-      },
-    },
-    colProps: {
-      span: 10,
-    },
-  },
-  {
-    field: SchemaFiled.START_TS,
-    label: '最近时间',
-    component: 'Select',
-    required: true,
-    ifShow({ values }) {
-      return values[SchemaFiled.WAY] == QueryWay.LATEST;
-    },
-    componentProps({ formActionType }) {
-      const { setFieldsValue } = formActionType;
-      return {
-        defaultValue: 1000,
-        placeholder: '请选择近期时间',
-        options: intervalOption,
-        onChange() {
-          setFieldsValue({ [SchemaFiled.INTERVAL]: null });
-        },
-      };
-    },
-  },
-  {
-    field: SchemaFiled.INTERVAL,
-    label: '间隔时间',
-    component: 'Select',
-    required: true,
-    ifShow({ values }) {
-      return values[SchemaFiled.WAY] == QueryWay.LATEST;
-    },
-    componentProps({ formModel, formActionType }) {
-      const options =
-        formModel[SchemaFiled.WAY] === QueryWay.LATEST
-          ? getPacketIntervalByValue(formModel[SchemaFiled.START_TS])
-          : getPacketIntervalByRange(formModel[SchemaFiled.DATE_RANGE]);
-      if (formModel[SchemaFiled.AGG] !== AggregateDataEnum.NONE) {
-        formActionType.setFieldsValue({ [SchemaFiled.LIMIT]: null });
-      }
-      return {
-        placeholder: '请选择间隔时间',
-        options,
-      };
-    },
-  },
-];
+import { ref } from 'vue';
+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 { findDictItemByCode } from '/@/api/system/dict';
+import { isTiming, isWeek, isMonth, isFixedTime } from './timeConfig';
+import { AggregateDataEnum } from '../../device/localtion/cpns/TimePeriodForm/config';
+import {
+  getPacketIntervalByRange,
+  getPacketIntervalByValue,
+  intervalOption,
+} from '../../device/localtion/cpns/TimePeriodForm/helper';
+
+export enum QueryWay {
+  LATEST = 'latest',
+  TIME_PERIOD = 'timePeriod',
+}
+export enum SchemaFiled {
+  WAY = 'queryMode',
+  TIME_PERIOD = 'timePeriod',
+  KEYS = 'keys',
+  DATE_RANGE = 'dataRange',
+  START_TS = 'startTs',
+  END_TS = 'endTs',
+  INTERVAL = 'interval',
+  LIMIT = 'limit',
+  AGG = 'agg',
+  ORDER_BY = 'orderBy',
+}
+export const organizationId = ref('');
+
+// 表格配置
+export const columns: BasicColumn[] = [
+  {
+    title: '配置名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '所属组织',
+    dataIndex: 'organizationDTO.name',
+    width: 120,
+  },
+  {
+    title: '数据类型',
+    dataIndex: 'dataType',
+    width: 120,
+    format: (_text: string, record: Recordable) => {
+      return record.dataType === 0 ? '原始数据' : '聚合数据';
+    },
+  },
+  {
+    title: '配置状态',
+    dataIndex: 'status',
+    width: 120,
+    slots: { customRender: 'configStatus' },
+  },
+  {
+    title: '执行方式',
+    dataIndex: 'executeWay',
+    width: 160,
+    format: (_text: string, record: Recordable) => {
+      return record.executeWay === 0 ? '立即执行' : '定时执行';
+    },
+  },
+  {
+    title: '执行设备',
+    dataIndex: 'devices',
+    width: 160,
+    slots: { customRender: 'doDeviceSlot' },
+  },
+  {
+    title: '创建人',
+    dataIndex: 'createUserName',
+    width: 180,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+];
+export const viewDeviceColumn: BasicColumn[] = [
+  {
+    title: '设备',
+    dataIndex: 'device',
+    width: 80,
+  },
+  {
+    title: '属性',
+    dataIndex: 'attribute',
+    width: 120,
+  },
+];
+
+// 查询配置
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '配置名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入配置名称',
+    },
+  },
+  {
+    field: 'status',
+    label: '配置状态',
+    component: 'Select',
+    colProps: { span: 6 },
+    componentProps: {
+      options: [
+        {
+          label: '启用',
+          value: 1,
+        },
+        {
+          label: '禁用',
+          value: 0,
+        },
+      ],
+      placeholder: '请选择配置状态',
+    },
+  },
+  {
+    field: 'sendTime',
+    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: 'name',
+    label: '报表名称',
+    colProps: { span: 24 },
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 64,
+      placeholder: '请输入报表名称',
+    },
+  },
+  {
+    field: 'organizationId',
+    label: '所属组织',
+    colProps: { span: 24 },
+    component: 'ApiTreeSelect',
+    required: true,
+    componentProps: () => {
+      return {
+        maxLength: 250,
+        placeholder: '请选择所属组织',
+        api: async () => {
+          const data = await getOrganizationList();
+          copyTransFun(data as any as any[]);
+          return data;
+        },
+        async onChange(e) {
+          organizationId.value = e;
+        },
+      };
+    },
+  },
+  {
+    field: 'remark',
+    label: '描述',
+    colProps: { span: 24 },
+    component: 'InputTextArea',
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入描述',
+    },
+  },
+  {
+    field: 'executeWay',
+    component: 'RadioGroup',
+    helpMessage: [
+      `立即执行，在创建完报表配置后，启用配置即执行。
+    定时执行，用户定义执行时间，启用后，
+    在满足执行时间条件后，自动执行。`,
+    ],
+    label: '执行方式',
+    colProps: {
+      span: 24,
+    },
+    defaultValue: 0,
+    componentProps: ({ formActionType }) => {
+      const { updateSchema, setFieldsValue } = formActionType;
+      const options = [
+        {
+          label: '立即执行',
+          value: 0,
+        },
+        {
+          label: '定时执行',
+          value: 1,
+        },
+      ];
+      return {
+        options,
+        placeholder: '请选择执行方式',
+        onChange(e) {
+          let dataCompareOpions: any = [];
+          setFieldsValue({
+            startTs: 1000,
+            interval: 1000,
+          });
+          if (e.target.value == 0) {
+            setFieldsValue({ queryMode: QueryWay.LATEST });
+            dataCompareOpions = [
+              { label: '固定周期', value: QueryWay.LATEST },
+              { label: '自定义周期', value: QueryWay.TIME_PERIOD },
+            ];
+            updateSchema({
+              field: SchemaFiled.WAY,
+              componentProps: {
+                options: dataCompareOpions,
+              },
+            });
+          } else {
+            setFieldsValue({ queryMode: QueryWay.LATEST });
+            setFieldsValue({ startTs: 5000 });
+            setFieldsValue({ interval: 1000 });
+            dataCompareOpions = [{ label: '固定周期', value: QueryWay.LATEST }];
+            updateSchema({
+              defaultValue: QueryWay.LATEST,
+              field: SchemaFiled.WAY,
+              componentProps: {
+                options: dataCompareOpions,
+              },
+            });
+          }
+        },
+        maxLength: 250,
+      };
+    },
+  },
+  {
+    field: 'cycleType',
+    component: 'Select',
+    label: '周期',
+    required: true,
+    colProps: { span: 24 },
+    defaultValue: 0,
+    componentProps: {
+      placeholder: '请选择周期',
+      options: [
+        { label: '每日', value: 0 },
+        { label: '每周', value: 1 },
+        { label: '每月', value: 2 },
+      ],
+    },
+    ifShow: ({ values }) => isTiming(values.executeWay),
+  },
+  {
+    field: 'currentCycle',
+    component: 'ApiSelect',
+    label: '每周',
+    required: true,
+    colProps: { span: 24 },
+    defaultValue: '0 0 0 ? * MON',
+    componentProps: {
+      placeholder: '请选择周期',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'every_week',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+    ifShow: ({ values }) => isWeek(values.cycleType),
+  },
+  {
+    field: 'cycleTime',
+    component: 'ApiSelect',
+    label: '每月',
+    required: true,
+    colProps: { span: 24 },
+    defaultValue: '0 0 0 1 * ? *',
+    componentProps: {
+      placeholder: '请选择月份',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'every_month',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+    ifShow: ({ values }) => isMonth(values.cycleType),
+  },
+  {
+    field: 'cronTime',
+    component: 'ApiSelect',
+    label: '时间',
+    required: true,
+    colProps: { span: 24 },
+    defaultValue: '0 0 0  * * ?',
+    componentProps: {
+      placeholder: '请选择时间',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'every_day',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+    ifShow: ({ values }) => isTiming(values.executeWay),
+  },
+  {
+    field: 'devices',
+    label: '设备',
+    component: 'Select',
+    slot: 'devices',
+    colProps: { span: 24 },
+  },
+  {
+    field: 'dataType',
+    label: '数据类型',
+    required: true,
+    component: 'Select',
+    componentProps: ({ formActionType }) => {
+      const { updateSchema, setFieldsValue } = formActionType;
+      const options = [
+        { label: '原始数据', value: 0 },
+        { label: '聚合数据', value: 1 },
+      ];
+      return {
+        options,
+        onSelect(e) {
+          let dataCompareOpions: any = [];
+          if (e == 0) {
+            setFieldsValue({ agg: 'NONE' });
+            dataCompareOpions = [{ label: '空', value: AggregateDataEnum.NONE }];
+            updateSchema({
+              field: SchemaFiled.AGG,
+              componentProps: {
+                options: dataCompareOpions,
+              },
+            });
+          } else {
+            setFieldsValue({ agg: '' });
+            dataCompareOpions = [
+              { label: '最小值', value: AggregateDataEnum.MIN },
+              { label: '最大值', value: AggregateDataEnum.MAX },
+              { label: '平均值', value: AggregateDataEnum.AVG },
+              { label: '求和', value: AggregateDataEnum.SUM },
+              { label: '计数', value: AggregateDataEnum.COUNT },
+            ];
+            updateSchema({
+              field: SchemaFiled.AGG,
+              componentProps: {
+                options: dataCompareOpions,
+              },
+            });
+          }
+        },
+        maxLength: 250,
+        placeholder: '请选择属性性质',
+      };
+    },
+    colProps: { span: 24 },
+  },
+  {
+    field: SchemaFiled.AGG,
+    label: '聚合条件',
+    component: 'Select',
+    required: true,
+    componentProps: {
+      placeholder: '请选择聚合条件',
+      getPopupContainer: () => document.body,
+    },
+  },
+  {
+    field: 'limit',
+    required: true,
+    label: '最大条数',
+    component: 'InputNumber',
+    defaultValue: 100,
+    ifShow({ values }) {
+      return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
+    },
+    colProps: { span: 12 },
+    componentProps: {
+      placeholder: '请输入最大条数',
+      min: 7,
+      max: 50000,
+    },
+  },
+  {
+    field: SchemaFiled.WAY,
+    label: '查询周期',
+    component: 'RadioGroup',
+    defaultValue: QueryWay.LATEST,
+    required: true,
+    componentProps({ formActionType }) {
+      const { setFieldsValue } = formActionType;
+      return {
+        placeholder: '请选择查询周期',
+        options: [
+          { label: '固定周期', value: QueryWay.LATEST },
+          { label: '自定义周期', value: QueryWay.TIME_PERIOD },
+        ],
+        onChange(value) {
+          console.log(value);
+          value === QueryWay.LATEST
+            ? setFieldsValue({
+                [SchemaFiled.DATE_RANGE]: [],
+                [SchemaFiled.START_TS]: null,
+                [SchemaFiled.END_TS]: null,
+              })
+            : setFieldsValue({ [SchemaFiled.START_TS]: null });
+        },
+      };
+    },
+  },
+  {
+    field: SchemaFiled.DATE_RANGE,
+    label: '时间段',
+    component: 'RangePicker',
+    required: true,
+    ifShow({ values }) {
+      return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD && !isFixedTime(values.executeWay);
+    },
+    componentProps: {
+      showTime: {
+        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+      },
+    },
+    colProps: {
+      span: 10,
+    },
+  },
+  {
+    field: SchemaFiled.START_TS,
+    label: '最近时间',
+    component: 'Select',
+    required: true,
+    ifShow({ values }) {
+      return values[SchemaFiled.WAY] == QueryWay.LATEST;
+    },
+    componentProps({ formActionType }) {
+      const { setFieldsValue } = formActionType;
+      return {
+        defaultValue: 1000,
+        placeholder: '请选择近期时间',
+        options: intervalOption,
+        onChange() {
+          setFieldsValue({ [SchemaFiled.INTERVAL]: null });
+        },
+      };
+    },
+  },
+  {
+    field: SchemaFiled.INTERVAL,
+    label: '间隔时间',
+    component: 'Select',
+    required: true,
+    ifShow({ values }) {
+      return values[SchemaFiled.WAY] == QueryWay.LATEST;
+    },
+    componentProps({ formModel, formActionType }) {
+      const options =
+        formModel[SchemaFiled.WAY] === QueryWay.LATEST
+          ? getPacketIntervalByValue(formModel[SchemaFiled.START_TS])
+          : getPacketIntervalByRange(formModel[SchemaFiled.DATE_RANGE]);
+      if (formModel[SchemaFiled.AGG] !== AggregateDataEnum.NONE) {
+        formActionType.setFieldsValue({ [SchemaFiled.LIMIT]: null });
+      }
+      return {
+        placeholder: '请选择间隔时间',
+        options,
+      };
+    },
+  },
+];

@@ -41,15 +41,21 @@
   import HistoryTrendModal from './components/HistoryTrendModal.vue';
   import trendIcon from '/@/assets/svg/trend.svg';
   import backIcon from '/@/assets/images/back.png';
+  import backWhiteIcon from '/@/assets/images/backWhite.png';
   import { useCalcGridLayout } from '../hook/useCalcGridLayout';
   import { FrontComponent } from '../const/const';
   import { useScript } from '/@/hooks/web/useScript';
   import { BAI_DU_MAP_GL_LIB, BAI_DU_MAP_TRACK_ANIMATION } from '/@/utils/fnUtils';
+  import { useAppStore } from '/@/store/modules/app';
 
   const props = defineProps<{
     value: Recordable;
   }>();
 
+  const userStore = useAppStore();
+
+  const getAceClass = computed((): string => userStore.getDarkMode);
+
   const ROUTE = useRoute();
 
   const ROUTER = useRouter();
@@ -383,7 +389,7 @@
       <template #title>
         <div class="flex items-center">
           <img
-            :src="backIcon"
+            :src="getAceClass === 'dark' ? backWhiteIcon : backIcon"
             v-if="!getIsSharePage"
             class="mr-3 cursor-pointer"
             @click="handleBack"