Merge branch 'main' into ft_local_dev

@@ -22,7 +22,6 @@
           theme = htmlRoot = null;
         }
       })();
-    
     </script>
     <div id="app">
       <style>
@@ -152,17 +151,17 @@
           }
         }
       </style>
-      <div class="app-loading">
+      <div id="first-screen-loading" class="app-loading">
         <div class="app-loading-wrap">
-          <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" />
+          <!-- <img src="/resource/img/logo.png" class="app-loading-logo" alt="Logo" /> -->
           <div class="app-loading-dots">
             <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
           </div>
-          <div class="app-loading-title"><%= title %></div>
+          <!-- <div class="app-loading-title"><%= title %></div> -->
         </div>
       </div>
     </div>
-  
+
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

 import { defHttp } from '/@/utils/http/axios';
-import { FileUploadResponse } from './model/index';
+import { FileUploadResponse, Platform } from './model/index';
 enum API {
   SELECT_DETAIL = '/enterprise/get',
   UPDATE_DETAIL = '/enterprise/update',
@@ -67,7 +67,7 @@ export const bgUpload = (file) => {
 
 // 获取平台定制详情
 export const getPlatForm = () => {
-  return defHttp.get({
+  return defHttp.get<Platform>({
     url: API.SELECT_PLATFORM,
   });
 };

@@ -5,3 +5,17 @@ export interface FileUploadResponse {
   size: number;
   fileStaticUri: string;
 }
+
+export interface Platform {
+  id: string;
+  creator: string;
+  createTime: string;
+  updater: string;
+  updateTime: string;
+  name: string;
+  logo: string;
+  background: string;
+  copyright: string;
+  presentedOurselves: string;
+  domain: string;
+}

@@ -10,6 +10,7 @@ export { default as ApiSelect } from './src/components/ApiSelect.vue';
 export { default as RadioButtonGroup } from './src/components/RadioButtonGroup.vue';
 export { default as ApiTreeSelect } from './src/components/ApiTreeSelect.vue';
 export { default as ApiRadioGroup } from './src/components/ApiRadioGroup.vue';
+export { default as ApiUpload } from './src/components/ApiUpload.vue';
 
 //注册自定义组件
 export {

+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
+<script lang="ts" setup>
+  import { UploadDragger, Spin } from 'ant-design-vue';
+  import { InboxOutlined } from '@ant-design/icons-vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { isBoolean, isFunction } from '/@/utils/is';
+  import { computed, ref, unref } from 'vue';
+  import { cloneDeep } from 'lodash-es';
+  interface FileItem {
+    uid: string;
+    name?: string;
+    status?: string;
+    response?: string;
+    url?: string;
+  }
+
+  const emit = defineEmits(['update:fileList']);
+
+  const { createMessage } = useMessage();
+
+  const loading = ref(false);
+
+  const componentDisabled = ref(false);
+
+  const setLoading = (spin: boolean) => {
+    loading.value = spin;
+  };
+
+  const props = withDefaults(
+    defineProps<{
+      fileList?: FileItem[];
+      accept?: string;
+      maxSize?: number;
+      disabled?: boolean;
+      listType?: string;
+      multiple?: boolean;
+      showUploadList?: boolean | { showPreviewIcon?: boolean; showRemoveIcon?: boolean };
+      transformFile?: (file: File) => string | Blob | Promise<string | Blob | File>;
+      api: (file: string | Blob | Promise<string | Blob | File>) => Promise<FileItem>;
+    }>(),
+    {
+      fileList: () => [],
+      maxSize: 5 * 1024 * 1024,
+      showUploadList: () => ({ showPreviewIcon: true, showRemoveIcon: true }),
+    }
+  );
+
+  const handleBeforeUpload = (file: File) => {
+    if (file.size > props.maxSize) {
+      createMessage.warning(`文件大小超过${Math.floor(props.maxSize / 1024)}mb`);
+      return false;
+    }
+    handleUpload(file);
+    return false;
+  };
+
+  const getDisabled = computed(() => {
+    const { disabled } = props;
+    if (isBoolean(disabled)) {
+      return disabled ? componentDisabled.value : disabled;
+    }
+    return componentDisabled.value;
+  });
+
+  const handleUpload = async (file: File | string | Blob | Promise<string | Blob | File>) => {
+    try {
+      setLoading(true);
+      componentDisabled.value = true;
+      console.log({ componentDisabled: unref(componentDisabled), getDisabled: unref(getDisabled) });
+      const { transformFile, api } = props;
+      if (transformFile && isFunction(transformFile)) file = await transformFile(file as File);
+      if (api && isFunction(api)) {
+        const data = await api(file);
+        emit('update:fileList', cloneDeep([...props.fileList, data]));
+      }
+    } catch (error) {
+      window.console.error(error);
+    } finally {
+      setLoading(false);
+      componentDisabled.value = false;
+    }
+  };
+
+  const handleRemove = (file: FileItem) => {
+    const _fileList = cloneDeep(props.fileList);
+    const index = _fileList.findIndex((item) => item.uid === file.uid);
+    ~index && _fileList.splice(index, 1);
+    emit('update:fileList', _fileList);
+  };
+
+  const handlePreview = (file: FileItem) => {
+    console.log('preview', file);
+  };
+
+  const handleDownload = (file: FileItem) => {
+    console.log('download', file);
+  };
+</script>
+
+<template>
+  <UploadDragger
+    :file-list="props.fileList"
+    :disabled="getDisabled"
+    :before-upload="handleBeforeUpload"
+    @preview="handlePreview"
+    @download="handleDownload"
+    :remove="handleRemove"
+  >
+    <Spin :spinning="loading">
+      {{ getDisabled }}
+      <div class="w-full h-full flex flex-col justify-center content-center">
+        <InboxOutlined class="text-[3rem] !text-blue-500" />
+        <div class="m-2 text-gray-400">点击上传或拖拽上传</div>
+      </div>
+    </Spin>
+  </UploadDragger>
+</template>

@@ -14,6 +14,7 @@ import { setupGlobDirectives } from '/@/directives';
 import { setupI18n } from '/@/locales/setupI18n';
 import { registerGlobComp } from '/@/components/registerGlobComp';
 import '/@/assets/iconfont/iconfont';
+import { usePlatform } from './views/system/customize/hook/usePlatformInfo';
 
 if (import.meta.env.DEV) {
   import('ant-design-vue/dist/antd.less');
@@ -23,6 +24,8 @@ async function bootstrap() {
   // Configure store
   setupStore(app);
 
+  await usePlatform();
+
   // Initialize internal system configuration
   initAppConfigStore();
 
@@ -47,6 +50,7 @@ async function bootstrap() {
   // Mount when the route is ready
   // https://next.router.vuejs.org/api/#isready
   await router.isReady();
+
   app.mount('#app', true);
 }
 

@@ -39,7 +39,7 @@
     width: '200px',
     height: '200px',
     color: '#409eff',
-    muted: false, //静音
+    muted: true, //静音
     webFullScreen: false,
     autoPlay: true, //自动播放
     currentTime: 0,
@@ -238,7 +238,7 @@
               class="h-full flex flex-col justify-center items-center"
               v-if="!cameraList.length"
             />
-            <Row :gutter="16" class="h-full mx-0">
+            <Row :gutter="16" class="h-full mx-0 content-start">
               <Col
                 v-for="item in cameraList"
                 :key="item.id"

+<script lang="ts" setup>
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from '../config/packageDetail.config';
+  defineEmits(['register']);
+
+  const [registerModal] = useModalInner((_record: Recordable) => {});
+
+  const [registerForm] = useForm({
+    schemas: formSchema,
+    showActionButtonGroup: false,
+    // labelCol: { span: 8 },
+    labelWidth: 100,
+    wrapperCol: { span: 16 },
+  });
+</script>
+
+<template>
+  <BasicModal title="包管理" @register="registerModal">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>

+import { BasicColumn, FormSchema } from '/@/components/Table';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 120,
+  },
+  {
+    title: '标题',
+    dataIndex: 'title',
+    width: 120,
+  },
+  {
+    title: '版本',
+    dataIndex: 'version',
+    width: 120,
+  },
+  {
+    title: '版本标签',
+    dataIndex: 'versionLabel',
+    width: 120,
+  },
+  {
+    title: '包类型',
+    dataIndex: 'pkgType',
+    width: 120,
+  },
+  {
+    title: '直接URL',
+    dataIndex: 'url',
+    width: 120,
+  },
+  {
+    title: '文件大小',
+    dataIndex: 'fileSize',
+    width: 120,
+  },
+  {
+    title: '校验和',
+    dataIndex: 'vaildateTotal',
+    width: 120,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '标题',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];

+import { FormSchema } from '/@/components/Form';
+
+export enum PackageField {
+  TITLE = 'title',
+  VERSION = 'version',
+  VERSION_LABEL = 'versionLabel',
+  DEVICE_CONFIGURATION = 'deviceConfiguration',
+  PACKAGE_TYPE = 'packageType',
+  PACKAGE_UPDATE_TYPE = 'PackageUpdateType',
+  PACKAGE_BINARY_FILE = 'packageBinaryFile',
+  PACKAGE_EXTERNAL_URL = 'packageEexternalUrl',
+  CHECK_SUM_WAY = 'checkSumWay',
+  ALG = 'alg',
+  CHECK_SUM = 'checkSum',
+  DESCRIPTION = 'description',
+}
+
+export enum PackageUpdateType {
+  BINARY_FILE = 'binaryFile',
+  EXTERNAL_URL = 'externalUrl',
+}
+
+export enum PackageType {
+  FIRMWARE = 'firmware',
+  SOFTWARE = 'software',
+}
+
+export enum CheckSumWay {
+  AUTO = 'auto',
+  MANUAL = 'manual',
+}
+
+export enum ALG {
+  MD5 = 'md5',
+  SHA_256 = 'sha-256',
+  SHA_384 = 'sha-384',
+  SHA_512 = 'sha-512',
+  CRC_32 = 'crc-32',
+  MURMUR3_32 = 'murmur3-32',
+  MURMUR3_128 = 'murmur3-128',
+}
+
+export const formSchema: FormSchema[] = [
+  {
+    field: PackageField.TITLE,
+    label: '标题',
+    component: 'Input',
+    rules: [{ required: true, message: '标题为必填项' }],
+    componentProps: {
+      placeholder: '请输入标题',
+    },
+  },
+  {
+    field: PackageField.VERSION,
+    label: '版本',
+    component: 'Input',
+    rules: [{ required: true, message: '版本为必填项' }],
+    componentProps: {
+      placeholder: '请输入版本',
+    },
+  },
+  {
+    field: PackageField.VERSION_LABEL,
+    label: '版本标签',
+    component: 'Input',
+    helpMessage: ['自定义标签应与您设备报告的软件包版本相匹配'],
+    componentProps: {
+      placeholder: '请输入版本标签',
+    },
+  },
+  {
+    field: PackageField.DEVICE_CONFIGURATION,
+    label: '设备配置',
+    component: 'Select',
+    helpMessage: ['上传的包仅适用于具有所选配置文件的设备'],
+    defaultValue: 'default',
+    rules: [{ required: true, message: '设备配置为必填项' }],
+    componentProps: () => {
+      return {
+        options: [{ label: 'default', value: 'default' }],
+        placeholder: '请选择设备配置',
+      };
+    },
+  },
+  {
+    field: PackageField.PACKAGE_TYPE,
+    label: '包类型',
+    component: 'Select',
+    helpMessage: ['上传包后，您将无法修改标题、版本、设备配置文件和包类型'],
+    defaultValue: PackageType.FIRMWARE,
+    rules: [{ required: true, message: '包类型为必填项' }],
+    componentProps: () => {
+      return {
+        options: [
+          { label: '固件', value: PackageType.FIRMWARE },
+          { label: '软件', value: PackageType.SOFTWARE },
+        ],
+        placeholder: '请选择设备配置',
+      };
+    },
+  },
+  {
+    field: PackageField.PACKAGE_UPDATE_TYPE,
+    label: '上传方式',
+    component: 'RadioGroup',
+    defaultValue: PackageUpdateType.BINARY_FILE,
+    componentProps: () => {
+      return {
+        options: [
+          { label: '上传二进制文件', value: PackageUpdateType.BINARY_FILE },
+          { label: '使用外部URL', value: PackageUpdateType.EXTERNAL_URL },
+        ],
+      };
+    },
+  },
+  {
+    field: PackageField.PACKAGE_BINARY_FILE,
+    label: '二进制文件',
+    ifShow: ({ model }) => {
+      return model[PackageField.PACKAGE_UPDATE_TYPE] === PackageUpdateType.BINARY_FILE;
+    },
+    component: 'Upload',
+    componentProps: {
+      api: () => {
+        return {};
+      },
+    },
+  },
+  {
+    field: PackageField.PACKAGE_EXTERNAL_URL,
+    label: '外部URL',
+    component: 'Input',
+    ifShow: ({ model }) => {
+      return model[PackageField.PACKAGE_UPDATE_TYPE] === PackageUpdateType.EXTERNAL_URL;
+    },
+    rules: [{ required: true, message: '外部URL为必填项' }],
+    componentProps: {
+      placeholder: '请输入外部URL',
+    },
+  },
+  {
+    field: PackageField.CHECK_SUM_WAY,
+    label: '校验和方式',
+    component: 'RadioGroup',
+    defaultValue: CheckSumWay.AUTO,
+    componentProps: () => {
+      return {
+        options: [
+          { label: '自动生成', value: CheckSumWay.AUTO },
+          { label: '手动生成', value: CheckSumWay.MANUAL },
+        ],
+      };
+    },
+  },
+  {
+    field: PackageField.ALG,
+    label: '校验和算法',
+    component: 'Select',
+    ifShow: ({ model }) => {
+      return model[PackageField.CHECK_SUM_WAY] === CheckSumWay.MANUAL;
+    },
+    componentProps: {
+      placeholder: '请选择校验和算法',
+      options: Object.keys(ALG).map((key) => {
+        return {
+          label: String(ALG[key]).toUpperCase(),
+          value: ALG[key],
+        };
+      }),
+    },
+  },
+  {
+    field: PackageField.CHECK_SUM,
+    label: '校验和',
+    component: 'Input',
+    ifShow: ({ model }) => {
+      return model[PackageField.CHECK_SUM_WAY] === CheckSumWay.MANUAL;
+    },
+    helpMessage: ['如果校验和为空,会自动生成'],
+    componentProps: {
+      placeholder: '请输入校验和',
+    },
+  },
+  {
+    field: PackageField.DESCRIPTION,
+    label: '描述',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入描述',
+    },
+  },
+];

+<script lang="ts" setup>
+  import { Button } from 'ant-design-vue';
+  import { columns, searchFormSchema } from './config/config';
+  import { PageWrapper } from '/@/components/Page';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import PackageDetailModal from './components/PackageDetailModal.vue';
+  import { useModal } from '/@/components/Modal';
+  // import { ApiUpload } from '/@/components/Form';
+  // import { computed, ref, unref } from 'vue';
+
+  const [register] = useTable({
+    columns,
+    title: '包仓库',
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+  });
+
+  const [registerModal, { openModal }] = useModal();
+
+  const handleCreatePackage = () => {
+    openModal(true);
+  };
+
+  // const fileList = ref([]);
+  // const handleUpload = async (file: File) => {
+  //   console.log(file);
+  //   return new Promise((resolve) => {
+  //     setTimeout(() => {
+  //       resolve({
+  //         uid: file.uid,
+  //         type: file.type,
+  //         name: file.name,
+  //         linkProps: { download: 'http://www.baidu.cn' },
+  //       });
+  //     }, 3000);
+  //   });
+  // };
+</script>
+
+<template>
+  <PageWrapper dense contentFullHeight contentClass="flex flex-col">
+    <!-- <div class="w-40 h-40">
+      <ApiUpload v-model:file-list="fileList" :api="handleUpload" />
+    </div> -->
+    <BasicTable @register="register">
+      <template #toolbar>
+        <Button @click="handleCreatePackage" type="primary">新增包</Button>
+      </template>
+    </BasicTable>
+    <PackageDetailModal @register="registerModal" />
+  </PageWrapper>
+</template>

@@ -6,149 +6,161 @@
           <a-button type="primary" @click="handleAdd"> 新增场景联动 </a-button>
         </Authority>
         <Authority value="api:yt:sceneLinkage:delete">
-          <Popconfirm title="您确定要批量删除数据" ok-text="确定" cancel-text="取消" @confirm="handleDeleteOrBatchDelete(null)">
+          <Popconfirm
+            title="您确定要批量删除数据"
+            ok-text="确定"
+            cancel-text="取消"
+            @confirm="handleDeleteOrBatchDelete(null)"
+          >
             <a-button color="error" :disabled="hasBatchDelete"> 批量删除 </a-button>
           </Popconfirm>
         </Authority>
       </template>
       <template #action="{ record }">
-        <TableAction :actions="[
-          {
-            label: '查看',
-            auth: 'api:yt:sceneLinkage:get',
-            icon: 'ant-design:eye-outlined',
-            onClick: handleView.bind(null, record),
-          },
-          {
-            label: '编辑',
-            auth: 'api:yt:sceneLinkage:update',
-            icon: 'clarity:note-edit-line',
-            onClick: handleEdit.bind(null, record),
-            ifShow: record.creator === userId && record.status !== 1,
-          },
-          {
-            label: '删除',
-            auth: 'api:yt:sceneLinkage:delete',
-            icon: 'ant-design:delete-outlined',
-            color: 'error',
-            ifShow: record.creator === userId && record.status !== 1,
-            popConfirm: {
-              title: '是否确认删除',
-              confirm: handleDeleteOrBatchDelete.bind(null, record),
+        <TableAction
+          :actions="[
+            {
+              label: '查看',
+              auth: 'api:yt:sceneLinkage:get',
+              icon: 'ant-design:eye-outlined',
+              onClick: handleView.bind(null, record),
             },
-          },
-        ]" />
+            {
+              label: '编辑',
+              auth: 'api:yt:sceneLinkage:update',
+              icon: 'clarity:note-edit-line',
+              onClick: handleEdit.bind(null, record),
+              ifShow: record.creator === userId && record.status !== 1,
+            },
+            {
+              label: '删除',
+              auth: 'api:yt:sceneLinkage:delete',
+              icon: 'ant-design:delete-outlined',
+              color: 'error',
+              ifShow: record.creator === userId && record.status !== 1,
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
       </template>
 
       <template #status="{ record }">
-        <Switch :checked="record.status === 1" :loading="record.pendingStatus" checkedChildren="启用"
-          unCheckedChildren="禁用" @change="(checked:boolean)=>statusChange(checked,record)" />
+        <Switch
+          :checked="record.status === 1"
+          :loading="record.pendingStatus"
+          checkedChildren="启用"
+          unCheckedChildren="禁用"
+          @change="(checked:boolean)=>statusChange(checked,record)"
+        />
       </template>
     </BasicTable>
     <SceneLinkAgeDrawer @register="registerDrawer" @success="handleSuccess" />
   </div>
 </template>
 <script lang="ts" setup>
-import { nextTick } from 'vue';
-import { BasicTable, useTable, TableAction } from '/@/components/Table';
-import { useDrawer } from '/@/components/Drawer';
-import {
-  screenLinkPageGetApi,
-  screenLinkPageDeleteApi,
-  screenLinkPagePutApi,
-} from '/@/api/ruleengine/ruleengineApi';
-import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-import { Switch, Popconfirm } from 'ant-design-vue';
-import { columns, searchFormSchema } from './config/config.data.ts';
-import { USER_INFO_KEY } from '/@/enums/cacheEnum';
-import { getAuthCache } from '/@/utils/auth';
-import SceneLinkAgeDrawer from './SceneLinkAgeDrawer.vue';
-import { useMessage } from '/@/hooks/web/useMessage';
-import { Authority } from '/@/components/Authority';
-
-const userInfo: any = getAuthCache(USER_INFO_KEY);
-const userId = userInfo.userId;
+  import { nextTick } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { useDrawer } from '/@/components/Drawer';
+  import {
+    screenLinkPageGetApi,
+    screenLinkPageDeleteApi,
+    screenLinkPagePutApi,
+  } from '/@/api/ruleengine/ruleengineApi';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { Switch, Popconfirm } from 'ant-design-vue';
+  import { columns, searchFormSchema } from './config/config.data';
+  import { USER_INFO_KEY } from '/@/enums/cacheEnum';
+  import { getAuthCache } from '/@/utils/auth';
+  import SceneLinkAgeDrawer from './SceneLinkAgeDrawer.vue';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { Authority } from '/@/components/Authority';
 
-const [registerDrawer, { openDrawer }] = useDrawer();
-const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
-  title: '场景联动列表',
-  api: screenLinkPageGetApi,
-  columns,
-  formConfig: {
-    labelWidth: 120,
-    schemas: searchFormSchema,
-  },
-  useSearchForm: true,
-  showTableSetting: true,
-  bordered: true,
-  showIndexColumn: false,
-  actionColumn: {
-    width: 200,
-    title: '操作',
-    dataIndex: 'action',
-    slots: { customRender: 'action' },
-    fixed: 'right',
-  },
-});
-const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
-  useBatchDelete(screenLinkPageDeleteApi, handleSuccess, setProps);
-selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
-  // Demo:status为1的选择框禁用
-  if (record.status === 1) {
-    return { disabled: true };
-  } else {
-    return { disabled: false };
-  }
-};
-nextTick(() => {
-  setProps(selectionOptions);
-});
-
-function handleAdd() {
-  window.localStorage.setItem('isViewDisabledBtn', 'noView')
-  openDrawer(true, {
-    isUpdate: false,
-  });
-}
+  const userInfo: any = getAuthCache(USER_INFO_KEY);
+  const userId = userInfo.userId;
 
-function handleEdit(record: Recordable) {
-  window.localStorage.setItem('isViewDisabledBtn', 'noView')
-  openDrawer(true, {
-    record,
-    isUpdate: true,
+  const [registerDrawer, { openDrawer }] = useDrawer();
+  const [registerTable, { reload, setProps, setSelectedRowKeys }] = useTable({
+    title: '场景联动列表',
+    api: screenLinkPageGetApi,
+    columns,
+    formConfig: {
+      labelWidth: 120,
+      schemas: searchFormSchema,
+    },
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    actionColumn: {
+      width: 200,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
   });
-}
-function handleView(record: Recordable) {
-  window.localStorage.setItem('isViewDisabledBtn', 'isView')
-  openDrawer(true, {
-    record,
-    isUpdate: 3,
-  });
-}
-function handleSuccess() {
-  reload();
-}
-
-const statusChange = async (checked, record) => {
-  setProps({
-    loading: true,
-  });
-  setSelectedRowKeys([]);
-  resetSelectedRowKeys();
-  const newStatus = checked ? 1 : 0;
-  const { createMessage } = useMessage();
-  try {
-    await screenLinkPagePutApi({ id: record.id, status: newStatus });
-    if (newStatus) {
-      createMessage.success(`启用成功`);
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions, resetSelectedRowKeys } =
+    useBatchDelete(screenLinkPageDeleteApi, handleSuccess, setProps);
+  selectionOptions.rowSelection.getCheckboxProps = (record: Recordable) => {
+    // Demo:status为1的选择框禁用
+    if (record.status === 1) {
+      return { disabled: true };
     } else {
-      createMessage.success('禁用成功');
+      return { disabled: false };
     }
-  } finally {
-    setProps({
-      loading: false,
+  };
+  nextTick(() => {
+    setProps(selectionOptions);
+  });
+
+  function handleAdd() {
+    window.localStorage.setItem('isViewDisabledBtn', 'noView');
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  }
+
+  function handleEdit(record: Recordable) {
+    window.localStorage.setItem('isViewDisabledBtn', 'noView');
+    openDrawer(true, {
+      record,
+      isUpdate: true,
+    });
+  }
+  function handleView(record: Recordable) {
+    window.localStorage.setItem('isViewDisabledBtn', 'isView');
+    openDrawer(true, {
+      record,
+      isUpdate: 3,
     });
+  }
+  function handleSuccess() {
     reload();
   }
-};
+
+  const statusChange = async (checked, record) => {
+    setProps({
+      loading: true,
+    });
+    setSelectedRowKeys([]);
+    resetSelectedRowKeys();
+    const newStatus = checked ? 1 : 0;
+    const { createMessage } = useMessage();
+    try {
+      await screenLinkPagePutApi({ id: record.id, status: newStatus });
+      if (newStatus) {
+        createMessage.success(`启用成功`);
+      } else {
+        createMessage.success('禁用成功');
+      }
+    } finally {
+      setProps({
+        loading: false,
+      });
+      reload();
+    }
+  };
 </script>

+import { getPlatForm } from '/@/api/oem';
+
+enum DefaultPlatform {
+  LOGO = '/resource/img/logo.png',
+  // TITLE = 'ThingsKit',
+  ICO = '/favicon.ico',
+}
+
+export const usePlatform = async () => {
+  const platformInfo = await getPlatForm();
+
+  const createLoadingEffect = () => {
+    const wrap = document.createElement('div');
+    wrap.setAttribute('class', 'app-loading-wrap');
+    const img = document.createElement('img');
+    img.setAttribute('src', platformInfo.logo || DefaultPlatform.LOGO);
+    img.setAttribute('class', 'app-loading-logo');
+    img.setAttribute('alt', 'Logo');
+    const dots = document.createElement('div');
+    dots.setAttribute('class', 'app-loading-dots');
+    const dotWrap = document.createElement('span');
+    dotWrap.setAttribute('class', 'dot dot-spin');
+    for (let i = 0; i < 4; i++) {
+      dotWrap.appendChild(document.createElement('i'));
+    }
+    const title = document.createElement('div');
+    title.setAttribute('class', 'app-loading-title');
+    const textNode = document.createTextNode(
+      platformInfo.name || import.meta.env.VITE_GLOB_APP_TITLE
+    );
+    title.appendChild(textNode);
+    wrap.appendChild(img);
+    dots.appendChild(dotWrap);
+    wrap.appendChild(dots);
+    wrap.appendChild(title);
+    return wrap;
+  };
+
+  const replaceSiteIco = () => {
+    const linkEl = document.querySelectorAll('link[rel*="icon"]');
+    linkEl.forEach((item) => {
+      item.setAttribute('href', platformInfo.logo || DefaultPlatform.ICO);
+    });
+  };
+
+  const replaceLoadingEffect = () => {
+    const loadingWrapper = document.getElementById('first-screen-loading');
+    loadingWrapper!.innerHTML = '';
+    loadingWrapper?.appendChild(createLoadingEffect());
+  };
+
+  const bootstrap = () => {
+    replaceSiteIco();
+    replaceLoadingEffect();
+  };
+
+  bootstrap();
+};

+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
 <script lang="ts" setup>
-  const props = defineProps<{
-    value?: boolean;
-  }>();
+  import { RadioRecord } from '../../detail/config/util';
+
+  interface VisualComponentProps<Layout = Recordable, Value = Recordable> {
+    value?: Value;
+    layout?: Layout;
+    radio?: RadioRecord;
+    random?: boolean;
+    add?: (key: string, method: Fn) => void;
+    update?: () => void;
+    remove?: (key: string) => void;
+  }
+  const props = defineProps<VisualComponentProps>();
 
   const emit = defineEmits(['update:value', 'change']);
 
@@ -14,7 +28,12 @@
 
 <template>
   <label class="sliding-switch">
-    <input :value="props.value" type="checkbox" :checked="props.value" @change="handleChange" />
+    <input
+      :value="props.value?.value"
+      type="checkbox"
+      :checked="props.value?.value"
+      @change="handleChange"
+    />
     <span class="slider"></span>
     <span class="on">ON</span>
     <span class="off">OFF</span>
@@ -40,12 +59,9 @@
     .slider {
       width: 80px;
       height: 40px;
+      display: flex;
+      align-items: center;
       box-sizing: border-box;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
       border: 2px solid #ecf0f3;
       border-radius: 20px;
       box-shadow: -2px -2px 8px #fff, -2px -2px 12px hsl(0deg 0% 100% / 50%),
@@ -57,15 +73,14 @@
     }
 
     .slider::after {
-      position: absolute;
       cursor: pointer;
       display: block;
       content: '';
       width: 24px;
       height: 24px;
       border-radius: 50%;
-      top: 6px;
-      left: 6px;
+      margin-left: 6px;
+      margin-right: 6px;
       background-color: #ecf0f3;
       box-shadow: -2px -2px 8px #fff, -2px -2px 12px hsl(0deg 0% 100% / 50%),
         inset 2px 2px 4px hsl(0deg 0% 100% / 10%), 2px 2px 8px rgb(0 0 0 / 30%);
@@ -80,13 +95,16 @@
     input:checked ~ .slider::after {
       transform: translateX(35px);
     }
+
     input:not(:checked) ~ .on {
       opacity: 0;
-      transform: translateX(0px);
+      transform: translateX(0);
     }
 
     .on,
     .off {
+      position: absolute;
+      top: 0;
       display: inline-block;
       margin-left: 3px;
       width: 34px;
@@ -97,7 +115,9 @@
     .on {
       color: #039be5;
     }
+
     .off {
+      right: 6px;
       color: #999;
     }
   }

+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
+<script lang="ts" setup>
+  import { Switch } from 'ant-design-vue';
+  import { computed } from 'vue';
+  import { DEFAULT_RADIO_RECORD, fontSize, RadioRecord } from '../../detail/config/util';
+  import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
+  import {
+    ControlComponentDefaultConfig,
+    ControlComponentValue,
+    ControlComponentLayout,
+  } from './control.config';
+  const props = withDefaults(
+    defineProps<{
+      layout?: ControlComponentLayout;
+      value?: ControlComponentValue;
+      radio?: RadioRecord;
+    }>(),
+    {
+      value: () => ControlComponentDefaultConfig,
+    }
+  );
+  const getRadio = computed(() => {
+    return props.radio || DEFAULT_RADIO_RECORD;
+  });
+</script>
+
+<template>
+  <div class="flex items-center w-full h-full p-4">
+    <div class="flex-auto flex truncate">
+      <SvgIcon
+        :name="props.value?.icon! || ControlComponentDefaultConfig.icon!"
+        prefix="iconfont"
+        :style="{
+          color: props.value?.iconColor || ControlComponentDefaultConfig.iconColor,
+          width: fontSize({ radioRecord: getRadio, basic: 30, min: 16 }),
+          height: fontSize({ radioRecord: getRadio, basic: 30, min: 16 }),
+        }"
+      />
+      <span class="flex-auto mx-4 flex items-center truncate inline-block">属性名</span>
+    </div>
+    <Switch />
+  </div>
+</template>

+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
 <script lang="ts" setup>
+  import { computed } from '@vue/reactivity';
+  import { DEFAULT_RADIO_RECORD, fontSize, RadioRecord } from '../../detail/config/util';
+  import { ControlComponentValue } from './control.config';
+
   const props = defineProps<{
-    value?: boolean;
+    value?: ControlComponentValue;
+    layout?: Recordable;
+    radio?: RadioRecord;
   }>();
 
   const emit = defineEmits(['update:value', 'change']);
@@ -10,12 +21,27 @@
     emit('update:value', _value);
     emit('change', _value);
   };
+
+  const getRadio = computed(() => {
+    return props.radio! || DEFAULT_RADIO_RECORD;
+  });
 </script>
 
 <template>
-  <div class="toggle-switch">
+  <div
+    class="toggle-switch"
+    :style="{
+      width: fontSize({ radioRecord: getRadio, basic: 75, max: 75, min: 60 }),
+      height: fontSize({ radioRecord: getRadio, basic: 97.5, max: 97.5, min: 80 }),
+    }"
+  >
     <label class="switch">
-      <input :value="props.value" type="checkbox" :checked="props.value" @change="handleChange" />
+      <input
+        :value="props.value?.value"
+        type="checkbox"
+        :checked="props.value?.value"
+        @change="handleChange"
+      />
       <div class="button">
         <div class="light"></div>
         <div class="dots"></div>
@@ -29,9 +55,10 @@
 
 <style scoped>
   .toggle-switch {
-    flex: 1 1 auto;
+    /* flex: 1 1 auto; */
     max-width: 75px;
-    height: 97.5px;
+
+    /* height: 97.5px; */
     display: flex;
   }
 
@@ -76,12 +103,12 @@
     transform-origin: center center -20px;
     transform: translateZ(20px) rotateX(-25deg);
     transform-style: preserve-3d;
-    background-color: #9b0621;
     width: 100%;
     height: 100%;
     position: relative;
     cursor: pointer;
     background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%);
+    background-color: #9b0621;
     background-repeat: no-repeat;
   }
 
@@ -113,7 +140,7 @@
     transform: translateY(30px) rotateX(-90deg);
     position: absolute;
     bottom: 0;
-    box-shadow: 0 30px 8px 0px black, 0 60px 20px 0px rgb(0 0 0 / 50%);
+    box-shadow: 0 30px 8px 0 black, 0 60px 20px 0 rgb(0 0 0 / 50%);
   }
 
   .switch .light {

+import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
+
+export interface ControlComponentLayout {
+  [key: string]: any;
+}
+
+export interface ControlComponentValue {
+  value?: boolean;
+  name?: string;
+  icon?: string;
+  iconColor?: string;
+}
+
+export const ControlComponentDefaultConfig: ControlComponentValue = {
+  icon: 'shuiwen',
+  iconColor: '#367BFF',
+};
+
+export const transformControlConfig = (
+  _ComponentConfig: Recordable,
+  _record: DataComponentRecord,
+  dataSourceRecord: DataSource
+) => {
+  return {
+    value: {
+      value: dataSourceRecord.componentInfo.value,
+      icon: dataSourceRecord.componentInfo.icon,
+    } as ControlComponentValue,
+  };
+};

+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
 <script lang="ts" setup>
   import type { ECharts, EChartsOption } from 'echarts';
   import { PropType, watch } from 'vue';
@@ -7,21 +12,21 @@
     DashboardComponentLayout,
     DashBoardValue,
     instrumentComponent1,
-    InstrumentComponentType,
     update_instrument_1_font,
     update_instrument_2_font,
     update_instrument_1_value,
     update_instrument_2_value,
   } from './dashBoardComponent.config';
-  import { dateUtil } from '/@/utils/dateUtil';
   import {
     DEFAULT_RADIO_RECORD,
     RadioRecord,
-    DEFAULT_DATE_FORMAT,
     fontSize,
+    getUpdateTime,
   } from '../../detail/config/util';
   import { Tooltip } from 'ant-design-vue';
   import { useThrottleFn } from '@vueuse/shared';
+  import { buildUUID } from '/@/utils/uuid';
+  import { FrontComponent } from '../help';
 
   const props = defineProps({
     add: {
@@ -33,7 +38,7 @@
     },
     value: {
       type: Object as PropType<DashBoardValue>,
-      default: () => ({}),
+      default: () => ({ id: buildUUID() }),
     },
     radio: {
       type: Object as PropType<RadioRecord>,
@@ -60,7 +65,6 @@
   }
 
   const getRadio = computed(() => {
-    // const { radio } = props.radio;
     return props.radio;
   });
 
@@ -68,7 +72,6 @@
     const realWidth = unref(chartRef)?.getWidth();
     const realHeight = unref(chartRef)?.getHeight();
     const radioRecord = props.radio;
-    // const widht
     return {
       ...radioRecord,
       height: realHeight || radioRecord.height,
@@ -76,7 +79,7 @@
     };
   });
 
-  const beforeUpdateFn = (componentType: InstrumentComponentType) => {
+  const beforeUpdateFn = (componentType: FrontComponent) => {
     if (componentType === 'instrument-component-1') return update_instrument_1_font;
     if (componentType === 'instrument-component-2') return update_instrument_2_font;
     return (_radio: RadioRecord) => {};
@@ -88,7 +91,7 @@
     unref(chartRef)?.resize();
   }
 
-  const getUpdateValueFn = (componentType: InstrumentComponentType) => {
+  const getUpdateValueFn = (componentType: FrontComponent) => {
     if (componentType === 'instrument-component-1') return update_instrument_1_value;
     if (componentType === 'instrument-component-2') return update_instrument_2_value;
     return (_radio: DashBoardValue) => {};
@@ -101,11 +104,6 @@
 
   watch(() => props.value, updateChartValue);
 
-  // watch(
-  //   () => [props.value.gradientInfo, props.value.unit, props.value.valueColor, props.value.name],
-  //   updateChartValue
-  // );
-
   const updateChartFont = useThrottleFn(() => {
     const option = beforeUpdateFn(props.layout.componentType);
     setTimeout(() => {
@@ -122,8 +120,6 @@
 
   watch(() => props.layout.componentType, updateChartType);
 
-  // watch(() => props.value.gradientInfo, updateChartType);
-
   let timeout: Nullable<number> = null;
 
   function handleRandomValue() {
@@ -170,22 +166,11 @@
           color: '#999',
         }"
       >
-        <Tooltip
-          placement="top"
-          :title="
-            props.value?.updateTime
-              ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)
-              : '暂无更新时间'
-          "
-        >
+        <Tooltip placement="top" :title="getUpdateTime(props.value?.updateTime)">
           <div class="truncate">
             <span class="mr-2">更新时间:</span>
             <span>
-              {{
-                props.value?.updateTime
-                  ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)
-                  : '暂无更新时间'
-              }}
+              {{ getUpdateTime(props.value?.updateTime) }}
             </span>
           </div>
         </Tooltip>

+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
 <script lang="ts" setup>
   import { computed, onMounted, onUnmounted, ref, unref } from 'vue';
   import { Space, Tooltip } from 'ant-design-vue';
@@ -6,22 +11,27 @@
     DigitalDashBoardLayout,
     DigitalDashBoardValue,
   } from './digitalDashBoard.config';
-  import { dateUtil } from '/@/utils/dateUtil';
   import {
     fontSize,
     RadioRecord,
-    DEFAULT_DATE_FORMAT,
+    getUpdateTime,
     DEFAULT_RADIO_RECORD,
     DEFAULT_ANIMATION_INTERVAL,
   } from '../../detail/config/util';
   import { isNaN } from 'lodash';
 
-  const props = defineProps<{
-    layout: DigitalDashBoardLayout;
-    value: DigitalDashBoardValue;
-    radio?: RadioRecord;
-    random?: boolean;
-  }>();
+  const props = withDefaults(
+    defineProps<{
+      layout?: DigitalDashBoardLayout;
+      value?: DigitalDashBoardValue;
+      radio?: RadioRecord;
+      random?: boolean;
+    }>(),
+    {
+      value: () => ({}),
+      layout: () => ({ max: 5, keepNumber: 2 }),
+    }
+  );
 
   const changeValue = ref(0);
 
@@ -53,8 +63,6 @@
   });
 
   const getRadio = computed(() => {
-    // const { radio } = props.radio || DEFAULT_RADIO_RECORD;
-    // return radio;
     return props.radio || DEFAULT_RADIO_RECORD;
   });
 
@@ -160,22 +168,11 @@
           color: '#999',
         }"
       >
-        <Tooltip
-          placement="top"
-          :title="
-            props.value?.updateTime
-              ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)
-              : '暂无更新时间'
-          "
-        >
+        <Tooltip placement="top" :title="getUpdateTime(props.value?.updateTime)">
           <div class="truncate">
             <span class="mr-1">更新时间:</span>
             <span>
-              {{
-                props.value?.updateTime
-                  ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)
-                  : '暂无更新时间'
-              }}
+              {{ getUpdateTime(props.value?.updateTime) }}
             </span>
           </div>
         </Tooltip>
@@ -188,11 +185,12 @@
 <style scoped lang="less">
   .digital-wrapper__int {
     border-radius: 1px;
-    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.7);
-    background: url('/@/assets/images/digital-wrapper-bg-int.png') 0px -1px no-repeat;
+    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.7);
+    background: url('/@/assets/images/digital-wrapper-bg-int.png') 0 -1px no-repeat;
     padding: 5px;
     background-size: 100% 100%;
   }
+
   .digital-text_int {
     display: inline-block;
     overflow-wrap: break-word;
@@ -203,11 +201,12 @@
 
   .digital-wrapper__float {
     border-radius: 1px;
-    box-shadow: inset 0px 1px 3px 0px rgba(112, 22, 15, 1);
-    background: url('/@/assets/images/digital-wrapper-bg-float.png') 0px -1px no-repeat;
+    box-shadow: inset 0 1px 3px 0 rgba(112, 22, 15, 1);
+    background: url('/@/assets/images/digital-wrapper-bg-float.png') 0 -1px no-repeat;
     padding: 5px;
     background-size: 100% 100%;
   }
+
   .digital-text_float {
     display: inline-block;
     overflow-wrap: break-word;

 import { EChartsOption } from 'echarts';
+import { FrontComponent, Gradient, GradientColor } from '../../const/const';
 import { fontSize, RadioRecord } from '../../detail/config/util';
-import { Gradient, visualOptionField } from '../../detail/config/visualOptions';
 import {
   ComponentInfo,
   DataComponentRecord,
@@ -10,16 +10,6 @@ import {
 import { isArray } from '/@/utils/is';
 import { buildUUID } from '/@/utils/uuid';
 
-export type InstrumentComponentType = 'instrument-component-1' | 'instrument-component-2';
-
-export type GradientKey =
-  | visualOptionField.FIRST_PHASE_COLOR
-  | visualOptionField.FIRST_PHASE_VALUE
-  | visualOptionField.SECOND_PHASE_COLOR
-  | visualOptionField.SECOND_PHASE_VALUE
-  | visualOptionField.THIRD_PHASE_COLOR
-  | visualOptionField.THIRD_PHASE_VALUE;
-
 export interface GradientInfoRecord {
   key: Gradient;
   value: number;
@@ -38,13 +28,7 @@ export interface DashBoardValue {
 
 export interface DashboardComponentLayout {
   chartOption: EChartsOption;
-  componentType: InstrumentComponentType;
-}
-
-export enum GradientColor {
-  FIRST = '#67e0e3',
-  SECOND = '#37a2da',
-  THIRD = '#fd666d',
+  componentType: FrontComponent;
 }
 
 export const instrumentComponent1 = (params?: Partial<ComponentInfo>): EChartsOption => {
@@ -94,7 +78,6 @@ export const instrumentComponent1 = (params?: Partial<ComponentInfo>): EChartsOp
         axisLabel: {
           distance: 0,
           color: '#999',
-          // fontSize: 20,
         },
         anchor: {
           show: false,
@@ -173,7 +156,6 @@ export const instrumentComponent2 = (params?: Partial<ComponentInfo>): EChartsOp
 
   const firstGradient = firstRecord?.value ? firstRecord.value / max : 0.3;
   const secondGradient = secondRecord?.value ? secondRecord.value / max : 0.7;
-  // const thirdGradient = thirdRecord?.value ? thirdRecord.value / max : 1;
 
   return {
     series: [
@@ -307,12 +289,15 @@ export const update_instrument_2_value = (params: DashBoardValue) => {
 
   let max = thirdRecord?.value || secondRecord?.value || firstRecord?.value || 70;
   max = Number(1 + Array(String(max).length).fill(0).join(''));
+  max = value > 1 ? Number(1 + Array(String(value).length).fill(0).join('')) / 2 : 100 / 2;
+  max = value > max ? max * 2 : max;
 
   const firstGradient = firstRecord?.value ? firstRecord.value / max : 0.3;
   const secondGradient = secondRecord?.value ? secondRecord.value / max : 0.7;
   return {
     series: [
       {
+        max: max < 100 ? 100 : max,
         data: [{ value: handleValue(value) }],
         detail: {
           formatter: `{value} ${unit ?? ''}`,
@@ -354,7 +339,7 @@ export const Instrument2DefaultConfig: Partial<ComponentInfo> = {
 
 export const transformDashboardComponentConfig = (
   config: DashboardComponentLayout,
-  record: DataComponentRecord,
+  _record: DataComponentRecord,
   dataSourceRecord: DataSource
 ) => {
   let chartOption = config.chartOption;

 import { ComponentInfo } from '/@/api/dataBoard/model';
 
-export type DigitalDashBoardComponentType = 'digital-dashboard-component';
-
 export interface DigitalDashBoardLayout {
   max: number;
   keepNumber: number;

 import { EChartsOption } from 'echarts';
-import { Component } from 'vue';
-import { WidgetComponentType } from '../../detail/config/visualOptions';
-import {
-  Instrument1DefaultConfig,
-  Instrument2DefaultConfig,
-  instrumentComponent1,
-  instrumentComponent2,
-  InstrumentComponentType,
-} from './dashBoardComponent.config';
-import DashBoardComponent from './DashBoardComponent.vue';
-import DigitalDashBoard from './DigitalDashBoard.vue';
-import { buildUUID } from '/@/utils/uuid';
+import { InstrumentComponentType } from './dashBoardComponent.config';
 
 export interface DashboardComponentLayout {
   chartOption: EChartsOption;
   componentType: InstrumentComponentType;
 }
-
-interface InstrumentComponentConfig {
-  id: WidgetComponentType;
-  layout: DashboardComponentLayout;
-  component: Component;
-  value: Recordable;
-}
-
-export const instrumentComponentConfig: InstrumentComponentConfig[] = [
-  {
-    id: 'instrument-component-1',
-    layout: {
-      chartOption: instrumentComponent1(Instrument1DefaultConfig),
-      componentType: 'instrument-component-1',
-    },
-    component: DashBoardComponent,
-    value: { id: buildUUID() },
-  },
-  {
-    id: 'instrument-component-2',
-    layout: {
-      chartOption: instrumentComponent2(Instrument2DefaultConfig),
-      componentType: 'instrument-component-2',
-    },
-    component: DashBoardComponent,
-    value: { id: buildUUID() },
-  },
-  {
-    id: 'digital-dashboard-component',
-    layout: {},
-    component: DigitalDashBoard,
-    value: {},
-  },
-];

+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
+<script lang="ts" setup>
+  import { nextTick, onMounted, ref, unref } from 'vue';
+  import { useScript } from '/@/hooks/web/useScript';
+  import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
+
+  const wrapRef = ref<HTMLDivElement | null>(null);
+  const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
+
+  async function initMap() {
+    await toPromise();
+    await nextTick();
+    const wrapEl = unref(wrapRef);
+    if (!wrapEl) return;
+    const BMap = (window as any).BMap;
+    const map = new BMap.Map(wrapEl);
+    const point = new BMap.Point(116.404, 39.915);
+    map.centerAndZoom(point, 15);
+    map.enableScrollWheelZoom(true);
+  }
+
+  onMounted(() => {
+    initMap();
+  });
+</script>
+
+<template>
+  <div class="w-full h-full flex justify-center items-center">
+    <div ref="wrapRef" class="w-[95%] h-[95%]"></div>
+  </div>
+</template>

+import { ComponentConfig } from '../help';
+
+export const transfromMapComponentConfig: ComponentConfig['transformConfig'] = (
+  _componentConfig,
+  _record,
+  _dataSourceRecord
+) => {
+  return {};
+};

@@ -12,6 +12,7 @@
 
   const isEdit = ref(false);
   const recordId = ref<Nullable<string>>(null);
+  const loading = ref(false);
 
   const [registerModal, { changeLoading, closeModal }] = useModalInner(
     (record: DataBoardRecord & { isEdit: boolean }) => {
@@ -33,6 +34,7 @@
     await method.validate();
     try {
       const value = method.getFieldsValue() as AddDataBoardParams;
+      loading.value = true;
       changeLoading(true);
       await addDataBoard(value);
       createMessage.success('创建成功');
@@ -42,12 +44,14 @@
       createMessage.error('创建失败');
     } finally {
       changeLoading(false);
+      loading.value = false;
     }
   };
 
   const handleEditPanel = async () => {
     await method.validate();
     try {
+      loading.value = true;
       const value = method.getFieldsValue() as UpdateDataBoardParams;
       value.id = unref(recordId) as string;
       changeLoading(true);
@@ -59,6 +63,7 @@
       createMessage.error('编辑失败');
     } finally {
       changeLoading(false);
+      loading.value = false;
     }
   };
 
@@ -75,6 +80,7 @@
     :title="isEdit ? '编辑看板' : '创建看板'"
     @register="registerModal"
     @ok="handleGetValue"
+    :okButtonProps="{ loading }"
   >
     <BasicForm @register="registerForm" />
   </BasicModal>

+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
 <script lang="ts" setup>
   import { computed, ref, watch } from 'vue';
   import { Tooltip, Image as AntImage } from 'ant-design-vue';
   import {
-    DEFAULT_DATE_FORMAT,
+    getUpdateTime,
     DEFAULT_RADIO_RECORD,
     fontSize,
     RadioRecord,
   } from '../../detail/config/util';
-  import { PictureComponentLayout, PictureComponentValue } from './pictureComponent.config';
-  import { dateUtil } from '/@/utils/dateUtil';
+  import { PictureComponentValue } from './pictureComponent.config';
 
   const props = defineProps<{
-    layout?: PictureComponentLayout;
+    layout?: Recordable;
     value?: PictureComponentValue;
     radio?: RadioRecord;
   }>();
@@ -22,8 +26,6 @@
   const getImagBase64 = ref(fallback);
 
   const getRadio = computed(() => {
-    // const { radio } = props.radio || DEFAULT_RADIO_RECORD;
-    // return radio;
     return props.radio || DEFAULT_RADIO_RECORD;
   });
 
@@ -67,26 +69,14 @@
     class="w-full h-full flex flex-col justify-center items-center justify-between widget-picture"
   >
     <AntImage :width="getWidth" :src="getImagBase64" :fallback="fallback" />
-    <!-- <Image :style="{ width: `${getWidth}px` }" :src="getImagBase64" /> -->
     <div
       class="w-full text-center truncate p-5"
       :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }), color: '#999' }"
     >
-      <Tooltip
-        placement="top"
-        :title="
-          props.value?.updateTime
-            ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)
-            : '暂无更新时间'
-        "
-      >
+      <Tooltip placement="top" :title="getUpdateTime(props.value?.updateTime)">
         <span class="mr-1">更新时间:</span>
         <span class="truncate">
-          {{
-            props.value?.updateTime
-              ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)
-              : '暂无更新时间'
-          }}
+          {{ getUpdateTime(props.value?.updateTime) }}
         </span>
       </Tooltip>
     </div>

 import PictureComponent from './PictureComponent.vue';
 
-import { PictureComponentType } from './pictureComponent.config';
-import { Component } from 'vue';
-
-interface PictureComponentList {
-  id: PictureComponentType;
-  component: Component;
-}
-// {
-//   id: 'instrument-component-1',
-//   layout: { chartOption: instrumentComponent1() },
-//   component: DashBoardComponent,
-//   value: { id: buildUUID() },
-// }
-const pictureComponentList: PictureComponentList[] = [
-  {
-    id: 'picture-component-1',
-    component: PictureComponent,
-  },
-];
-
-export { PictureComponent, pictureComponentList };
+export { PictureComponent };

 import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
 
-export type PictureComponentType = 'picture-component-1';
-
-export interface PictureComponentLayout {}
-
 export interface PictureComponentValue {
   value?: string;
   updateTime?: string;
 }
 
 export const transformPictureConfig = (
-  config: PictureComponentLayout,
-  record: DataComponentRecord,
+  _config: Recordable,
+  _record: DataComponentRecord,
   dataSourceRecord: DataSource
 ) => {
   const componentInfo = dataSourceRecord.componentInfo;

+<script lang="ts">
+  export default {
+    inheritAttrs: false,
+  };
+</script>
 <script lang="ts" setup>
   import { computed } from 'vue';
   import { Statistic, Tooltip } from 'ant-design-vue';
   import {
+    getUpdateTime,
     fontSize,
     RadioRecord,
     DEFAULT_RADIO_RECORD,
-    DEFAULT_DATE_FORMAT,
   } from '../../detail/config/util';
   import { TextComponentDefaultConfig, TextComponentLayout, TextComponentValue } from './config';
   import { SvgIcon } from '/@/components/Icon';
-  import { dateUtil } from '/@/utils/dateUtil';
   const props = defineProps({
     layout: {
       type: Object as PropType<TextComponentLayout>,
@@ -47,8 +51,6 @@
   });
 
   const getRadio = computed(() => {
-    // const { radio } = props.radio;
-    // return radio;
     return props.radio || DEFAULT_RADIO_RECORD;
   });
 </script>
@@ -84,37 +86,21 @@
             />
           </div>
           <div :style="{ color: '#666', fontSize: fontSize({ radioRecord: getRadio, basic: 16 }) }">
-            <!-- {{ getShowUnit ? props.value.unit : '' }} -->
             {{ props.value.name }}
           </div>
-          <!-- <div class="truncate" :style="{ fontSize: fontSize({ radio: getRadio, basic: 16 }) }">
-            {{ props.value.name }}
-          </div> -->
         </div>
       </div>
     </div>
 
     <div class="text-center text-xs truncate p-5" style="color: #999">
-      <Tooltip
-        v-if="getShowUpdate"
-        placement="top"
-        :title="
-          props.value?.updateTime
-            ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)
-            : '暂无更新时间'
-        "
-      >
+      <Tooltip v-if="getShowUpdate" placement="top" :title="getUpdateTime(props.value?.updateTime)">
         <div
           :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }) }"
           class="truncate"
         >
           <span class="mr-1">更新时间:</span>
           <span class="truncate">
-            {{
-              props.value?.updateTime
-                ? dateUtil(props?.value?.updateTime).format(DEFAULT_DATE_FORMAT)
-                : '暂无更新时间'
-            }}
+            {{ getUpdateTime(props.value?.updateTime) }}
           </span>
         </div>
       </Tooltip>

@@ -18,13 +18,6 @@ export interface TextComponentValue {
   deviceName?: string;
 }
 
-export type TextComponentType =
-  | 'text-component-1'
-  | 'text-component-2'
-  | 'text-component-3'
-  | 'text-component-4'
-  | 'text-component-5';
-
 type TextComponentDefault = TextComponentLayout;
 
 export const TextComponent1Config: TextComponentDefault = {
@@ -32,10 +25,6 @@ export const TextComponent1Config: TextComponentDefault = {
   base: true,
 };
 
-export const TextComponent2Config: TextComponentDefault = {
-  id: 'text-component-2',
-  base: false,
-};
 export const TextComponent3Config: TextComponentDefault = {
   id: 'text-component-3',
   base: false,
@@ -62,17 +51,9 @@ export const TextComponentDefaultConfig: Partial<ComponentInfo> = {
   icon: 'shuiwen',
 };
 
-export const textComponentConfig: TextComponentDefault[] = [
-  TextComponent1Config,
-  // TextComponent2Config,
-  TextComponent3Config,
-  TextComponent4Config,
-  TextComponent5Config,
-];
-
 export const transformTextComponentConfig = (
   config: TextComponentDefault,
-  record: DataComponentRecord,
+  _record: DataComponentRecord,
   dataSourceRecord: DataSource
 ) => {
   return {

@@ -3,8 +3,11 @@
   import { DropMenu } from '/@/components/Dropdown';
   import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
   import { Tooltip } from 'ant-design-vue';
-  // import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
-  import { isBataBoardSharePage, MoreActionEvent } from '../../config/config';
+  import {
+    isBataBoardSharePage,
+    MoreActionEvent,
+    VisualComponentPermission,
+  } from '../../config/config';
   import { computed } from '@vue/reactivity';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { DataSource } from '/@/api/dataBoard/model';
@@ -19,9 +22,9 @@
   const { hasPermission } = usePermission();
   const dropMenuList = computed<DropMenu[]>(() => {
     const basicMenu: DropMenu[] = [];
-    const hasUpdatePermission = hasPermission('api:yt:data_component:update:update');
-    const hasDeletePermission = hasPermission('api:yt:data_component:delete');
-    const hasCopyPermission = hasPermission('api:yt:dataBoardDetail:copy');
+    const hasUpdatePermission = hasPermission(VisualComponentPermission.UPDATE);
+    const hasDeletePermission = hasPermission(VisualComponentPermission.DELETE);
+    const hasCopyPermission = hasPermission(VisualComponentPermission.COPY);
     if (hasUpdatePermission)
       basicMenu.push({
         text: '编辑组件',
@@ -69,7 +72,6 @@
         >
           <Tooltip :title="item.deviceName" placement="topLeft">
             <div class="flex p-1">
-              <!-- <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" /> -->
               <div class="truncate font-bold">{{ item.deviceRename || item.deviceName }}</div>
             </div>
           </Tooltip>

 <script lang="ts" setup>
-  import { useSlots } from 'vue';
   import { useUpdateCenter } from '../../hook/useUpdateCenter';
   import { FrontDataSourceRecord } from '../../types/type';
-  // import type { WidgetWrapperRegister } from './type';
-  // import { DataSource } from '/@/api/dataBoard/model';
 
   const props = defineProps<{
     dataSource: FrontDataSourceRecord[];
   }>();
 
-  const slot = useSlots();
-
   const { update, add, remove } = useUpdateCenter();
 
   defineExpose({ update });
@@ -20,7 +15,7 @@
   <section class="widget">
     <slot name="header"></slot>
 
-    <div class="widget-content" :style="{ height: slot.header ? 'calc(100% - 22px)' : '100%' }">
+    <div class="widget-content">
       <div
         v-for="item in props.dataSource"
         :key="item.id"
@@ -28,10 +23,7 @@
         class="widget-item"
       >
         <div class="widget-box">
-          <div
-            class="widget-controls-container"
-            :style="{ height: slot.footer ? 'calc(100% - 20px)' : '100%' }"
-          >
+          <div class="widget-controls-container">
             <slot
               name="controls"
               :record="item"
@@ -40,12 +32,6 @@
               :update="update"
             ></slot>
           </div>
-          <div class="widget-value">
-            <slot name="value" :record="item"></slot>
-          </div>
-          <div class="widget-label">
-            <slot name="label" :record="item"></slot>
-          </div>
         </div>
       </div>
     </div>
@@ -61,14 +47,14 @@
     height: 100%;
     background-color: #fff;
     border-radius: 3px;
-    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
   }
+
   .widget-content {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
-
     width: 100%;
     height: 100%;
   }
@@ -94,7 +80,7 @@
   .widget-controls-container {
     flex: 1 1 auto;
     width: 100%;
-    height: calc(100% - 20px);
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;

-// import { DataBoardLayoutInfo } from '../../types/type';
-
-// export type WidgetWrapperRegister = (dataSource: DataBoardLayoutInfo['record'][]) => any;

+import {
+  TextComponent1Config,
+  TextComponent3Config,
+  TextComponent4Config,
+  TextComponent5Config,
+  TextComponentDefaultConfig,
+  transformTextComponentConfig,
+} from './TextComponent/config';
+import { ComponentInfo } from '/@/api/dataBoard/model';
+import { transformPictureConfig } from './PictureComponent/pictureComponent.config';
+import {
+  DashboardComponentLayout,
+  Instrument1DefaultConfig,
+  Instrument2DefaultConfig,
+  instrumentComponent1,
+  instrumentComponent2,
+  transformDashboardComponentConfig,
+} from './InstrumentComponent/dashBoardComponent.config';
+import { DigitalComponentDefaultConfig } from './InstrumentComponent/digitalDashBoard.config';
+import { transformControlConfig } from './ControlComponent/control.config';
+
+import TextComponent from './TextComponent/TextComponent.vue';
+import DashBoardComponent from './InstrumentComponent/DashBoardComponent.vue';
+import PictureComponent from './PictureComponent/PictureComponent.vue';
+import DigitalDashBoard from './InstrumentComponent/DigitalDashBoard.vue';
+import ToggleSwitch from './ControlComponent/ToggleSwitch.vue';
+import SlidingSwitch from './ControlComponent/SlidingSwitch.vue';
+import SwitchWithIcon from './ControlComponent/SwitchWithIcon.vue';
+import MapComponent from './MapComponent/MapComponent.vue';
+import { transfromMapComponentConfig } from './MapComponent/map.config';
+import { ComponentConfig } from '../types/type';
+import { FrontComponent, FrontComponentCategory } from '../const/const';
+
+export const frontComponentDefaultConfigMap = new Map<FrontComponent, Partial<ComponentInfo>>();
+
+export const frontComponentMap = new Map<FrontComponent, ComponentConfig>();
+
+frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, {
+  Component: TextComponent,
+  ComponentName: '文本组件1',
+  ComponentKey: FrontComponent.TEXT_COMPONENT_1,
+  ComponentConfig: TextComponent1Config,
+  ComponentCategory: FrontComponentCategory.TEXT,
+  transformConfig: transformTextComponentConfig,
+});
+
+frontComponentMap.set(FrontComponent.TEXT_COMPONENT_3, {
+  Component: TextComponent,
+  ComponentName: '文本组件2',
+  ComponentKey: FrontComponent.TEXT_COMPONENT_3,
+  ComponentConfig: TextComponent3Config,
+  ComponentCategory: FrontComponentCategory.TEXT,
+  transformConfig: transformTextComponentConfig,
+});
+
+frontComponentMap.set(FrontComponent.TEXT_COMPONENT_4, {
+  Component: TextComponent,
+  ComponentName: '文本组件3',
+  ComponentKey: FrontComponent.TEXT_COMPONENT_4,
+  ComponentConfig: TextComponent4Config,
+  ComponentCategory: FrontComponentCategory.TEXT,
+  transformConfig: transformTextComponentConfig,
+});
+
+frontComponentMap.set(FrontComponent.TEXT_COMPONENT_5, {
+  Component: TextComponent,
+  ComponentName: '文本组件4',
+  ComponentKey: FrontComponent.TEXT_COMPONENT_5,
+  ComponentConfig: TextComponent5Config,
+  ComponentCategory: FrontComponentCategory.TEXT,
+  transformConfig: transformTextComponentConfig,
+});
+
+frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, {
+  Component: DashBoardComponent,
+  ComponentName: '仪表盘',
+  ComponentKey: FrontComponent.INSTRUMENT_COMPONENT_1,
+  ComponentConfig: {
+    chartOption: instrumentComponent1(Instrument1DefaultConfig),
+    componentType: FrontComponent.INSTRUMENT_COMPONENT_1,
+  } as DashboardComponentLayout,
+  ComponentCategory: FrontComponentCategory.INSTRUMENT,
+  transformConfig: transformDashboardComponentConfig,
+});
+
+frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, {
+  Component: DashBoardComponent,
+  ComponentName: '阶段仪表盘',
+  ComponentKey: FrontComponent.INSTRUMENT_COMPONENT_2,
+  ComponentConfig: {
+    chartOption: instrumentComponent2(Instrument2DefaultConfig),
+    componentType: FrontComponent.INSTRUMENT_COMPONENT_2,
+  } as DashboardComponentLayout,
+  ComponentCategory: FrontComponentCategory.INSTRUMENT,
+  transformConfig: transformDashboardComponentConfig,
+});
+
+frontComponentMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, {
+  Component: DigitalDashBoard,
+  ComponentName: '数字仪表盘',
+  ComponentKey: FrontComponent.DIGITAL_DASHBOARD_COMPONENT,
+  ComponentCategory: FrontComponentCategory.INSTRUMENT,
+  transformConfig: transformDashboardComponentConfig,
+});
+
+frontComponentMap.set(FrontComponent.PICTURE_COMPONENT_1, {
+  Component: PictureComponent,
+  ComponentName: '图片组件',
+  ComponentKey: FrontComponent.PICTURE_COMPONENT_1,
+  ComponentCategory: FrontComponentCategory.PICTURE,
+  transformConfig: transformPictureConfig,
+});
+
+frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_SWITCH_WITH_ICON, {
+  Component: SwitchWithIcon,
+  ComponentName: '控制按钮1',
+  ComponentKey: FrontComponent.CONTROL_COMPONENT_SWITCH_WITH_ICON,
+  ComponentCategory: FrontComponentCategory.CONTROL,
+  transformConfig: transformControlConfig,
+});
+
+frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_SLIDING_SWITCH, {
+  Component: SlidingSwitch,
+  ComponentName: '控制按钮2',
+  ComponentKey: FrontComponent.CONTROL_COMPONENT_SLIDING_SWITCH,
+  ComponentCategory: FrontComponentCategory.CONTROL,
+  transformConfig: transformControlConfig,
+});
+
+frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, {
+  Component: ToggleSwitch,
+  ComponentName: '控制按钮3',
+  ComponentKey: FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH,
+  ComponentCategory: FrontComponentCategory.CONTROL,
+  transformConfig: transformControlConfig,
+});
+
+frontComponentMap.set(FrontComponent.MAP_COMPONENT_TRACK, {
+  Component: MapComponent,
+  ComponentName: '实时轨迹',
+  ComponentKey: FrontComponent.MAP_COMPONENT_TRACK,
+  ComponentCategory: FrontComponentCategory.MAP,
+  transformConfig: transfromMapComponentConfig,
+});
+
+frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_1, TextComponentDefaultConfig);
+frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_3, TextComponentDefaultConfig);
+frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_4, TextComponentDefaultConfig);
+frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_5, TextComponentDefaultConfig);
+
+frontComponentDefaultConfigMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, Instrument1DefaultConfig);
+frontComponentDefaultConfigMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, Instrument2DefaultConfig);
+
+frontComponentDefaultConfigMap.set(
+  FrontComponent.DIGITAL_DASHBOARD_COMPONENT,
+  DigitalComponentDefaultConfig
+);
+
+export const getComponentDefaultConfig = (key: FrontComponent) => {
+  return frontComponentDefaultConfigMap.get(key) || {};
+};

-import { Component } from 'vue';
-import IndicatorLight from '../cpns/IndicatorLight.vue';
-
-export const dashboardComponentMap = new Map<string, Component>();
-
-dashboardComponentMap.set('IndicatorLight', IndicatorLight);

@@ -4,7 +4,19 @@ export enum MoreActionEvent {
   DELETE = 'delete',
 }
 
-// export enum
+export enum VisualBoardPermission {
+  UPDATE = 'api:yt:data_board:update:update',
+  DELETE = 'api:yt:data_board:delete',
+  CREATE = '',
+  DETAIL = 'api:yt:data_component:list',
+}
+
+export enum VisualComponentPermission {
+  UPDATE = 'api:yt:data_component:update:update',
+  DELETE = 'api:yt:data_component:delete',
+  COPY = 'api:yt:dataBoardDetail:copy',
+  CREATE = 'api:yt:data_component:add:post',
+}
 
 export const DEFAULT_MAX_COL = 24;
 export const DEFAULT_WIDGET_WIDTH = 6;

+export enum FrontComponentCategory {
+  TEXT = 'text',
+  PICTURE = 'picture',
+  INSTRUMENT = 'instrument',
+  CONTROL = 'control',
+  MAP = 'map',
+}
+
+export const FrontComponentCategoryName = {
+  [FrontComponentCategory.TEXT]: '文本组件',
+  [FrontComponentCategory.INSTRUMENT]: '仪表组件',
+  [FrontComponentCategory.CONTROL]: '控制组件',
+  [FrontComponentCategory.PICTURE]: '图片组件',
+  [FrontComponentCategory.MAP]: '地图组件',
+};
+
+export enum FrontComponent {
+  TEXT_COMPONENT_1 = 'text-component-1',
+  TEXT_COMPONENT_2 = 'text-component-2',
+  TEXT_COMPONENT_3 = 'text-component-3',
+  TEXT_COMPONENT_4 = 'text-component-4',
+  TEXT_COMPONENT_5 = 'text-component-5',
+  INSTRUMENT_COMPONENT_1 = 'instrument-component-1',
+  INSTRUMENT_COMPONENT_2 = 'instrument-component-2',
+  DIGITAL_DASHBOARD_COMPONENT = 'digital-dashboard-component',
+  PICTURE_COMPONENT_1 = 'picture-component-1',
+  CONTROL_COMPONENT_TOGGLE_SWITCH = 'control-component-toggle-switch',
+  CONTROL_COMPONENT_SWITCH_WITH_ICON = 'control-component-switch-with-icon',
+  CONTROL_COMPONENT_SLIDING_SWITCH = 'control-component-sliding-switch',
+  MAP_COMPONENT_TRACK = 'map-component-track',
+}
+
+export enum Gradient {
+  FIRST = 'first',
+  SECOND = 'second',
+  THIRD = 'third',
+}
+export enum GradientColor {
+  FIRST = '#67e0e3',
+  SECOND = '#37a2da',
+  THIRD = '#fd666d',
+}
+
+export enum visualOptionField {
+  FONT_COLOR = 'fontColor',
+  UNIT = 'unit',
+  ICON_COLOR = 'iconColor',
+  ICON = 'icon',
+  FIRST_PHASE_COLOR = 'firstPhaseColor',
+  SECOND_PHASE_COLOR = 'secondPhaseColor',
+  THIRD_PHASE_COLOR = 'thirdPhaseColor',
+  FIRST_PHASE_VALUE = 'firstPhaseValue',
+  SECOND_PHASE_VALUE = 'secondPhaseValue',
+  THIRD_PHASE_VALUE = 'thirdPhaseValue',
+}

@@ -2,17 +2,17 @@
   import { CopyOutlined, DeleteOutlined, SettingOutlined } from '@ant-design/icons-vue';
   import { Tooltip, Button } from 'ant-design-vue';
   import { FormActionType, useForm } from '/@/components/Form';
-  import { basicSchema, dataSourceSchema } from '../config/basicConfiguration';
+  import { basicSchema } from '../config/basicConfiguration';
   import BasicForm from '/@/components/Form/src/BasicForm.vue';
-  import { ref, shallowReactive, unref, nextTick, watch } from 'vue';
+  import { ref, shallowReactive, unref, nextTick, watch, computed } from 'vue';
   import VisualOptionsModal from './VisualOptionsModal.vue';
   import { useModal } from '/@/components/Modal';
   import { buildUUID } from '/@/utils/uuid';
   import type { ComponentInfo, DataSource } from '/@/api/dataBoard/model';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { DataBoardLayoutInfo } from '../../types/type';
-  import { FrontComponent } from '../config/help';
-  import { computed } from '@vue/reactivity';
+  import { getDataSourceComponent } from './DataSourceForm/help';
+  import { FrontComponent } from '../../const/const';
 
   type DataSourceFormEL = { [key: string]: Nullable<FormActionType> };
 
@@ -20,7 +20,7 @@
 
   const props = defineProps<{
     record: DataBoardLayoutInfo;
-    frontId?: string;
+    frontId?: FrontComponent;
     defaultConfig?: Partial<ComponentInfo>;
   }>();
 
@@ -39,7 +39,7 @@
   const dataSourceEl = shallowReactive<DataSourceFormEL>({} as unknown as DataSourceFormEL);
 
   const setFormEl = (el: any, id: string) => {
-    if (!dataSourceEl[id] && el) {
+    if (id && el) {
       const { formActionType } = el as unknown as { formActionType: FormActionType };
       dataSourceEl[id] = formActionType;
     }
@@ -112,8 +112,6 @@
       return;
     }
 
-    // const defaultConfig = getComponentDefaultConfig(props.frontId as WidgetComponentType);
-
     const componentInfo: ComponentInfo = {
       ...(props.defaultConfig || {}),
       ...(item.componentInfo || {}),
@@ -177,6 +175,10 @@
     ~index && (unref(dataSource)[index].componentInfo = value);
   };
 
+  const dataSourceComponent = computed(() => {
+    return getDataSourceComponent(props.frontId as FrontComponent);
+  });
+
   defineExpose({
     getAllDataSourceFieldValue,
     validate,
@@ -198,17 +200,8 @@
         选择设备
       </div>
       <div class="pl-2 flex-auto">
-        <BasicForm
-          :ref="(el) => setFormEl(el, item.id)"
-          :schemas="dataSourceSchema"
-          class="w-full flex-1 data-source-form"
-          :show-action-button-group="false"
-          :row-props="{
-            gutter: 10,
-          }"
-          layout="inline"
-          :label-col="{ span: 0 }"
-        />
+        <!-- <BasicDataSourceForm /> -->
+        <component :is="dataSourceComponent" :ref="(el) => setFormEl(el, item.id)" />
       </div>
       <div class="flex justify-center gap-3 w-24">
         <Tooltip title="复制">

@@ -12,7 +12,7 @@
   import { decode } from '../../config/config';
   import { ComponentInfo } from '/@/api/dataBoard/model';
   import { useCalcGridLayout } from '../../hook/useCalcGridLayout';
-  import { FrontComponent } from '../config/help';
+  import { FrontComponent } from '../../const/const';
 
   interface DataComponentRouteParams extends RouteParams {
     id: string;
@@ -23,9 +23,9 @@
   }>();
 
   const emit = defineEmits(['update', 'create', 'register']);
-
   const ROUTE = useRoute();
 
+  const loading = ref(false);
   const { createMessage } = useMessage();
 
   const boardId = computed(() => {
@@ -62,11 +62,15 @@
   };
 
   const handleSubmit = async () => {
-    const { getAllDataSourceFieldValue, validate } = unref(basicConfigurationEl)!;
-    await validate();
-    const value = getAllDataSourceFieldValue();
-    unref(isEdit) ? handleUpdateComponent(value) : handleAddComponent(value);
-    resetForm();
+    try {
+      const { getAllDataSourceFieldValue, validate } = unref(basicConfigurationEl)!;
+      await validate();
+      const value = getAllDataSourceFieldValue();
+      unref(isEdit) ? handleUpdateComponent(value) : handleAddComponent(value);
+      resetForm();
+    } catch (error: unknown) {
+      window.console.error(error);
+    }
   };
 
   const { calcLayoutInfo } = useCalcGridLayout();
@@ -78,6 +82,7 @@
       }
       const layout = calcLayoutInfo(unref(props.layout));
       changeOkLoading(true);
+      loading.value = true;
       await addDataComponent({
         boardId: unref(boardId),
         record: { dataBoardId: unref(boardId), frontId: unref(frontId), ...value, layout },
@@ -90,12 +95,14 @@
       // createMessage.error('创建失败');
     } finally {
       changeOkLoading(false);
+      loading.value = false;
     }
   };
 
   const handleUpdateComponent = async (value: Recordable) => {
     try {
       changeOkLoading(true);
+      loading.value = true;
       const res = await updateDataComponent({
         boardId: unref(boardId),
         record: {
@@ -113,6 +120,7 @@
       // createMessage.error('修改失败');
     } finally {
       changeOkLoading(false);
+      loading.value = false;
     }
   };
 
@@ -130,10 +138,11 @@
     :destroy-on-close="true"
     @ok="handleSubmit"
     @cancel="resetForm"
+    :ok-button-props="{ loading }"
   >
     <section>
       <Tabs type="card">
-        <Tabs.TabPane key="1" tab="基础配置">
+        <Tabs.TabPane key="basicConfig" tab="基础配置">
           <BasicConfiguration
             ref="basicConfigurationEl"
             :front-id="frontId"
@@ -141,7 +150,7 @@
             :defaultConfig="componentDefaultConfig"
           />
         </Tabs.TabPane>
-        <Tabs.TabPane key="2" tab="可视化配置">
+        <Tabs.TabPane key="visualConfig" tab="可视化配置">
           <VisualConfiguration v-model:value="frontId" @change="handleComponentCheckedChange" />
         </Tabs.TabPane>
       </Tabs>

+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { dataSourceSchema } from '../../config/basicConfiguration';
+  import { FormActionType } from '/@/components/Form';
+  import BasicForm from '/@/components/Form/src/BasicForm.vue';
+  const formEl = ref<Nullable<FormActionType>>(null);
+
+  defineExpose({ formActionType: formEl });
+</script>
+
+<template>
+  <BasicForm
+    ref="formEl"
+    :schemas="dataSourceSchema"
+    class="w-full flex-1 data-source-form"
+    :show-action-button-group="false"
+    :row-props="{
+      gutter: 10,
+    }"
+    layout="inline"
+    :label-col="{ span: 0 }"
+  />
+</template>

+<script lang="ts" setup>
+  import { ref, unref } from 'vue';
+  import { BasicForm, FormActionType } from '/@/components/Form';
+  import { controlFormSchema } from '../../config/basicConfiguration';
+
+  const formEl = ref<Nullable<FormActionType>>();
+
+  const setFormEl = (el: any) => {
+    formEl.value = el;
+  };
+
+  const getFieldsValue = () => {
+    return unref(formEl)!.getFieldsValue();
+  };
+
+  const validate = async () => {
+    await unref(formEl)!.validate();
+  };
+
+  const setFieldsValue = async (record: Recordable) => {
+    await unref(formEl)!.setFieldsValue(record);
+  };
+
+  const clearValidate = async (name?: string | string[]) => {
+    await unref(formEl)!.clearValidate(name);
+  };
+  defineExpose({
+    formActionType: { getFieldsValue, validate, setFieldsValue, clearValidate },
+  });
+</script>
+
+<template>
+  <div class="w-full flex-1">
+    <BasicForm
+      :ref="(el) => setFormEl(el)"
+      :schemas="controlFormSchema"
+      class="w-full flex-1 data-source-form"
+      :show-action-button-group="false"
+      :row-props="{
+        gutter: 10,
+      }"
+      layout="inline"
+      :label-col="{ span: 0 }"
+    />
+  </div>
+</template>

+import { Component } from 'vue';
+import { FrontComponent } from '../../../const/const';
+import BasicDataSourceForm from './BasicDataSourceForm.vue';
+import ControlDataSourceForm from './ControlDataSourceForm.vue';
+
+const dataSourceComponentMap = new Map<FrontComponent, Component>();
+
+dataSourceComponentMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, ControlDataSourceForm);
+
+export const getDataSourceComponent = (frontId: FrontComponent) => {
+  if (dataSourceComponentMap.has(frontId)) return dataSourceComponentMap.get(frontId)!;
+  return BasicDataSourceForm;
+};

 <script lang="ts" setup>
   import { Tabs, List } from 'ant-design-vue';
   import VisualWidgetSelect from './VisualWidgetSelect.vue';
-  import TextComponent from '../../components/TextComponent/TextComponent.vue';
-  import { textComponentConfig } from '../../components/TextComponent/config';
-  import { instrumentComponentConfig } from '../../components/InstrumentComponent';
-  import { pictureComponentList } from '../../components/PictureComponent';
-  import { getComponentDefaultConfig } from '../config/help';
-  import { WidgetComponentType } from '../config/visualOptions';
+  import { getComponentDefaultConfig } from '../../components/help';
+  import { frontComponentMap } from '../../components/help';
+  import { computed } from 'vue';
+  import {
+    FrontComponent,
+    FrontComponentCategory,
+    FrontComponentCategoryName,
+  } from '../../const/const';
+
+  interface DataSource {
+    category: string;
+    categoryName: string;
+    list: Recordable[];
+  }
   const props = defineProps<{
     value: string;
   }>();
@@ -14,7 +22,25 @@
 
   const grid = { gutter: 10, column: 1, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 4 };
 
-  const handleCheck = (checked: WidgetComponentType) => {
+  const getDataSource = computed(() => {
+    const _dataSource = Array.from(frontComponentMap.values());
+    const category = new Map<FrontComponentCategory, DataSource>();
+    for (const item of _dataSource) {
+      if (category.has(item.ComponentCategory)) {
+        const value = category.get(item.ComponentCategory)!;
+        value.list.push(item);
+        continue;
+      }
+      category.set(item.ComponentCategory, {
+        category: item.ComponentCategory,
+        categoryName: FrontComponentCategoryName[item.ComponentCategory],
+        list: [item],
+      });
+    }
+    return Array.from(category.values());
+  });
+
+  const handleCheck = (checked: FrontComponent) => {
     const defaultConfig = getComponentDefaultConfig(checked);
     emit('update:value', checked);
     emit('change', defaultConfig);
@@ -24,51 +50,25 @@
 <template>
   <section>
     <Tabs>
-      <Tabs.TabPane key="1" tab="文本组件">
-        <List :grid="grid" :data-source="textComponentConfig">
-          <template #renderItem="{ item }">
-            <List.Item class="!flex !justify-center">
-              <VisualWidgetSelect
-                :checked-id="props.value"
-                :control-id="item.id"
-                @change="handleCheck"
-              >
-                <TextComponent :layout="item" :value="item.value" />
-              </VisualWidgetSelect>
-            </List.Item>
-          </template>
-        </List>
-      </Tabs.TabPane>
-      <Tabs.TabPane key="2" tab="图片组件">
-        <List :grid="grid" :data-source="pictureComponentList">
-          <template #renderItem="{ item }">
-            <List.Item class="!flex !justify-center">
-              <VisualWidgetSelect
-                :checked-id="props.value"
-                :control-id="item.id"
-                @change="handleCheck"
-              >
-                <component :is="item.component" />
-              </VisualWidgetSelect>
-            </List.Item>
-          </template>
-        </List>
-      </Tabs.TabPane>
-      <Tabs.TabPane key="3" tab="仪表组件">
-        <List :grid="grid" :data-source="instrumentComponentConfig">
+      <Tabs.TabPane
+        v-for="category in getDataSource"
+        :key="category.category"
+        :tab="category.categoryName"
+      >
+        <List :grid="grid" :data-source="category.list">
           <template #renderItem="{ item }">
             <List.Item class="!flex !justify-center">
               <VisualWidgetSelect
                 :checked-id="props.value"
-                :control-id="item.id"
+                :control-id="item.ComponentKey"
                 @change="handleCheck"
               >
-                <component
-                  :is="item.component"
-                  :random="true"
-                  :layout="item.layout"
-                  :value="item.value"
-                />
+                <template #default>
+                  <component :is="item.Component" :random="true" :layout="item.ComponentConfig" />
+                </template>
+                <template #description>
+                  {{ item.ComponentName || '选择' }}
+                </template>
               </VisualWidgetSelect>
             </List.Item>
           </template>

 <script lang="ts" setup>
   import { ref, unref } from 'vue';
-  import {
-    WidgetComponentType,
-    schemasMap,
-    VisualOptionParams,
-    visualOptionField,
-    Gradient,
-  } from '../config/visualOptions';
+  import { schemasMap, VisualOptionParams } from '../config/visualOptions';
   import { useForm, BasicForm } from '/@/components/Form';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { ComponentInfo } from '/@/api/dataBoard/model';
   import { computed } from '@vue/reactivity';
+  import { FrontComponent, Gradient, visualOptionField } from '../../const/const';
 
   const emit = defineEmits(['close', 'register']);
 
@@ -21,7 +16,7 @@
   const recordId = ref('');
 
   const getSchemas = computed(() => {
-    return schemasMap.get((props.value as WidgetComponentType) || 'text-component-1');
+    return schemasMap.get((props.value as FrontComponent) || 'text-component-1');
   });
 
   const [registerForm, method] = useForm({

@@ -30,16 +30,19 @@
       <slot></slot>
     </div>
     <Card.Meta>
-      <template #description> 选择 </template>
+      <template #description>
+        <slot name="description"></slot>
+      </template>
     </Card.Meta>
   </Card>
 </template>
 
 <style scoped>
   .widget-select {
-    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
     border-width: 2px;
   }
+
   .widget-select:deep(.ant-card-body) {
     /* height: 240px; */
     width: 240px;

@@ -217,3 +217,24 @@ export const dataSourceSchema: FormSchema[] = [
     },
   },
 ];
+
+export const controlFormSchema: FormSchema[] = [
+  {
+    field: DataSourceField.DEVICE_RENAME,
+    component: 'Input',
+    label: '设备',
+    colProps: { span: 8 },
+    componentProps: {
+      placeholder: '设备重命名',
+    },
+  },
+  {
+    field: DataSourceField.ATTRIBUTE_RENAME,
+    component: 'Input',
+    label: '属性',
+    colProps: { span: 8 },
+    componentProps: {
+      placeholder: '属性重命名',
+    },
+  },
+];

-import { Component } from 'vue';
-import TextComponent from '../../components/TextComponent/TextComponent.vue';
-import {
-  TextComponent1Config,
-  TextComponent2Config,
-  TextComponent3Config,
-  TextComponent4Config,
-  TextComponent5Config,
-  TextComponentDefaultConfig,
-  transformTextComponentConfig,
-} from '../../components/TextComponent/config';
-import { ComponentInfo, DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
-import DashBoardComponent from '../../components/InstrumentComponent/DashBoardComponent.vue';
-import PictureComponent from '../../components/PictureComponent/PictureComponent.vue';
-import { transformPictureConfig } from '../../components/PictureComponent/pictureComponent.config';
-import { WidgetComponentType } from './visualOptions';
-import {
-  DashboardComponentLayout,
-  Instrument1DefaultConfig,
-  Instrument2DefaultConfig,
-  instrumentComponent1,
-  instrumentComponent2,
-  transformDashboardComponentConfig,
-} from '../../components/InstrumentComponent/dashBoardComponent.config';
-import DigitalDashBoard from '../../components/InstrumentComponent/DigitalDashBoard.vue';
-import { DigitalComponentDefaultConfig } from '../../components/InstrumentComponent/digitalDashBoard.config';
-export enum FrontComponent {
-  TEXT_COMPONENT_1 = 'text-component-1',
-  TEXT_COMPONENT_2 = 'text-component-2',
-  TEXT_COMPONENT_3 = 'text-component-3',
-  TEXT_COMPONENT_4 = 'text-component-4',
-  TEXT_COMPONENT_5 = 'text-component-5',
-  INSTRUMENT_COMPONENT_1 = 'instrument-component-1',
-  INSTRUMENT_COMPONENT_2 = 'instrument-component-2',
-  DIGITAL_DASHBOARD_COMPONENT = 'digital-dashboard-component',
-  PICTURE_COMPONENT_1 = 'picture-component-1',
-}
-
-export interface ComponentConfig {
-  Component: Component;
-  ComponentConfig: Recordable;
-  transformConfig: (
-    ComponentConfig: Recordable,
-    record: DataComponentRecord,
-    dataSourceRecord: DataSource
-  ) => Recordable;
-}
-
-export const frontComponentDefaultConfigMap = new Map<
-  WidgetComponentType,
-  Partial<ComponentInfo>
->();
-
-export const frontComponentMap = new Map<WidgetComponentType, ComponentConfig>();
-
-frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, {
-  Component: TextComponent,
-  ComponentConfig: TextComponent1Config,
-  transformConfig: transformTextComponentConfig,
-});
-
-frontComponentMap.set(FrontComponent.TEXT_COMPONENT_2, {
-  Component: TextComponent,
-  ComponentConfig: TextComponent2Config,
-  transformConfig: transformTextComponentConfig,
-});
-
-frontComponentMap.set(FrontComponent.TEXT_COMPONENT_3, {
-  Component: TextComponent,
-  ComponentConfig: TextComponent3Config,
-  transformConfig: transformTextComponentConfig,
-});
-
-frontComponentMap.set(FrontComponent.TEXT_COMPONENT_4, {
-  Component: TextComponent,
-  ComponentConfig: TextComponent4Config,
-  transformConfig: transformTextComponentConfig,
-});
-
-frontComponentMap.set(FrontComponent.TEXT_COMPONENT_5, {
-  Component: TextComponent,
-  ComponentConfig: TextComponent5Config,
-  transformConfig: transformTextComponentConfig,
-});
-
-frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, {
-  Component: DashBoardComponent,
-  ComponentConfig: {
-    chartOption: instrumentComponent1(),
-    componentType: FrontComponent.INSTRUMENT_COMPONENT_1,
-  } as DashboardComponentLayout,
-  transformConfig: transformDashboardComponentConfig,
-});
-
-frontComponentMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, {
-  Component: DashBoardComponent,
-  ComponentConfig: {
-    chartOption: instrumentComponent2(),
-    componentType: FrontComponent.INSTRUMENT_COMPONENT_2,
-  } as DashboardComponentLayout,
-  transformConfig: transformDashboardComponentConfig,
-});
-
-frontComponentMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, {
-  Component: DigitalDashBoard,
-  ComponentConfig: {},
-  transformConfig: transformDashboardComponentConfig,
-});
-
-frontComponentMap.set(FrontComponent.PICTURE_COMPONENT_1, {
-  Component: PictureComponent,
-  ComponentConfig: {},
-  transformConfig: transformPictureConfig,
-});
-
-frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_1, TextComponentDefaultConfig);
-frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_2, TextComponentDefaultConfig);
-frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_3, TextComponentDefaultConfig);
-frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_4, TextComponentDefaultConfig);
-frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_5, TextComponentDefaultConfig);
-
-frontComponentDefaultConfigMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, Instrument1DefaultConfig);
-frontComponentDefaultConfigMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, Instrument2DefaultConfig);
-
-frontComponentDefaultConfigMap.set(
-  FrontComponent.DIGITAL_DASHBOARD_COMPONENT,
-  DigitalComponentDefaultConfig
-);
-
-export const getComponentDefaultConfig = (key: WidgetComponentType) => {
-  return frontComponentDefaultConfigMap.get(key) || {};
-};

+import { dateUtil } from '/@/utils/dateUtil';
+
 export interface RadioRecord {
   width: number;
   height: number;
@@ -16,6 +18,10 @@ export const DEFAULT_RADIO_RECORD: RadioRecord = {
 
 export const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 
+export const getUpdateTime = (updateTime?: string) => {
+  return updateTime ? dateUtil(updateTime).format(DEFAULT_DATE_FORMAT) : '暂无更新时间';
+};
+
 export const calcScale = (
   width: number,
   height: number,

-import { InstrumentComponentType } from '../../components/InstrumentComponent/dashBoardComponent.config';
-import { DigitalDashBoardComponentType } from '../../components/InstrumentComponent/digitalDashBoard.config';
-import { PictureComponentType } from '../../components/PictureComponent/pictureComponent.config';
-import { TextComponentType } from '../../components/TextComponent/config';
+import { FrontComponent, GradientColor } from '../../const/const';
 import { FormSchema } from '/@/components/Form';
 
-export type WidgetComponentType =
-  | TextComponentType
-  | InstrumentComponentType
-  | DigitalDashBoardComponentType
-  | PictureComponentType;
-
 export interface VisualOptionParams {
   [visualOptionField.FONT_COLOR]: string;
   [visualOptionField.UNIT]: string;
@@ -23,17 +14,6 @@ export interface VisualOptionParams {
   [visualOptionField.THIRD_PHASE_VALUE]: string;
 }
 
-export enum Gradient {
-  FIRST = 'first',
-  SECOND = 'second',
-  THIRD = 'third',
-}
-export enum GradientColor {
-  FIRST = '#67e0e3',
-  SECOND = '#37a2da',
-  THIRD = '#fd666d',
-}
-
 export enum visualOptionField {
   FONT_COLOR = 'fontColor',
   UNIT = 'unit',
@@ -198,13 +178,13 @@ export const modeFour: FormSchema[] = [
   },
 ];
 
-export const schemasMap = new Map<WidgetComponentType, FormSchema[]>();
+export const schemasMap = new Map<FrontComponent, FormSchema[]>();
 
-schemasMap.set('text-component-1', modeOne);
-schemasMap.set('text-component-2', modeOne);
-schemasMap.set('text-component-3', modeOne);
-schemasMap.set('text-component-4', modeTwo);
-schemasMap.set('text-component-5', modeTwo);
-schemasMap.set('instrument-component-1', modeOne);
-schemasMap.set('instrument-component-2', modeThree);
-schemasMap.set('digital-dashboard-component', modeFour);
+schemasMap.set(FrontComponent.TEXT_COMPONENT_1, modeOne);
+schemasMap.set(FrontComponent.TEXT_COMPONENT_2, modeOne);
+schemasMap.set(FrontComponent.TEXT_COMPONENT_3, modeOne);
+schemasMap.set(FrontComponent.TEXT_COMPONENT_4, modeTwo);
+schemasMap.set(FrontComponent.TEXT_COMPONENT_5, modeTwo);
+schemasMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, modeOne);
+schemasMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, modeThree);
+schemasMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, modeFour);

@@ -16,6 +16,7 @@
     DEFAULT_WIDGET_WIDTH,
     isBataBoardSharePage,
     MoreActionEvent,
+    VisualComponentPermission,
   } from '../config/config';
   import {
     addDataComponent,
@@ -32,11 +33,10 @@
     DataSource,
     Layout,
   } from '/@/api/dataBoard/model';
-  import { frontComponentMap } from './config/help';
+  import { frontComponentMap } from '../components/help';
   import { calcScale } from './config/util';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { DataBoardLayoutInfo } from '../types/type';
-  import { WidgetComponentType } from './config/visualOptions';
   import Authority from '/@/components/Authority/src/Authority.vue';
   import { useSocketConnect } from '../hook/useSocketConnect';
   import { buildUUID } from '/@/utils/uuid';
@@ -44,6 +44,7 @@
   import trendIcon from '/@/assets/svg/trend.svg';
   import backIcon from '/@/assets/images/back.png';
   import { useCalcGridLayout } from '../hook/useCalcGridLayout';
+  import { FrontComponent } from '../const/const';
 
   const ROUTE = useRoute();
 
@@ -298,7 +299,7 @@
 
   const getComponent = (record: DataComponentRecord) => {
     const frontComponent = record.frontId;
-    const component = frontComponentMap.get(frontComponent as WidgetComponentType);
+    const component = frontComponentMap.get(frontComponent as FrontComponent);
     return component?.Component;
   };
 
@@ -307,8 +308,8 @@
     dataSourceRecord: DataSource
   ) => {
     const frontComponent = record.frontId;
-    const component = frontComponentMap.get(frontComponent as WidgetComponentType);
-    return component?.transformConfig(component.ComponentConfig, record, dataSourceRecord);
+    const component = frontComponentMap.get(frontComponent as FrontComponent);
+    return component?.transformConfig(component.ComponentConfig || {}, record, dataSourceRecord);
   };
 
   const handleUpdate = async (id: string) => {
@@ -360,9 +361,7 @@
       await deleteDataComponent({ dataBoardId, ids: [id] });
       createMessage.success('删除成功');
       await getDataBoardComponent();
-    } catch (error) {
-      // createMessage.error('删除失败');
-    }
+    } catch (error) {}
   };
 
   const [registerHistoryDataModal, historyDataModalMethod] = useModal();
@@ -391,7 +390,7 @@
         </div>
       </template>
       <template #extra>
-        <Authority value="api:yt:data_component:add:post">
+        <Authority :value="VisualComponentPermission.CREATE">
           <Button v-if="!getIsSharePage" type="primary" @click="handleOpenCreatePanel">
             创建组件
           </Button>
@@ -439,7 +438,6 @@
               :data-source="item.record.dataSource"
             >
               <template #header>
-                <!-- <div>header</div> -->
                 <BaseWidgetHeader
                   :record="item.record.dataSource"
                   :id="item.record.id"
@@ -448,11 +446,6 @@
                 >
                   <template #moreAction>
                     <Tooltip title="趋势">
-                      <!-- <LineChartOutlined
-                        v-if="!getIsSharePage"
-                        class="cursor-pointer mx-1"
-                        @click="handleOpenHistroyDataModal(item.record.dataSource)"
-                      /> -->
                       <img
                         :src="trendIcon"
                         v-if="!getIsSharePage"
@@ -494,14 +487,18 @@
   .vue-grid-item:not(.vue-grid-placeholder) {
     background: #fff;
     border: none !important;
+
     /* border: 1px solid black; */
   }
+
   .vue-grid-item .resizing {
     opacity: 0.9;
   }
+
   .vue-grid-item .static {
     background: #cce;
   }
+
   .vue-grid-item .text {
     font-size: 24px;
     text-align: center;
@@ -514,16 +511,20 @@
     height: 100%;
     width: 100%;
   }
+
   .vue-grid-item .no-drag {
     height: 100%;
     width: 100%;
   }
+
   .vue-grid-item .minMax {
     font-size: 12px;
   }
+
   .vue-grid-item .add {
     cursor: pointer;
   }
+
   .vue-draggable-handle {
     position: absolute;
     width: 20px;
@@ -540,12 +541,6 @@
     cursor: pointer;
   }
 
-  // .container {
-  //   display: grid;
-  //   grid-template-columns: 3;
-  //   grid-row: 3;
-  // }
-
   .grid-item-layout {
     overflow: hidden;
     border: 1px solid #eee !important;

@@ -8,6 +8,10 @@ interface GapRecord {
   endIndex: Nullable<number>;
 }
 
+/**
+ * @description calculate where to place the component
+ * @returns
+ */
 export function useCalcGridLayout() {
   const calcLayoutInfo = (
     layoutInfo: Layout[],

@@ -7,7 +7,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
   import { DropMenu } from '/@/components/Dropdown';
-  import { DATA_BOARD_SHARE_URL, MoreActionEvent } from './config/config';
+  import { DATA_BOARD_SHARE_URL, MoreActionEvent, VisualBoardPermission } from './config/config';
   import { useModal } from '/@/components/Modal';
   import PanelDetailModal from './components/PanelDetailModal.vue';
   import { getDataBoardList, deleteDataBoard } from '/@/api/dataBoard';
@@ -36,7 +36,7 @@
     labelWidth: 80,
     layout: 'inline',
     submitButtonOptions: {
-      loading: loading,
+      loading: loading as unknown as boolean,
     },
     submitFunc: async () => {
       try {
@@ -51,7 +51,7 @@
     },
   });
 
-  //分页相关
+  // about pagination
   const page = ref(1);
   const pageSize = ref(10);
   const total = ref(0);
@@ -90,8 +90,8 @@
 
   const { hasPermission } = usePermission();
   const dropMenuList = computed<DropMenu[]>(() => {
-    const hasUpdatePermission = hasPermission('api:yt:data_board:update:update');
-    const hasDeletePermission = hasPermission('api:yt:data_board:delete');
+    const hasUpdatePermission = hasPermission(VisualBoardPermission.UPDATE);
+    const hasDeletePermission = hasPermission(VisualBoardPermission.DELETE);
     const basicMenu: DropMenu[] = [];
     if (hasUpdatePermission)
       basicMenu.push({
@@ -147,31 +147,21 @@
   };
 
   const handleRemove = async (record: DataBoardRecord) => {
-    // TODO 删除确认
     try {
       await deleteDataBoard([record.id]);
       createMessage.success('删除成功');
       await getDatasource();
-    } catch (error) {
-      // createMessage.error('删除失败');
-    }
+    } catch (error) {}
   };
 
   const [registerModal, { openModal }] = useModal();
 
   const handleViewBoard = (record: DataBoardRecord) => {
-    const hasDetailPermission = hasPermission('api:yt:data_component:list');
+    const hasDetailPermission = hasPermission(VisualBoardPermission.DETAIL);
     if (hasDetailPermission) {
       const boardId = encode(record.id);
       const boardName = encode(record.name);
       router.push(`/visual/board/detail/${boardId}/${boardName}`);
-      // router.push({
-      //   name: 'visualBoardDetail'
-      //   params: {
-      //     boardId: encode(record.id),
-      //     boardName: encode(record.name),
-      //   },
-      // });
     } else createMessage.warning('没有权限');
   };
 
@@ -186,8 +176,6 @@
       '.ant-spin-container'
     ) as HTMLElement;
     listContainerEl &&
-      // (listContainerEl.style.minHeight = listContainerHeight + 'px') &&
-      // (listContainerEl.style.maxHeight = listContainerHeight + 'px') &&
       (listContainerEl.style.height = listContainerHeight + 'px') &&
       (listContainerEl.style.overflowY = 'auto') &&
       (listContainerEl.style.overflowX = 'hidden');
@@ -210,7 +198,6 @@
     <div class="bg-light-100 mb-6 w-full p-3 search-form">
       <BasicForm class="flex-auto w-full" @register="searchFormRegister" />
     </div>
-    <!-- <div> </div> -->
     <Spin :spinning="loading">
       <List
         ref="listEL"
@@ -235,7 +222,6 @@
                   <MoreOutlined class="rotate-90 transform cursor-pointer" />
                 </Dropdown>
               </template>
-              <!-- <template #cover>title</template> -->
               <section @click="handleViewBoard(item)">
                 <div class="flex data-card__info">
                   <div>
@@ -247,16 +233,19 @@
                     </Statistic>
                   </div>
                 </div>
-                <div class="flex justify-between mt-4 text-sm" style="color: #999999">
+                <div class="flex justify-between mt-4 text-sm" style="color: #999">
                   <div>
                     <span>
                       {{ item.viewType === ViewType.PRIVATE_VIEW ? '私有看板' : '公共看板' }}
                     </span>
-                    <!-- <span v-if="item.viewType === ViewType.PUBLIC_VIEW">
+                    <span
+                      style="display: none"
+                      v-if="item.viewType === ViewType.PUBLIC_VIEW && false"
+                    >
                       <Tooltip title="点击复制分享链接">
                         <ShareAltOutlined class="ml-2" @click.stop="handleCopyShareUrl(item)" />
                       </Tooltip>
-                    </span> -->
+                    </span>
                   </div>
                   <div>{{ item.createTime }}</div>
                 </div>
@@ -278,15 +267,17 @@
   .data-card:deep(.ant-card-head-title) {
     padding: 0;
   }
+
   .data-card:deep(.ant-card-extra) {
     padding: 0;
   }
+
   .data-card:deep(.ant-card-body) {
     padding: 20px;
   }
 
   .data-card__info {
-    color: #666666;
+    color: #666;
 
     &::before {
       content: '';
@@ -299,8 +290,10 @@
 
   .search-form {
     width: 100%;
+
     form {
       width: 100%;
+
       :deep(.ant-row) {
         width: 100%;
       }

+import { Component } from 'vue';
 import { Layout } from 'vue3-grid-layout';
+import { FrontComponent, FrontComponentCategory, visualOptionField } from '../const/const';
+import { RadioRecord } from '../detail/config/util';
 import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
 
 export type FrontDataSourceRecord = DataSource;
@@ -8,3 +11,39 @@ export type DataBoardLayoutInfo = Layout & {
   width?: number;
   height?: number;
 };
+
+export interface ComponentConfig {
+  Component: Component;
+  ComponentName?: string;
+  ComponentKey: FrontComponent;
+  ComponentConfig?: Recordable;
+  ComponentCategory: FrontComponentCategory;
+  transformConfig: (
+    componentConfig: Recordable,
+    record: DataComponentRecord,
+    dataSourceRecord: DataSource
+  ) => Recordable;
+}
+
+export interface VisualOptionParams {
+  [visualOptionField.FONT_COLOR]: string;
+  [visualOptionField.UNIT]: string;
+  [visualOptionField.ICON_COLOR]: string;
+  [visualOptionField.ICON]: string;
+  [visualOptionField.FIRST_PHASE_COLOR]: string;
+  [visualOptionField.SECOND_PHASE_COLOR]: string;
+  [visualOptionField.THIRD_PHASE_COLOR]: string;
+  [visualOptionField.FIRST_PHASE_VALUE]: string;
+  [visualOptionField.SECOND_PHASE_VALUE]: string;
+  [visualOptionField.THIRD_PHASE_VALUE]: string;
+}
+
+export interface VisualComponentProps<Layout = Recordable, Value = Recordable> {
+  value?: Value;
+  layout?: Layout;
+  radio?: RadioRecord;
+  random?: boolean;
+  add?: (key: string, method: Fn) => void;
+  update?: () => void;
+  remove?: (key: string) => void;
+}