refactor: 重构数据看板

@@ -5,7 +5,9 @@
     "public/resource/tinymce/langs"
     "public/resource/tinymce/langs"
   ],
   ],
   "cSpell.words": [
   "cSpell.words": [
+    "Cmds",
     "COAP",
     "COAP",
+    "echarts",
     "edrx",
     "edrx",
     "EFENTO",
     "EFENTO",
     "inited",
     "inited",
@@ -17,6 +19,8 @@
     "unref",
     "unref",
     "vben",
     "vben",
     "VITE",
     "VITE",
+    "vnode",
+    "vueuse",
     "windicss"
     "windicss"
   ]
   ]
 }
 }

 <script lang="ts" setup>
 <script lang="ts" setup>
   import '@simonwep/pickr/dist/themes/monolith.min.css';
   import '@simonwep/pickr/dist/themes/monolith.min.css';
   import ColorPicker from '@simonwep/pickr';
   import ColorPicker from '@simonwep/pickr';
-  import type { PropType } from 'vue';
+  import { PropType, watch } from 'vue';
   import { computed, onMounted, onUnmounted, ref, unref } from 'vue';
   import { computed, onMounted, onUnmounted, ref, unref } from 'vue';
 
 
   type Format = Exclude<keyof ColorPicker.HSVaColor, 'clone'>;
   type Format = Exclude<keyof ColorPicker.HSVaColor, 'clone'>;
@@ -18,10 +18,6 @@
     config: {
     config: {
       type: Object as PropType<ColorPicker.Options>,
       type: Object as PropType<ColorPicker.Options>,
     },
     },
-    defaultValue: {
-      type: String,
-      default: '',
-    },
   });
   });
 
 
   const emit = defineEmits(['update:value']);
   const emit = defineEmits(['update:value']);
@@ -52,11 +48,16 @@
   };
   };
 
 
   const onClear = () => {
   const onClear = () => {
-    emit('update:value', props.defaultValue);
+    emit('update:value', props.value);
     unref(picker)?.hide();
     unref(picker)?.hide();
-    unref(picker)?.setColor(props.defaultValue);
+    props.value && unref(picker)?.setColor(props.value);
   };
   };
 
 
+  // const onChange = () => {
+  //   const value = getColor();
+  //   emit('update:value', value);
+  // };
+
   const getOption = computed<ColorPicker.Options>(() => {
   const getOption = computed<ColorPicker.Options>(() => {
     const { config = {} } = props;
     const { config = {} } = props;
     return {
     return {
@@ -100,17 +101,28 @@
     };
     };
   });
   });
 
 
+  watch(
+    () => props.value,
+    (value) => {
+      if (value) {
+        unref(picker)?.setColor(value);
+      }
+    }
+  );
+
   onMounted(() => {
   onMounted(() => {
     picker.value = ColorPicker.create(unref(getOption));
     picker.value = ColorPicker.create(unref(getOption));
     unref(picker)?.on('init', onInit);
     unref(picker)?.on('init', onInit);
     unref(picker)?.on('save', onSave);
     unref(picker)?.on('save', onSave);
     unref(picker)?.on('clear', onClear);
     unref(picker)?.on('clear', onClear);
+    // unref(picker)?.on('change', onChange);
   });
   });
 
 
   onUnmounted(() => {
   onUnmounted(() => {
     unref(picker)?.off('init', onInit);
     unref(picker)?.off('init', onInit);
     unref(picker)?.off('save', onSave);
     unref(picker)?.off('save', onSave);
     unref(picker)?.off('clear', onClear);
     unref(picker)?.off('clear', onClear);
+    // unref(picker)?.off('change', onChange);
 
 
     unref(picker)?.destroyAndRemove();
     unref(picker)?.destroyAndRemove();
   });
   });

@@ -3,6 +3,7 @@ export enum DataActionModeEnum {
   READ = 'READ',
   READ = 'READ',
   UPDATE = 'UPDATE',
   UPDATE = 'UPDATE',
   DELETE = 'DELETE',
   DELETE = 'DELETE',
+  COPY = 'COPY',
 }
 }
 
 
 export enum DataActionModeNameEnum {
 export enum DataActionModeNameEnum {

+import { onUnmounted, ref } from 'vue';
+import { isFunction } from '/@/utils/is';
+
+interface ScriptOptions {
+  src: string;
+  onLoad?: Fn;
+  onError?: Fn;
+}
+
+export enum InjectScriptStatusEnum {
+  DONE = 'DONE',
+  LOAD = 'LOAD',
+  SUCCESS = 'SUCCESS',
+  ERROR = 'ERROR',
+}
+
+export function useInjectScript(opts: ScriptOptions) {
+  const loading = ref(false);
+  const status = ref(InjectScriptStatusEnum.DONE);
+  let script: HTMLScriptElement;
+
+  const toInject = () => {
+    loading.value = true;
+    const { onError, onLoad } = opts;
+    status.value = InjectScriptStatusEnum.LOAD;
+    return new Promise((resolve, reject) => {
+      script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.onload = function () {
+        loading.value = false;
+        status.value = InjectScriptStatusEnum.SUCCESS;
+        onLoad && isFunction(onLoad) && onLoad();
+        resolve('');
+      };
+
+      script.onerror = function (err) {
+        loading.value = false;
+        status.value = InjectScriptStatusEnum.ERROR;
+        onError && isFunction(onError) && onError();
+        reject(err);
+      };
+
+      script.src = opts.src;
+      document.head.appendChild(script);
+    });
+  };
+
+  onUnmounted(() => {
+    script && script.remove();
+  });
+
+  return {
+    loading,
+    status,
+    toInject,
+  };
+}

@@ -102,7 +102,10 @@ export const basicSchema: FormSchema[] = [
   },
   },
 ];
 ];
 
 
-export const dataSourceSchema = (isEdit: boolean, frontId?: FrontComponent): FormSchema[] => {
+export const dataSourceSchema = (isEdit: boolean, frontId?: string): FormSchema[] => {
+  // console.log(useSelectWidgetKeys());
+  // const isEdit = unref(useSelectWidgetMode()) === DataActionModeEnum.UPDATE;
+
   return [
   return [
     {
     {
       field: DataSourceField.IS_GATEWAY_DEVICE,
       field: DataSourceField.IS_GATEWAY_DEVICE,

 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { Button, PageHeader, Empty, Spin, Tooltip } from 'ant-design-vue';
-  import { GridItem, GridLayout } from 'vue3-grid-layout';
-  import { nextTick, onMounted, ref } from 'vue';
-  import WidgetWrapper from '../components/WidgetWrapper/WidgetWrapper.vue';
-  import BaseWidgetHeader from '../components/WidgetHeader/BaseWidgetHeader.vue';
-  import { DropMenu } from '/@/components/Dropdown';
-  import DataBindModal from './components/DataBindModal.vue';
-  import { useModal } from '/@/components/Modal';
-  import {
-    decode,
-    DEFAULT_MAX_COL,
-    DEFAULT_MIN_HEIGHT,
-    DEFAULT_MIN_WIDTH,
-    DEFAULT_WIDGET_HEIGHT,
-    DEFAULT_WIDGET_WIDTH,
-    MoreActionEvent,
-    VisualComponentPermission,
-  } from '../config/config';
-  import {
-    addDataComponent,
-    deleteDataComponent,
-    getDataComponent,
-    updateDataBoardLayout,
-  } from '/@/api/dataBoard';
-  import { useRoute, useRouter } from 'vue-router';
-  import { computed, unref } from '@vue/reactivity';
-  import {
-    ComponentInfoDetail,
-    DataComponentRecord,
-    DataSource,
-    Layout,
-  } from '/@/api/dataBoard/model';
-  import { frontComponentMap } from '../components/help';
-  import { calcScale } from './config/util';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { DataBoardLayoutInfo } from '../types/type';
-  import Authority from '/@/components/Authority/src/Authority.vue';
-  import { useSocketConnect } from '../hook/useSocketConnect';
-  import { buildUUID } from '/@/utils/uuid';
-  import HistoryTrendModal from './components/HistoryTrendModal.vue';
-  import trendIcon from '/@/assets/svg/trend.svg';
-  import backIcon from '/@/assets/images/back.png';
-  import backWhiteIcon from '/@/assets/images/backWhite.png';
-  import { useCalcGridLayout } from '../hook/useCalcGridLayout';
-  import { FrontComponent } from '../const/const';
-  import { useScript } from '/@/hooks/web/useScript';
-  import { BAI_DU_MAP_GL_LIB, BAI_DU_MAP_TRACK_ANIMATION } from '/@/utils/fnUtils';
-  import { useAppStore } from '/@/store/modules/app';
-  import { useRole } from '/@/hooks/business/useRole';
-
-  const userStore = useAppStore();
-
-  const getAceClass = computed((): string => userStore.getDarkMode);
-
-  const props = defineProps<{
-    value?: Recordable;
-  }>();
-
-  const ROUTE = useRoute();
-
-  const ROUTER = useRouter();
-
-  const { isCustomerUser } = useRole();
-  const { toPromise: injectBaiDuMapLib } = useScript({ src: BAI_DU_MAP_GL_LIB });
-  const { toPromise: injectBaiDuMapTrackAniMationLib } = useScript({
-    src: BAI_DU_MAP_TRACK_ANIMATION,
-  });
-
-  const { createMessage, createConfirm } = useMessage();
-
-  const getBoardId = computed(() => {
-    return decode((ROUTE.params as { boardId: string }).boardId);
-  });
-
-  const getDataBoardName = computed(() => {
-    return decode((ROUTE.params as { boardName: string }).boardName || '');
-  });
-
-  const getSharePageData = computed(() => {
-    return props.value!;
-  });
-
-  const getIsSharePage = computed(() => {
-    return ROUTE.matched.find((item) => item.path === '/share/:viewType/:id/:publicId');
-  });
-
-  const widgetEl = new Map<string, Fn>();
-
-  const dataBoardList = ref<DataBoardLayoutInfo[]>([]);
-
-  const draggable = ref(!unref(getIsSharePage));
-  const resizable = ref(!unref(getIsSharePage));
-
-  const GirdLayoutColNum = DEFAULT_MAX_COL;
-  const GridLayoutMargin = 20;
-
-  const handleBack = () => {
-    if (unref(getIsSharePage)) return;
-    ROUTER.go(-1);
-  };
-
-  function updateSize(i: string, _newH: number, _newW: number, newHPx: number, newWPx: number) {
-    newWPx = Number(newWPx);
-    newHPx = Number(newHPx);
-
-    const data = dataBoardList.value.find((item) => item.i === i)!;
-    const length = data.record.dataSource.length || 0;
-
-    const row = Math.floor(Math.pow(length, 0.5));
-    const col = Math.floor(length / row);
-    let width = Math.floor(100 / col);
-    let height = Math.floor(100 / row);
-
-    const WHRatio = newWPx / newHPx;
-    const HWRatio = newHPx / newWPx;
-
-    if (WHRatio > 1.6) {
-      width = Math.floor(100 / length);
-      height = 100;
-    }
-
-    if (HWRatio > 1.6) {
-      height = Math.floor(100 / length);
-      width = 100;
-    }
-
-    data.width = newWPx;
-    data.height = newHPx;
-
-    data.record.dataSource = data.record.dataSource.map((item) => {
-      if (!item.uuid) item.uuid = buildUUID();
-      return {
-        ...item,
-        width,
-        height,
-        radio: calcScale(newWPx, newHPx, width, height),
-      };
-    });
-
-    nextTick(() => {
-      const updateFn = widgetEl.get(i);
-      if (updateFn) updateFn();
-    });
-  }
-
-  const itemResize = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => {
-    updateSize(i, newH, newW, newHPx, newWPx);
-  };
-
-  const itemResized = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => {
-    handleSaveLayoutInfo();
-    updateSize(i, newH, newW, newHPx, newWPx);
-  };
-
-  const itemContainerResized = (
-    i: string,
-    newH: number,
-    newW: number,
-    newHPx: number,
-    newWPx: number
-  ) => {
-    updateSize(i, newH, newW, newHPx, newWPx);
-  };
-
-  const itemMoved = (i: string) => {
-    handleSaveLayoutInfo();
-    updateCharts(i);
-  };
-
-  const updateCharts = (i: string) => {
-    nextTick(() => {
-      const updateFn = widgetEl.get(i);
-      if (updateFn) updateFn();
-    });
-  };
-
-  const setComponentRef = (el: Element, record: DataBoardLayoutInfo) => {
-    if (widgetEl.has(record.i)) widgetEl.delete(record.i);
-    if (el && (el as unknown as { update: Fn }).update)
-      widgetEl.set(record.i, (el as unknown as { update: Fn }).update);
-  };
-
-  const [register, { openModal }] = useModal();
-
-  const handleMoreAction = (event: DropMenu, id: string) => {
-    if (event.event === MoreActionEvent.DELETE) {
-      createConfirm({
-        iconType: 'warning',
-        content: '是否确认删除?',
-        onOk: () => handleDelete(id),
-      });
-    }
-    if (event.event === MoreActionEvent.EDIT) handleUpdate(id);
-    if (event.event === MoreActionEvent.COPY) handleCopy(id);
-  };
-
-  const handleOpenCreatePanel = () => {
-    openModal(true, { isEdit: false });
-  };
-
-  const getLayoutInfo = () => {
-    return unref(dataBoardList).map((item) => {
-      return {
-        id: item.i,
-        h: item.h,
-        w: item.w,
-        x: item.x,
-        y: item.y,
-      } as Layout;
-    });
-  };
-
-  const handleSaveLayoutInfo = async () => {
-    try {
-      await updateDataBoardLayout({
-        boardId: unref(getBoardId),
-        layout: getLayoutInfo(),
-      });
-    } catch (error) {}
-  };
-
-  const { beginSendMessage } = useSocketConnect(dataBoardList);
-
-  const getBasePageComponentData = async () => {
-    try {
-      return await getDataComponent(unref(getBoardId));
-    } catch (error) {}
-    return {} as ComponentInfoDetail;
-  };
-
-  const getDataBoradDetail = async () => {
-    try {
-      return unref(getIsSharePage) ? unref(getSharePageData) : await getBasePageComponentData();
-    } catch (error) {
-      return {} as ComponentInfoDetail;
-    }
-  };
-
-  const loading = ref(false);
-  const getDataBoardComponent = async () => {
-    try {
-      dataBoardList.value = [];
-      loading.value = true;
-      const data = await getDataBoradDetail();
-
-      if (!data.data.componentData) {
-        dataBoardList.value = [];
-        return;
-      }
-      dataBoardList.value = data.data.componentData.map((item) => {
-        const index = data.data.componentLayout.findIndex((each) => item.id === each.id);
-        let layout;
-        if (!~index) {
-          layout = {};
-        } else {
-          layout = data.data.componentLayout[index];
-        }
-        return {
-          i: item.id,
-          w: layout.w || DEFAULT_WIDGET_WIDTH,
-          h: layout.h || DEFAULT_WIDGET_HEIGHT,
-          x: layout.x || 0,
-          y: layout.y || 0,
-          record: item,
-        };
-      });
-      beginSendMessage();
-    } catch (error) {
-      throw error;
-    } finally {
-      loading.value = false;
-    }
-  };
-
-  const handleUpdateComponent = async (id: string) => {
-    try {
-      loading.value = true;
-      const data = await getDataBoradDetail();
-      const updateIndex = data.data.componentData.findIndex((item) => item.id === id);
-      const originalIndex = unref(dataBoardList).findIndex((item) => item.i === id);
-
-      const newUpdateData = data.data.componentData[updateIndex];
-      const originalData = unref(dataBoardList)[originalIndex];
-      dataBoardList.value[originalIndex] = {
-        i: id,
-        w: originalData.w || DEFAULT_WIDGET_WIDTH,
-        h: originalData.h || DEFAULT_WIDGET_HEIGHT,
-        x: originalData.x || 0,
-        y: originalData.y || 0,
-        width: originalData.width,
-        height: originalData.height,
-        record: newUpdateData,
-      };
-
-      updateSize(id, 0, 0, originalData.height || 0, originalData.width || 0);
-
-      beginSendMessage();
-    } catch (error) {
-    } finally {
-      loading.value = false;
-    }
-  };
-
-  const getComponent = (record: DataComponentRecord) => {
-    const frontComponent = record.frontId;
-    const component = frontComponentMap.get(frontComponent as FrontComponent);
-    return component?.Component;
-  };
-
-  const getComponentConfig = (
-    record: DataBoardLayoutInfo['record'],
-    dataSourceRecord: DataSource | DataSource[]
-  ) => {
-    const frontComponent = record.frontId;
-    const component = frontComponentMap.get(frontComponent as FrontComponent);
-    return component?.transformConfig(component.ComponentConfig || {}, record, dataSourceRecord);
-  };
-
-  const handleUpdate = async (id: string) => {
-    const record = unref(dataBoardList).find((item) => item.i === id);
-    openModal(true, { isEdit: true, record });
-  };
-
-  const { calcLayoutInfo } = useCalcGridLayout();
-
-  const handleCopy = async (id: string) => {
-    const record = unref(dataBoardList).find((item) => item.i === id);
-    try {
-      const data = await addDataComponent({
-        boardId: unref(getBoardId),
-        record: {
-          dataBoardId: unref(getBoardId),
-          frontId: record?.record.frontId,
-          name: record?.record.name,
-          remark: record?.record.remark,
-          dataSource: record?.record.dataSource,
-        },
-      });
-      createMessage.success('复制成功');
-      const _id = data.data.id;
-      const layoutInfo = getLayoutInfo();
-
-      const newGridLayout = calcLayoutInfo(unref(dataBoardList), {
-        width: record?.w || DEFAULT_WIDGET_HEIGHT,
-        height: record?.h || DEFAULT_WIDGET_HEIGHT,
-      });
-      layoutInfo.push({
-        id: _id,
-        ...newGridLayout,
-      } as Layout);
-
-      await updateDataBoardLayout({
-        boardId: unref(getBoardId),
-        layout: layoutInfo,
-      });
-
-      await getDataBoardComponent();
-    } catch (error) {}
-  };
-
-  const handleDelete = async (id: string) => {
-    try {
-      const dataBoardId = unref(dataBoardList).find((item) => item.i == id)?.record.dataBoardId;
-      if (!dataBoardId) return;
-      await deleteDataComponent({ dataBoardId, ids: [id] });
-      createMessage.success('删除成功');
-      await getDataBoardComponent();
-    } catch (error) {}
-  };
-
-  const [registerHistoryDataModal, historyDataModalMethod] = useModal();
-
-  const handleOpenHistroyDataModal = (record: DataSource[]) => {
-    historyDataModalMethod.openModal(true, record);
-  };
-
-  const hasHistoryTrend = (item: DataBoardLayoutInfo) => {
-    return frontComponentMap.get(item.record.frontId as FrontComponent)?.hasHistoryTrend;
-  };
-
-  onMounted(async () => {
-    injectBaiDuMapLib();
-    injectBaiDuMapTrackAniMationLib();
-    getDataBoardComponent();
-  });
+  import { Palette } from '/@/views/visual/palette';
 </script>
 </script>
-
 <template>
 <template>
-  <section class="flex flex-col overflow-hidden h-full w-full board-detail">
-    <PageHeader v-if="!getIsSharePage">
-      <template #title>
-        <div class="flex items-center">
-          <img
-            :src="getAceClass === 'dark' ? backWhiteIcon : backIcon"
-            v-if="!getIsSharePage"
-            class="mr-3 cursor-pointer"
-            @click="handleBack"
-          />
-          <span class="text-lg" color="#333">{{ getDataBoardName }}</span>
-        </div>
-      </template>
-      <template #extra>
-        <Authority :value="VisualComponentPermission.CREATE">
-          <Button
-            v-if="!getIsSharePage && !isCustomerUser"
-            type="primary"
-            @click="handleOpenCreatePanel"
-          >
-            创建组件
-          </Button>
-        </Authority>
-      </template>
-      <div>
-        <span class="mr-3 text-sm" style="color: #666">已创建组件:</span>
-        <span style="color: #409eff"> {{ dataBoardList.length }}个</span>
-      </div>
-    </PageHeader>
-    <section class="flex-1">
-      <Spin :spinning="loading">
-        <GridLayout
-          v-model:layout="dataBoardList"
-          :col-num="GirdLayoutColNum"
-          :row-height="30"
-          :margin="[GridLayoutMargin, GridLayoutMargin]"
-          :is-draggable="draggable"
-          :is-resizable="resizable"
-          :vertical-compact="true"
-          :use-css-transforms="true"
-          style="width: 100%"
-        >
-          <GridItem
-            v-for="item in dataBoardList"
-            :key="item.i"
-            :static="item.static"
-            :x="item.x"
-            :y="item.y"
-            :w="item.w"
-            :h="item.h"
-            :i="item.i"
-            :min-h="DEFAULT_MIN_HEIGHT"
-            :min-w="DEFAULT_MIN_WIDTH"
-            :style="{ display: 'flex', flexWrap: 'wrap' }"
-            class="grid-item-layout"
-            @resized="itemResized"
-            @resize="itemResize"
-            @moved="itemMoved"
-            @container-resized="itemContainerResized"
-            drag-ignore-from=".no-drag"
-          >
-            <WidgetWrapper
-              :key="item.i"
-              :ref="(el: Element) => setComponentRef(el, item)"
-              :record="item.record"
-              :data-source="item.record.dataSource"
-            >
-              <template #header>
-                <BaseWidgetHeader
-                  :record="item.record.dataSource"
-                  :id="item.record.id"
-                  :panel-name="item.record.name"
-                  @action="handleMoreAction"
-                >
-                  <template #moreAction>
-                    <Tooltip v-if="!isCustomerUser" title="趋势">
-                      <img
-                        :src="trendIcon"
-                        v-if="!getIsSharePage && hasHistoryTrend(item)"
-                        class="cursor-pointer w-4.5 h-4.5"
-                        @click="handleOpenHistroyDataModal(item.record.dataSource)"
-                      />
-                    </Tooltip>
-                  </template>
-                </BaseWidgetHeader>
-              </template>
-              <template #controls="{ record, add, remove, update }">
-                <component
-                  :is="getComponent(item.record)"
-                  :add="add"
-                  :remove="remove"
-                  :update="update"
-                  :radio="record.radio || {}"
-                  v-bind="getComponentConfig(item.record, record)"
-                  :random="false"
-                />
-              </template>
-            </WidgetWrapper>
-          </GridItem>
-        </GridLayout>
-        <Empty
-          v-if="!dataBoardList.length"
-          class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
-        />
-      </Spin>
-    </section>
-    <DataBindModal
-      :layout="dataBoardList"
-      @register="register"
-      @update="handleUpdateComponent"
-      @create="getDataBoardComponent"
-    />
-    <HistoryTrendModal @register="registerHistoryDataModal" />
-  </section>
+  <Palette />
 </template>
 </template>
-
-<style lang="less" scoped>
-  .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;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    margin: auto;
-    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;
-    height: 20px;
-    top: 0;
-    left: 0;
-    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
-      no-repeat;
-    background-position: bottom right;
-    padding: 0 8px 8px 0;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    box-sizing: border-box;
-    cursor: pointer;
-  }
-
-  .grid-item-layout {
-    overflow: hidden;
-    border: 1px solid #eee !important;
-    background-color: #fcfcfc !important;
-  }
-
-  .board-detail:deep(.ant-page-header) {
-    padding: 20px 20px 0 20px;
-  }
-
-  .board-detail:deep(.ant-page-header-heading) {
-    height: 78px;
-    padding: 0 20px 0 20px;
-    box-sizing: border-box;
-    background-color: #fff;
-  }
-
-  [data-theme='dark'] .board-detail:deep(.ant-page-header-heading) {
-    @apply bg-dark-900;
-  }
-
-  .board-detail:deep(.ant-page-header-heading-extra) {
-    margin: 0;
-    line-height: 78px;
-  }
-
-  .board-detail:deep(.ant-page-header-content) {
-    padding-top: 20px;
-  }
-
-  :deep(.vue-resizable-handle) {
-    z-index: 99;
-  }
-</style>

+<script lang="ts" setup>
+  import { Button, PageHeader, Empty, Spin, Tooltip } from 'ant-design-vue';
+  import { GridItem, GridLayout } from 'vue3-grid-layout';
+  import { nextTick, onMounted, ref } from 'vue';
+  import WidgetWrapper from '../components/WidgetWrapper/WidgetWrapper.vue';
+  import BaseWidgetHeader from '../components/WidgetHeader/BaseWidgetHeader.vue';
+  import { DropMenu } from '/@/components/Dropdown';
+  import DataBindModal from './components/DataBindModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import {
+    decode,
+    DEFAULT_MAX_COL,
+    DEFAULT_MIN_HEIGHT,
+    DEFAULT_MIN_WIDTH,
+    DEFAULT_WIDGET_HEIGHT,
+    DEFAULT_WIDGET_WIDTH,
+    MoreActionEvent,
+    VisualComponentPermission,
+  } from '../config/config';
+  import {
+    addDataComponent,
+    deleteDataComponent,
+    getDataComponent,
+    updateDataBoardLayout,
+  } from '/@/api/dataBoard';
+  import { useRoute, useRouter } from 'vue-router';
+  import { computed, unref } from '@vue/reactivity';
+  import {
+    ComponentInfoDetail,
+    DataComponentRecord,
+    DataSource,
+    Layout,
+  } from '/@/api/dataBoard/model';
+  import { frontComponentMap } from '../components/help';
+  import { calcScale } from './config/util';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { DataBoardLayoutInfo } from '../types/type';
+  import Authority from '/@/components/Authority/src/Authority.vue';
+  import { useSocketConnect } from '../hook/useSocketConnect';
+  import { buildUUID } from '/@/utils/uuid';
+  import HistoryTrendModal from './components/HistoryTrendModal.vue';
+  import trendIcon from '/@/assets/svg/trend.svg';
+  import backIcon from '/@/assets/images/back.png';
+  import backWhiteIcon from '/@/assets/images/backWhite.png';
+  import { useCalcGridLayout } from '../hook/useCalcGridLayout';
+  import { FrontComponent } from '../const/const';
+  import { useScript } from '/@/hooks/web/useScript';
+  import { BAI_DU_MAP_GL_LIB, BAI_DU_MAP_TRACK_ANIMATION } from '/@/utils/fnUtils';
+  import { useAppStore } from '/@/store/modules/app';
+  import { useRole } from '/@/hooks/business/useRole';
+
+  const userStore = useAppStore();
+
+  const getAceClass = computed((): string => userStore.getDarkMode);
+
+  const props = defineProps<{
+    value?: Recordable;
+  }>();
+
+  const ROUTE = useRoute();
+
+  const ROUTER = useRouter();
+
+  const { isCustomerUser } = useRole();
+  const { toPromise: injectBaiDuMapLib } = useScript({ src: BAI_DU_MAP_GL_LIB });
+  const { toPromise: injectBaiDuMapTrackAniMationLib } = useScript({
+    src: BAI_DU_MAP_TRACK_ANIMATION,
+  });
+
+  const { createMessage, createConfirm } = useMessage();
+
+  const getBoardId = computed(() => {
+    return decode((ROUTE.params as { boardId: string }).boardId);
+  });
+
+  const getDataBoardName = computed(() => {
+    return decode((ROUTE.params as { boardName: string }).boardName || '');
+  });
+
+  const getSharePageData = computed(() => {
+    return props.value!;
+  });
+
+  const getIsSharePage = computed(() => {
+    return ROUTE.matched.find((item) => item.path === '/share/:viewType/:id/:publicId');
+  });
+
+  const widgetEl = new Map<string, Fn>();
+
+  const dataBoardList = ref<DataBoardLayoutInfo[]>([]);
+
+  const draggable = ref(!unref(getIsSharePage));
+  const resizable = ref(!unref(getIsSharePage));
+
+  const GirdLayoutColNum = DEFAULT_MAX_COL;
+  const GridLayoutMargin = 20;
+
+  const handleBack = () => {
+    if (unref(getIsSharePage)) return;
+    ROUTER.go(-1);
+  };
+
+  function updateSize(i: string, _newH: number, _newW: number, newHPx: number, newWPx: number) {
+    newWPx = Number(newWPx);
+    newHPx = Number(newHPx);
+
+    const data = dataBoardList.value.find((item) => item.i === i)!;
+    const length = data.record.dataSource.length || 0;
+
+    const row = Math.floor(Math.pow(length, 0.5));
+    const col = Math.floor(length / row);
+    let width = Math.floor(100 / col);
+    let height = Math.floor(100 / row);
+
+    const WHRatio = newWPx / newHPx;
+    const HWRatio = newHPx / newWPx;
+
+    if (WHRatio > 1.6) {
+      width = Math.floor(100 / length);
+      height = 100;
+    }
+
+    if (HWRatio > 1.6) {
+      height = Math.floor(100 / length);
+      width = 100;
+    }
+
+    data.width = newWPx;
+    data.height = newHPx;
+
+    data.record.dataSource = data.record.dataSource.map((item) => {
+      if (!item.uuid) item.uuid = buildUUID();
+      return {
+        ...item,
+        width,
+        height,
+        radio: calcScale(newWPx, newHPx, width, height),
+      };
+    });
+
+    nextTick(() => {
+      const updateFn = widgetEl.get(i);
+      if (updateFn) updateFn();
+    });
+  }
+
+  const itemResize = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => {
+    updateSize(i, newH, newW, newHPx, newWPx);
+  };
+
+  const itemResized = (i: string, newH: number, newW: number, newHPx: number, newWPx: number) => {
+    handleSaveLayoutInfo();
+    updateSize(i, newH, newW, newHPx, newWPx);
+  };
+
+  const itemContainerResized = (
+    i: string,
+    newH: number,
+    newW: number,
+    newHPx: number,
+    newWPx: number
+  ) => {
+    updateSize(i, newH, newW, newHPx, newWPx);
+  };
+
+  const itemMoved = (i: string) => {
+    handleSaveLayoutInfo();
+    updateCharts(i);
+  };
+
+  const updateCharts = (i: string) => {
+    nextTick(() => {
+      const updateFn = widgetEl.get(i);
+      if (updateFn) updateFn();
+    });
+  };
+
+  const setComponentRef = (el: Element, record: DataBoardLayoutInfo) => {
+    if (widgetEl.has(record.i)) widgetEl.delete(record.i);
+    if (el && (el as unknown as { update: Fn }).update)
+      widgetEl.set(record.i, (el as unknown as { update: Fn }).update);
+  };
+
+  const [register, { openModal }] = useModal();
+
+  const handleMoreAction = (event: DropMenu, id: string) => {
+    if (event.event === MoreActionEvent.DELETE) {
+      createConfirm({
+        iconType: 'warning',
+        content: '是否确认删除?',
+        onOk: () => handleDelete(id),
+      });
+    }
+    if (event.event === MoreActionEvent.EDIT) handleUpdate(id);
+    if (event.event === MoreActionEvent.COPY) handleCopy(id);
+  };
+
+  const handleOpenCreatePanel = () => {
+    openModal(true, { isEdit: false });
+  };
+
+  const getLayoutInfo = () => {
+    return unref(dataBoardList).map((item) => {
+      return {
+        id: item.i,
+        h: item.h,
+        w: item.w,
+        x: item.x,
+        y: item.y,
+      } as Layout;
+    });
+  };
+
+  const handleSaveLayoutInfo = async () => {
+    try {
+      await updateDataBoardLayout({
+        boardId: unref(getBoardId),
+        layout: getLayoutInfo(),
+      });
+    } catch (error) {}
+  };
+
+  const { beginSendMessage } = useSocketConnect(dataBoardList);
+
+  const getBasePageComponentData = async () => {
+    try {
+      return await getDataComponent(unref(getBoardId));
+    } catch (error) {}
+    return {} as ComponentInfoDetail;
+  };
+
+  const getDataBoradDetail = async () => {
+    try {
+      return unref(getIsSharePage) ? unref(getSharePageData) : await getBasePageComponentData();
+    } catch (error) {
+      return {} as ComponentInfoDetail;
+    }
+  };
+
+  const loading = ref(false);
+  const getDataBoardComponent = async () => {
+    try {
+      dataBoardList.value = [];
+      loading.value = true;
+      const data = await getDataBoradDetail();
+
+      if (!data.data.componentData) {
+        dataBoardList.value = [];
+        return;
+      }
+      dataBoardList.value = data.data.componentData.map((item) => {
+        const index = data.data.componentLayout.findIndex((each) => item.id === each.id);
+        let layout;
+        if (!~index) {
+          layout = {};
+        } else {
+          layout = data.data.componentLayout[index];
+        }
+        return {
+          i: item.id,
+          w: layout.w || DEFAULT_WIDGET_WIDTH,
+          h: layout.h || DEFAULT_WIDGET_HEIGHT,
+          x: layout.x || 0,
+          y: layout.y || 0,
+          record: item,
+        };
+      });
+      beginSendMessage();
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const handleUpdateComponent = async (id: string) => {
+    try {
+      loading.value = true;
+      const data = await getDataBoradDetail();
+      const updateIndex = data.data.componentData.findIndex((item) => item.id === id);
+      const originalIndex = unref(dataBoardList).findIndex((item) => item.i === id);
+
+      const newUpdateData = data.data.componentData[updateIndex];
+      const originalData = unref(dataBoardList)[originalIndex];
+      dataBoardList.value[originalIndex] = {
+        i: id,
+        w: originalData.w || DEFAULT_WIDGET_WIDTH,
+        h: originalData.h || DEFAULT_WIDGET_HEIGHT,
+        x: originalData.x || 0,
+        y: originalData.y || 0,
+        width: originalData.width,
+        height: originalData.height,
+        record: newUpdateData,
+      };
+
+      updateSize(id, 0, 0, originalData.height || 0, originalData.width || 0);
+
+      beginSendMessage();
+    } catch (error) {
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const getComponent = (record: DataComponentRecord) => {
+    const frontComponent = record.frontId;
+    const component = frontComponentMap.get(frontComponent as FrontComponent);
+    return component?.Component;
+  };
+
+  const getComponentConfig = (
+    record: DataBoardLayoutInfo['record'],
+    dataSourceRecord: DataSource | DataSource[]
+  ) => {
+    const frontComponent = record.frontId;
+    const component = frontComponentMap.get(frontComponent as FrontComponent);
+    return component?.transformConfig(component.ComponentConfig || {}, record, dataSourceRecord);
+  };
+
+  const handleUpdate = async (id: string) => {
+    const record = unref(dataBoardList).find((item) => item.i === id);
+    openModal(true, { isEdit: true, record });
+  };
+
+  const { calcLayoutInfo } = useCalcGridLayout();
+
+  const handleCopy = async (id: string) => {
+    const record = unref(dataBoardList).find((item) => item.i === id);
+    try {
+      const data = await addDataComponent({
+        boardId: unref(getBoardId),
+        record: {
+          dataBoardId: unref(getBoardId),
+          frontId: record?.record.frontId,
+          name: record?.record.name,
+          remark: record?.record.remark,
+          dataSource: record?.record.dataSource,
+        },
+      });
+      createMessage.success('复制成功');
+      const _id = data.data.id;
+      const layoutInfo = getLayoutInfo();
+
+      const newGridLayout = calcLayoutInfo(unref(dataBoardList), {
+        width: record?.w || DEFAULT_WIDGET_HEIGHT,
+        height: record?.h || DEFAULT_WIDGET_HEIGHT,
+      });
+      layoutInfo.push({
+        id: _id,
+        ...newGridLayout,
+      } as Layout);
+
+      await updateDataBoardLayout({
+        boardId: unref(getBoardId),
+        layout: layoutInfo,
+      });
+
+      await getDataBoardComponent();
+    } catch (error) {}
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      const dataBoardId = unref(dataBoardList).find((item) => item.i == id)?.record.dataBoardId;
+      if (!dataBoardId) return;
+      await deleteDataComponent({ dataBoardId, ids: [id] });
+      createMessage.success('删除成功');
+      await getDataBoardComponent();
+    } catch (error) {}
+  };
+
+  const [registerHistoryDataModal, historyDataModalMethod] = useModal();
+
+  const handleOpenHistroyDataModal = (record: DataSource[]) => {
+    historyDataModalMethod.openModal(true, record);
+  };
+
+  const hasHistoryTrend = (item: DataBoardLayoutInfo) => {
+    return frontComponentMap.get(item.record.frontId as FrontComponent)?.hasHistoryTrend;
+  };
+
+  onMounted(async () => {
+    injectBaiDuMapLib();
+    injectBaiDuMapTrackAniMationLib();
+    getDataBoardComponent();
+  });
+</script>
+
+<template>
+  <section class="flex flex-col overflow-hidden h-full w-full board-detail">
+    <PageHeader v-if="!getIsSharePage">
+      <template #title>
+        <div class="flex items-center">
+          <img
+            :src="getAceClass === 'dark' ? backWhiteIcon : backIcon"
+            v-if="!getIsSharePage"
+            class="mr-3 cursor-pointer"
+            @click="handleBack"
+          />
+          <span class="text-lg" color="#333">{{ getDataBoardName }}</span>
+        </div>
+      </template>
+      <template #extra>
+        <Authority :value="VisualComponentPermission.CREATE">
+          <Button
+            v-if="!getIsSharePage && !isCustomerUser"
+            type="primary"
+            @click="handleOpenCreatePanel"
+          >
+            创建组件
+          </Button>
+        </Authority>
+      </template>
+      <div>
+        <span class="mr-3 text-sm" style="color: #666">已创建组件:</span>
+        <span style="color: #409eff"> {{ dataBoardList.length }}个</span>
+      </div>
+    </PageHeader>
+    <section class="flex-1">
+      <Spin :spinning="loading">
+        <GridLayout
+          v-model:layout="dataBoardList"
+          :col-num="GirdLayoutColNum"
+          :row-height="30"
+          :margin="[GridLayoutMargin, GridLayoutMargin]"
+          :is-draggable="draggable"
+          :is-resizable="resizable"
+          :vertical-compact="true"
+          :use-css-transforms="true"
+          style="width: 100%"
+        >
+          <GridItem
+            v-for="item in dataBoardList"
+            :key="item.i"
+            :static="item.static"
+            :x="item.x"
+            :y="item.y"
+            :w="item.w"
+            :h="item.h"
+            :i="item.i"
+            :min-h="DEFAULT_MIN_HEIGHT"
+            :min-w="DEFAULT_MIN_WIDTH"
+            :style="{ display: 'flex', flexWrap: 'wrap' }"
+            class="grid-item-layout"
+            @resized="itemResized"
+            @resize="itemResize"
+            @moved="itemMoved"
+            @container-resized="itemContainerResized"
+            drag-ignore-from=".no-drag"
+          >
+            <WidgetWrapper
+              :key="item.i"
+              :ref="(el: Element) => setComponentRef(el, item)"
+              :record="item.record"
+              :data-source="item.record.dataSource"
+            >
+              <template #header>
+                <BaseWidgetHeader
+                  :record="item.record.dataSource"
+                  :id="item.record.id"
+                  :panel-name="item.record.name"
+                  @action="handleMoreAction"
+                >
+                  <template #moreAction>
+                    <Tooltip v-if="!isCustomerUser" title="趋势">
+                      <img
+                        :src="trendIcon"
+                        v-if="!getIsSharePage && hasHistoryTrend(item)"
+                        class="cursor-pointer w-4.5 h-4.5"
+                        @click="handleOpenHistroyDataModal(item.record.dataSource)"
+                      />
+                    </Tooltip>
+                  </template>
+                </BaseWidgetHeader>
+              </template>
+              <template #controls="{ record, add, remove, update }">
+                <component
+                  :is="getComponent(item.record)"
+                  :add="add"
+                  :remove="remove"
+                  :update="update"
+                  :radio="record.radio || {}"
+                  v-bind="getComponentConfig(item.record, record)"
+                  :random="false"
+                />
+              </template>
+            </WidgetWrapper>
+          </GridItem>
+        </GridLayout>
+        <Empty
+          v-if="!dataBoardList.length"
+          class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+        />
+      </Spin>
+    </section>
+    <DataBindModal
+      :layout="dataBoardList"
+      @register="register"
+      @update="handleUpdateComponent"
+      @create="getDataBoardComponent"
+    />
+    <HistoryTrendModal @register="registerHistoryDataModal" />
+  </section>
+</template>
+
+<style lang="less" scoped>
+  .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;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    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;
+    height: 20px;
+    top: 0;
+    left: 0;
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
+      no-repeat;
+    background-position: bottom right;
+    padding: 0 8px 8px 0;
+    background-repeat: no-repeat;
+    background-origin: content-box;
+    box-sizing: border-box;
+    cursor: pointer;
+  }
+
+  .grid-item-layout {
+    overflow: hidden;
+    border: 1px solid #eee !important;
+    background-color: #fcfcfc !important;
+  }
+
+  .board-detail:deep(.ant-page-header) {
+    padding: 20px 20px 0 20px;
+  }
+
+  .board-detail:deep(.ant-page-header-heading) {
+    height: 78px;
+    padding: 0 20px 0 20px;
+    box-sizing: border-box;
+    background-color: #fff;
+  }
+
+  [data-theme='dark'] .board-detail:deep(.ant-page-header-heading) {
+    @apply bg-dark-900;
+  }
+
+  .board-detail:deep(.ant-page-header-heading-extra) {
+    margin: 0;
+    line-height: 78px;
+  }
+
+  .board-detail:deep(.ant-page-header-content) {
+    padding-top: 20px;
+  }
+
+  :deep(.vue-resizable-handle) {
+    z-index: 99;
+  }
+</style>

+export { default as BasicDataSource } from './index.vue';

+<script lang="ts" setup>
+  import { CreateComponentType } from '../../packages/index.type';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { dataSourceSchema } from '/@/views/visual/board/detail/config/basicConfiguration';
+  import {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  const props = defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: dataSourceSchema(false, props.componentConfig.componentConfig.key),
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (record: Recordable) => {
+    return setFieldsValue(record);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    validate,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+export { default as DeviceName } from './index.vue';

+<script lang="ts" setup>
+  import { ComponentPropsConfigType } from '../../packages/index.type';
+
+  defineProps<{
+    config: ComponentPropsConfigType;
+  }>();
+</script>
+
+<template>
+  <div v-if="config.option?.componentInfo?.showDeviceName" class="h-8 font-semibold">
+    {{ config.option.deviceRename || config.option.deviceName }}
+  </div>
+</template>

+export { default as UpdateTime } from './index.vue';

+<script lang="ts" setup>
+  import { Tooltip } from 'ant-design-vue';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  const props = defineProps<{
+    time?: number | null;
+  }>();
+
+  const formatDate = (time?: Nullable<number>) => {
+    return props.time ? formatToDateTime(time, 'YYYY-MM-DD HH:mm:ss') : '暂无更新时间';
+  };
+</script>
+
+<template>
+  <div class="flex p-5 justify-center items-center text-gray-400 text-xs w-full dark:text-light-50">
+    <Tooltip :title="formatDate(time)">
+      <div class="truncate px-1">
+        <span>更新时间:</span>
+        <span class="ml-2">{{ formatDate(time) }}</span>
+      </div>
+    </Tooltip>
+  </div>
+</template>

+import { FormSchema } from '/@/components/Form';
+
+export type BasicInfoFormValueType = Record<BasicConfigField, string>;
+
+export enum BasicConfigField {
+  NAME = 'name',
+  REMARK = 'remark',
+}
+
+export const basicSchema: FormSchema[] = [
+  {
+    field: BasicConfigField.NAME,
+    label: '组件名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入组件名称',
+      maxLength: 32,
+    },
+  },
+  {
+    field: BasicConfigField.REMARK,
+    label: '组件备注',
+    component: 'InputTextArea',
+    componentProps: {
+      placeholder: '请输入组件备注',
+      maxLength: 255,
+    },
+  },
+];

+export { default as BasicInfoForm } from './index.vue';

+<script lang="ts" setup>
+  import { PublicFormInstaceType } from '../../index.type';
+  import { BasicInfoFormValueType, basicSchema } from './config';
+  import { BasicForm, useForm } from '/@/components/Form';
+
+  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: basicSchema,
+    showActionButtonGroup: false,
+    labelWidth: 96,
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue() as BasicInfoFormValueType;
+  };
+
+  const setFormValues = (record: Partial<BasicInfoFormValueType>) => {
+    setFieldsValue(record);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" class="max-w-3/4" />
+</template>

+export { default as DataSourceForm } from './index.vue';

+<script lang="ts" setup>
+  import { Spin, Tooltip } from 'ant-design-vue';
+  import {
+    CopyOutlined,
+    SettingOutlined,
+    SwapOutlined,
+    DeleteOutlined,
+  } from '@ant-design/icons-vue';
+  import { computed } from 'vue';
+  import { PublicFormInstaceType, DataSourceType, SelectedWidgetKeys } from '../../index.type';
+  import { fetchDatasourceComponent } from '../../../packages';
+  import { ConfigType, CreateComponentType } from '../../../packages/index.type';
+  import { ref } from 'vue';
+  import { unref } from 'vue';
+  import { watch } from 'vue';
+  import { nextTick } from 'vue';
+  import { useUpdateQueue } from './useUpdateQueue';
+  import { useSort } from './useSort';
+  import { SettingModal } from '../SettingModal';
+  import { useModal } from '/@/components/Modal';
+  import { ModalParamsType } from '/#/utils';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+  import { toRaw } from 'vue';
+  import cloneDeep from 'lodash-es/cloneDeep';
+  import { isBoolean } from '/@/utils/is';
+  import { DATA_SOURCE_LIMIT_NUMBER } from '../..';
+  import { useMessage } from '/@/hooks/web/useMessage';
+
+  const props = defineProps<{
+    selectWidgetKeys: SelectedWidgetKeys;
+    dataSource: DataSourceType[];
+    componentConfig: CreateComponentType;
+  }>();
+
+  const emit = defineEmits<{
+    (event: 'update:dataSource', data: DataSourceType[]): void;
+  }>();
+
+  const { createMessage } = useMessage();
+
+  const [registerModal, { openModal }] = useModal();
+
+  const { trackUpdate, triggerUpdate } = useUpdateQueue(props);
+
+  const spinning = ref(false);
+
+  const dataSourceFormsEl = ref<{ uuid: string; instance: PublicFormInstaceType }[]>([]);
+
+  const getComponent = computed(() => {
+    try {
+      const { componentKey } = props.selectWidgetKeys;
+      const component = fetchDatasourceComponent({ key: componentKey } as ConfigType);
+      return component;
+    } catch (error) {
+      return '';
+    }
+  });
+
+  const hasSettingDesignIcon = computed(() => {
+    const { componetDesign } = props.componentConfig.persetOption || {};
+    return isBoolean(componetDesign) ? componetDesign : true;
+  });
+
+  const setDataSourceFormsEl = (uuid: string, instance: PublicFormInstaceType, index) => {
+    const findIndex = unref(props.dataSource).findIndex((item) => item.uuid === uuid);
+    if (~findIndex) {
+      dataSourceFormsEl.value[index] = { uuid, instance };
+      triggerUpdate(uuid, instance);
+    }
+  };
+
+  const getFormValueByUUID = (uuid: string): Recordable => {
+    const el = unref(dataSourceFormsEl).find((item) => item.uuid === uuid);
+    if (el && el.instance) return el.instance.getFormValues();
+    return {};
+  };
+
+  const getFormValues = (): DataSourceType[] => {
+    // 过滤失效form
+    dataSourceFormsEl.value = unref(dataSourceFormsEl).filter((item) => item.instance);
+
+    return unref(dataSourceFormsEl).map((item) => {
+      const value = item.instance?.getFormValues();
+      const oldValue =
+        props.dataSource.find((temp) => temp.uuid === item.uuid) || ({} as DataSourceType);
+      return {
+        componentInfo: toRaw(oldValue.componentInfo),
+        ...value,
+        uuid: item.uuid,
+      };
+    });
+  };
+
+  const setFormValues = (value: DataSourceType[]) => {
+    value.forEach((item) => {
+      const { uuid } = item;
+      const el = unref(dataSourceFormsEl).find((item) => item.uuid === uuid);
+      trackUpdate(uuid);
+      if (el && el.instance) {
+        triggerUpdate(uuid, el.instance);
+      }
+    });
+  };
+
+  const validate = async () => {
+    try {
+      for (const item of unref(dataSourceFormsEl)) {
+        const errors = await item.instance?.validate?.();
+        if (isBoolean(errors) && !errors) return { flag: false, errors };
+      }
+      return { flag: true, errors: [] };
+    } catch (error) {
+      console.error(error);
+      return { flag: false, errors: error };
+    }
+  };
+
+  const resetFormValues = async () => {
+    dataSourceFormsEl.value = unref(dataSourceFormsEl).filter((item) => item.instance);
+    unref(dataSourceFormsEl).forEach((item) => {
+      item.instance && item.instance?.resetFormValues?.();
+    });
+  };
+
+  const handleCopy = (record: DataSourceType) => {
+    if (props.dataSource.length >= DATA_SOURCE_LIMIT_NUMBER) {
+      createMessage.warning('绑定的数据源不能超过10条~');
+      return;
+    }
+
+    const allValues = getFormValues();
+    const currentRecord = getFormValueByUUID(record.uuid);
+    const uuid = trackUpdate();
+    const raw = toRaw(record);
+
+    emit('update:dataSource', [
+      ...allValues,
+      { componentInfo: raw.componentInfo, ...currentRecord, uuid },
+    ]);
+  };
+
+  const handleSetting = (record: DataSourceType) => {
+    openModal(true, { mode: DataActionModeEnum.UPDATE, record: record } as ModalParamsType);
+  };
+
+  const handleDelete = (record: DataSourceType) => {
+    const deleteElIndex = unref(dataSourceFormsEl).findIndex((item) => item.uuid === record.uuid);
+    unref(dataSourceFormsEl).splice(deleteElIndex, 1);
+    const raw = getFormValues();
+    emit('update:dataSource', raw);
+  };
+
+  watch(
+    () => props.dataSource,
+    async (value) => {
+      if (value && value.length) {
+        nextTick();
+        setFormValues(value);
+      }
+    }
+  );
+
+  const { containerEl } = useSort(emit, getFormValues);
+
+  const handleSettingOk = (data: DataSourceType) => {
+    const { uuid } = data;
+    const _dataSource = cloneDeep(props.dataSource);
+
+    const index = _dataSource.findIndex((item) => item.uuid === uuid);
+
+    _dataSource[index] = { ..._dataSource[index], ...data };
+
+    emit('update:dataSource', _dataSource);
+  };
+
+  defineExpose({
+    getFormValues,
+    validate,
+    setFormValues,
+    resetFormValues,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <section ref="containerEl">
+    <Spin :spinning="spinning">
+      <main v-for="(item, index) in dataSource" :key="item.uuid" class="flex">
+        <label class="w-24 text-right pr-2">数据源{{ index + 1 }}</label>
+        <component
+          :ref="(event) => setDataSourceFormsEl(item.uuid, event, index)"
+          class="flex-1 bg-light-50 dark:bg-dark-400"
+          :is="getComponent"
+          :component-config="componentConfig"
+          :values="item"
+        />
+        <div class="w-28 flex gap-3 ml-2">
+          <Tooltip title="复制">
+            <CopyOutlined @click="handleCopy(item)" class="cursor-pointer text-lg !leading-32px" />
+          </Tooltip>
+          <Tooltip title="设置" v-if="hasSettingDesignIcon">
+            <SettingOutlined
+              @click="handleSetting(item)"
+              class="cursor-pointer text-lg !leading-32px"
+            />
+          </Tooltip>
+          <Tooltip title="拖拽排序">
+            <SwapOutlined
+              class="cursor-pointer text-lg !leading-32px svg:transform svg:rotate-90 sort-icon"
+            />
+          </Tooltip>
+          <Tooltip title="删除">
+            <DeleteOutlined
+              @click="handleDelete(item)"
+              class="cursor-pointer text-lg !leading-32px"
+            />
+          </Tooltip>
+        </div>
+      </main>
+    </Spin>
+
+    <SettingModal
+      @register="registerModal"
+      @ok="handleSettingOk"
+      :component-config="componentConfig"
+      :select-widget-keys="selectWidgetKeys"
+    />
+  </section>
+</template>

+import { nextTick, onMounted, ref, unref } from 'vue';
+import { useSortable } from '/@/hooks/web/useSortable';
+import { isNullAndUnDef } from '/@/utils/is';
+import { DataSourceType } from '../../index.type';
+
+export const useSort = (
+  emit: (event: 'update:dataSource', data: DataSourceType[]) => void,
+  getFormValues: () => DataSourceType[]
+) => {
+  let inited = false;
+  const containerEl = ref<Nullable<HTMLElement>>(null);
+  async function handleSort() {
+    if (inited) return;
+    await nextTick();
+    const container = unref(containerEl);
+    if (!container) return;
+    const element: Nullable<HTMLElement> = unref(container).querySelector('.ant-spin-container');
+    if (!element) return;
+
+    const { initSortable } = useSortable(element, {
+      handle: '.sort-icon',
+      onEnd: (evt) => {
+        const { oldIndex, newIndex } = evt;
+        if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) {
+          return;
+        }
+        const dataSource = getFormValues();
+
+        if (oldIndex > newIndex) {
+          dataSource.splice(newIndex, 0, dataSource[oldIndex]);
+          dataSource.splice(oldIndex + 1, 1);
+        } else {
+          dataSource.splice(newIndex + 1, 0, dataSource[oldIndex]);
+          dataSource.splice(oldIndex, 1);
+        }
+        emit('update:dataSource', dataSource);
+      },
+    });
+    initSortable();
+    inited = true;
+  }
+
+  onMounted(() => handleSort());
+
+  return { containerEl };
+};

+import { nextTick } from 'vue';
+import { PublicFormInstaceType, DataSourceType } from '../../index.type';
+import { buildUUID } from '/@/utils/uuid';
+
+export const useUpdateQueue = (props: { dataSource: DataSourceType[] }) => {
+  const needUpdateQueue: string[] = [];
+
+  const triggerUpdate = (uuid: string, instance: PublicFormInstaceType) => {
+    const index = needUpdateQueue.findIndex((item) => item === uuid);
+    if (~index) {
+      const value = props.dataSource.find((item) => item.uuid === uuid);
+      nextTick(() => instance?.setFormValues(value || {}));
+      needUpdateQueue.splice(index, 1);
+    }
+  };
+
+  const trackUpdate = (uuid = buildUUID()) => {
+    needUpdateQueue.push(uuid);
+    return uuid;
+  };
+
+  return { trackUpdate, triggerUpdate };
+};

+export { default as MessageAlert } from './index.vue';

+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { PackagesCategoryEnum } from '../../../packages/index.type';
+  import { SelectedWidgetKeys } from '../../index.type';
+  import { Alert } from 'ant-design-vue';
+
+  const props = defineProps<{
+    selectWidgetKeys: SelectedWidgetKeys;
+  }>();
+
+  const alert = {
+    [PackagesCategoryEnum.MAP]: [
+      '地图组件，需绑定两个数据源，且数据源为同一设备。第一数据源为经度，第二数据源为纬度，否则地图组件不能正常显示。',
+    ],
+    [PackagesCategoryEnum.CONTROL]: [
+      '控制组件数据源为TCP产品,则其控制命令下发为TCP产品 物模型=>服务，且不具备状态显示功能.',
+      '控制组件数据源为非TCP产品,则其控制命令下发为产品 物模型=>属性，且具备状态显示功能.',
+    ],
+  };
+
+  const getMessage = computed(() => {
+    const { selectWidgetKeys } = props;
+    const { categoryKey } = selectWidgetKeys;
+    return alert[categoryKey];
+  });
+</script>
+
+<template>
+  <Alert v-if="getMessage" type="info" show-icon>
+    <template #description>
+      <div v-for="(item, index) in getMessage" :key="index">{{ item }}</div>
+    </template>
+  </Alert>
+</template>

+export { default as SettingModal } from './index.vue';

+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { fetchConfigComponent } from '../../../packages';
+  import { DataSourceType, PublicFormInstaceType, SelectedWidgetKeys } from '../../index.type';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { ConfigType, CreateComponentType } from '../../../packages/index.type';
+  import { ref } from 'vue';
+  import { unref } from 'vue';
+  import { ModalParamsType } from '/#/utils';
+
+  const props = defineProps<{
+    selectWidgetKeys: SelectedWidgetKeys;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const emit = defineEmits(['register', 'ok']);
+
+  const settingFormEl = ref<Nullable<PublicFormInstaceType>>(null);
+
+  const getSettingComponent = computed(() => {
+    try {
+      const { componentKey } = props.selectWidgetKeys;
+      const component = fetchConfigComponent({ key: componentKey } as ConfigType);
+      return component;
+    } catch (error) {
+      return '';
+    }
+  });
+
+  const currentEditRecord = ref<DataSourceType>({} as DataSourceType);
+
+  const [register, { closeModal }] = useModalInner((data: ModalParamsType<DataSourceType>) => {
+    const { record } = data;
+    currentEditRecord.value = record;
+    setFormValues(record.componentInfo || {});
+  });
+
+  const getFormValues = () => {
+    return unref(settingFormEl)?.getFormValues();
+  };
+
+  const setFormValues = (data: Recordable) => {
+    unref(settingFormEl)?.setFormValues(data || {});
+  };
+
+  const handleOk = () => {
+    const { uuid } = unref(currentEditRecord);
+    emit('ok', { uuid, componentInfo: getFormValues() } as DataSourceType);
+    closeModal();
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicModal @register="register" title="组件设置" @ok="handleOk">
+    <!--  -->
+    <component ref="settingFormEl" :is="getSettingComponent" />
+  </BasicModal>
+</template>

+export { default as DataSourceBindPanel } from './index.vue';
+
+export const DATA_SOURCE_LIMIT_NUMBER = 10;

+import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
+import { DataSource } from '../palette/types';
+
+export interface SelectedWidgetKeys {
+  categoryKey: string;
+  componentKey: string;
+}
+
+export interface DataSourceType {
+  uuid: string;
+  componentInfo?: Recordable;
+  [key: string]: any;
+}
+
+export interface PublicComponentValueType extends DataSource {
+  uuid: string;
+  [key: string]: any;
+}
+
+export interface PublicFormInstaceType {
+  getFormValues: () => Recordable;
+  setFormValues: (data: Recordable) => void;
+  resetFormValues: () => Promise<void>;
+  validate?: () => Promise<{ flag: boolean; errors: ValidateErrorEntity }>;
+}

+<script lang="ts" setup>
+  import { computed, ref, watch } from 'vue';
+  import { BasicInfoForm } from './components/BasicInfoForm';
+  import { ModalParamsType } from '/#/utils';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { Divider, Tabs, Button, Spin } from 'ant-design-vue';
+  import { DataSourceForm } from './components/DataSourceForm';
+  import { WidgetLibrary } from '../widgetLibrary';
+  import {
+    CreateComponentType,
+    PackagesCategoryEnum,
+    PackagesCategoryNameEnum,
+  } from '../packages/index.type';
+  import { TextComponent1Config } from '../packages/components/Text/TextComponent1';
+  import { DataSourceType, SelectedWidgetKeys } from './index.type';
+  import { buildUUID } from '/@/utils/uuid';
+  import { unref } from 'vue';
+  import { AddDataComponentParams } from '/@/api/dataBoard/model';
+  import { useCalcNewWidgetPosition } from '../palette/hooks/useCalcNewWidgetPosition';
+  import { Layout } from 'vue3-grid-layout';
+  import { useBoardId } from '../palette/hooks/useBoardId';
+  import { addDataComponent, updateDataComponent } from '/@/api/dataBoard';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+  import { WidgetDataType } from '../palette/hooks/useDataSource';
+  import { DATA_SOURCE_LIMIT_NUMBER } from '.';
+  import { DataSource } from '../palette/types';
+  import { useGetComponentConfig } from '../packages/hook/useGetComponetConfig';
+  import { MessageAlert } from './components/MessageAlert';
+  import { createSelectWidgetKeysContext, createSelectWidgetModeContext } from './useContext';
+
+  const props = defineProps<{
+    layout: Layout[];
+  }>();
+
+  const emit = defineEmits(['register', 'ok']);
+
+  enum TabKeyEnum {
+    BASIC = 'basic',
+    VISUAL = 'visual',
+  }
+
+  const { boardId } = useBoardId();
+
+  const { createMessage } = useMessage();
+
+  const loading = ref(false);
+
+  const dataSourceFormSpinning = ref(false);
+
+  const selectWidgetKeys = ref<SelectedWidgetKeys>({
+    componentKey: TextComponent1Config.key,
+    categoryKey: PackagesCategoryEnum.TEXT,
+  });
+
+  createSelectWidgetKeysContext(selectWidgetKeys);
+
+  const getComponentConfig = computed<CreateComponentType>(() => {
+    return useGetComponentConfig(unref(selectWidgetKeys).componentKey);
+  });
+
+  const activeKey = ref(TabKeyEnum.BASIC);
+
+  const genNewDataSourceItem = () => {
+    return {
+      uuid: buildUUID(),
+      componentInfo: unref(getComponentConfig).persetOption || {},
+    } as DataSourceType;
+  };
+
+  const dataSource = ref<DataSourceType[]>(Array.from({ length: 1 }, () => genNewDataSourceItem()));
+
+  const currentMode = ref<DataActionModeEnum>(DataActionModeEnum.CREATE);
+
+  createSelectWidgetModeContext(currentMode);
+
+  const currentRecord = ref<WidgetDataType>();
+
+  const [registerModal, { closeModal }] = useModalInner(
+    (params: ModalParamsType<WidgetDataType>) => {
+      resetFormValues();
+      const { mode, record } = params;
+      currentMode.value = mode;
+      currentRecord.value = record;
+      if (mode === DataActionModeEnum.UPDATE) {
+        const config = useGetComponentConfig(record.frontId);
+        selectWidgetKeys.value = {
+          componentKey: config.componentConfig.key,
+          categoryKey: config.componentConfig.package,
+        };
+        setFormValues(record);
+      } else {
+        dataSource.value = [genNewDataSourceItem()];
+      }
+    }
+  );
+
+  const basicInfoFromEl = ref<Nullable<InstanceType<typeof BasicInfoForm>>>(null);
+
+  const dataSourceFormEl = ref<Nullable<InstanceType<typeof DataSourceForm>>>(null);
+
+  const handleTabsChange = (activeKey: TabKeyEnum) => {
+    if (activeKey === TabKeyEnum.VISUAL) {
+      dataSource.value = (dataSourceFormEl.value?.getFormValues() as DataSourceType[]) || [];
+    }
+  };
+
+  const handleNewRecord = () => {
+    if (unref(dataSource).length >= DATA_SOURCE_LIMIT_NUMBER) {
+      createMessage.warning('绑定的数据源不能超过10条~');
+      return;
+    }
+    dataSource.value.push(genNewDataSourceItem());
+  };
+
+  /**
+   * @description 可视化组件变化 数据源组件变更 重新赋值表单
+   */
+  watch(
+    () => selectWidgetKeys.value.componentKey,
+    (value) => {
+      if (value) {
+        dataSource.value = unref(dataSource).map((item) => ({
+          ...item,
+          componentInfo: { ...unref(getComponentConfig).persetOption, ...item.componentInfo },
+        }));
+        if (window.requestIdleCallback as unknown as boolean) {
+          requestIdleCallback(
+            () => {
+              setFormValues({ dataSource: unref(dataSource) } as WidgetDataType);
+            },
+            { timeout: 500 }
+          );
+        } else {
+          setTimeout(() => {
+            setFormValues({ dataSource: unref(dataSource) } as WidgetDataType);
+          }, 500);
+        }
+      }
+    }
+  );
+
+  const validate = async () => {
+    return await unref(dataSourceFormEl)?.validate?.();
+  };
+
+  const resetFormValues = () => {
+    unref(basicInfoFromEl)?.resetFormValues();
+    unref(dataSourceFormEl)?.resetFormValues();
+  };
+
+  const setFormValues = (data: WidgetDataType) => {
+    const { dataSource: newDataSource } = data;
+    const { name, remark } = unref(currentRecord) || {};
+    dataSource.value = newDataSource;
+    unref(basicInfoFromEl)?.setFormValues({ name, remark });
+    dataSourceFormSpinning.value = true;
+    setTimeout(() => {
+      unref(dataSourceFormEl)?.setFormValues(newDataSource);
+      dataSourceFormSpinning.value = false;
+    }, 500);
+  };
+
+  const getFormValues = () => {
+    const dataSource = (
+      (unref(dataSourceFormEl)?.getFormValues() as unknown as DataSource[]) || []
+    ).map((item) => {
+      Reflect.deleteProperty(item, 'uuid');
+      return item;
+    });
+
+    const basicInfo = unref(basicInfoFromEl)?.getFormValues();
+
+    const layout = useCalcNewWidgetPosition(props.layout);
+
+    const frontId = unref(selectWidgetKeys).componentKey;
+    return {
+      boardId: unref(boardId),
+      record: {
+        ...(unref(currentMode) === DataActionModeEnum.UPDATE
+          ? { id: unref(currentRecord)?.id }
+          : {}),
+        ...basicInfo,
+        dataSource,
+        layout,
+        frontId,
+      },
+    } as AddDataComponentParams;
+  };
+
+  const getVisualConfigTitle = computed(() => {
+    const { categoryKey } = unref(selectWidgetKeys);
+    const category = PackagesCategoryNameEnum[PackagesCategoryEnum[categoryKey]];
+    const { componentConfig } = unref(getComponentConfig);
+    return `${category} / ${componentConfig.title}`;
+  });
+
+  const handleSubmit = async () => {
+    const validateResult = await validate();
+    if (validateResult && !validateResult.flag) {
+      const { errors } = validateResult;
+      if (errors && errors.errorFields.length) {
+        const errorRecord = errors.errorFields[0];
+        createMessage.warning(errorRecord.errors.join(''));
+        if (activeKey.value === TabKeyEnum.VISUAL) {
+          activeKey.value = TabKeyEnum.BASIC;
+        }
+        return;
+      }
+    }
+    const value = getFormValues();
+    try {
+      loading.value = true;
+      unref(currentMode) === DataActionModeEnum.UPDATE
+        ? await updateDataComponent(value)
+        : await addDataComponent(value);
+      createMessage.success(
+        `${unref(currentMode) === DataActionModeEnum.UPDATE ? '编辑' : '新增'}成功~`
+      );
+      closeModal();
+      emit('ok');
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+</script>
+
+<template>
+  <BasicModal
+    title="自定义组件"
+    width="70%"
+    @register="registerModal"
+    @ok="handleSubmit"
+    :ok-button-props="{ loading }"
+  >
+    <Tabs v-model:active-key="activeKey" type="card" @change="handleTabsChange" :animated="true">
+      <Tabs.TabPane tab="基础配置" :key="TabKeyEnum.BASIC">
+        <Divider orientation="left">基础信息</Divider>
+
+        <BasicInfoForm ref="basicInfoFromEl" />
+
+        <MessageAlert :select-widget-keys="selectWidgetKeys" />
+
+        <Divider orientation="left">数据源配置</Divider>
+
+        <Spin :spinning="dataSourceFormSpinning">
+          <DataSourceForm
+            ref="dataSourceFormEl"
+            :key="getComponentConfig.componentConfig.datasourceConKey"
+            :select-widget-keys="selectWidgetKeys"
+            v-model:dataSource="dataSource"
+            :component-config="getComponentConfig"
+          />
+        </Spin>
+
+        <div class="flex justify-center">
+          <Button type="primary" @click="handleNewRecord">添加数据源</Button>
+        </div>
+      </Tabs.TabPane>
+      <Tabs.TabPane :key="TabKeyEnum.VISUAL">
+        <template #tab>
+          <span>可视化配置</span>
+          <span class="mx-1">-</span>
+          <span> {{ getVisualConfigTitle }}</span>
+        </template>
+        <WidgetLibrary v-model:checked="selectWidgetKeys" />
+      </Tabs.TabPane>
+    </Tabs>
+  </BasicModal>
+</template>

+import { Ref, inject, provide } from 'vue';
+import { SelectedWidgetKeys } from './index.type';
+import { DataActionModeEnum } from '/@/enums/toolEnum';
+
+const selectWidgetKeysKey = Symbol('select-widget-keys');
+
+export const createSelectWidgetKeysContext = (state: Ref<SelectedWidgetKeys>) => {
+  provide(selectWidgetKeysKey, state);
+};
+
+export const useSelectWidgetKeys = () => {
+  return inject(selectWidgetKeysKey) as Ref<SelectedWidgetKeys>;
+};
+
+const selectWidgetModeKey = Symbol('select-widget-mode');
+
+export const createSelectWidgetModeContext = (mode: Ref<DataActionModeEnum>) => {
+  provide(selectWidgetModeKey, mode);
+};
+
+export const useSelectWidgetMode = () => {
+  return inject(selectWidgetModeKey) as Ref<DataActionModeEnum>;
+};

+import { tryOnUnmounted } from '@vueuse/core';
+import { Component } from 'vue';
+
+/**
+ * @description 转换前端组件key, 兼容旧数据
+ * @param string
+ */
+export const transformComponentKey = (string: string) => {
+  const CONNECTION_SYMBOL = '-';
+  const needTransformFlag = string.includes(CONNECTION_SYMBOL);
+
+  if (needTransformFlag) {
+    return string
+      .split(CONNECTION_SYMBOL)
+      .map((item) => `${item.substring(0, 1).toUpperCase()}${item.substring(1).toLowerCase()}`)
+      .join('');
+  }
+
+  return string;
+};
+
+export const componentMap = new Map();
+
+export const registerComponent = (name: string, component: Component) => {
+  const _name = transformComponentKey(name);
+  if (componentMap.has(_name)) {
+    return componentMap.get(_name);
+  }
+
+  componentMap.set(_name, component);
+
+  tryOnUnmounted(() => {
+    uninstallComponent(_name);
+  });
+
+  return component;
+};
+
+export const uninstallComponent = (name: string) => {
+  componentMap.delete(transformComponentKey(name));
+};
+
+export const getComponent = (frontId: string) => {
+  return componentMap.get(transformComponentKey(frontId));
+};

+import cloneDeep from 'lodash-es/cloneDeep';
+import { ControlComponentSlidingSwitchConfig } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '/@/views/visual/packages/index.type';
+import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
+
+export const option: PublicPresetOptions = {
+  componetDesign: false,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = ControlComponentSlidingSwitchConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(ControlComponentSlidingSwitchConfig);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

+<script lang="ts" setup>
+  import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: [
+      {
+        field: ComponentConfigFieldEnum.FONT_COLOR,
+        label: '数值字体颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        componentProps: {
+          defaultValue: '#FD7347',
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+      },
+    ],
+    showActionButtonGroup: false,
+    labelWidth: 120,
+    baseColProps: {
+      span: 12,
+    },
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (data: Recordable) => {
+    return setFieldsValue(data);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+<script lang="ts" setup>
+  import { CreateComponentType } from '/@/views/visual/packages/index.type';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import {
+    CommonDataSourceBindValueType,
+    commonDataSourceSchemas,
+  } from '../../../config/common.config';
+  import { DataSource } from '/@/views/visual/palette/types';
+
+  defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  const getFormValues = () => {
+    let value = getFieldsValue() as CommonDataSourceBindValueType;
+    value = {
+      ...value,
+      customCommand: {
+        transportType: value.transportType,
+        service: value.service,
+        command: value.command,
+        commandType: value.commandType,
+      },
+    };
+    return value;
+  };
+
+  const setFormValues = (record: DataSource) => {
+    const { customCommand } = record;
+    return setFieldsValue({
+      ...record,
+      transportType: customCommand?.transportType,
+      service: customCommand?.service,
+      command: customCommand?.command,
+      commandType: customCommand?.commandType,
+    } as unknown as Partial<CommonDataSourceBindValueType>);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    validate,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('ControlComponentSlidingSwitch');
+
+export const ControlComponentSlidingSwitchConfig: ConfigType = {
+  ...componentKeys,
+  title: '控制组件2',
+  package: PackagesCategoryEnum.CONTROL,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { Spin } from 'ant-design-vue';
+  import { ref } from 'vue';
+  import { useComponentScale } from '../../../hook/useComponentScale';
+  import { useSendCommand } from '../../../hook/useSendCommand';
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const { getScale } = useComponentScale(props);
+
+  const currentValue = ref(false);
+
+  const { sendCommand, loading } = useSendCommand();
+  const handleChange = async (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    const value = target.checked;
+
+    const flag = await sendCommand(props.config.option, value);
+    if (flag) currentValue.value = value;
+    flag ? (currentValue.value = value) : (target.checked = !value);
+  };
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    const [_, value] = latest;
+    currentValue.value = !!value;
+  };
+
+  useDataFetch(props, updateFn);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center">
+    <Spin :spinning="loading">
+      <label class="sliding-switch" :style="getScale">
+        <input
+          type="checkbox"
+          :value="currentValue"
+          :checked="currentValue"
+          @change="handleChange"
+        />
+        <span class="slider"></span>
+        <span class="on">ON</span>
+        <span class="off">OFF</span>
+      </label>
+      <div class="text-center mt-2 text-gray-700" :style="getScale"> 属性 </div>
+    </Spin>
+  </main>
+</template>
+
+<style scoped lang="less">
+  :deep(.ant-spin-container) {
+    @apply !flex !flex-col justify-center items-center !flex-nowrap;
+  }
+
+  .sliding-switch {
+    position: relative;
+    display: block;
+    font-weight: 700;
+    line-height: 40px;
+    width: 80px;
+    height: 40px;
+    font-size: 14px;
+    cursor: pointer;
+    user-select: none;
+
+    input[type='checkbox'] {
+      display: none;
+    }
+
+    .slider {
+      width: 80px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      border: 2px solid #ecf0f3;
+      border-radius: 20px;
+      box-shadow: -2px -2px 8px #fff, -2px -2px 12px hsl(0deg 0% 100% / 50%),
+        inset -2px -2px 8px #fff, inset -2px -2px 12px hsl(0deg 0% 100% / 50%),
+        inset 2px 2px 4px hsl(0deg 0% 100% / 10%), inset 2px 2px 8px rgb(0 0 0 / 30%),
+        2px 2px 8px rgb(0 0 0 / 30%);
+      background-color: #ecf0f3;
+      z-index: -1;
+    }
+
+    .slider::after {
+      cursor: pointer;
+      display: block;
+      content: '';
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      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%);
+      z-index: 999;
+      transition: 0.5s;
+    }
+
+    input:checked ~ .off {
+      opacity: 0;
+    }
+
+    input:checked ~ .slider::after {
+      transform: translateX(35px);
+    }
+
+    input:not(:checked) ~ .on {
+      opacity: 0;
+      transform: translateX(0);
+    }
+
+    .on,
+    .off {
+      position: absolute;
+      top: 0;
+      display: inline-block;
+      margin-left: 3px;
+      width: 34px;
+      text-align: center;
+      transition: 0.2s;
+    }
+
+    .on {
+      color: #039be5;
+    }
+
+    .off {
+      right: 6px;
+      color: #999;
+    }
+  }
+</style>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { ControlComponentSwitchWithIconConfig } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '/@/views/visual/packages/index.type';
+import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
+import { ComponentConfigFieldEnum } from '../../../enum';
+
+export const option: PublicPresetOptions = {
+  [ComponentConfigFieldEnum.ICON]: 'shuiwen',
+  [ComponentConfigFieldEnum.ICON_COLOR]: '#377DFF',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = ControlComponentSwitchWithIconConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(ControlComponentSwitchWithIconConfig);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

+<script lang="ts" setup>
+  import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import { option } from './config';
+
+  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: [
+      {
+        field: ComponentConfigFieldEnum.ICON_COLOR,
+        label: '图标颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.iconColor,
+      },
+      {
+        field: ComponentConfigFieldEnum.ICON,
+        label: '图标',
+        component: 'IconDrawer',
+        changeEvent: 'update:value',
+        defaultValue: option.icon,
+        componentProps({ formModel }) {
+          const color = formModel[ComponentConfigFieldEnum.ICON_COLOR];
+          return {
+            color,
+          };
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+    ],
+    showActionButtonGroup: false,
+    labelWidth: 120,
+    baseColProps: {
+      span: 12,
+    },
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (data: Recordable) => {
+    return setFieldsValue(data);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+<script lang="ts" setup>
+  import { CreateComponentType } from '/@/views/visual/packages/index.type';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import {
+    CommonDataSourceBindValueType,
+    commonDataSourceSchemas,
+  } from '../../../config/common.config';
+  import { DataSource } from '/@/views/visual/palette/types';
+
+  defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  const getFormValues = () => {
+    let value = getFieldsValue() as CommonDataSourceBindValueType;
+    value = {
+      ...value,
+      customCommand: {
+        transportType: value.transportType,
+        service: value.service,
+        command: value.command,
+        commandType: value.commandType,
+      },
+    };
+    return value;
+  };
+
+  const setFormValues = (record: DataSource) => {
+    const { customCommand } = record;
+    return setFieldsValue({
+      ...record,
+      transportType: customCommand?.transportType,
+      service: customCommand?.service,
+      command: customCommand?.command,
+      commandType: customCommand?.commandType,
+    } as unknown as Partial<CommonDataSourceBindValueType>);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    validate,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('ControlComponentSwitchWithIcon');
+
+export const ControlComponentSwitchWithIconConfig: ConfigType = {
+  ...componentKeys,
+  title: '控制组件1',
+  package: PackagesCategoryEnum.CONTROL,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { SvgIcon } from '/@/components/Icon';
+  import { Switch } from 'ant-design-vue';
+  import { computed, ref } from 'vue';
+  import { useComponentScale } from '../../../hook/useComponentScale';
+  import { useSendCommand } from '../../../hook/useSendCommand';
+  import { unref } from 'vue';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const checked = ref(false);
+
+  const getDesign = computed(() => {
+    const { option, persetOption } = props.config;
+    const { componentInfo, attribute, attributeRename } = option;
+    const { icon: presetIcon, iconColor: presetIconColor } = persetOption || {};
+    const { icon, iconColor } = componentInfo || {};
+    return {
+      icon: icon ?? presetIcon,
+      iconColor: iconColor || presetIconColor,
+      attribute: attributeRename || attribute,
+    };
+  });
+
+  const { sendCommand, loading } = useSendCommand();
+  const handleChange = async () => {
+    const flag = await sendCommand(props.config.option, unref(checked));
+    if (!flag) checked.value = !unref(checked);
+  };
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    const [_, value] = latest;
+    checked.value = !!value;
+  };
+
+  useDataFetch(props, updateFn);
+  const { getScale } = useComponentScale(props);
+</script>
+
+<template>
+  <main class="w-full h-full flex justify-center items-center" :style="getScale">
+    <div class="flex flex-col justify-center items-center mr-20">
+      <SvgIcon
+        :name="getDesign.icon"
+        prefix="iconfont"
+        :style="{ color: getDesign.iconColor }"
+        :size="50"
+      />
+      <span class="mt-3 truncate text-gray-500 text-xs text-center">
+        {{ getDesign.attribute || '属性' }}
+      </span>
+    </div>
+    <Switch v-model:checked="checked" :loading="loading" @change="handleChange" />
+  </main>
+</template>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { ControlComponentToggleSwitchConfig } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '/@/views/visual/packages/index.type';
+import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
+
+export const option: PublicPresetOptions = {
+  componetDesign: false,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = ControlComponentToggleSwitchConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(ControlComponentToggleSwitchConfig);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

+<script lang="ts" setup>
+  import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: [
+      {
+        field: ComponentConfigFieldEnum.FONT_COLOR,
+        label: '数值字体颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        componentProps: {
+          defaultValue: '#FD7347',
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+      },
+    ],
+    showActionButtonGroup: false,
+    labelWidth: 120,
+    baseColProps: {
+      span: 12,
+    },
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (data: Recordable) => {
+    return setFieldsValue(data);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+<script lang="ts" setup>
+  import { CreateComponentType } from '/@/views/visual/packages/index.type';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import {
+    CommonDataSourceBindValueType,
+    commonDataSourceSchemas,
+  } from '../../../config/common.config';
+  import { DataSource } from '/@/views/visual/palette/types';
+
+  defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  const getFormValues = () => {
+    let value = getFieldsValue() as CommonDataSourceBindValueType;
+    value = {
+      ...value,
+      customCommand: {
+        transportType: value.transportType,
+        service: value.service,
+        command: value.command,
+        commandType: value.commandType,
+      },
+    };
+    return value;
+  };
+
+  const setFormValues = (record: DataSource) => {
+    const { customCommand } = record;
+    return setFieldsValue({
+      ...record,
+      transportType: customCommand?.transportType,
+      service: customCommand?.service,
+      command: customCommand?.command,
+      commandType: customCommand?.commandType,
+    } as unknown as Partial<CommonDataSourceBindValueType>);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    validate,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('ControlComponentToggleSwitch');
+
+export const ControlComponentToggleSwitchConfig: ConfigType = {
+  ...componentKeys,
+  title: '控制组件3',
+  package: PackagesCategoryEnum.CONTROL,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { Spin } from 'ant-design-vue';
+  import { ref } from 'vue';
+  import { useComponentScale } from '../../../hook/useComponentScale';
+  import { useSendCommand } from '../../../hook/useSendCommand';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const { getScale } = useComponentScale(props);
+
+  const currentValue = ref(false);
+
+  const { loading, sendCommand } = useSendCommand();
+  const handleChange = async (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    const value = target.checked;
+    const flag = await sendCommand(props.config.option, value);
+    flag ? (currentValue.value = value) : (target.checked = !value);
+  };
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    const [_, value] = latest;
+    currentValue.value = !!value;
+  };
+
+  useDataFetch(props, updateFn);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center">
+    <Spin :spinning="loading" class="w-full h-full">
+      <div class="toggle-switch" :style="getScale">
+        <label class="switch">
+          <input type="checkbox" :checked="currentValue" @change="handleChange" />
+          <div class="button">
+            <div class="light"></div>
+            <div class="dots"></div>
+            <div class="characters"></div>
+            <div class="shine"></div>
+            <div class="shadow"></div>
+          </div>
+        </label>
+      </div>
+      <div class="text-center mt-2 text-gray-500" :style="getScale">属性</div>
+    </Spin>
+  </main>
+</template>
+
+<style scoped>
+  :deep(.ant-spin-container) {
+    @apply !flex !flex-col justify-center items-center;
+  }
+
+  .toggle-switch {
+    /* flex: 1 1 auto; */
+    max-width: 75px;
+    width: 75px;
+    max-height: 100px;
+    height: 100px;
+
+    /* height: 97.5px; */
+    display: flex;
+  }
+
+  .switch {
+    background-color: black;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white,
+      inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
+    border-radius: 5px;
+    padding: 10px;
+    perspective: 700px;
+  }
+
+  .switch input {
+    display: none;
+  }
+
+  .switch input:checked + .button {
+    transform: translateZ(20px) rotateX(25deg);
+    box-shadow: 0 -5px 10px #ff1818;
+  }
+
+  .switch input:checked + .button .light {
+    animation: flicker 0.2s infinite 0.3s;
+  }
+
+  .switch input:checked + .button .shine {
+    opacity: 1;
+  }
+
+  .switch input:checked + .button .shadow {
+    opacity: 0;
+  }
+
+  .switch .button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s cubic-bezier(1, 0, 1, 1);
+    transform-origin: center center -20px;
+    transform: translateZ(20px) rotateX(-25deg);
+    transform-style: preserve-3d;
+    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;
+  }
+
+  .switch .button::before {
+    content: '';
+    background: linear-gradient(
+          rgba(255, 255, 255, 0.8) 10%,
+          rgba(255, 255, 255, 0.3) 30%,
+          #650000 75%,
+          #320000
+        )
+        50% 50%/97% 97%,
+      #b10000;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 30px;
+    transform-origin: top;
+    transform: rotateX(-90deg);
+    position: absolute;
+    top: 0;
+  }
+
+  .switch .button::after {
+    content: '';
+    background-image: linear-gradient(#650000, #320000);
+    width: 100%;
+    height: 30px;
+    transform-origin: top;
+    transform: translateY(30px) rotateX(-90deg);
+    position: absolute;
+    bottom: 0;
+    box-shadow: 0 30px 8px 0 black, 0 60px 20px 0 rgb(0 0 0 / 50%);
+  }
+
+  .switch .light {
+    opacity: 0;
+    animation: light-off 1s;
+    position: absolute;
+    width: 80%;
+    height: 80%;
+    background-image: radial-gradient(#ffc97e, transparent 40%),
+      radial-gradient(circle, #ff1818 50%, transparent 80%);
+  }
+
+  .switch .dots {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%);
+    background-size: 10px 10px;
+  }
+
+  .switch .characters {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(white, white) 50% 20%/5% 20%,
+      radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33%
+        25%;
+    background-repeat: no-repeat;
+  }
+
+  .switch .shine {
+    transition: all 0.3s cubic-bezier(1, 0, 1, 1);
+    opacity: 0.3;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%,
+      linear-gradient(
+          rgba(255, 255, 255, 0.5),
+          transparent 50%,
+          transparent 80%,
+          rgba(255, 255, 255, 0.5)
+        )
+        50% 50%/97% 97%;
+    background-repeat: no-repeat;
+  }
+
+  .switch .shadow {
+    transition: all 0.3s cubic-bezier(1, 0, 1, 1);
+    opacity: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8));
+    background-repeat: no-repeat;
+  }
+
+  @keyframes flicker {
+    0% {
+      opacity: 1;
+    }
+
+    80% {
+      opacity: 0.8;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes light-off {
+    0% {
+      opacity: 1;
+    }
+
+    80% {
+      opacity: 0;
+    }
+  }
+</style>

+import { ControlComponentSlidingSwitchConfig } from './ControlComponentSlidingSwitch';
+import { ControlComponentSwitchWithIconConfig } from './ControlComponentSwitchWithIcon';
+import { ControlComponentToggleSwitchConfig } from './ControlComponentToggleSwitch';
+
+export const ControlList = [
+  ControlComponentSwitchWithIconConfig,
+  ControlComponentSlidingSwitchConfig,
+  ControlComponentToggleSwitchConfig,
+];

+import cloneDeep from 'lodash-es/cloneDeep';
+import { DigitalDashboardComponentConfig } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '/@/views/visual/packages/index.type';
+import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
+import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+
+export const option: PublicPresetOptions = {
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
+  [ComponentConfigFieldEnum.UNIT]: 'kw/h',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = DigitalDashboardComponentConfig.key;
+
+  public attr = { ...componentInitConfig, w: 340 };
+
+  public componentConfig: ConfigType = cloneDeep(DigitalDashboardComponentConfig);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

+<script lang="ts" setup>
+  import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import { option } from './config';
+
+  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: [
+      {
+        field: ComponentConfigFieldEnum.FONT_COLOR,
+        label: '数值字体颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.fontColor,
+      },
+      {
+        field: ComponentConfigFieldEnum.UNIT,
+        label: '数值单位',
+        component: 'Input',
+        defaultValue: option.unit,
+        componentProps: {
+          placeholder: '请输入数值单位',
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+    ],
+    showActionButtonGroup: false,
+    labelWidth: 120,
+    baseColProps: {
+      span: 12,
+    },
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (data: Recordable) => {
+    return setFieldsValue(data);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+<script lang="ts" setup>
+  import { CreateComponentType } from '/@/views/visual/packages/index.type';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import { commonDataSourceSchemas } from '../../../config/common.config';
+
+  defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (record: Recordable) => {
+    return setFieldsValue(record);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    validate,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('DigitalDashboardComponent');
+
+export const DigitalDashboardComponentConfig: ConfigType = {
+  ...componentKeys,
+  title: '数字仪表盘',
+  package: PackagesCategoryEnum.INSTRUMENT,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { ref, computed, unref } from 'vue';
+  import { Space } from 'ant-design-vue';
+  import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const currentValue = ref(99.23);
+
+  const time = ref<Nullable<number>>(null);
+
+  const integerPart = computed(() => {
+    let number = unref(currentValue);
+    const max = 5;
+    if (isNaN(number)) number = 0;
+    let _value = number.toString().split('.')[0];
+
+    if (_value.length > max) return ''.padStart(max, '9');
+    if (_value.length < max) return _value.padStart(max, '0');
+
+    return _value;
+  });
+
+  const decimalPart = computed(() => {
+    let number = unref(currentValue);
+
+    const keepNumber = 2;
+
+    if (isNaN(number)) number = 0;
+
+    let _value = number.toString().split('.')[1] || '0';
+
+    if (_value.length < keepNumber) return ''.padStart(keepNumber, '0');
+
+    if (_value.length > keepNumber) return _value.slice(0, 2);
+
+    return _value;
+  });
+
+  const getDesign = computed(() => {
+    const { option, persetOption } = props.config;
+    const { componentInfo, attribute, attributeRename } = option;
+    const { fontColor: presetFontColor, unit: presetUnit } = persetOption || {};
+    const { unit, fontColor } = componentInfo || {};
+    return {
+      unit: unit ?? presetUnit,
+      fontColor: fontColor ?? presetFontColor,
+      attribute: attributeRename || attribute,
+    };
+  });
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    const [timespan, value] = latest;
+    time.value = timespan;
+    currentValue.value = isNaN(value as unknown as number) ? 0 : Number(value);
+  };
+
+  useDataFetch(props, updateFn);
+
+  const { getScale } = useComponentScale(props);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center">
+    <div class="flex flex-col w-full h-full">
+      <div class="flex-1 flex justify-center items-center">
+        <div class="flex px-4 items-center transform scale-75" :style="getScale">
+          <Space
+            justify="end"
+            class="justify-end"
+            :size="4"
+            :style="{
+              backgroundColor: '#585357',
+              padding: '10px',
+            }"
+          >
+            <div
+              v-for="number in integerPart"
+              :key="number"
+              class="digital-wrapper__int"
+              :style="{
+                color: getDesign.fontColor,
+              }"
+            >
+              <div class="digital-text__int p-1 text-light-50"> {{ number }}</div>
+            </div>
+          </Space>
+          <div
+            class="m-0.5 rounded-1/2"
+            style="background-color: #333; width: 6px; height: 6px; align-self: flex-end"
+          >
+          </div>
+          <Space
+            justify="end"
+            class="justify-end"
+            :size="4"
+            :style="{
+              backgroundColor: '#b74940',
+              padding: '10px',
+            }"
+          >
+            <div
+              v-for="number in decimalPart"
+              :key="number"
+              class="digital-wrapper__float"
+              :style="{
+                color: getDesign.fontColor,
+              }"
+            >
+              <div class="digital-text__float p-1 text-light-50">
+                {{ number }}
+              </div>
+            </div>
+          </Space>
+          <div class="px-1 font-bold">
+            {{ getDesign.unit || 'kw/h' }}
+          </div>
+        </div>
+      </div>
+
+      <div class="text-center truncate text-xs text-gray-500">
+        <span>{{ getDesign.attribute || '电表' }}</span>
+      </div>
+
+      <UpdateTime :time="time" />
+    </div>
+  </main>
+</template>
+
+<style scoped lang="less">
+  .digital-wrapper__int {
+    border-radius: 1px;
+    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;
+    color: rgba(255, 255, 255, 1);
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  .digital-wrapper__float {
+    border-radius: 1px;
+    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;
+    color: rgba(255, 255, 255, 1);
+    white-space: nowrap;
+    text-align: center;
+  }
+</style>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { InstrumentComponent1Config } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '../../../index.type';
+import { PublicConfigClass, componentInitConfig } from '../../../publicConfig';
+import { ComponentConfigFieldEnum } from '../../../enum';
+
+export const option: PublicPresetOptions = {
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.UNIT]: '℃',
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = InstrumentComponent1Config.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(InstrumentComponent1Config);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

+<script lang="ts" setup>
+  import { ComponentConfigFieldEnum } from '../../../enum';
+  import { option } from './config';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: [
+      {
+        field: ComponentConfigFieldEnum.FONT_COLOR,
+        label: '数值字体颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.fontColor,
+      },
+      {
+        field: ComponentConfigFieldEnum.UNIT,
+        label: '数值单位',
+        component: 'Input',
+        defaultValue: option.unit,
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+    ],
+    showActionButtonGroup: false,
+    labelWidth: 120,
+    baseColProps: {
+      span: 12,
+    },
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (data: Recordable) => {
+    return setFieldsValue(data);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+<script lang="ts" setup>
+  import { commonDataSourceSchemas } from '../../../config/common.config';
+  import { CreateComponentType } from '../../../index.type';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (record: Recordable) => {
+    return setFieldsValue(record);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    validate,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+import { useComponentKeys } from '../../../hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '../../../index.type';
+
+const componentKeys = useComponentKeys('InstrumentComponent1');
+
+export const InstrumentComponent1Config: ConfigType = {
+  ...componentKeys,
+  title: '仪表盘',
+  package: PackagesCategoryEnum.INSTRUMENT,
+};

+<script lang="ts" setup>
+  import { EChartsOption, ECharts, init } from 'echarts';
+  import { onMounted } from 'vue';
+  import { unref } from 'vue';
+  import { ref } from 'vue';
+  import { useDataFetch } from '../../../hook/useSocket';
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type';
+  import { option } from './config';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useIntervalFn } from '@vueuse/core';
+  import { computed } from 'vue';
+  import { useComponentScale } from '../../../hook/useComponentScale';
+  import { nextTick } from 'vue';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const chartRefEl = ref<Nullable<HTMLDivElement>>(null);
+
+  const chartInstance = ref<Nullable<ECharts>>(null);
+
+  const time = ref<Nullable<number>>(null);
+
+  const getDesign = computed(() => {
+    const { option, persetOption } = props.config;
+    const { componentInfo, attribute, attributeRename } = option;
+    const { fontColor: presetFontColor, unit: presetUnit } = persetOption || {};
+    const { unit, fontColor } = componentInfo || {};
+    return {
+      unit: unit ?? presetUnit,
+      fontColor: fontColor ?? presetFontColor,
+      attribute: attributeRename || attribute,
+    };
+  });
+
+  const options = (): EChartsOption => {
+    const { unit, fontColor } = unref(getDesign);
+    return {
+      series: [
+        {
+          type: 'gauge',
+          radius: '50%',
+          center: ['50%', '60%'],
+          startAngle: 200,
+          endAngle: -20,
+          min: 0,
+          max: 100,
+          splitNumber: 10,
+          itemStyle: {
+            color: fontColor,
+          },
+          progress: {
+            show: true,
+            width: 30,
+          },
+          pointer: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              width: 30,
+            },
+          },
+          axisTick: {
+            distance: -35,
+            splitNumber: 5,
+            lineStyle: {
+              width: 2,
+              color: '#999',
+            },
+          },
+          splitLine: {
+            distance: -40,
+            length: 10,
+            lineStyle: {
+              width: 3,
+              color: '#999',
+            },
+          },
+          axisLabel: {
+            distance: 0,
+            color: '#999',
+          },
+          anchor: {
+            show: false,
+          },
+          title: {
+            show: false,
+          },
+          detail: {
+            valueAnimation: true,
+            width: '60%',
+            lineHeight: 10,
+            borderRadius: 8,
+            offsetCenter: [0, '30%'],
+            fontSize: 14,
+            fontWeight: 'bolder',
+            formatter: `{value} ${unit ?? ''}`,
+            color: fontColor || 'inherit',
+          },
+          data: [
+            {
+              value: 20,
+            },
+          ],
+        },
+        {
+          type: 'gauge',
+          radius: '50%',
+          center: ['50%', '60%'],
+          startAngle: 200,
+          endAngle: -20,
+          min: 0,
+          max: 100,
+          itemStyle: {
+            color: fontColor,
+          },
+          progress: {
+            show: true,
+            width: 8,
+          },
+          pointer: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+          detail: {
+            show: false,
+          },
+          data: [
+            {
+              value: 20,
+            },
+          ],
+        },
+      ],
+    };
+  };
+
+  const updateChart = (value: number) => {
+    unref(chartInstance)?.setOption({
+      series: [{ data: [{ value: value.toFixed(2) }] }, { data: [{ value: value.toFixed(2) }] }],
+    } as EChartsOption);
+  };
+
+  const initial = () => {
+    chartInstance.value = init(unref(chartRefEl)!);
+    chartInstance.value.setOption(options());
+  };
+
+  const randomFn = () => {
+    useIntervalFn(() => {
+      const value = (Math.random() * 100).toFixed(0);
+      unref(chartInstance)?.setOption({
+        series: [{ data: [{ value }] }, { data: [{ value }] }],
+      } as EChartsOption);
+    }, 3000);
+  };
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    const [timespan, value] = latest;
+    time.value = timespan;
+    updateChart(isNaN(value as unknown as number) ? 0 : Number(value));
+  };
+
+  useDataFetch(props, updateFn);
+
+  onMounted(() => {
+    initial();
+    !props.config.option.uuid && randomFn();
+  });
+
+  const resize = async () => {
+    await nextTick();
+    unref(chartInstance)?.resize();
+  };
+
+  useComponentScale(props, resize);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center">
+    <DeviceName :config="config" />
+    <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
+    <div class="text-gray-500 text-xs text-center truncate">{{
+      getDesign.attribute || '温度'
+    }}</div>
+    <UpdateTime :time="time" />
+  </main>
+</template>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { InstrumentComponent2Config } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '/@/views/visual/packages/index.type';
+import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
+import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+
+export enum Gradient {
+  FIRST = 'first',
+  SECOND = 'second',
+  THIRD = 'third',
+}
+export enum GradientColor {
+  FIRST = '#67e0e3',
+  SECOND = '#37a2da',
+  THIRD = '#fd666d',
+}
+
+export const option: PublicPresetOptions = {
+  [ComponentConfigFieldEnum.FONT_COLOR]: GradientColor.THIRD,
+  [ComponentConfigFieldEnum.GRADIENT_INFO]: [
+    { key: Gradient.FIRST, value: 30, color: GradientColor.FIRST },
+    { key: Gradient.SECOND, value: 70, color: GradientColor.SECOND },
+    { key: Gradient.THIRD, value: 100, color: GradientColor.THIRD },
+  ],
+  [ComponentConfigFieldEnum.UNIT]: 'km/h',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = InstrumentComponent2Config.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(InstrumentComponent2Config);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

+<script lang="ts" setup>
+  import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import { Gradient, GradientColor, option } from './config';
+  import { ComponentInfo } from '/@/views/visual/palette/types';
+
+  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: [
+      {
+        field: ComponentConfigFieldEnum.FONT_COLOR,
+        label: '数值字体颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.fontColor,
+      },
+      {
+        field: ComponentConfigFieldEnum.UNIT,
+        label: '数值单位',
+        component: 'Input',
+        defaultValue: option.unit,
+        componentProps: {
+          placeholder: '请输入数值单位',
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.FIRST_PHASE_COLOR,
+        label: '一阶段颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: GradientColor.FIRST,
+      },
+      {
+        field: ComponentConfigFieldEnum.FIRST_PHASE_VALUE,
+        label: '一阶段阀值',
+        component: 'InputNumber',
+        componentProps: {
+          placeholder: '请输入一阶段阀值',
+          min: 0,
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.SECOND_PHASE_COLOR,
+        label: '二阶段颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: GradientColor.SECOND,
+      },
+      {
+        field: ComponentConfigFieldEnum.SECOND_PHASE_VALUE,
+        label: '二阶段阀值',
+        component: 'InputNumber',
+        componentProps: ({ formModel }) => {
+          return {
+            placeholder: '请输入二阶段阀值',
+            min: formModel[ComponentConfigFieldEnum.FIRST_PHASE_VALUE],
+          };
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.THIRD_PHASE_COLOR,
+        label: '三阶段颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: GradientColor.THIRD,
+      },
+      {
+        field: ComponentConfigFieldEnum.THIRD_PHASE_VALUE,
+        label: '三阶段阀值',
+        component: 'InputNumber',
+        componentProps: ({ formModel }) => {
+          return {
+            placeholder: '请输入三阶段阀值',
+            min: formModel[ComponentConfigFieldEnum.SECOND_PHASE_VALUE],
+          };
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+        defaultValue: option.showDeviceName,
+      },
+    ],
+    showActionButtonGroup: false,
+    labelWidth: 120,
+    baseColProps: {
+      span: 12,
+    },
+  });
+
+  const getFormValues = () => {
+    const value = getFieldsValue();
+    return {
+      gradientInfo: [
+        {
+          key: Gradient.FIRST,
+          value: value[ComponentConfigFieldEnum.FIRST_PHASE_VALUE],
+          color: value[ComponentConfigFieldEnum.FIRST_PHASE_COLOR],
+        },
+        {
+          key: Gradient.SECOND,
+          value: value[ComponentConfigFieldEnum.SECOND_PHASE_VALUE],
+          color: value[ComponentConfigFieldEnum.SECOND_PHASE_COLOR],
+        },
+        {
+          key: Gradient.THIRD,
+          value: value[ComponentConfigFieldEnum.THIRD_PHASE_VALUE],
+          color: value[ComponentConfigFieldEnum.THIRD_PHASE_COLOR],
+        },
+      ],
+      fontColor: value[ComponentConfigFieldEnum.FONT_COLOR],
+      unit: value[ComponentConfigFieldEnum.UNIT],
+      showDeviceName: value[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
+    } as ComponentInfo;
+  };
+
+  const setFormValues = (data: ComponentInfo) => {
+    const { gradientInfo, unit, fontColor, showDeviceName } = data;
+    const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
+    const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
+    const thirdRecord = gradientInfo.find((item) => item.key === Gradient.THIRD);
+    const value = {
+      [ComponentConfigFieldEnum.UNIT]: unit,
+      [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
+      [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
+      [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value,
+      [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
+      [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value,
+      [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
+      [ComponentConfigFieldEnum.THIRD_PHASE_VALUE]: thirdRecord?.value,
+      [ComponentConfigFieldEnum.THIRD_PHASE_COLOR]: thirdRecord?.color,
+    };
+    return setFieldsValue(value);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+<script lang="ts" setup>
+  import { CreateComponentType } from '/@/views/visual/packages/index.type';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import { commonDataSourceSchemas } from '../../../config/common.config';
+
+  defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (record: Recordable) => {
+    return setFieldsValue(record);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    validate,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('InstrumentComponent2');
+
+export const InstrumentComponent2Config: ConfigType = {
+  ...componentKeys,
+  title: '阶段仪表盘',
+  package: PackagesCategoryEnum.INSTRUMENT,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { Gradient, GradientColor, option } from './config';
+  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { ECharts, EChartsOption, init } from 'echarts';
+  import { ref, unref, onMounted, computed } from 'vue';
+  import { isArray } from '/@/utils/is';
+  import { ComponentInfoGradientInfoType } from '/@/views/visual/palette/types';
+  import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useIntervalFn } from '@vueuse/core';
+  import { nextTick } from 'vue';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const time = ref<Nullable<number>>(null);
+
+  useComponentScale(props, async () => {
+    await nextTick();
+    unref(chartInstance)?.resize();
+  });
+
+  const chartRefEl = ref<Nullable<HTMLDivElement>>(null);
+
+  const chartInstance = ref<Nullable<ECharts>>(null);
+
+  const getDesign = computed(() => {
+    const { option, persetOption } = props.config;
+    const { componentInfo, attributeRename, attribute } = option;
+
+    const {
+      fontColor: presetFontColor,
+      unit: presetUnit,
+      gradientInfo: presetGradientInfo,
+    } = persetOption || {};
+
+    const { unit, fontColor, gradientInfo } = componentInfo || {};
+    return {
+      unit: unit ?? presetUnit,
+      fontColor: fontColor ?? presetFontColor,
+      gradientInfo: gradientInfo ?? presetGradientInfo,
+      attribute: attributeRename || attribute,
+    };
+  });
+
+  const getGradient = (key: Gradient, record: ComponentInfoGradientInfoType[] = []) => {
+    if (!isArray(record)) return;
+    return record.find((item) => item.key === key);
+  };
+
+  const options = (): EChartsOption => {
+    const { gradientInfo, unit, fontColor } = unref(getDesign);
+    const firstRecord = getGradient(Gradient.FIRST, gradientInfo);
+    const secondRecord = getGradient(Gradient.SECOND, gradientInfo);
+    const thirdRecord = getGradient(Gradient.THIRD, gradientInfo);
+
+    let max = thirdRecord?.value || secondRecord?.value || firstRecord?.value || 100;
+
+    max = Number(
+      1 +
+        Array(String(max).length - 1)
+          .fill(0)
+          .join('')
+    );
+
+    const firstGradient = firstRecord?.value ? firstRecord.value / max : 0.3;
+    const secondGradient = secondRecord?.value ? secondRecord.value / max : 0.7;
+
+    return {
+      series: [
+        {
+          type: 'gauge',
+          min: 0,
+          max,
+          axisLine: {
+            lineStyle: {
+              width: 20,
+              color: [
+                [firstGradient, firstRecord?.color || GradientColor.FIRST],
+                [secondGradient, secondRecord?.color || GradientColor.SECOND],
+                [1, thirdRecord?.color || GradientColor.THIRD],
+              ],
+            },
+          },
+          pointer: {
+            itemStyle: {
+              color: 'inherit',
+            },
+          },
+          axisTick: {
+            distance: -30,
+            length: 8,
+            splitNumber: max / 100,
+            lineStyle: {
+              color: '#fff',
+              width: 2,
+            },
+          },
+          splitLine: {
+            distance: -10,
+            length: 30,
+            lineStyle: {
+              color: '#fff',
+              width: 4,
+            },
+          },
+          axisLabel: {
+            color: 'inherit',
+            distance: 5,
+            fontSize: 6,
+          },
+          detail: {
+            valueAnimation: true,
+            formatter: `{value} ${unit ?? ''}`,
+            color: fontColor || 'inherit',
+            offsetCenter: [0, '70%'],
+            fontSize: 14,
+          },
+          data: [
+            {
+              value: 20,
+            },
+          ],
+        },
+      ],
+    };
+  };
+
+  const updateChartFn = (value: number) => {
+    unref(chartInstance)?.setOption({
+      series: [{ data: [{ value: value.toFixed(2) }] }],
+    } as EChartsOption);
+  };
+
+  const initial = () => {
+    chartInstance.value = init(unref(chartRefEl)!);
+    chartInstance.value.setOption(options());
+  };
+
+  const randomFn = () => {
+    useIntervalFn(() => {
+      const value = (Math.random() * 100).toFixed(0);
+      unref(chartInstance)?.setOption({
+        series: [{ data: [{ value }] }],
+      } as EChartsOption);
+    }, 3000);
+  };
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    const [timespan, value] = latest;
+    time.value = timespan;
+    updateChartFn(isNaN(value as unknown as number) ? 0 : Number(value));
+  };
+
+  useDataFetch(props, updateFn);
+
+  onMounted(() => {
+    initial();
+    !props.config.option.uuid && randomFn();
+  });
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center">
+    <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
+    <div class="text-center text-gray-500 text-xs truncate">
+      {{ getDesign.attribute || '速度' }}
+    </div>
+    <UpdateTime :time="time" />
+  </main>
+</template>

+import { DigitalDashboardComponentConfig } from './DigitalDashboardComponent';
+import { InstrumentComponent1Config } from './InstrumentComponent1';
+import { InstrumentComponent2Config } from './InstrumentComponent2';
+
+export const InstrumentList = [
+  InstrumentComponent1Config,
+  InstrumentComponent2Config,
+  DigitalDashboardComponentConfig,
+];

+<script lang="ts" setup>
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { formSchema, getHistorySearchParams, SchemaFiled } from './history.config';
+  import { HistoryModalOkEmitParams } from './type';
+  import { ref } from 'vue';
+  import { getAllDeviceByOrg } from '/@/api/dataBoard';
+  import { getDeviceHistoryInfo } from '/@/api/alarm/position';
+  import { DataSource } from '/@/views/visual/palette/types';
+  import { cloneDeep } from 'lodash-es';
+
+  const emit = defineEmits(['register', 'ok']);
+
+  const [registerForm, { updateSchema, setFieldsValue, validate, getFieldsValue }] = useForm({
+    schemas: formSchema(),
+    showActionButtonGroup: false,
+    fieldMapToTime: [
+      [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:mm:ss'],
+    ],
+  });
+
+  const [registerModal, { closeModal }] = useModalInner(async (dataSource: DataSource[]) => {
+    try {
+      dataSource = cloneDeep(dataSource);
+      if (dataSource.length < 2) return;
+      dataSource = dataSource.splice(0, 2);
+      const deviceRecord = dataSource?.at(0) || ({} as DataSource);
+      if (!deviceRecord.organizationId) return;
+      const deviceList = await getAllDeviceByOrg(
+        deviceRecord.organizationId,
+        deviceRecord.deviceProfileId
+      );
+      const options = deviceList
+        .filter((item) => item.tbDeviceId === deviceRecord.deviceId)
+        .map((item) => ({ ...item, label: item.name, value: item.tbDeviceId }));
+
+      const attKey = dataSource.map((item) => ({
+        ...item,
+        label: item.attribute,
+        value: item.attribute,
+      }));
+      updateSchema([
+        {
+          field: SchemaFiled.DEVICE_ID,
+          componentProps: {
+            options,
+          },
+        },
+        {
+          field: SchemaFiled.KEYS,
+          component: 'Select',
+          defaultValue: attKey.map((item) => item.value),
+          componentProps: {
+            options: attKey,
+            mode: 'multiple',
+            disabled: true,
+          },
+        },
+      ]);
+
+      setFieldsValue({
+        [SchemaFiled.DEVICE_ID]: deviceRecord.deviceId,
+        [SchemaFiled.KEYS]: attKey.map((item) => item.value),
+      });
+    } catch (error) {
+      throw error;
+    }
+  });
+
+  const validEffective = (value = '') => {
+    return !!(value && !isNaN(value as unknown as number));
+  };
+  const loading = ref(false);
+  const handleOk = async () => {
+    try {
+      await validate();
+      let value = getFieldsValue();
+
+      value = getHistorySearchParams(value);
+
+      loading.value = true;
+
+      const res = await getDeviceHistoryInfo({
+        ...value,
+        [SchemaFiled.KEYS]: value[SchemaFiled.KEYS].join(','),
+      });
+
+      let timespanList = Object.keys(res).reduce((prev, next) => {
+        const ts = res[next].map((item) => item.ts);
+        return [...prev, ...ts];
+      }, [] as number[]);
+      timespanList = [...new Set(timespanList)];
+
+      const track: Record<'lng' | 'lat', number>[] = [];
+      const keys = Object.keys(res);
+
+      for (const ts of timespanList) {
+        const list: { ts: number; value: number }[] = [];
+        for (const key of keys) {
+          const record = res[key].find((item) => ts === item.ts);
+          if (!validEffective(record?.value)) {
+            continue;
+          }
+          list.push(record as any);
+        }
+
+        if (list.length === 2 && list.every(Boolean)) {
+          const lng = list.at(0)?.value;
+          const lat = list.at(1)?.value;
+          if (lng && lat) track.push({ lng, lat });
+        }
+      }
+
+      emit('ok', { track, value } as HistoryModalOkEmitParams);
+      closeModal();
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+</script>
+
+<template>
+  <BasicModal
+    title="历史轨迹"
+    @register="registerModal"
+    @ok="handleOk"
+    :ok-button-props="{ loading }"
+  >
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { MapComponentTrackHistoryConfig } from '.';
+import {
+  ConfigType,
+  CreateComponentType,
+  PublicComponentOptions,
+  PublicPresetOptions,
+} from '/@/views/visual/packages/index.type';
+import { PublicConfigClass, componentInitConfig } from '/@/views/visual/packages/publicConfig';
+
+export const option: PublicPresetOptions = {
+  componetDesign: false,
+  multipleDataSourceComponent: true,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = MapComponentTrackHistoryConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(MapComponentTrackHistoryConfig);
+
+  public persetOption = cloneDeep(option);
+
+  public option: PublicComponentOptions;
+
+  constructor(option: PublicComponentOptions) {
+    super();
+    this.option = { ...option };
+  }
+}

+<script lang="ts" setup>
+  import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    schemas: [
+      {
+        field: ComponentConfigFieldEnum.FONT_COLOR,
+        label: '数值字体颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        componentProps: {
+          defaultValue: '#FD7347',
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
+        label: '显示设备名称',
+        component: 'Checkbox',
+      },
+    ],
+    showActionButtonGroup: false,
+    labelWidth: 120,
+    baseColProps: {
+      span: 12,
+    },
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (data: Recordable) => {
+    return setFieldsValue(data);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+<script lang="ts" setup>
+  import { CreateComponentType } from '/@/views/visual/packages/index.type';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import {
+    PublicComponentValueType,
+    PublicFormInstaceType,
+  } from '/@/views/visual/dataSourceBindPanel/index.type';
+  import { commonDataSourceSchemas } from '../../../config/common.config';
+
+  defineProps<{
+    values: PublicComponentValueType;
+    componentConfig: CreateComponentType;
+  }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  const getFormValues = () => {
+    return getFieldsValue();
+  };
+
+  const setFormValues = (record: Recordable) => {
+    return setFieldsValue(record);
+  };
+
+  defineExpose({
+    getFormValues,
+    setFormValues,
+    validate,
+    resetFormValues: resetFields,
+  } as PublicFormInstaceType);
+</script>
+
+<template>
+  <BasicForm @register="register" />
+</template>

+import moment from 'moment';
+import { Moment } from 'moment';
+import { FormSchema } from '/@/components/Form';
+import { ColEx } from '/@/components/Form/src/types';
+import { useGridLayout } from '/@/hooks/component/useGridLayout';
+import {
+  getPacketIntervalByRange,
+  getPacketIntervalByValue,
+  intervalOption,
+} from '/@/views/device/localtion/cpns/TimePeriodForm/helper';
+export enum QueryWay {
+  LATEST = 'latest',
+  TIME_PERIOD = 'timePeriod',
+}
+
+export enum SchemaFiled {
+  DEVICE_ID = 'deviceId',
+  WAY = 'way',
+  TIME_PERIOD = 'timePeriod',
+  KEYS = 'keys',
+  DATE_RANGE = 'dataRange',
+  START_TS = 'startTs',
+  END_TS = 'endTs',
+  INTERVAL = 'interval',
+  LIMIT = 'limit',
+  AGG = 'agg',
+  ORDER_BY = 'orderBy',
+}
+
+export enum AggregateDataEnum {
+  MIN = 'MIN',
+  MAX = 'MAX',
+  AVG = 'AVG',
+  SUM = 'SUM',
+  COUNT = 'COUNT',
+  NONE = 'NONE',
+}
+export const formSchema = (): FormSchema[] => {
+  return [
+    {
+      field: SchemaFiled.DEVICE_ID,
+      label: '设备名称',
+      component: 'Select',
+      rules: [{ required: true, message: '设备名称为必选项', type: 'string' }],
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          placeholder: '请选择设备',
+          onChange() {
+            setFieldsValue({ [SchemaFiled.KEYS]: null });
+          },
+        };
+      },
+    },
+    {
+      field: SchemaFiled.WAY,
+      label: '查询方式',
+      component: 'RadioGroup',
+      defaultValue: QueryWay.LATEST,
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          options: [
+            { label: '最后', value: QueryWay.LATEST },
+            { label: '时间段', value: QueryWay.TIME_PERIOD },
+          ],
+          onChange(event: ChangeEvent) {
+            (event.target as HTMLInputElement).value === QueryWay.LATEST
+              ? setFieldsValue({
+                  [SchemaFiled.DATE_RANGE]: [],
+                  [SchemaFiled.START_TS]: null,
+                  [SchemaFiled.END_TS]: null,
+                })
+              : setFieldsValue({ [SchemaFiled.START_TS]: null });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    {
+      field: SchemaFiled.START_TS,
+      label: '最后数据',
+      component: 'Select',
+      ifShow({ values }) {
+        return values[SchemaFiled.WAY] === QueryWay.LATEST;
+      },
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          options: intervalOption,
+          onChange() {
+            setFieldsValue({ [SchemaFiled.INTERVAL]: null });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
+      rules: [{ required: true, message: '最后数据为必选项', type: 'number' }],
+    },
+    {
+      field: SchemaFiled.DATE_RANGE,
+      label: '时间段',
+      component: 'RangePicker',
+      ifShow({ values }) {
+        return values[SchemaFiled.WAY] === QueryWay.TIME_PERIOD;
+      },
+      rules: [{ required: true, message: '时间段为必选项' }],
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        let dates: Moment[] = [];
+        return {
+          showTime: {
+            defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
+          },
+          onCalendarChange(value: Moment[]) {
+            dates = value;
+          },
+          disabledDate(current: Moment) {
+            if (!dates || dates.length === 0 || !current) {
+              return false;
+            }
+            const diffDate = current.diff(dates[0], 'years', true);
+            return Math.abs(diffDate) > 1;
+          },
+          onChange() {
+            dates = [];
+            setFieldsValue({ [SchemaFiled.INTERVAL]: null });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
+      colProps: useGridLayout(2, 2, 2, 2, 2, 2) as unknown as ColEx,
+    },
+    {
+      field: SchemaFiled.AGG,
+      label: '数据聚合功能',
+      component: 'Select',
+      componentProps: {
+        getPopupContainer: () => document.body,
+        options: [
+          { label: '最小值', value: AggregateDataEnum.MIN },
+          { label: '最大值', value: AggregateDataEnum.MAX },
+          { label: '平均值', value: AggregateDataEnum.AVG },
+          { label: '求和', value: AggregateDataEnum.SUM },
+          { label: '计数', value: AggregateDataEnum.COUNT },
+          { label: '空', value: AggregateDataEnum.NONE },
+        ],
+      },
+    },
+    {
+      field: SchemaFiled.INTERVAL,
+      label: '分组间隔',
+      component: 'Select',
+      dynamicRules: ({ model }) => {
+        return [
+          {
+            required: model[SchemaFiled.AGG] !== AggregateDataEnum.NONE,
+            message: '分组间隔为必填项',
+            type: 'number',
+          },
+        ];
+      },
+      ifShow({ values }) {
+        return values[SchemaFiled.AGG] !== AggregateDataEnum.NONE;
+      },
+      componentProps({ formModel, formActionType }) {
+        const options =
+          formModel[SchemaFiled.WAY] === QueryWay.LATEST
+            ? getPacketIntervalByValue(formModel[SchemaFiled.START_TS])
+            : getPacketIntervalByRange(formModel[SchemaFiled.DATE_RANGE]);
+        if (formModel[SchemaFiled.AGG] !== AggregateDataEnum.NONE) {
+          formActionType.setFieldsValue({ [SchemaFiled.LIMIT]: null });
+        }
+        return {
+          options,
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    {
+      field: SchemaFiled.LIMIT,
+      label: '最大条数',
+      component: 'InputNumber',
+      ifShow({ values }) {
+        return values[SchemaFiled.AGG] === AggregateDataEnum.NONE;
+      },
+      rules: [{ required: true, message: '最大条数为必填项' }],
+      helpMessage: ['根据查询条件，查出的数据条数不超过这个值'],
+      componentProps() {
+        return {
+          max: 50000,
+          min: 7,
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    {
+      field: SchemaFiled.KEYS,
+      label: '设备属性',
+      component: 'Select',
+      componentProps: {
+        getPopupContainer: () => document.body,
+      },
+    },
+  ];
+};
+
+export function getHistorySearchParams(value: Recordable) {
+  const { startTs, endTs, interval, agg, limit, way, keys, deviceId } = value;
+  if (way === QueryWay.LATEST) {
+    return {
+      keys,
+      entityId: deviceId,
+      startTs: moment().subtract(startTs, 'ms').valueOf(),
+      endTs: Date.now(),
+      interval,
+      agg,
+      limit,
+    };
+  } else {
+    return {
+      keys,
+      entityId: deviceId,
+      startTs: moment(startTs).valueOf(),
+      endTs: moment(endTs).valueOf(),
+      interval,
+      agg,
+      limit,
+    };
+  }
+}

+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('MapComponentTrackHistory');
+
+export const MapComponentTrackHistoryConfig: ConfigType = {
+  ...componentKeys,
+  title: '历史轨迹',
+  package: PackagesCategoryEnum.MAP,
+};