chore: 合并main_dev分支导致的冲突

@@ -8,8 +8,12 @@ VITE_GLOB_PUBLIC_PATH = /
 # Please note that no line breaks
 
 # 本地
+<<<<<<< HEAD
 <<<<<<< Updated upstream
 VITE_PROXY = [["/api","http://192.168.10.146:8080/api"],["/thingskit-scada","http://localhost:3000/"],["/large-designer", "http://localhost:5555/large-designer/"]]
+=======
+VITE_PROXY = [["/api","http://localhost:8080/api"],["/thingskit-scada","http://localhost:5173/thingskit-scada"],["/large-designer", "http://localhost:5555/large-designer/"]]
+>>>>>>> main_dev
 
 # 实时数据的ws地址
 VITE_GLOB_WEB_SOCKET = ws://192.168.10.146:8080/api/ws/plugins/telemetry?token=
@@ -48,7 +52,7 @@ VITE_GLOB_ALARM_NOTIFY_POLLING_INTERVAL_TIME = 500000
 VITE_GLOB_ALARM_NOTIFY_DURATION = 5
 
 # Should Disabled Task Center Execute Interval Unit (Second)
-VITE_GLOB_DISABLED_TASK_CENTER_EXECUTE_INTERVAL_UNIT_SECOND = false
+VITE_GLOB_DISABLED_TASK_CENTER_EXECUTE_INTERVAL_UNIT_SECOND = true
 
 # Software version number
-VITE_GLOB_SOFTWARE_VERSION_NUMBER = 123
+VITE_GLOB_SOFTWARE_VERSION_NUMBER = ThingsKit v1.2.0_release

@@ -16,11 +16,11 @@ VITE_GLOB_BUILD_COMPRESS = 'gzip'
 VITE_GLOB_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
 
 # Basic interface address SPA
-VITE_GLOB_API_URL=http://localhost:8080/api
+VITE_GLOB_API_URL=/api
 
 # File upload address， optional
 # It can be forwarded by nginx or write the actual address directly
-VITE_GLOB_UPLOAD_URL=http://localhost:8080/api/yt/oss/upload
+VITE_GLOB_UPLOAD_URL=/api/yt/oss/upload
 
 # Interface prefix
 VITE_GLOB_API_URL_PREFIX=/yt
@@ -56,4 +56,4 @@ VITE_GLOB_ALARM_NOTIFY_DURATION = 5
 VITE_GLOB_DISABLED_TASK_CENTER_EXECUTE_INTERVAL_UNIT_SECOND = false
 
 # software version number
-VITE_GLOB_SOFTWARE_VERSION_NUMBER = 123
+VITE_GLOB_SOFTWARE_VERSION_NUMBER = ThingsKit v1.2.0_release

@@ -9,6 +9,7 @@
     "clazz",
     "Cmds",
     "COAP",
+    "drawio",
     "echarts",
     "edrx",
     "EFENTO",

+版本：v1.1.2_release
+
 ## 准备
 
 - [node](http://nodejs.org/) 和 [git](https://git-scm.com/) -项目开发环境

@@ -2,6 +2,7 @@ import { DeviceProfileModel } from '../../device/model/deviceModel';
 import { HistoryData } from './model';
 import { defHttp } from '/@/utils/http/axios';
 import { isString } from '/@/utils/is';
+import { OrderByEnum } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
 
 // 获取设备配置
 export const getDeviceProfile = (deviceType?: string) => {
@@ -12,11 +13,11 @@ export const getDeviceProfile = (deviceType?: string) => {
 };
 
 // 获取历史数据
-export const getDeviceHistoryInfo = (params: Recordable, orderBy?: string) => {
+export const getDeviceHistoryInfo = (params: Recordable, orderBy = OrderByEnum.DESC) => {
   return defHttp.get<HistoryData>(
     {
       url: `/plugins/telemetry/DEVICE/${params.entityId}/values/timeseries`,
-      params: { ...params, entityId: null, orderBy: orderBy || 'DESC' },
+      params: { orderBy, ...params, entityId: null },
     },
     {
       joinPrefix: false,

@@ -119,3 +119,11 @@ export const closeFlvPlay = (url: string, browserId: string) => {
     url: `/rtsp/closeFlv?url=${encodeURIComponent(url)}&browserId=${browserId}`,
   });
 };
+
+//云台控制
+export const controlling = (params: any) => {
+  return defHttp.get({
+    url: `/video/controlling`,
+    params,
+  });
+};

@@ -8,10 +8,13 @@ export interface ConfigurationCenterItemsModal {
   remark: string;
   publicId?: string;
   organizationId?: string;
+  platform?: string;
+  productIds?: string;
 }
 export type queryPageParams = BasicPageParams & {
   name?: Nullable<string>;
   organizationId?: Nullable<number>;
+  isTemplate?: number;
 };
 
 export interface ConfigurationModal {

@@ -45,7 +45,7 @@ enum DeviceManagerApi {
   DEVICE_PUBLIC = '/customer/public/device',
 
   DEVICE_PRIVATE = '/customer/device',
-  DEVICE_COLLECT = '/device/collect ', //收藏
+  DEVICE_COLLECT = '/collect/DEVICE_COLLECT', //收藏
 
   /**
    * @description 通过设备列表获取设备信息
@@ -62,7 +62,7 @@ export const devicePage = (params: DeviceQueryParam) => {
   });
 };
 
-export const deviceCollect = (params: Array<any>) => {
+export const deviceCollect = (params: string[]) => {
   return defHttp.post({
     url: `${DeviceManagerApi.DEVICE_COLLECT}`,
     params,

 import { StructJSON } from './modelOfMatterModel';
 import { BasicPageParams } from '/@/api/model/baseModel';
-import { AlarmStatus } from '/@/views/alarm/log/config/detail.config';
+import { AlarmStatus } from '/@/enums/alarmEnum';
 import { DeviceStatusEnum } from '/@/views/rule/dataFlow/cpns/config';
 export enum DeviceState {
   INACTIVE = 'INACTIVE',

@@ -151,6 +151,7 @@
   defineExpose({
     get,
     set,
+    handleFormat,
   });
 </script>
 

@@ -41,6 +41,7 @@ import ApiSelectScrollLoad from './components/ApiSelectScrollLoad.vue';
 import InputGroup from './components/InputGroup.vue';
 import RegisterAddressInput from '/@/views/task/center/components/PollCommandInput/RegisterAddressInput.vue';
 import ExtendDesc from '/@/components/Form/src/externalCompns/components/ExtendDesc/index.vue';
+import DeviceProfileForm from '/@/components/Form/src/externalCompns/components/DeviceProfileForm/index.vue';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -89,6 +90,7 @@ componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad);
 componentMap.set('InputGroup', InputGroup);
 componentMap.set('RegisterAddressInput', RegisterAddressInput);
 componentMap.set('ExtendDesc', ExtendDesc);
+componentMap.set('DeviceProfileForm', DeviceProfileForm);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);

@@ -22,11 +22,13 @@
       value?: string;
       disabled?: boolean;
       validateStatus?: boolean;
+      scriptType?: string;
     }>(),
     {
       functionName: 'method',
       paramsName: () => [],
       height: 200,
+      scriptType: 'filter',
       value: '',
     }
   );

+<template>
+  <div v-for="(param, index) in dynamicInput.params" :key="index" style="display: flex">
+    <a-input placeholder="产品" v-model:value="param.label" :disabled="true" />
+    <Select
+      placeholder="请选择设备"
+      v-model:value="param.value"
+      style="width: 100%"
+      v-bind="createPickerSearch()"
+      mode="multiple"
+      labelInValue
+    />
+    <MinusCircleOutlined
+      v-if="dynamicInput.params.length > min && !disabled"
+      class="dynamic-delete-button"
+      @click="remove(param)"
+      style="width: 50px"
+    />
+  </div>
+</template>
+<script lang="ts" name="DeviceProfileForm">
+  import { MinusCircleOutlined } from '@ant-design/icons-vue';
+  import { defineComponent, reactive, UnwrapRef, watchEffect } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { isEmpty } from '/@/utils/is';
+  import { Select } from 'ant-design-vue';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
+
+  interface Params {
+    label: string;
+    value: string;
+  }
+
+  export default defineComponent({
+    name: 'DeviceProfileForm',
+    components: {
+      MinusCircleOutlined,
+      Select,
+    },
+    //--------------不继承Antd Design Vue Input的所有属性 否则控制台报大片警告--------------
+    inheritAttrs: false,
+    props: {
+      value: propTypes.object.def({}),
+      //自定义删除按钮多少才会显示
+      min: propTypes.integer.def(0),
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    emits: ['change', 'update:value'],
+    setup(props, { emit }) {
+      //input动态数据
+      const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
+
+      //删除Input
+      const remove = (item: Params) => {
+        let index = dynamicInput.params.indexOf(item);
+        if (index !== -1) {
+          dynamicInput.params.splice(index, 1);
+        }
+        emitChange();
+      };
+
+      //监听传入数据value
+      watchEffect(() => {
+        initVal();
+      });
+
+      /**
+       * 初始化数值
+       */
+      function initVal() {
+        dynamicInput.params = [];
+        if (props.value) {
+          let jsonObj = props.value;
+          Object.keys(jsonObj).forEach((key) => {
+            dynamicInput.params.push({ label: key, value: jsonObj[key] });
+          });
+        }
+      }
+
+      /**
+       * 数值改变
+       */
+      function emitChange() {
+        let obj = {};
+        if (dynamicInput.params.length > 0) {
+          dynamicInput.params.forEach((item) => {
+            obj[item.label] = item.value;
+          });
+        }
+        emit('change', isEmpty(obj) ? '' : obj);
+        emit('update:value', isEmpty(obj) ? '' : obj);
+      }
+
+      return {
+        dynamicInput,
+        emitChange,
+        remove,
+        createPickerSearch,
+      };
+    },
+  });
+</script>
+<style scoped>
+  .dynamic-delete-button {
+    cursor: pointer;
+    position: relative;
+    top: 4px;
+    font-size: 24px;
+    color: #999;
+    transition: all 0.3s;
+  }
+
+  .dynamic-delete-button:hover {
+    color: #777;
+  }
+
+  .dynamic-delete-button[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+</style>

@@ -22,9 +22,11 @@
       value: ModelOfMatterParams[];
       disabled: boolean;
       hasStructForm?: boolean;
+      hiddenAccessMode?: boolean;
     }>(),
     {
       value: () => [],
+      hiddenAccessMode: false,
       hasStructForm: false,
     }
   );
@@ -106,11 +108,12 @@
         <span class="mr-2">
           <PlusOutlined />
         </span>
-        <span @click="!$props.disabled && handleCreateParams()">增加参数</span>
+        <span @click="!disabled && handleCreateParams()">增加参数</span>
       </div>
     </div>
     <StructFormModel
-      :has-struct-form="$props.hasStructForm!"
+      :has-struct-form="hasStructForm!"
+      :hidden-access-mode="hiddenAccessMode"
       :disabled="$props.disabled"
       :value-list="getValue"
       @register="registerModal"

@@ -23,6 +23,7 @@
     disabled: boolean;
     hasStructForm: boolean;
     valueList: StructRecord[];
+    hiddenAccessMode: boolean;
   }>();
 
   const emit = defineEmits(['register', 'submit']);
@@ -31,7 +32,7 @@
 
   const [register, { validate, setFieldsValue, setProps }] = useForm({
     labelWidth: 100,
-    schemas: formSchemas(props.hasStructForm),
+    schemas: formSchemas(props.hasStructForm, props.hiddenAccessMode),
     actionColOptions: {
       span: 14,
     },

@@ -28,7 +28,11 @@ export const validateJSON = (_rule, value = [] as ModelOfMatterParams[], _callba
   return Promise.reject('JSON对象不能为空');
 };
 
-export const formSchemas = (hasStructForm: boolean, isTcp = false): FormSchema[] => {
+export const formSchemas = (
+  hasStructForm: boolean,
+  hiddenAccessMode: boolean,
+  isTcp = false
+): FormSchema[] => {
   return [
     {
       field: FormField.FUNCTION_NAME,
@@ -299,7 +303,7 @@ export const formSchemas = (hasStructForm: boolean, isTcp = false): FormSchema[]
       colProps: {
         span: 24,
       },
-      ifShow: () => !hasStructForm,
+      ifShow: () => !hiddenAccessMode && !hasStructForm,
       defaultValue: 'r',
       componentProps: {
         placeholder: '请选择读写类型',

@@ -137,4 +137,5 @@ export type ComponentType =
   | 'CorrelationFilters'
   | 'RelationsQuery'
   | 'CredentialsCard'
-  | 'ApiComplete';
+  | 'ApiComplete'
+  | 'DeviceProfileForm';

 <script lang="ts" setup>
   import { QuestionCircleOutlined } from '@ant-design/icons-vue';
   import { Tooltip } from 'ant-design-vue';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { UserDropDownItemEnum } from './user-dropdown/config';
 
   const handleJump = () => {
     open('https://docs.thingskit.com');
   };
+
+  const { hasPermission } = usePermission();
 </script>
 
 <template>
   <Tooltip title="帮助文档">
-    <QuestionCircleOutlined class="text-base cursor-pointer" @click="handleJump" />
+    <QuestionCircleOutlined
+      v-if="hasPermission(UserDropDownItemEnum.ABOUT_SOFTWARE)"
+      class="text-base cursor-pointer"
+      @click="handleJump"
+    />
   </Tooltip>
 </template>

+/**
+ * 系统右上角下拉选择项权限标识key枚举值
+ */
+
+export const enum UserDropDownItemEnum {
+  FORGOT_PASSWORD = 'system:password:view', //忘记密码权限标识key
+  ABOUT_SOFTWARE = 'system:about_software:view', //关于软件权限标识key
+}

@@ -17,11 +17,13 @@
           icon="ion:document-text-outline"
         />
         <MenuItem
+          v-if="hasPermission(UserDropDownItemEnum.FORGOT_PASSWORD)"
           key="changePassword"
           :text="t('layout.header.dropdownItemChangePassword')"
           icon="ant-design:unlock-twotone"
         />
         <MenuItem
+          v-if="hasPermission(UserDropDownItemEnum.ABOUT_SOFTWARE)"
           key="aboutSoftware"
           :text="handleDecode(t('routes.aboutSoftware.aboutSoftware'))"
           icon="ant-design:message-outline"
@@ -67,6 +69,7 @@
   import AboutSoftwareModal from '../AboutSoftwareModal.vue';
   import { AesEncryption } from '/@/utils/cipher';
   import { cacheCipher } from '/@/settings/encryptionSetting';
+  import { UserDropDownItemEnum } from './config';
 
   type MenuEvent = 'logout' | 'doc' | 'lock' | 'personal' | 'changePassword' | 'aboutSoftware';
 
@@ -187,6 +190,7 @@
         getUseLockPage,
         hasPermission,
         registerModal,
+        UserDropDownItemEnum,
       };
     },
   });

@@ -78,6 +78,8 @@
     </PageWrapper>
     <CameraDrawer @register="registerDrawer" @success="handleSuccess" />
     <VideoPreviewModal @register="registerModal" />
+
+    <VideoModal @register="registerModal1" />
   </div>
 </template>
 
@@ -96,6 +98,7 @@
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { Popconfirm } from 'ant-design-vue';
   import { Tag } from 'ant-design-vue';
+  import VideoModal from '/@/views/device/list/cpns/tabs/VideoChannel/videoModal.vue';
 
   export default defineComponent({
     components: {
@@ -105,6 +108,7 @@
       TableAction,
       CameraDrawer,
       VideoPreviewModal,
+      VideoModal,
       TableImg,
       Authority,
       Popconfirm,
@@ -114,7 +118,9 @@
     setup(_, { emit }) {
       const searchInfo = reactive<Recordable>({});
       const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
-      const [registerModal, { openModal }] = useModal();
+      const [registerModal, { openModal }] = useModal(); //手动输入
+
+      const [registerModal1, { openModal: openModal1 }] = useModal(); //流媒体获取
       // 表格hooks
       const [registerTable, { reload, setProps, clearSelectedRowKeys }] = useTable({
         title: '视频列表',
@@ -176,7 +182,14 @@
         handleSuccess();
       };
       const handleViewVideo = (record) => {
-        openModal(true, {
+        if (record.accessMode === AccessMode.ManuallyEnter) {
+          openModal(true, {
+            isUpdate: true,
+            record,
+          });
+          return;
+        }
+        openModal1(true, {
           isUpdate: true,
           record,
         });
@@ -198,6 +211,7 @@
         organizationIdTreeRef,
         handleViewVideo,
         registerModal,
+        registerModal1,
         AccessMode,
         handleSwitchMode,
         CameraPermission,

@@ -7,36 +7,97 @@
     width="30%"
     @ok="handleSubmit"
   >
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm">
+      <!-- 模板选择 -->
+      <template #templateId="{ model }">
+        <Select
+          v-model:value="model['templateId']"
+          placeholder="请选择模板"
+          style="width: 100%"
+          :options="selectTemplateOptions"
+          @change="handleTemplateChange"
+          v-bind="createPickerSearch()"
+          :disabled="templateDisabled"
+        />
+      </template>
+      <!-- 产品选择 -->
+      <template #productIds="{ model }">
+        <SelectDeviceProfile
+          v-if="model['templateId']"
+          ref="selectDeviceProfileRef"
+          :selectOptions="selectOptions"
+          :organizationId="model?.['organizationId']"
+        />
+      </template>
+    </BasicForm>
   </BasicDrawer>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, computed, unref } from 'vue';
+  import { defineComponent, ref, computed, unref, Ref, onMounted, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
+  import { Select } from 'ant-design-vue';
   import { formSchema, PC_DEFAULT_CONTENT, PHONE_DEFAULT_CONTENT, Platform } from './center.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { saveOrUpdateConfigurationCenter } from '/@/api/configuration/center/configurationCenter';
+  import {
+    saveOrUpdateConfigurationCenter,
+    getPage,
+  } from '/@/api/configuration/center/configurationCenter';
   import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
   import { buildUUID } from '/@/utils/uuid';
+  import SelectDeviceProfile from './components/SelectDeviceProfile.vue';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
+  import type { queryPageParams } from '/@/api/configuration/center/model/configurationCenterModal';
+  import { getDeviceProfile } from '/@/api/alarm/position';
 
   export default defineComponent({
     name: 'ConfigurationDrawer',
-    components: { BasicDrawer, BasicForm },
+    components: { BasicDrawer, BasicForm, SelectDeviceProfile, Select },
     emits: ['success', 'register'],
     setup(_, { emit }) {
       const isUpdate = ref(true);
 
-      const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
+      const selectDeviceProfileRef = ref<InstanceType<typeof SelectDeviceProfile>>();
+
+      const [registerForm, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({
         labelWidth: 120,
         schemas: formSchema,
         showActionButtonGroup: false,
       });
 
+      const updateEnableTemplate = async (enable: number, disabled: boolean) => {
+        await setFieldsValue({
+          enableTemplate: enable,
+        });
+        await updateSchema({
+          field: 'enableTemplate',
+          componentProps: ({ formActionType }) => {
+            return {
+              disabled,
+              checkedValue: 1,
+              unCheckedValue: 0,
+              checkedChildren: '开',
+              unCheckedChildren: '关',
+              onChange: () => {
+                formActionType.setFieldsValue({
+                  productIds: [],
+                  templateId: null,
+                  productId: undefined,
+                });
+              },
+            };
+          },
+        });
+      };
+
       const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        await nextTick();
         await resetFields();
         setDrawerProps({ confirmLoading: false });
         isUpdate.value = !!data?.isUpdate;
+        selectDeviceProfileRef.value?.retValue();
+        await updateEnableTemplate(0, false);
+        templateDisabled.value = false;
         if (unref(isUpdate)) {
           if (data.record.thumbnail) {
             data.record.thumbnail = [
@@ -49,9 +110,66 @@
             Reflect.deleteProperty(data.record, 'organizationId');
             await setFieldsValue(data.record);
           }
+          // 业务 编辑如果有templateId 则启用模板开关禁用,模板不能选择，产品和设备可以选择
+          if (Reflect.get(data.record, 'templateId')) {
+            await updateEnableTemplate(1, true);
+            templateDisabled.value = true;
+            //回显产品和设备
+            const { productAndDevice } = data.record;
+            selectOptions.value = productAndDevice?.map((item) => ({
+              label: item.name,
+              value: item.profileId,
+            }));
+            selectDeviceProfileRef.value?.setValue(productAndDevice);
+          } else {
+            const productAndDevice = data.record['productAndDevice'];
+            setFieldsValue({
+              productId: productAndDevice?.map((item) => item.profileId),
+            });
+          }
         }
       });
 
+      //新增修改
+      const templateDisabled = ref(false);
+      onMounted(() => {
+        getTemplate({
+          page: 1,
+          pageSize: 30,
+        });
+      });
+
+      const selectTemplateOptions: Ref<any[]> = ref([]);
+      const getTemplate = async (params: queryPageParams) => {
+        const { items } = await getPage({ ...params, isTemplate: 1 });
+        selectTemplateOptions.value = items.map((item) => ({
+          ...item,
+          label: item.name,
+          value: item.id,
+        }));
+      };
+      const selectOptions: Ref<any[]> = ref([]);
+
+      const handleTemplateChange = async (_, option) => {
+        const { productAndDevice } = option;
+        // if (!productAndDevice) return;
+        // selectOptions.value = productAndDevice?.map((item) => ({
+        //   label: item.profileName || item.name,
+        //   value: item.profileId,
+        // }));
+        await nextTick();
+        // 赋值
+        selectDeviceProfileRef.value?.setFieldsValue(
+          productAndDevice?.map((item) => ({
+            label: item.profileName || item.name,
+            value: item.profileId,
+            transportType: item?.transportType,
+            deviceType: item?.deviceType,
+          }))
+        );
+      };
+      //
+
       const getTitle = computed(() => (!unref(isUpdate) ? '新增组态中心' : '编辑组态中心'));
 
       const getDefaultContent = (platform: Platform) => {
@@ -61,10 +179,49 @@
         return PHONE_DEFAULT_CONTENT;
       };
 
+      // 获取产品
+      const getCurrentAllProduct = async (products: string[]) => {
+        const resp = (await getDeviceProfile()) as any;
+        if (!resp) return;
+        const values = resp?.map((item) => ({
+          name: item.name,
+          profileId: item.id,
+          deviceType: item.deviceType,
+          transportType: item.transportType,
+        }));
+        return values.filter((item) => products?.includes(item.profileId));
+      };
+
       async function handleSubmit() {
         try {
           const { createMessage } = useMessage();
           const values = await validate();
+          if (!values) return;
+          const selectDevice = selectDeviceProfileRef.value?.getSelectDevice();
+          if (values['enableTemplate'] === 1) {
+            if (!values['templateId']) return createMessage.error('未选择模板');
+            // 业务 启用模板，产品和设备必填
+            if (values['templateId']) {
+              values.templateId = values['templateId'];
+              if (Array.isArray(selectDevice) && selectDevice.length == 0)
+                return createMessage.error('您已经选择了模板，但产品或者设备未选择');
+              if (
+                selectDevice?.some(
+                  (item) =>
+                    !item.name ||
+                    item.deviceList.includes('' || undefined) ||
+                    item.deviceList.length == 0
+                )
+              ) {
+                return createMessage.error('您已经选择了模板，但产品或者设备未选择');
+              }
+              values.productAndDevice = selectDevice;
+            }
+          } else {
+            const { productId } = values;
+            values.productAndDevice = await getCurrentAllProduct(productId);
+            Reflect.deleteProperty(values, 'productId');
+          }
           if (Reflect.has(values, 'thumbnail')) {
             const file = (values.thumbnail || []).at(0) || {};
             values.thumbnail = file.url || null;
@@ -87,6 +244,12 @@
         registerDrawer,
         registerForm,
         handleSubmit,
+        selectOptions,
+        selectTemplateOptions,
+        handleTemplateChange,
+        createPickerSearch,
+        selectDeviceProfileRef,
+        templateDisabled,
       };
     },
   });

@@ -4,6 +4,8 @@ import { createImgPreview } from '/@/components/Preview';
 import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 import { useComponentRegister } from '/@/components/Form';
 import { OrgTreeSelect } from '../../common/OrgTreeSelect';
+import { getDeviceProfile } from '/@/api/alarm/position';
+import { buildUUID } from '/@/utils/uuid';
 
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 export enum Platform {
@@ -21,11 +23,9 @@ export enum ConfigurationPermission {
   UN_SHARE = 'api:yt:configuration:center:monopoly',
 }
 
-export const PC_DEFAULT_CONTENT =
-  '<mxfile><diagram>dZHBDsIgDIafhvuEzOh5Tr142sEzGXWQsHVhmKFP7xbAidMT5fv/UtoSVrTuZHgvLyhAE5oJR9iBUMrybT4dM3l4stnTzJPGKBHYAir1hACj7a4EDInRImqr+hTW2HVQ24RxY3BMbTfUadWeN7ACVc31ml6VsPK7jVk4g2pkLJ3tgtLy6A5gkFzg+IFYSVhhEK2PWleAnscXB+Pzjn/U988MdPZHwhQsb0+XZEesfAE=</diagram></mxfile>';
+export const PC_DEFAULT_CONTENT = `<mxfile><diagram id="${buildUUID()}">dZHBDsIgDIafhvuEzOh5Tr142sEzGXWQsHVhmKFP7xbAidMT5fv/UtoSVrTuZHgvLyhAE5oJR9iBUMrybT4dM3l4stnTzJPGKBHYAir1hACj7a4EDInRImqr+hTW2HVQ24RxY3BMbTfUadWeN7ACVc31ml6VsPK7jVk4g2pkLJ3tgtLy6A5gkFzg+IFYSVhhEK2PWleAnscXB+Pzjn/U988MdPZHwhQsb0+XZEesfAE=</diagram></mxfile>`;
 
-export const PHONE_DEFAULT_CONTENT =
-  '<mxfile><diagram>dZHBEoIgEEC/hru6lXU2q0snD50Z2YQZdB2k0fr6dMCMsU4sb9+ysDDI6uFseCuvJFCzJBIDgyNLkjjdw7hM5OnIYRc5UBklvLSAQr3Qw1l7KIFdIFoibVUbwpKaBksbMG4M9aF2Jx12bXmFK1CUXK/pTQkrHd3E24VfUFXSd04hdYmaz65/SCe5oP4LQc4gM0TWRfWQoZ5mN4/F1Z3+ZD/3MtjYHwVjsJw9boIPgvwN</diagram></mxfile>';
+export const PHONE_DEFAULT_CONTENT = `<mxfile><diagram id="${buildUUID()}">dZHBEoIgEEC/hru6lXU2q0snD50Z2YQZdB2k0fr6dMCMsU4sb9+ysDDI6uFseCuvJFCzJBIDgyNLkjjdw7hM5OnIYRc5UBklvLSAQr3Qw1l7KIFdIFoibVUbwpKaBksbMG4M9aF2Jx12bXmFK1CUXK/pTQkrHd3E24VfUFXSd04hdYmaz65/SCe5oP4LQc4gM0TWRfWQoZ5mN4/F1Z3+ZD/3MtjYHwVjsJw9boIPgvwN</diagram></mxfile>`;
 // 表格列数据
 export const columns: BasicColumn[] = [
   {
@@ -82,6 +82,7 @@ export const searchFormSchema: FormSchema[] = [
   },
 ];
 
+// 表单
 export const formSchema: FormSchema[] = [
   {
     field: 'thumbnail',
@@ -111,14 +112,9 @@ export const formSchema: FormSchema[] = [
         onPreview: (fileList: FileItem) => {
           createImgPreview({ imageList: [fileList.url!] });
         },
-        // showUploadList: {
-        //   showDownloadIcon: true,
-        //   showRemoveIcon: true,
-        // },
       };
     },
   },
-
   {
     field: 'name',
     label: '组态名称',
@@ -150,6 +146,79 @@ export const formSchema: FormSchema[] = [
     },
   },
   {
+    field: 'enableTemplate', //前端控制
+    label: '启用模版',
+    component: 'Switch',
+    defaultValue: 0,
+    componentProps: ({ formActionType }) => {
+      const { setFieldsValue } = formActionType;
+
+      return {
+        checkedValue: 1,
+        unCheckedValue: 0,
+        checkedChildren: '开',
+        unCheckedChildren: '关',
+        onChange: () => {
+          setFieldsValue({
+            productIds: [],
+            templateId: null,
+            productId: undefined,
+          });
+        },
+      };
+    },
+  },
+  {
+    field: 'isTemplate',
+    label: '默认启用模版',
+    component: 'Switch',
+    defaultValue: 0,
+    componentProps: {
+      checkedValue: 1,
+      unCheckedValue: 0,
+    },
+    show: false,
+  },
+  {
+    field: 'templateId', //暂且使用插槽形式
+    label: '模板',
+    component: 'Input',
+    required: true,
+    slot: 'templateId',
+    colProps: { span: 24 },
+    ifShow: ({ values }) => values['enableTemplate'] === 1,
+  },
+  {
+    field: 'productIds', //暂且使用插槽形式
+    label: '产品',
+    component: 'Input',
+    slot: 'productIds',
+    colProps: { span: 24 },
+    ifShow: ({ values }) => values['enableTemplate'] === 1 && values['templateId'],
+  },
+  {
+    field: 'productId',
+    label: '产品',
+    component: 'ApiSelect',
+    required: true,
+    componentProps: {
+      api: getDeviceProfile,
+      mode: 'multiple',
+      labelField: 'name',
+      valueField: 'id',
+      placeholder: '请选择产品',
+      getPopupContainer: (triggerNode) => triggerNode.parentNode,
+      filterOption: (inputValue: string, option: Record<'label' | 'value', string>) => {
+        let { label, value } = option;
+        label = label.toLowerCase();
+        value = value.toLowerCase();
+        inputValue = inputValue.toLowerCase();
+        return label.includes(inputValue) || value.includes(inputValue);
+      },
+    },
+    ifShow: ({ values }) => values['enableTemplate'] === 0,
+  },
+  {
     field: 'remark',
     label: '备注',
     component: 'InputTextArea',

+<template>
+  <div v-for="param in dynamicInput.params" :key="param.name" class="mt-4 flex gap-2">
+    <a-input :disabled="true" v-model:value="param.name" class="w-1/2 flex-1" />
+    <Select
+      placeholder="请选择设备"
+      v-model:value="param.deviceList"
+      class="!w-1/2"
+      :options="selectOptions"
+      v-bind="createPickerSearch()"
+      @change="emitChange"
+      mode="multiple"
+      allowClear
+    />
+  </div>
+</template>
+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
+<script lang="ts" setup name="SelectAttributes">
+  import { reactive, UnwrapRef, watchEffect, ref } from 'vue';
+  import { propTypes } from '/@/utils/propTypes';
+  import { Select } from 'ant-design-vue';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
+  import { byOrganizationIdGetMasterDevice } from '/@/api/ruleengine/ruleengineApi';
+
+  const props = defineProps({
+    value: propTypes.object.def({}),
+    organizationId: {
+      type: String,
+      required: true,
+    },
+  });
+
+  const selectOptions: any = ref([]);
+
+  //动态数据
+  const dynamicInput: UnwrapRef<{ params: any[] }> = reactive({ params: [] });
+
+  const initVal = async () => {
+    if (props.value) {
+      if (props.organizationId) {
+        const resp = await byOrganizationIdGetMasterDevice({
+          organizationId: props.organizationId,
+          deviceProfileId: props.value.value,
+        });
+        selectOptions.value = resp.map((item) => ({
+          ...item,
+          label: item.alias || item.name,
+          value: item.tbDeviceId,
+        }));
+      }
+      dynamicInput.params.push({
+        name: props.value.label,
+        profileId: props.value.value,
+        deviceType: props.value?.deviceType,
+        transportType: props.value?.transportType,
+        deviceList: props.value.deviceList?.filter(Boolean)?.map((item) => item.deviceId),
+      });
+    }
+  };
+
+  //数值改变
+  const valEffect = watchEffect(() => {
+    initVal();
+  });
+
+  valEffect();
+
+  //chang改变
+  const emitChange = () => {
+    const tempDeviceList: Recordable[] = []; // fix: 修改选择设备顺序问题
+    dynamicInput.params[0].deviceList?.forEach((item) => {
+      selectOptions.value?.forEach((newItem) => {
+        if (item === newItem.value) {
+          tempDeviceList.push({
+            name: newItem.label,
+            deviceId: newItem.value,
+            codeType: newItem.codeType,
+          });
+        }
+      });
+    });
+    return {
+      ...dynamicInput.params[0],
+      deviceList: tempDeviceList.filter(Boolean), // 过滤假值
+    };
+  };
+  defineExpose({
+    emitChange,
+  });
+</script>
+<style scoped lang="css">
+  .dynamic-delete-button {
+    cursor: pointer;
+    position: relative;
+    top: 4px;
+    font-size: 24px;
+    color: #999;
+    transition: all 0.3s;
+  }
+
+  .dynamic-delete-button:hover {
+    color: #777;
+  }
+
+  .dynamic-delete-button[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+</style>

+<template>
+  <Select
+    placeholder="请选择产品"
+    v-model:value="selectValue"
+    style="width: 100%"
+    :options="selectOptions"
+    v-bind="createPickerSearch()"
+    @change="handleDeviceProfileChange"
+    mode="multiple"
+    labelInValue
+  />
+  <template v-for="(item, index) in profileList" :key="item.value">
+    <SelectDevice
+      :ref="bindDeviceRef.deviceAttrRef"
+      :value="item"
+      :index="index"
+      :organizationId="organizationId"
+    />
+  </template>
+</template>
+<script lang="ts" setup name="SelectDevice">
+  import { ref, Ref, PropType, unref, nextTick, onMounted } from 'vue';
+  import { Select } from 'ant-design-vue';
+  import SelectDevice from './SelectDevice.vue';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
+
+  import { getDeviceProfile } from '/@/api/alarm/position';
+
+  defineProps({
+    selectOptions: {
+      type: Array as PropType<any[]>,
+      required: true,
+    },
+    organizationId: {
+      type: String,
+      required: true,
+    },
+  });
+
+  const selectValue = ref([]);
+  const selectOptions = ref<any>([]);
+
+  const bindDeviceRef = {
+    deviceAttrRef: ref([]),
+  };
+
+  const profileList: Ref<any[]> = ref([]);
+
+  const handleDeviceProfileChange = (_, options) => {
+    profileList.value = options;
+  };
+
+  const getSelectDevice = () => {
+    return unref(bindDeviceRef.deviceAttrRef)?.map((item: any) => item.emitChange());
+  };
+
+  const setFieldsValue = async (productIds) => {
+    await nextTick();
+    selectValue.value = productIds || [];
+    profileList.value = productIds || [];
+  };
+
+  const setValue = (value: any) => {
+    selectValue.value = value.map((item) => ({
+      label: item.name,
+      key: item.profileId,
+    }));
+    profileList.value = value.map((item) => {
+      return {
+        label: item.name,
+        value: item.profileId,
+        deviceList: item.deviceList,
+      };
+    });
+  };
+  const retValue = () => {
+    selectValue.value = [];
+    profileList.value = [];
+  };
+
+  onMounted(async () => {
+    const values = await getDeviceProfile();
+    selectOptions.value = values.map((item) => ({
+      label: item.name,
+      value: item.id,
+    }));
+  });
+
+  defineExpose({
+    getSelectDevice,
+    setValue,
+    retValue,
+    setFieldsValue,
+  });
+</script>
+<style scoped lang="css"></style>

+import { Platform } from './center.data';
+import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
+import { useGlobSetting } from '/@/hooks/setting';
+
+export enum ScadaModeEnum {
+  LIGHTBOX = 'lightbox',
+  DESIGN = 'design',
+  SHARE = 'share',
+}
+
+interface ScadaLinkParamsType {
+  configurationId: string;
+  organizationId: string;
+  mode: ScadaModeEnum;
+  platform: Platform;
+  publicId?: string;
+}
+
+const getRandomString = () => Number(Math.random().toString().substring(2)).toString(36);
+
+export const encode = (record: Recordable) => {
+  let hash = JSON.stringify(record);
+  const mixinString = getRandomString()
+    .slice(0, 10)
+    .padEnd(10, getRandomString())
+    .split('')
+    .map((item) => (Math.random() > 0.5 ? item.toUpperCase() : item))
+    .join('');
+  hash = window.btoa(hash);
+  hash = hash.substring(0, 6) + mixinString + hash.substring(6);
+  hash = window.btoa(hash);
+  return hash;
+};
+
+export const createScadaPageLink = (
+  record: ConfigurationCenterItemsModal,
+  mode: ScadaModeEnum = ScadaModeEnum.DESIGN,
+  open = true
+) => {
+  const { configurationPrefix } = useGlobSetting();
+  const params: ScadaLinkParamsType = {
+    configurationId: record.id,
+    organizationId: record.organizationId!,
+    mode: mode,
+    platform: record.platform as Platform,
+  };
+
+  if (mode === ScadaModeEnum.SHARE) {
+    params.publicId = record.publicId;
+  }
+
+  const href = new URL(location.origin);
+  href.pathname = configurationPrefix;
+  href.hash = encode(params);
+  open && window.open(href.href);
+  return href.href;
+};

@@ -14,14 +14,12 @@
   import { ConfigurationPermission, Platform, searchFormSchema } from './center.data';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Authority } from '/@/components/Authority';
-  import { isDevMode } from '/@/utils/env';
   import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
   import { getBoundingClientRect } from '/@/utils/domUtils';
   import configurationSrc from '/@/assets/icons/configuration.svg';
   import { cloneDeep } from 'lodash';
   import { usePermission } from '/@/hooks/web/usePermission';
-  import { useGlobSetting } from '/@/hooks/setting';
   import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
   import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
   import { ShareModal } from '/@/views/common/ShareModal';
@@ -31,6 +29,7 @@
   import { useRole } from '/@/hooks/business/useRole';
   import { useClipboard } from '@vueuse/core';
   import { Icon } from '/@/components/Icon';
+  import { createScadaPageLink, ScadaModeEnum } from './help';
 
   const listColumn = ref(5);
 
@@ -78,6 +77,7 @@
       const { items, total } = await getPage({
         organizationId: unref(organizationId),
         ...value,
+        isTemplate: 0,
         page: pagination.current!,
         pageSize,
       });
@@ -130,25 +130,15 @@
     }
   };
 
-  const { configurationPrefix } = useGlobSetting();
-  const isDev = isDevMode();
-
   const handlePreview = (record: ConfigurationCenterItemsModal) => {
     if (!unref(getPreviewFlag)) return;
-    window.open(
-      `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${
-        record!.id
-      }&lightbox=1&organizationId=${record.organizationId}`
-    );
+    createScadaPageLink(record, ScadaModeEnum.LIGHTBOX);
   };
 
   const handleDesign = (record: ConfigurationCenterItemsModal) => {
     if (!unref(getDesignFlag)) return;
-    window.open(
-      `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${
-        record!.id
-      }&organizationId=${record.organizationId}`
-    );
+
+    createScadaPageLink(record, ScadaModeEnum.DESIGN);
   };
 
   const handleDelete = async (record: ConfigurationCenterItemsModal) => {
@@ -165,14 +155,7 @@
   };
 
   const createShareUrl = (record: ConfigurationCenterItemsModal) => {
-    const searchParams = new URLSearchParams();
-    isDev && searchParams.set('dev', '1');
-    searchParams.set('share', 'SCADA');
-    searchParams.set('configurationId', record.id);
-    searchParams.set('publicId', record.publicId || '');
-    searchParams.set('lightbox', '1');
-    searchParams.set('organizationId', record!.organizationId || '');
-    return `${origin}${configurationPrefix}/?${searchParams.toString()}`;
+    return createScadaPageLink(record, ScadaModeEnum.SHARE, false);
   };
 
   const { copied, copy } = useClipboard({ legacy: true });

+<template>
+  <BasicDrawer
+    v-bind="$attrs"
+    @register="registerDrawer"
+    showFooter
+    :title="getTitle"
+    width="30%"
+    @ok="handleSubmit"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from './center.data';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { saveOrUpdateConfigurationCenter } from '/@/api/configuration/center/configurationCenter';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
+  import { getDeviceProfile } from '/@/api/alarm/position';
+  import { PC_DEFAULT_CONTENT, PHONE_DEFAULT_CONTENT, Platform } from '../center/center.data';
+
+  export default defineComponent({
+    name: 'ConfigurationDrawer',
+    components: { BasicDrawer, BasicForm },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref(true);
+
+      const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+      });
+
+      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        await resetFields();
+        setDrawerProps({ confirmLoading: false });
+        isUpdate.value = !!data?.isUpdate;
+        if (unref(isUpdate)) {
+          if (data.record.thumbnail) {
+            data.record.thumbnail = [
+              { uid: buildUUID(), name: 'name', url: data.record.thumbnail } as FileItem,
+            ];
+          }
+          if (data.record.organizationDTO) {
+            await setFieldsValue(data.record);
+          } else {
+            Reflect.deleteProperty(data.record, 'organizationId');
+            await setFieldsValue(data.record);
+          }
+          if (!data.record?.productAndDevice) return;
+          const productAndDevice = data.record['productAndDevice'];
+          setFieldsValue({
+            productIds: productAndDevice.map((item) => item.profileId),
+          });
+        }
+      });
+
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增模板' : '编辑模板'));
+
+      const getDefaultContent = (platform: Platform) => {
+        if (platform === Platform.PC) {
+          return PC_DEFAULT_CONTENT;
+        }
+        return PHONE_DEFAULT_CONTENT;
+      };
+
+      // 获取产品
+      const getCurrentAllProduct = async (products: string[]) => {
+        const resp = (await getDeviceProfile()) as any;
+        if (!resp) return;
+        const values = resp.map((item) => ({
+          name: item.name,
+          profileId: item.id,
+          deviceType: item.deviceType,
+          transportType: item.transportType,
+        }));
+        return values.filter((item) => products.includes(item.profileId));
+      };
+
+      async function handleSubmit() {
+        try {
+          const { createMessage } = useMessage();
+          const values = await validate();
+          if (!values) return;
+          const reflectProduct = await getCurrentAllProduct(values['productIds']);
+          if (Reflect.has(values, 'thumbnail')) {
+            const file = (values.thumbnail || []).at(0) || {};
+            values.thumbnail = file.url || null;
+          }
+          setDrawerProps({ confirmLoading: true });
+          let saveMessage = '添加成功';
+          let updateMessage = '修改成功';
+          values.defaultContent = getDefaultContent(values.platform);
+          values.productAndDevice = reflectProduct;
+          Reflect.deleteProperty(values, 'productIds');
+          await saveOrUpdateConfigurationCenter(values, unref(isUpdate));
+          closeDrawer();
+          emit('success');
+          createMessage.success(unref(isUpdate) ? updateMessage : saveMessage);
+        } finally {
+          setDrawerProps({ confirmLoading: false });
+        }
+      }
+
+      return {
+        getTitle,
+        registerDrawer,
+        registerForm,
+        handleSubmit,
+      };
+    },
+  });
+</script>

+<template>
+  <div>
+    <PageWrapper dense contentFullHeight contentClass="flex">
+      <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
+      <BasicTable
+        style="flex: auto"
+        :clickToRowSelect="false"
+        @register="registerTable"
+        :searchInfo="searchInfo"
+        class="w-3/4 xl:w-4/5"
+      >
+        <template #platform="{ record }">
+          <Tag :color="record.platform === Platform.PHONE ? 'cyan' : 'blue'">
+            {{ record.platform === Platform.PHONE ? '移动端' : 'PC端' }}
+          </Tag>
+        </template>
+        <template #toolbar>
+          <Authority value="api:yt:configuration:center:post">
+            <a-button type="primary" @click="handleCreateOrEdit(null)"> 新增组态 </a-button>
+          </Authority>
+          <Authority value="api:yt:configuration:center:delete">
+            <Popconfirm
+              title="您确定要批量删除数据"
+              ok-text="确定"
+              cancel-text="取消"
+              @confirm="handleDeleteOrBatchDelete(null)"
+            >
+              <a-button type="primary" color="error" :disabled="hasBatchDelete">
+                批量删除
+              </a-button>
+            </Popconfirm>
+          </Authority>
+        </template>
+        <template #action="{ record }">
+          <TableAction
+            :actions="[
+              {
+                label: '设计',
+                auth: 'api:yt:configuration:center:get_configuration_info:get',
+                icon: 'clarity:note-edit-line',
+                onClick: handleDesign.bind(null, record),
+              },
+              {
+                label: '预览',
+                auth: 'api:yt:configuration:center:get_configuration_info:get',
+                icon: 'ant-design:eye-outlined',
+                onClick: handlePreview.bind(null, record),
+              },
+              {
+                label: '编辑',
+                auth: 'api:yt:configuration:center:update',
+                icon: 'clarity:note-edit-line',
+                onClick: handleCreateOrEdit.bind(null, record),
+              },
+              {
+                label: '删除',
+                auth: 'api:yt:configuration:center:delete',
+                icon: 'ant-design:delete-outlined',
+                color: 'error',
+                popConfirm: {
+                  title: '是否确认删除',
+                  confirm: handleDeleteOrBatchDelete.bind(null, record),
+                },
+              },
+            ]"
+          />
+        </template>
+      </BasicTable>
+    </PageWrapper>
+    <ContactDrawer @register="registerDrawer" @success="handleSuccess" />
+  </div>
+</template>
+
+<script lang="ts">
+  import { defineComponent, reactive, nextTick } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { PageWrapper } from '/@/components/Page';
+  import { useDrawer } from '/@/components/Drawer';
+  import ContactDrawer from './ConfigurationCenterDrawer.vue';
+  import { useResetOrganizationTree, OrganizationIdTree } from '/@/views/common/organizationIdTree';
+  import { searchFormSchema, columns } from './center.data';
+  import { Platform } from '../center/center.data';
+  import {
+    getPage,
+    deleteConfigurationCenter,
+  } from '/@/api/configuration/center/configurationCenter';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { isDevMode } from '/@/utils/env';
+  import { Authority } from '/@/components/Authority';
+  import { Popconfirm } from 'ant-design-vue';
+  import { Tag } from 'ant-design-vue';
+  import { useGlobSetting } from '/@/hooks/setting';
+  export default defineComponent({
+    components: {
+      PageWrapper,
+      OrganizationIdTree,
+      BasicTable,
+      TableAction,
+      ContactDrawer,
+      Authority,
+      Popconfirm,
+      Tag,
+    },
+    setup() {
+      const { configurationPrefix } = useGlobSetting();
+      const isDev = isDevMode();
+      const searchInfo = reactive<Recordable>({});
+      const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+      // 表格hooks
+      const [registerTable, { reload, setProps }] = useTable({
+        title: '组态中心列表',
+        api: getPage,
+        columns,
+        clickToRowSelect: false,
+        formConfig: {
+          labelWidth: 120,
+          schemas: searchFormSchema,
+          resetFunc: resetFn,
+        },
+        showIndexColumn: false,
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        rowKey: 'id',
+        actionColumn: {
+          width: 200,
+          title: '操作',
+          dataIndex: 'action',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+        },
+      });
+      const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+        deleteConfigurationCenter,
+        handleSuccess,
+        setProps
+      );
+      nextTick(() => {
+        setProps(selectionOptions);
+      });
+
+      // 弹框
+      const [registerDrawer, { openDrawer }] = useDrawer();
+
+      // 刷新
+      function handleSuccess() {
+        reload();
+      }
+      // 新增或编辑
+      const handleCreateOrEdit = (record: Recordable | null) => {
+        if (record) {
+          openDrawer(true, {
+            isUpdate: true,
+            record,
+          });
+        } else {
+          openDrawer(true, {
+            isUpdate: false,
+          });
+        }
+      };
+      // 树形选择器
+      const handleSelect = (organizationId: string) => {
+        searchInfo.organizationId = organizationId;
+        handleSuccess();
+      };
+
+      const handlePreview = (record: Recordable | null) => {
+        window.open(
+          `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${
+            record!.id
+          }&lightbox=1`
+        );
+      };
+      const handleDesign = (record: Recordable | null) => {
+        window.open(
+          `${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`
+        );
+      };
+
+      return {
+        Platform,
+        searchInfo,
+        hasBatchDelete,
+        handleCreateOrEdit,
+        handleDeleteOrBatchDelete,
+        handleSelect,
+        handleSuccess,
+        handlePreview,
+        handleDesign,
+        registerTable,
+        registerDrawer,
+        organizationIdTreeRef,
+      };
+    },
+  });
+</script>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+import { createImgPreview } from '/@/components/Preview';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
+import { useComponentRegister } from '/@/components/Form';
+import { OrgTreeSelect } from '../../common/OrgTreeSelect';
+import { getDeviceProfile } from '/@/api/alarm/position';
+import { Platform } from '../center/center.data';
+
+useComponentRegister('OrgTreeSelect', OrgTreeSelect);
+
+export enum ConfigurationTemplatePermission {
+  CREATE = 'api:yt:configuration:template:center:post',
+  UPDATE = 'api:yt:configuration:template:center:update',
+  DELETE = 'api:yt:configuration:template:center:delete',
+  DESIGN = 'api:yt:configuration:template:center:get_configuration_info:design',
+  PREVIEW = 'api:yt:configuration:template:center:get_configuration_info:preview',
+}
+// 表格列数据
+export const columns: BasicColumn[] = [
+  {
+    title: '模板名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '所属组织',
+    dataIndex: 'organizationDTO.name',
+    width: 160,
+  },
+  {
+    title: '平台',
+    dataIndex: 'platform',
+    width: 100,
+    slots: { customRender: 'platform' },
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    width: 200,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 120,
+  },
+  {
+    title: '更新时间',
+    dataIndex: 'updateTime',
+    width: 120,
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    flag: 'ACTION',
+    width: 260,
+    slots: { customRender: 'action' },
+  },
+];
+
+// 查询字段
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '模板名称',
+    component: 'Input',
+    colProps: { span: 8 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入模板名称',
+    },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'thumbnail',
+    label: '缩略图',
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: () => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
+        },
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+        // showUploadList: {
+        //   showDownloadIcon: true,
+        //   showRemoveIcon: true,
+        // },
+      };
+    },
+  },
+
+  {
+    field: 'name',
+    label: '模板名称',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入模板名称',
+      maxLength: 36,
+    },
+  },
+  {
+    field: 'organizationId',
+    label: '所属组织',
+    required: true,
+    component: 'OrgTreeSelect',
+  },
+  {
+    field: 'productIds',
+    label: '产品',
+    component: 'ApiSelect',
+    required: true,
+    componentProps: {
+      api: getDeviceProfile,
+      mode: 'multiple',
+      labelField: 'name',
+      valueField: 'id',
+    },
+  },
+  {
+    field: 'isTemplate',
+    label: '',
+    component: 'Switch',
+    required: true,
+    defaultValue: 1,
+    componentProps: {
+      disabled: true,
+      checkedValue: 1,
+      unCheckedValue: 0,
+    },
+    show: false,
+  },
+  {
+    field: 'platform',
+    label: '平台',
+    required: true,
+    component: 'RadioGroup',
+    defaultValue: Platform.PC,
+    componentProps: {
+      defaultValue: Platform.PC,
+      options: [
+        { label: 'PC端', value: Platform.PC },
+        { label: '移动端', value: Platform.PHONE },
+      ],
+    },
+  },
+  {
+    field: 'remark',
+    label: '备注',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入备注',
+      maxLength: 255,
+    },
+  },
+  {
+    field: 'id',
+    label: '',
+    component: 'Input',
+    show: false,
+    componentProps: {
+      maxLength: 36,
+      placeholder: 'id',
+    },
+  },
+];

+import { Platform } from './center.data';
+import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
+import { useGlobSetting } from '/@/hooks/setting';
+
+export enum ScadaModeEnum {
+  LIGHTBOX = 'lightbox',
+  DESIGN = 'design',
+  SHARE = 'share',
+}
+
+interface ScadaLinkParamsType {
+  configurationId: string;
+  organizationId: string;
+  mode: ScadaModeEnum;
+  platform: Platform;
+  publicId?: string;
+}
+
+const getRandomString = () => Number(Math.random().toString().substring(2)).toString(36);
+
+export const encode = (record: Recordable) => {
+  let hash = JSON.stringify(record);
+  const mixinString = getRandomString()
+    .slice(0, 10)
+    .padEnd(10, getRandomString())
+    .split('')
+    .map((item) => (Math.random() > 0.5 ? item.toUpperCase() : item))
+    .join('');
+  hash = window.btoa(hash);
+  hash = hash.substring(0, 6) + mixinString + hash.substring(6);
+  hash = window.btoa(hash);
+  return hash;
+};
+
+export const createScadaPageLink = (
+  record: ConfigurationCenterItemsModal,
+  mode: ScadaModeEnum = ScadaModeEnum.DESIGN,
+  open = true
+) => {
+  const { configurationPrefix } = useGlobSetting();
+  const params: ScadaLinkParamsType = {
+    configurationId: record.id,
+    organizationId: record.organizationId!,
+    mode: mode,
+    platform: record.platform as Platform,
+  };
+
+  if (mode === ScadaModeEnum.SHARE) {
+    params.publicId = record.publicId;
+  }
+
+  const href = new URL(location.origin);
+  href.pathname = configurationPrefix;
+  href.hash = encode(params);
+  open && window.open(href.href);
+  return href.href;
+};

+<script setup lang="ts">
+  import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
+  import { ReloadOutlined } from '@ant-design/icons-vue';
+  import { computed, onMounted, reactive, ref, unref } from 'vue';
+  import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';
+  import {
+    deleteConfigurationCenter,
+    getPage,
+  } from '/@/api/configuration/center/configurationCenter';
+  import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
+  import { PageWrapper } from '/@/components/Page';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { searchFormSchema, ConfigurationTemplatePermission } from './center.data';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Authority } from '/@/components/Authority';
+  import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import { getBoundingClientRect } from '/@/utils/domUtils';
+  import configurationSrc from '/@/assets/icons/configuration.svg';
+  import { cloneDeep } from 'lodash';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { AuthIcon, CardLayoutButton } from '/@/components/Widget';
+  import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
+  import { useRole } from '/@/hooks/business/useRole';
+  import { Icon } from '/@/components/Icon';
+  import { createScadaPageLink, ScadaModeEnum } from './help';
+  import { Platform } from '../center/center.data';
+
+  const listColumn = ref(5);
+
+  const { createMessage } = useMessage();
+
+  const { isCustomerUser } = useRole();
+
+  const organizationId = ref<Nullable<number>>(null);
+
+  const pagination = reactive<PaginationProps>({
+    size: 'small',
+    showTotal: (total: number) => `共 ${total} 条数据`,
+    current: 1,
+    pageSize: unref(listColumn) * 2,
+    onChange: (page: number) => {
+      pagination.current = page;
+      getListData();
+    },
+  });
+
+  const loading = ref(false);
+
+  const dataSource = ref<ConfigurationCenterItemsModal[]>([]);
+
+  const [registerForm, { getFieldsValue }] = useForm({
+    schemas: searchFormSchema,
+    showAdvancedButton: true,
+    labelWidth: 100,
+    compact: true,
+    resetFunc: () => {
+      resetFn();
+      organizationId.value = null;
+      return getListData();
+    },
+    submitFunc: async () => {
+      const value = getFieldsValue();
+      getListData(value);
+    },
+  });
+
+  async function getListData(value: Recordable = {}) {
+    try {
+      loading.value = true;
+      const pageSize = unref(listColumn) * 2;
+      const { items, total } = await getPage({
+        organizationId: unref(organizationId),
+        ...value,
+        page: pagination.current!,
+        pageSize,
+        isTemplate: 1,
+      });
+
+      dataSource.value = items;
+      Object.assign(pagination, { total, pageSize });
+    } catch (error) {
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  onMounted(() => {
+    getListData();
+  });
+
+  const searchInfo = reactive<Recordable>({});
+  const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
+  const handleSelect = (orgId: number) => {
+    organizationId.value = orgId;
+    getListData();
+  };
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
+
+  const { hasPermission } = usePermission();
+
+  const getPreviewFlag = computed(() => {
+    return hasPermission(ConfigurationTemplatePermission.PREVIEW);
+  });
+
+  const getDesignFlag = computed(() => {
+    return hasPermission(ConfigurationTemplatePermission.DESIGN);
+  });
+
+  const handleCreateOrUpdate = (record?: ConfigurationCenterItemsModal) => {
+    if (record) {
+      openDrawer(true, {
+        isUpdate: true,
+        record: cloneDeep(record),
+      });
+    } else {
+      openDrawer(true, {
+        isUpdate: false,
+      });
+    }
+  };
+
+  const handlePreview = (record: ConfigurationCenterItemsModal) => {
+    if (!unref(getPreviewFlag)) return;
+    createScadaPageLink(record, ScadaModeEnum.LIGHTBOX);
+  };
+
+  const handleDesign = (record: ConfigurationCenterItemsModal) => {
+    if (!unref(getDesignFlag)) return;
+
+    createScadaPageLink(record, ScadaModeEnum.DESIGN);
+  };
+
+  const handleDelete = async (record: ConfigurationCenterItemsModal) => {
+    try {
+      await deleteConfigurationCenter([record.id]);
+      createMessage.success('删除成功');
+      await getListData();
+    } catch (error) {}
+  };
+
+  const handleCardLayoutChange = () => {
+    pagination.current = 1;
+    getListData();
+  };
+
+  const listEl = ref<Nullable<ComponentElRef>>(null);
+
+  onMounted(() => {
+    const clientHeight = document.documentElement.clientHeight;
+    const rect = getBoundingClientRect(unref(listEl)!.$el! as HTMLElement) as DOMRect;
+    // margin-top 24 height 24
+    const paginationHeight = 24 + 24 + 8;
+    // list pading top 8 maring-top 8 extra slot 56
+    const listContainerMarginBottom = 8 + 8 + 56;
+    const listContainerHeight =
+      clientHeight - rect.top - paginationHeight - listContainerMarginBottom;
+    const listContainerEl = (unref(listEl)!.$el as HTMLElement).querySelector(
+      '.ant-spin-container'
+    ) as HTMLElement;
+    listContainerEl &&
+      (listContainerEl.style.height = listContainerHeight + 'px') &&
+      (listContainerEl.style.overflowY = 'auto') &&
+      (listContainerEl.style.overflowX = 'hidden');
+  });
+</script>
+
+<template>
+  <PageWrapper dense contentFullHeight contentClass="flex">
+    <OrganizationIdTree @select="handleSelect" ref="organizationIdTreeRef" />
+    <section class="flex-auto p-4 w-3/4 xl:w-4/5 w-full configuration-list">
+      <div class="flex-auto w-full bg-light-50 dark:bg-dark-900 p-4">
+        <BasicForm @register="registerForm" />
+      </div>
+      <List
+        ref="listEl"
+        :loading="loading"
+        class="flex-auto bg-light-50 dark:bg-dark-900 !p-2 !mt-4"
+        position="bottom"
+        :pagination="pagination"
+        :data-source="dataSource"
+        :grid="{ gutter: 4, column: listColumn }"
+      >
+        <template #header>
+          <div class="flex gap-3 justify-end">
+            <Authority v-if="!isCustomerUser" :value="ConfigurationTemplatePermission.CREATE">
+              <Button type="primary" @click="handleCreateOrUpdate()">新增模板</Button>
+            </Authority>
+            <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
+            <Tooltip title="刷新">
+              <Button type="primary" @click="getListData">
+                <ReloadOutlined />
+              </Button>
+            </Tooltip>
+          </div>
+        </template>
+        <template #renderItem="{ item }">
+          <List.Item>
+            <Card
+              :style="{
+                '--viewType': '#1890ff',
+              }"
+              hoverable
+              class="card-container"
+            >
+              <template #cover>
+                <div
+                  class="img-container h-full w-full !flex justify-center items-center text-center p-1 relative"
+                >
+                  <img
+                    class="w-full h-36"
+                    alt="example"
+                    :src="item.thumbnail || configurationSrc"
+                    @click="handlePreview(item)"
+                  />
+                  <span
+                    class="absolute top-0 left-0 text-light-50 transform -rotate-45 translate-y-1"
+                  >
+                    母版
+                  </span>
+                </div>
+              </template>
+              <template class="ant-card-actions" #actions>
+                <Tooltip v-if="!isCustomerUser" title="设计">
+                  <AuthIcon
+                    :auth="ConfigurationTemplatePermission.DESIGN"
+                    class="!text-lg"
+                    icon="ant-design:edit-outlined"
+                    @click="handleDesign(item)"
+                  />
+                </Tooltip>
+                <AuthDropDown
+                  v-if="!isCustomerUser"
+                  :dropMenuList="[
+                    {
+                      text: '编辑',
+                      auth: ConfigurationTemplatePermission.UPDATE,
+                      icon: 'clarity:note-edit-line',
+                      event: '',
+                      onClick: handleCreateOrUpdate.bind(null, item),
+                    },
+                    {
+                      text: '删除',
+                      auth: ConfigurationTemplatePermission.DELETE,
+                      icon: 'ant-design:delete-outlined',
+                      event: '',
+                      popconfirm: {
+                        title: '是否确认删除操作?',
+                        onConfirm: handleDelete.bind(null, item),
+                      },
+                    },
+                  ]"
+                  :trigger="['hover']"
+                />
+              </template>
+              <Card.Meta>
+                <template #title>
+                  <span class="truncate">{{ item.name }}</span>
+                </template>
+                <template #description>
+                  <div class="truncate h-11">
+                    <div class="truncate flex justify-between items-center">
+                      <div>{{ item.organizationDTO?.name }}</div>
+                      <Icon
+                        :icon="
+                          item.platform === Platform.PC
+                            ? 'ri:computer-line'
+                            : 'clarity:mobile-phone-solid'
+                        "
+                      />
+                    </div>
+                    <div class="truncate">{{ item.remark || '' }} </div>
+                  </div>
+                </template>
+              </Card.Meta>
+            </Card>
+          </List.Item>
+        </template>
+      </List>
+    </section>
+    <ConfigurationCenterDrawer @register="registerDrawer" @success="getListData" />
+  </PageWrapper>
+</template>
+
+<style lang="less" scoped>
+  .configuration-list:deep(.ant-list-header) {
+    border-bottom: none !important;
+  }
+
+  .configuration-list:deep(.ant-list-pagination) {
+    height: 24px;
+  }
+
+  .configuration-list:deep(.ant-card-body) {
+    padding: 16px !important;
+  }
+
+  .configuration-list:deep(.ant-list-empty-text) {
+    @apply w-full h-full flex justify-center items-center;
+  }
+
+  .card-container {
+    // background-color: red;
+    .img-container {
+      border-top-left-radius: 80px;
+      background-color: #fff;
+
+      img {
+        border-top-left-radius: 80px;
+      }
+    }
+  }
+
+  .card-container:deep(.ant-card-cover) {
+    background-color: var(--viewType);
+  }
+</style>

@@ -16,54 +16,33 @@
       </div>
     </div>
     <div class="mt-8">
-      <a-row type="flex" align="top">
-        <a-col
-          :span="
-            method === RequestMethodTypeEnum.WEBSOCKET
-              ? 11
-              : httpType === RequestHttpTypeEnum.POST
-              ? 6
-              : 6
-          "
-        >
+      <div class="flex">
+        <div>
           <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
-              ? 17
-              : 17
-          "
-          style="position: relative"
-          :style="{
-            left:
-              (method === RequestMethodTypeEnum.WEBSOCKET
-                ? 1.5
-                : httpType === RequestHttpTypeEnum.POST
-                ? -0.25
-                : 0) + 'vw',
-          }"
-        >
-          <a-col>
+          <div class="w-90">
+            <AceTypeIsJsEditor
+              :restData="getRestData"
+              @changeAceContent="onHandleAceContent"
+              ref="aceTypeIsJsEditorRef"
+            />
+          </div>
+        </div>
+        <div><a-divider type="vertical" class="divider-color" /></div>
+        <div class="flex flex-col ml-8">
+          <div>
             <p>接口返回数据(res)：</p>
-            <JsonEditor style="height: 35vh" :showBtn="true" ref="jsonEditorRef" />
-          </a-col>
-          <a-col class="mt-3">
+            <div>
+              <JsonEditor class="w-100 h-100" :showBtn="true" ref="jsonEditorRef" />
+            </div>
+          </div>
+          <div class="mt-4">
             <p>过滤器结果：</p>
-            <JsonFilterEditor style="height: 35vh" :showBtn="true" ref="jsonEditorFilterRef" />
-          </a-col>
-        </a-col>
-      </a-row>
+            <div>
+              <JsonFilterEditor class="w-100 h-100" :showBtn="true" ref="jsonEditorFilterRef" />
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -78,7 +57,7 @@
   import AceTypeIsJsEditor from '../../SimpleRequest/components/aceEditor.vue';
   import { Tag } from 'ant-design-vue';
   import { useThrottleFn } from '@vueuse/shared';
-  import { RequestMethodTypeEnum, RequestHttpTypeEnum } from '../../../config/enum';
+  import { RequestMethodTypeEnum } from '../../../config/enum';
 
   const emits = defineEmits(['emitExcute']);
 
@@ -334,9 +313,9 @@
   }
 
   .divider-color {
-    height: 78.5vh;
+    height: 54rem;
     background-color: #e5e7eb;
     position: relative;
-    left: 1.16vw;
+    left: 1rem;
   }
 </style>

@@ -99,7 +99,7 @@ export const descSchema = (emit: EmitType): DescItem[] => {
 export const realTimeDataColumns: BasicColumn[] = [
   {
     title: '键',
-    dataIndex: 'key',
+    dataIndex: 'name',
     width: 100,
   },
   {

@@ -54,6 +54,9 @@
       <TabPane key="task" tab="任务">
         <Task :tbDeviceId="deviceDetail.tbDeviceId" />
       </TabPane>
+      <!-- <TabPane v-if="false" key="videoChannel" tab="视频通道">
+        <VideoChannel :deviceDetail="deviceDetail" :fromId="deviceDetail?.tbDeviceId" />
+      </TabPane> -->
     </Tabs>
   </BasicDrawer>
 </template>
@@ -74,6 +77,7 @@
   import EventManage from '../tabs/EventManage/index.vue';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import Task from '../tabs/Task.vue';
+  // import { VideoChannel } from '../tabs/VideoChannel/index';
 
   export default defineComponent({
     name: 'DeviceModal',
@@ -91,6 +95,7 @@
       CommandRecord,
       EventManage,
       Task,
+      // VideoChannel,
     },
     emits: ['reload', 'register', 'openTbDeviceDetail', 'openGatewayDeviceDetail'],
     setup(_props, { emit }) {
@@ -99,9 +104,13 @@
       const deviceDetailRef = ref();
       const deviceDetail = ref<DeviceRecord>({} as unknown as DeviceRecord);
       const tbDeviceId = ref('');
+
+      const isTransportType = ref<Boolean>(false); //获取产品是不是GB/T 28181
       // 详情回显
       const [register] = useDrawerInner(async (data) => {
-        const { id } = data;
+        const { id, transportType, deviceType } = data || {};
+        isTransportType.value =
+          transportType == 'GB/T28181' && deviceType == 'DIRECT_CONNECTION' ? true : false;
         // 设备详情
         const res = await getDeviceDetail(id);
         deviceDetail.value = res;
@@ -136,6 +145,7 @@
         tbDeviceId,
         handleOpenTbDeviceDetail,
         handleOpenGatewayDevice,
+        isTransportType,
         drawerTitle,
       };
     },

@@ -34,7 +34,7 @@ export const columnSchema: BasicColumn[] = [
   {
     title: '标识符',
     dataIndex: 'eventIdentifier',
-    helpMessage: ['标识符格式为模块标识符: 功能定义标识符'],
+    helpMessage: ['标识符：物模型事件功能定义标识符'],
   },
   {
     title: '事件名称',

@@ -5,7 +5,10 @@
   import { useECharts } from '/@/hooks/web/useECharts';
   import { AggregateDataEnum, selectDeviceAttrSchema } from '/@/views/device/localtion/config.data';
   import { useTimePeriodForm } from '/@/views/device/localtion/cpns/TimePeriodForm';
-  import { defaultSchemas } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
+  import {
+    defaultSchemas,
+    OrderByEnum,
+  } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
   import TimePeriodForm from '/@/views/device/localtion/cpns/TimePeriodForm/TimePeriodForm.vue';
   import { useGridLayout } from '/@/hooks/component/useGridLayout';
   import { ColEx } from '/@/components/Form/src/types';
@@ -96,7 +99,7 @@
     size: 'small',
   });
 
-  const getTableList = async (orderBy?: string) => {
+  const getTableList = async (orderBy?: OrderByEnum) => {
     // 表单验证
     await method.validate();
     const value = method.getFieldsValue();
@@ -121,9 +124,9 @@
     await setColumns(unref(columns));
     if (sorter.field == 'ts') {
       if (sorter.order == 'descend') {
-        getTableList('DESC');
+        getTableList(OrderByEnum.DESC);
       } else {
-        getTableList('ASC');
+        getTableList(OrderByEnum.ASC);
       }
     }
   };
@@ -184,7 +187,6 @@
       if (props.attr) {
         method.setFieldsValue({ keys: props.attr });
         const attrInfo = unref(deviceAttrs).find((item) => item.identifier === props.attr);
-        console.log({ attrInfo });
         if (
           [DataTypeEnum.IS_STRING, DataTypeEnum.IS_STRUCT].includes(
             attrInfo?.detail.dataType.type as unknown as DataTypeEnum
@@ -198,7 +200,7 @@
     } catch (error) {}
   };
 
-  const openHistoryPanel = async (orderBy?: string) => {
+  const openHistoryPanel = async (orderBy = OrderByEnum.ASC) => {
     await nextTick();
     method.updateSchema({
       field: 'keys',

+import { h } from 'vue';
+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { Tag } from 'ant-design-vue';
+import { withInstall } from '/@/utils/index';
+import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
+
+import VideoPlay from './video.vue';
+export const Video = withInstall(VideoPlay);
+
+export const configColumns: BasicColumn[] = [
+  {
+    title: '通道编号',
+    dataIndex: 'channellNumber',
+  },
+  {
+    title: '设备名称',
+    dataIndex: 'deviceName',
+  },
+  {
+    title: '通道名称',
+    dataIndex: 'channelName',
+  },
+  {
+    title: '厂家',
+    dataIndex: 'manufacturer',
+  },
+  {
+    title: '开启音频',
+    dataIndex: 'turnOnAudio',
+    slots: { customRender: 'turnOnAudio' },
+  },
+  {
+    title: '状态',
+    dataIndex: 'state',
+    format: (text) => {
+      return h(
+        Tag,
+        {
+          color: Number(text) === 1 ? 'green' : 'blue',
+        },
+        () => (Number(text) === 1 ? '在线' : '离线')
+      );
+    },
+  },
+  {
+    title: '操作',
+    dataIndex: 'action',
+    slots: { customRender: 'action' },
+  },
+];
+
+export const searchFormSchema: FormSchema[] | any = [
+  {
+    field: 'name',
+    label: '设备名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 255,
+      placeholder: '请输入设备名称',
+    },
+  },
+  {
+    field: 'deviceType',
+    label: '设备类型',
+    component: 'Select',
+    colProps: { span: 6 },
+    componentProps: {
+      options: [
+        { label: '网关设备', value: DeviceTypeEnum.GATEWAY },
+        { label: '直连设备', value: DeviceTypeEnum.DIRECT_CONNECTION },
+        { label: '网关子设备', value: DeviceTypeEnum.SENSOR },
+      ],
+      placeholder: '请选择设备类型',
+    },
+  },
+  // {
+  //   field: 'channelName',
+  //   label: '通道名称',
+  //   component: 'Input',
+  //   colProps: { span: 6 },
+  //   componentProps: {
+  //     maxLength: 255,
+  //     placeholder: '请输入通道名称',
+  //   },
+  // },
+  {
+    field: 'manufacturer',
+    label: '厂家',
+    component: 'Select',
+    colProps: { span: 6 },
+    componentProps: {
+      options: [{}],
+      placeholder: '请选择厂家',
+    },
+  },
+];

+import VideoChannel from './index.vue';
+export { VideoChannel };

+<template>
+  <BasicTable
+    class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700 p-4"
+    @register="registerTable"
+  >
+    <template #turnOnAudio="{ record }">
+      <Switch
+        :checked="record.status === 1"
+        :loading="record.pendingStatus"
+        checkedChildren="开启"
+        unCheckedChildren="关闭"
+        @change="(checked:boolean)=>handleTurnVideo(checked,record)"
+      />
+    </template>
+    <template #action="{ record }">
+      <TableAction
+        :actions="[
+          {
+            label: '播放',
+            auth: 'api:yt:sceneLinkage:get',
+            icon: 'ant-design:play-circle-outlined',
+            onClick: handlePlay.bind(null, record),
+          },
+        ]"
+    /></template>
+  </BasicTable>
+  <VideoModal @register="registerModal" />
+</template>
+
+<script lang="ts" setup>
+  import { configColumns, searchFormSchema } from './config';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { Switch } from 'ant-design-vue';
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
+  import { watch } from 'vue';
+  import VideoModal from './videoModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { onMounted } from 'vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const props = defineProps({
+    fromId: {
+      type: String,
+      default: '',
+    },
+    deviceDetail: {
+      type: Object as PropType<DeviceRecord>,
+      required: true,
+    },
+  });
+
+  watch(
+    () => props,
+    () => {
+      console.log(props, 'props');
+    }
+  );
+
+  const [registerModal, { openModal }] = useModal();
+
+  const [registerTable, { setTableData, setProps, setSelectedRowKeys, reload }] = useTable({
+    // api: deviceCommandRecordGetQuery,
+    columns: configColumns,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    beforeFetch: (params) => {
+      console.log(params);
+    },
+    useSearchForm: true,
+  });
+
+  const handleTurnVideo = async (checked: Boolean, record: Recordable) => {
+    console.log(checked, record, 'record');
+    setProps({
+      loading: true,
+    });
+    setSelectedRowKeys([]);
+    const newStatus = checked ? 1 : 0;
+    const { createMessage } = useMessage();
+    try {
+      if (newStatus) createMessage.success('开启成功');
+      else createMessage.success('关闭成功');
+    } finally {
+      setProps({
+        loading: false,
+      });
+      reload();
+    }
+  };
+
+  const tableList = [
+    {
+      id: '8b66f4fa-88e0-42b2-be33-60652cd2bda1',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2023-03-10 17:16:54',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:25:49',
+      name: 'dasd',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl: 'ws://192.168.10.134:28080/rtp/62020000492000000002_34020000001320000001.live.flv',
+      sn: 's',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      playProtocol: 0,
+      channellNumber: 1,
+    },
+    {
+      id: '9ff408ab-980f-470c-a55c-e4e284ddd34d',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2023-02-22 14:50:13',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:36:25',
+      name: '2',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl:
+        'https://vcsplay.scjtonline.cn:8099/live/HD_d80a740b-2672-4ad1-90e4-52eb71d8c2ef.m3u8?auth_key=1681180571-0-0-dfdb334e5f83838ade5f01f61f910107',
+      sn: '212',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      playProtocol: 0,
+      channellNumber: 1,
+    },
+    {
+      id: 'a6edd8fb-a91a-4a1b-8124-65959206dac4',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2023-02-21 16:39:51',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:33:27',
+      name: 'dasda',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl:
+        'https://vcsplay.scjtonline.cn:8200/live/HD_1b361aa9-5230-48ba-b8be-d1e2c4e9b178.m3u8?auth_key=1681180365-0-0-e77f40e88550091053139f5562d8afa2',
+      brand: 'dasdad',
+      sn: 'adsad',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      playProtocol: 0,
+      channellNumber: 1,
+    },
+    {
+      id: '51b4c0bc-8050-4b37-bdb3-9fe08b14cf86',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2023-02-21 16:37:44',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:56:59',
+      name: '视频',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl:
+        'https://vcsplay.scjtonline.cn:8093/live/HD_c54034ca-4a6d-11eb-8edc-3cd2e55e088c.m3u8?auth_key=1681181808-0-0-d756d9b0426b71482e45b9377958e4dc',
+      brand: '视频厂家',
+      sn: 'DART2143SAD12RE',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      playProtocol: 0,
+      channellNumber: 1,
+    },
+    {
+      id: '8c0e6ed0-3176-4e76-bd8e-92f722f61e79',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2022-12-01 15:55:54',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:59:22',
+      name: '视频',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      avatar: 'https://demo.thingskit.com:9000/yunteng/itbbqOBXIUzWvjq.jpeg',
+      videoUrl: 'http://113.204.115.250:83/openUrl/iFzoWME/live.m3u8',
+      brand: '厂家',
+      sn: 'JDKSA11321',
+      organizationId: '9196fd9a-624a-4891-a8b3-ce588baedf9f',
+      organizationName: '丰田',
+      status: false,
+      channellNumber: 1,
+      accessMode: 0,
+      playProtocol: 0,
+    },
+    {
+      id: 'c30422a7-9498-49a5-96d5-e77f3a2823e3',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2022-12-01 14:42:52',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-03-02 17:12:53',
+      name: '湖南卫视',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl:
+        'http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8',
+      brand: 'BUZHIDAO',
+      sn: 'QKDK123456',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      channellNumber: 1,
+      accessMode: 0,
+      playProtocol: 0,
+    },
+    {
+      id: 'e3253015-b8df-4e8f-ad0c-f634d3fd927e',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2022-11-29 11:19:00',
+      name: '玩具视频播放',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      avatar: 'http://nc.tianzow.com:29000/yunteng/tgygMQmYaaPDPdG.jpg',
+      videoUrl: 'https://ask.dcloud.net.cn/topic.m3u8',
+      brand: '成都厂家',
+      sn: 'TCL1528GOP',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      channellNumber: 1,
+      playProtocol: 0,
+    },
+    {
+      id: '9edc9f73-3a9a-4e4b-9b4c-b955329b99b3',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2022-11-29 11:13:44',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-01-11 10:03:18',
+      name: '视频',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      sn: '7aeb4061f3cf4ba384ed8e1a3027d2a8',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 1,
+      videoPlatformId: '8cc7c20e-693b-48ea-9124-994e0908c83e',
+      streamType: 0,
+      playProtocol: 0,
+      channellNumber: 1,
+      videoPlatformDTO: {
+        enabled: false,
+        host: '113.204.115.250:7120',
+        appKey: '28238690',
+        appSecret: 'F3e3Ffvo9Wyg9jkl8BUS',
+        ssl: 1,
+      },
+    },
+    {
+      id: '9d6675ad-07ed-45ae-bb4a-457000e164f8',
+      creator: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      createTime: '2022-11-21 11:49:59',
+      updater: '694a8f7f-f7ed-4a9c-af89-a3d18fc3663e',
+      updateTime: '2023-04-11 10:53:27',
+      name: '新视频',
+      enabled: false,
+      tenantId: '0277ca80-693d-11ed-9e12-e5edad4f7148',
+      videoUrl: 'http://www.w3school.com.cn/example/html5/mov_bbb.mp4',
+      brand: '1111',
+      sn: 'XYZ',
+      organizationId: '27ef2a83-6f1f-4e33-824b-80afac684699',
+      organizationName: '车车组织',
+      status: false,
+      accessMode: 0,
+      channellNumber: 1,
+      playProtocol: 0,
+    },
+  ];
+
+  onMounted(() => {
+    setTableData(tableList);
+  });
+
+  const handlePlay = (record: Recordable) => {
+    console.log(record);
+    openModal(true, {
+      record,
+    });
+  };
+</script>

+<script lang="ts" setup>
+  import { isNumber } from 'lodash';
+  import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
+  import 'video.js/dist/video-js.css';
+  import { Tooltip } from 'ant-design-vue';
+  import { computed, CSSProperties, onMounted, onUnmounted, ref, unref } from 'vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
+  import { isShareMode } from '/@/views/sys/share/hook';
+  import 'videojs-flvjs-es6';
+  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+  import {
+    CaretUpOutlined,
+    CaretRightOutlined,
+    PauseOutlined,
+    CaretDownOutlined,
+    CaretLeftOutlined,
+    ZoomInOutlined,
+    ZoomOutOutlined,
+  } from '@ant-design/icons-vue';
+  import { Button } from 'ant-design-vue';
+  import { nextTick } from 'vue';
+  import { controlling } from '/@/api/camera/cameraManager';
+
+  const { prefixCls } = useDesign('basic-video-play');
+
+  const props = defineProps<{
+    options?: VideoJsPlayerOptions;
+    withToken?: boolean;
+  }>();
+
+  const emit = defineEmits<{
+    (event: 'ready', instance?: Nullable<VideoJsPlayer>): void;
+    (event: 'onUnmounted'): void;
+  }>();
+
+  const videoPlayEl = ref<HTMLVideoElement>();
+
+  const videoPlayInstance = ref<Nullable<VideoJsPlayer>>();
+
+  const getOptions = computed(() => {
+    const { options, withToken } = props;
+
+    const defaultOptions: VideoJsPlayerOptions & Recordable = {
+      language: 'zh',
+      muted: true,
+      liveui: true,
+      controls: true,
+      techOrder: ['html5', 'flvjs'],
+      flvjs: {
+        mediaDataSource: {
+          isLive: true,
+          cors: true,
+          hasAudio: false,
+          withCredentials: false,
+        },
+        config: {
+          headers: {
+            ...(withToken
+              ? {
+                  'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
+                }
+              : {}),
+          },
+          autoCleanupSourceBuffer: true,
+        },
+      },
+    };
+    return videoJs.mergeOptions(defaultOptions, options);
+  });
+
+  const getWidthHeight = computed(() => {
+    let { width = 300, height = 150 } = unref(getOptions);
+    width = isNumber(width) ? (`${width}px` as unknown as number) : width;
+    height = isNumber(height) ? (`${height}px` as unknown as number) : height;
+    return { width, height } as CSSProperties;
+  });
+
+  const init = () => {
+    if (unref(videoPlayInstance)) unref(videoPlayInstance)?.dispose();
+    videoPlayInstance.value = videoJs(unref(videoPlayEl)!, unref(getOptions), () => {
+      emit('ready', unref(videoPlayInstance));
+    });
+  };
+
+  //播放/暂停
+  const handleClick = () => {
+    unref(isPlay) && unref(videoPlayInstance)?.pause();
+    !unref(isPlay) && unref(videoPlayInstance)?.play();
+  };
+
+  const getId = () => {
+    const { options } = props || {};
+    const { sources }: any = options || {};
+    return sources?.[0]?.id;
+  };
+
+  const handleControl = (action: number, direction: string) => {
+    const organizationId = getId();
+    controlling({ cameralndexCode: organizationId, action, command: direction });
+  };
+
+  const isPlay = ref<Boolean | null | undefined>(false);
+
+  onMounted(async () => {
+    init();
+    await nextTick();
+    // isPlay.value = unref(videoPlayInstance)?.paused();
+    videoPlayInstance.value?.on('loadedmetadata', () => {});
+    videoPlayInstance.value?.on('waiting', () => {
+      isPlay.value = false;
+    });
+    videoPlayInstance.value?.on('play', () => {
+      isPlay.value = true;
+    });
+    videoPlayInstance.value?.on('playing', () => {
+      isPlay.value = true;
+    });
+    videoPlayInstance.value?.on('pause', () => {
+      isPlay.value = false;
+    });
+    videoPlayInstance.value?.on('ended', () => {
+      isPlay.value = false;
+    });
+  });
+
+  //长按开始
+  const moveStart = (action) => {
+    handleControl(0, action);
+  };
+  // 长按结束
+  const moveStop = (action) => {
+    handleControl(1, action);
+  };
+
+  onUnmounted(() => {
+    unref(videoPlayInstance)?.dispose();
+    videoPlayInstance.value = null;
+    emit('onUnmounted');
+  });
+
+  defineExpose({
+    reloadPlayer: init,
+    getInstance: () => unref(videoPlayInstance),
+  });
+</script>
+
+<template>
+  <div :class="prefixCls" class="!w-full h-full flex" :style="getWidthHeight">
+    <video
+      ref="videoPlayEl"
+      class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause !w-8/10 !h-full"
+      muted
+    >
+    </video>
+
+    <div class="!w-2/10 bg-white flex items-center flex-col">
+      <Tooltip>
+        <template #title
+          >长按按钮调用API，由于视频流媒体提供的流，有一定时延，请耐心等待。</template
+        >
+        <label class="validate-dot">云台控制</label>
+        <QuestionCircleOutlined :style="{ fontSize: '14px', marginLeft: '5px' }" />
+      </Tooltip>
+
+      <div class="home mt-5">
+        <Button class="front-sty-center child center" shape="circle" @click="handleClick()">
+          <PauseOutlined v-if="isPlay" class="child-icon" style="color: #fffbfb" />
+          <CaretRightOutlined v-else class="child-icon" style="color: #fffbfb" />
+        </Button>
+
+        <div class="box">
+          <div>
+            <Button
+              class="left-top in-block"
+              @mousedown="moveStart('up')"
+              @mouseup="moveStop('up')"
+            >
+              <CaretUpOutlined class="icon-rotate child-icon" />
+            </Button>
+            <Button
+              class="right-top in-block"
+              @mousedown="moveStart('RIGHT')"
+              @mouseup="moveStop('RIGHT')"
+            >
+              <CaretRightOutlined class="icon-rotate child-icon" />
+            </Button>
+          </div>
+          <div>
+            <Button
+              class="left-bottom in-block"
+              @mousedown="moveStart('LEFT')"
+              @mouseup="moveStop('LEFT')"
+            >
+              <CaretLeftOutlined class="icon-rotate child-icon" />
+            </Button>
+            <Button
+              class="right-bottom in-block"
+              @mousedown="moveStart('DOWN')"
+              @mouseup="moveStop('DOWN')"
+            >
+              <CaretDownOutlined class="icon-rotate child-icon" />
+            </Button>
+          </div>
+
+          <Button class="circle" @click="handleClick" />
+        </div>
+      </div>
+      <div class="flex justify-center mt-8">
+        <Button
+          class="button-icon"
+          @mousedown="moveStart('ZOOM_IN')"
+          @mouseup="moveStop('ZOOM_IN')"
+          style="border-radius: :50%;"
+        >
+          <ZoomInOutlined style="color: #315a9c; font-size: 1.5rem" />
+        </Button>
+        <Button
+          class="ml-10 button-icon"
+          @mousedown="moveStart('ZOOM_OUT')"
+          @mouseup="moveStop('ZOOM_OUT')"
+          style="border-radius: :50%;"
+        >
+          <ZoomOutOutlined style="color: #315a9c; font-size: 1.5rem" />
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-basic-video-play';
+
+  .@{prefix-cls} {
+    .vjs-error-display {
+      .vjs-modal-dialog-content::after {
+        content: '无法加载视频,原因可能是服务器或网络故障,也可能是格式不支持.';
+      }
+    }
+  }
+
+  .child {
+    position: absolute;
+    width: 3rem;
+    height: 3rem;
+    display: flex;
+    justify-content: center;
+    background: #e2dede;
+    align-items: center;
+    border: none;
+  }
+
+  .child-icon {
+    font-size: 1.5rem;
+    color: #fffbfb;
+  }
+
+  .button-icon {
+    width: 3rem;
+    height: 3rem;
+    background: #f5f5f5;
+    border: none;
+    border-radius: 50% !important;
+  }
+
+  .center {
+    top: 50%;
+    left: 50%;
+    width: 4rem;
+    height: 4rem;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    background: #5586d4;
+  }
+
+  .home {
+    position: relative;
+    width: 10rem;
+    height: 10rem;
+  }
+
+  .box {
+    transform: rotateZ(45deg);
+    width: 10rem;
+    height: 10rem;
+  }
+
+  .icon-rotate {
+    transform: rotate(315deg);
+  }
+
+  .front-sty-center {
+    position: absolute;
+    top: 50%;
+    z-index: 9999;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .circle {
+    display: inline-block;
+    border-radius: 50%;
+    background-color: #5586d4;
+    width: 4rem;
+    height: 4rem;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .in-block {
+    display: inline-block;
+    position: relative;
+  }
+
+  .left-top {
+    width: 5rem;
+    height: 5rem;
+    border-radius: 5rem 0 0 0;
+    background-color: #e2dede;
+  }
+
+  .right-top {
+    width: 5rem;
+    height: 5rem;
+    border-radius: 0 5rem 0 0;
+    background-color: #e2dede;
+  }
+
+  .left-bottom {
+    width: 5rem;
+    height: 5rem;
+    border-radius: 0 0 0 5rem;
+    background-color: #e2dede;
+  }
+
+  .right-bottom {
+    width: 5rem;
+    height: 5rem;
+    border-radius: 0 0 5rem 0;
+    background-color: #e2dede;
+  }
+</style>

+<template>
+  <div>
+    <BasicModal
+      v-bind="$attrs"
+      width="60rem"
+      destroyOnClose
+      :height="heightNum"
+      @register="register"
+      title="视频预览"
+      :showOkBtn="false"
+      @cancel="handleCancel"
+    >
+      <div class="flex items-center justify-center w-full h-full min-h-96 video-container">
+        <Video
+          v-if="showVideo"
+          :options="(options as any)"
+          :withToken="withToken"
+          @on-unmounted="handleCloseFlvPlayUrl"
+        />
+      </div>
+    </BasicModal>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref, reactive, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import type { StreamingManageRecord, CameraModel } from '/@/api/camera/model/cameraModel';
+  import { getVideoTypeByUrl } from '/@/components/Video';
+  import { closeFlvPlay, getFlvPlayUrl, getStreamingPlayUrl } from '/@/api/camera/cameraManager';
+  import { isRtspProtocol } from '/@/components/Video/src/utils';
+  import { VideoJsPlayerOptions } from 'video.js';
+  import { useFingerprint } from '/@/utils/useFingerprint';
+  import { GetResult } from '@fingerprintjs/fingerprintjs';
+  import { AccessMode } from '/@/views/camera/manage/config.data';
+  import { Video } from './config';
+
+  const heightNum = ref(800);
+  const showVideo = ref(false);
+
+  const playUrl = ref('');
+
+  const withToken = ref(false);
+
+  const fingerprintResult = ref<Nullable<GetResult>>(null);
+
+  const options = reactive<VideoJsPlayerOptions>({
+    width: '100%' as unknown as number,
+    height: 384 as unknown as number,
+    autoplay: true,
+  });
+
+  const setSources = (url: string, fingerprintResult: GetResult, id) => {
+    const flag = isRtspProtocol(url);
+    options.sources = [
+      {
+        src: flag ? getFlvPlayUrl(url, fingerprintResult.visitorId) : url,
+        type: getVideoTypeByUrl(url),
+        id,
+      },
+    ];
+  };
+
+  const { getResult } = useFingerprint();
+  const [register] = useModalInner(
+    async (data: { record: CameraModel | StreamingManageRecord }) => {
+      const { record } = data;
+      const result = await getResult();
+      fingerprintResult.value = result;
+      if (record.accessMode === AccessMode.ManuallyEnter) {
+        if ((record as CameraModel).videoUrl) {
+          if (isRtspProtocol((record as CameraModel).videoUrl)) {
+            playUrl.value = (record as CameraModel).videoUrl;
+            closeFlvPlay(unref(playUrl), result.visitorId);
+            withToken.value = true;
+          }
+          setSources((record as CameraModel).videoUrl, result, record.id);
+        }
+      } else {
+        try {
+          const { data: { url } = { url: '' } } = await getStreamingPlayUrl(record.id!);
+          setSources(url, result, record.id);
+        } catch (error) {}
+      }
+      showVideo.value = true;
+    }
+  );
+
+  const handleCloseFlvPlayUrl = () => {
+    if (isRtspProtocol(unref(playUrl))) {
+      closeFlvPlay(unref(playUrl)!, unref(fingerprintResult)!.visitorId!);
+    }
+  };
+
+  const handleCancel = () => {
+    showVideo.value = false;
+    withToken.value = false;
+  };
+</script>
+
+<style lang="less" scoped>
+  .video-container:deep(.vben-basic-video-play) {
+    min-height: 13rem;
+  }
+
+  .video-container:deep(.video-js) {
+    min-height: 13rem;
+  }
+</style>

@@ -32,13 +32,14 @@ export function useHistoryData() {
   };
 
   function getSearchParams(value: Partial<Record<SchemaFiled, string>>) {
-    const { startTs, endTs, interval, agg, limit, keys, way, deviceId } = value;
+    const { startTs, endTs, interval, agg, limit, keys, way, deviceId, orderBy } = value;
     const basicRecord = {
       entityId: deviceId,
       keys: keys ? keys : unref(getDeviceKeys).join(),
       interval,
       agg,
       limit,
+      orderBy,
     };
     if (way === QueryWay.LATEST) {
       return Object.assign(basicRecord, {

@@ -175,7 +175,10 @@
                     label: '取消收藏',
                     auth: 'api:yt:device:online:record',
                     icon: 'ant-design:heart-outlined',
-                    onClick: handelCollect.bind(null, record),
+                    popConfirm: {
+                      title: '是否取消收藏',
+                      confirm: handelCollect.bind(null, record),
+                    },
                   },
               {
                 label: '删除',
@@ -305,6 +308,7 @@
         columns,
         beforeFetch: (params) => {
           const { deviceProfileId } = params;
+          if (!deviceProfileId) return;
           const obj = {
             ...params,
             ...{
@@ -368,10 +372,13 @@
       }
 
       function handleDetail(record: Recordable) {
-        const { id, tbDeviceId } = record;
+        const { id, tbDeviceId, deviceProfile, deviceType } = record;
+        const { transportType } = deviceProfile || {};
         openDrawer(true, {
           id,
           tbDeviceId,
+          transportType,
+          deviceType,
         });
       }
 

@@ -5,6 +5,7 @@ import { copyTransFun } from '/@/utils/fnUtils';
 import { getDeviceDataKeys } from '/@/api/alarm/position';
 import { deviceProfile } from '/@/api/device/deviceManager';
 import { EChartsOption } from 'echarts';
+import { OrderByEnum, OrderByNameEnum, SchemaFiled } from './cpns/TimePeriodForm/config';
 
 export enum AggregateDataEnum {
   MIN = 'MIN',
@@ -487,6 +488,18 @@ export const selectDeviceAttrSchema: FormSchema[] = [
       getPopupContainer: () => document.body,
     },
   },
+  {
+    field: SchemaFiled.ORDER_BY,
+    label: '数据排序',
+    component: 'Select',
+    defaultValue: OrderByEnum.ASC,
+    componentProps: {
+      options: Object.values(OrderByEnum).map((value) => ({
+        value,
+        label: OrderByNameEnum[value],
+      })),
+    },
+  },
 ];
 
 export const eChartOptions = (series: EChartsOption['series'], keys: string[]): EChartsOption => {

@@ -21,6 +21,16 @@ export enum SchemaFiled {
   ORDER_BY = 'orderBy',
 }
 
+export enum OrderByEnum {
+  DESC = 'DESC',
+  ASC = 'ASC',
+}
+
+export enum OrderByNameEnum {
+  DESC = '降序',
+  ASC = '升序',
+}
+
 export enum AggregateDataEnum {
   MIN = 'MIN',
   MAX = 'MAX',
@@ -106,7 +116,7 @@ export const defaultSchemas: FormSchema[] = [
         getPopupContainer: () => document.body,
       };
     },
-    colProps: useGridLayout(2, 2, 2, 2, 2, 2) as unknown as ColEx,
+    colProps: useGridLayout(1.5, 1.5, 1.5, 1.5, 1.5, 1.5) as unknown as ColEx,
   },
   {
     field: SchemaFiled.AGG,

@@ -260,6 +260,7 @@
         },
         beforeFetch: (params) => {
           const { deviceProfileId } = params;
+          if (!deviceProfileId) return;
           const deviceProfileIds = [deviceProfileId];
           const obj = {
             ...params,

@@ -145,6 +145,7 @@
     }
   };
   const handleStepNext = (e, data) => {
+    // const { deviceType } = unref(DevConStRef)?.getFieldsValue() || {};
     if (e) {
       current.value++;
       unref(isUpdate)

@@ -15,19 +15,20 @@
     ifShowBtn: { type: Boolean, default: true },
   });
 
-  const [register, { validate, setFieldsValue, resetFields, updateSchema }] = useForm({
-    labelWidth: 100,
-    schemas: step1Schemas,
-    actionColOptions: {
-      span: 14,
-    },
-    showResetButton: false,
-    showActionButtonGroup: props.ifShowBtn ? true : false,
-    submitButtonOptions: {
-      text: '下一步',
-    },
-    submitFunc: customSubmitFunc,
-  });
+  const [register, { validate, setFieldsValue, resetFields, updateSchema, getFieldsValue }] =
+    useForm({
+      labelWidth: 100,
+      schemas: step1Schemas,
+      actionColOptions: {
+        span: 14,
+      },
+      showResetButton: false,
+      showActionButtonGroup: props.ifShowBtn ? true : false,
+      submitButtonOptions: {
+        text: '下一步',
+      },
+      submitFunc: customSubmitFunc,
+    });
   const editOrAddNameStatus = (nameStatus) =>
     updateSchema({
       field: 'name',
@@ -87,6 +88,7 @@
     resetFormData,
     getFormData,
     editOrAddDeviceTypeStatus,
+    getFieldsValue,
     setFieldsdefaultRuleChainId,
   });
 </script>

 <template>
   <div
     class="step2-style"
-    :style="[isMqttType == 'DEFAULT' ? { minHeight: 0 + 'px' } : { minHeight: 800 + 'px' }]"
+    :style="[
+      isMqttType == 'DEFAULT' || isMqttType == 'GB/T28181'
+        ? { minHeight: 0 + 'px' }
+        : { minHeight: 800 + 'px' },
+    ]"
   >
     <div
       :style="[
@@ -138,6 +142,7 @@
     const getSnmpVal = await snmpRef.value?.getFormData();
     const getTcpVal = await tcpRef.value?.getFormData();
     step2Data.transportConfiguration = {
+      // type: isMqttType.value,
       ...getMqttVal,
       ...getCoapVal,
       ...getLwm2mVal,
@@ -149,18 +154,25 @@
   };
 
   const editOrAddTransportTypeStatus = (status: boolean) => {
+    const options = [
+      { label: '默认', value: 'DEFAULT' },
+      { label: 'MQTT', value: 'MQTT' },
+      { label: 'CoAP', value: 'COAP' },
+      // { label: 'LWM2M', value: 'LWM2M' },
+      // { label: 'SNMP', value: 'SNMP' },
+      { label: 'TCP/UDP', value: 'TCP' },
+    ];
+    // if (deviceType == 'DIRECT_CONNECTION') {
+    // options.push({ label: 'GB/T 28181', value: 'GB/T28181' });//暂时隐藏 GBT 28181写完放出来
+    // }
+    // if (deviceType != 'DIRECT_CONNECTION' && isMqttType.value == 'GB/T28181') {
+    //   setFieldsValue({ transportType: null });
+    // }
     updateSchema({
       field: 'transportType',
       componentProps: {
         disabled: status,
-        options: [
-          { label: '默认', value: 'DEFAULT' },
-          { label: 'MQTT', value: 'MQTT' },
-          { label: 'CoAP', value: 'COAP' },
-          // { label: 'LWM2M', value: 'LWM2M' },
-          // { label: 'SNMP', value: 'SNMP' },
-          { label: 'TCP/UDP', value: 'TCP' },
-        ],
+        options,
         onChange(e) {
           isMqttType.value = e;
         },

@@ -19,7 +19,7 @@
 
   const [register, { validate, resetFields, setFieldsValue, setProps }] = useForm({
     labelWidth: 100,
-    schemas: formSchemas(false, props.transportType === TransportTypeEnum.TCP),
+    schemas: formSchemas(false, false, props.transportType === TransportTypeEnum.TCP),
     actionColOptions: {
       span: 14,
     },

@@ -143,6 +143,9 @@ export const serviceSchemas = (tcpDeviceFlag: boolean): FormSchema[] => {
       rules: [{ message: '输入参数为必填项', required: true, type: 'array' }],
       ifShow: !tcpDeviceFlag,
       colProps: { span: 24 },
+      componentProps: {
+        hiddenAccessMode: true,
+      },
     },
     {
       field: FormField.OUTPUT_PARAM,
@@ -151,6 +154,9 @@ export const serviceSchemas = (tcpDeviceFlag: boolean): FormSchema[] => {
       valueField: 'value',
       changeEvent: 'update:value',
       colProps: { span: 24 },
+      componentProps: {
+        hiddenAccessMode: true,
+      },
     },
     {
       field: FormField.REFARK,
@@ -218,6 +224,9 @@ export const eventSchemas: FormSchema[] = [
     valueField: 'value',
     changeEvent: 'update:value',
     colProps: { span: 24 },
+    componentProps: {
+      hiddenAccessMode: true,
+    },
   },
   {
     field: FormField.REFARK,

@@ -12,6 +12,8 @@
   import { sendSms } from '/@/api/message/template';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { phoneRule } from '/@/utils/rules';
+  import { PlateFormTypeEnum } from './template.data';
+
   const schemas: FormSchema[] = [
     {
       field: 'id',
@@ -142,7 +144,53 @@
           field: 'params',
           componentProps: {
             placeholder:
-              platformType.value !== 'TENCENT_CLOUD' ? '示例：{"code":"1234"}' : '示例：["123456"]',
+              platformType.value !== PlateFormTypeEnum.tencent_cound
+                ? '示例：{"code":"1234"}'
+                : '示例：["123456"]',
+          },
+          dynamicRules: () => {
+            return [
+              {
+                required: true,
+                validator: (_, value) => {
+                  try {
+                    if (typeof value == 'object') {
+                      return Promise.resolve();
+                    } else {
+                      if (platformType.value !== PlateFormTypeEnum.tencent_cound) {
+                        // 阿里云不能是以[]开头
+                        if (
+                          Object.prototype.toString.call(JSON.parse(value)) === '[object Array]'
+                        ) {
+                          return Promise.reject('请输入JSON格式例如{"code":"1234"}');
+                        }
+                      } else {
+                        // 腾讯云只能是[]开头
+                        if (
+                          Object.prototype.toString.call(JSON.parse(value)) !== '[object Array]'
+                        ) {
+                          return Promise.reject('请输入这种格式["123456"]');
+                        }
+                      }
+                      if (typeof JSON.parse(value) == 'object') {
+                        return Promise.resolve();
+                      }
+                      return Promise.reject(
+                        platformType.value !== PlateFormTypeEnum.tencent_cound
+                          ? '请输入JSON格式例如{"code":"1234"}'
+                          : '请输入这种格式["123456"]'
+                      );
+                    }
+                  } catch {
+                    return Promise.reject(
+                      platformType.value !== PlateFormTypeEnum.tencent_cound
+                        ? '请输入JSON格式例如{"code":"1234"}'
+                        : '请输入这种格式["123456"]'
+                    );
+                  }
+                },
+              },
+            ];
           },
         });
         await resetFields();
@@ -154,7 +202,7 @@
       async function handleOK() {
         let smsParams: any = null;
         const values = await validate();
-        if (platformType.value === 'TENCENT_CLOUD') {
+        if (platformType.value === PlateFormTypeEnum.tencent_cound) {
           //腾讯云发送格式 将字符串转为数组
           smsParams = {
             tencent_param: JSON.parse(Reflect.get(values, 'params')),

@@ -4,6 +4,11 @@ import { findDictItemByCode } from '/@/api/system/dict';
 import { findMessageConfig } from '/@/api/message/config';
 import { isMessage } from '/@/views/message/config/config.data';
 
+export enum PlateFormTypeEnum {
+  ali_cound = 'ALI_CLOUD',
+  tencent_cound = 'TENCENT_CLOUD',
+}
+
 export const columns: BasicColumn[] = [
   {
     title: '模板名称',

@@ -32,13 +32,13 @@
     setFieldsValue(value);
   };
 
-  // 禁用表单
+  // ½ûÓÃ±íµ¥
   const setDisabledProps = (value) => {
     setProps(value);
     updateSchema({ field: 'otherProperties', componentProps: { disabled: true } });
   };
 
-  // 取消禁用
+  // È¡Ïû½ûÓÃ
   const setCancelDisabled = () => {
     updateSchema({ field: 'otherProperties', componentProps: { disabled: false } });
   };

@@ -86,12 +86,12 @@ export enum OriginatorTelemetryFieldsEnum {
 }
 
 export enum OriginatorTelemetryFieldsNameEnum {
-  LATEST_TS_KEY_NAMES = 'Latest timeseries',
+  LATEST_TS_KEY_NAMES = 'Timeseries key',
   AGGREGATION = '数据聚合功能',
   FETCH_MODE = 'Fetch Mode',
   ORDER_BY = 'Order by',
   LIMIT = 'Limit',
-  USE_METADATA_INTERVAL_PATTERNS = 'useMetadataIntervalPatterns',
+  USE_METADATA_INTERVAL_PATTERNS = 'Use interval patterns',
   START_INTERVAL = 'Start Interval',
   START_INTERVAL_TIME_UNIT = 'Start Interval Time Unit',
   END_INTERVAL = 'End Interval',

@@ -13,6 +13,7 @@ export const formSchemas: FormSchema[] = [
       javaScriptEditorProps: {
         functionName: 'Details',
         paramsName: ['msg', 'metadata', 'msgType'],
+        scriptType: 'json',
       },
       buttonName: 'Test details function',
     },

@@ -36,6 +36,7 @@ export const formSchemas: FormSchema[] = [
     componentProps: {
       javaScriptEditorProps: {
         functionName: 'Details',
+        scriptType: 'json',
         paramsName: ['msg', 'metadata', 'msgType'],
       },
       buttonName: 'Test details function',

@@ -60,6 +60,7 @@ export const formSchemas: FormSchema[] = [
     componentProps: {
       javaScriptEditorProps: {
         functionName: 'Generate',
+        scriptType: 'generate',
         paramsName: ['prevMsg', 'prevMetadata', 'prevMsgType'],
       },
       buttonName: 'Test generator function',

@@ -14,6 +14,7 @@ export const formSchemas: FormSchema[] = [
     componentProps: {
       javaScriptEditorProps: {
         functionName: 'ToString',
+        scriptType: 'string',
         paramsName: ['msg', 'metadata', 'msgType'],
       },
       buttonName: 'Test to string function',

@@ -73,6 +73,10 @@ export const formSchemas: FormSchema[] = [
       getPopupContainer: () => document.body,
       placeholder: `请选择${RestApiCallFieldsEnum.PROXY_SCHEME}`,
     },
+    ifShow: ({ model }) => {
+      const ifShowField = model[RestApiCallFieldsEnum.ENABLE_PROXY];
+      return ifShowField && !model[RestApiCallFieldsEnum.USE_SYSTEM_PROXY_PROPERTIES];
+    },
   },
   {
     field: RestApiCallFieldsEnum.PROXY_HOST,
@@ -83,6 +87,10 @@ export const formSchemas: FormSchema[] = [
     componentProps: {
       placeholder: `请输入${RestApiCallFieldsNameEnum.PROXY_HOST}`,
     },
+    ifShow: ({ model }) => {
+      const ifShowField = model[RestApiCallFieldsEnum.ENABLE_PROXY];
+      return ifShowField && !model[RestApiCallFieldsEnum.USE_SYSTEM_PROXY_PROPERTIES];
+    },
   },
   {
     field: RestApiCallFieldsEnum.PROXY_PORT,
@@ -93,6 +101,10 @@ export const formSchemas: FormSchema[] = [
     componentProps: {
       placeholder: `请输入${RestApiCallFieldsNameEnum.PROXY_HOST}`,
     },
+    ifShow: ({ model }) => {
+      const ifShowField = model[RestApiCallFieldsEnum.ENABLE_PROXY];
+      return ifShowField && !model[RestApiCallFieldsEnum.USE_SYSTEM_PROXY_PROPERTIES];
+    },
   },
   {
     field: RestApiCallFieldsEnum.PROXY_USER,
@@ -101,6 +113,10 @@ export const formSchemas: FormSchema[] = [
     componentProps: {
       placeholder: `请输入${RestApiCallFieldsNameEnum.PROXY_USER}`,
     },
+    ifShow: ({ model }) => {
+      const ifShowField = model[RestApiCallFieldsEnum.ENABLE_PROXY];
+      return ifShowField && !model[RestApiCallFieldsEnum.USE_SYSTEM_PROXY_PROPERTIES];
+    },
   },
   {
     field: RestApiCallFieldsEnum.PROXY_PASSWORD,
@@ -109,6 +125,10 @@ export const formSchemas: FormSchema[] = [
     componentProps: {
       placeholder: `请输入${RestApiCallFieldsNameEnum.PROXY_PASSWORD}`,
     },
+    ifShow: ({ model }) => {
+      const ifShowField = model[RestApiCallFieldsEnum.ENABLE_PROXY];
+      return ifShowField && !model[RestApiCallFieldsEnum.USE_SYSTEM_PROXY_PROPERTIES];
+    },
   },
   {
     field: RestApiCallFieldsEnum.READ_TIMEOUT_MS,

@@ -15,6 +15,7 @@ export const formSchemas: FormSchema[] = [
       javaScriptEditorProps: {
         functionName: 'Transform',
         paramsName: ['msg', 'metadata', 'msgType'],
+        scriptType: 'update',
       },
       buttonName: 'Test transformer function',
     },

 <script lang="ts" setup>
   import { Card, Select, Tag, Form, Button } from 'ant-design-vue';
-  import { ref, toRaw, unref, watch } from 'vue';
+  import { nextTick, ref, toRaw, unref, watch } from 'vue';
   import { MessageTypesEnum, MessageTypesNameEnum } from '../../../enum/form';
   import { JSONEditor } from '/@/components/CodeEditor';
   import { Icon } from '/@/components/Icon';
@@ -8,6 +8,8 @@
   import { useJsonParse } from '/@/hooks/business/useJsonParse';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { AttributeConfiguration } from '../AttributeConfiguration';
+  import { testScript } from '/@/api/ruleChainDesigner';
+  import { isString } from '/@/utils/is';
 
   interface Value {
     msg: Recordable;
@@ -24,6 +26,7 @@
     {
       javaScriptEditorProps: () => ({
         functionName: 'Filter',
+        scriptType: 'filter',
         paramsName: ['msg', 'metadata', 'msgType'],
       }),
     }
@@ -35,6 +38,8 @@
     (eventName: 'save', value: Value): void;
   }>();
 
+  const jsonEditor = ref<InstanceType<typeof JSONEditor>>();
+
   const messageType = ref(MessageTypesEnum.POST_TELEMETRY_REQUEST);
   const messageTypeOptions = Object.keys(MessageTypesEnum).map((value) => ({
     label: MessageTypesNameEnum[value],
@@ -74,18 +79,34 @@
     const msgType = unref(messageType);
     const javascriptFunction = unref(scriptContent);
 
-    return { msg, msgType, metadata: toRaw(unref(metadata)), javascriptFunction };
+    return {
+      msg,
+      msgType,
+      metadata: toRaw(unref(metadata)),
+      javascriptFunction,
+    };
   };
 
-  function executeTestScript() {
+  async function executeTestScript() {
     try {
       const { javaScriptEditorProps } = props;
-      const { paramsName } = javaScriptEditorProps;
-      const fn = new Function(...(paramsName || [])!, unref(scriptContent));
-      const value = getValue();
-      const executeParams = paramsName!.map((key) => value[key]);
+      const { paramsName, scriptType } = javaScriptEditorProps;
+      const { msg, msgType, metadata } = getValue();
+
+      const { output, error } = await testScript({
+        argNames: paramsName,
+        scriptType,
+        script: unref(scriptContent),
+        msg: isString(msg) ? msg : JSON.stringify(msg),
+        metadata,
+        msgType,
+      });
+
+      if (error) {
+        createMessage.error(error);
+      }
 
-      return fn(...executeParams);
+      return output;
     } catch (error) {
       return error;
     }
@@ -96,9 +117,11 @@
 
     flag && emit('test', getValue());
 
-    const result = executeTestScript();
+    const result = await executeTestScript();
 
     outputContent.value = result;
+    await nextTick();
+    unref(jsonEditor)?.handleFormat();
   };
 
   const handleSave = async () => {
@@ -177,6 +200,7 @@
         <Card class="w-full h-full">
           <JSONEditor
             v-model:value="outputContent"
+            ref="jsonEditor"
             title="输出"
             class="flex-auto"
             height="100%"

@@ -27,6 +27,7 @@
 
   const handleSaveScript = (value: SaveValueType) => {
     emit('save', value);
+
     closeModal();
   };
 </script>

@@ -11,11 +11,13 @@
       value?: string;
       buttonName?: string;
       javaScriptEditorProps?: InstanceType<typeof JavaScriptFunctionEditor>['$props'];
+      scriptType?: string;
     }>(),
     {
       buttonName: 'Test Filter Function',
       javaScriptEditorProps: () => ({
         functionName: 'Filter',
+        scriptType: 'filter',
         paramsName: ['msg', 'metadata', 'msgType'],
       }),
     }

@@ -47,3 +47,9 @@
     <div ref="javaEditorElRef" class="w-full h-full min-h-96"></div>
   </BasicModal>
 </template>
+
+<style>
+  .ace-github .ace_print-margin {
+    width: 0;
+  }
+</style>

@@ -229,7 +229,7 @@ export const trigger_condition_schema: FormSchema[] = [
         placeholder: '请选择类型',
         labelField: 'itemText',
         valueField: 'itemValue',
-        getPopupContainer: () => document.body,
+        getPopupContainer: (triggerNode) => triggerNode.parentNode,
         onChange(e) {
           if (e) {
             setFieldsValue({ deviceProfileId: '' });
@@ -256,7 +256,7 @@ export const trigger_condition_schema: FormSchema[] = [
         placeholder: '请选择产品',
         labelField: 'name',
         valueField: 'id',
-        getPopupContainer: () => document.body,
+        getPopupContainer: (triggerNode) => triggerNode.parentNode,
         onChange: async (e) => {
           if (e) {
             setFieldsValue({ type2: '', entityId: [] });
@@ -315,7 +315,7 @@ export const trigger_condition_schema: FormSchema[] = [
           return [];
         },
         placeholder: '请选择设备',
-        getPopupContainer: () => document.body,
+        getPopupContainer: (triggerNode) => triggerNode.parentNode,
         filterOption: (inputValue: string, option: Record<'label' | 'value', string>) => {
           let { label, value } = option;
           label = label.toLowerCase();
@@ -450,7 +450,7 @@ export const actionSchema: FormSchema[] = [
         placeholder: '请选择类型',
         labelField: 'itemText',
         valueField: 'itemValue',
-        getPopupContainer: () => document.body,
+        getPopupContainer: (triggerNode) => triggerNode.parentNode,
         onChange(e) {
           if (e) {
             setFieldsValue({ deviceProfileId: '' });
@@ -482,7 +482,7 @@ export const actionSchema: FormSchema[] = [
         placeholder: '请选择产品',
         labelField: 'name',
         valueField: 'id',
-        getPopupContainer: () => document.body,
+        getPopupContainer: (triggerNode) => triggerNode.parentNode,
         onChange: (_value: string, options = {} as DeviceProfileModel) => {
           const oldType = formModel['transportType'];
 
@@ -556,7 +556,7 @@ export const actionSchema: FormSchema[] = [
           return [];
         },
         placeholder: '请选择设备',
-        getPopupContainer: () => document.body,
+        getPopupContainer: (triggerNode) => triggerNode.parentNode,
       };
     },
     ifShow: ({ values }) => isPart(values.device) && isDeviceOut(values.outTarget),
@@ -593,7 +593,7 @@ export const actionSchema: FormSchema[] = [
           dictCode: 'custom_define',
         },
         numberToString: true,
-        getPopupContainer: () => document.body,
+        getPopupContainer: (triggerNode) => triggerNode.parentNode,
         onChange: () => {
           setFieldsValue({ doContext: null, thingsModelId: null });
         },
@@ -619,7 +619,7 @@ export const actionSchema: FormSchema[] = [
       },
       labelField: 'itemText',
       valueField: 'itemValue',
-      getPopupContainer: () => document.body,
+      getPopupContainer: (triggerNode) => triggerNode.parentNode,
     },
     ifShow: ({ values }) =>
       isDeviceOut(values.outTarget) && isPartOrAll(values.device) && isDefine(values.commandType),
@@ -688,7 +688,7 @@ export const actionSchema: FormSchema[] = [
         },
         labelField: 'functionName',
         valueField: 'id',
-        getPopupContainer: () => document.body,
+        getPopupContainer: (triggerNode) => triggerNode.parentNode,
         onChange: (_, options: ModelOfMatterParams) => {
           if (options) {
             // setFieldsValue({ doContext: { ...options.functionJson, callType: options.callType } });

@@ -250,6 +250,7 @@ export function isType(operationType) {
           field: 'operation',
           label: '执行操作',
           component: 'Select',
+          getPopupContainer: (triggerNode) => triggerNode.parentNode,
           required: true,
           componentProps: {
             options: operationNumber_OR_TIME,
@@ -286,6 +287,7 @@ export function isType(operationType) {
           field: 'operation',
           label: '执行操作',
           component: 'Select',
+          getPopupContainer: (triggerNode) => triggerNode.parentNode,
           required: true,
           componentProps: {
             options: operationString,
@@ -310,6 +312,7 @@ export function isType(operationType) {
           field: 'operation',
           label: '执行操作',
           component: 'Select',
+          getPopupContainer: (triggerNode) => triggerNode.parentNode,
           required: true,
           componentProps: {
             options: operationBoolean,
@@ -322,6 +325,7 @@ export function isType(operationType) {
           field: 'value',
           label: '操作值',
           component: 'Select',
+          getPopupContainer: (triggerNode) => triggerNode.parentNode,
           required: true,
           componentProps: {
             options: [
@@ -347,6 +351,7 @@ export function isType(operationType) {
           label: '执行操作',
           required: true,
           component: 'Select',
+          getPopupContainer: (triggerNode) => triggerNode.parentNode,
           componentProps: {
             options: operationNumber_OR_TIME,
           },

@@ -31,6 +31,7 @@
             :options="options"
             :disabled="disabled"
             v-model:value="model[field]"
+            :getPopupContainer="(triggerNode) => triggerNode.parentNode"
             @change="operationType = model[field]"
             placeholder="请选择比较类型"
             allowClear

@@ -2,6 +2,14 @@ import { BasicColumn, FormSchema } from '/@/components/Table';
 import { h } from 'vue';
 import { Tag } from 'ant-design-vue';
 import moment from 'moment';
+// import {
+//   ClearAlarmFieldsEnum,
+//   ClearAlarmFieldsNameEnum,
+// } from '../../designer/enum/formField/action';
+import { useComponentRegister } from '/@/components/Form';
+import { JavascriptEditorWithTestModal } from '../../designer/src/components/JavaScriptFilterModal';
+
+useComponentRegister('JavascriptEditorWithTestModal', JavascriptEditorWithTestModal);
 
 export enum StatusEnum {
   ENABLE = 1,
@@ -129,11 +137,25 @@ export const formSchema: FormSchema[] = [
       placeholder: '请输入说明',
     },
   },
+  // {
+  //   field: 'function',
+  //   label: '',
+  //   component: 'Input',
+  //   slot: 'function',
+  // },
   {
     field: 'function',
-    label: '',
-    component: 'Input',
-    slot: 'function',
+    component: 'JavascriptEditorWithTestModal',
+    label: '转换函数',
+    changeEvent: 'update:value',
+    componentProps: {
+      javaScriptEditorProps: {
+        functionName: 'Details',
+        paramsName: ['msg', 'metadata', 'msgType'],
+        scriptType: 'json',
+      },
+      buttonName: '测试转换功能',
+    },
   },
   {
     field: 'id',

@@ -111,6 +111,7 @@
     aceEditor.value.setValue(
       jsScript ?? 'return {msg: msg, metadata: metadata, msgType: msgType};'
     );
+    setFieldsValue({ function: 'return {msg: msg, metadata: metadata, msgType: msgType};' });
     beautify(aceEditor.value.session);
   };
 

@@ -148,6 +148,7 @@
     { value: 'DEFAULT', label: '默认' },
     { value: 'SYSTEM', label: '系统' },
     { value: 'REPORT', label: '报表' },
+    { value: 'TASK_CENTER', label: '任务中心' },
   ]);
   const optionStatus: any = ref([
     { value: '1 ', label: '成功' },

@@ -45,7 +45,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -24,6 +24,18 @@
         label: '文本字体大小',
         component: 'InputNumber',
         defaultValue: 14,
+        componentProps: {
+          min: 0,
+          max: 100,
+          formatter: (e) => {
+            const value = e?.toString().replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
       },
       {
         field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,

@@ -36,7 +36,19 @@
         field: ComponentConfigFieldEnum.FONT_SIZE,
         label: '文本字体大小',
         component: 'InputNumber',
-        defaultValue: option.fontSize,
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          max: 100,
+          formatter: (e) => {
+            const value = e?.toString().replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
       },
       {
         field: ComponentConfigFieldEnum.PASS_WORD,

@@ -22,7 +22,19 @@
         field: ComponentConfigFieldEnum.FONT_SIZE,
         label: '文本字体大小',
         component: 'InputNumber',
-        defaultValue: option.fontSize,
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          max: 100,
+          formatter: (e) => {
+            const value = e?.toString().replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
       },
       {
         field: ComponentConfigFieldEnum.PASS_WORD,

@@ -18,7 +18,19 @@
         field: ComponentConfigFieldEnum.VALUE_SIZE,
         label: '数值字体大小',
         component: 'InputNumber',
-        defaultValue: option.fontSize,
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          max: 100,
+          formatter: (e) => {
+            const value = e?.toString().replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
       },
       {
         field: ComponentConfigFieldEnum.TEXT_COLOR,

@@ -30,7 +30,19 @@
         field: ComponentConfigFieldEnum.FONT_SIZE,
         label: '文本字体大小',
         component: 'InputNumber',
-        defaultValue: option.fontSize,
+        defaultValue: 14,
+        componentProps: {
+          min: 0,
+          max: 100,
+          formatter: (e) => {
+            const value = e?.toString().replace(/^0/g, '');
+            if (value) {
+              return value.replace(/^0/g, '');
+            } else {
+              return 0;
+            }
+          },
+        },
       },
       {
         field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,

@@ -78,6 +78,6 @@ export const getSendValues = async (option, getDesign, checked) => {
 
 export const CommandTypeEnumLIst = {
   '0': { CUSTOM: 0, name: '自定义' },
-  '1': { CUSTOM: 0, name: '服务' },
-  '2': { CUSTOM: 0, name: '属性' },
+  '1': { CUSTOM: 1, name: '服务' },
+  '2': { CUSTOM: 2, name: '属性' },
 };

@@ -58,7 +58,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {
@@ -76,7 +76,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -64,7 +64,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {
@@ -82,7 +82,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -15,6 +15,7 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_TIME]: false,
   [ComponentConfigFieldEnum.FONT_SIZE]: 14,
   [ComponentConfigFieldEnum.VALUE_SIZE]: 20,
+  [ComponentConfigFieldEnum.MAX_NUMBER]: 120,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -2,6 +2,7 @@
   import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
   import { useForm, BasicForm } from '/@/components/Form';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import { nextTick } from 'vue';
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
@@ -28,7 +29,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -18,16 +18,38 @@
 
   const time = ref<Nullable<number>>(null);
 
+  const POSITIVE_NUMBER = 6;
+
+  const ALL_PART = 7;
+
+  const DEFAULT_PART_VALUE = 20;
+
+  const partValue = computed(() => {
+    const { config } = props;
+    const { option } = config;
+    const { componentInfo } = option;
+    const { maxNumber = 120 } = componentInfo || {};
+    let value = maxNumber / POSITIVE_NUMBER;
+    return value % 10 > 0 ? Math.floor(value / 10) * 10 + 10 : value + 10;
+  });
+
+  const maxValueScale = computed(() => unref(partValue) / DEFAULT_PART_VALUE);
+
   const getValue = computed(() => {
     const maxHeight = 190;
     const minHeight = 15;
+
     const height = maxHeight - minHeight;
-    const rangeNumber = 7;
-    const itemRange = 20;
-    const itemHeight = height / (rangeNumber * itemRange);
+
+    const itemHeight = height / (ALL_PART * (DEFAULT_PART_VALUE * unref(maxValueScale)));
+
     const value = unref(currentValue);
-    const transformValue =
-      maxHeight - (value >= 0 ? value + 20 : itemRange - Math.abs(value)) * itemHeight;
+    let transformValue =
+      maxHeight -
+      (value >= 0
+        ? value + unref(DEFAULT_PART_VALUE * unref(maxValueScale))
+        : DEFAULT_PART_VALUE * unref(maxValueScale) - Math.abs(value)) *
+        itemHeight;
 
     return transformValue >= maxHeight
       ? maxHeight
@@ -184,7 +206,9 @@
             style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
           />
           <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
-            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">-20</div>
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
+              {{ partValue * -1 }}
+            </div>
           </foreignObject>
         </g>
         <g class="tick" opacity="1" transform="translate(0,165)">
@@ -204,7 +228,9 @@
             style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
           />
           <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
-            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">20</div>
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
+              {{ partValue }}
+            </div>
           </foreignObject>
         </g>
         <g class="tick" opacity="1" transform="translate(0,115)">
@@ -214,7 +240,9 @@
             style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
           />
           <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
-            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">40</div>
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
+              {{ partValue * 2 }}
+            </div>
           </foreignObject>
         </g>
         <g class="tick" opacity="1" transform="translate(0,90)">
@@ -224,7 +252,9 @@
             style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
           />
           <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
-            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">60</div>
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
+              {{ partValue * 3 }}
+            </div>
           </foreignObject>
         </g>
         <g class="tick" opacity="1" transform="translate(0,65)">
@@ -234,7 +264,9 @@
             style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
           />
           <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
-            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">80</div>
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
+              {{ partValue * 4 }}
+            </div>
           </foreignObject>
         </g>
         <g class="tick" opacity="1" transform="translate(0,40)">
@@ -244,7 +276,9 @@
             style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
           />
           <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
-            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">100</div>
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
+              {{ partValue * 5 }}
+            </div>
           </foreignObject>
         </g>
         <g class="tick" opacity="1" transform="translate(0,15)">
@@ -254,7 +288,9 @@
             style="stroke: rgb(136, 136, 136); shape-rendering: crispEdges; stroke-width: 1px"
           />
           <foreignObject xmlns="http://www.w3.org/2000/svg" x="-55" y="-10" width="45" height="20">
-            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">120</div>
+            <div class="tick-label" xmlns="http://www.w3.org/1999/xhtml">
+              {{ partValue * 6 }}
+            </div>
           </foreignObject>
         </g>
       </g>

@@ -58,7 +58,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {
@@ -76,7 +76,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -72,7 +72,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {
@@ -90,7 +90,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -51,7 +51,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {
@@ -69,7 +69,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -62,7 +62,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {
@@ -80,7 +80,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -85,7 +85,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {
@@ -103,7 +103,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -33,7 +33,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -55,7 +55,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -28,7 +28,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {
@@ -45,7 +45,7 @@
         componentProps: {
           min: 0,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -28,7 +28,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {
@@ -46,7 +46,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -33,7 +33,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {
@@ -51,7 +51,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -32,7 +32,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {
@@ -50,7 +50,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -34,7 +34,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {
@@ -52,7 +52,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -32,7 +32,7 @@
         componentProps: {
           min: 0,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {
@@ -50,7 +50,7 @@
           min: 0,
           max: 100,
           formatter: (e) => {
-            const value = e.replace(/^0/g, '');
+            const value = e?.toString().replace(/^0/g, '');
             if (value) {
               return value.replace(/^0/g, '');
             } else {

@@ -10,7 +10,7 @@ export function useSendCommand() {
   const loading = ref(false);
 
   const error = () => {
-    createMessage.error('下发指令失败');
+    // createMessage.error('下发指令失败');
     return false;
   };
 
@@ -52,6 +52,7 @@ export function useSendCommand() {
       createMessage.success('命令下发成功');
       return true;
     } catch (msg) {
+      console.error(msg);
       return error();
     } finally {
       loading.value = false;

@@ -8,6 +8,7 @@ import {
   getPacketIntervalByValue,
   intervalOption,
 } from '/@/views/device/localtion/cpns/TimePeriodForm/helper';
+import { OrderByEnum, OrderByNameEnum } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
 export enum QueryWay {
   LATEST = 'latest',
   TIME_PERIOD = 'timePeriod',
@@ -200,6 +201,18 @@ export const formSchema = (): FormSchema[] => {
         getPopupContainer: () => document.body,
       },
     },
+    {
+      field: SchemaFiled.ORDER_BY,
+      label: '数据排序',
+      component: 'Select',
+      defaultValue: OrderByEnum.ASC,
+      componentProps: {
+        options: Object.values(OrderByEnum).map((value) => ({
+          value,
+          label: OrderByNameEnum[value],
+        })),
+      },
+    },
   ];
 };
 

@@ -22,6 +22,7 @@
   import { ModalParamsType } from '/#/utils';
   import { WidgetDataType } from '../../hooks/useDataSource';
   import { ExtraDataSource } from '../../types';
+  import { OrderByEnum } from '/@/views/device/localtion/cpns/TimePeriodForm/config';
 
   type DeviceOption = Record<'label' | 'value' | 'organizationId', string>;
 
@@ -211,6 +212,7 @@
       endTs: Date.now(),
       agg: AggregateDataEnum.NONE,
       limit: 7,
+      orderBy: OrderByEnum.ASC,
     });
     historyData.value = getTableHistoryData(res);
     // 判断对象是否为空