Merge branch 'ft' into 'main_dev'

feat: 公共接口管理新增自定义脚本，和优化公共接口管理部分代码

See merge request yunteng/thingskit-front!593

+@table-color: #e5e7eb;
+
+.table-border-color {
+  border: 1px solid #e5e7eb;
+  text-align: center;
+}
+
+.table-content {
+  overflow-x: auto;
+
+  table {
+    border-collapse: collapse;
+    width: 35vw;
+    &:extend(.table-border-color);
+  }
+
+  table thead {
+    white-space: nowrap;
+  }
+
+  table td {
+    padding: 5px;
+    white-space: nowrap;
+    &:extend(.table-border-color);
+  }
+
+  table th {
+    padding: 5px;
+    &:extend(.table-border-color);
+  }
+}

+@table-color: #e5e7eb;
+
+.table-border-color {
+  border: 1px solid #e5e7eb;
+  text-align: center;
+}
+
+.table-content {
+  table {
+    width: 31vw;
+    &:extend(.table-border-color);
+  }
+
+  table td {
+    padding: 5px;
+    white-space: nowrap;
+    &:extend(.table-border-color);
+  }
+
+  table th {
+    padding: 5px;
+    &:extend(.table-border-color);
+  }
+}

-import type { BasicColumn } from '/@/components/Table';
-import type { FormSchema } from '/@/components/Table';
-import { getOrganizationList } from '/@/api/system/system';
-import { copyTransFun } from '/@/utils/fnUtils';
-import { getDeviceDataKeys, getDeviceProfile } from '/@/api/alarm/position';
-import { EChartsOption } from 'echarts';
-
-export enum AggregateDataEnum {
-  MIN = 'MIN',
-  MAX = 'MAX',
-  AVG = 'AVG',
-  SUM = 'SUM',
-  COUNT = 'COUNT',
-  NONE = 'NONE',
-}
-export const formSchema: FormSchema[] = [
-  {
-    field: 'organizationId',
-    label: '',
-    component: 'ApiTreeSelect',
-    componentProps: {
-      placeholder: '请选择组织',
-      api: async () => {
-        const data = await getOrganizationList();
-        copyTransFun(data as any as any[]);
-        return data;
-      },
-    },
-  },
-  {
-    field: 'deviceProfileId',
-    label: '',
-    component: 'ApiSelect',
-    componentProps: {
-      api: getDeviceProfile,
-      placeholder: '请选择产品',
-      labelField: 'name',
-      valueField: 'tbProfileId',
-    },
-  },
-  {
-    field: 'name',
-    label: '',
-    component: 'Input',
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入设备名称',
-    },
-  },
-  {
-    field: 'deviceState',
-    label: '',
-    component: 'RadioGroup',
-    componentProps: {
-      size: 'small',
-      options: [
-        { label: '全部', value: null },
-        { label: '待激活', value: 'INACTIVE' },
-        { label: '在线', value: 'ONLINE' },
-        { label: '离线', value: 'OFFLINE' },
-      ],
-    },
-  },
-  {
-    field: 'alarmStatus',
-    label: '是否告警',
-    component: 'RadioGroup',
-    labelWidth: '85px',
-    componentProps: {
-      size: 'small',
-      options: [
-        { label: '是', value: 1 },
-        { label: '否', value: 0 },
-      ],
-    },
-  },
-];
-
-export const columns: BasicColumn[] = [
-  {
-    title: '名称',
-    dataIndex: 'name',
-    width: 120,
-    format: (_text: string, record: Recordable) => {
-      return record?.alias || record?.name;
-    },
-  },
-  {
-    title: '设备状态',
-    dataIndex: 'deviceState',
-    width: 80,
-    slots: { customRender: 'deviceState' },
-  },
-  {
-    title: '位置',
-    dataIndex: 'deviceInfo.address',
-    width: 120,
-  },
-  {
-    title: '告警状态',
-    dataIndex: 'alarmStatus',
-    width: 80,
-    slots: { customRender: 'alarmStatus' },
-  },
-];
-
-// 动态生成options
-function generateOptions(value: number) {
-  if (value === 3600000) {
-    return [
-      {
-        label: '10秒',
-        value: 10000,
-      },
-      {
-        label: '15秒',
-        value: 15000,
-      },
-      {
-        label: '30秒',
-        value: 30000,
-      },
-      {
-        label: '1分钟',
-        value: 60000,
-      },
-      {
-        label: '2分钟',
-        value: 120000,
-      },
-      {
-        label: '5分钟',
-        value: 300000,
-      },
-    ];
-  } else if (value === 7200000) {
-    return [
-      {
-        label: '15秒',
-        value: 15000,
-      },
-      {
-        label: '30秒',
-        value: 30000,
-      },
-      {
-        label: '1分钟',
-        value: 60000,
-      },
-      {
-        label: '2分钟',
-        value: 120000,
-      },
-      {
-        label: '5分钟',
-        value: 300000,
-      },
-      {
-        label: '10分钟',
-        value: 600000,
-      },
-      {
-        label: '15分钟',
-        value: 900000,
-      },
-    ];
-  } else if (value === 18000000) {
-    return [
-      {
-        label: '1分钟',
-        value: 60000,
-      },
-      {
-        label: '2分钟',
-        value: 120000,
-      },
-      {
-        label: '5分钟',
-        value: 300000,
-      },
-      {
-        label: '10分钟',
-        value: 600000,
-      },
-      {
-        label: '15分钟',
-        value: 900000,
-      },
-      {
-        label: '30分钟',
-        value: 1800000,
-      },
-    ];
-  } else if (value === 36000000) {
-    return [
-      {
-        label: '2分钟',
-        value: 120000,
-      },
-      {
-        label: '5分钟',
-        value: 300000,
-      },
-      {
-        label: '10分钟',
-        value: 600000,
-      },
-      {
-        label: '15分钟',
-        value: 900000,
-      },
-      {
-        label: '30分钟',
-        value: 1800000,
-      },
-      {
-        label: '1小时',
-        value: 3600000,
-      },
-    ];
-  } else if (value === 43200000) {
-    return [
-      {
-        label: '2分钟',
-        value: 120000,
-      },
-      {
-        label: '5分钟',
-        value: 300000,
-      },
-      {
-        label: '10分钟',
-        value: 600000,
-      },
-      {
-        label: '15分钟',
-        value: 900000,
-      },
-      {
-        label: '30分钟',
-        value: 1800000,
-      },
-      {
-        label: '1小时',
-        value: 3600000,
-      },
-    ];
-  } else if (value === 86400000) {
-    return [
-      {
-        label: '5分钟',
-        value: 300000,
-      },
-      {
-        label: '10分钟',
-        value: 600000,
-      },
-      {
-        label: '15分钟',
-        value: 900000,
-      },
-      {
-        label: '30分钟',
-        value: 1800000,
-      },
-      {
-        label: '1小时',
-        value: 3600000,
-      },
-      {
-        label: '2小时',
-        value: 7200000,
-      },
-    ];
-  } else if (value === 604800000) {
-    return [
-      {
-        label: '30分钟',
-        value: 1800000,
-      },
-      {
-        label: '1小时',
-        value: 3600000,
-      },
-      {
-        label: '2小时',
-        value: 7200000,
-      },
-      {
-        label: '5小时',
-        value: 18000000,
-      },
-      {
-        label: '10小时',
-        value: 36000000,
-      },
-      {
-        label: '12小时',
-        value: 43200000,
-      },
-      {
-        label: '1天',
-        value: 86400000,
-      },
-    ];
-  } else {
-    return [
-      {
-        label: '2小时',
-        value: 7200000,
-      },
-      {
-        label: '5小时',
-        value: 18000000,
-      },
-      {
-        label: '10小时',
-        value: 36000000,
-      },
-      {
-        label: '12小时',
-        value: 43200000,
-      },
-      {
-        label: '1天',
-        value: 86400000,
-      },
-    ];
-  }
-}
-export const schemas: FormSchema[] = [
-  {
-    field: 'endTs',
-    label: '最后数据',
-    component: 'Select',
-    required: true,
-    componentProps({ formModel, formActionType }) {
-      return {
-        onChange(value) {
-          const { updateSchema } = formActionType;
-          console.log(value);
-          formModel.interval = '';
-          updateSchema({
-            field: 'interval',
-            componentProps: {
-              placeholder: '请选择分组间隔',
-              options: generateOptions(value),
-            },
-          });
-        },
-        getPopupContainer: () => document.body,
-        options: [
-          {
-            label: '最近1小时',
-            value: 3600000,
-          },
-          {
-            label: '最近2小时',
-            value: 7200000,
-          },
-          {
-            label: '最近5小时',
-            value: 18000000,
-          },
-          {
-            label: '最近10小时',
-            value: 36000000,
-          },
-          {
-            label: '最近12小时',
-            value: 43200000,
-          },
-          {
-            label: '最近1天',
-            value: 86400000,
-          },
-          {
-            label: '最近7天',
-            value: 604800000,
-          },
-          {
-            label: '最近30天',
-            value: 2592000000,
-          },
-        ],
-      };
-    },
-  },
-  {
-    field: 'interval',
-    label: '分组间隔',
-    component: 'Select',
-    componentProps: {
-      placeholder: '请选择分组间隔',
-      getPopupContainer: () => document.body,
-      options: [
-        {
-          label: '5分钟',
-          value: 300000,
-        },
-        {
-          label: '10分钟',
-          value: 600000,
-        },
-        {
-          label: '15分钟',
-          value: 900000,
-        },
-        {
-          label: '30分钟',
-          value: 1800000,
-        },
-        {
-          label: '1小时',
-          value: 3600000,
-        },
-        {
-          label: '2小时',
-          value: 7200000,
-        },
-      ],
-    },
-  },
-  {
-    field: 'agg',
-    label: '数据聚合功能',
-    component: 'Select',
-    defaultValue: AggregateDataEnum.NONE,
-    componentProps: {
-      getPopupContainer: () => document.body,
-      options: [
-        {
-          label: '最小值',
-          value: AggregateDataEnum.MIN,
-        },
-        {
-          label: '最大值',
-          value: AggregateDataEnum.MAX,
-        },
-        {
-          label: '平均值',
-          value: AggregateDataEnum.AVG,
-        },
-        {
-          label: '求和',
-          value: AggregateDataEnum.SUM,
-        },
-        {
-          label: '计数',
-          value: AggregateDataEnum.COUNT,
-        },
-        {
-          label: '空',
-          value: AggregateDataEnum.NONE,
-        },
-      ],
-    },
-  },
-  {
-    field: 'attr',
-    label: '设备属性',
-    component: 'Select',
-    componentProps: {
-      api: async (id: string) => {
-        try {
-          const res = await getDeviceDataKeys(id);
-          return res.map((item) => ({ label: item, value: item }));
-        } catch (error) {}
-      },
-    },
-  },
-];
-
-export const selectDeviceAttrSchema: FormSchema[] = [
-  {
-    field: 'keys',
-    label: '设备属性',
-    component: 'Select',
-    componentProps: {
-      getPopupContainer: () => document.body,
-    },
-  },
-];
-
-export const eChartOptions = (series: EChartsOption['series'], keys: string[]): EChartsOption => {
-  return {
-    tooltip: {
-      trigger: 'axis',
-    },
-    legend: {
-      data: keys,
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true,
-    },
-    dataZoom: [
-      {
-        type: 'inside',
-        start: 0,
-        end: 50,
-      },
-      {
-        start: 20,
-        end: 40,
-      },
-    ],
-    xAxis: {
-      type: 'time',
-      boundaryGap: false,
-    },
-    yAxis: {
-      type: 'value',
-      boundaryGap: [0, '100%'],
-    },
-    series,
-  };
-};
-
-//百度地图设置个性化地图配置
-export const setMapStyleV2 = {
-  styleJson: [
-    {
-      featureType: 'land',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'on',
-        color: '#091220ff',
-      },
-    },
-    {
-      featureType: 'water',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'on',
-        color: '#113549ff',
-      },
-    },
-    {
-      featureType: 'green',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'on',
-        color: '#0e1b30ff',
-      },
-    },
-    {
-      featureType: 'building',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'on',
-      },
-    },
-    {
-      featureType: 'building',
-      elementType: 'geometry.topfill',
-      stylers: {
-        color: '#113549ff',
-      },
-    },
-    {
-      featureType: 'building',
-      elementType: 'geometry.sidefill',
-      stylers: {
-        color: '#143e56ff',
-      },
-    },
-    {
-      featureType: 'building',
-      elementType: 'geometry.stroke',
-      stylers: {
-        color: '#dadada00',
-      },
-    },
-    {
-      featureType: 'subwaystation',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'on',
-        color: '#113549B2',
-      },
-    },
-    {
-      featureType: 'education',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'on',
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'medical',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'on',
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'scenicspots',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'on',
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'highway',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'on',
-        weight: 4,
-      },
-    },
-    {
-      featureType: 'highway',
-      elementType: 'geometry.fill',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'highway',
-      elementType: 'geometry.stroke',
-      stylers: {
-        color: '#fed66900',
-      },
-    },
-    {
-      featureType: 'highway',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'on',
-      },
-    },
-    {
-      featureType: 'highway',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'highway',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'highway',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'on',
-      },
-    },
-    {
-      featureType: 'arterial',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'on',
-        weight: 2,
-      },
-    },
-    {
-      featureType: 'arterial',
-      elementType: 'geometry.fill',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'arterial',
-      elementType: 'geometry.stroke',
-      stylers: {
-        color: '#ffeebb00',
-      },
-    },
-    {
-      featureType: 'arterial',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'on',
-      },
-    },
-    {
-      featureType: 'arterial',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'arterial',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'local',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'on',
-        weight: 1,
-      },
-    },
-    {
-      featureType: 'local',
-      elementType: 'geometry.fill',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'local',
-      elementType: 'geometry.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'local',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'on',
-      },
-    },
-    {
-      featureType: 'local',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#979c9aff',
-      },
-    },
-    {
-      featureType: 'local',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffffff',
-      },
-    },
-    {
-      featureType: 'railway',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'subway',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'off',
-        weight: 1,
-      },
-    },
-    {
-      featureType: 'subway',
-      elementType: 'geometry.fill',
-      stylers: {
-        color: '#d8d8d8ff',
-      },
-    },
-    {
-      featureType: 'subway',
-      elementType: 'geometry.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'subway',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'on',
-      },
-    },
-    {
-      featureType: 'subway',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#979c9aff',
-      },
-    },
-    {
-      featureType: 'subway',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffffff',
-      },
-    },
-    {
-      featureType: 'continent',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'on',
-      },
-    },
-    {
-      featureType: 'continent',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'on',
-      },
-    },
-    {
-      featureType: 'continent',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'continent',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'city',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'city',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'on',
-      },
-    },
-    {
-      featureType: 'city',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'city',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'town',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'on',
-      },
-    },
-    {
-      featureType: 'town',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'town',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#454d50ff',
-      },
-    },
-    {
-      featureType: 'town',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffffff',
-      },
-    },
-    {
-      featureType: 'road',
-      elementType: 'geometry.fill',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'poilabel',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'on',
-      },
-    },
-    {
-      featureType: 'districtlabel',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'road',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'on',
-      },
-    },
-    {
-      featureType: 'road',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'road',
-      elementType: 'geometry.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'district',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'on',
-      },
-    },
-    {
-      featureType: 'poilabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'poilabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'poilabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'manmade',
-      elementType: 'geometry',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'districtlabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffffff',
-      },
-    },
-    {
-      featureType: 'entertainment',
-      elementType: 'geometry',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'shopping',
-      elementType: 'geometry',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      stylers: {
-        curZoomRegionId: '0',
-        curZoomRegion: '6,10',
-        level: '6',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      stylers: {
-        curZoomRegionId: '0',
-        curZoomRegion: '6,10',
-        level: '7',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      stylers: {
-        curZoomRegionId: '0',
-        curZoomRegion: '6,10',
-        level: '8',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      stylers: {
-        curZoomRegionId: '0',
-        curZoomRegion: '6,10',
-        level: '9',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      stylers: {
-        curZoomRegionId: '0',
-        curZoomRegion: '6,10',
-        level: '10',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,10',
-        level: '6',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,10',
-        level: '7',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,10',
-        level: '8',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,10',
-        level: '9',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,10',
-        level: '10',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,10',
-        level: '6',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,10',
-        level: '7',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,10',
-        level: '8',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,10',
-        level: '9',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,10',
-        level: '10',
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      stylers: {
-        curZoomRegionId: '0',
-        curZoomRegion: '6,9',
-        level: '6',
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      stylers: {
-        curZoomRegionId: '0',
-        curZoomRegion: '6,9',
-        level: '7',
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      stylers: {
-        curZoomRegionId: '0',
-        curZoomRegion: '6,9',
-        level: '8',
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      stylers: {
-        curZoomRegionId: '0',
-        curZoomRegion: '6,9',
-        level: '9',
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,9',
-        level: '6',
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,9',
-        level: '7',
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,9',
-        level: '8',
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,9',
-        level: '9',
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,9',
-        level: '6',
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,9',
-        level: '7',
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,9',
-        level: '8',
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-        curZoomRegionId: '0',
-        curZoomRegion: '6,9',
-        level: '9',
-      },
-    },
-    {
-      featureType: 'subwaylabel',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'subwaylabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'tertiarywaysign',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'tertiarywaysign',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'provincialwaysign',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'provincialwaysign',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'nationalwaysign',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'nationalwaysign',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'highwaysign',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'highwaysign',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'village',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'district',
-      elementType: 'labels.text',
-      stylers: {
-        fontsize: 20,
-      },
-    },
-    {
-      featureType: 'district',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'district',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'country',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'country',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'water',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'water',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      elementType: 'geometry.fill',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      elementType: 'geometry.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'tertiaryway',
-      elementType: 'geometry.fill',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'tertiaryway',
-      elementType: 'geometry.stroke',
-      stylers: {
-        color: '#ffffff10',
-      },
-    },
-    {
-      featureType: 'provincialway',
-      elementType: 'geometry.fill',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'provincialway',
-      elementType: 'geometry.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      elementType: 'geometry.fill',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      elementType: 'geometry.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'highway',
-      elementType: 'labels.text',
-      stylers: {
-        fontsize: 20,
-      },
-    },
-    {
-      featureType: 'nationalway',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'nationalway',
-      elementType: 'labels.text',
-      stylers: {
-        fontsize: 20,
-      },
-    },
-    {
-      featureType: 'provincialway',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'provincialway',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'provincialway',
-      elementType: 'labels.text',
-      stylers: {
-        fontsize: 20,
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      elementType: 'labels.text',
-      stylers: {
-        fontsize: 20,
-      },
-    },
-    {
-      featureType: 'cityhighway',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'estate',
-      elementType: 'geometry',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'tertiaryway',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'tertiaryway',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'fourlevelway',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'fourlevelway',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'scenicspotsway',
-      elementType: 'geometry.fill',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'scenicspotsway',
-      elementType: 'geometry.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'universityway',
-      elementType: 'geometry.fill',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'universityway',
-      elementType: 'geometry.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'vacationway',
-      elementType: 'geometry.fill',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'vacationway',
-      elementType: 'geometry.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'fourlevelway',
-      elementType: 'geometry',
-      stylers: {
-        visibility: 'on',
-      },
-    },
-    {
-      featureType: 'fourlevelway',
-      elementType: 'geometry.fill',
-      stylers: {
-        color: '#12223dff',
-      },
-    },
-    {
-      featureType: 'fourlevelway',
-      elementType: 'geometry.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'transportationlabel',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'on',
-      },
-    },
-    {
-      featureType: 'transportationlabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'transportationlabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'transportationlabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'educationlabel',
-      elementType: 'labels',
-      stylers: {
-        visibility: 'on',
-      },
-    },
-    {
-      featureType: 'educationlabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'educationlabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'educationlabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'transportation',
-      elementType: 'geometry',
-      stylers: {
-        color: '#113549ff',
-      },
-    },
-    {
-      featureType: 'airportlabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'airportlabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'scenicspotslabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'scenicspotslabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'medicallabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'medicallabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'medicallabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'scenicspotslabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'airportlabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'entertainmentlabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'entertainmentlabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'entertainmentlabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'estatelabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'estatelabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'estatelabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'businesstowerlabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'businesstowerlabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'businesstowerlabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'companylabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'companylabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'companylabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'governmentlabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'governmentlabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'governmentlabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'restaurantlabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'restaurantlabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'restaurantlabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'hotellabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'hotellabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'hotellabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'shoppinglabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'shoppinglabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'shoppinglabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'lifeservicelabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'lifeservicelabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'lifeservicelabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'carservicelabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'carservicelabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'carservicelabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'financelabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'financelabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'financelabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'otherlabel',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'otherlabel',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'otherlabel',
-      elementType: 'labels.icon',
-      stylers: {
-        visibility: 'off',
-      },
-    },
-    {
-      featureType: 'manmade',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'manmade',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'transportation',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'transportation',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'education',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'education',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'medical',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'medical',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-    {
-      featureType: 'scenicspots',
-      elementType: 'labels.text.fill',
-      stylers: {
-        color: '#2dc4bbff',
-      },
-    },
-    {
-      featureType: 'scenicspots',
-      elementType: 'labels.text.stroke',
-      stylers: {
-        color: '#ffffff00',
-      },
-    },
-  ],
-};

-import { FormSchema } from '/@/components/Form';
-
-export const scheme: FormSchema[] = [
-  // {
-  //   field: 'effectScope',
-  //   label: '时间周期',
-  //   colProps: { span: 24 },
-  //   component: 'Input',
-  //   defaultValue: 'effectScope',
-  //   componentProps: {
-  //     disabled: true,
-  //   },
-  // },
-  {
-    field: 'agg',
-    label: '聚合方式',
-    defaultValue: 'agg',
-    colProps: { span: 24 },
-    component: 'Input',
-    componentProps: {
-      disabled: true,
-    },
-  },
-  {
-    field: 'interval',
-    label: '间隔时间',
-    defaultValue: 'interval',
-    colProps: { span: 24 },
-    component: 'Input',
-    componentProps: {
-      disabled: true,
-    },
-  },
-];

-import { Moment } from 'moment';
-
-enum TimeUnit {
-  SECOND = 'second',
-  MINUTE = 'MINUTE',
-  HOUR = 'HOUR',
-  DAY = 'DAY',
-}
-
-const unitMapping = {
-  [TimeUnit.SECOND]: '秒',
-  [TimeUnit.MINUTE]: '分',
-  [TimeUnit.HOUR]: '小时',
-  [TimeUnit.DAY]: '天',
-};
-
-const unitConversion = {
-  [TimeUnit.SECOND]: 1 * 1000,
-  [TimeUnit.MINUTE]: 1 * 60 * 1000,
-  [TimeUnit.HOUR]: 1 * 60 * 60 * 1000,
-  [TimeUnit.DAY]: 1 * 60 * 60 * 24 * 1000,
-};
-
-export const intervalOption = [
-  {
-    id: 1,
-    unit: TimeUnit.SECOND,
-    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
-  },
-  {
-    id: 5,
-    unit: TimeUnit.SECOND,
-    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
-  },
-  {
-    id: 10,
-    unit: TimeUnit.SECOND,
-    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
-  },
-  {
-    id: 15,
-    unit: TimeUnit.SECOND,
-    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
-  },
-  {
-    id: 30,
-    unit: TimeUnit.SECOND,
-    linkage: [{ id: 1, unit: TimeUnit.SECOND }],
-  },
-  {
-    id: 1,
-    unit: TimeUnit.MINUTE,
-    linkage: [
-      { id: 1, unit: TimeUnit.SECOND },
-      { id: 5, unit: TimeUnit.SECOND },
-    ],
-  },
-  {
-    id: 2,
-    unit: TimeUnit.MINUTE,
-    linkage: [
-      { id: 1, unit: TimeUnit.SECOND },
-      { id: 5, unit: TimeUnit.SECOND },
-      { id: 10, unit: TimeUnit.SECOND },
-      { id: 15, unit: TimeUnit.SECOND },
-    ],
-  },
-  {
-    id: 5,
-    unit: TimeUnit.MINUTE,
-    linkage: [
-      { id: 1, unit: TimeUnit.SECOND },
-      { id: 5, unit: TimeUnit.SECOND },
-      { id: 10, unit: TimeUnit.SECOND },
-      { id: 15, unit: TimeUnit.SECOND },
-      { id: 30, unit: TimeUnit.SECOND },
-    ],
-  },
-  {
-    id: 10,
-    unit: TimeUnit.MINUTE,
-    linkage: [
-      { id: 5, unit: TimeUnit.SECOND },
-      { id: 10, unit: TimeUnit.SECOND },
-      { id: 15, unit: TimeUnit.SECOND },
-      { id: 30, unit: TimeUnit.SECOND },
-      { id: 1, unit: TimeUnit.MINUTE },
-    ],
-  },
-  {
-    id: 15,
-    unit: TimeUnit.MINUTE,
-    linkage: [
-      { id: 5, unit: TimeUnit.SECOND },
-      { id: 10, unit: TimeUnit.SECOND },
-      { id: 15, unit: TimeUnit.SECOND },
-      { id: 30, unit: TimeUnit.SECOND },
-      { id: 1, unit: TimeUnit.MINUTE },
-      { id: 2, unit: TimeUnit.MINUTE },
-    ],
-  },
-  {
-    id: 30,
-    unit: TimeUnit.MINUTE,
-    linkage: [
-      { id: 5, unit: TimeUnit.SECOND },
-      { id: 10, unit: TimeUnit.SECOND },
-      { id: 15, unit: TimeUnit.SECOND },
-      { id: 30, unit: TimeUnit.SECOND },
-      { id: 1, unit: TimeUnit.MINUTE },
-      { id: 2, unit: TimeUnit.MINUTE },
-    ],
-  },
-  {
-    id: 1,
-    unit: TimeUnit.HOUR,
-    linkage: [
-      { id: 10, unit: TimeUnit.SECOND },
-      { id: 15, unit: TimeUnit.SECOND },
-      { id: 30, unit: TimeUnit.SECOND },
-      { id: 1, unit: TimeUnit.MINUTE },
-      { id: 2, unit: TimeUnit.MINUTE },
-      { id: 5, unit: TimeUnit.MINUTE },
-    ],
-  },
-  {
-    id: 2,
-    unit: TimeUnit.HOUR,
-    linkage: [
-      { id: 15, unit: TimeUnit.SECOND },
-      { id: 30, unit: TimeUnit.SECOND },
-      { id: 1, unit: TimeUnit.MINUTE },
-      { id: 2, unit: TimeUnit.MINUTE },
-      { id: 5, unit: TimeUnit.MINUTE },
-      { id: 10, unit: TimeUnit.MINUTE },
-      { id: 15, unit: TimeUnit.MINUTE },
-    ],
-  },
-  {
-    id: 5,
-    unit: TimeUnit.HOUR,
-    linkage: [
-      { id: 1, unit: TimeUnit.MINUTE },
-      { id: 2, unit: TimeUnit.MINUTE },
-      { id: 5, unit: TimeUnit.MINUTE },
-      { id: 10, unit: TimeUnit.MINUTE },
-      { id: 15, unit: TimeUnit.MINUTE },
-      { id: 30, unit: TimeUnit.MINUTE },
-    ],
-  },
-  {
-    id: 10,
-    unit: TimeUnit.HOUR,
-    linkage: [
-      { id: 2, unit: TimeUnit.MINUTE },
-      { id: 5, unit: TimeUnit.MINUTE },
-      { id: 10, unit: TimeUnit.MINUTE },
-      { id: 15, unit: TimeUnit.MINUTE },
-      { id: 30, unit: TimeUnit.MINUTE },
-      { id: 1, unit: TimeUnit.HOUR },
-    ],
-  },
-  {
-    id: 12,
-    unit: TimeUnit.HOUR,
-    linkage: [
-      { id: 2, unit: TimeUnit.MINUTE },
-      { id: 5, unit: TimeUnit.MINUTE },
-      { id: 10, unit: TimeUnit.MINUTE },
-      { id: 15, unit: TimeUnit.MINUTE },
-      { id: 30, unit: TimeUnit.MINUTE },
-      { id: 1, unit: TimeUnit.HOUR },
-    ],
-  },
-  {
-    id: 1,
-    unit: TimeUnit.DAY,
-    linkage: [
-      { id: 5, unit: TimeUnit.MINUTE },
-      { id: 10, unit: TimeUnit.MINUTE },
-      { id: 15, unit: TimeUnit.MINUTE },
-      { id: 30, unit: TimeUnit.MINUTE },
-      { id: 1, unit: TimeUnit.HOUR },
-      { id: 2, unit: TimeUnit.HOUR },
-    ],
-  },
-  {
-    id: 7,
-    unit: TimeUnit.DAY,
-    linkage: [
-      { id: 30, unit: TimeUnit.MINUTE },
-      { id: 1, unit: TimeUnit.HOUR },
-      { id: 2, unit: TimeUnit.HOUR },
-      { id: 5, unit: TimeUnit.HOUR },
-      { id: 10, unit: TimeUnit.HOUR },
-      { id: 12, unit: TimeUnit.HOUR },
-      { id: 1, unit: TimeUnit.DAY },
-    ],
-  },
-  {
-    id: 30,
-    unit: TimeUnit.DAY,
-    linkage: [
-      { id: 2, unit: TimeUnit.HOUR },
-      { id: 5, unit: TimeUnit.HOUR },
-      { id: 10, unit: TimeUnit.HOUR },
-      { id: 12, unit: TimeUnit.HOUR },
-      { id: 1, unit: TimeUnit.DAY },
-    ],
-  },
-].map((item) => {
-  return {
-    value: item.id * unitConversion[item.unit],
-    label: item.id + unitMapping[item.unit],
-    linkage: item.linkage.map((item) => {
-      return {
-        value: item.id * unitConversion[item.unit],
-        label: item.id + unitMapping[item.unit],
-      };
-    }),
-  };
-});
-
-const rangeIntervalOption = [
-  {
-    id: 90,
-    unit: TimeUnit.DAY,
-    linkage: [
-      { id: 5, unit: TimeUnit.HOUR },
-      { id: 10, unit: TimeUnit.HOUR },
-      { id: 12, unit: TimeUnit.HOUR },
-      { id: 1, unit: TimeUnit.DAY },
-      { id: 7, unit: TimeUnit.DAY },
-    ],
-  },
-  {
-    id: 180,
-    unit: TimeUnit.DAY,
-    linkage: [
-      { id: 10, unit: TimeUnit.HOUR },
-      { id: 12, unit: TimeUnit.HOUR },
-      { id: 1, unit: TimeUnit.DAY },
-      { id: 7, unit: TimeUnit.DAY },
-    ],
-  },
-  {
-    id: 360,
-    unit: TimeUnit.DAY,
-    linkage: [
-      { id: 1, unit: TimeUnit.DAY },
-      { id: 7, unit: TimeUnit.DAY },
-      { id: 30, unit: TimeUnit.DAY },
-    ],
-  },
-].map((item) => {
-  return {
-    value: item.id * unitConversion[item.unit],
-    label: item.id + unitMapping[item.unit],
-    linkage: item.linkage.map((item) => {
-      return {
-        value: item.id * unitConversion[item.unit],
-        label: item.id + unitMapping[item.unit],
-      };
-    }),
-  };
-});
-
-/**
- * @description
- * @param {number} value
- * @returns
- */
-export function getPacketIntervalByValue(value: number) {
-  return intervalOption.find((item) => item.value === value)?.linkage || [];
-}
-
-export function getPacketIntervalByRange(
-  [start, end] = [null, null] as [Nullable<Moment>, Nullable<Moment>]
-) {
-  if (start && end) {
-    const value = end.diff(start, 'ms');
-    let options: { value: number; label: string }[] = [];
-    for (const item of [...intervalOption, ...rangeIntervalOption]) {
-      if (item.value <= value) continue;
-      if (item.value >= value) {
-        options = item.linkage;
-        break;
-      }
-    }
-    return options;
-  }
-  return [];
-}

-<script setup lang="ts">
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { scheme } from './config';
-
-  defineEmits(['register']);
-
-  const [registerForm, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
-    schemas: scheme,
-    showActionButtonGroup: false,
-  });
-
-  const getValue = () => {
-    return getFieldsValue();
-  };
-
-  const setValue = (objs) => setFieldsValue(objs);
-
-  const resetValue = () => resetFields();
-
-  defineExpose({
-    getValue,
-    setValue,
-    resetValue,
-  });
-</script>
-
-<template>
-  <BasicForm @register="registerForm" />
-</template>

+<template>
+  <div class="flex flex-col justify-between">
+    <Tag v-if="scriptType === OnlineEditorTypeEnum.JAVASCRIPT" color="blue" class="tag-text-top">
+      <span>function</span>&nbsp;&nbsp;filter(res)&nbsp;&nbsp;{
+    </Tag>
+    <div class="mt-2 mb-2" ref="aceRef"></div>
+    <Tag
+      v-if="scriptType === OnlineEditorTypeEnum.JAVASCRIPT"
+      color="blue"
+      class="mt-2 tag-text-bottom"
+      >}</Tag
+    >
+    <div v-if="scriptType === OnlineEditorTypeEnum.JAVASCRIPT" class="ml-2 -mt-1.5">
+      <Button @click="onHandleFormatter" class="mt-8 -ml-2">
+        <template #icon>
+          <CopyOutlined />
+        </template>
+        格式化
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="aceEditor">
+  import { ref, computed, onMounted, nextTick, watch } from 'vue';
+  import ace from 'ace-builds';
+  import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
+  import 'ace-builds/src-noconflict/theme-terminal'; // 默认设置的主题
+  import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式javascript
+  import 'ace-builds/src-noconflict/snippets/xml'; // 设置xmL
+  import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';
+  import { useAppStore } from '/@/store/modules/app';
+  import { CopyOutlined } from '@ant-design/icons-vue';
+  import { Button, Tag } from 'ant-design-vue';
+  import { OnlineEditorTypeEnum } from '../../../config/enum';
+
+  const emits = defineEmits(['changeAceContent']);
+
+  const props = defineProps({
+    restData: {
+      type: Object,
+    },
+    scriptType: {
+      type: String,
+      default: 'javascript',
+    },
+  });
+
+  const aceEditor = ref();
+
+  const aceRef = ref();
+
+  const userStore = useAppStore();
+
+  const getAceClass = computed((): string => userStore.getDarkMode);
+
+  const getRestData: any = ref(null);
+
+  watch(
+    () => props.restData,
+    (newVal) => {
+      getRestData.value = newVal;
+      onHandleFormatter();
+    },
+    { deep: true }
+  );
+
+  // 初始化编辑器
+  const initEditor = () => {
+    aceEditor.value = ace.edit(aceRef.value, {
+      maxLines: 50, // 最大行数，超过会自动出现滚动条
+      minLines: props.scriptType === OnlineEditorTypeEnum.JAVASCRIPT ? 36 : 14, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
+      fontSize: 14, // 编辑器内字体大小
+      theme: 'ace/theme/chrome', // 默认设置的主题
+      mode:
+        props.scriptType === OnlineEditorTypeEnum.JAVASCRIPT
+          ? 'ace/mode/javascript'
+          : 'ace/mode/xml', // 默认设置的语言模式
+      tabSize: 2, // 制表符设置为 4 个空格大小
+    });
+
+    aceEditor.value.setOptions({
+      enableBasicAutocompletion: true,
+      enableLiveAutocompletion: true,
+      enableSnippets: true,
+      enableEmmet: true,
+      theme: getAceClass.value === 'dark' ? 'ace/theme/terminal' : 'ace/theme/chrome',
+    });
+    doFilter();
+    beautify(aceEditor.value.session);
+  };
+
+  const doFilter = () => {
+    aceEditor.value.getSession().on('change', async () => {
+      try {
+        await nextTick();
+        const jsCode = aceEditor.value.getValue();
+        const res = getRestData.value ?? props.restData;
+        const fn = new Function('data', 'res', jsCode)(res?.data, res);
+        emits('changeAceContent', fn);
+      } catch (error) {
+        return `过滤函数错误，日志：${error}`;
+      }
+    });
+  };
+
+  const onHandleFormatter = () => {
+    let oldValue = aceEditor.value?.getValue() || '';
+    oldValue = oldValue.replaceAll(/;(\n+)?/g, ';\n');
+    aceEditor.value?.setValue(oldValue);
+    beautify(aceEditor.value.session);
+  };
+
+  const getValue = () => {
+    return aceEditor?.value?.getValue();
+  };
+
+  const setValue = (data) => {
+    return aceEditor?.value?.setValue(data);
+  };
+
+  onMounted(() => {
+    initEditor();
+  });
+
+  defineExpose({
+    getValue,
+    setValue,
+  });
+</script>
+
+<style lang="less" scoped>
+  .jsoneditor {
+    border: none;
+  }
+
+  .tag-text {
+    white-space: normal;
+    height: auto;
+  }
+
+  .tag-text-top {
+    width: 8vw;
+    &:extend(.tag-text);
+  }
+
+  .tag-text-bottom {
+    width: 1vw;
+    &:extend(.tag-text);
+  }
+</style>

@@ -8,30 +8,28 @@
     </a-radio-group>
     <div class="mt-3">
       <a-textarea
-        v-show="getRequestBody.content.requestParamsBodyType === 'none'"
+        v-show="getRequestBody.content.requestParamsBodyType === RequestBodyTypeEnum.NONE"
         disabled
         placeholder="该接口没有 Body 体"
-        :rows="2"
       />
       <BodyTable
         ref="bodyCellFormDataTableRef"
-        v-show="getRequestBody.content.requestParamsBodyType === 'form-data'"
+        v-show="getRequestBody.content.requestParamsBodyType === RequestBodyTypeEnum.FORMDATA"
       />
       <BodyTable
         ref="bodyCellXwwwTableRef"
-        v-show="getRequestBody.content.requestParamsBodyType === 'x-www-form-urlencoded'"
+        v-show="getRequestBody.content.requestParamsBodyType === RequestBodyTypeEnum.XWWW"
       />
       <JsonEditor
         :showBtn="false"
-        style="width: 35vw; height: 30vh"
-        v-show="getRequestBody.content.requestParamsBodyType === 'json'"
+        style="width: 35vw; height: 25vh"
+        v-show="getRequestBody.content.requestParamsBodyType === RequestBodyTypeEnum.JSON"
         ref="jsonEditorRef"
       />
-      <a-textarea
-        v-model:value="getRequestBody.content.xml"
-        v-show="getRequestBody.content.requestParamsBodyType === 'xml'"
-        placeholder="请输入xml"
-        :rows="6"
+      <AceTypeXmlEditor
+        ref="aceEditorRef"
+        v-show="getRequestBody.content.requestParamsBodyType === RequestBodyTypeEnum.XML"
+        :scriptType="OnlineEditorTypeEnum.XML"
       />
     </div>
   </div>
@@ -39,10 +37,12 @@
 <script lang="ts" setup name="body">
   import { reactive, ref, nextTick } from 'vue';
   import { RequestBodyTypeEnum } from '../../../config/enum';
-  import BodyTable from './bodyTable.vue';
+  import BodyTable from './paramsTable.vue';
   import { isEmpty } from '/@/utils/is';
   import { useUtils } from '../../../hooks/useUtils';
   import JsonEditor from './jsonEditor.vue';
+  import AceTypeXmlEditor from './aceEditor.vue';
+  import { OnlineEditorTypeEnum } from '../../../config/enum';
 
   const getRequestBody = reactive({
     content: {
@@ -62,6 +62,8 @@
 
   const jsonEditorRef = ref<InstanceType<typeof JsonEditor>>();
 
+  const aceEditorRef = ref<InstanceType<typeof AceTypeXmlEditor>>();
+
   const bodyCellXwwwTableRef = ref<InstanceType<typeof BodyTable>>();
 
   const handleChange = ({ target }) => {
@@ -76,9 +78,11 @@
     const valuesFormData = bodyCellFormDataTableRef.value?.getValue();
     const valuesXWww = bodyCellXwwwTableRef.value?.getValue();
     const jsonEditorValue = jsonEditorRef.value?.getJsonValue();
-    getRequestBody.content['form-data'] = valuesFormData as any;
-    getRequestBody.content['x-www-form-urlencoded'] = valuesXWww as any;
-    getRequestBody.content['json'] = jsonEditorValue as any;
+    const xmlEditorValue = aceEditorRef.value?.getValue();
+    getRequestBody.content[RequestBodyTypeEnum.FORMDATA] = valuesFormData as any;
+    getRequestBody.content[RequestBodyTypeEnum.XWWW] = valuesXWww as any;
+    getRequestBody.content[RequestBodyTypeEnum.JSON] = jsonEditorValue as any;
+    getRequestBody.content[RequestBodyTypeEnum.XML] = xmlEditorValue as any;
     if (type === 'none') getRequestBody.content = {} as any;
     return getRequestBody.content;
   };
@@ -90,18 +94,22 @@
     getRequestBody.content.requestParamsBodyType = type;
     await nextTick();
     await nextTick();
-    bodyCellFormDataTableRef.value?.setValue(isEmpty(data) ? [pushObj] : data['form-data']);
-    bodyCellXwwwTableRef.value?.setValue(isEmpty(data) ? [pushObj] : data['x-www-form-urlencoded']);
+    bodyCellFormDataTableRef.value?.setValue(
+      isEmpty(data) ? [pushObj] : data[RequestBodyTypeEnum.FORMDATA]
+    );
+    bodyCellXwwwTableRef.value?.setValue(
+      isEmpty(data) ? [pushObj] : data[RequestBodyTypeEnum.XWWW]
+    );
     jsonEditorRef.value?.setJsonValue(data['json'] || '{}');
-    getRequestBody.content.xml = data['xml'];
+    aceEditorRef.value?.setValue(data['xml'] || '');
   };
 
   //重置数据
   const resetValue = () => {
     for (let i in getRequestBody.content) Reflect.set(getRequestBody.content, i, '');
-    getRequestBody.content['form-data'] = {};
-    getRequestBody.content['x-www-form-urlencoded'] = {};
-    getRequestBody.content.requestParamsBodyType = 'none';
+    getRequestBody.content[RequestBodyTypeEnum.FORMDATA] = {};
+    getRequestBody.content[RequestBodyTypeEnum.XWWW] = {};
+    getRequestBody.content.requestParamsBodyType = RequestBodyTypeEnum.NONE;
     nextTick(() => {
       bodyCellFormDataTableRef?.value?.resetValue();
       bodyCellXwwwTableRef?.value?.resetValue();

-<template>
-  <div class="table-content">
-    <!-- 采用的原生表格 -->
-    <table align="center">
-      <thead>
-        <tr>
-          <th v-for="item in editCellTableTHeadConfig" :key="item">{{ item }}</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(item, index) in tableArray.content" :key="index">
-          <td>
-            {{ index + 1 }}
-          </td>
-          <td style="width: 12vw">
-            <Select
-              v-model:value="item.key"
-              placeholder="请选择"
-              :options="selectOptions"
-              @change="handleChange"
-              @dropdownVisibleChange="hanldeDropdownVisibleChange"
-              allowClear
-            />
-          </td>
-          <td style="width: 12vw">
-            <div v-if="item.key === 'date_range'">
-              <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date1" />
-              <span>~</span>
-              <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" />
-            </div>
-            <div v-else>
-              <a-input
-                :disabled="item.editDisabled"
-                placeholder="请输入"
-                v-model:value="item.value"
-              />
-            </div>
-          </td>
-          <td style="width: 4vw">
-            <a-switch v-model:checked="item.required" />
-          </td>
-          <td style="width: 4vw">
-            <div>
-              <Button type="dashed" @click="add(item, index)">
-                <template #icon><PlusOutlined /></template
-              ></Button>
-              <Button type="dashed" style="margin-left: 5px" @click="remove(item, index)">
-                <template #icon> <MinusOutlined /></template>
-              </Button>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-<script lang="ts" setup name="editCellTable">
-  import { reactive, ref, onMounted, nextTick } from 'vue';
-  import { Select, Button } from 'ant-design-vue';
-  import { findDictItemByCode } from '/@/api/system/dict';
-  import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
-  import { editCellTableTHeadConfig } from '../../../config/config';
-  import { selectType, tableItems } from '../../../config/types';
-
-  defineProps({
-    method: {
-      type: String,
-    },
-  });
-
-  const selectOptions = ref<selectType[]>([]);
-
-  onMounted(() => {
-    getSelectOptions();
-  });
-
-  const getSelectOptions = async () => {
-    const res = await findDictItemByCode({ dictCode: 'dataview_builtin_params' });
-    selectOptions.value = res.map((m) => ({ label: m.itemText, value: m.itemValue }));
-    selectOptions.value.push({
-      label: '自定义',
-      value: 'scope',
-    });
-  };
-
-  const tableArray = reactive<{
-    content: tableItems[];
-  }>({
-    content: [
-      {
-        key: undefined,
-        value: '',
-        editDisabled: false,
-        required: false,
-        date1: '',
-        date2: '',
-      },
-    ],
-  });
-
-  // 新增
-  const add = (_, index: number) => {
-    tableArray.content.splice(index + 1, 0, {
-      key: undefined,
-      value: '',
-      editDisabled: false,
-      required: false,
-      date1: '',
-      date2: '',
-    });
-  };
-
-  // 减少
-  const remove = (item, index: number) => {
-    if (tableArray.content.length > 1) {
-      selectOptions.value.forEach((ele) => {
-        if (ele.value == item.key) {
-          ele.disabled = false;
-        }
-      });
-      tableArray.content.splice(index, 1);
-    } else {
-      resetValue();
-    }
-  };
-
-  const hanldeDropdownVisibleChange = () => handleChange();
-
-  //Select互斥
-  const handleChange = () => {
-    selectOptions.value.forEach((ele) => {
-      ele.disabled = false;
-      tableArray.content.forEach((element) => {
-        if (element.key === 'scope' || element.key === 'fixed_date') {
-          element.editDisabled = false;
-        } else {
-          element.value = '';
-          element.editDisabled = true;
-        }
-        if (element.key === ele.value && element.key !== 'scope' && element.key !== 'fixed_date') {
-          ele.disabled = true;
-        }
-      });
-    });
-  };
-
-  //获取数据
-  const getValue = () => {
-    const assemblyData = tableArray.content.map((it) => {
-      return {
-        key: it.key,
-        value: it.key === 'date_range' ? `${it.date1},${it.date2}` : it.value,
-        editDisabled: it.editDisabled,
-        required: it.required,
-      };
-    });
-    return assemblyData;
-  };
-
-  //设置数据
-  const setValue = async (data) => {
-    await nextTick();
-    const assemblyData = data.map((it) => {
-      return {
-        key: it.key,
-        value: it.value,
-        editDisabled: it.editDisabled,
-        required: it.required,
-        date1: it.key === 'date_range' ? it.value?.split(',')?.at(-2) : '',
-        date2: it.key === 'date_range' ? it.value?.split(',')?.at(-1) : '',
-      };
-    });
-    tableArray.content = assemblyData;
-    tableArray.content.forEach(() => {
-      handleChange();
-    });
-  };
-
-  //重置数据
-  const resetValue = () => {
-    tableArray.content = [];
-    tableArray.content.push({
-      key: undefined,
-      value: '',
-      editDisabled: false,
-      required: false,
-      date1: '',
-      date2: '',
-    });
-    nextTick(() => {
-      tableArray.content.forEach(() => {
-        handleChange();
-      });
-    });
-  };
-  defineExpose({
-    getValue,
-    setValue,
-    resetValue,
-  });
-</script>
-
-<style scoped lang="less">
-  @table-color: #e5e7eb;
-
-  .table-border-color {
-    border: 1px solid #e5e7eb;
-    text-align: center;
-  }
-
-  .table-content {
-    overflow-x: auto;
-
-    table {
-      border-collapse: collapse;
-      width: 35vw;
-      &:extend(.table-border-color);
-    }
-
-    table thead {
-      white-space: nowrap;
-    }
-
-    table td {
-      padding: 5px;
-      white-space: nowrap;
-      &:extend(.table-border-color);
-    }
-
-    table th {
-      padding: 5px;
-      &:extend(.table-border-color);
-    }
-  }
-</style>

@@ -42,43 +42,42 @@
   import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
   import { editTestCellTableTHeaderConfig } from '../../../config/config';
   import { tableItems } from '../../../config/types';
-  defineProps({
-    method: {
-      type: String,
-    },
-  });
+  import { useUtils } from '../../../hooks/useUtils';
+
+  const { CommonFuncValue } = useUtils();
 
   const tableArray = reactive<{
     content: tableItems[];
   }>({
     content: [
       {
-        key: 'ContentType',
-        value: 'none',
+        key: '',
+        value: '',
         required: false,
       },
     ],
   });
 
-  // 新增
   const add = (_, index: number) => {
     tableArray.content.splice(index + 1, 0, {
-      key: 'ContentType',
-      value: 'none',
+      key: '',
+      value: '',
       required: false,
     });
   };
 
-  // 减少
   const remove = (index: number) => {
-    if (tableArray.content.length !== 1) {
+    if (tableArray.content.length > 1) {
       tableArray.content.splice(index, 1);
+    } else {
+      resetValue();
     }
   };
 
   //获取数据
   const getValue = () => {
-    return tableArray.content;
+    const newFuncValue = new CommonFuncValue(tableArray.content as tableItems[]);
+    return newFuncValue.get();
   };
 
   //设置数据
@@ -104,35 +103,5 @@
 </script>
 
 <style scoped lang="less">
-  @table-color: #e5e7eb;
-
-  .table-border-color {
-    border: 1px solid #e5e7eb;
-    text-align: center;
-  }
-
-  .table-content {
-    overflow-x: auto;
-
-    table {
-      border-collapse: collapse;
-      width: 35vw;
-      &:extend(.table-border-color);
-    }
-
-    table thead {
-      white-space: nowrap;
-    }
-
-    table td {
-      padding: 5px;
-      white-space: nowrap;
-      &:extend(.table-border-color);
-    }
-
-    table th {
-      padding: 5px;
-      &:extend(.table-border-color);
-    }
-  }
+  @import '../common/commonTable.less';
 </style>

 <template>
   <div class="flex flex-col justify-between">
-    <div ref="jsoneditorRef" style="height: 100%; width: 100%"></div>
+    <div ref="jsoneditorRef" style="height: 100%"></div>
     <div class="ml-2 -mt-1.5">
       <Button v-if="showBtn" @click="onHandleCopy" class="mt-8 -ml-2">
         <template #icon>

@@ -14,7 +14,6 @@
           </td>
           <td style="width: 12vw">
             <Select
-              :disabled="item.key === 'agg,interval' ? true : false"
               v-model:value="item.key"
               placeholder="请选择"
               :options="selectOptions"
@@ -23,12 +22,12 @@
               allowClear
             />
           </td>
-          <td style="width: 12vw">
+          <td>
             <div v-if="item.key === 'date_range'">
-              <div>
-                <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date1" />
+              <div class="flex">
+                <a-input placeholder="请输入" v-model:value="item.date1" />
                 <span>~</span>
-                <a-input style="width: 6vw" placeholder="请输入" v-model:value="item.date2" />
+                <a-input placeholder="请输入" v-model:value="item.date2" />
               </div>
               <div class="flex mt-2">
                 <a-checkbox @change="onHandleCheck" v-model:checked="mores">更多选项</a-checkbox>
@@ -43,15 +42,15 @@
               />
             </div>
           </td>
-          <td style="width: 4vw">
+          <td>
             <a-switch v-model:checked="item.required" />
           </td>
-          <td style="width: 4vw">
+          <td>
             <div>
               <Button type="dashed" @click="add(item, index)">
                 <template #icon><PlusOutlined /></template
               ></Button>
-              <Button type="dashed" style="margin-left: 5px" @click="remove(item, index)">
+              <Button type="dashed" class="ml-1" @click="remove(item, index)">
                 <template #icon> <MinusOutlined /></template>
               </Button>
             </div>
@@ -60,18 +59,6 @@
       </tbody>
     </table>
   </div>
-  <BasicModal
-    @register="registerModal"
-    title=""
-    width="40%"
-    :minHeight="90"
-    wrap-class-name="history-trend-model"
-    :canFullscreen="false"
-    @cancel="handleCancelModal"
-    @ok="onHandleModal"
-  >
-    <DateRangeSelect ref="dateRangeSelectRef" />
-  </BasicModal>
 </template>
 <script lang="ts" setup name="editCellTable">
   import { reactive, ref, onMounted, nextTick } from 'vue';
@@ -80,42 +67,16 @@
   import { PlusOutlined, MinusOutlined } from '@ant-design/icons-vue';
   import { editCellTableTHeadConfig } from '../../../config/config';
   import { selectType, tableItems } from '../../../config/types';
-  import { useModal, BasicModal } from '/@/components/Modal';
-  import DateRangeSelect from './DateRangeSelect/index.vue';
+  import { useUtils } from '../../../hooks/useUtils';
 
-  defineProps({
-    method: {
-      type: String,
-    },
-  });
+  const { ParamsFuncValue } = useUtils();
 
   const selectOptions = ref<selectType[]>([]);
 
-  const dateRangeSelectRef = ref<InstanceType<typeof DateRangeSelect>>();
-
-  const [registerModal, { closeModal }] = useModal();
-
   const mores = ref(false);
 
   const onHandleCheck = ({ target }) => {
     mores.value = target?.checked;
-    if (mores.value) {
-      // openModal(true);
-    }
-  };
-
-  const handleCancelModal = () => {
-    closeModal();
-    dateRangeSelectRef.value?.resetValue();
-    mores.value = false;
-  };
-
-  const getDateRangeValue = ref<any>({});
-
-  const onHandleModal = () => {
-    const values = dateRangeSelectRef.value?.getValue();
-    getDateRangeValue.value = values;
-    closeModal();
   };
 
   onMounted(() => {
@@ -146,7 +107,6 @@
     ],
   });
 
-  // 新增
   const add = (_, index: number) => {
     tableArray.content.splice(index + 1, 0, {
       key: undefined,
@@ -158,7 +118,6 @@
     });
   };
 
-  // 减少
   const remove = (item, index: number) => {
     if (tableArray.content.length > 1) {
       selectOptions.value.forEach((ele) => {
@@ -177,44 +136,34 @@
     selectOptions.value.forEach((ele) => {
       ele.disabled = false;
       tableArray.content.forEach((element) => {
-        if (element.key === 'scope' || element.key === 'fixed_date') {
+        if (element.key === 'scope') {
           element.editDisabled = false;
         } else {
           element.value = '';
           element.editDisabled = true;
         }
-        if (element.key === ele.value && element.key !== 'scope' && element.key !== 'fixed_date') {
+        if (element.key === ele.value && element.key !== 'scope') {
           ele.disabled = true;
         }
       });
     });
   };
 
+  //fix 解决编辑回显下拉框已选择应禁用问题
   const hanldeDropdownVisibleChange = () => handleChange();
 
+  const commonHandleChange = (tableArray) => {
+    nextTick(() => {
+      tableArray.forEach(() => {
+        handleChange();
+      });
+    });
+  };
+
   //获取数据
   const getValue = () => {
-    let assemblyData: any = tableArray.content.map((it) => {
-      return {
-        key: it.key,
-        value: it.key === 'date_range' ? `${it.date1},${it.date2}` : it.value,
-        mores: it.key === 'date_range' ? mores.value : null,
-        editDisabled: it.editDisabled,
-        required: it.required,
-      };
-    });
-    // assemblyData = assemblyData.filter((item) => item.key !== 'agg,interval');
-    // if (getDateRangeValue.value) {
-    //   const joinStr = Object.keys(getDateRangeValue.value)?.join(',');
-    //   if (mores.value) {
-    //     assemblyData.push({
-    //       key: joinStr,
-    //       value: '',
-    //       mores: mores.value,
-    //     });
-    //   }
-    // }
-    return assemblyData;
+    const paramsFuncValue = new ParamsFuncValue(tableArray.content as any, mores.value);
+    return paramsFuncValue.get();
   };
 
   //设置数据
@@ -233,17 +182,11 @@
     const findIsDateRange = data.find((it) => it?.mores === true);
     if (findIsDateRange?.mores) {
       mores.value = findIsDateRange?.mores;
-      getDateRangeValue.value = {
-        agg: 'agg',
-        interval: 'interval',
-      };
     } else {
       assemblyData = assemblyData.filter((item) => item?.mores == false || !item?.mores);
     }
     tableArray.content = assemblyData;
-    tableArray.content.forEach(() => {
-      handleChange();
-    });
+    commonHandleChange(tableArray.content);
   };
 
   //重置数据
@@ -258,11 +201,7 @@
       date1: '',
       date2: '',
     });
-    nextTick(() => {
-      tableArray.content.forEach(() => {
-        handleChange();
-      });
-    });
+    commonHandleChange(tableArray.content);
   };
   defineExpose({
     getValue,
@@ -272,35 +211,5 @@
 </script>
 
 <style scoped lang="less">
-  @table-color: #e5e7eb;
-
-  .table-border-color {
-    border: 1px solid #e5e7eb;
-    text-align: center;
-  }
-
-  .table-content {
-    overflow-x: auto;
-
-    table {
-      border-collapse: collapse;
-      width: 35vw;
-      &:extend(.table-border-color);
-    }
-
-    table thead {
-      white-space: nowrap;
-    }
-
-    table td {
-      padding: 5px;
-      white-space: nowrap;
-      &:extend(.table-border-color);
-    }
-
-    table th {
-      padding: 5px;
-      &:extend(.table-border-color);
-    }
-  }
+  @import '../common/commonTable.less';
 </style>

 <template>
   <div>
-    <!--TODO: 待优化三者共存下的测试和是否能复用表格 -->
-    <Tabs @change="handleChange" v-model:activeKey="activeKey">
-      <TabPane class="tab-pane" forceRender key="Params" tab="Params">
-        <ParamsTable ref="paramsCellTableRef" :method="method" />
-        <ParamsTest
-          @testParamsInterface="handleTestParamsInterface"
-          @closeTest="onCloseTest"
-          ref="testParamsRequestRef"
-          :data="dataMap.mapParamsObj"
-          :interfaceType="interfaceType"
-        />
-      </TabPane>
-      <TabPane
-        v-if="method !== '2' && requestTypeAndUrl?.requestHttpType !== 'GET'"
-        class="tab-pane"
-        forceRender
-        key="Body"
-        tab="Body"
-      >
-        <Body ref="bodyRef" @resetValue="handleResetValue" />
-        <BodyTest
-          v-if="bodyType !== 'none'"
-          @testBodyInterface="handleTestBodyInterface"
-          @closeTest="onCloseTest"
-          ref="testBodyRequestRef"
-          :interfaceType="interfaceType"
-          :data="dataMap.mapBodyObj"
-        />
-      </TabPane>
-      <TabPane v-if="method !== '2'" class="tab-pane" forceRender key="Header" tab="Header">
-        <HeaderTable ref="editHeaderCellTableRef" :method="method" />
-        <HeaderTest
-          @testHeaderInterface="handleTestHeaderInterface"
-          @closeTest="onCloseTest"
-          ref="testHeaderRequestRef"
-          :interfaceType="interfaceType"
-          :data="dataMap.mapHeaderObj"
-        />
-      </TabPane>
-    </Tabs>
-    <ExcuteTest ref="excuteTestRef" @emitExcute="handleEmitExcute" :data="excuteData" />
+    <div>
+      <Tabs @change="handleChange" v-model:activeKey="activeKey">
+        <TabPane class="tab-pane" forceRender key="Params" tab="Params">
+          <ParamsTable ref="paramsCellTableRef" />
+          <ParamsTest
+            @testParamsInterface="handleTestParamsInterface"
+            @closeTest="onCloseTest"
+            ref="testParamsRequestRef"
+            :data="dataMap.mapParamsObj"
+            :interfaceType="interfaceType"
+          />
+        </TabPane>
+        <TabPane
+          v-if="
+            method !== RequestMethodTypeEnum.WEBSOCKET &&
+            requestTypeAndUrl?.requestHttpType !== RequestHttpTypeEnum.GET
+          "
+          class="tab-pane"
+          forceRender
+          key="Body"
+          tab="Body"
+        >
+          <Body ref="bodyRef" @resetValue="handleResetValue" />
+          <BodyTest
+            v-if="bodyType !== RequestBodyTypeEnum.NONE"
+            @testBodyInterface="handleTestBodyInterface"
+            @closeTest="onCloseTest"
+            ref="testBodyRequestRef"
+            :interfaceType="interfaceType"
+            :data="dataMap.mapBodyObj"
+          />
+        </TabPane>
+        <TabPane
+          v-if="method !== RequestMethodTypeEnum.WEBSOCKET"
+          class="tab-pane"
+          forceRender
+          key="Header"
+          tab="Header"
+        >
+          <HeaderTable ref="editHeaderCellTableRef" />
+          <HeaderTest
+            @testHeaderInterface="handleTestHeaderInterface"
+            @closeTest="onCloseTest"
+            ref="testHeaderRequestRef"
+            :interfaceType="interfaceType"
+            :data="dataMap.mapHeaderObj"
+          />
+        </TabPane>
+      </Tabs>
+    </div>
+    <div>
+      <ExcuteTest
+        ref="excuteTestRef"
+        @emitExcute="handleEmitExcute"
+        :data="excuteData"
+        :method="method"
+        :httpType="requestTypeAndUrl?.requestHttpType"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts" setup name="simpleRequest">
@@ -53,6 +71,12 @@
   import { isEmpty } from '/@/utils/is';
   import { useUtils } from '../../hooks/useUtils';
   import ExcuteTest from '../TestInterface/components/excuteTest.vue';
+  import {
+    RequestMethodTypeEnum,
+    RequestHttpTypeEnum,
+    RequestBodyTypeEnum,
+    RequestOriginTypeEnum,
+  } from '../../config/enum';
 
   const props = defineProps({
     method: {
@@ -127,18 +151,18 @@
 
   const handleEmitExcute = () => {
     let apiGetUrl = '';
-    if (props?.method === '2') {
-      if (props?.originUrlType === 'server_url') {
+    if (props?.method === RequestMethodTypeEnum.WEBSOCKET) {
+      if (props?.originUrlType === RequestOriginTypeEnum.SERVER_URL) {
         const pathUrl = window.location.host;
         const protocol = window.location.protocol;
         apiGetUrl = `${
-          protocol === 'http' ? 'ws:' : protocol === 'https' ? 'wss:' : 'ws:'
+          protocol === 'http:' ? 'ws:' : protocol === 'https:' ? 'wss:' : 'ws:'
         }//${pathUrl}${props?.requestTypeAndUrl?.requestUrl}`;
       } else {
         apiGetUrl = `${props?.requestOriginUrl}${props?.requestTypeAndUrl?.requestUrl}`;
       }
     } else {
-      if (props?.originUrlType === 'server_url') {
+      if (props?.originUrlType === RequestOriginTypeEnum.SERVER_URL) {
         const pathUrl = window.location.host;
         const protocol = window.location.protocol;
         apiGetUrl = `${protocol}//${pathUrl}${props?.requestTypeAndUrl?.requestUrl}`;
@@ -215,6 +239,11 @@
     };
   };
 
+  //获取编写过滤器里的数
+  const getFilterValue = () => {
+    return excuteTestRef?.value?.getFilterValue();
+  };
+
   //设置数据
   const setValue = (data, flag, defaultValue) => {
     if (!flag) {
@@ -247,6 +276,7 @@
     getValue,
     setValue,
     resetValue,
+    getFilterValue,
   });
 </script>
 

@@ -2,28 +2,10 @@
   <div>
     <div class="mt-8">
       <div class="flex">
-        <div class="flex" v-if="interfaceType === 'SYSTEM' && isAdmin(role)">
-          <Select
-            v-model:value="selectTenant"
-            allowClear
-            @change="onSelect"
-            style="width: 150px"
-            placeholder="请选择租户"
-            :options="selectOptions"
-          />
-          <Select
-            v-model:value="selectSysTenant"
-            allowClear
-            @change="onSelctTenant"
-            style="width: 150px; margin-left: 10px"
-            v-if="selectTenantOptions.length > 0"
-            placeholder="请选择租户"
-            :options="selectTenantOptions"
-          />
-        </div>
+        <SelectTenant :interfaceType="interfaceType" @emitToken="onHandleEmitToken" />
+        <div v-if="role === 'SYS_ADMIN'" class="ml-2"></div>
         <Button
           :disabled="interfaceType === 'SYSTEM' && isAdmin(role) ? testDisabled : false"
-          class="ml-2"
           @click="handleTest(isSingleClickText)"
           type="primary"
           >{{ `${isSingleClickText === 'open' ? '打开' : '关闭'}测试接口` }}
@@ -33,37 +15,44 @@
         <a-row type="flex" justify="center">
           <a-col :span="3"> 参数设置 </a-col>
           <a-col :span="21">
-            <div v-if="data?.type === 'x-www-form-urlencoded' || data?.type === 'form-data'">
+            <div
+              v-if="
+                data?.type === RequestBodyTypeEnum.XWWW ||
+                data?.type === RequestBodyTypeEnum.FORMDATA
+              "
+            >
               <TestBodyCellTable :token="getToken" ref="testEditCellTableRef" />
             </div>
-            <div style="width: 30vw" v-else-if="data?.type === 'json'">
+            <div style="width: 30vw" v-else-if="data?.type === RequestBodyTypeEnum.JSON">
               <JsonEditor :showBtn="false" style="width: 35vw; height: 30vh" ref="jsonEditorRef" />
             </div>
-            <div style="width: 30vw" v-else-if="data?.type === 'xml'">
-              <a-textarea v-model:value="xmlContent" placeholder="请输入xml" :rows="6" />
+            <div style="width: 30vw" v-else-if="data?.type === RequestBodyTypeEnum.XML">
+              <AceTypeXmlEditor ref="aceEditorRef" :scriptType="OnlineEditorTypeEnum.XML" />
             </div>
           </a-col>
         </a-row>
       </div>
     </div>
-    <div class="mt-8"> </div>
   </div>
 </template>
 <script lang="ts" setup name="testRequest">
-  import { ref, nextTick, onMounted } from 'vue';
+  import { ref, nextTick } from 'vue';
   import { Button } from 'ant-design-vue';
-  import TestBodyCellTable from './testEditBodyCellTable.vue';
+  import TestBodyCellTable from '../paramsTest/testEditParamsCellTable.vue';
   import moment from 'moment';
   import { useUtils } from '../../../hooks/useUtils';
   import JsonEditor from '../../SimpleRequest/components/jsonEditor.vue';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { getTenantAllPageLists, getTenantPageList } from '/@/api/tenant/tenantApi';
-  import { selectType } from '../../../config/types';
-  import { Select } from 'ant-design-vue';
-  import { getUserToken } from '/@/api/sys/user';
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
   import { isAdmin } from '/@/enums/roleEnum';
+  import AceTypeXmlEditor from '../../SimpleRequest/components/aceEditor.vue';
+  import {
+    OnlineEditorTypeEnum,
+    RequestBodyTypeEnum,
+    TableDefaultTypeEnum,
+  } from '../../../config/enum';
+  import SelectTenant from '../components/selectTenant.vue';
 
   const userInfo: any = getAuthCache(USER_INFO_KEY);
 
@@ -80,21 +69,6 @@
     },
   });
 
-  onMounted(async () => {
-    if (isAdmin(role)) {
-      const res = await getTenantPageList();
-      selectOptions.value = res.map((m) => ({ label: m.name, value: m.tenantId }));
-    } else {
-      //租户
-      const { token } = await getUserToken(userInfo?.userId);
-      getToken.value = token;
-    }
-  });
-
-  const selectOptions = ref<selectType[]>([]);
-
-  const selectTenantOptions = ref<selectType[]>([]);
-
   const { createMessage } = useMessage();
 
   const showTestEditCell = ref(false);
@@ -103,52 +77,26 @@
 
   const excuteData = ref({});
 
-  const selectTenant = ref(undefined);
-
-  const selectSysTenant = ref(undefined);
-
-  const xmlContent = ref('');
-
   const testEditCellTableRef = ref<InstanceType<typeof TestBodyCellTable>>();
 
   const jsonEditorRef = ref<InstanceType<typeof JsonEditor>>();
 
+  const aceEditorRef = ref<InstanceType<typeof AceTypeXmlEditor>>();
+
   const testResult = ref('');
 
   const { getMultipleKeys } = useUtils();
 
   const getToken = ref('');
 
-  const onSelect = async (e) => {
-    if (e) {
-      testDisabled.value = false;
-    } else {
-      testDisabled.value = true;
-    }
-    selectSysTenant.value = undefined;
-    const rest = (await getTenantAllPageLists(e)) as any;
-    selectTenantOptions.value = rest?.map((m) => ({ label: m.realName, value: m.id }));
-  };
+  const isSingleClickText = ref('open');
 
-  const onSelctTenant = async (e) => {
-    if (e) {
-      testDisabled.value = false;
-    } else {
-      testDisabled.value = true;
-    }
-    const { token } = await getUserToken(e);
+  const onHandleEmitToken = (token, flag) => {
     getToken.value = token;
+    testDisabled.value = flag;
   };
 
-  const isSingleClickText = ref('open');
-
   const handleTest = (o) => {
-    if (isAdmin(role)) {
-      if (!selectTenant.value || !selectSysTenant.value) {
-        createMessage.error('请选择租户或者租户管理员');
-        throw Error('请选择租户或者租户管理员');
-      }
-    }
     if (o === 'open') {
       showTestEditCell.value = true;
       emits('testBodyInterface');
@@ -163,8 +111,10 @@
   const getValue = async () => {
     await nextTick();
     await nextTick(() => {
-      console.log(props.data?.list);
-      if (props.data?.type === 'x-www-form-urlencoded' || props.data?.type === 'form-data') {
+      if (
+        props.data?.type === RequestBodyTypeEnum.XWWW ||
+        props.data?.type === RequestBodyTypeEnum.FORMDATA
+      ) {
         const getSingleKey = props.data?.list;
         const getMuteKey = props.data?.list?.filter((it: any) => it.key.split(',').length > 1);
         const getMuteKeys = getMultipleKeys(getMuteKey);
@@ -172,10 +122,10 @@
           (it: any) => it.key.split(',').length === 1
         );
         testEditCellTableRef.value?.setTableArray(mergeKeys);
-      } else if (props.data?.type === 'json') {
+      } else if (props.data?.type === RequestBodyTypeEnum.JSON) {
         jsonEditorRef.value?.setJsonValue(props.data?.list);
-      } else if (props.data?.type === 'xml') {
-        xmlContent.value = props.data?.list;
+      } else if (props.data?.type === RequestBodyTypeEnum.XML) {
+        aceEditorRef?.value?.setValue(props.data?.list);
       }
     });
   };
@@ -186,8 +136,9 @@
     //把日期拆分成多个
     const keyValueList: any = [];
     testEditCellTableRef.value?.getValue()?.forEach((item: any) => {
-      const splitDateKey = item?.key === 'date_range' ? item?.value?.split(',') : [];
-      const splitDateValue = item?.key === 'date_range' ? item?.dateValue : [];
+      const splitDateKey =
+        item?.key === TableDefaultTypeEnum.DATERANGE ? item?.value?.split(',') : [];
+      const splitDateValue = item?.key === TableDefaultTypeEnum.DATERANGE ? item?.dateValue : [];
       for (let i in splitDateKey) {
         const obj = {
           key: splitDateKey[i],
@@ -199,15 +150,10 @@
     return testEditCellTableRef.value
       ?.getValue()
       .concat(keyValueList)
-      .filter((it) => it.key !== 'date_range')
+      .filter((it) => it.key !== TableDefaultTypeEnum.DATERANGE)
       .map((it: any) => {
-        const value =
-          it?.key === 'scope'
-            ? it?.keyValue
-            : it?.key === 'fixed_date'
-            ? moment(it?.fixed_date_value).valueOf()
-            : it?.value;
-        const key = it?.key === 'scope' || it?.key === 'fixed_date' ? it?.value : it?.key;
+        const value = it?.key === TableDefaultTypeEnum.SCOPE ? it?.keyValue : it?.value;
+        const key = it?.key === TableDefaultTypeEnum.SCOPE ? it?.value : it?.key;
         return {
           key,
           value,
@@ -219,7 +165,10 @@
   //获取数据
   const getTestValue = () => {
     let params: any = {};
-    if (props.data?.type === 'x-www-form-urlencoded' || props.data?.type === 'form-data') {
+    if (
+      props.data?.type === RequestBodyTypeEnum.XWWW ||
+      props.data?.type === RequestBodyTypeEnum.FORMDATA
+    ) {
       const getTable = getTestTableKeyValue();
       const hasRequired = getTable?.some((it) => it.required === true && !it.value);
       if (hasRequired) {
@@ -227,10 +176,10 @@
         throw new Error('参数不能为空');
       }
       getTable?.map((it) => (params[it.key!] = it.value!));
-    } else if (props.data?.type === 'json') {
+    } else if (props.data?.type === RequestBodyTypeEnum.JSON) {
       params = jsonEditorRef.value?.getJsonValue();
-    } else if (props.data?.type === 'xml') {
-      params = xmlContent.value;
+    } else if (props.data?.type === RequestBodyTypeEnum.XML) {
+      params = aceEditorRef?.value?.getValue();
     }
     if (params['keys']) {
       Reflect.set(params, 'keys', params['keys'].join(','));
@@ -245,11 +194,9 @@
 
   //设置数据
   const setValue = () => {
+    isSingleClickText.value = 'open';
     showTestEditCell.value = false;
     testResult.value = '';
-    selectTenant.value = undefined;
-    selectSysTenant.value = undefined;
-    selectTenantOptions.value = [];
   };
 
   const onCloseTest = () => {

-<!-- eslint-disable vue/valid-v-model -->
-<template>
-  <div class="table-content">
-    <!-- TODO: 待优化测试表格 -->
-    <table align="center">
-      <thead>
-        <tr>
-          <th v-for="item in editTestCellTableTHeadConfig" :key="item">
-            <a-tooltip v-if="item === '参数值'">
-              <template #title>当自定义为entityType,应输入DEVICE</template>
-              <QuestionCircleOutlined :style="{ fontSize: '14px', marginLeft: '5px' }" />
-            </a-tooltip>
-            {{ item }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="(item, index) in tableTestArray.content" :key="index">
-          <td style="width: 7.5vw">
-            <Select
-              :getPopupContainer="
-                (triggerNode) => {
-                  return triggerNode.parentNode;
-                }
-              "
-              :disabled="true"
-              v-model:value="item.key"
-              placeholder="请选择"
-              :options="selectOptions"
-            />
-          </td>
-          <td style="width: 6.5vw">
-            <a-input v-if="item.key === 'scope'" placeholder="请输入" v-model:value="item.value" />
-            <a-tree-select
-              :getPopupContainer="
-                (triggerNode) => {
-                  return triggerNode.parentNode;
-                }
-              "
-              v-else-if="item.key === 'organizationId'"
-              v-model:value="item.value"
-              show-search
-              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
-              placeholder="请选择组织"
-              allow-clear
-              tree-default-expand-all
-              :tree-data="treeData"
-              @change="handleOrgnationChange(item)"
-            />
-            <Select
-              :getPopupContainer="
-                (triggerNode) => {
-                  return triggerNode.parentNode;
-                }
-              "
-              v-else-if="item.key === 'entityId'"
-              v-model:value="item.value"
-              placeholder="请选择"
-              notFoundContent="请选择"
-              :options="entityOptions"
-              allowClear
-            />
-            <Select
-              :getPopupContainer="
-                (triggerNode) => {
-                  return triggerNode.parentNode;
-                }
-              "
-              v-else-if="item.key === 'keys'"
-              v-model:value="item.value"
-              placeholder="请选择"
-              notFoundContent="请选择"
-              :options="attributeOptions"
-              mode="multiple"
-              allowClear
-            />
-            <div v-else-if="item.key === 'date_range'">
-              <a-button disabled type="primary">{{ item.value?.split(',').at(-2) }}</a-button>
-              <span>~</span>
-              <a-button disabled type="primary">{{ item.value?.split(',').at(-1) }}</a-button>
-            </div>
-            <div v-else-if="item.key === 'fixed_date'">
-              <a-button disabled type="primary">{{ item.value }}</a-button>
-            </div>
-            <Select
-              :getPopupContainer="
-                (triggerNode) => {
-                  return triggerNode.parentNode;
-                }
-              "
-              v-else
-              v-model:value="item.value"
-              placeholder="请选择"
-              notFoundContent="请选择"
-              :options="valueOptions"
-              allowClear
-              @change="handleValueChange(item)"
-            />
-          </td>
-          <td style="width: 6.5vw">
-            <a-input
-              v-if="item.key === 'scope'"
-              placeholder="请输入"
-              v-model:value="item.keyValue"
-            />
-            <a-date-picker
-              v-else-if="item.key === 'fixed_date'"
-              style="width: 6.5vw"
-              v-model:value="item.keyValue"
-              :show-time="{ format: 'HH:mm' }"
-              format="YYYY-MM-DD HH:mm:ss"
-              placeholder="日期时间"
-            />
-            <a-range-picker
-              v-else-if="item.key == 'date_range'"
-              style="width: 6.5vw"
-              v-model:value="item.dateValue"
-              :show-time="{ format: 'HH:mm' }"
-              format="YYYY-MM-DD HH:mm"
-              :placeholder="['开始', '结束']"
-            />
-            <a-input v-else disabled placeholder="请输入" v-model:value="item.keyValue" />
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</template>
-<script lang="ts" setup name="editCellTable">
-  import { reactive, ref, onMounted } from 'vue';
-  import { Select } from 'ant-design-vue';
-  import { findDictItemByCode } from '/@/api/system/dict';
-  import { useApi } from '../../../hooks/useApi';
-  import { useUtils } from '../../../hooks/useUtils';
-  import { cloneDeep } from 'lodash-es';
-  import { tableItems, selectType } from '../../../config/types';
-  import { editTestCellTableTHeadConfig } from '../../../config/config';
-  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
-
-  const props = defineProps({
-    method: {
-      type: String,
-    },
-    token: {
-      type: String,
-    },
-  });
-
-  onMounted(async () => {
-    const res = await findDictItemByCode({ dictCode: 'dataview_builtin_params' });
-    selectOptions.value = res.map((m) => ({ label: m.itemText, value: m.itemValue }));
-    selectOptions.value.push({
-      label: '自定义',
-      value: 'scope',
-    });
-    if (props.method === '2')
-      selectOptions.value = selectOptions.value.filter((f) => f.value !== 'scope');
-  });
-
-  const { isOtherHttp } = useUtils();
-
-  const selectOptions = ref<selectType[]>([]);
-
-  const valueOptions = ref<selectType[]>([]);
-
-  const entityOptions = ref<selectType[]>([]);
-
-  const attributeOptions = ref<selectType[]>([]);
-
-  const treeData = ref([]);
-
-  const tableTestArray = reactive<{
-    content: tableItems[];
-  }>({
-    content: [
-      {
-        key: undefined,
-        value: undefined,
-        keyValue: null,
-        editDisabled: false,
-        dateValue: null,
-      },
-    ],
-  });
-
-  //设置数据
-  const setTableArray = (data) => {
-    const list = cloneDeep(data);
-    list?.forEach((it) => {
-      if (it.key === 'keys') it.value = [];
-    });
-    if (Array.isArray(list)) (tableTestArray.content = list) && getApi(list);
-    if (list.hasOwnProperty('form-data') && Array.isArray(list['form-data']))
-      (tableTestArray.content = list['form-data']) && getApi(list['form-data']);
-    if (
-      list.hasOwnProperty('x-www-form-urlencoded') &&
-      Array.isArray(list['x-www-form-urlencoded'])
-    )
-      (tableTestArray.content = list['x-www-form-urlencoded']) &&
-        getApi(list['x-www-form-urlencoded']);
-  };
-
-  const getApi = (list) => {
-    list?.forEach(async (it) => {
-      if (it.key === 'deviceProfileId') {
-        const { options } = await useApi(it.key, props.token);
-        valueOptions.value = options;
-      } else if (it.key === 'organizationId') {
-        const { options } = await useApi(it.key, props.token);
-        treeData.value = options as any;
-      }
-    });
-  };
-
-  const handleOrgnationChange = async (e) => {
-    let deviceProfileId = '';
-    tableTestArray.content.forEach((f: any) => {
-      if (f.key === 'entityId') {
-        f.value = null;
-      }
-      if (f.key === 'deviceProfileId') deviceProfileId = f.value;
-    });
-    getEntityOptions(e.value, deviceProfileId);
-  };
-
-  const getEntityOptions = async (organizationId: string, deviceProfileId?: string) => {
-    const res = await isOtherHttp('api/yt/device/list', props.token, {
-      organizationId,
-      deviceProfileId,
-    });
-    entityOptions.value = res.map((item) => ({
-      label: item.alias || item.name,
-      value: item.tbDeviceId,
-    }));
-  };
-
-  const getAttributeOptions = async (params) => {
-    const { deviceProfileId, dataType } = params;
-    const res = await isOtherHttp(`api/yt/device/attributes/${deviceProfileId}`, props.token, {
-      dataType,
-    });
-    if (Object.keys(res).length === 0) return (attributeOptions.value.length = 0);
-    attributeOptions.value = res?.map((item) => ({ label: item.name, value: item.identifier }));
-  };
-
-  const handleValueChange = (e) => {
-    let organizationId = '';
-    if (e.key === 'deviceProfileId') {
-      tableTestArray.content.forEach((f: any) => {
-        if (f.key === 'keys') {
-          f.value = [];
-        }
-        if (f.key === 'organizationId') organizationId = f.value;
-        if (f.key === 'entityId') f.value = null;
-      });
-      if (e.value) {
-        getAttributeOptions({ deviceProfileId: e.value });
-      }
-      if (organizationId !== '') {
-        getEntityOptions(organizationId, e.value);
-      }
-    }
-  };
-
-  //获取数据
-  const getValue = () => {
-    return tableTestArray.content;
-  };
-  defineExpose({
-    getValue,
-    setTableArray,
-  });
-</script>
-
-<style scoped lang="less">
-  @table-color: #e5e7eb;
-
-  .table-border-color {
-    border: 1px solid #e5e7eb;
-    text-align: center;
-  }
-
-  .table-content {
-    table {
-      width: 31vw;
-      &:extend(.table-border-color);
-    }
-
-    table td {
-      padding: 5px;
-      white-space: nowrap;
-      &:extend(.table-border-color);
-    }
-
-    table th {
-      padding: 5px;
-      &:extend(.table-border-color);
-    }
-  }
-</style>

@@ -4,7 +4,7 @@
       <a-row>
         <Button @click="handleExcute" type="primary"> 执行测试请求 </Button>
       </a-row>
-      <div v-if="isShowTestResult" style="display: flex; justify-content: space-between">
+      <div v-if="isShowTestResult" class="flex justify-between">
         <a-row class="mt-8" type="flex" justify="center" align="middle">
           <a-col :span="3"> 测试地址 </a-col>
           <a-col :span="21">
@@ -16,22 +16,52 @@
       </div>
     </div>
     <div class="mt-8">
-      <a-row type="flex" justify="space-between" align="middle">
-        <a-col :span="24">
-          <div>
-            <JsonEditor
-              :showBtn="true"
-              v-if="isWebSocketType === '2'"
-              style="width: 40vw; height: 40vh"
-              ref="jsonWebsocketEditorRef"
-            />
-            <JsonEditor
-              :showBtn="true"
-              v-else
-              style="width: 40vw; height: 40vh"
-              ref="jsonEditorRef"
-            />
-          </div>
+      <a-row type="flex" align="top">
+        <a-col
+          :span="
+            method === RequestMethodTypeEnum.WEBSOCKET
+              ? 11
+              : httpType === RequestHttpTypeEnum.POST
+              ? 4
+              : 6
+          "
+        >
+          <p>过滤器函数编写：</p>
+          <AceTypeIsJsEditor
+            :restData="getRestData"
+            @changeAceContent="onHandleAceContent"
+            ref="aceTypeIsJsEditorRef"
+          />
+        </a-col>
+        <a-col :span="1">
+          <a-divider type="vertical" class="divider-color" />
+        </a-col>
+        <a-col
+          :span="
+            method === RequestMethodTypeEnum.WEBSOCKET
+              ? 12
+              : httpType === RequestHttpTypeEnum.POST
+              ? 19
+              : 17
+          "
+          style="position: relative"
+          :style="{
+            left:
+              (method === RequestMethodTypeEnum.WEBSOCKET
+                ? 1.5
+                : httpType === RequestHttpTypeEnum.POST
+                ? -1.5
+                : 0) + 'vw',
+          }"
+        >
+          <a-col>
+            <p>接口返回数据(res)：</p>
+            <JsonEditor style="height: 35vh" :showBtn="true" ref="jsonEditorRef" />
+          </a-col>
+          <a-col class="mt-3">
+            <p>过滤器结果：</p>
+            <JsonFilterEditor style="height: 35vh" :showBtn="true" ref="jsonEditorFilterRef" />
+          </a-col>
         </a-col>
       </a-row>
     </div>
@@ -44,8 +74,11 @@
   import { useWebSocket } from '@vueuse/core';
   import { useUtils } from '../../../hooks/useUtils';
   import JsonEditor from '../../SimpleRequest/components/jsonEditor.vue';
+  import JsonFilterEditor from '../../SimpleRequest/components/jsonEditor.vue';
+  import AceTypeIsJsEditor from '../../SimpleRequest/components/aceEditor.vue';
   import { Tag } from 'ant-design-vue';
   import { useThrottleFn } from '@vueuse/shared';
+  import { RequestMethodTypeEnum, RequestHttpTypeEnum } from '../../../config/enum';
 
   const emits = defineEmits(['emitExcute']);
 
@@ -53,13 +86,25 @@
     data: {
       type: Object,
     },
+    method: {
+      type: String,
+    },
+    httpType: {
+      type: String,
+    },
   });
 
   const showTestFlag = ref(false);
 
+  const openFilterFlag = ref(false);
+
   const jsonEditorRef = ref<InstanceType<typeof JsonEditor>>();
 
-  const jsonWebsocketEditorRef = ref<InstanceType<typeof JsonEditor>>();
+  const jsonEditorFilterRef = ref<InstanceType<typeof JsonFilterEditor>>();
+
+  const aceTypeIsJsEditorRef = ref<InstanceType<typeof AceTypeIsJsEditor>>();
+
+  const getRestData: any = ref(null);
 
   const socketUrls = ref('');
 
@@ -70,6 +115,12 @@
     },
   });
 
+  const { staticWebSocketParams, commonRest } = useUtils();
+
+  const onHandleAceContent = (resp) => {
+    commonRest(resp, jsonEditorFilterRef.value?.setJsonValue);
+  };
+
   //格式化替换像"http:xxxx/api/xx/{xx}/{xx}/{xx}这种格式"
   String.prototype.restfulFormat = function (replacements) {
     var formatString = function (str, replacements) {
@@ -109,7 +160,7 @@
     isShowTestResult.value = true;
     nextTick(() => {
       jsonEditorRef.value?.setJsonValue('测试结果为');
-      jsonWebsocketEditorRef.value?.setJsonValue('测试结果为');
+      jsonEditorFilterRef.value?.setJsonValue('过滤结果为');
     });
   };
 
@@ -121,17 +172,17 @@
     await nextTick();
     //获取Params和Header和Body
     const Objects = props.data;
-    isWebSocketType.value = Objects?.method;
     const apiType = Objects?.apiType;
     const url = Objects?.apiGetUrl;
     const headers = Objects?.Header?.params;
     const params = Objects?.Params?.params;
-    isToken.value = Objects?.Params?.token;
     const body = Objects?.Body?.params;
+    isWebSocketType.value = Objects?.method;
+    isToken.value = Objects?.Params?.token;
     isPostToken.value = Objects?.Body?.token;
     postBodyType.value = Objects?.Body?.type;
     apiUrl.value = url?.restfulFormat(params);
-    if (isWebSocketType.value === '2') {
+    if (isWebSocketType.value === RequestMethodTypeEnum.WEBSOCKET) {
       socketUrls.value = url;
       socketMessage.server = `${socketUrls.value}?token=${isToken.value}`;
       const list = Object.values(params);
@@ -154,19 +205,10 @@
           postBodyType.value
         );
         if (!resp) return;
-        if (Object.prototype.toString.call(resp) === '[object Object]') {
-          jsonEditorRef.value?.setJsonValue(resp);
-        } else if (typeof resp === 'string') {
-          jsonEditorRef.value?.setJsonValue(resp);
-        } else if (Array.isArray(resp)) {
-          const temp = {
-            data: resp,
-          };
-          jsonEditorRef.value?.setJsonValue(temp);
-        } else {
-          jsonEditorRef.value?.setJsonValue(JSON.stringify(resp));
-        }
+        getRestData.value = resp;
+        commonRest(resp, jsonEditorRef.value?.setJsonValue);
       } catch (e) {
+        console.log(e);
         if (Object.prototype.toString.call(e) === '[object Object]') {
           jsonEditorRef.value?.setJsonValue(e);
         } else {
@@ -176,50 +218,45 @@
     }
   };
 
-  //websocket请求
+  //ws请求
   const websocketRequest = (params, destroy = false) => {
-    //websocket请求
-    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');
+    try {
+      let webSocketParams: any = null;
+      if (Object.prototype.toString.call(params) === '[object Object]') {
+        const { entityId, keys } = params;
+        webSocketParams = {
+          entityId,
+          keys,
+          ...staticWebSocketParams,
+        };
+      }
+      socketMessage.sendValue.tsSubCmds = [webSocketParams];
+      const { send, close } = useWebSocket(socketMessage.server, {
+        onConnected() {
+          send(JSON.stringify(socketMessage.sendValue));
+        },
+        onMessage(_, e) {
+          const { data } = JSON.parse(e.data);
+          getRestData.value = data;
+          commonRest(data, jsonEditorRef.value?.setJsonValue);
+        },
+        onDisconnected() {
+          close();
+        },
+        onError() {},
+      });
+      if (destroy) close();
+    } finally {
     }
-    socketMessage.sendValue.tsSubCmds = [params];
-    const { send, close } = useWebSocket(socketMessage.server, {
-      onConnected() {
-        send(JSON.stringify(socketMessage.sendValue));
-        console.log('建立连接了');
-      },
-      onMessage(_, e) {
-        const { data } = JSON.parse(e.data);
-        if (Object.prototype.toString.call(data) === '[object Object]') {
-          jsonWebsocketEditorRef.value?.setJsonValue(data);
-        } else if (typeof data === 'string') {
-          jsonWebsocketEditorRef.value?.setJsonValue(data);
-        } else if (Array.isArray(data)) {
-          jsonWebsocketEditorRef.value?.setJsonValue(JSON.stringify(data));
-        } else {
-          jsonEditorRef.value?.setJsonValue(JSON.stringify(data));
-        }
-      },
-      onDisconnected() {
-        console.log('断开连接了');
-        close();
-      },
-      onError() {},
-    });
-    if (destroy) close();
   };
 
   onUnmounted(() => {
-    if (isWebSocketType.value === '2') {
+    if (isWebSocketType.value === RequestMethodTypeEnum.WEBSOCKET) {
       websocketRequest(null, true);
     }
   });
 
-  //TODO: 待优化 项目自带第三方请求
+  //http请求
   const otherHttpRequest = async (
     apiType,
     apiUrl,
@@ -228,69 +265,27 @@
     body,
     token,
     postToken,
-    postBodyType,
-    joinPrefix = false
+    postBodyType
   ) => {
-    const { convertObj } = useUtils();
+    const { convertObj, commonHttpParams, commonParams } = useUtils();
     switch (apiType) {
       case 'GET':
-        const objGet = Object.assign(
-          {},
-          {
-            'X-Authorization': `Bearer ${!token ? postToken : token}`,
-          },
-          headers
-        );
         return await otherHttp.get(
-          { url: apiUrl, params, headers: objGet },
           {
-            apiUrl: '',
-            joinPrefix,
-            withToken: false,
-            errorMessageMode: 'none',
-          }
-        );
-      case 'POST':
-        const objPost = Object.assign(
-          {},
-          {
-            'X-Authorization': `Bearer ${!postToken ? token : postToken}`,
+            url: apiUrl,
+            params,
+            headers: commonHttpParams(postToken, token, postBodyType, headers),
           },
-          {
-            'Content-Type':
-              postBodyType === 'xml'
-                ? 'text/xml'
-                : postBodyType === 'form-data'
-                ? 'multipart/form-data'
-                : postBodyType === 'x-www-form-urlencoded'
-                ? 'application/x-www-form-urlencoded'
-                : postBodyType === 'json'
-                ? 'application/json'
-                : 'application/json',
-          },
-          headers
+          commonParams
         );
+      case 'POST':
         return await otherHttp.post(
-          { url: `${apiUrl}?${convertObj(params)}`, data: body, headers: objPost },
           {
-            apiUrl: '',
-            joinPrefix,
-            withToken: false,
-            errorMessageMode: 'none',
-          }
-        );
-      case 'PUT':
-        const objPut = Object.assign({}, headers, {
-          'X-Authorization': `Bearer ${!postToken ? token : postToken}`,
-        });
-        return await otherHttp.put(
-          { url: `${apiUrl}?${convertObj(params)}`, data: body, headers: objPut, params },
-          {
-            apiUrl: '',
-            joinPrefix,
-            withToken: false,
-            errorMessageMode: 'none',
-          }
+            url: `${apiUrl}${`?${convertObj(params)}`}`,
+            data: body,
+            headers: commonHttpParams(postToken, token, postBodyType, headers),
+          },
+          commonParams
         );
     }
   };
@@ -298,19 +293,25 @@
   const resetValue = (flag) => {
     if (flag) {
       showTestFlag.value = false;
+      openFilterFlag.value = false;
     }
     nextTick(() => {
       jsonEditorRef.value?.setJsonValue('测试结果为');
-      jsonWebsocketEditorRef.value?.setJsonValue('测试结果为');
+      jsonEditorFilterRef.value?.setJsonValue('过滤结果为');
     });
-    isWebSocketType.value = '0';
+    isWebSocketType.value = RequestMethodTypeEnum.COMMOM;
   };
 
   const showTest = () => (showTestFlag.value = true);
 
+  const getFilterValue = () => {
+    return aceTypeIsJsEditorRef?.value?.getValue();
+  };
+
   defineExpose({
     resetValue,
     showTest,
+    getFilterValue,
   });
 </script>
 
@@ -318,4 +319,11 @@
   :deep(.ant-input-textarea-show-count) {
     width: 30vw;
   }
+
+  .divider-color {
+    height: 78.5vh;
+    background-color: #e5e7eb;
+    position: relative;
+    left: 1.16vw;
+  }
 </style>

+<template>
+  <div class="flex" v-if="interfaceType === 'SYSTEM' && isAdmin(role)">
+    <Select
+      v-model:value="selectTenant"
+      @change="onSelect"
+      style="width: 150px"
+      placeholder="请选择租户"
+      :options="selectOptions"
+      show-search
+      :filter-option="filterOption"
+    />
+    <Select
+      v-model:value="selectSysTenant"
+      @change="onSelctTenant"
+      style="width: 150px; margin-left: 10px"
+      v-if="selectTenantOptions.length > 0"
+      placeholder="请选择租户"
+      :options="selectTenantOptions"
+      show-search
+      :filter-option="filterTenantOption"
+    />
+  </div>
+</template>
+<script lang="ts" setup name="selectTenant">
+  import { onMounted, ref, onUnmounted } from 'vue';
+  import { selectType } from '../../../config/types';
+  import { Select } from 'ant-design-vue';
+  import { getUserToken } from '/@/api/sys/user';
+  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
+  import { getAuthCache } from '/@/utils/auth';
+  import { isAdmin } from '/@/enums/roleEnum';
+  import { getTenantAllPageLists, getTenantPageList } from '/@/api/tenant/tenantApi';
+
+  defineProps({
+    interfaceType: {
+      type: String,
+    },
+  });
+
+  const emits = defineEmits(['emitToken']);
+
+  const userInfo: any = getAuthCache(USER_INFO_KEY);
+
+  const role: string = userInfo?.roles[0];
+
+  onMounted(async () => {
+    if (isAdmin(role)) {
+      const res = await getTenantPageList();
+      selectOptions.value = res.map((m) => ({ label: m.name, value: m.tenantId }));
+    } else {
+      //租户
+      const { token } = await getUserToken(userInfo?.userId);
+      getToken.value = token;
+      emits('emitToken', getToken.value, testDisabled.value);
+    }
+  });
+
+  const selectOptions = ref<selectType[]>([]);
+
+  const testDisabled = ref(true);
+
+  const selectTenantOptions = ref<selectType[]>([]);
+
+  const selectTenant = ref(undefined);
+
+  const selectSysTenant = ref(undefined);
+
+  const getToken = ref('');
+
+  const filterOption = (input: string, option: any) => {
+    return option.label.includes(input);
+  };
+
+  const filterTenantOption = (input: string, option: any) => {
+    return option.label.includes(input);
+  };
+
+  const onSelect = async (e) => {
+    if (e) {
+      testDisabled.value = false;
+    } else {
+      testDisabled.value = true;
+    }
+    selectSysTenant.value = undefined;
+    const rest = (await getTenantAllPageLists(e)) as any;
+    selectTenantOptions.value = rest?.map((m) => ({ label: m.realName, value: m.id }));
+  };
+
+  const onSelctTenant = async (e) => {
+    if (e) {
+      testDisabled.value = false;
+    } else {
+      testDisabled.value = true;
+    }
+    const { token } = await getUserToken(e);
+    getToken.value = token;
+    emits('emitToken', getToken.value, testDisabled.value);
+  };
+
+  onUnmounted(() => {
+    selectTenant.value = undefined;
+    selectSysTenant.value = undefined;
+    selectTenantOptions.value = [];
+    getToken.value = '';
+  });
+</script>
+
+<style scoped lang="less"></style>

@@ -2,28 +2,10 @@
   <div>
     <div class="mt-8">
       <div class="flex">
-        <div class="flex" v-if="interfaceType === 'SYSTEM' && isAdmin(role)">
-          <Select
-            allowClear
-            v-model:value="selectTenant"
-            @change="onSelect"
-            style="width: 150px"
-            placeholder="请选择租户"
-            :options="selectOptions"
-          />
-          <Select
-            v-model:value="selectSysTenant"
-            allowClear
-            @change="onSelctTenant"
-            style="width: 150px; margin-left: 10px"
-            v-if="selectTenantOptions.length > 0"
-            placeholder="请选择租户"
-            :options="selectTenantOptions"
-          />
-        </div>
+        <SelectTenant :interfaceType="interfaceType" @emitToken="onHandleEmitToken" />
+        <div v-if="role === 'SYS_ADMIN'" class="ml-2"></div>
         <Button
           :disabled="interfaceType === 'SYSTEM' && isAdmin(role) ? testDisabled : false"
-          class="ml-2"
           @click="handleTest(isSingleClickText)"
           type="primary"
           >{{ `${isSingleClickText === 'open' ? '打开' : '关闭'}测试接口` }}
@@ -38,21 +20,17 @@
         </a-row>
       </div>
     </div>
-    <div class="mt-8"> </div>
   </div>
 </template>
 <script lang="ts" setup name="testRequest">
-  import { ref, nextTick, onMounted } from 'vue';
+  import { ref, nextTick } from 'vue';
   import { Button } from 'ant-design-vue';
   import TestHeaderEditCellTable from './testEditHeaderCellTable.vue';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { selectType } from '../../../config/types';
-  import { Select } from 'ant-design-vue';
-  import { getUserToken } from '/@/api/sys/user';
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
-  import { getTenantAllPageLists, getTenantPageList } from '/@/api/tenant/tenantApi';
   import { getAuthCache } from '/@/utils/auth';
   import { isAdmin } from '/@/enums/roleEnum';
+  import SelectTenant from '../components/selectTenant.vue';
 
   const emits = defineEmits(['testHeaderInterface', 'closeTest']);
 
@@ -69,21 +47,6 @@
     },
   });
 
-  onMounted(async () => {
-    if (isAdmin(role)) {
-      const res = await getTenantPageList();
-      selectOptions.value = res.map((m) => ({ label: m.name, value: m.tenantId }));
-    } else {
-      //租户
-      const { token } = await getUserToken(userInfo?.userId);
-      getToken.value = token;
-    }
-  });
-
-  const selectOptions = ref<selectType[]>([]);
-
-  const selectTenantOptions = ref<selectType[]>([]);
-
   const testDisabled = ref(true);
 
   const { createMessage } = useMessage();
@@ -92,46 +55,20 @@
 
   const excuteData = ref({});
 
-  const selectTenant = ref(undefined);
-
-  const selectSysTenant = ref(undefined);
-
   const testEditCellTableRef = ref<InstanceType<typeof TestHeaderEditCellTable>>();
 
   const testResult = ref('');
 
   const getToken = ref('');
 
-  const onSelect = async (e) => {
-    if (e) {
-      testDisabled.value = false;
-    } else {
-      testDisabled.value = true;
-    }
-    selectSysTenant.value = undefined;
-    const rest = (await getTenantAllPageLists(e)) as any;
-    selectTenantOptions.value = rest?.map((m) => ({ label: m.realName, value: m.id }));
-  };
+  const isSingleClickText = ref('open');
 
-  const onSelctTenant = async (e) => {
-    if (e) {
-      testDisabled.value = false;
-    } else {
-      testDisabled.value = true;
-    }
-    const { token } = await getUserToken(e);
+  const onHandleEmitToken = (token, flag) => {
     getToken.value = token;
+    testDisabled.value = flag;
   };
 
-  const isSingleClickText = ref('open');
-
   const handleTest = (o) => {
-    if (isAdmin(role)) {
-      if (!selectTenant.value || !selectSysTenant.value) {
-        createMessage.error('请选择租户或者租户管理员');
-        throw Error('请选择租户或者租户管理员');
-      }
-    }
     if (o === 'open') {
       showTestEditCell.value = true;
       emits('testHeaderInterface');
@@ -177,9 +114,6 @@
   const setValue = () => {
     showTestEditCell.value = false;
     testResult.value = '';
-    selectTenant.value = undefined;
-    selectSysTenant.value = undefined;
-    selectTenantOptions.value = [];
   };
 
   const onCloseTest = () => {

-<!-- eslint-disable vue/valid-v-model -->
 <template>
   <div class="table-content">
-    <!-- TODO: 待优化测试表格 -->
     <table align="center">
       <thead>
         <tr>
@@ -10,10 +8,10 @@
       </thead>
       <tbody>
         <tr v-for="(item, index) in tableTestArray.content" :key="index">
-          <td style="width: 7.5vw">
-            <a-input disabled placeholder="请输入" v-model:value="item.key" />
+          <td>
+            <a-input disabled v-model:value="item.key" />
           </td>
-          <td style="width: 6.5vw">
+          <td>
             <a-input placeholder="请输入" v-model:value="item.value" />
           </td>
         </tr>
@@ -27,12 +25,6 @@
   import { tableItems } from '../../../config/types';
   import { editTestCellTableTHeadConfig } from '../../../config/config';
 
-  defineProps({
-    method: {
-      type: String,
-    },
-  });
-
   const tableTestArray = reactive<{
     content: tableItems[];
   }>({
@@ -57,6 +49,7 @@
   const getValue = () => {
     return tableTestArray.content;
   };
+
   defineExpose({
     getValue,
     setTableArray,
@@ -64,28 +57,5 @@
 </script>
 
 <style scoped lang="less">
-  @table-color: #e5e7eb;
-
-  .table-border-color {
-    border: 1px solid #e5e7eb;
-    text-align: center;
-  }
-
-  .table-content {
-    table {
-      width: 31vw;
-      &:extend(.table-border-color);
-    }
-
-    table td {
-      padding: 5px;
-      white-space: nowrap;
-      &:extend(.table-border-color);
-    }
-
-    table th {
-      padding: 5px;
-      &:extend(.table-border-color);
-    }
-  }
+  @import '../../SimpleRequest/common/commonTestTable.less';
 </style>

@@ -2,28 +2,10 @@
   <div>
     <div class="mt-8">
       <div class="flex">
-        <div class="flex" v-if="interfaceType === 'SYSTEM' && isAdmin(role)">
-          <Select
-            allowClear
-            v-model:value="selectTenant"
-            @change="onSelect"
-            style="width: 150px"
-            placeholder="请选择租户"
-            :options="selectOptions"
-          />
-          <Select
-            v-model:value="selectSysTenant"
-            allowClear
-            @change="onSelctTenant"
-            style="width: 150px; margin-left: 10px"
-            v-if="selectTenantOptions.length > 0"
-            placeholder="请选择租户"
-            :options="selectTenantOptions"
-          />
-        </div>
+        <SelectTenant :interfaceType="interfaceType" @emitToken="onHandleEmitToken" />
+        <div v-if="role === 'SYS_ADMIN'" class="ml-2"></div>
         <Button
           :disabled="interfaceType === 'SYSTEM' && isAdmin(role) ? testDisabled : false"
-          class="ml-2"
           @click="handleTest(isSingleClickText)"
           type="primary"
           >{{ `${isSingleClickText === 'open' ? '打开' : '关闭'}测试接口` }}
@@ -38,23 +20,21 @@
         </a-row>
       </div>
     </div>
-    <div class="mt-8"> </div>
   </div>
 </template>
 <script lang="ts" setup name="testRequest">
-  import { ref, nextTick, onMounted } from 'vue';
+  import { ref, nextTick } from 'vue';
   import { Button } from 'ant-design-vue';
   import TestParamsCellTable from './testEditParamsCellTable.vue';
   import moment from 'moment';
   import { useUtils } from '../../../hooks/useUtils';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { getTenantAllPageLists, getTenantPageList } from '/@/api/tenant/tenantApi';
-  import { selectType } from '../../../config/types';
-  import { Select } from 'ant-design-vue';
-  import { getUserToken } from '/@/api/sys/user';
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
   import { isAdmin } from '/@/enums/roleEnum';
+  import { TableDefaultTypeEnum } from '../../../config/enum';
+  import { AggregateDataEnum } from '/@/views/report/config/timeConfig';
+  import SelectTenant from '../components/selectTenant.vue';
 
   const userInfo: any = getAuthCache(USER_INFO_KEY);
 
@@ -71,33 +51,14 @@
     },
   });
 
-  onMounted(async () => {
-    if (isAdmin(role)) {
-      const res = await getTenantPageList();
-      selectOptions.value = res.map((m) => ({ label: m.name, value: m.tenantId }));
-    } else {
-      //租户
-      const { token } = await getUserToken(userInfo?.userId);
-      getToken.value = token;
-    }
-  });
-
-  const selectOptions = ref<selectType[]>([]);
-
   const testDisabled = ref(true);
 
-  const selectTenantOptions = ref<selectType[]>([]);
-
   const { createMessage } = useMessage();
 
   const showTestEditCell = ref(false);
 
   const excuteData = ref({});
 
-  const selectTenant = ref(undefined);
-
-  const selectSysTenant = ref(undefined);
-
   const testEditCellTableRef = ref<InstanceType<typeof TestParamsCellTable>>();
 
   const testResult = ref('');
@@ -106,26 +67,11 @@
 
   const getToken = ref('');
 
-  const onSelect = async (e) => {
-    if (e) {
-      testDisabled.value = false;
-    } else {
-      testDisabled.value = true;
-    }
-    selectSysTenant.value = undefined;
-    const rest = (await getTenantAllPageLists(e)) as any;
-    selectTenantOptions.value = rest?.map((m) => ({ label: m.realName, value: m.id }));
-  };
-
-  const onSelctTenant = async (e) => {
-    if (e) {
-      testDisabled.value = false;
-    } else {
-      testDisabled.value = true;
-    }
-    const { token } = await getUserToken(e);
+  const onHandleEmitToken = (token, flag) => {
     getToken.value = token;
+    testDisabled.value = flag;
   };
+
   const isSingleClickText = ref('open');
 
   const handleTest = (o) => {
@@ -147,7 +93,7 @@
       const getSingleKey = props.data?.list;
       let getMuteDateRangeKeys: any = null;
       const findDateRange = getSingleKey.find(
-        (item) => item?.key == 'date_range' && item?.mores === true
+        (item) => item?.key == TableDefaultTypeEnum.DATERANGE && item?.mores === true
       );
       if (findDateRange) {
         getMuteDateRangeKeys = getMultipleKeys([{ key: 'agg', value: '' }]);
@@ -164,14 +110,13 @@
   };
 
   //测试表格里的数据转化为 key value 数组对象形式
-  //TODO:待优化这里的TS类型
   const getTestTableKeyValue = () => {
     //把日期拆分成多个
     const keyValueList: any = [];
-    console.log(testEditCellTableRef.value?.getValue());
     testEditCellTableRef.value?.getValue()?.forEach((item: any) => {
-      const splitDateKey = item?.key === 'date_range' ? item?.value?.split(',') : [];
-      const splitDateValue = item?.key === 'date_range' ? item?.dateValue : [];
+      const splitDateKey =
+        item?.key === TableDefaultTypeEnum.DATERANGE ? item?.value?.split(',') : [];
+      const splitDateValue = item?.key === TableDefaultTypeEnum.DATERANGE ? item?.dateValue : [];
       for (let i in splitDateKey) {
         const obj = {
           key: splitDateKey[i],
@@ -183,17 +128,11 @@
     return testEditCellTableRef.value
       ?.getValue()
       .concat(keyValueList)
-      .filter((it) => it.key !== 'date_range')
+      .filter((it) => it.key !== TableDefaultTypeEnum.DATERANGE)
       .map((it: any) => {
-        const value =
-          it?.key === 'scope'
-            ? it?.keyValue
-            : it?.key === 'fixed_date'
-            ? moment(it?.fixed_date_value).valueOf()
-            : it?.value;
-        const key = it?.key === 'scope' || it?.key === 'fixed_date' ? it?.value : it?.key;
+        const value = it?.key === TableDefaultTypeEnum.SCOPE ? it?.keyValue : it?.value;
+        const key = it?.key === TableDefaultTypeEnum.SCOPE ? it?.value : it?.key;
         const limit = it?.limit;
-        console.log(limit);
         return {
           key,
           value,
@@ -213,16 +152,15 @@
     }
     const params: any = {};
     getTable?.map((it) => {
-      console.log(it);
       params[it.key!] = it.value!;
-      if (it.key === 'agg') {
+      if (it.key === TableDefaultTypeEnum.AGG) {
         params.limit = it.limit;
       }
     });
     if (params['keys']) {
       Reflect.set(params, 'keys', params['keys'].join(','));
     }
-    if (params['agg'] !== 'NONE') {
+    if (params['agg'] !== AggregateDataEnum.NONE) {
       Reflect.set(params, 'limit', null);
     }
     excuteData.value = {
@@ -234,11 +172,9 @@
 
   //设置数据
   const setValue = () => {
+    isSingleClickText.value = 'open';
     showTestEditCell.value = false;
     testResult.value = '';
-    selectTenant.value = undefined;
-    selectSysTenant.value = undefined;
-    selectTenantOptions.value = [];
   };
 
   const onCloseTest = () => {