Merge branch 'merge-refactor-data-board' into 'main_dev'

Merge refactor data board

See merge request yunteng/thingskit-front!609

@@ -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 { RectFlowmeteConfig } 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.SHOW_DEVICE_NAME]: false,
+  [ComponentConfigFieldEnum.UNIT]: 'm',
+  [ComponentConfigFieldEnum.FLOWMETER_CONFIG]: {
+    [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#8badcb',
+    [ComponentConfigFieldEnum.WAVE_FIRST]: '#4579e2',
+    [ComponentConfigFieldEnum.WAVE_SECOND]: '#3461c1',
+    [ComponentConfigFieldEnum.WAVE_THIRD]: '#2d55aa',
+  },
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = RectFlowmeteConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(RectFlowmeteConfig);
+
+  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.BACKGROUND_COLOR,
+        label: '背景颜色',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.flowmeterConfig?.backgroundColor,
+      },
+      {
+        field: ComponentConfigFieldEnum.WAVE_FIRST,
+        label: '浪1',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.flowmeterConfig?.waveFirst,
+      },
+      {
+        field: ComponentConfigFieldEnum.WAVE_SECOND,
+        label: '浪2',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.flowmeterConfig?.waveSecond,
+      },
+      {
+        field: ComponentConfigFieldEnum.WAVE_THIRD,
+        label: '浪3',
+        component: 'ColorPicker',
+        changeEvent: 'update:value',
+        defaultValue: option.flowmeterConfig?.waveThird,
+      },
+      {
+        field: ComponentConfigFieldEnum.UNIT,
+        label: '单位',
+        component: 'Input',
+        defaultValue: option.unit,
+      },
+    ],
+    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 { 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>

+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('RectFlowmeter');
+
+export const RectFlowmeteConfig: ConfigType = {
+  ...componentKeys,
+  title: '流量计1',
+  package: PackagesCategoryEnum.FLOWMETER,
+};

+<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 { computed } from 'vue';
+  import { ref } from 'vue';
+  import { unref } from 'vue';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const currentValue = ref(0);
+
+  const getDesign = computed(() => {
+    const { option, persetOption } = props.config;
+    const { componentInfo } = option;
+    const { flowmeterConfig, unit } = componentInfo;
+    const { backgroundColor, waveFirst, waveSecond, waveThird } = flowmeterConfig || {};
+    const { flowmeterConfig: presetFlowmeterConfig, unit: persetUnit } = persetOption || {};
+    const {
+      backgroundColor: presetBackgroundColor,
+      waveFirst: presetWaveFirst,
+      waveSecond: presetWaveSecond,
+      waveThird: presetWaveThird,
+    } = presetFlowmeterConfig || {};
+    return {
+      backgroundColor: backgroundColor ?? presetBackgroundColor,
+      waveFirst: waveFirst ?? presetWaveFirst,
+      waveSecond: waveSecond ?? presetWaveSecond,
+      waveThird: waveThird ?? presetWaveThird,
+      unit: unit ?? persetUnit,
+    };
+  });
+
+  const getWaveHeight = computed(() => {
+    const value = unref(currentValue);
+    return value <= 0 ? 0 : -value - 15;
+  });
+
+  const getHeight = computed(() => {
+    const value = unref(currentValue);
+    return value >= 100 ? 0 : 100 - value + 10;
+  });
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    const [_, value] = latest;
+    currentValue.value = Number(value);
+  };
+
+  useDataFetch(props, updateFn);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center">
+    <svg
+      class="waves-rect"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="none"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs>
+        <path
+          id="wave"
+          d="M-160 118c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v100h-352z"
+        />
+      </defs>
+      <rect
+        class="bgColor"
+        x="0"
+        y="0"
+        width="100"
+        height="100"
+        :fill="getDesign.backgroundColor"
+      />
+      <g class="height" :transform="`translate(0 ${getWaveHeight})`">
+        <use class="wave waveFirst" xlink:href="#wave" :fill="getDesign.waveFirst" x="0" y="0" />
+        <use class="wave waveSecond" xlink:href="#wave" :fill="getDesign.waveSecond" x="0" y="2" />
+        <use class="wave waveThird" xlink:href="#wave" :fill="getDesign.waveThird" x="0" y="4" />
+      </g>
+      <rect
+        class="waveThird"
+        :transform="`translate(0 ${getHeight})`"
+        x="0"
+        y="0"
+        width="100"
+        height="100"
+        :fill="getDesign.waveThird"
+      />
+
+      <foreignObject
+        x="0"
+        y="0"
+        width="100"
+        height="100"
+        text-anchor="middle"
+        dominant-baseline="middle"
+      >
+        <div xmlns="http://www.w3.org/1999/xhtml" class="text">
+          <span>{{ currentValue }}</span>
+          <span class="ml-1">{{ getDesign.unit }}</span>
+        </div>
+      </foreignObject>
+    </svg>
+  </main>
+</template>
+
+<style lang="less" scoped>
+  .waves-rect {
+    width: 90%;
+    height: 90%;
+  }
+
+  @keyframes move {
+    from {
+      transform: translate(-90px, 0%);
+    }
+
+    to {
+      transform: translate(85px, 0%);
+    }
+  }
+
+  .wave {
+    animation: move 3s linear infinite;
+    animation-play-state: running;
+  }
+
+  .wave:nth-child(1) {
+    animation-delay: -2s;
+    animation-duration: 9s;
+  }
+
+  .wave:nth-child(2) {
+    animation-delay: -4s;
+    animation-duration: 6s;
+  }
+
+  .wave:nth-child(3) {
+    animation-delay: -6s;
+    animation-duration: 3s;
+  }
+
+  .waves-rect > g + rect {
+    // transform: translateY(
+    //   calc(calc(100 - var(--value)) * var(--full-flag) * 1% + var(--full-flag) * 15%)
+    // );
+    transition: transform linear 1s;
+  }
+
+  .height {
+    // transform: translateY(calc(var(--value) * -1% - 10% + var(--over-min-flag) * 10%));
+    transition: transform linear 1s;
+  }
+
+  .waves-rect .text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    font-weight: 700;
+  }
+</style>

+import { RectFlowmeteConfig } from './RectFlowmeter';
+
+export const FlowmeterList = [RectFlowmeteConfig];

+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,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import HistoryDataModel from './HistoryDataModal.vue';
+  import { useModal } from '/@/components/Modal';
+  import { Button, Tooltip, Spin } from 'ant-design-vue';
+  import {
+    PlayCircleOutlined,
+    PauseCircleOutlined,
+    ClockCircleOutlined,
+  } from '@ant-design/icons-vue';
+  import { computed, ref, toRaw, unref } from 'vue';
+  import { buildUUID } from '/@/utils/uuid';
+  import { useBaiduMapSDK } from '../../../hook/useBaiduMapSDK';
+  import { HistoryModalOkEmitParams, TrackAnimationStatus } from './type';
+  import { useMapTrackPlayback } from './useMapTrackPlayback';
+  import { shallowRef } from 'vue';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const wrapRef = ref();
+
+  const wrapId = `bai-map-${buildUUID()}`;
+
+  const mapInstance = shallowRef<Nullable<Recordable>>(null);
+
+  const rangString = ref<Nullable<string>>(null);
+
+  const [register, { openModal }] = useModal();
+
+  const handleTrackSwitch = () => {
+    openModal(true, toRaw(props.config.option.dataSource));
+  };
+
+  const getIsWidgetLibSelectMode = computed(() => {
+    return !props.config.option.dataSource;
+  });
+
+  const handleRenderHistroyData = (data: HistoryModalOkEmitParams) => {
+    const { track, value } = data;
+    const { startTs, endTs } = value;
+    const formatType = 'YYYY-MM-DD HH:mm:ss';
+    rangString.value = `从${formatToDateTime(startTs, formatType)} 到 ${formatToDateTime(
+      endTs,
+      formatType
+    )}`;
+    genTrackPlaybackAnimation(track as any[]);
+  };
+
+  const handlePlay = () => {
+    if (unref(playStatus) === TrackAnimationStatus.PAUSE) {
+      unref(continueFn)?.();
+      return;
+    }
+    if (unref(playStatus) === TrackAnimationStatus.DONE) {
+      unref(playFn)?.();
+      return;
+    }
+    if (unref(playStatus) === TrackAnimationStatus.PLAY) {
+      unref(pauseFn)?.();
+      return;
+    }
+  };
+
+  async function initMap() {
+    const wrapEl = unref(wrapRef);
+    if (!wrapEl) return;
+    const BMapGL = (window as any).BMapGL;
+    if (!Reflect.has(window, 'BMapGL')) return;
+    mapInstance.value = new BMapGL.Map(wrapId);
+
+    // 定位当前城市
+    const localcity = new BMapGL.LocalCity();
+    localcity.get(
+      (e: { center: Record<'lat' | 'lng', number>; code: number; level: number; name: string }) => {
+        const { center } = e;
+        const { lat, lng } = center;
+        const point = new BMapGL.Point(lng, lat);
+        unref(mapInstance)!.centerAndZoom(point, 15);
+      }
+    );
+
+    unref(mapInstance)!.enableScrollWheelZoom(true);
+
+    unref(getIsWidgetLibSelectMode) && genTrackPlaybackAnimation();
+  }
+
+  const { loading } = useBaiduMapSDK(initMap);
+
+  const { genTrackPlaybackAnimation, playStatus, playFn, continueFn, pauseFn } =
+    useMapTrackPlayback(mapInstance);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center">
+    <div class="w-full flex justify-end">
+      <Button
+        type="text"
+        class="!px-2 flex-auto !text-left truncate mr-2"
+        :disabled="getIsWidgetLibSelectMode"
+        @click="handleTrackSwitch"
+      >
+        <div class="w-full truncate text-gray-500 flex items-center">
+          <ClockCircleOutlined class="mx-1" />
+          <span>历史</span>
+          <span class="mx-1">-</span>
+          <Tooltip :title="rangString || '请选择'">
+            <span class="truncate"> {{ rangString || '请选择' }} </span>
+          </Tooltip>
+        </div>
+      </Button>
+      <Button type="text" class="!px-2 !text-gray-500" @click="handlePlay">
+        <PlayCircleOutlined v-show="playStatus !== TrackAnimationStatus.PLAY" />
+        <PauseCircleOutlined class="!ml-0" v-show="playStatus === TrackAnimationStatus.PLAY" />
+        <span>
+          {{ playStatus !== TrackAnimationStatus.PLAY ? '播放轨迹' : '暂停播放' }}
+        </span>
+      </Button>
+    </div>
+    <Spin
+      :spinning="loading"
+      wrapper-class-name="map-spin-wrapper !w-full !h-full !flex justify-center items-center pointer-events-none"
+      tip="地图加载中..."
+    >
+      <div ref="wrapRef" :id="wrapId" class="w-full h-full no-drag"> </div>
+    </Spin>
+
+    <HistoryDataModel @register="register" @ok="handleRenderHistroyData" />
+  </main>
+</template>
+
+<style lang="less" scoped>
+  .map-spin-wrapper {
+    :deep(.ant-spin-container) {
+      @apply justify-center items-center p-2 w-full h-full;
+    }
+  }
+</style>

+import { SchemaFiled } from './history.config';
+import { DataSource } from '/@/views/visual/palette/types';
+
+export interface HistoryModalParams {
+  dataSource?: DataSource[];
+}
+
+export interface HistoryModalOkEmitParams {
+  track: {
+    lng: number | string;
+    lat: number | string;
+  }[];
+  value: Record<SchemaFiled, string | number>;
+}
+
+export enum TrackAnimationStatus {
+  /**
+   * @description 播放中的状态
+   */
+  PLAY = 1,
+
+  /**
+   * @description 完成和未开始的状态
+   */
+  DONE = 2,
+
+  /**
+   * @description 暂停时的状态
+   */
+  PAUSE = 3,
+}

+import { ShallowRef, computed, ref, shallowRef, unref } from 'vue';
+import { TrackAnimationStatus } from './type';
+import { useTimeoutFn } from '@vueuse/core';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+export const useMapTrackPlayback = (mapInstance: ShallowRef<Nullable<Recordable>>) => {
+  const { createMessage } = useMessage();
+
+  const trackAni = ref<Nullable<Recordable>>(null);
+
+  const playFn = shallowRef<Nullable<Fn>>(() => {
+    trackAni.value?.start?.();
+  });
+
+  const pauseFn = shallowRef<Nullable<Fn>>(() => {
+    trackAni.value?.pause?.();
+  });
+
+  const continueFn = shallowRef<Nullable<Fn>>(() => {
+    trackAni.value?.continue?.();
+  });
+
+  const playStatus = computed<TrackAnimationStatus>(() => {
+    return unref(trackAni)?._status;
+  });
+
+  const RANDOM_PATH = [
+    {
+      lng: 116.297611,
+      lat: 40.047363,
+    },
+    {
+      lng: 116.302839,
+      lat: 40.048219,
+    },
+    {
+      lng: 116.308301,
+      lat: 40.050566,
+    },
+    {
+      lng: 116.305732,
+      lat: 40.054957,
+    },
+    {
+      lng: 116.304754,
+      lat: 40.057953,
+    },
+    {
+      lng: 116.306487,
+      lat: 40.058312,
+    },
+    {
+      lng: 116.307223,
+      lat: 40.056379,
+    },
+  ];
+
+  const getAnimationDurationTime = (length: number) => {
+    const itemDurationTime = 1000;
+    const minDurationTime = 5000;
+    const durationTime = length * itemDurationTime;
+    return Math.max(durationTime, minDurationTime);
+  };
+
+  /**
+   * @demo https://lbsyun.baidu.com/jsdemo.htm#fAnimationPause
+   * @param path
+   * @param clearOverlays
+   */
+  const genTrackPlaybackAnimation = (
+    path?: Record<'lng' | 'lat', number>[],
+    clearOverlays = true
+  ) => {
+    path = path || RANDOM_PATH;
+
+    if (!path.length) {
+      createMessage.warning('无可用数据~');
+      return;
+    }
+
+    const point: any[] = [];
+    const BMapGL = (window as any).BMapGL;
+
+    clearOverlays && unref(mapInstance)?.clearOverlays();
+
+    for (const { lng, lat } of path) {
+      point.push(new BMapGL.Point(lng, lat));
+    }
+
+    const pl = new BMapGL.Polyline(point);
+    const BMapGLLib = (window as any).BMapGLLib;
+
+    for (const item of path) {
+      marketPoint(item);
+    }
+
+    const duration = getAnimationDurationTime(path?.length || 0);
+    const delay = 300;
+    trackAni.value = new BMapGLLib.TrackAnimation(unref(mapInstance), pl, {
+      overallView: true,
+      tilt: 30,
+      duration,
+      delay,
+    });
+
+    useTimeoutFn(() => {
+      unref(playFn)?.();
+    }, 500);
+  };
+
+  function marketPoint(params: Partial<Record<'lng' | 'lat', number>>) {
+    const { lng, lat } = params;
+    if (![lng, lat].every(Boolean)) return;
+    const BMap = (window as any).BMapGL;
+    const marker = new BMap.Marker(new BMap.Point(lng, lat));
+    unref(mapInstance)?.centerAndZoom(new BMap.Point(lng, lat));
+    unref(mapInstance)?.addOverlay(marker);
+  }
+
+  return { genTrackPlaybackAnimation, playFn, pauseFn, continueFn, playStatus };
+};

+import cloneDeep from 'lodash-es/cloneDeep';
+import { MapComponentTrackRealConfig } 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 = MapComponentTrackRealConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(MapComponentTrackRealConfig);
+
+  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 { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('MapComponentTrackReal');
+
+export const MapComponentTrackRealConfig: ConfigType = {
+  ...componentKeys,
+  title: '实时轨迹',
+  package: PackagesCategoryEnum.MAP,
+};

+<script lang="ts" setup>
+  import {
+    ComponentPropsConfigType,
+    MultipleDataFetchUpdateFn,
+  } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useMultipleDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { useBaiduMapSDK } from '../../../hook/useBaiduMapSDK';
+  import { ref, unref } from 'vue';
+  import { buildUUID } from '/@/utils/uuid';
+  import { Spin } from 'ant-design-vue';
+  import { computed } from 'vue';
+  import { useMapTrackPlayBack } from './useMapTrackPlayback';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const wrapRef = ref<Nullable<Recordable>>(null);
+
+  const mapInstance = ref<Nullable<Recordable>>(null);
+
+  const wrapId = `bai-map-${buildUUID()}`;
+
+  /**
+   * @description 经度key
+   */
+  const getLngKey = computed(() => {
+    return props.config.option.dataSource?.at(0)?.attribute || '';
+  });
+
+  /**
+   * @description 纬度key
+   */
+  const getLatKey = computed(() => {
+    return props.config.option.dataSource?.at(1)?.attribute || '';
+  });
+
+  const validEffective = (value = '') => {
+    return !!(value && !isNaN(value as unknown as number));
+  };
+
+  const updateFn: MultipleDataFetchUpdateFn = (message) => {
+    const { data = {} } = message;
+
+    const lngData = data[unref(getLngKey)] || [];
+    const [lngLatest] = lngData;
+    const [, lng] = lngLatest;
+
+    const latData = data[unref(getLatKey)] || [];
+    const [latLatest] = latData;
+    const [, lat] = latLatest;
+
+    if (validEffective(lng) && validEffective(lat)) {
+      drawLine({ lng: Number(lng), lat: Number(lat) });
+    }
+  };
+
+  useMultipleDataFetch(props, updateFn);
+
+  const { drawLine } = useMapTrackPlayBack(mapInstance);
+
+  const initMap = () => {
+    const wrapEl = unref(wrapRef);
+    if (!wrapEl) return;
+    if (!Reflect.has(window, 'BMapGL')) return;
+    const BMapGL = (window as any).BMapGL;
+    mapInstance.value = new BMapGL.Map(wrapId);
+
+    // 定位当前城市
+    const localcity = new BMapGL.LocalCity();
+    localcity.get(
+      (e: { center: Record<'lat' | 'lng', number>; code: number; level: number; name: string }) => {
+        const { center } = e;
+        const { lat, lng } = center;
+        const point = new BMapGL.Point(lng, lat);
+        unref(mapInstance)!.centerAndZoom(point, 15);
+      }
+    );
+
+    unref(mapInstance)!.enableScrollWheelZoom(true);
+  };
+
+  const { loading } = useBaiduMapSDK(initMap);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col p-2 justify-center items-center">
+    <Spin
+      :spinning="loading"
+      wrapper-class-name="map-spin-wrapper !w-full !h-full !flex justify-center items-center pointer-events-none"
+      tip="地图加载中..."
+    />
+    <div v-show="!loading" ref="wrapRef" :id="wrapId" class="w-full h-full no-drag"> </div>
+  </main>
+</template>
+
+<style lang="less" scoped>
+  // .map-spin-wrapper {
+  //   :deep(.ant-spin-container) {
+  //     @apply justify-center items-center p-2 w-full h-full;
+  //   }
+  // }
+</style>

+import { Ref, unref } from 'vue';
+
+export const useMapTrackPlayBack = (mapInstance: Ref<Nullable<Recordable>>) => {
+  const positionList: Record<'lng' | 'lat', number>[] = [];
+
+  const drawLine = (position: Record<'lng' | 'lat', number>) => {
+    try {
+      if (!position.lat || !position.lng) return;
+      positionList.push(position);
+      marketPoint(position);
+      if (positionList.length === 1) return;
+
+      const point: any[] = [];
+      const BMapGL = (window as any).BMapGL;
+
+      for (const { lng, lat } of positionList.slice(-2)) {
+        point.push(new BMapGL.Point(lng, lat));
+      }
+
+      const pl = new BMapGL.Polyline(point);
+      const BMapGLLib = (window as any).BMapGLLib;
+
+      const duration = 2000;
+      const delay = 300;
+      const trackAni = new BMapGLLib.TrackAnimation(unref(mapInstance), pl, {
+        overallView: true,
+        tilt: 30,
+        duration,
+        delay,
+      });
+      trackAni?.start?.();
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  function marketPoint(params: Partial<Record<'lng' | 'lat', number>>) {
+    const { lng, lat } = params;
+    if (![lng, lat].every(Boolean)) return;
+    const BMap = (window as any).BMapGL;
+    if (!BMap) return;
+    const marker = new BMap.Marker(new BMap.Point(lng, lat));
+    unref(mapInstance)?.centerAndZoom(new BMap.Point(lng, lat));
+    unref(mapInstance)?.addOverlay(marker);
+  }
+
+  return { drawLine };
+};

+import { MapComponentTrackHistoryConfig } from './MapComponentTrackHistory';
+import { MapComponentTrackRealConfig } from './MapComponentTrackReal';
+
+export const MapList = [MapComponentTrackHistoryConfig, MapComponentTrackRealConfig];

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

+<script lang="ts" setup></script>
+
+<template><main></main></template>

+<script lang="ts" setup>
+  // import { computed } from 'vue';
+  import { commonDataSourceSchemas } from '../../../config/common.config';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  // const props = defineProps<{
+  //   values: PublicComponentDataSourceProps;
+  // }>();
+
+  const [register, { getFieldsValue, setFieldsValue, validate, resetFields }] = useForm({
+    labelWidth: 0,
+    showActionButtonGroup: false,
+    layout: 'horizontal',
+    labelCol: { span: 0 },
+    schemas: commonDataSourceSchemas(),
+  });
+
+  // const getBindValues = computed(() => {
+  //   return props.values.bindValue;
+  // });
+
+  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('Picture');
+export const Picture: ConfigType = {
+  ...componentKeys,
+  title: '图片组件',
+  package: PackagesCategoryEnum.PICTURE,
+};

+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Image as AntImage } from 'ant-design-vue';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { useDataFetch } from '../../../hook/useSocket';
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '../../../index.type';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType;
+  }>();
+
+  const fallback =
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==';
+
+  const time = ref<Nullable<number>>(null);
+
+  const url = ref<string>(fallback);
+
+  // const getImagBase64 = ref(fallback);
+
+  // const getBase64Image = (url: string) => {
+  //   let canvas: Nullable<HTMLCanvasElement> = document.createElement('canvas');
+  //   const ctx = canvas.getContext('2d');
+  //   let image: Nullable<HTMLImageElement> = new Image();
+
+  //   image.onload = function () {
+  //     canvas!.height = image!.height;
+  //     canvas!.width = image!.width;
+  //     ctx?.drawImage(image!, 0, 0);
+  //     const dataUrl = canvas!.toDataURL('image/png');
+  //     getImagBase64.value = dataUrl;
+  //     console.log(dataUrl);
+  //     image = null;
+  //     canvas = null;
+  //   };
+  //   image.setAttribute('crossOrigin', 'Anonymous');
+  //   image.src = url;
+  // };
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    const [timespan, value] = latest;
+    time.value = timespan;
+    url.value = `${value}?timespan=${timespan}`;
+  };
+
+  useDataFetch(props, updateFn);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col items-center">
+    <AntImage :src="url" :fallback="fallback" />
+    <UpdateTime :time="time" />
+  </main>
+</template>
+
+<style scoped lang="less">
+  :deep(.ant-image) {
+    @apply flex justify-center w-auto;
+
+    height: calc(100% - 56px);
+
+    img {
+      @apply w-auto h-full;
+    }
+  }
+</style>

+import { Picture } from './Picture';
+
+export enum ComponentCategoryEnum {
+  PICTURE = 'Picture',
+}
+
+export enum ComponentCategoryNameEnum {
+  PICTURE = '图片组件',
+}
+
+export const PictureList = [Picture];

+import cloneDeep from 'lodash-es/cloneDeep';
+import { TextComponent1Config } 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.SHOW_DEVICE_NAME]: false,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = TextComponent1Config.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(TextComponent1Config);
+
+  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: '#000',
+        },
+      },
+      {
+        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 { commonDataSourceSchemas } from '../../../config/common.config';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  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 { ComponentEnum, ComponentNameEnum } from '../index.type';
+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('TextComponent1');
+export const TextComponent1Config: ConfigType = {
+  ...componentKeys,
+  // title: ComponentNameEnum.TEXT_COMPONENT_1,
+  title: '文本组件1',
+  package: PackagesCategoryEnum.TEXT,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
+  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { computed } from 'vue';
+  import { ref } from 'vue';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const currentValue = ref<string | number>(123);
+
+  const getDesign = computed(() => {
+    const { persetOption = {}, option } = props.config;
+
+    const { fontColor: persetFontColor } = persetOption;
+
+    const { componentInfo, attribute, attributeRename } = option;
+
+    const { fontColor } = componentInfo || {};
+    return {
+      fontColor: fontColor || persetFontColor,
+      attribute: attributeRename || attribute,
+    };
+  });
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    const [_, value] = latest;
+    currentValue.value = value;
+  };
+
+  useDataFetch(props, updateFn);
+
+  const { getScale } = useComponentScale(props);
+</script>
+
+<template>
+  <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
+    <DeviceName :config="config" />
+
+    <h1 class="my-4 font-bold text-xl !my-2 truncate" :style="{ color: getDesign.fontColor }">
+      {{ currentValue || 0 }}
+    </h1>
+    <div class="text-gray-500 text-lg truncate">{{ getDesign.attribute || '温度' }}</div>
+    <!-- <div v-if="config.option.componentInfo.showDeviceName">
+      {{ config.option.deviceRename || config.option.deviceName }}
+    </div> -->
+  </main>
+</template>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { TextComponent2Config } 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.SHOW_DEVICE_NAME]: false,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = TextComponent2Config.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(TextComponent2Config);
+
+  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: '#000',
+        },
+      },
+      {
+        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 { commonDataSourceSchemas } from '../../../config/common.config';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  // const props = defineProps<{
+  //   values: PublicComponentDataSourceProps;
+  // }>();
+
+  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('TextComponent2');
+export const TextComponent2Config: ConfigType = {
+  ...componentKeys,
+  title: '文本组件2',
+  package: PackagesCategoryEnum.TEXT,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
+  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { computed } from 'vue';
+  import { ref } from 'vue';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const currentValue = ref<string | number>(123);
+  const time = ref<Nullable<number>>(null);
+
+  const getDesign = computed(() => {
+    const { persetOption = {}, option } = props.config;
+
+    const { fontColor: persetFontColor } = persetOption;
+
+    const { componentInfo, attribute, attributeRename } = option;
+
+    const { fontColor } = componentInfo || {};
+
+    return {
+      fontColor: fontColor || persetFontColor,
+      attribute: attributeRename || attribute,
+    };
+  });
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [info] = data[attribute] || [];
+    const [timespan, value] = info;
+    currentValue.value = value;
+    time.value = timespan;
+  };
+
+  useDataFetch(props, updateFn);
+
+  const { getScale } = useComponentScale(props);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center">
+    <DeviceName :config="config" />
+
+    <div class="flex-1 flex justify-center items-center flex-col" :style="getScale">
+      <h1 class="my-4 font-bold text-xl !my-2 truncate" :style="{ color: getDesign.fontColor }">
+        {{ currentValue || 0 }}
+      </h1>
+      <div class="text-gray-500 text-lg truncate">{{ getDesign.attribute || '温度' }}</div>
+    </div>
+    <UpdateTime :time="time" />
+  </main>
+</template>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { TextComponent3Config } 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.UNIT]: '℃',
+  [ComponentConfigFieldEnum.ICON]: 'shuiwen',
+  [ComponentConfigFieldEnum.ICON_COLOR]: '#367bff',
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = TextComponent3Config.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(TextComponent3Config);
+
+  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',
+        valueField: 'value',
+        defaultValue: option.fontColor,
+      },
+      {
+        field: ComponentConfigFieldEnum.UNIT,
+        label: '数值单位',
+        component: 'Input',
+        defaultValue: option.unit,
+        componentProps: {
+          placeholder: '请输入数值单位',
+        },
+      },
+      {
+        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 { commonDataSourceSchemas } from '../../../config/common.config';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  // const props = defineProps<{
+  //   values: PublicComponentDataSourceProps;
+  // }>();
+
+  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('TextComponent3');
+export const TextComponent3Config: ConfigType = {
+  ...componentKeys,
+  title: '文本组件3',
+  package: PackagesCategoryEnum.TEXT,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
+  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { ref } from 'vue';
+  import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
+  import { SvgIcon } from '/@/components/Icon';
+  import { computed } from 'vue';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const currentValue = ref<string | number>(123);
+
+  const time = ref<Nullable<number>>(null);
+
+  const getDesign = computed(() => {
+    const { persetOption = {}, option } = props.config;
+
+    const {
+      iconColor: persetIconColor,
+      unit: perseUnit,
+      icon: persetIcon,
+      fontColor: persetFontColor,
+    } = persetOption;
+
+    const { componentInfo, attribute, attributeRename } = option;
+
+    const { icon, iconColor, fontColor, unit } = componentInfo || {};
+    return {
+      iconColor: iconColor || persetIconColor,
+      unit: unit ?? perseUnit,
+      icon: icon || persetIcon,
+      fontColor: fontColor || persetFontColor,
+      attribute: attributeRename || attribute,
+    };
+  });
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    const [timespan, value] = latest;
+    currentValue.value = value;
+    time.value = timespan;
+  };
+
+  useDataFetch(props, updateFn);
+
+  const { getScale } = useComponentScale(props);
+</script>
+
+<template>
+  <main :style="getScale" class="w-full h-full flex flex-col justify-center items-center">
+    <DeviceName :config="config" />
+    <div class="flex-1 flex justify-center items-center flex-col">
+      <SvgIcon
+        :name="getDesign.icon!"
+        prefix="iconfont"
+        :size="60"
+        :style="{ color: getDesign.iconColor }"
+      />
+      <h1 class="font-bold text-xl m-2 truncate" :style="{ color: getDesign.fontColor }">
+        <span> {{ currentValue || 0 }}</span>
+        <span>{{ getDesign.unit }} </span>
+      </h1>
+      <div class="text-gray-500 text-lg truncate">{{ getDesign.attribute || '温度' }}</div>
+    </div>
+    <UpdateTime :time="time" />
+  </main>
+</template>

+import cloneDeep from 'lodash-es/cloneDeep';
+import { TextComponent4Config } 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.UNIT]: '℃',
+  [ComponentConfigFieldEnum.ICON]: 'shuiwen',
+  [ComponentConfigFieldEnum.ICON_COLOR]: '#367bff',
+  [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = TextComponent4Config.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(TextComponent4Config);
+
+  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',
+        valueField: 'value',
+        defaultValue: option.fontColor,
+      },
+      {
+        field: ComponentConfigFieldEnum.UNIT,
+        label: '数值单位',
+        component: 'Input',
+        defaultValue: option.unit,
+        componentProps: {
+          placeholder: '请输入数值单位',
+        },
+      },
+      {
+        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 { commonDataSourceSchemas } from '../../../config/common.config';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
+
+  // const props = defineProps<{
+  //   values: PublicComponentDataSourceProps;
+  // }>();
+
+  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('TextComponent4');
+export const TextComponent4Config: ConfigType = {
+  ...componentKeys,
+  title: '文本组件4',
+  package: PackagesCategoryEnum.TEXT,
+};

+<script lang="ts" setup>
+  import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
+  import { option } from './config';
+  import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
+  import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
+  import { computed } from 'vue';
+  import { ref } from 'vue';
+  import { SvgIcon } from '/@/components/Icon';
+  import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const currentValue = ref<string | number>(123);
+
+  const getDesign = computed(() => {
+    const { persetOption = {}, option } = props.config;
+
+    const {
+      iconColor: persetIconColor,
+      unit: perseUnit,
+      icon: persetIcon,
+      fontColor: persetFontColor,
+    } = persetOption;
+
+    const { componentInfo, attribute, attributeRename } = option;
+
+    const { icon, iconColor, fontColor, unit } = componentInfo || {};
+    return {
+      iconColor: iconColor || persetIconColor,
+      unit: unit ?? perseUnit,
+      icon: icon || persetIcon,
+      fontColor: fontColor || persetFontColor,
+      attribute: attributeRename || attribute,
+    };
+  });
+
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [info] = data[attribute] || [];
+    const [_, value] = info;
+    currentValue.value = value;
+  };
+
+  useDataFetch(props, updateFn);
+
+  const { getScale } = useComponentScale(props);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center">
+    <DeviceName :config="config" />
+    <div :style="getScale" class="flex-1 flex justify-center items-center flex-col">
+      <SvgIcon
+        :name="getDesign.icon!"
+        prefix="iconfont"
+        :size="60"
+        :style="{ color: getDesign.iconColor }"
+      />
+      <h1 class="my-4 font-bold text-lg !my-2 truncate" :style="{ color: getDesign.fontColor }">
+        <span>{{ currentValue || 0 }}</span>
+        <span>{{ getDesign.unit }}</span>
+      </h1>
+      <div class="text-gray-500 text-lg truncate">{{ getDesign.attribute || '温度' }}</div>
+    </div>
+  </main>
+</template>

+import { TextComponent1Config } from './TextComponent1';
+import { TextComponent2Config } from './TextComponent2';
+import { TextComponent3Config } from './TextComponent3';
+import { TextComponent4Config } from './TextComponent4';
+
+export const TextList = [
+  TextComponent1Config,
+  TextComponent2Config,
+  TextComponent3Config,
+  TextComponent4Config,
+];

+export enum ComponentEnum {
+  TEXT_COMPONENT_1 = 'TEXT_COMPONENT_1',
+  TEXT_COMPONENT_2 = 'TEXT_COMPONENT_2',
+  TEXT_COMPONENT_3 = 'TEXT_COMPONENT_3',
+  TEXT_COMPONENT_4 = 'TEXT_COMPONENT_4',
+  TEXT_COMPONENT_5 = 'TEXT_COMPONENT_5',
+}
+
+export enum ComponentNameEnum {
+  TEXT_COMPONENT_1 = '文本组件1',
+  TEXT_COMPONENT_2 = '文本组件2',
+  TEXT_COMPONENT_3 = '文本组件3',
+  TEXT_COMPONENT_4 = '文本组件4',
+  TEXT_COMPONENT_5 = '文本组件5',
+}

+import { unref } from 'vue';
+import { useSelectWidgetKeys, useSelectWidgetMode } from '../../dataSourceBindPanel/useContext';
+import { PackagesCategoryEnum } from '../index.type';
+import { getDeviceProfile } from '/@/api/alarm/position';
+import { getDeviceAttributes, getMeetTheConditionsDevice } from '/@/api/dataBoard';
+import { DeviceAttributeParams, MasterDeviceList } from '/@/api/dataBoard/model';
+import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
+import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
+import { getModelServices } from '/@/api/device/modelOfMatter';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { FormSchema, useComponentRegister } from '/@/components/Form';
+import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
+import { OrgTreeSelect } from '/@/views/common/OrgTreeSelect';
+import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
+import { CommandTypeEnum } from '/@/views/rule/linkedge/config/config.data';
+import { DataActionModeEnum } from '/@/enums/toolEnum';
+
+useComponentRegister('OrgTreeSelect', OrgTreeSelect);
+
+export interface CommonDataSourceBindValueType extends Record<DataSourceField, string> {
+  customCommand?: {
+    transportType?: string;
+    service?: string;
+    command?: string;
+    commandType?: string;
+  };
+}
+
+export enum DataSourceField {
+  IS_GATEWAY_DEVICE = 'gatewayDevice',
+  DEVICE_TYPE = 'deviceType',
+  TRANSPORT_TYPE = 'transportType',
+  ORIGINATION_ID = 'organizationId',
+  DEVICE_ID = 'deviceId',
+  DEVICE_PROFILE_ID = 'deviceProfileId',
+  ATTRIBUTE = 'attribute',
+  ATTRIBUTE_RENAME = 'attributeRename',
+  DEVICE_NAME = 'deviceName',
+  DEVICE_RENAME = 'deviceRename',
+  LONGITUDE_ATTRIBUTE = 'longitudeAttribute',
+  LATITUDE_ATTRIBUTE = 'latitudeAttribute',
+
+  COMMAND = 'command',
+  COMMAND_TYPE = 'commandType',
+  SERVICE = 'service',
+}
+
+const isTcpProfile = (transportType: string) => transportType === TransportTypeEnum.TCP;
+
+const isControlComponent = (category?: string) => PackagesCategoryEnum.CONTROL === category;
+
+const getDeviceService = async (deviceProfileId: string) => {
+  try {
+    const data = await getModelServices({ deviceProfileId });
+    if (data)
+      return data.map((item) => ({ ...item, label: item.functionName, value: item.identifier }));
+  } catch (error) {}
+  return [];
+};
+
+const getDeviceAttribute = async (params: DeviceAttributeParams) => {
+  try {
+    const data = await getDeviceAttributes(params);
+    if (data) return data.map((item) => ({ label: item.name, value: item.identifier }));
+  } catch (error) {}
+  return [];
+};
+
+export const commonDataSourceSchemas = (): FormSchema[] => {
+  const mode = useSelectWidgetMode();
+  const isUpdate = unref(mode) === DataActionModeEnum.UPDATE;
+  const selectWidgetKeys = useSelectWidgetKeys();
+  const category = unref(selectWidgetKeys).categoryKey;
+
+  return [
+    {
+      field: DataSourceField.IS_GATEWAY_DEVICE,
+      component: 'Switch',
+      label: '是否是网关设备',
+      show: false,
+    },
+    {
+      field: DataSourceField.DEVICE_NAME,
+      component: 'Input',
+      label: '设备名',
+      show: false,
+    },
+    {
+      field: DataSourceField.TRANSPORT_TYPE,
+      component: 'Input',
+      label: '设备配置类型',
+      show: false,
+    },
+    {
+      field: DataSourceField.DEVICE_TYPE,
+      component: 'ApiSelect',
+      label: '设备类型',
+      colProps: { span: 8 },
+      rules: [{ message: '请选择设备类型', required: true }],
+      componentProps: ({ formActionType }) => {
+        const { setFieldsValue } = formActionType;
+        return {
+          api: findDictItemByCode,
+          params: {
+            dictCode: 'device_type',
+          },
+          valueField: 'itemValue',
+          labelField: 'itemText',
+          placeholder: '请选择设备类型',
+          onChange: (value: DeviceTypeEnum) => {
+            setFieldsValue({
+              [DataSourceField.IS_GATEWAY_DEVICE]: value === DeviceTypeEnum.GATEWAY,
+              [DataSourceField.DEVICE_PROFILE_ID]: null,
+              [DataSourceField.DEVICE_ID]: null,
+              [DataSourceField.ATTRIBUTE]: null,
+              [DataSourceField.TRANSPORT_TYPE]: null,
+            });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    {
+      field: DataSourceField.DEVICE_PROFILE_ID,
+      component: 'ApiSelect',
+      label: '产品',
+      colProps: { span: 8 },
+      rules: [{ required: true, message: '产品为必填项' }],
+      componentProps: ({ formActionType, formModel }) => {
+        const { setFieldsValue } = formActionType;
+        const deviceType = formModel[DataSourceField.DEVICE_TYPE];
+        return {
+          api: async () => {
+            if (!deviceType) return [];
+            const list = await getDeviceProfile(deviceType);
+            if (isUpdate) {
+              const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
+              const record = list.find((item) => item.id === deviceProfileId);
+              setFieldsValue({ [DataSourceField.TRANSPORT_TYPE]: record?.transportType });
+            }
+            return list;
+          },
+          labelField: 'name',
+          valueField: 'id',
+          placeholder: '请选择产品',
+          onChange: (_, option = {} as Record<'transportType', string>) => {
+            setFieldsValue({
+              [DataSourceField.DEVICE_ID]: null,
+              [DataSourceField.ATTRIBUTE]: null,
+              [DataSourceField.TRANSPORT_TYPE]: option[DataSourceField.TRANSPORT_TYPE],
+            });
+          },
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    {
+      field: DataSourceField.ORIGINATION_ID,
+      component: 'OrgTreeSelect',
+      label: '组织',
+      colProps: { span: 8 },
+      rules: [{ required: true, message: '组织为必填项' }],
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          placeholder: '请选择组织',
+          onChange() {
+            setFieldsValue({
+              [DataSourceField.DEVICE_ID]: null,
+            });
+          },
+          showCreate: false,
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    {
+      field: DataSourceField.DEVICE_PROFILE_ID,
+      component: 'Input',
+      label: '',
+      show: false,
+    },
+    {
+      field: DataSourceField.DEVICE_ID,
+      component: 'ApiSelect',
+      label: '设备',
+      colProps: { span: 8 },
+      rules: [{ required: true, message: '设备名称为必填项' }],
+      componentProps({ formModel, formActionType }) {
+        const { setFieldsValue } = formActionType;
+        const organizationId = formModel[DataSourceField.ORIGINATION_ID];
+        const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
+        const deviceType = formModel[DataSourceField.DEVICE_TYPE];
+
+        return {
+          api: async () => {
+            if (organizationId) {
+              try {
+                const data = await getMeetTheConditionsDevice({
+                  organizationId,
+                  deviceProfileId,
+                  deviceType,
+                });
+                if (data)
+                  return data.map((item) => ({
+                    ...item,
+                    label: item.alias || item.name,
+                    value: item.tbDeviceId,
+                    deviceType: item.deviceType,
+                  }));
+              } catch (error) {}
+            }
+            return [];
+          },
+          onChange(_value, record: MasterDeviceList) {
+            setFieldsValue({
+              [DataSourceField.DEVICE_NAME]: record?.label,
+            });
+          },
+          placeholder: '请选择设备',
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    {
+      field: DataSourceField.ATTRIBUTE,
+      component: 'ApiSelect',
+      label: '属性',
+      colProps: { span: 8 },
+      rules: [{ required: true, message: '请选择属性' }],
+      ifShow: ({ model }) =>
+        !(isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]) && isControlComponent(category!)),
+      componentProps({ formModel }) {
+        const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
+        return {
+          api: async () => {
+            try {
+              if (deviceProfileId) {
+                return await getDeviceAttribute({
+                  deviceProfileId,
+                  dataType: isControlComponent(category!) ? DataTypeEnum.IS_BOOL : undefined,
+                });
+              }
+            } catch (error) {}
+            return [];
+          },
+          placeholder: '请选择属性',
+          getPopupContainer: () => document.body,
+        };
+      },
+    },
+    {
+      field: DataSourceField.COMMAND_TYPE,
+      component: 'ApiSelect',
+      label: '命令类型',
+      defaultValue: CommandTypeEnum.CUSTOM.toString(),
+      rules: [{ required: true, message: '请选择命令类型' }],
+      colProps: { span: 8 },
+      ifShow: ({ model }) =>
+        isControlComponent(category!) && isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]),
+      componentProps: ({ formActionType }) => {
+        const { setFieldsValue } = formActionType;
+        return {
+          api: findDictItemByCode,
+          params: {
+            dictCode: 'custom_define',
+          },
+          labelField: 'itemText',
+          valueField: 'itemValue',
+          placeholder: '请选择命令类型',
+          onChange() {
+            setFieldsValue({ [DataSourceField.COMMAND]: null, [DataSourceField.SERVICE]: null });
+          },
+        };
+      },
+    },
+    {
+      field: DataSourceField.SERVICE,
+      component: 'ApiSelect',
+      label: '服务',
+      colProps: { span: 8 },
+      rules: [{ required: true, message: '请选择服务' }],
+      ifShow: ({ model }) =>
+        isControlComponent(category!) &&
+        model[DataSourceField.COMMAND_TYPE] === CommandTypeEnum.SERVICE.toString() &&
+        isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]),
+      componentProps({ formModel, formActionType }) {
+        const { setFieldsValue } = formActionType;
+        const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
+        const transportType = formModel[DataSourceField.TRANSPORT_TYPE];
+        if (isUpdate && ![deviceProfileId, transportType].every(Boolean))
+          return { placeholder: '请选择服务', getPopupContainer: () => document.body };
+        return {
+          api: async () => {
+            try {
+              if (deviceProfileId) {
+                return await getDeviceService(deviceProfileId);
+              }
+            } catch (error) {}
+            return [];
+          },
+          placeholder: '请选择服务',
+          getPopupContainer: () => document.body,
+          onChange(value: string, options: ModelOfMatterParams) {
+            const command = value ? (options.functionJson.inputData || [])[0].serviceCommand : null;
+            setFieldsValue({ [DataSourceField.COMMAND]: command });
+          },
+        };
+      },
+    },
+    {
+      field: DataSourceField.COMMAND,
+      component: 'Input',
+      label: '命令',
+      colProps: { span: 8 },
+      rules: [{ required: true, message: '请输入下发命令' }],
+      // 是控制组件  && 自定义命令  && 传输协议为TCP
+      ifShow: ({ model }) =>
+        isControlComponent(category!) &&
+        model[DataSourceField.COMMAND_TYPE] === CommandTypeEnum.CUSTOM.toString() &&
+        model[DataSourceField.TRANSPORT_TYPE] &&
+        isTcpProfile(model[DataSourceField.TRANSPORT_TYPE]),
+      componentProps: {
+        placeholder: '请输入下发命令',
+      },
+    },
+    {
+      field: DataSourceField.DEVICE_RENAME,
+      component: 'Input',
+      label: '设备名',
+      colProps: { span: 8 },
+      componentProps: {
+        placeholder: '设备重命名',
+      },
+    },
+    {
+      field: DataSourceField.ATTRIBUTE_RENAME,
+      component: 'Input',
+      label: '属性',
+      colProps: { span: 8 },
+      componentProps: {
+        placeholder: '属性重命名',
+      },
+    },
+  ];
+};

+export enum ComponentConfigFieldEnum {
+  FONT_COLOR = 'fontColor',
+  UNIT = 'unit',
+  ICON_COLOR = 'iconColor',
+  ICON = 'icon',
+  FIRST_PHASE_COLOR = 'firstPhaseColor',
+  SECOND_PHASE_COLOR = 'secondPhaseColor',
+  THIRD_PHASE_COLOR = 'thirdPhaseColor',
+  FIRST_PHASE_VALUE = 'firstPhaseValue',
+  SECOND_PHASE_VALUE = 'secondPhaseValue',
+  THIRD_PHASE_VALUE = 'thirdPhaseValue',
+  SHOW_DEVICE_NAME = 'showDeviceName',
+  GRADIENT_INFO = 'gradientInfo',
+
+  FLOWMETER_CONFIG = 'flowmeterConfig',
+  WAVE_FIRST = 'waveFirst',
+  WAVE_SECOND = 'waveSecond',
+  WAVE_THIRD = 'waveThird',
+  BACKGROUND_COLOR = 'backgroundColor',
+}

+import { onMounted, onUnmounted, ref } from 'vue';
+import { useInjectScript } from '/@/hooks/web/useInjectScript';
+import { BAI_DU_MAP_GL_LIB, BAI_DU_MAP_TRACK_ANIMATION } from '/@/utils/fnUtils';
+
+export enum LoadStatusEnum {
+  LOADING = 'LOADING',
+  SUCCESS = 'SUCCESS',
+  ERROR = 'ERROR',
+}
+
+export const useBaiduMapSDK = (completeCallback: Fn) => {
+  const loadGLKey = 'loadBaiMapGL';
+  const loadGLLibKey = 'loadBaiMapGLLib';
+  const BaiduMapGLGlobalName = 'BMapGL';
+  const BaiduMapGLLibGlobalName = 'BMapGLLib';
+  const hasBMapGLFlag = Reflect.has(window, BaiduMapGLGlobalName);
+  const hasBMapGLLibFlag = Reflect.has(window, BaiduMapGLLibGlobalName);
+  const BMapGLRepeatLoadFlag = hasBMapGLFlag || Reflect.has(window, loadGLKey);
+  const BMapGLLibRepeatLoadFlag = hasBMapGLLibFlag || Reflect.has(window, loadGLLibKey);
+
+  if (!BMapGLRepeatLoadFlag) {
+    Reflect.set(window, loadGLKey, true);
+    const { toInject } = useInjectScript({ src: BAI_DU_MAP_GL_LIB });
+    toInject();
+  }
+
+  if (!BMapGLLibRepeatLoadFlag) {
+    Reflect.set(window, loadGLLibKey, true);
+    const { toInject } = useInjectScript({ src: BAI_DU_MAP_TRACK_ANIMATION });
+    toInject();
+  }
+
+  const waitFn = async () => {
+    return new Promise((resolve) => {
+      let interval: Nullable<NodeJS.Timer> = setInterval(() => {
+        const hasBMapGLFlag = Reflect.has(window, BaiduMapGLGlobalName);
+        const hasBMapGLLibFlag = Reflect.has(window, BaiduMapGLLibGlobalName);
+        if (hasBMapGLFlag && hasBMapGLLibFlag) {
+          resolve('success');
+          status.value = LoadStatusEnum.SUCCESS;
+          loading.value = false;
+          clearInterval(interval!);
+          interval = null;
+          clearTimeout(timeout!);
+          timeout = null;
+        }
+      }, 300);
+
+      let timeout: Nullable<NodeJS.Timeout> = setTimeout(() => {
+        status.value = LoadStatusEnum.ERROR;
+        clearTimeout(timeout!);
+        timeout = null;
+        resolve('error');
+      }, 10000);
+    });
+  };
+
+  const loading = ref(true);
+
+  const status = ref(LoadStatusEnum.LOADING);
+
+  onMounted(async () => {
+    await waitFn();
+    completeCallback?.();
+    loading.value = false;
+  });
+
+  onUnmounted(() => {
+    Reflect.deleteProperty(window, loadGLKey);
+    Reflect.deleteProperty(window, loadGLLibKey);
+  });
+
+  return {
+    loading,
+    status,
+  };
+};

+export const useComponentKeys = (scope: string) => {
+  const key = scope;
+
+  const conKey = `V${scope}`;
+
+  const configConKey = `VC${scope}`;
+
+  const datasourceConKey = `VD${scope}`;
+
+  return { key, conKey, configConKey, datasourceConKey };
+};

+import { CSSProperties, computed, unref, watch } from 'vue';
+import { ComponentPropsConfigType } from '../index.type';
+import { componentOptionsInitConfig } from '../publicConfig';
+
+export const useComponentScale = (props: { config: ComponentPropsConfigType }, onScale?: Fn) => {
+  const getRatio = computed(() => {
+    try {
+      const { option, attr } = props.config;
+      const { w, h } = attr;
+      const { widthPx, heightPx, itemWidthRatio, itemHeightRatio } = option;
+
+      const currentW = (widthPx * itemWidthRatio) / 100;
+      const currentH = (heightPx * itemHeightRatio) / 100;
+
+      const widthScaleRatio = currentW / w;
+      const heightScaleRatio = currentH / h;
+
+      return Math.min(widthScaleRatio, heightScaleRatio);
+    } catch (error) {
+      return 1;
+    }
+  });
+
+  const getScaleRadio = computed(() => {
+    try {
+      const { persetOption = {} } = props.config;
+      const {
+        maxScale = componentOptionsInitConfig.maxScale,
+        minScale = componentOptionsInitConfig.minScale,
+      } = persetOption;
+
+      let ratio = unref(getRatio);
+      ratio = ratio > maxScale! ? maxScale! : ratio < minScale! ? minScale! : ratio;
+
+      return ratio;
+    } catch (error) {
+      return 1;
+    }
+  });
+
+  const getScale = computed<CSSProperties>(() => {
+    return { transform: `scale(${unref(getScaleRadio)})` };
+  });
+
+  onScale &&
+    watch(getRatio, () => {
+      onScale?.();
+    });
+
+  return { getScale, getScaleRadio, getRatio };
+};

+import { createComponent } from '..';
+import { transformComponentKey } from '../componentMap';
+import { ConfigType, CreateComponentType } from '../index.type';
+
+export const useGetComponentConfig = (
+  key: string,
+  options: Recordable = {}
+): CreateComponentType => {
+  try {
+    const config = createComponent({ key: transformComponentKey(key) } as ConfigType, options);
+    return config;
+  } catch (error) {
+    console.error(`can not get component config by component key (${key})`);
+    return {} as CreateComponentType;
+  }
+};

@@ -12,14 +12,16 @@ export function useSendCommand() {
     createMessage.error('下发指令失败');
     createMessage.error('下发指令失败');
     return false;
     return false;
   };
   };
+
   const sendCommand = async (record: DataSource, value: any) => {
   const sendCommand = async (record: DataSource, value: any) => {
-    if (!record) return error();
-    const { customCommand, attribute } = record;
+    if (!record) return false;
+    const { customCommand, attribute } = record || {};
 
 
     const { deviceId } = record;
     const { deviceId } = record;
-    if (!deviceId) return error();
-    loading.value = true;
+    if (!deviceId) return false;
+
     try {
     try {
+      loading.value = true;
       let params: string | Recordable = {
       let params: string | Recordable = {
         [attribute!]: Number(value),
         [attribute!]: Number(value),
       };
       };
@@ -50,7 +52,7 @@ export function useSendCommand() {
     }
     }
   };
   };
   return {
   return {
-    sendCommand,
     loading,
     loading,
+    sendCommand,
   };
   };
 }
 }

+import { Ref, computed, onUnmounted, unref, watch } from 'vue';
+import { WidgetDataType } from '../../palette/hooks/useDataSource';
+import { useWebSocket } from '@vueuse/core';
+import { useGlobSetting } from '/@/hooks/setting';
+import { isShareMode } from '/@/views/sys/share/hook';
+import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
+import { isNullAndUnDef } from '/@/utils/is';
+import {
+  ComponentPropsConfigType,
+  DataFetchUpdateFn,
+  EntityTypeEnum,
+  MultipleDataFetchUpdateFn,
+  ReceiveMessageType,
+  ScopeTypeEnum,
+  SubscribeMessageItemType,
+  SubscribeMessageType,
+} from '../index.type';
+import { DataSource } from '../../palette/types';
+
+interface DeviceGroupMapType {
+  subscriptionId: number;
+  attributes: Set<string>;
+  subscriptionGroup: Record<'uuid' | 'attribute', string>[];
+}
+
+interface ComponentUpdateFnMapValueType {
+  fn: MultipleDataFetchUpdateFn;
+  attributes: string[];
+}
+
+const parseMessage = (text: string): ReceiveMessageType => {
+  try {
+    return JSON.parse(text);
+  } catch (error) {
+    return {} as ReceiveMessageType;
+  }
+};
+
+class Subscriber {
+  subscribeId = 0;
+
+  deviceGroupMap = new Map<string, DeviceGroupMapType>();
+
+  subscriptionMap = new Map<number, string>();
+
+  componentUpdateFnMap = new Map<string, DataFetchUpdateFn>();
+
+  componentGroupUpdateFnMap = new Map<string, ComponentUpdateFnMapValueType[]>();
+
+  getNextSubscribeId() {
+    return this.subscribeId++;
+  }
+
+  clearSubscriber = () => {
+    this.deviceGroupMap.clear();
+    this.subscriptionMap.clear();
+    this.componentUpdateFnMap.clear();
+  };
+
+  addSubscriber = (info: Record<'deviceId' | 'slaveDeviceId' | 'attribute' | 'uuid', string>) => {
+    const { deviceId, attribute, uuid } = info;
+    if (!this.deviceGroupMap.has(deviceId)) {
+      this.deviceGroupMap.set(deviceId, {
+        subscriptionId: this.getNextSubscribeId(),
+        attributes: new Set(),
+        subscriptionGroup: [],
+      });
+    }
+
+    const groupInfo = this.deviceGroupMap.get(deviceId);
+    groupInfo?.attributes.add(attribute);
+    groupInfo?.subscriptionGroup.push({ uuid, attribute });
+
+    this.subscriptionMap.set(groupInfo!.subscriptionId, deviceId);
+  };
+
+  genBasicMessage(unsubscribe = false) {
+    const message = Array.from(this.deviceGroupMap.entries()).map(([deviceId, value]) => {
+      const { subscriptionId, attributes } = value;
+      return {
+        cmdId: subscriptionId,
+        entityId: deviceId,
+        keys: Array.from(attributes.values()).join(','),
+        entityType: EntityTypeEnum.DEVICE,
+        scope: ScopeTypeEnum.LATEST_TELEMERY,
+        ...(unsubscribe ? { unsubscribe } : {}),
+      } as SubscribeMessageItemType;
+    });
+    return { tsSubCmds: message } as SubscribeMessageType;
+  }
+
+  genUnSubscribeMessage() {
+    return this.genBasicMessage(true);
+  }
+
+  genSubscribeMessage() {
+    return this.genBasicMessage();
+  }
+
+  getScopeMessage(message: ReceiveMessageType, attribute: string[]) {
+    const data = attribute.reduce((prev, next) => {
+      return { ...prev, [next]: (message.data || {})[next] || [[]] };
+    }, {} as ReceiveMessageType['data']);
+
+    const latestValues = attribute.reduce((prev, next) => {
+      return { ...prev, [next]: (message.latestValues || {})[next] || [[]] };
+    }, {} as ReceiveMessageType['data']);
+
+    return {
+      subscriptionId: message.subscriptionId,
+      errorCode: message.errorCode,
+      errorMsg: message.errorMsg,
+      data,
+      latestValues,
+    } as ReceiveMessageType;
+  }
+
+  trackUpdate(uuid: string, fn: Fn) {
+    if (!uuid || !fn) return;
+    this.componentUpdateFnMap.set(uuid, fn);
+  }
+
+  trackUpdateGroup(deviceId: string, data: ComponentUpdateFnMapValueType) {
+    if (!deviceId || !data) return;
+    if (!this.componentGroupUpdateFnMap.has(deviceId))
+      this.componentGroupUpdateFnMap.set(deviceId, []);
+    const temp = this.componentGroupUpdateFnMap.get(deviceId);
+    temp?.push(data);
+  }
+
+  triggerUpdate(message: ReceiveMessageType) {
+    const { subscriptionId } = message;
+    if (isNullAndUnDef(subscriptionId)) return;
+    const deviceId = this.subscriptionMap.get(subscriptionId);
+    if (!deviceId) return;
+    const deviceGroup = this.deviceGroupMap.get(deviceId);
+    if (!deviceGroup) return;
+    const { subscriptionGroup } = deviceGroup;
+
+    const updateGroups = this.componentGroupUpdateFnMap.get(deviceId);
+
+    if (updateGroups) {
+      (updateGroups || []).forEach((item) => {
+        const { attributes, fn } = item;
+        try {
+          if (!fn) return;
+          fn?.(this.getScopeMessage(message, attributes), attributes);
+        } catch (error) {
+          console.error(`deviceId: ${deviceId}`);
+          throw error;
+        }
+      });
+    }
+
+    subscriptionGroup.forEach((item) => {
+      const { attribute, uuid } = item;
+      const updateFn = this.componentUpdateFnMap.get(uuid);
+      try {
+        if (!updateFn) return;
+        updateFn?.(this.getScopeMessage(message, [attribute]), attribute);
+      } catch (error) {
+        console.error(`uuid: ${uuid}`);
+        throw error;
+      }
+    });
+  }
+}
+
+const subscriber = new Subscriber();
+
+export const useSocket = (dataSourceRef: Ref<WidgetDataType[]>) => {
+  let initied = false;
+
+  const { socketUrl } = useGlobSetting();
+
+  const token = isShareMode() ? getShareJwtToken() : getJwtToken();
+
+  const server = `${socketUrl}${token}`;
+
+  const { send, data, close } = useWebSocket(server, {
+    onMessage() {
+      initied = true;
+      try {
+        const message = parseMessage(unref(data));
+        subscriber.triggerUpdate(message);
+      } catch (error) {
+        throw Error(error as string);
+      }
+    },
+  });
+
+  const initSubscribe = () => {
+    subscriber.clearSubscriber();
+    unref(dataSourceRef).forEach((item) => {
+      item.dataSource.forEach((temp) => {
+        const { deviceId, slaveDeviceId, attribute, uuid } = temp;
+        subscriber.addSubscriber({ deviceId, slaveDeviceId, attribute, uuid });
+      });
+    });
+  };
+
+  watch(
+    () => dataSourceRef.value,
+    (value) => {
+      if (value.length) {
+        if (initied) {
+          const message = JSON.stringify(subscriber.genUnSubscribeMessage());
+          send(message);
+        }
+
+        initSubscribe();
+
+        const message = JSON.stringify(subscriber.genSubscribeMessage());
+        send(message);
+      }
+    }
+  );
+
+  onUnmounted(() => {
+    close();
+  });
+};
+
+export const useDataFetch = (
+  props: { config: ComponentPropsConfigType },
+  updateFn: DataFetchUpdateFn
+) => {
+  const getBindAttribute = computed(() => {
+    const { config } = props;
+    const { option } = config as ComponentPropsConfigType<Recordable, DataSource>;
+    return option.attribute;
+  });
+
+  if (!unref(getBindAttribute)) return;
+
+  const getUUID = computed(() => {
+    return props.config.option.uuid;
+  });
+
+  watch(
+    () => getUUID,
+    () => {
+      subscriber.trackUpdate(unref(getUUID), updateFn);
+    },
+    {
+      immediate: true,
+    }
+  );
+  return { getUUID, getBindAttribute };
+};
+
+export const useMultipleDataFetch = (
+  props: { config: ComponentPropsConfigType },
+  updateFn: MultipleDataFetchUpdateFn
+) => {
+  const getBindAttributes = computed(() => {
+    const attributes = props.config.option.dataSource?.map((item) => item.attribute);
+    return [...new Set(attributes)];
+  });
+
+  if (unref(getBindAttributes).length) return;
+
+  const getDeviceId = computed(() => {
+    return props.config.option.dataSource?.at(0)?.deviceId;
+  });
+
+  watch(
+    () => getDeviceId,
+    () => {
+      subscriber.trackUpdateGroup(unref(getDeviceId)!, {
+        attributes: unref(getBindAttributes),
+        fn: updateFn,
+      });
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  return { getDeviceId, getBindAttributes };
+};

+import { ConfigType, FetchComFlagTypeEnum, PublicComponentOptions } from './index.type';
+
+const configModules = import.meta.globEager('./components/**/config.vue');
+const viewModules = import.meta.globEager('./components/**/index.vue');
+const datasourceModules = import.meta.globEager('./components/**/datasource.vue');
+const createInstaceModules = import.meta.globEager('./components/**/config.ts');
+
+const findModule = (componentName: string, module: Recordable) => {
+  for (const key in module) {
+    const urlSplit = key.split('/');
+    if (urlSplit[urlSplit.length - 2] === componentName) {
+      return module[key] as Record<'default', any>;
+    }
+  }
+};
+
+/**
+ * @description 获取组件
+ * @param {string} componentName 组件名称
+ * @param {FetchComFlagTypeEnum} flag 标识 0展示组件 1配置组件 2数据源组件
+ */
+export const fetchComponent = (componentName: string, flag: FetchComFlagTypeEnum) => {
+  const module =
+    flag === FetchComFlagTypeEnum.VIEW
+      ? viewModules
+      : flag === FetchComFlagTypeEnum.CONFIG
+      ? configModules
+      : datasourceModules;
+  return findModule(componentName, module);
+};
+
+export const fetchViewComponent = (configType: ConfigType) => {
+  const { key } = configType;
+  return fetchComponent(key, FetchComFlagTypeEnum.VIEW)?.default;
+};
+
+export const fetchConfigComponent = (configType: ConfigType) => {
+  const { key } = configType;
+  return fetchComponent(key, FetchComFlagTypeEnum.CONFIG)?.default;
+};
+
+export const fetchDatasourceComponent = (configType: ConfigType) => {
+  const { key } = configType;
+  return fetchComponent(key, FetchComFlagTypeEnum.DATASOURCE_FORM)?.default;
+};
+
+/**
+ * @description 获取目标组件配置信息
+ * @param targetData
+ */
+export const createComponent = (
+  targetData: ConfigType,
+  options?: Partial<PublicComponentOptions>
+) => {
+  const { key } = targetData;
+  const module = findModule(key, createInstaceModules);
+  const instance = module?.default;
+  if (instance) {
+    return new instance(options || {});
+  }
+};

+import { ComponentInfoGradientInfoType, DataSource, FlowmeterConfigType } from '../palette/types';
+import { ComponentConfigFieldEnum } from './enum';
+
+/**
+ * @description 获取组件
+ */
+export enum FetchComFlagTypeEnum {
+  VIEW,
+  CONFIG,
+  DATASOURCE_FORM,
+}
+
+/**
+ * @description 包分类名称
+ */
+export enum PackagesCategoryNameEnum {
+  TEXT = '文本组件',
+  INSTRUMENT = '仪表组件',
+  PICTURE = '图片组件',
+  CONTROL = '控制组件',
+  MAP = '地图组件',
+  FLOWMETER = '流量计',
+  OTHER = '其他',
+}
+
+/**
+ * @description 包分类枚举
+ */
+export enum PackagesCategoryEnum {
+  TEXT = 'TEXT',
+  INSTRUMENT = 'INSTRUMENT',
+  PICTURE = 'PICTURE',
+  CONTROL = 'CONTROL',
+  MAP = 'MAP',
+  FLOWMETER = 'FLOWMETER',
+  OTHER = 'FLOWMETER',
+}
+
+/**
+ * @description 组件配置
+ */
+export interface ConfigType {
+  /**
+   * @description
+   */
+  key: string;
+
+  /**
+   * @description 组件key
+   */
+  conKey: string;
+
+  /**
+   * @description 组件数据源组件key
+   */
+  datasourceConKey: string;
+
+  /**
+   * @description 组件配置组件key
+   */
+  configConKey: string;
+  title: string;
+  category?: string;
+  categoryName?: string;
+  package: string;
+}
+
+/**
+ * @description 创建组件类型
+ */
+export interface CreateComponentType<P = PublicPresetOptions, O = Partial<DataSource>> {
+  key: string;
+  componentConfig: ConfigType;
+  option: PublicComponentOptions & O;
+  persetOption?: P;
+}
+
+/**
+ * @description 组件公共配置
+ */
+export interface PublicConfigType {
+  id: string;
+  attr: { x: number; y: number; w: number; h: number };
+}
+
+export interface PublicPresetOptions {
+  maxScale?: number;
+  minScale?: number;
+  componetDesign?: boolean;
+  multipleDataSourceComponent?: boolean;
+  [ComponentConfigFieldEnum.FONT_COLOR]?: string;
+  [ComponentConfigFieldEnum.UNIT]?: string;
+  [ComponentConfigFieldEnum.ICON_COLOR]?: string;
+  [ComponentConfigFieldEnum.ICON]?: string;
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]?: boolean;
+  [ComponentConfigFieldEnum.GRADIENT_INFO]?: ComponentInfoGradientInfoType[];
+  [ComponentConfigFieldEnum.FLOWMETER_CONFIG]?: FlowmeterConfigType;
+  [key: string]: any;
+}
+
+export interface PublicComponentOptions {
+  uuid: string;
+  widthPx: number;
+  heightPx: number;
+  itemWidthRatio: number;
+  itemHeightRatio: number;
+
+  dataSource?: DataSource[];
+  [key: string]: any;
+}
+
+export interface ComponentPropsConfigType<P = PublicPresetOptions, O = DataSource>
+  extends CreateComponentType<P, O>,
+    PublicConfigType {}
+
+export interface PackagesType {
+  [PackagesCategoryEnum.TEXT]: ConfigType[];
+  [PackagesCategoryEnum.PICTURE]: ConfigType[];
+  [PackagesCategoryEnum.INSTRUMENT]: ConfigType[];
+  [PackagesCategoryEnum.CONTROL]: ConfigType[];
+  [PackagesCategoryEnum.MAP]: ConfigType[];
+  [PackagesCategoryEnum.FLOWMETER]: ConfigType[];
+  [PackagesCategoryEnum.OTHER]: ConfigType[];
+}
+
+export interface SubscribeMessageType {
+  tsSubCmds: SubscribeMessageItemType[];
+}
+
+export interface SubscribeMessageItemType {
+  cmdId: number;
+  entityId: string;
+  entityType: string;
+  keys?: string;
+  scope?: string;
+  unsubscribe?: boolean;
+}
+
+export interface ReceiveMessageType {
+  subscriptionId: number;
+  errorCode: number;
+  errorMsg: Nullable<string>;
+  data: Record<string, [number, string][]>;
+  latestValues: Record<string, number>;
+}
+
+export enum EntityTypeEnum {
+  DEVICE = 'DEVICE',
+}
+
+export enum ScopeTypeEnum {
+  LATEST_TELEMERY = 'LATEST_TELEMERY',
+}
+
+export type DataFetchUpdateFn = (message: ReceiveMessageType, attr: string) => void;
+
+export type MultipleDataFetchUpdateFn = (message: ReceiveMessageType, attr: string[]) => void;
+
+// 旧 组件key
+// TEXT_COMPONENT_1 = 'text-component-1',
+// TEXT_COMPONENT_2 = 'text-component-2',
+// TEXT_COMPONENT_3 = 'text-component-3',
+// TEXT_COMPONENT_4 = 'text-component-4',
+// TEXT_COMPONENT_5 = 'text-component-5',
+// INSTRUMENT_COMPONENT_1 = 'instrument-component-1',
+// INSTRUMENT_COMPONENT_2 = 'instrument-component-2',
+// DIGITAL_DASHBOARD_COMPONENT = 'digital-dashboard-component',
+// PICTURE_COMPONENT_1 = 'picture-component-1',
+// CONTROL_COMPONENT_TOGGLE_SWITCH = 'control-component-toggle-switch',
+// CONTROL_COMPONENT_SWITCH_WITH_ICON = 'control-component-switch-with-icon',
+// CONTROL_COMPONENT_SLIDING_SWITCH = 'control-component-sliding-switch',
+// MAP_COMPONENT_TRACK_REAL = 'map-component-track-real',
+// MAP_COMPONENT_TRACK_HISTORY = 'map-component-track-history',

+import { ControlList } from './components/Control';
+// import { FlowmeterList } from './components/Flowmeter';
+import { InstrumentList } from './components/Instrument';
+import { MapList } from './components/Map';
+import { PictureList } from './components/Picture';
+import { TextList } from './components/Text';
+import { PackagesCategoryEnum, PackagesType } from './index.type';
+
+export const packageList: PackagesType = {
+  [PackagesCategoryEnum.TEXT]: TextList,
+  [PackagesCategoryEnum.INSTRUMENT]: InstrumentList,
+  [PackagesCategoryEnum.PICTURE]: PictureList,
+  [PackagesCategoryEnum.CONTROL]: ControlList,
+  [PackagesCategoryEnum.MAP]: MapList,
+  // [PackagesCategoryEnum.FLOWMETER]: FlowmeterList,
+};

+import { PublicConfigType, PublicPresetOptions } from './index.type';
+import { buildUUID } from '/@/utils/uuid';
+
+export const componentInitConfig = { x: 50, y: 50, w: 240, h: 200 };
+
+export const componentOptionsInitConfig: PublicPresetOptions = { maxScale: 1, minScale: 0 };
+
+export class PublicConfigClass implements PublicConfigType {
+  public id = buildUUID();
+  public attr: Record<'x' | 'y' | 'w' | 'h', number> = { ...componentInitConfig };
+}

+import cloneDeep from 'lodash-es/cloneDeep';
+import { ComponentConfig } 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]: '#',
+  [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key: string = ComponentConfig.key;
+
+  public attr = { ...componentInitConfig };
+
+  public componentConfig: ConfigType = cloneDeep(ComponentConfig);
+
+  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 { 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>

+import { useComponentKeys } from '/@/views/visual/packages/hook/useComponentKeys';
+import { ConfigType, PackagesCategoryEnum } from '/@/views/visual/packages/index.type';
+
+const componentKeys = useComponentKeys('componentKeys');
+
+export const ComponentConfig: ConfigType = {
+  ...componentKeys,
+  title: '组件名',
+  package: PackagesCategoryEnum.TEXT,
+};

+<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';
+
+  const props = defineProps<{
+    config: ComponentPropsConfigType<typeof option>;
+  }>();
+
+  const updateFn: DataFetchUpdateFn = (_message) => {};
+
+  useDataFetch(props, updateFn);
+</script>
+
+<template>
+  <main class="w-full h-full flex flex-col justify-center items-center"> </main>
+</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;
+      },
+      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,
+    };
+  }
+}

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

+<script lang="ts" setup>
+  import { computed, nextTick, Ref, ref, unref } from 'vue';
+  import { getDeviceHistoryInfo } from '/@/api/alarm/position';
+  import { Empty, Spin } from 'ant-design-vue';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import { AggregateDataEnum } from '/@/views/device/localtion/config.data';
+  import { useGridLayout } from '/@/hooks/component/useGridLayout';
+  import { ColEx } from '/@/components/Form/src/types';
+  import { useForm, BasicForm } from '/@/components/Form';
+  import { formSchema, SchemaFiled } from './config';
+  import BasicModal from '/@/components/Modal/src/BasicModal.vue';
+  import { useModalInner } from '/@/components/Modal';
+  import { getAllDeviceByOrg } from '/@/api/dataBoard';
+  import { useHistoryData } from '/@/views/device/list/hook/useHistoryData';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { formatToDateTime } from '/@/utils/dateUtil';
+  import {
+    ModeSwitchButton,
+    TABLE_CHART_MODE_LIST,
+    EnumTableChartMode,
+  } from '/@/components/Widget';
+  import { ModalParamsType } from '/#/utils';
+  import { WidgetDataType } from '../../hooks/useDataSource';
+  import { ExtraDataSource } from '../../types';
+
+  type DeviceOption = Record<'label' | 'value' | 'organizationId', string>;
+
+  defineEmits(['register']);
+
+  const mode = ref<EnumTableChartMode>(EnumTableChartMode.CHART);
+
+  const chartRef = ref();
+
+  const loading = ref(false);
+
+  const isNull = ref(false);
+
+  const historyData = ref<{ ts: number; value: string; name: string }[]>([]);
+
+  const { deviceAttrs, getDeviceKeys, getSearchParams, setChartOptions, getDeviceAttribute } =
+    useHistoryData();
+
+  const { setOptions, destory } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+  function hasDeviceAttr() {
+    return !!unref(deviceAttrs).length;
+  }
+
+  const [register, method] = useForm({
+    schemas: formSchema(),
+    baseColProps: useGridLayout(2, 3, 4) as unknown as ColEx,
+    rowProps: {
+      gutter: 10,
+    },
+    labelWidth: 120,
+    fieldMapToTime: [
+      [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:ss'],
+    ],
+    submitButtonOptions: {
+      loading: loading as unknown as boolean,
+    },
+    async submitFunc() {
+      search();
+    },
+  });
+
+  const search = async () => {
+    // 表单验证
+    await method.validate();
+    const value = method.getFieldsValue();
+    const searchParams = getSearchParams(value);
+    if (!hasDeviceAttr()) return;
+    // 发送请求
+    loading.value = true;
+    const res = await getDeviceHistoryInfo(searchParams);
+    historyData.value = getTableHistoryData(res);
+    loading.value = false;
+    // 判断数据对象是否为空
+    if (!Object.keys(res).length) {
+      isNull.value = false;
+      return;
+    } else {
+      isNull.value = true;
+    }
+
+    const selectedKeys = unref(deviceAttrs).find(
+      (item) => item.identifier === value[SchemaFiled.KEYS]
+    );
+    setOptions(setChartOptions(res, selectedKeys));
+  };
+
+  const getTableHistoryData = (record: Recordable<{ ts: number; value: string }[]>) => {
+    const keys = Object.keys(record);
+    const list = keys.reduce((prev, next) => {
+      const list = record[next].map((item) => {
+        return {
+          ...item,
+          name: next,
+        };
+      });
+      return [...prev, ...list];
+    }, []);
+    return list;
+  };
+
+  const getIdentifierNameMapping = computed(() => {
+    const mapping = {};
+    unref(deviceAttrs).forEach((item) => {
+      const { identifier, name } = item;
+      mapping[identifier] = name;
+    });
+    return mapping;
+  });
+
+  const [registerTable] = useTable({
+    showIndexColumn: false,
+    showTableSetting: false,
+    dataSource: historyData,
+    maxHeight: 300,
+    size: 'small',
+    columns: [
+      {
+        title: '属性',
+        dataIndex: 'name',
+        format: (value) => {
+          return unref(getIdentifierNameMapping)[value];
+        },
+      },
+      {
+        title: '值',
+        dataIndex: 'value',
+      },
+      {
+        title: '更新时间',
+        dataIndex: 'ts',
+        format: (val) => {
+          return formatToDateTime(val, 'YYYY-MM-DD HH:mm:ss');
+        },
+      },
+    ],
+  });
+
+  const getDeviceDataKey = async (record: DeviceOption) => {
+    const { organizationId, value } = record;
+    try {
+      const options = await getAllDeviceByOrg(organizationId);
+      const record = options.find((item) => item.tbDeviceId === value);
+      await getDeviceAttribute(record!);
+      await nextTick();
+      method.updateSchema({
+        field: SchemaFiled.KEYS,
+        componentProps: {
+          options: unref(deviceAttrs).map((item) => ({ label: item.name, value: item.identifier })),
+        },
+      });
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const handleModalOpen = async () => {
+    await nextTick();
+
+    method.setFieldsValue({
+      [SchemaFiled.START_TS]: 1 * 24 * 60 * 60 * 1000,
+      [SchemaFiled.LIMIT]: 7,
+      [SchemaFiled.AGG]: AggregateDataEnum.NONE,
+    });
+
+    if (!hasDeviceAttr()) return;
+
+    const { deviceId } = method.getFieldsValue();
+
+    const res = await getDeviceHistoryInfo({
+      entityId: deviceId,
+      keys: unref(getDeviceKeys).join(),
+      startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
+      endTs: Date.now(),
+      agg: AggregateDataEnum.NONE,
+      limit: 7,
+    });
+    historyData.value = getTableHistoryData(res);
+    // 判断对象是否为空
+    if (!Object.keys(res).length) {
+      isNull.value = false;
+      return;
+    } else {
+      isNull.value = true;
+    }
+    setOptions(setChartOptions(res));
+  };
+
+  const generateDeviceOptions = (dataSource: ExtraDataSource[]) => {
+    const record: { [key: string]: boolean } = {};
+
+    const options: DeviceOption[] = [];
+    for (const item of dataSource) {
+      const { deviceName, gatewayDevice, slaveDeviceId, organizationId } = item;
+      let { deviceId } = item;
+      if (gatewayDevice && slaveDeviceId) {
+        deviceId = slaveDeviceId;
+      }
+      if (record[deviceId]) continue;
+      options.push({
+        label: deviceName,
+        value: deviceId,
+        organizationId,
+      });
+      record[deviceId] = true;
+    }
+
+    return options;
+  };
+
+  const [registerModal] = useModalInner(async (params: ModalParamsType<WidgetDataType>) => {
+    deviceAttrs.value = [];
+    loading.value = false;
+    const { record } = params;
+    const options = generateDeviceOptions(record.dataSource);
+    await nextTick();
+    method.updateSchema({
+      field: SchemaFiled.DEVICE_ID,
+      componentProps({ formActionType }) {
+        const { setFieldsValue } = formActionType;
+        return {
+          options,
+          onChange(_, record: DeviceOption) {
+            getDeviceDataKey(record);
+            setFieldsValue({ [SchemaFiled.KEYS]: null });
+          },
+        };
+      },
+    });
+
+    if (options.length && options.at(0)?.value) {
+      const record = options.at(0)!;
+      await getDeviceDataKey(record);
+      try {
+        await method.setFieldsValue({ [SchemaFiled.DEVICE_ID]: record.value });
+      } catch (error) {}
+    }
+
+    await handleModalOpen();
+  });
+
+  const handleCancel = () => {
+    destory();
+  };
+
+  const switchMode = (flag: EnumTableChartMode) => {
+    mode.value = flag;
+  };
+</script>
+
+<template>
+  <BasicModal
+    @register="registerModal"
+    @cancel="handleCancel"
+    :destroy-on-close="true"
+    :show-ok-btn="false"
+    cancel-text="关闭"
+    width="70%"
+    title="历史趋势"
+  >
+    <section
+      class="flex flex-col p-4 h-full w-full min-w-7/10"
+      style="color: #f0f2f5; background-color: #f0f2f5"
+    >
+      <section class="bg-white my-3 p-2">
+        <BasicForm @register="register" />
+      </section>
+      <section class="bg-white p-3" style="min-height: 350px">
+        <Spin :spinning="loading" :absolute="true">
+          <div
+            v-show="mode === EnumTableChartMode.CHART"
+            class="flex h-70px items-center justify-end p-2"
+          >
+            <ModeSwitchButton
+              v-model:value="mode"
+              :mode="TABLE_CHART_MODE_LIST"
+              @change="switchMode"
+            />
+          </div>
+
+          <div
+            v-show="isNull && mode === EnumTableChartMode.CHART"
+            ref="chartRef"
+            :style="{ height: '350px', width: '100%' }"
+          >
+          </div>
+          <Empty
+            v-if="mode === EnumTableChartMode.CHART"
+            class="h-350px flex flex-col justify-center items-center"
+            description="暂无数据，请选择设备查询"
+            v-show="!isNull"
+          />
+
+          <BasicTable v-show="mode === EnumTableChartMode.TABLE" @register="registerTable">
+            <template #toolbar>
+              <div class="flex h-70px items-center justify-end p-2">
+                <ModeSwitchButton
+                  v-model:value="mode"
+                  :mode="TABLE_CHART_MODE_LIST"
+                  @change="switchMode"
+                />
+              </div>
+            </template>
+          </BasicTable>
+        </Spin>
+      </section>
+    </section>
+  </BasicModal>
+</template>
+
+<style scoped></style>

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

+<script lang="ts" setup>
+  import { PageHeader } from 'ant-design-vue';
+  import { computed, unref } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { decode } from '../..';
+  import { RollbackOutlined } from '@ant-design/icons-vue';
+
+  defineProps<{ widgetNumber: number }>();
+
+  const ROUTE = useRoute();
+  const ROUTER = useRouter();
+  const getIsSharePage = computed(() => {
+    return ROUTE.matched.find((item) => item.path === '/share/:viewType/:id/:publicId');
+  });
+
+  const getDataBoardName = computed(() => {
+    return decode((ROUTE.params as { boardName: string }).boardName || '');
+  });
+
+  const handleBack = () => {
+    if (unref(getIsSharePage)) return;
+    ROUTER.go(-1);
+  };
+
+  // const handleOpenCreatePanel = () => {};
+</script>
+
+<template>
+  <PageHeader v-if="!getIsSharePage" class="pagerheader !px-5 !pt-5 !pb-0 !dark:bg-dark-700">
+    <template #title>
+      <div class="flex items-center h-18 px-4">
+        <RollbackOutlined
+          v-if="!getIsSharePage"
+          class="mr-3 cursor-pointer text-2xl"
+          @click="handleBack"
+        />
+        <span class="text-lg text-gray-700 dark:text-light-50">{{ getDataBoardName }}</span>
+      </div>
+    </template>
+    <template #extra>
+      <div class="w-full h-full flex justify-center items-center px-4">
+        <slot></slot>
+      </div>
+    </template>
+    <div>
+      <span class="mr-3 text-sm text-gray-500">已创建组件:</span>
+      <span class="text-blue-500"> {{ widgetNumber }}个</span>
+    </div>
+  </PageHeader>
+</template>
+
+<style lang="less" scoped>
+  .pagerheader {
+    :deep(.ant-page-header-heading) {
+      @apply bg-light-50 dark:bg-dark-900;
+    }
+  }
+</style>

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

+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { WidgetDataType } from '../../hooks/useDataSource';
+  import { fetchViewComponent } from '../../../packages';
+  import { ConfigType } from '/@/views/visual/packages/index.type';
+  import { ExtraDataSource } from '../../types';
+  import { CSSProperties } from 'vue';
+  import { toRaw } from 'vue';
+  import { Spin } from 'ant-design-vue';
+  import { componentMap, transformComponentKey } from '../../../packages/componentMap';
+  import { onMounted } from 'vue';
+  import { registerComponent } from '../../../packages/componentMap';
+  import { useGetComponentConfig } from '../../../packages/hook/useGetComponetConfig';
+  import { unref } from 'vue';
+  import { isBoolean } from '/@/utils/is';
+
+  const props = defineProps<{
+    sourceInfo: WidgetDataType;
+  }>();
+
+  const getLayout = computed(() => {
+    const { itemWidthRatio, itemHeightRatio } = props.sourceInfo || {};
+    return { width: `${itemWidthRatio}%`, height: `${itemHeightRatio}%` } as CSSProperties;
+  });
+
+  const getCanRenderFlag = computed(() => {
+    const { itemHeightRatio, itemWidthRatio } = props.sourceInfo;
+    return [itemHeightRatio, itemWidthRatio].every(Boolean);
+  });
+
+  const getComponentConfig = computed(() => {
+    const { widthPx, heightPx, itemWidthRatio, itemHeightRatio, frontId } = props.sourceInfo;
+
+    return useGetComponentConfig(frontId, {
+      widthPx,
+      heightPx,
+      itemWidthRatio,
+      itemHeightRatio,
+    });
+  });
+
+  const getBindValue = computed(() => {
+    return (options: ExtraDataSource) => {
+      const raw = toRaw(options);
+      const config = unref(getComponentConfig);
+      return {
+        config: {
+          ...config,
+          option: { ...config.option, ...raw },
+        },
+      };
+    };
+  });
+
+  const getIsMultipleDataSourceComponent = computed(() => {
+    const { persetOption } = unref(getComponentConfig);
+    const { multipleDataSourceComponent } = persetOption || {};
+    return isBoolean(multipleDataSourceComponent) ? multipleDataSourceComponent : false;
+  });
+
+  const getBindMultipleDataSourceValue = computed(() => {
+    const config = unref(getComponentConfig);
+    const { dataSource } = props.sourceInfo;
+    return {
+      config: {
+        ...config,
+        option: { ...config.option, dataSource: toRaw(dataSource) },
+      },
+    };
+  });
+
+  onMounted(() => {
+    const key = transformComponentKey(props.sourceInfo.frontId);
+    const component = fetchViewComponent({ key } as ConfigType);
+    registerComponent(key, component);
+  });
+</script>
+
+<template>
+  <Spin :spinning="!getCanRenderFlag" wrapperClassName="widget-distribute-spin">
+    <!-- 多数据源组件 -->
+    <template v-if="getCanRenderFlag">
+      <template v-if="getIsMultipleDataSourceComponent">
+        <component
+          :is="componentMap.get(transformComponentKey(props.sourceInfo.frontId))"
+          class="w-full h-full"
+          v-bind="getBindMultipleDataSourceValue"
+        />
+      </template>
+
+      <!-- 单一数据源组件 -->
+      <template v-if="!getIsMultipleDataSourceComponent">
+        <component
+          v-for="item in props.sourceInfo.dataSource"
+          :key="item.uuid"
+          :is="componentMap.get(transformComponentKey(props.sourceInfo.frontId))"
+          :style="getLayout"
+          v-bind="getBindValue(item)"
+        />
+      </template>
+    </template>
+  </Spin>
+</template>
+
+<style lang="less" scoped>
+  .widget-distribute-spin {
+    @apply w-full h-full overflow-hidden;
+
+    :deep(.ant-spin-container) {
+      @apply w-full h-full flex flex-wrap;
+    }
+  }
+</style>

+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { useShare } from '../../hooks/useShare';
+  import AuthDropDown, { AuthDropMenuList } from '/@/components/Widget/AuthDropDown.vue';
+  import { useRole } from '/@/hooks/business/useRole';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+  import { VisualComponentPermission } from '../..';
+  import { Tooltip } from 'ant-design-vue';
+  import { MoreOutlined, AreaChartOutlined } from '@ant-design/icons-vue';
+  import { WidgetDataType } from '../../hooks/useDataSource';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { addDataComponent, deleteDataComponent } from '/@/api/dataBoard';
+  import { useBoardId } from '../../hooks/useBoardId';
+  import { unref, toRaw } from 'vue';
+  import { ApiDataBoardDataType } from '../../types';
+  import { useCalcNewWidgetPosition } from '../../hooks/useCalcNewWidgetPosition';
+  import { Layout } from 'vue3-grid-layout';
+  import { DataComponentRecord } from '/@/api/dataBoard/model';
+
+  const props = defineProps<{
+    sourceInfo: WidgetDataType;
+    rawDataSource: ApiDataBoardDataType;
+  }>();
+
+  const emit = defineEmits<{
+    (event: 'ok'): void;
+    (event: 'update', data: WidgetDataType): void;
+    (event: 'openTrend', data: WidgetDataType): void;
+  }>();
+
+  const { isCustomerUser } = useRole();
+
+  const { getIsSharePage } = useShare();
+
+  const { createMessage } = useMessage();
+
+  const { boardId } = useBoardId();
+
+  const dropMenuList = ref<AuthDropMenuList[]>([
+    {
+      text: '编辑组件',
+      event: DataActionModeEnum.UPDATE,
+      icon: 'ant-design:edit-outlined',
+      auth: VisualComponentPermission.UPDATE,
+      onClick: handleUpdate,
+    },
+    {
+      text: '复制组件',
+      event: DataActionModeEnum.COPY,
+      icon: 'ant-design:copy-outlined',
+      auth: VisualComponentPermission.COPY,
+      onClick: handleCopy,
+    },
+    {
+      text: '删除组件',
+      event: DataActionModeEnum.DELETE,
+      icon: 'ant-design:delete-outlined',
+      auth: VisualComponentPermission.DELETE,
+      onClick: handleDelete,
+    },
+  ]);
+
+  function handleUpdate() {
+    emit('update', toRaw(props.sourceInfo));
+  }
+
+  async function handleDelete() {
+    try {
+      await deleteDataComponent({ dataBoardId: unref(boardId), ids: [props.sourceInfo.id] });
+      createMessage.success('删除成功~');
+      emit('ok');
+    } catch (error) {}
+  }
+
+  async function handleCopy() {
+    const id = props.sourceInfo.id;
+    const copyRecord = props.rawDataSource.componentData.find((item) => item.id === id);
+    const copyLayout = props.rawDataSource.componentLayout.find((item) => item.id === id);
+
+    const raw = toRaw(copyRecord) as unknown as DataComponentRecord;
+
+    const layout = useCalcNewWidgetPosition(
+      props.rawDataSource.componentLayout as unknown as Layout[],
+      { width: copyLayout!.w, height: copyLayout!.h }
+    );
+
+    try {
+      await addDataComponent({
+        boardId: unref(boardId),
+        record: {
+          frontId: raw.frontId,
+          dataSource: raw.dataSource,
+          name: raw.name,
+          remark: raw.remark,
+          layout: layout as Layout,
+        },
+      });
+      createMessage.success('复制成功~');
+      emit('ok');
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  const handleOpenTrendModal = () => {
+    emit('openTrend', toRaw(props.sourceInfo));
+  };
+</script>
+
+<template>
+  <section class="p-5 flex flex-col w-full">
+    <main class="flex w-full h-full h-7">
+      <Tooltip :title="sourceInfo.name">
+        <div class="flex-1 w-full h-full flex text-lg justify-center font-semibold">
+          {{ sourceInfo.name }}
+        </div>
+      </Tooltip>
+
+      <div v-if="!getIsSharePage" class="flex items-center w-16 justify-evenly">
+        <Tooltip v-if="!isCustomerUser" title="趋势">
+          <AreaChartOutlined class="text-lg" @click="handleOpenTrendModal" />
+        </Tooltip>
+        <AuthDropDown
+          v-if="!isCustomerUser && dropMenuList.length"
+          :drop-menu-list="dropMenuList"
+          :trigger="['click']"
+        >
+          <Tooltip title="更多">
+            <MoreOutlined class="transform rotate-90 cursor-pointer text-lg" />
+          </Tooltip>
+        </AuthDropDown>
+      </div>
+    </main>
+  </section>
+</template>

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

+<script lang="ts" setup></script>
+
+<template>
+  <section class="widget-wrapper !dark:bg-dark-900 flex flex-col bg-light-50 w-full h-full">
+    <!-- Header -->
+    <slot name="header"></slot>
+
+    <!-- Container -->
+    <slot></slot>
+
+    <!-- Footer -->
+    <slot name="footer"></slot>
+  </section>
+</template>

+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+export const useBoardId = () => {
+  const ROUTE = useRoute();
+  const boardId = computed(() => {
+    return decodeURIComponent((ROUTE.params as Recordable).boardId as string);
+  });
+  return { boardId };
+};

+import { unref } from 'vue';
+import { Layout } from 'vue3-grid-layout';
+import { DEFAULT_MAX_COL, DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH } from '..';
+
+interface GapRecord {
+  maxGap: number;
+  startIndex: Nullable<number>;
+  endIndex: Nullable<number>;
+}
+
+export const useCalcNewWidgetPosition = (
+  layoutInfo: Layout[],
+  randomLayout = { width: DEFAULT_WIDGET_WIDTH, height: DEFAULT_WIDGET_HEIGHT }
+) => {
+  let maxWidth = 0;
+  let maxHeight = 0;
+  let maxWidthRecord = {} as unknown as Layout;
+  let maxHeightRecord = {} as unknown as Layout;
+
+  for (const item of unref(layoutInfo)) {
+    const { x, y, h, w } = item;
+    if (x + w > maxWidth) {
+      maxWidth = x + w;
+      maxWidthRecord = item;
+    }
+    if (y + h > maxHeight) {
+      maxHeight = y + h;
+      maxHeightRecord = item;
+    }
+  }
+
+  maxWidth = maxWidthRecord.x + maxWidthRecord.w;
+  maxHeight = maxHeightRecord.y + maxHeightRecord.h;
+
+  const array = Array.from({ length: maxHeight }, (_value) => {
+    return Array.from({ length: maxWidth });
+  });
+
+  for (const item of layoutInfo) {
+    const { x, y, w, h } = item;
+
+    for (let i = 0; i < h; i++) {
+      const rowIndex = y + i > array.length - 1 ? array.length - 1 : y + i;
+      const colEnd = x + w;
+      const row = array[rowIndex];
+      row.fill(true, x, colEnd);
+    }
+  }
+
+  const checkAreaIsAvaliable = (rowIndex: number, rowRecord: GapRecord[]) => {
+    const { height } = randomLayout;
+
+    for (const { startIndex: colStartIndex } of rowRecord) {
+      let record: GapRecord = { maxGap: 0, startIndex: null, endIndex: null };
+      const heightGapRecord: GapRecord[] = [];
+      for (let i = 0; i < height; i++) {
+        const rowStartIndex = rowIndex + i > array.length - 1 ? array.length - 1 : rowIndex + i;
+        const row = array[rowStartIndex];
+        const col = row[colStartIndex!];
+        if (col) {
+          if (record.maxGap > 0) heightGapRecord.push(record);
+          record = { maxGap: 0, startIndex: null, endIndex: null };
+        }
+        if (!col) {
+          record = {
+            maxGap: record.maxGap + 1,
+            startIndex: record.startIndex === null ? rowStartIndex : record.startIndex,
+            endIndex: rowStartIndex,
+          };
+        }
+        if (i + 1 === height) if (record.maxGap > 0) heightGapRecord.push(record);
+      }
+      const minHeight = heightGapRecord.length
+        ? Math.min(...heightGapRecord.map((item) => item.maxGap))
+        : 0;
+      if (minHeight >= height) {
+        let flag = true;
+        for (let colIndex = colStartIndex!; colIndex < record.endIndex!; colIndex++) {
+          for (let _rowIndex = rowIndex; _rowIndex < height; _rowIndex++) {
+            if (array[_rowIndex][colIndex]) {
+              flag = false;
+              break;
+            }
+          }
+        }
+        if (flag) return { y: rowIndex, x: colStartIndex!, flag: true };
+      }
+    }
+
+    return { flag: false, x: 0, y: 0 };
+  };
+
+  for (let rowIndex = 0; rowIndex < array.length; rowIndex++) {
+    const row = array[rowIndex];
+    let record: GapRecord = { maxGap: 0, startIndex: null, endIndex: null };
+    const widthGapRecord: GapRecord[] = [];
+
+    const { width } = unref(randomLayout);
+
+    for (let colIndex = 0; colIndex < DEFAULT_MAX_COL; colIndex++) {
+      const col = row[colIndex];
+      if (col) {
+        if (record.maxGap > 0) widthGapRecord.push(record);
+        record = { maxGap: 0, startIndex: null, endIndex: null };
+      }
+      if (!col) {
+        record = {
+          maxGap: record.maxGap + 1,
+          startIndex: record.startIndex === null ? colIndex : record.startIndex,
+          endIndex: colIndex,
+        };
+      }
+      if (colIndex + 1 === DEFAULT_MAX_COL) if (record.maxGap > 0) widthGapRecord.push(record);
+    }
+
+    const maxWidth = widthGapRecord.length
+      ? Math.max(...widthGapRecord.map((item) => item.maxGap))
+      : 0;
+
+    if (maxWidth >= width) {
+      const maxRecordList = widthGapRecord.filter((item) => item.maxGap >= maxWidth);
+      const { flag, x, y } = checkAreaIsAvaliable(rowIndex, maxRecordList);
+      if (flag) return { x, y, w: randomLayout.width, h: randomLayout.height };
+    }
+  }
+
+  return { x: 0, y: array.length, w: randomLayout.width, h: randomLayout.height };
+};

+import { ComputedRef, computed, onMounted, ref, unref } from 'vue';
+import { useRoute } from 'vue-router';
+import { getDataComponent, updateDataBoardLayout } from '/@/api/dataBoard';
+import { decode } from '../../board/config/config';
+import { Layout } from 'vue3-grid-layout';
+import {
+  ApiDataBoardDataType,
+  ApiDataBoardInfoType,
+  ComponentDataType,
+  ComponentLayoutType,
+} from '../types';
+import { buildUUID } from '/@/utils/uuid';
+import { PublicComponentOptions } from '../../packages/index.type';
+
+export interface WidgetDataType extends Layout, ComponentDataType, PublicComponentOptions {}
+
+export const useDataSource = (propsRef: ComputedRef<Recordable>) => {
+  const ROUTE = useRoute();
+
+  const loading = ref(false);
+
+  const rawDataSource = ref<ApiDataBoardDataType>({} as ApiDataBoardDataType);
+
+  const dataSource = ref<WidgetDataType[]>([]);
+
+  const getSharePageData = computed(() => {
+    return unref(propsRef).value!;
+  });
+
+  const getIsSharePage = computed(() => {
+    return ROUTE.matched.find((item) => item.path === '/share/:viewType/:id/:publicId');
+  });
+
+  const getBoardId = computed(() => {
+    return decode((ROUTE.params as { boardId: string }).boardId);
+  });
+
+  const getBasePageComponentData = async () => {
+    try {
+      return (await getDataComponent(unref(getBoardId))) as unknown as ApiDataBoardInfoType;
+    } catch (error) {}
+    return {} as ApiDataBoardInfoType;
+  };
+
+  const getDataBoradDetail = async () => {
+    try {
+      return unref(getIsSharePage)
+        ? (unref(getSharePageData) as ApiDataBoardInfoType)
+        : await getBasePageComponentData();
+    } catch (error) {
+      return {} as ApiDataBoardInfoType;
+    }
+  };
+
+  /**
+   * @description 获取数据源
+   */
+  const getDataSource = async () => {
+    try {
+      loading.value = true;
+      const { data } = await getDataBoradDetail();
+      rawDataSource.value = data;
+      const result: WidgetDataType[] = data.componentLayout.map((item) => {
+        const { id } = item;
+        const dataSource =
+          data.componentData.find((item) => item.id == id) || ({} as ComponentDataType);
+
+        dataSource.dataSource = dataSource.dataSource.map((item) => ({
+          ...item,
+          uuid: buildUUID(),
+        }));
+        return {
+          i: buildUUID(),
+          ...item,
+          ...dataSource,
+        } as WidgetDataType;
+      });
+      dataSource.value = result;
+      return result;
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  /**
+   * @description 获取页面中的所有组件坐标
+   */
+  const getLayoutInfo = () => {
+    return unref(dataSource).map((item) => {
+      return {
+        id: item.id,
+        h: item.h,
+        w: item.w,
+        x: item.x,
+        y: item.y,
+      } as ComponentLayoutType;
+    });
+  };
+
+  /**
+   * @description 更新坐标
+   */
+  const setLayoutInfo = async () => {
+    try {
+      await updateDataBoardLayout({
+        boardId: unref(getBoardId),
+        layout: getLayoutInfo(),
+      });
+    } catch (error) {}
+  };
+
+  onMounted(() => {
+    getDataSource();
+  });
+
+  return {
+    loading,
+    draggable: !unref(getIsSharePage),
+    resizable: !unref(getIsSharePage),
+    dataSource,
+    rawDataSource,
+    getDataSource,
+    setLayoutInfo,
+  };
+};

+import { throttle } from 'lodash-es';
+import { Ref, unref } from 'vue';
+import { WidgetDataType } from './useDataSource';
+
+export const useDragGridLayout = (
+  dataSourceRef: Ref<WidgetDataType[]>,
+  setLayoutInfo: () => Promise<void>
+) => {
+  const findUpdateItem = (i: string) => unref(dataSourceRef).find((item) => item.i === i);
+
+  const calcLayout = (i: string, newHPx: number, newWPx: number) => {
+    const record = findUpdateItem(i);
+
+    if (!record) return;
+
+    const length = record.dataSource.length || 0;
+
+    const row = Math.floor(Math.pow(length, 0.5));
+    const col = Math.floor(length / row);
+    let width = Number((100 / col).toFixed(2));
+    let height = Number((100 / row).toFixed(2));
+
+    const WHRatio = newWPx / newHPx;
+    const HWRatio = newHPx / newWPx;
+
+    if (WHRatio > 1.6) {
+      width = Number((100 / length).toFixed(2));
+      height = 100;
+    }
+
+    if (HWRatio > 1.6) {
+      height = Number((100 / length).toFixed(2));
+      width = 100;
+    }
+
+    const widgetWrapperHeader = 68;
+    // const widgetWrapperTitle = 40;
+    const widgetWrapperTitle = 0;
+    let offsetHeight = widgetWrapperHeader;
+    if (record.name) {
+      offsetHeight = offsetHeight + widgetWrapperTitle;
+    }
+
+    record.widthPx = newWPx;
+    record.heightPx = newHPx - offsetHeight;
+    record.itemWidthRatio = width;
+    record.itemHeightRatio = height;
+  };
+
+  const resized = (_i: string, _newH: number, _newW: number, _newHPx: string, _newWPx: string) => {
+    setLayoutInfo();
+  };
+
+  const resize = throttle(
+    (i: string, _newH: number, _newW: number, newHPx: number, newWPx: number) => {
+      calcLayout(i, Number(newHPx), Number(newWPx));
+    },
+    50
+  );
+
+  const moved = (_i: string, _newX: number, _newY: number) => {
+    setLayoutInfo();
+  };
+
+  const containerResized = (
+    i: string,
+    _newH: number,
+    _newW: number,
+    newHPx: string,
+    newWPx: string
+  ) => {
+    calcLayout(i, Number(newHPx), Number(newWPx));
+  };
+
+  return {
+    resize,
+    containerResized,
+    moved,
+    resized,
+  };
+};

+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+export const useShare = () => {
+  const ROUTE = useRoute();
+  const getIsSharePage = computed(() => {
+    return ROUTE.matched.find((item) => item.path === '/share/:viewType/:id/:publicId');
+  });
+
+  return { getIsSharePage };
+};

+export { default as Palette } from './index.vue';
+
+export const paletteInitSize = {
+  w: 1920,
+  h: 1080,
+};
+
+export const DEFAULT_MAX_COL = 24;
+export const DEFAULT_WIDGET_WIDTH = 6;
+export const DEFAULT_WIDGET_HEIGHT = 6;
+export const DEFAULT_MIN_HEIGHT = 5;
+export const DEFAULT_MIN_WIDTH = 3;
+export const DEFAULT_ITEM_MARIGN = 20;
+
+import { ViewTypeEnum } from '/@/views/sys/share/config/config';
+
+export enum MoreActionEvent {
+  EDIT = 'edit',
+  COPY = 'copy',
+  DELETE = 'delete',
+  SHARE = 'share',
+}
+
+export enum VisualBoardPermission {
+  UPDATE = 'api:yt:data_board:update:update',
+  DELETE = 'api:yt:data_board:delete',
+  CREATE = '',
+  DETAIL = 'api:yt:data_component:list',
+}
+
+export enum VisualComponentPermission {
+  UPDATE = 'api:yt:data_component:update:update',
+  DELETE = 'api:yt:data_component:delete',
+  COPY = 'api:yt:dataBoardDetail:copy',
+  CREATE = 'api:yt:data_component:add:post',
+}
+
+export const DATA_BOARD_SHARE_URL = (id: string, publicId: string) =>
+  `/share/${ViewTypeEnum.DATA_BOARD}/${id}/${publicId}`;
+
+export const isBataBoardSharePage = (url: string) => {
+  const reg = /^\/data\/board\/share/g;
+  return reg.test(url);
+};
+
+export const encode = (string: string) => {
+  return encodeURIComponent(string);
+};
+
+export const decode = (string: string) => {
+  return decodeURIComponent(string);
+};

+<script lang="ts" setup>
+  import { onMounted, unref } from 'vue';
+  import { ref } from 'vue';
+  import { Empty, Spin, Button } from 'ant-design-vue';
+  import { getBoundingClientRect } from '/@/utils/domUtils';
+  import { GridItem, GridLayout } from 'vue3-grid-layout';
+  import {
+    DEFAULT_MAX_COL,
+    DEFAULT_MIN_HEIGHT,
+    DEFAULT_MIN_WIDTH,
+    DEFAULT_ITEM_MARIGN,
+    VisualComponentPermission,
+  } from './index';
+  import { useDragGridLayout } from './hooks/useDragGridLayout';
+  import { WidgetHeader, WidgetWrapper } from './components/WidgetWrapper';
+  import { computed } from 'vue';
+  import { WidgetDataType, useDataSource } from './hooks/useDataSource';
+  import { WidgetDistribute } from './components/WidgetDistribute';
+  import { DataSourceBindPanel } from '../dataSourceBindPanel';
+  import { PageHeader } from './components/PagerHeader';
+  import { useShare } from './hooks/useShare';
+  import { useRole } from '/@/hooks/business/useRole';
+  import { Authority } from '/@/components/Authority';
+  import { useModal } from '/@/components/Modal';
+  import { ModalParamsType } from '/#/utils';
+  import { DataActionModeEnum } from '/@/enums/toolEnum';
+  import { HistoryTrendModal } from './components/HistoryTrendModal';
+  import { useSocket } from '../packages/hook/useSocket';
+  import { watch } from 'vue';
+
+  const props = defineProps<{
+    value?: Recordable;
+  }>();
+
+  const getProps = computed(() => props);
+
+  const containerRefEl = ref<Nullable<HTMLDivElement>>(null);
+
+  const containerRectRef = ref<DOMRect>({} as unknown as DOMRect);
+
+  const { loading, draggable, resizable, dataSource, rawDataSource, setLayoutInfo, getDataSource } =
+    useDataSource(getProps);
+
+  const { resize, resized, moved, containerResized } = useDragGridLayout(dataSource, setLayoutInfo);
+
+  const [register, { openModal }] = useModal();
+
+  const [registerTrendModal, { openModal: openTrendModal }] = useModal();
+
+  /**
+   * @description 获取画板宽高
+   */
+  onMounted(() => {
+    const rect = getBoundingClientRect(unref(containerRefEl)!);
+    if (rect) {
+      containerRectRef.value = rect as DOMRect;
+    }
+  });
+  const { getIsSharePage } = useShare();
+  const { isCustomerUser } = useRole();
+  const handleOpenCreatePanel = () => {
+    openModal(true, { mode: DataActionModeEnum.CREATE } as ModalParamsType);
+  };
+
+  const handleUpdateWidget = (data: WidgetDataType) => {
+    openModal(true, { mode: DataActionModeEnum.UPDATE, record: data } as ModalParamsType);
+  };
+
+  const handleOpenTrend = (data: WidgetDataType) => {
+    openTrendModal(true, { mode: DataActionModeEnum.READ, record: data } as ModalParamsType);
+  };
+
+  useSocket(dataSource);
+
+  watch(
+    getIsSharePage,
+    (value) => {
+      if (value) {
+        const root = document.querySelector('#app');
+        (root as HTMLDivElement).style.backgroundColor = '#F5F5F5';
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<template>
+  <section
+    ref="containerRefEl"
+    class="palette w-full h-full flex-col bg-neutral-100 flex dark:bg-dark-700 dark:text-light-50"
+  >
+    <PageHeader :widget-number="dataSource.length">
+      <Authority :value="VisualComponentPermission.CREATE">
+        <Button
+          v-if="!getIsSharePage && !isCustomerUser"
+          type="primary"
+          @click="handleOpenCreatePanel"
+        >
+          创建组件
+        </Button>
+      </Authority>
+    </PageHeader>
+
+    <Spin :spinning="loading">
+      <GridLayout
+        v-model:layout="dataSource"
+        :col-num="DEFAULT_MAX_COL"
+        :row-height="30"
+        :margin="[DEFAULT_ITEM_MARIGN, DEFAULT_ITEM_MARIGN]"
+        :is-draggable="draggable"
+        :is-resizable="resizable"
+        :vertical-compact="true"
+        :use-css-transforms="true"
+        style="width: 100%"
+      >
+        <GridItem
+          v-for="item in dataSource"
+          :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="resized"
+          @resize="resize"
+          @moved="moved"
+          @container-resized="containerResized"
+          drag-ignore-from=".no-drag"
+        >
+          <WidgetWrapper>
+            <template #header>
+              <WidgetHeader
+                :raw-data-source="rawDataSource"
+                :source-info="item"
+                @update="handleUpdateWidget"
+                @open-trend="handleOpenTrend"
+                @ok="getDataSource"
+              />
+            </template>
+            <WidgetDistribute :source-info="item" />
+          </WidgetWrapper>
+        </GridItem>
+      </GridLayout>
+      <Empty
+        v-if="!dataSource.length"
+        class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+      />
+    </Spin>
+
+    <DataSourceBindPanel @register="register" :layout="dataSource" @ok="getDataSource" />
+
+    <HistoryTrendModal @register="registerTrendModal" />
+  </section>
+</template>
+
+<style lang="less" scoped></style>

+import { PublicComponentOptions } from '../../packages/index.type';
+
+export interface ComponentDataType<T = ExtraDataSource> {
+  id: string;
+  creator: string;
+  createTime: string;
+  enabled: boolean;
+  tenantId: string;
+  dataBoardId: string;
+  frontId: string;
+  dataSource: T[];
+  name?: string;
+  remark?: string;
+}
+
+export interface DataSource {
+  deviceProfileId: string;
+  organizationId: string;
+  deviceId: string;
+  deviceType: string;
+  attribute: string;
+  deviceName: string;
+  gatewayDevice: boolean;
+  slaveDeviceId: string;
+  deviceRename: string;
+  attributeRename: string;
+  componentInfo: ComponentInfo;
+  customCommand: CustomCommand;
+}
+
+export interface ExtraDataSource extends DataSource, PublicComponentOptions {
+  uuid: string;
+}
+
+export interface ComponentInfoGradientInfoType {
+  key: string;
+  value: number;
+  color: string;
+}
+
+export interface FlowmeterConfigType {
+  backgroundColor: string;
+  waveFirst: string;
+  waveSecond: string;
+  waveThird: string;
+}
+
+export interface ComponentInfo {
+  fontColor: string;
+  unit: string;
+  icon: string;
+  iconColor: string;
+  showDeviceName: boolean;
+  gradientInfo: ComponentInfoGradientInfoType[];
+  flowmeterConfig: FlowmeterConfigType;
+}
+
+export interface CustomCommand {
+  transportType: string;
+  commandType: string;
+  command: string;
+  service: string;
+}
+
+export interface ComponentLayoutType {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  id: string;
+}
+
+export interface ApiDataBoardDataType {
+  componentData: ComponentDataType[];
+  componentLayout: ComponentLayoutType[];
+}
+
+export interface ApiDataBoardInfoType {
+  data: ApiDataBoardDataType;
+}

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

+<script lang="ts" setup>
+  import { Card } from 'ant-design-vue';
+  // :style="{ borderColor: props.controlId === props.checkedId ? '#3079FF' : '#fff' }"
+</script>
+
+<template>
+  <Card
+    hoverable
+    bordered
+    class="strage-frame border-2 widget-select !bg-light-50 dark:bg-dark-400 cursor-pointer"
+  >
+    <div class="stage-frame-container w-full h-full justify-center items-center w-60 h-50">
+      <slot></slot>
+    </div>
+    <Card.Meta>
+      <template #description>
+        <slot name="description"></slot>
+      </template>
+    </Card.Meta>
+  </Card>
+</template>
+
+<style lang="less" scoped>
+  .strage-frame {
+    @apply flex justify-center items-center flex-col box-border border-light-50 dark:border-gray-700;
+
+    box-shadow: 0 1px 10px 0 #0000001a !important;
+    width: 244px;
+    height: 244px;
+
+    :deep(.ant-card-body) {
+      @apply p-0 dark:bg-dark-900;
+    }
+
+    :deep(.ant-card-meta) {
+      @apply m-0 leading-10;
+    }
+  }
+</style>

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

+<script lang="ts" setup>
+  import { StageFrame } from './components/StageFrame';
+  import { packageList } from '../packages/package';
+  import { computed, ref } from 'vue';
+  import { Tabs } from 'ant-design-vue';
+  import {
+    ConfigType,
+    PackagesCategoryEnum,
+    PackagesCategoryNameEnum,
+  } from '../packages/index.type';
+  import { fetchViewComponent, createComponent } from '../packages';
+  import { componentMap, registerComponent } from '../packages/componentMap';
+  import { watchEffect } from 'vue';
+  import { unref } from 'vue';
+  import { watch } from 'vue';
+
+  interface PropsCheckedType {
+    componentKey: string;
+    categoryKey: string;
+  }
+
+  const props = defineProps<{
+    checked?: PropsCheckedType;
+  }>();
+
+  const emit = defineEmits<{
+    (event: 'update:checked', value: PropsCheckedType): void;
+  }>();
+
+  const activeKey = ref(PackagesCategoryEnum.TEXT);
+
+  const getCategory = computed(() => {
+    return Object.keys(packageList).map((key) => {
+      const category = packageList[key] as ConfigType[];
+      return {
+        title: PackagesCategoryNameEnum[PackagesCategoryEnum[key]],
+        key,
+        items: category,
+      };
+    });
+  });
+
+  const getBindConfig = (key: string) => {
+    const config = createComponent({ key } as ConfigType);
+    return {
+      config,
+    };
+  };
+
+  watchEffect(() => {
+    unref(getCategory).forEach((category) => {
+      category.items.forEach((item) => {
+        const { key } = item;
+        const component = fetchViewComponent({ key } as ConfigType);
+        registerComponent(key, component);
+      });
+    });
+  });
+
+  const handleSelected = (item: ConfigType) => {
+    const { key, package: packageKey } = item;
+    emit('update:checked', { categoryKey: packageKey!, componentKey: key });
+  };
+
+  watch(
+    () => props.checked?.categoryKey,
+    (value) => {
+      if (value) activeKey.value = value as PackagesCategoryEnum;
+    }
+  );
+</script>
+
+<template>
+  <section>
+    <Tabs v-model:activeKey="activeKey">
+      <Tabs.TabPane
+        v-for="item in getCategory"
+        :key="item.key"
+        :tab="item.title"
+        :forceRender="false"
+      >
+        <main class="flex min-h-64 px-2 gap-8 flex-wrap justify-start">
+          <StageFrame
+            class="mt-4"
+            v-for="temp in item.items"
+            :key="temp.key"
+            @click="handleSelected(temp)"
+            :class="temp.key === props.checked?.componentKey ? '!border-2 !border-blue-500' : ''"
+          >
+            <component :is="componentMap.get(temp.key)" v-bind="getBindConfig(temp.key)" />
+            <template #description>
+              <div class="h-10 leading-10 text-center border-t border-light-600 border-solid">
+                {{ temp.title }}
+              </div>
+            </template>
+          </StageFrame>
+        </main>
+      </Tabs.TabPane>
+    </Tabs>
+  </section>
+</template>