chore: 删除数据看板重构后无用的文件

@@ -6,8 +6,6 @@ import {
   EXCEPTION_COMPONENT,
   PAGE_NOT_FOUND_NAME,
 } from '/@/router/constant';
-import { DATA_BOARD_SHARE_URL } from '../../views/visual/board/config/config';
-
 // 404 on a page
 export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
   path: '/:path(.*)*',
@@ -77,13 +75,3 @@ export const ERROR_LOG_ROUTE: AppRouteRecordRaw = {
     },
   ],
 };
-
-export const DATA_BOARD_SHARE: AppRouteRecordRaw = {
-  path: DATA_BOARD_SHARE_URL(),
-  name: 'dataBoardSharePage',
-  component: () => import('/@/views/visual/board/detail/index.vue'),
-  meta: {
-    ignoreAuth: true,
-    title: '分享看板',
-  },
-};

 import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types';
-import { DATA_BOARD_SHARE, PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
+import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic';
 import { mainOutRoutes } from './mainOut';
 import { PageEnum } from '/@/enums/pageEnum';
 import { t } from '/@/hooks/web/useI18n';
@@ -86,6 +86,5 @@ export const basicRoutes = [
   ...mainOutRoutes,
   REDIRECT_ROUTE,
   PAGE_NOT_FOUND_ROUTE,
-  DATA_BOARD_SHARE,
   PUBLIC_PAGE_ROUTER,
 ];

@@ -161,7 +161,7 @@ const transform: AxiosTransform = {
       throw new Error(error);
     }
     checkStatus(error?.response?.status, msg, errorMessageMode);
-    return Promise.reject(response.data);
+    return Promise.reject(response?.data);
   },
 };
 

@@ -18,7 +18,7 @@
     TABLE_CHART_MODE_LIST,
     EnumTableChartMode,
   } from '/@/components/Widget';
-  import { SchemaFiled } from '/@/views/visual/board/detail/config/historyTrend.config';
+  import { SchemaFiled } from '/@/views/visual/palette/components/HistoryTrendModal/config';
 
   interface DeviceDetail {
     tbDeviceId: string;

@@ -7,8 +7,8 @@ import { getDeviceAttributes } from '/@/api/dataBoard';
 import { DeviceAttributeRecord } from '/@/api/dataBoard/model';
 import { dateUtil } from '/@/utils/dateUtil';
 import { isArray } from '/@/utils/is';
-import { QueryWay, SchemaFiled } from '/@/views/visual/board/detail/config/historyTrend.config';
 import { DEFAULT_DATE_FORMAT } from '/@/views/visual/board/detail/config/util';
+import { QueryWay, SchemaFiled } from '/@/views/visual/palette/components/HistoryTrendModal/config';
 
 interface DeviceOption {
   deviceProfileId: string;

-<script lang="ts">
-  export default {
-    components: { Spin },
-    inheritAttrs: false,
-  };
-</script>
-<script lang="ts" setup>
-  import { Spin } from 'ant-design-vue';
-  import { RadioRecord } from '../../detail/config/util';
-  import { ControlComponentDefaultConfig, ControlComponentValue } from './control.config';
-  import { useSendCommand } from './useSendCommand';
-  import { ref } from 'vue';
-
-  interface VisualComponentProps<Layout = Recordable, Value = ControlComponentValue> {
-    value?: Value;
-    layout?: Layout;
-    radio?: RadioRecord;
-    random?: boolean;
-    add?: (key: string, method: Fn) => void;
-    update?: () => void;
-    remove?: (key: string) => void;
-  }
-
-  const props = defineProps<VisualComponentProps>();
-
-  const emit = defineEmits(['update:value', 'change']);
-
-  const { sendCommand } = useSendCommand();
-
-  const loading = ref(false);
-  const handleChange = async (event: Event) => {
-    const _value = (event.target as HTMLInputElement).checked;
-    if (props.value) {
-      loading.value = true;
-      const flag = await sendCommand(props.value, _value);
-      loading.value = false;
-      if (!flag) {
-        (event.target as HTMLInputElement).checked = !_value;
-        return;
-      }
-    }
-    emit('update:value', _value);
-    emit('change', _value);
-  };
-</script>
-
-<template>
-  <div class="flex flex-col justify-center">
-    <Spin :spinning="loading">
-      <label class="sliding-switch">
-        <input
-          :value="!!Number(props.value?.value)"
-          type="checkbox"
-          :checked="!!Number(props.value?.value)"
-          @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="{ color: props?.value?.fontColor || ControlComponentDefaultConfig.fontColor }"
-      >
-        {{ props.value?.attributeRename || props.value?.attribute }}</div
-      >
-    </Spin>
-  </div>
-</template>
-
-<style scoped lang="less">
-  .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>

-<script lang="ts">
-  export default {
-    inheritAttrs: false,
-  };
-</script>
-<script lang="ts" setup>
-  import { Switch } from 'ant-design-vue';
-  import { computed, ref, watchEffect } from 'vue';
-  import { DEFAULT_RADIO_RECORD, fontSize, RadioRecord } from '../../detail/config/util';
-  import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
-  import {
-    ControlComponentDefaultConfig,
-    ControlComponentValue,
-    ControlComponentLayout,
-  } from './control.config';
-  import { useSendCommand } from './useSendCommand';
-  const props = withDefaults(
-    defineProps<{
-      layout?: ControlComponentLayout;
-      value?: ControlComponentValue;
-      radio?: RadioRecord;
-    }>(),
-    {
-      value: () => ControlComponentDefaultConfig,
-    }
-  );
-  const getRadio = computed(() => {
-    return props.radio || DEFAULT_RADIO_RECORD;
-  });
-
-  const checked = ref(!!Number(props.value.value));
-
-  const { sendCommand } = useSendCommand();
-  const loading = ref(false);
-  const handleChange = async (value: boolean) => {
-    loading.value = true;
-    const flag = await sendCommand(props.value, value);
-    loading.value = false;
-    if (!flag) {
-      checked.value = !value;
-    }
-  };
-
-  watchEffect(() => {
-    checked.value = !!Number(props.value.value);
-  });
-</script>
-
-<template>
-  <div class="flex items-center w-full h-full p-4">
-    <div class="flex-auto flex truncate">
-      <SvgIcon
-        :name="props.value?.icon! || ControlComponentDefaultConfig.icon!"
-        prefix="iconfont"
-        :style="{
-          color: props.value?.iconColor || ControlComponentDefaultConfig.iconColor,
-          width: fontSize({ radioRecord: getRadio, basic: 30, min: 16 }),
-          height: fontSize({ radioRecord: getRadio, basic: 30, min: 16 }),
-        }"
-      />
-      <span
-        class="flex-auto mx-4 flex items-center truncate inline-block text-gray-700"
-        :style="{ color: props.value.fontColor || ControlComponentDefaultConfig.fontColor }"
-      >
-        {{ props.value.attributeRename || props.value.attribute }}
-      </span>
-    </div>
-    <Switch v-model:checked="checked" :loading="loading" @change="handleChange" />
-  </div>
-</template>

-<script lang="ts">
-  export default {
-    components: { Spin },
-    inheritAttrs: false,
-  };
-</script>
-<script lang="ts" setup>
-  import { computed } from '@vue/reactivity';
-  import { DEFAULT_RADIO_RECORD, fontSize, RadioRecord } from '../../detail/config/util';
-  import { ControlComponentDefaultConfig, ControlComponentValue } from './control.config';
-  import { useSendCommand } from './useSendCommand';
-  import { ref } from 'vue';
-  import { Spin } from 'ant-design-vue';
-
-  const props = defineProps<{
-    value?: ControlComponentValue;
-    layout?: Recordable;
-    radio?: RadioRecord;
-  }>();
-
-  const emit = defineEmits(['update:value', 'change']);
-
-  const { sendCommand } = useSendCommand();
-  const loading = ref(false);
-  const handleChange = async (event: Event) => {
-    const _value = (event.target as HTMLInputElement).checked;
-    if (props.value) {
-      loading.value = true;
-      const flag = await sendCommand(props.value, _value);
-      loading.value = false;
-      if (!flag) {
-        (event.target as HTMLInputElement).checked = !_value;
-        return;
-      }
-    }
-    emit('update:value', _value);
-    emit('change', _value);
-  };
-
-  const getRadio = computed(() => {
-    return props.radio! || DEFAULT_RADIO_RECORD;
-  });
-</script>
-
-<template>
-  <div class="flex flex-col">
-    <Spin :spinning="loading">
-      <div
-        class="toggle-switch"
-        :style="{
-          width: fontSize({ radioRecord: getRadio, basic: 75, max: 75, min: 60 }),
-          height: fontSize({ radioRecord: getRadio, basic: 97.5, max: 97.5, min: 80 }),
-        }"
-      >
-        <label class="switch">
-          <input
-            :value="!!Number(props.value?.value)"
-            type="checkbox"
-            :checked="!!Number(props.value?.value)"
-            @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-700"
-        :style="{ color: props?.value?.fontColor || ControlComponentDefaultConfig.fontColor }"
-      >
-        {{ props.value?.attributeRename || props.value?.attribute }}</div
-      >
-    </Spin>
-  </div>
-</template>
-
-<style scoped>
-  .toggle-switch {
-    /* flex: 1 1 auto; */
-    max-width: 75px;
-
-    /* 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 { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
-import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
-
-export interface ControlComponentLayout {
-  [key: string]: any;
-}
-
-export interface ControlComponentValue {
-  value?: boolean;
-  attribute?: string;
-  attributeRename?: string;
-  icon?: string;
-  iconColor?: string;
-  deviceId?: string;
-  fontColor?: string;
-  slaveDeviceId?: string;
-  deviceProfileId?: string;
-  deviceType?: DeviceTypeEnum;
-  organizationId?: string;
-
-  dataSource?: DataSource;
-  [key: string]: any;
-}
-
-export const ControlComponentDefaultConfig: ControlComponentValue = {
-  icon: 'shuiwen',
-  iconColor: '#367BFF',
-  fontColor: '#000',
-};
-
-export const transformControlConfig = (
-  _ComponentConfig: Recordable,
-  _record: DataComponentRecord,
-  dataSourceRecord: DataSource
-) => {
-  return {
-    value: {
-      ...dataSourceRecord.componentInfo,
-      attribute: dataSourceRecord.attribute,
-      attributeRename: dataSourceRecord.attributeRename,
-      deviceProfileId: dataSourceRecord.deviceProfileId,
-      deviceId: dataSourceRecord.deviceId,
-      deviceType: dataSourceRecord.deviceType,
-      slaveDeviceId: dataSourceRecord.slaveDeviceId,
-      organizationId: dataSourceRecord.organizationId,
-      dataSource: dataSourceRecord,
-    } as ControlComponentValue,
-  };
-};

-import { ControlComponentValue } from './control.config';
-import { sendCommandOneway } from '/@/api/dataBoard';
-import { useMessage } from '/@/hooks/web/useMessage';
-import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
-
-const { createMessage } = useMessage();
-export function useSendCommand() {
-  const error = () => {
-    createMessage.error('下发指令失败');
-    return false;
-  };
-  const sendCommand = async (record: ControlComponentValue, value: any) => {
-    if (!record) return error();
-    const { attribute } = record;
-    const { dataSource } = record;
-    const { customCommand } = dataSource || {};
-
-    const { deviceId } = record;
-    if (!deviceId) return error();
-    try {
-      let params: string | Recordable = {
-        [attribute!]: Number(value),
-      };
-
-      // 如果是TCP设备从物模型中获取下发命令(TCP网关子设备无物模型服务与事件)
-      if (customCommand?.transportType === TransportTypeEnum.TCP) {
-        params = customCommand.command!;
-      }
-
-      // 控制按钮下发命令为0 或 1
-      await sendCommandOneway({
-        deviceId,
-        value: {
-          params: params,
-          persistent: true,
-          additionalInfo: {
-            cmdType: 'API',
-          },
-          method: 'methodThingskit',
-        },
-      });
-      createMessage.success('命令下发成功');
-      return true;
-    } catch (msg) {
-      return error();
-    }
-  };
-  return {
-    sendCommand,
-  };
-}

-<script lang="ts">
-  export default {
-    inheritAttrs: false,
-  };
-</script>
-<script lang="ts" setup>
-  import type { ECharts, EChartsOption } from 'echarts';
-  import { watch } from 'vue';
-  import { nextTick, onMounted, onUnmounted, ref, unref, computed } from 'vue';
-  import { init } from 'echarts';
-  import {
-    DashboardComponentLayout,
-    DashBoardValue,
-    instrumentComponent1,
-    update_instrument_1_font,
-    update_instrument_2_font,
-    update_instrument_1_value,
-    update_instrument_2_value,
-  } from './dashBoardComponent.config';
-  import {
-    DEFAULT_RADIO_RECORD,
-    RadioRecord,
-    fontSize,
-    getUpdateTime,
-  } from '../../detail/config/util';
-  import { Tooltip } from 'ant-design-vue';
-  import { useThrottleFn } from '@vueuse/shared';
-  import { buildUUID } from '/@/utils/uuid';
-  import { FrontComponent } from '../../const/const';
-
-  const props = withDefaults(
-    defineProps<{
-      add?: Function;
-      layout?: DashboardComponentLayout;
-      value?: DashBoardValue;
-      radio?: RadioRecord;
-      random?: boolean;
-    }>(),
-    {
-      layout: () => ({} as unknown as DashboardComponentLayout),
-      value: () => ({ id: buildUUID() }),
-      radio: () => DEFAULT_RADIO_RECORD,
-      random: true,
-    }
-  );
-
-  const getControlsWidgetId = () => `widget-chart-${props.value.id}`;
-
-  const chartRef = ref<Nullable<ECharts>>(null);
-
-  function initChart() {
-    const chartDom = document.getElementById(getControlsWidgetId())!;
-    chartRef.value = init(chartDom);
-    const option: EChartsOption = props.layout.chartOption || instrumentComponent1();
-
-    nextTick(() => {
-      option && unref(chartRef)?.setOption(option);
-    });
-  }
-
-  const getRadio = computed(() => {
-    return props.radio;
-  });
-
-  const getChardRadio = computed(() => {
-    const realWidth = unref(chartRef)?.getWidth();
-    const realHeight = unref(chartRef)?.getHeight();
-    const radioRecord = props.radio;
-    return {
-      ...radioRecord,
-      height: realHeight || radioRecord.height,
-      width: realWidth || radioRecord.height,
-    };
-  });
-
-  const beforeUpdateFn = (componentType: FrontComponent) => {
-    if (componentType === 'instrument-component-1') return update_instrument_1_font;
-    if (componentType === 'instrument-component-2') return update_instrument_2_font;
-    return (_radio: RadioRecord) => {};
-  };
-
-  function update() {
-    const option = beforeUpdateFn(props.layout.componentType);
-    unref(chartRef)?.setOption((option(unref(getChardRadio)) as unknown as EChartsOption) || {});
-    unref(chartRef)?.resize();
-  }
-
-  const getUpdateValueFn = (componentType: FrontComponent) => {
-    if (componentType === 'instrument-component-1') return update_instrument_1_value;
-    if (componentType === 'instrument-component-2') return update_instrument_2_value;
-    return (_radio: DashBoardValue) => {};
-  };
-
-  const updateChartValue = useThrottleFn(() => {
-    const updateFn = getUpdateValueFn(props.layout.componentType);
-    unref(chartRef)?.setOption((updateFn(props.value) as unknown as EChartsOption) || {});
-  }, 500);
-
-  watch(() => props.value, updateChartValue);
-
-  const updateChartFont = useThrottleFn(() => {
-    const option = beforeUpdateFn(props.layout.componentType);
-    setTimeout(() => {
-      unref(chartRef)?.setOption((option(unref(getChardRadio)) as unknown as EChartsOption) || {});
-    });
-  }, 500);
-
-  watch(() => props.radio, updateChartFont);
-
-  const updateChartType = useThrottleFn(() => {
-    unref(chartRef)?.clear();
-    unref(chartRef)?.setOption(props?.layout?.chartOption || {});
-  }, 500);
-
-  watch(() => props.layout.componentType, updateChartType);
-
-  let timeout: Nullable<number> = null;
-
-  function handleRandomValue() {
-    const newValue = Math.floor(Math.random() * 100);
-    const updateFn = getUpdateValueFn(props.layout.componentType);
-    unref(chartRef)?.setOption(
-      (updateFn({ ...props.value, value: newValue }) as unknown as EChartsOption) || {}
-    );
-  }
-
-  onMounted(() => {
-    initChart();
-    props.add && props.add(props.value.id, update);
-    if (props.random) timeout = setInterval(handleRandomValue, 2000) as unknown as number;
-  });
-
-  onUnmounted(() => {
-    unref(chartRef)?.clear();
-    clearInterval(timeout as number);
-    timeout = null;
-  });
-
-  defineExpose({ update });
-</script>
-
-<template>
-  <div class="flex flex-col w-full h-full min-w-3 min-h-3">
-    <div :id="getControlsWidgetId()" class="widget-charts w-full h-full flex-auto"></div>
-    <div>
-      <div
-        class="text-center"
-        :style="{
-          fontSize: fontSize({ radioRecord: getRadio, basic: 16, max: 18 }),
-          color: '#666',
-        }"
-      >
-        {{ props.value.name }}
-      </div>
-
-      <div
-        class="text-xs text-center p-5"
-        :style="{
-          fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }),
-          color: '#999',
-        }"
-      >
-        <Tooltip placement="top" :title="getUpdateTime(props.value?.updateTime)">
-          <div class="truncate">
-            <span class="mr-2">更新时间:</span>
-            <span>
-              {{ getUpdateTime(props.value?.updateTime) }}
-            </span>
-          </div>
-        </Tooltip>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-  .widget-charts > div {
-    width: 100%;
-    height: 100%;
-  }
-</style>

-<script lang="ts">
-  export default {
-    inheritAttrs: false,
-  };
-</script>
-<script lang="ts" setup>
-  import { computed, onMounted, onUnmounted, ref, unref } from 'vue';
-  import { Space, Tooltip } from 'ant-design-vue';
-  import {
-    DigitalComponentDefaultConfig,
-    DigitalDashBoardLayout,
-    DigitalDashBoardValue,
-  } from './digitalDashBoard.config';
-  import {
-    fontSize,
-    RadioRecord,
-    getUpdateTime,
-    DEFAULT_RADIO_RECORD,
-    DEFAULT_ANIMATION_INTERVAL,
-  } from '../../detail/config/util';
-  import { isNaN } from 'lodash';
-
-  const props = withDefaults(
-    defineProps<{
-      layout?: DigitalDashBoardLayout;
-      value?: DigitalDashBoardValue;
-      radio?: RadioRecord;
-      random?: boolean;
-    }>(),
-    {
-      value: () => ({}),
-      layout: () => ({ max: 5, keepNumber: 2 }),
-    }
-  );
-
-  const changeValue = ref(0);
-
-  const getPropsValue = computed(() => {
-    return { value: unref(changeValue), ...DigitalComponentDefaultConfig, ...props.value };
-  });
-
-  const integerPart = computed(() => {
-    let { value = 0 } = unref(getPropsValue);
-    const { max = 5 } = props.layout;
-    if (isNaN(value)) value = 0;
-    let _value = Number(value).toFixed(2).split('.')[0];
-    if (_value.length < max) _value = _value.padStart(5, '0');
-    if (_value.length > max) _value = ''.padStart(5, '9');
-
-    return _value;
-  });
-
-  const decimalPart = computed(() => {
-    let { value = 0 } = unref(getPropsValue);
-    const { keepNumber = 2 } = props.layout;
-    if (isNaN(value)) value = 0;
-    let _value = Number(value)?.toFixed(2).split('.')[1];
-    if (_value.length < keepNumber) _value = _value.padStart(5, '0');
-
-    if (_value.length > keepNumber) _value = ''.padStart(5, '0');
-
-    return _value;
-  });
-
-  const getRadio = computed(() => {
-    return props.radio || DEFAULT_RADIO_RECORD;
-  });
-
-  let timeout: Nullable<number> = null;
-
-  const handleRandom = () => {
-    const newValue = Math.floor(Math.random() * 100);
-    changeValue.value = newValue;
-  };
-
-  const getScale = computed(() => {
-    const { width } = props.radio || DEFAULT_RADIO_RECORD;
-    return width / 360 > 1 ? 1 : width / 360;
-  });
-
-  onMounted(() => {
-    if (props.random)
-      timeout = setInterval(handleRandom, DEFAULT_ANIMATION_INTERVAL) as unknown as number;
-  });
-
-  onUnmounted(() => {
-    clearInterval(timeout as number);
-    timeout = null;
-  });
-</script>
-
-<template>
-  <section class="w-full h-full">
-    <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" :style="{ transform: `scale(${getScale})` }">
-          <Space
-            justify="end"
-            class="justify-end"
-            :size="4"
-            :style="{
-              backgroundColor: '#585357',
-              padding: fontSize({ radioRecord: getRadio, basic: 10 }),
-            }"
-          >
-            <div
-              v-for="number in integerPart"
-              :key="number"
-              class="digital-wrapper__int"
-              :style="{
-                color: getPropsValue.fontColor,
-                fontSize: fontSize({ radioRecord: getRadio, basic: 20, max: 20 }),
-                padding: fontSize({ radioRecord: getRadio, basic: 5 }),
-              }"
-            >
-              <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: fontSize({ radioRecord: getRadio, basic: 10 }),
-            }"
-          >
-            <div
-              v-for="number in decimalPart"
-              :key="number"
-              class="digital-wrapper__float"
-              :style="{
-                color: getPropsValue.fontColor,
-                fontSize: fontSize({ radioRecord: getRadio, basic: 20, max: 20 }),
-                padding: fontSize({ radioRecord: getRadio, basic: 5 }),
-              }"
-            >
-              <div class="digital-text__float p-1 text-light-50">
-                {{ number }}
-              </div>
-            </div>
-          </Space>
-          <div
-            class="px-1 font-bold"
-            :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 18, max: 18 }) }"
-          >
-            {{ getPropsValue.unit }}
-          </div>
-        </div>
-      </div>
-
-      <div
-        class="text-center truncate"
-        :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 18 }) }"
-      >
-        <span>{{ props.value.name || '电表' }}</span>
-      </div>
-
-      <div
-        class="text-center text-xs p-5"
-        :style="{
-          fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 16 }),
-          color: '#999',
-        }"
-      >
-        <Tooltip placement="top" :title="getUpdateTime(props.value?.updateTime)">
-          <div class="truncate">
-            <span class="mr-1">更新时间:</span>
-            <span>
-              {{ getUpdateTime(props.value?.updateTime) }}
-            </span>
-          </div>
-        </Tooltip>
-      </div>
-    </div>
-    <div></div>
-  </section>
-</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 { EChartsOption } from 'echarts';
-import { FrontComponent, Gradient, GradientColor } from '../../const/const';
-import { fontSize, RadioRecord } from '../../detail/config/util';
-import {
-  ComponentInfo,
-  DataComponentRecord,
-  DataSource,
-  GradientInfo,
-} from '/@/api/dataBoard/model';
-import { isArray } from '/@/utils/is';
-import { buildUUID } from '/@/utils/uuid';
-
-export interface GradientInfoRecord {
-  key: Gradient;
-  value: number;
-  color: string;
-}
-
-export interface DashBoardValue {
-  id: string;
-  unit?: string;
-  name?: string;
-  updateTime?: string;
-  value?: number;
-  fontColor?: string;
-  gradientInfo?: GradientInfoRecord[];
-}
-
-export interface DashboardComponentLayout {
-  chartOption: EChartsOption;
-  componentType: FrontComponent;
-}
-
-export const instrumentComponent1 = (params?: Partial<ComponentInfo>): EChartsOption => {
-  const { value = 10, unit = '°C' } = params || {};
-  return {
-    series: [
-      {
-        type: 'gauge',
-        radius: '50%',
-        center: ['50%', '60%'],
-        startAngle: 200,
-        endAngle: -20,
-        min: 0,
-        max: 100,
-        splitNumber: 10,
-        itemStyle: {
-          color: '#FFAB91',
-        },
-        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: params?.fontColor || 'inherit',
-        },
-        data: [
-          {
-            value: value as number,
-          },
-        ],
-      },
-      {
-        type: 'gauge',
-        radius: '50%',
-        center: ['50%', '60%'],
-        startAngle: 200,
-        endAngle: -20,
-        min: 0,
-        max: 100,
-        itemStyle: {
-          color: '#FD7347',
-        },
-        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: value as number,
-          },
-        ],
-      },
-    ],
-  };
-};
-
-export const instrumentComponent2 = (params?: Partial<ComponentInfo>): EChartsOption => {
-  const { gradientInfo = [], value = 0, unit = 'km/h' } = params || {};
-  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 || 70;
-  max = Number(1 + Array(String(max).length).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: params?.fontColor || 'inherit',
-          offsetCenter: [0, '70%'],
-          fontSize: 14,
-        },
-        data: [
-          {
-            value: value as number,
-          },
-        ],
-      },
-    ],
-  };
-};
-
-export const getGradient = (key: Gradient, record: GradientInfo[] = []) => {
-  if (!isArray(record)) return;
-  return record.find((item) => item.key === key);
-};
-
-export const update_instrument_1_font = (radioRecord: RadioRecord) => {
-  const basicFontSize = fontSize({ radioRecord, basic: 16, max: 16, min: 12 });
-  return {
-    series: [
-      {
-        axisLabel: {
-          fontSize: basicFontSize,
-        },
-        detail: {
-          fontSize: basicFontSize,
-        },
-      },
-    ],
-  } as EChartsOption;
-};
-
-export const update_instrument_2_font = (radioRecord: RadioRecord) => {
-  const axisLabelFontSize = fontSize({ radioRecord, basic: 10, max: 16 });
-  const detailFontSize = fontSize({ radioRecord, basic: 16, max: 16, min: 10 });
-  return {
-    series: [
-      {
-        axisLabel: {
-          fontSize: axisLabelFontSize,
-        },
-        detail: {
-          fontSize: detailFontSize,
-        },
-      },
-    ],
-  } as EChartsOption;
-};
-
-const handleValue = (value: any) => {
-  return isNaN(value) ? 0 : Number(value).toFixed(2);
-};
-
-export const update_instrument_1_value = (params: DashBoardValue) => {
-  const { value = 0, unit = '°C', fontColor } = params;
-  let max =
-    value > 1
-      ? Number(
-          1 +
-            Array(String(Math.floor(value)).length)
-              .fill(0)
-              .join('')
-        ) / 2
-      : 100 / 2;
-  max = value > max ? max * 2 : max;
-
-  return {
-    series: [
-      {
-        max: max < 100 ? 100 : max,
-        data: [{ value: handleValue(value) }],
-        detail: {
-          formatter: `{value} ${unit ?? ''}`,
-          color: fontColor || 'inherit',
-        },
-      },
-      {
-        max: max < 100 ? 100 : max,
-        data: [{ value: handleValue(value) }],
-      },
-    ],
-  } as EChartsOption;
-};
-
-export const update_instrument_2_value = (params: DashBoardValue) => {
-  const { value = 0, unit = 'km/h', fontColor, gradientInfo } = params;
-  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 || 70;
-  max = Number(
-    1 +
-      Array(String(Math.floor(max)).length)
-        .fill(0)
-        .join('')
-  );
-
-  max =
-    value > 1
-      ? Number(
-          1 +
-            Array(String(Math.floor(value)).length)
-              .fill(0)
-              .join('')
-        ) / 2
-      : 100 / 2;
-  max = value > max ? max * 2 : max;
-
-  const firstGradient = firstRecord?.value ? firstRecord.value / max : 0.3;
-  const secondGradient = secondRecord?.value ? secondRecord.value / max : 0.7;
-  return {
-    series: [
-      {
-        max: max < 100 ? 100 : max,
-        data: [{ value: handleValue(value) }],
-        detail: {
-          formatter: `{value} ${unit ?? ''}`,
-          color: fontColor || 'inherit',
-        },
-        axisLine: {
-          lineStyle: {
-            width: 20,
-            color: [
-              [firstGradient, firstRecord?.color || GradientColor.FIRST],
-              [secondGradient, secondRecord?.color || GradientColor.SECOND],
-              [1, thirdRecord?.color || GradientColor.THIRD],
-            ],
-          },
-        },
-      },
-    ],
-  } as EChartsOption;
-};
-
-function setGradientInfo(dataSource: DataSource) {
-  const componentInfo = dataSource.componentInfo;
-  return instrumentComponent2(componentInfo);
-}
-
-export const Instrument1DefaultConfig: Partial<ComponentInfo> = {
-  fontColor: '#FD7347',
-};
-
-export const Instrument2DefaultConfig: Partial<ComponentInfo> = {
-  fontColor: GradientColor.FIRST,
-  unit: 'km/h',
-  gradientInfo: [
-    { key: Gradient.FIRST, value: 30, color: GradientColor.FIRST },
-    { key: Gradient.SECOND, value: 70, color: GradientColor.SECOND },
-    { key: Gradient.THIRD, value: 80, color: GradientColor.THIRD },
-  ],
-};
-
-export const transformDashboardComponentConfig = (
-  config: DashboardComponentLayout,
-  _record: DataComponentRecord,
-  dataSourceRecord: DataSource
-) => {
-  let chartOption = config.chartOption;
-  if (config.componentType === 'instrument-component-2') {
-    chartOption = setGradientInfo(dataSourceRecord);
-  }
-  if (config.componentType === 'instrument-component-1') {
-    const componentInfo = dataSourceRecord.componentInfo;
-    chartOption = instrumentComponent1({
-      unit: componentInfo.unit,
-      value: 0,
-      fontColor: componentInfo.fontColor,
-    });
-  }
-  return {
-    layout: {
-      chartOption: chartOption,
-      componentType: config.componentType,
-    } as DashboardComponentLayout,
-    value: {
-      id: buildUUID(),
-      name: dataSourceRecord.attributeRename || dataSourceRecord.attribute,
-      value: dataSourceRecord.componentInfo.value,
-      unit: dataSourceRecord.componentInfo.unit,
-      updateTime: dataSourceRecord.componentInfo.updateTime,
-      fontColor: dataSourceRecord.componentInfo.fontColor,
-      gradientInfo: dataSourceRecord.componentInfo.gradientInfo,
-    },
-  };
-};

-import { ComponentInfo } from '/@/api/dataBoard/model';
-
-export interface DigitalDashBoardLayout {
-  max: number;
-  keepNumber: number;
-}
-
-export interface DigitalDashBoardValue {
-  unit?: string;
-  name?: string;
-  updateTime?: string;
-  value?: number;
-  fontColor?: string;
-}
-
-export const DigitalComponentDefaultConfig: Partial<ComponentInfo> = {
-  fontColor: '#000',
-  unit: 'kw/h',
-};

-import { EChartsOption } from 'echarts';
-import { InstrumentComponentType } from './dashBoardComponent.config';
-
-export interface DashboardComponentLayout {
-  chartOption: EChartsOption;
-  componentType: InstrumentComponentType;
-}

-<script lang="ts" setup>
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import {
-    formSchema,
-    getHistorySearchParams,
-    SchemaFiled,
-  } from '../../../board/detail/config/historyTrend.config';
-  import { HistoryModalOkEmitParams, HistoryModalParams } from './type';
-  import { DataSource } from '/@/api/dataBoard/model';
-  import { ref } from 'vue';
-  import { getAllDeviceByOrg } from '/@/api/dataBoard';
-  import { getDeviceHistoryInfo } from '/@/api/alarm/position';
-
-  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 (params: HistoryModalParams) => {
-    try {
-      const { dataSource = [] } = params;
-      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 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);
-          list.push(record as any);
-        }
-        if (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>

-<script lang="ts">
-  export default {
-    components: { Spin },
-    inheritAttrs: false,
-  };
-</script>
-<script lang="ts" setup>
-  import { computed, onMounted, reactive, ref, unref, watchEffect } from 'vue';
-  import { RadioRecord } from '../../detail/config/util';
-  import { MapComponentLayout, MapComponentValue } from './map.config';
-  import {
-    ClockCircleOutlined,
-    PlayCircleOutlined,
-    PauseCircleOutlined,
-  } from '@ant-design/icons-vue';
-  import { Button, Spin, Tooltip } from 'ant-design-vue';
-  import { FrontComponent } from '../../const/const';
-  import { buildUUID } from '/@/utils/uuid';
-  import { useModal } from '/@/components/Modal';
-  import HistoryDataModel from './HistoryDataModel.vue';
-  import { HistoryModalOkEmitParams, HistoryModalParams } from './type';
-  import { formatToDateTime } from '/@/utils/dateUtil';
-  import { isEqual } from 'lodash-es';
-  import { useAsyncQueue } from '/@/views/device/localtion/useAsyncQueue';
-  import { useMessage } from '/@/hooks/web/useMessage';
-
-  // useVisualBoardContext();
-  type TrackRecord = Record<'lng' | 'lat' | 'ts', number>;
-
-  const startMethodName = `trackPlayMethod_${buildUUID()}`;
-
-  const wrapId = `bai-map-${buildUUID()}`;
-
-  enum TrackAnimationStatus {
-    PLAY = 1,
-    DONE = 2,
-    PAUSE = 3,
-  }
-
-  const props = withDefaults(
-    defineProps<{
-      value?: MapComponentValue;
-      layout?: MapComponentLayout;
-      radio?: RadioRecord;
-      random?: boolean;
-    }>(),
-    {
-      random: true,
-    }
-  );
-
-  const wrapRef = ref<HTMLDivElement | null>(null);
-  const trackAni = ref<Nullable<any>>(null);
-  let mapInstance: Nullable<Recordable> = null;
-
-  const trackList = ref<TrackRecord[]>([]);
-
-  watchEffect(() => {
-    if (
-      props.layout?.componentType === FrontComponent.MAP_COMPONENT_TRACK_REAL &&
-      props.value?.track?.length
-    ) {
-      const lng = props.value.track.at(0)!;
-      const lat = props.value.track.at(1)!;
-      const record = {
-        lng: lng.value,
-        lat: lat.value,
-        ts: lng.ts,
-      };
-      if (unref(trackList).length && isEqual(unref(trackList).at(-1), record)) return;
-      marketPoint({ lat: lat.value, lng: lng.value });
-      trackList.value.push(record);
-
-      randomAnimation(unref(trackList));
-      // marketPoint(record);
-    }
-  });
-
-  function marketPoint(params: Record<'lng' | 'lat', number>) {
-    const { lng, lat } = params;
-    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);
-  }
-
-  const prepare = ref(false);
-  async function initMap() {
-    const wrapEl = unref(wrapRef);
-    if (!wrapEl) return;
-    const BMapGL = (window as any).BMapGL;
-    mapInstance = new BMapGL.Map(wrapId);
-    const point = new BMapGL.Point(104.09457, 30.53189);
-    mapInstance!.centerAndZoom(point, 15);
-    mapInstance!.enableScrollWheelZoom(true);
-    props.layout?.componentType === FrontComponent.MAP_COMPONENT_TRACK_HISTORY &&
-      props.random &&
-      randomAnimation();
-  }
-
-  const randomAnimation = (path?: Record<'lng' | 'lat', number>[], clearOverlays = true) => {
-    path = 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 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;
-
-    marketPoint({ lat: path.at(0)?.lat, lng: path.at(0)?.lng });
-    const dynamicPlayMethod = {
-      [startMethodName]() {
-        const duration = 5000;
-        const delay = 300;
-        trackAni.value = new BMapGLLib.TrackAnimation(unref(mapInstance), pl, {
-          overallView: true,
-          tilt: 30,
-          duration,
-          delay,
-        });
-        trackAni.value!.start();
-        setTimeout(() => {
-          marketPoint({ lat: path.at(-1)?.lat, lng: path.at(-1)?.lng });
-        }, duration + delay);
-      },
-    };
-
-    (window as any)[startMethodName] = dynamicPlayMethod[startMethodName];
-
-    setTimeout(`${startMethodName}()`);
-  };
-
-  const { setTask, executeFlag } = useAsyncQueue();
-  onMounted(() => {
-    let interval: Nullable<NodeJS.Timer> = setInterval(() => {
-      if ((window as any).BMapGL) {
-        prepare.value = true;
-        executeFlag.value = true;
-        clearInterval(interval!);
-        interval = null;
-      }
-    }, 1000);
-    if (!(window as any).BMapGL) {
-      setTask(initMap);
-      return;
-    }
-    initMap();
-  });
-
-  const timeRange = reactive<Record<'start' | 'end', Nullable<number>>>({
-    start: null,
-    end: null,
-  });
-  const getTimeRange = computed(() => {
-    const { start, end } = timeRange;
-    if (!start || !end) return `- 请选择`;
-    return ` - 从 ${formatToDateTime(start, 'YYYY-MM-DD HH:mm:ss')} 到 ${formatToDateTime(
-      end,
-      'YYYY-MM-DD HH:mm:ss'
-    )}`;
-  });
-
-  const [register, { openModal }] = useModal();
-
-  const handleTrackSwitch = () => {
-    openModal(true, {
-      dataSource: props.value?.dataSource || [],
-    } as HistoryModalParams);
-  };
-
-  const getTrackPlayStatus = computed(() => {
-    return (trackAni.value || {})._status;
-  });
-
-  const { createMessage } = useMessage();
-  const handlePlay = () => {
-    const { start, end } = timeRange;
-
-    if (!props.random && (!start || !end)) {
-      createMessage.warning('请先选择时间范围');
-    }
-    if (unref(getTrackPlayStatus) === TrackAnimationStatus.DONE) unref(trackAni).start();
-    else if (unref(getTrackPlayStatus) === TrackAnimationStatus.PLAY) unref(trackAni).pause();
-    else if (unref(getTrackPlayStatus) === TrackAnimationStatus.PAUSE) unref(trackAni).continue();
-  };
-
-  const handleRenderHistroyData = (params: HistoryModalOkEmitParams) => {
-    const { track, value } = params;
-    track.length && randomAnimation(track as unknown as Record<'lng' | 'lat', number>[]);
-    timeRange.start = value.startTs as number;
-    timeRange.end = value.endTs as number;
-  };
-</script>
-
-<template>
-  <div class="w-full h-full flex justify-center items-center flex-col p-2">
-    <div
-      class="w-full flex justify-end"
-      v-if="props.layout?.componentType === FrontComponent.MAP_COMPONENT_TRACK_HISTORY"
-    >
-      <Button
-        v-if="!random"
-        type="text"
-        class="!px-2 flex-auto !text-left truncate"
-        @click="handleTrackSwitch"
-      >
-        <div class="w-full truncate text-gray-500 flex items-center">
-          <ClockCircleOutlined />
-          <span class="mx-1">历史</span>
-          <Tooltip :title="getTimeRange.replace('-', '')">
-            <span class="truncate">
-              {{ getTimeRange }}
-            </span>
-          </Tooltip>
-        </div>
-      </Button>
-      <Button type="text" class="!px-2 !text-gray-500" @click="handlePlay">
-        <PlayCircleOutlined v-show="getTrackPlayStatus !== TrackAnimationStatus.PLAY" />
-        <PauseCircleOutlined
-          class="!ml-0"
-          v-show="getTrackPlayStatus === TrackAnimationStatus.PLAY"
-        />
-        <span>
-          {{ getTrackPlayStatus !== TrackAnimationStatus.PLAY ? '播放轨迹' : '暂停播放' }}
-        </span>
-      </Button>
-    </div>
-    <Spin
-      class="w-full h-full !flex flex-col justify-center items-center pointer-events-none"
-      :spinning="!prepare"
-      tip="地图加载中..."
-    />
-    <div v-show="prepare" ref="wrapRef" :id="wrapId" class="w-full h-full no-drag"></div>
-    <HistoryDataModel @register="register" @ok="handleRenderHistroyData" />
-  </div>
-</template>

-import { FrontComponent } from '../../const/const';
-import { ComponentConfig } from '../../types/type';
-import { DataSource } from '/@/api/dataBoard/model';
-
-export interface MapComponentLayout {
-  componentType?: FrontComponent;
-}
-
-export interface MapComponentValue {
-  icon?: string;
-  track?: Record<'ts' | 'value', number>[];
-  dataSource?: DataSource[];
-}
-
-interface Config {
-  componentType?: FrontComponent;
-}
-
-export const MaphistoryTrackConfig: Config = {
-  componentType: FrontComponent.MAP_COMPONENT_TRACK_HISTORY,
-};
-
-export const MapRealTrackConfig: Config = {
-  componentType: FrontComponent.MAP_COMPONENT_TRACK_REAL,
-};
-
-const getTrack = (dataSource: DataSource[], config: Config) => {
-  if (dataSource.length >= 2) {
-    const trackRecord = dataSource.slice(0, 2);
-    if (
-      !trackRecord.every((item) => item.componentInfo.value) &&
-      config.componentType === FrontComponent.MAP_COMPONENT_TRACK_REAL
-    )
-      return { track: [], dataSource: [] };
-
-    const track = trackRecord.map((item) => {
-      return {
-        ts: item.componentInfo.updateTime,
-        value: item.componentInfo.value || 0,
-      };
-    });
-    return { track, dataSource };
-  }
-  return { track: [], dataSource: [] };
-};
-
-export const transfromMapComponentConfig: ComponentConfig['transformConfig'] = (
-  componentConfig: Config,
-  _record,
-  dataSourceRecord
-) => {
-  const { track, dataSource } = getTrack(dataSourceRecord as DataSource[], componentConfig);
-  return {
-    layout: {
-      ...componentConfig,
-    } as MapComponentLayout,
-    value: {
-      track,
-      dataSource,
-    } as MapComponentValue,
-  };
-};

-import { SchemaFiled } from '../../detail/config/historyTrend.config';
-import { DataSource } from '/@/api/dataBoard/model';
-
-export interface HistoryModalParams {
-  dataSource?: DataSource[];
-}
-
-export interface HistoryModalOkEmitParams {
-  track: {
-    lng: number | string;
-    lat: number | string;
-  }[];
-  value: Record<SchemaFiled, string | number>;
-}

-<script lang="ts" setup>
-  import icon from '/src/assets/icons/command.svg';
-
-  const props = defineProps<{
-    value?: boolean;
-  }>();
-
-  const emit = defineEmits(['update:value', 'change']);
-
-  const handleChange = (event: Event) => {
-    const _value = (event.target as HTMLInputElement).checked;
-    emit('update:value', _value);
-    emit('change', _value);
-  };
-</script>
-
-<template>
-  <div class="command-send-button">
-    123
-    <a href="javascript:;">
-      <img :src="icon" alt="" />
-    </a>
-  </div>
-</template>
-
-<style scoped lang="less">
-  .command-send-button {
-    width: 80px;
-    height: 60px;
-    position: relative;
-
-    a {
-      position: absolute;
-      box-sizing: border-box;
-      cursor: pointer;
-      text-decoration: none;
-      color: #fff;
-      background: #f2385a;
-      top: 0;
-      padding: 0 16px;
-      height: 60px;
-      width: 80px;
-      overflow: hidden;
-      font-size: 20px;
-      line-height: 60px;
-      border-radius: 10px;
-      box-shadow: 0 15px 0 0 #f02046, 0 0 20px 0 #bbb;
-      transition: all 0.2s;
-    }
-  }
-</style>

-<script lang="ts" setup>
-  const props = defineProps<{
-    value?: boolean;
-  }>();
-
-  const emit = defineEmits(['update:value', 'change']);
-
-  const handleChange = (event: Event) => {
-    const _value = (event.target as HTMLInputElement).checked;
-    emit('update:value', _value);
-    emit('change', _value);
-  };
-</script>
-
-<template>
-  <label class="indicator-light-switch">
-    <input :value="props.value" :checked="props.value" type="checkbox" @change="handleChange" />
-    <div class="panel"></div>
-  </label>
-</template>
-
-<style scoped lang="less">
-  .indicator-light-switch {
-    input[type='checkbox'] {
-      display: none;
-    }
-    .panel {
-      position: relative;
-      width: 60px;
-      height: 60px;
-      cursor: pointer;
-      border-radius: 50%;
-      background: linear-gradient(#dedede, #fdfdfd);
-      box-shadow: 0 3px 5px rgb(0 0 0 / 25%), inset 0 1px 0 hsl(0deg 0% 100% / 30%),
-        inset 0 -5px 5px hsl(0deg 0% 39% / 10%), inset 0 5px 5px hsl(0deg 0% 100% / 30%);
-    }
-
-    .panel::after,
-    .panel::before {
-      content: '';
-      position: absolute;
-      width: 20%;
-      height: 20%;
-      border-radius: 50%;
-      left: 40%;
-      top: 40%;
-    }
-
-    input:checked ~ .panel::after {
-      display: none;
-    }
-
-    input:not(:checked) ~ .panel::before {
-      display: none;
-    }
-
-    input:not(:checked) ~ .panel {
-      background: linear-gradient(#eaeaea, #eaeaea);
-    }
-
-    .panel::after {
-      background-color: #ddd;
-      background: radial-gradient(40% 35%, #ccc, #969696 60%);
-      box-shadow: inset 0 2px 1px rgb(0 0 0 / 15%), 0 2px 5px hsl(0deg 0% 78% / 10%);
-    }
-
-    .panel::before {
-      background-color: #25d025;
-      box-shadow: inset 0 3px 5px 1px rgb(0 0 0 / 10%), 0 1px 0 hsl(0deg 0% 100% / 40%),
-        0 0 10px 2px rgb(0 210 0 / 50%);
-    }
-  }
-</style>

-<script lang="ts" setup>
-  import { SvgIcon } from '/@/components/Icon';
-  import { Statistic } from 'ant-design-vue';
-
-  const props = defineProps({
-    icon: {
-      type: String,
-      default: 'wind-speed',
-    },
-    color: {
-      type: String,
-      default: 'blue',
-    },
-    updateTime: {
-      type: String,
-      default: '2022-08-26 11:11:23',
-    },
-  });
-</script>
-
-<template>
-  <section class="flex flex-col h-full justify-center w-full p-2">
-    <div class="flex items-center">
-      <div class="flex flex-col justify-center items-center">
-        <SvgIcon
-          :style="{ color: props.color, width: '40%', height: '40%' }"
-          :name="props.icon"
-          prefix="iconfont"
-        />
-        <div class="text-sm my-2">温度</div>
-      </div>
-      <div class="text-center flex-auto">
-        <Statistic
-          value="123"
-          :value-style="{ display: 'flex', fontSize: '20px', justifyContent: 'center' }"
-          :suffix="'%'"
-        />
-      </div>
-    </div>
-    <div class="text-xs text-gray-500 text-center truncate" :title="props.updateTime">
-      更新时间: {{ props.updateTime }}
-    </div>
-  </section>
-</template>

-<script lang="ts" setup>
-  import on from '/@/assets/icons/light-bulb-on.svg';
-  import off from '/@/assets/icons/light-bulb-off.svg';
-
-  const props = defineProps<{
-    value?: boolean;
-  }>();
-
-  const emit = defineEmits(['update:value', 'change']);
-
-  const handleChange = (event: Event) => {
-    const _value = (event.target as HTMLInputElement).checked;
-    emit('update:value', _value);
-    emit('change', _value);
-  };
-</script>
-
-<template>
-  <label class="light-bulb-switch">
-    <input :value="props.value" :checked="props.value" type="checkbox" @change="handleChange" />
-    <div class="light-bulb__on"> <img :src="on" alt="开" /> </div>
-    <div class="light-bulb__off"> <img :src="off" alt="关" /> </div>
-  </label>
-</template>
-
-<style scoped lang="less">
-  .light-bulb-switch {
-    input[type='checkbox'] {
-      display: none;
-    }
-
-    input:checked ~ .light-bulb__off {
-      display: none;
-    }
-
-    input:not(:checked) ~ .light-bulb__on {
-      display: none;
-    }
-
-    .light-bulb__on > img,
-    .light-bulb__off > img {
-      width: 48px;
-      height: 48px;
-      cursor: pointer;
-    }
-  }
-</style>

-<script lang="ts" setup>
-  const props = defineProps<{
-    value?: boolean;
-  }>();
-
-  const emit = defineEmits(['update:value', 'change']);
-
-  const handleChange = (event: Event) => {
-    const _value = (event.target as HTMLInputElement).checked;
-    emit('update:value', _value);
-    emit('change', _value);
-  };
-</script>
-
-<template>
-  <label class="rocker-switch">
-    <input :value="props.value" type="checkbox" :checked="props.value" @change="handleChange" />
-    <span class="switch-left">ON</span>
-    <span class="switch-right">OFF</span>
-  </label>
-</template>
-
-<style scoped lang="less">
-  .rocker-switch {
-    display: flex;
-    width: 72px;
-    font-size: 14px;
-    color: #fff;
-    font-weight: 700;
-    letter-spacing: 1px;
-    border: 0.5em solid #eee;
-    background-color: #999;
-    user-select: none;
-
-    input[type='checkbox'] {
-      display: none;
-    }
-
-    input:checked + .switch-left + .switch-right {
-      transform: rotate(-15deg) skew(-15deg) translate(-1px, -5px);
-    }
-    input:checked + .switch-left + .switch-right::before {
-      background-color: #ccc;
-      content: '';
-      position: absolute;
-      width: 3px;
-      height: 30px;
-      transform: skewY(75deg) skewX(4deg) rotate(5deg) translateX(1px);
-      top: 1.5px;
-      right: -1.5px;
-    }
-
-    input + .switch-left {
-      transform: rotate(15deg) skew(17deg) translate(1px, -5px);
-    }
-
-    input:checked + .switch-left {
-      background-color: #0084d0;
-      transform: none;
-    }
-
-    input:not(:checked) + .switch-left {
-      background-color: #ccc;
-    }
-
-    input:not(:checked) + .switch-left + .switch-right {
-      background-color: #bd5757;
-      color: #fff;
-    }
-
-    input + .switch-left::before {
-      background-color: #ccc;
-      content: '';
-      position: absolute;
-      width: 3px;
-      height: 30px;
-      background-color: #ccc;
-      transform: skewY(-75deg) skewX(-4deg) rotate(-5deg) translateX(-1.5px);
-      top: -1.5px;
-      left: -1.5px;
-    }
-
-    .switch-left {
-      width: 36px;
-      height: 30px;
-      text-align: center;
-      line-height: 30px;
-      cursor: pointer;
-    }
-
-    .switch-right {
-      color: #888;
-      width: 36px;
-      height: 30px;
-      text-align: center;
-      line-height: 30px;
-      background-color: #ddd;
-      cursor: pointer;
-    }
-  }
-</style>

-<script lang="ts">
-  export default {
-    inheritAttrs: false,
-  };
-</script>
-<script lang="ts" setup>
-  import { computed, ref, watch } from 'vue';
-  import { Tooltip, Image as AntImage } from 'ant-design-vue';
-  import {
-    getUpdateTime,
-    DEFAULT_RADIO_RECORD,
-    fontSize,
-    RadioRecord,
-  } from '../../detail/config/util';
-  import { PictureComponentValue } from './pictureComponent.config';
-
-  const props = defineProps<{
-    layout?: Recordable;
-    value?: PictureComponentValue;
-    radio?: RadioRecord;
-  }>();
-
-  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 getImagBase64 = ref(fallback);
-
-  const getRadio = computed(() => {
-    return props.radio || DEFAULT_RADIO_RECORD;
-  });
-
-  const getWidth = computed(() => {
-    const marign = 5;
-    const offsetHight = 62 + (props.radio ? 62 : 0);
-    const { width = 240, height = 200 } = props.radio || {};
-    return width > height - offsetHight ? height - offsetHight - marign : width - marign;
-  });
-
-  watch(
-    () => props.value?.value,
-    () => {
-      if (props.value?.value) {
-        getBase64Image(props.value.value);
-      }
-    }
-  );
-
-  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;
-      image = null;
-      canvas = null;
-    };
-    image.setAttribute('crossOrigin', 'Anonymous');
-    image.src = url;
-  };
-</script>
-
-<template>
-  <section
-    class="w-full h-full flex flex-col justify-center items-center justify-between widget-picture"
-  >
-    <AntImage :width="getWidth" :src="getImagBase64" :fallback="fallback" />
-    <div
-      class="w-full text-center truncate p-5"
-      :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }), color: '#999' }"
-    >
-      <Tooltip placement="top" :title="getUpdateTime(props.value?.updateTime)">
-        <span class="mr-1">更新时间:</span>
-        <span class="truncate">
-          {{ getUpdateTime(props.value?.updateTime) }}
-        </span>
-      </Tooltip>
-    </div>
-  </section>
-</template>
-
-<style scoped lang="less">
-  .widget-picture:deep(.ant-image) {
-    flex: auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-</style>

-import PictureComponent from './PictureComponent.vue';
-
-export { PictureComponent };

-import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
-
-export interface PictureComponentValue {
-  value?: string;
-  updateTime?: string;
-}
-
-export const transformPictureConfig = (
-  _config: Recordable,
-  _record: DataComponentRecord,
-  dataSourceRecord: DataSource
-) => {
-  const componentInfo = dataSourceRecord.componentInfo;
-  return {
-    value: {
-      value: componentInfo.value,
-      updateTime: componentInfo.updateTime,
-    } as PictureComponentValue,
-  };
-};

-<script lang="ts">
-  export default {
-    inheritAttrs: false,
-  };
-</script>
-<script lang="ts" setup>
-  import { computed } from 'vue';
-  import { Statistic, Tooltip } from 'ant-design-vue';
-  import {
-    getUpdateTime,
-    fontSize,
-    RadioRecord,
-    DEFAULT_RADIO_RECORD,
-  } from '../../detail/config/util';
-  import { TextComponentDefaultConfig, TextComponentLayout, TextComponentValue } from './config';
-  import { SvgIcon } from '/@/components/Icon';
-  const props = defineProps({
-    layout: {
-      type: Object as PropType<TextComponentLayout>,
-      default: () => ({ base: true } as TextComponentLayout),
-    },
-    value: {
-      type: Object as PropType<TextComponentValue>,
-      default: () =>
-        ({ ...TextComponentDefaultConfig, name: '温度', value: 123 } as TextComponentValue),
-    },
-    radio: {
-      type: Object as PropType<RadioRecord>,
-      default: () => DEFAULT_RADIO_RECORD as RadioRecord,
-    },
-  });
-
-  const getIsColumnLayout = computed(() => {
-    const { base } = props.layout;
-    return base;
-  });
-
-  const getShowIcon = computed(() => {
-    const { showIcon, base } = props.layout;
-    return base ? false : showIcon;
-  });
-
-  const getShowUpdate = computed(() => {
-    const { showUpdate, base } = props.layout;
-    return base ? false : showUpdate;
-  });
-
-  const getShowUnit = computed(() => {
-    const { showUnit, base } = props.layout;
-    return base ? false : showUnit;
-  });
-
-  const getRadio = computed(() => {
-    return props.radio || DEFAULT_RADIO_RECORD;
-  });
-</script>
-
-<template>
-  <div class="w-full h-full flex flex-col">
-    <div
-      class="flex justify-center items-center w-full text-center flex-auto"
-      :style="{ flexDirection: getIsColumnLayout ? 'column' : 'row' }"
-    >
-      <div class="w-1/2">
-        <div>
-          <div v-if="getShowIcon">
-            <SvgIcon
-              :name="props.value.icon || TextComponentDefaultConfig.icon!"
-              prefix="iconfont"
-              :style="{
-                color: props.value.iconColor,
-                width: fontSize({ radioRecord: getRadio, basic: 50, min: 16 }),
-                height: fontSize({ radioRecord: getRadio, basic: 50, min: 16 }),
-              }"
-            />
-          </div>
-          <div class="flex justify-center">
-            <Statistic
-              :value="props.value.value || 0"
-              class="truncate"
-              :suffix="getShowUnit ? props.value.unit : ''"
-              :value-style="{
-                fontSize: fontSize({ radioRecord: getRadio, basic: 24, min: 16 }),
-                color: props.value.fontColor,
-              }"
-            />
-          </div>
-          <div :style="{ color: '#666', fontSize: fontSize({ radioRecord: getRadio, basic: 16 }) }">
-            {{ props.value.name }}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="text-center text-xs truncate p-5" style="color: #999">
-      <Tooltip v-if="getShowUpdate" placement="top" :title="getUpdateTime(props.value?.updateTime)">
-        <div
-          :style="{ fontSize: fontSize({ radioRecord: getRadio, basic: 12, max: 12 }) }"
-          class="truncate"
-        >
-          <span class="mr-1">更新时间:</span>
-          <span class="truncate">
-            {{ getUpdateTime(props.value?.updateTime) }}
-          </span>
-        </div>
-      </Tooltip>
-    </div>
-  </div>
-</template>

-<script lang="ts" setup>
-  import { MoreOutlined } from '@ant-design/icons-vue';
-  import { DropMenu } from '/@/components/Dropdown';
-  import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
-  import { Tooltip } from 'ant-design-vue';
-  import {
-    isBataBoardSharePage,
-    MoreActionEvent,
-    VisualComponentPermission,
-  } from '../../config/config';
-  import { computed } from '@vue/reactivity';
-  import { usePermission } from '/@/hooks/web/usePermission';
-  import { DataSource } from '/@/api/dataBoard/model';
-  import { useRoute } from 'vue-router';
-  import { useRole } from '/@/hooks/business/useRole';
-
-  const emit = defineEmits(['action']);
-  const props = defineProps<{
-    id: string;
-    record: DataSource[];
-    panelName?: string;
-  }>();
-  const { isCustomerUser } = useRole();
-  const { hasPermission } = usePermission();
-  const dropMenuList = computed<DropMenu[]>(() => {
-    const basicMenu: DropMenu[] = [];
-    const hasUpdatePermission = hasPermission(VisualComponentPermission.UPDATE);
-    const hasDeletePermission = hasPermission(VisualComponentPermission.DELETE);
-    const hasCopyPermission = hasPermission(VisualComponentPermission.COPY);
-    if (hasUpdatePermission)
-      basicMenu.push({
-        text: '编辑组件',
-        event: MoreActionEvent.EDIT,
-        icon: 'ant-design:edit-outlined',
-      });
-    if (hasDeletePermission)
-      basicMenu.push({
-        text: '删除组件',
-        event: MoreActionEvent.DELETE,
-        icon: 'ant-design:delete-outlined',
-      });
-    if (hasCopyPermission)
-      basicMenu.push({
-        text: '复制组件',
-        event: MoreActionEvent.COPY,
-        icon: 'ant-design:copy-outlined',
-      });
-    return basicMenu;
-  });
-
-  const ROUTE = useRoute();
-
-  const getIsSharePage = computed(() => {
-    return isBataBoardSharePage(ROUTE.path);
-  });
-
-  const handleMenuEvent = (event: DropMenu) => {
-    emit('action', event, props.id);
-  };
-</script>
-
-<template>
-  <div>
-    <div class="text-center pt-5 px-5 pb-3 font-bold text-lg truncate">
-      {{ props.panelName || '' }}
-    </div>
-    <div class="flex justify-between w-full px-5 pb-5">
-      <div class="flex" :style="{ width: `calc(100% - 60px)` }">
-        <div
-          v-for="(item, index) in props.record"
-          class="box-border truncate"
-          :style="{ width: `${100 / props.record.length}%` }"
-          :key="index"
-        >
-          <Tooltip :title="item.deviceName" placement="topLeft">
-            <div class="flex p-1">
-              <div v-if="item.componentInfo.showDeviceName" class="truncate font-bold">
-                {{ item.deviceRename || item.deviceName }}
-              </div>
-            </div>
-          </Tooltip>
-        </div>
-      </div>
-      <div class="flex items-center gap-5">
-        <slot name="moreAction"></slot>
-        <Dropdown
-          v-if="!isCustomerUser && dropMenuList.length"
-          :drop-menu-list="dropMenuList"
-          :trigger="['click']"
-          @menu-event="handleMenuEvent"
-        >
-          <Tooltip title="更多">
-            <MoreOutlined
-              v-if="!getIsSharePage"
-              class="transform rotate-90 cursor-pointer w-4.5 h-4.5 text-lg"
-            />
-          </Tooltip>
-        </Dropdown>
-      </div>
-    </div>
-  </div>
-</template>

-<script lang="ts" setup>
-  import { useUpdateCenter } from '../../hook/useUpdateCenter';
-  import { FrontDataSourceRecord } from '../../types/type';
-  import { createVisualBoardContext } from '../../hook/useVisualBoardContext';
-  import { DataComponentRecord } from '/@/api/dataBoard/model';
-  import { computed } from 'vue';
-  import { frontComponentMap } from '../help';
-  import { FrontComponent } from '../../const/const';
-
-  const props = defineProps<{
-    record: DataComponentRecord;
-    dataSource: FrontDataSourceRecord[];
-  }>();
-
-  const isMultipleDataSource = computed(() => {
-    const { record } = props;
-    const componentInfo = frontComponentMap.get(record.frontId as FrontComponent);
-    return componentInfo?.isMultipleDataSource;
-  });
-
-  const { update, add, remove } = useUpdateCenter();
-
-  createVisualBoardContext({ update, add, remove });
-
-  defineExpose({ update });
-</script>
-
-<template>
-  <section class="widget !dark:bg-dark-900">
-    <slot name="header"></slot>
-
-    <div class="widget-content">
-      <template v-if="!isMultipleDataSource">
-        <div
-          v-for="item in props.dataSource"
-          :key="item.id"
-          :style="{ width: `${item.width || 100}%`, height: `${item.height || 100}%` }"
-          class="widget-item"
-        >
-          <div class="widget-box">
-            <div class="widget-controls-container">
-              <slot
-                name="controls"
-                :record="item"
-                :add="add"
-                :remove="remove"
-                :update="update"
-              ></slot>
-            </div>
-          </div>
-        </div>
-      </template>
-      <template v-if="isMultipleDataSource">
-        <div :style="{ width: `${100}%`, height: `${100}%` }" class="widget-item">
-          <div class="widget-box">
-            <div class="widget-controls-container">
-              <slot
-                name="controls"
-                :record="props.dataSource"
-                :add="add"
-                :remove="remove"
-                :update="update"
-              ></slot>
-            </div>
-          </div>
-        </div>
-      </template>
-    </div>
-    <slot name="footer"></slot>
-  </section>
-</template>
-
-<style scoped>
-  .widget {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    background-color: #fff;
-    border-radius: 3px;
-    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
-  }
-
-  .widget-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-  }
-
-  .widget-box .widget-charts {
-    display: flex;
-  }
-
-  .widget-item {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .widget-box {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-
-  .widget-controls-container {
-    flex: 1 1 auto;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .widget-controls-container > div {
-    width: 100%;
-    height: 100%;
-    background-color: red;
-  }
-
-  .widget-value {
-    font-size: 14px;
-    position: absolute;
-    width: 100%;
-    top: 0;
-    text-align: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .widget-label {
-    font-size: 14px;
-    line-height: 1.2;
-    text-align: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-</style>

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

-import { ViewTypeEnum } from '/@/views/sys/share/config/config';
-
 export enum MoreActionEvent {
   EDIT = 'edit',
   COPY = 'copy',
@@ -27,9 +25,6 @@ export const DEFAULT_WIDGET_HEIGHT = 6;
 export const DEFAULT_MIN_HEIGHT = 5;
 export const DEFAULT_MIN_WIDTH = 3;
 
-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 enum FrontComponentCategory {
-  TEXT = 'text',
-  PICTURE = 'picture',
-  INSTRUMENT = 'instrument',
-  CONTROL = 'control',
-  MAP = 'map',
-}
-
-export const FrontComponentCategoryName = {
-  [FrontComponentCategory.TEXT]: '文本组件',
-  [FrontComponentCategory.INSTRUMENT]: '仪表组件',
-  [FrontComponentCategory.CONTROL]: '控制组件',
-  [FrontComponentCategory.PICTURE]: '图片组件',
-  [FrontComponentCategory.MAP]: '地图组件',
-};
-
-export enum FrontComponent {
-  TEXT_COMPONENT_1 = 'text-component-1',
-  TEXT_COMPONENT_2 = 'text-component-2',
-  TEXT_COMPONENT_3 = 'text-component-3',
-  TEXT_COMPONENT_4 = 'text-component-4',
-  TEXT_COMPONENT_5 = 'text-component-5',
-  INSTRUMENT_COMPONENT_1 = 'instrument-component-1',
-  INSTRUMENT_COMPONENT_2 = 'instrument-component-2',
-  DIGITAL_DASHBOARD_COMPONENT = 'digital-dashboard-component',
-  PICTURE_COMPONENT_1 = 'picture-component-1',
-  CONTROL_COMPONENT_TOGGLE_SWITCH = 'control-component-toggle-switch',
-  CONTROL_COMPONENT_SWITCH_WITH_ICON = 'control-component-switch-with-icon',
-  CONTROL_COMPONENT_SLIDING_SWITCH = 'control-component-sliding-switch',
-  MAP_COMPONENT_TRACK_REAL = 'map-component-track-real',
-  MAP_COMPONENT_TRACK_HISTORY = 'map-component-track-history',
-}
-
-export enum Gradient {
-  FIRST = 'first',
-  SECOND = 'second',
-  THIRD = 'third',
-}
-export enum GradientColor {
-  FIRST = '#67e0e3',
-  SECOND = '#37a2da',
-  THIRD = '#fd666d',
-}
-
-export enum visualOptionField {
-  FONT_COLOR = 'fontColor',
-  UNIT = 'unit',
-  ICON_COLOR = 'iconColor',
-  ICON = 'icon',
-  FIRST_PHASE_COLOR = 'firstPhaseColor',
-  SECOND_PHASE_COLOR = 'secondPhaseColor',
-  THIRD_PHASE_COLOR = 'thirdPhaseColor',
-  FIRST_PHASE_VALUE = 'firstPhaseValue',
-  SECOND_PHASE_VALUE = 'secondPhaseValue',
-  THIRD_PHASE_VALUE = 'thirdPhaseValue',
-}

-<script lang="ts" setup>
-  import {
-    CopyOutlined,
-    DeleteOutlined,
-    SettingOutlined,
-    SwapOutlined,
-  } from '@ant-design/icons-vue';
-  import { Tooltip, Button, Alert } from 'ant-design-vue';
-  import { FormActionType, useForm } from '/@/components/Form';
-  import { basicSchema, DataSourceField } from '../config/basicConfiguration';
-  import BasicForm from '/@/components/Form/src/BasicForm.vue';
-  import { ref, shallowReactive, unref, nextTick, watch, computed, onMounted } from 'vue';
-  import VisualOptionsModal from './VisualOptionsModal.vue';
-  import { useModal } from '/@/components/Modal';
-  import { buildUUID } from '/@/utils/uuid';
-  import type { ComponentInfo, DataSource } from '/@/api/dataBoard/model';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { DataBoardLayoutInfo } from '../../types/type';
-  import { getDataSourceComponent } from './DataSourceForm/help';
-  import { FrontComponent, FrontComponentCategory } from '../../const/const';
-  import { isNullAndUnDef } from '/@/utils/is';
-  import { useSortable } from '/@/hooks/web/useSortable';
-  import { cloneDeep } from 'lodash-es';
-  import { frontComponentMap } from '../../components/help';
-  import { isControlComponent } from '../config/basicConfiguration';
-
-  type DataSourceFormEL = { [key: string]: Nullable<FormActionType> };
-
-  type DataSourceEl = DataSource & { id: string };
-
-  const props = defineProps<{
-    record: DataBoardLayoutInfo;
-    isEdit: boolean;
-    frontId?: FrontComponent;
-    defaultConfig?: Partial<ComponentInfo>;
-    componentCategory?: FrontComponentCategory;
-  }>();
-
-  const { createMessage } = useMessage();
-
-  const dataSource = ref<DataSourceEl[]>([
-    { id: buildUUID(), componentInfo: props.defaultConfig || {} } as unknown as DataSourceEl,
-  ]);
-
-  const [basicRegister, basicMethod] = useForm({
-    schemas: basicSchema,
-    showActionButtonGroup: false,
-    labelWidth: 96,
-  });
-
-  const dataSourceEl = shallowReactive<DataSourceFormEL>({} as unknown as DataSourceFormEL);
-
-  const setFormEl = (el: any, id: string) => {
-    if (id && el) {
-      const { formActionType } = el as unknown as { formActionType: FormActionType };
-      dataSourceEl[id] = formActionType;
-    }
-  };
-
-  const resetFormFields = async () => {
-    const hasExistEl = Object.keys(dataSourceEl).filter((key) => dataSourceEl[key]);
-    for (const id of hasExistEl) {
-      const oldValues = dataSourceEl[id]?.getFieldsValue();
-      dataSourceEl[id]?.setFieldsValue({
-        ...oldValues,
-        [DataSourceField.ATTRIBUTE]: null,
-        [DataSourceField.COMMAND_TYPE]: null,
-        [DataSourceField.SERVICE]: null,
-      });
-      dataSourceEl[id]?.clearValidate();
-    }
-  };
-
-  const validate = async () => {
-    await basicMethod.validate();
-    await validateDataSourceField();
-  };
-
-  const getAllDataSourceFieldValue = () => {
-    const _dataSource = getDataSourceField();
-    const basicInfo = basicMethod.getFieldsValue();
-    return {
-      ...basicInfo,
-      dataSource: _dataSource,
-    };
-  };
-
-  const validateDataSourceField = async () => {
-    const hasExistEl = Object.keys(dataSourceEl).filter((key) => dataSourceEl[key]);
-    const _dataSource: Record<DataSourceField, string>[] = [];
-    for (const id of hasExistEl) {
-      const flag = (await (dataSourceEl[id] as FormActionType).validate()) as Record<
-        DataSourceField,
-        string
-      >;
-      flag && _dataSource.push(flag);
-    }
-
-    if (
-      [
-        FrontComponent.MAP_COMPONENT_TRACK_HISTORY,
-        FrontComponent.MAP_COMPONENT_TRACK_REAL,
-      ].includes(props.frontId!)
-    ) {
-      await validateMapComponent(_dataSource);
-    }
-    return _dataSource;
-  };
-
-  const validateMapComponent = async (dataSource: Record<DataSourceField, string>[]) => {
-    if (dataSource.length) {
-      const firstRecord = dataSource.at(0)!;
-      const { deviceId } = firstRecord;
-      const flag = dataSource.every((item) => item.deviceId === deviceId);
-      if (!flag) {
-        createMessage.warning('地图组件绑定的数据源应该一致');
-        return Promise.reject(false);
-      }
-    }
-  };
-
-  const getDataSourceField = () => {
-    const hasExistEl = Object.keys(dataSourceEl).filter((key) => dataSourceEl[key]);
-    const _dataSource: DataSource[] = [];
-
-    for (const id of hasExistEl) {
-      const index = unref(dataSource).findIndex((item) => item.id === id);
-      const value = (dataSourceEl[id] as FormActionType).getFieldsValue() as DataSource;
-      if (!~index) continue;
-      const componentInfo = unref(dataSource)[index].componentInfo || {};
-      _dataSource[index] = {
-        ...value,
-        componentInfo: { ...(props.defaultConfig || {}), ...componentInfo },
-        customCommand: {
-          transportType: value.transportType,
-          service: value.service,
-          command: value.command,
-          commandType: value.commandType,
-        },
-      };
-    }
-
-    return _dataSource;
-  };
-
-  const handleCopy = async (data: DataSourceEl) => {
-    const value = (dataSourceEl[data.id] as FormActionType).getFieldsValue() as DataSource;
-    const index = unref(dataSource).findIndex((item) => item.id === data.id);
-
-    const componentInfo = ~index
-      ? unref(dataSource)[index].componentInfo
-      : ({} as unknown as ComponentInfo);
-
-    const copyRecordId = buildUUID();
-    unref(dataSource).push({
-      ...value,
-      id: copyRecordId,
-      componentInfo,
-    });
-    await nextTick();
-    (dataSourceEl[copyRecordId] as FormActionType).setFieldsValue(value);
-    (dataSourceEl[copyRecordId] as FormActionType).clearValidate();
-  };
-
-  const [registerVisualOptionModal, { openModal }] = useModal();
-
-  const handleSetting = (item: DataSourceEl) => {
-    if (!props.frontId) {
-      createMessage.warning('请先选择可视化组件');
-      return;
-    }
-
-    const componentInfo: ComponentInfo = {
-      ...(props.defaultConfig || {}),
-      ...(item.componentInfo || {}),
-    };
-
-    openModal(true, {
-      recordId: item.id,
-      componentInfo,
-    });
-  };
-
-  const handleDelete = (data: DataSourceEl) => {
-    const index = unref(dataSource).findIndex((item) => item.id === data.id);
-    ~index && unref(dataSource).splice(index, 1);
-    dataSourceEl[data.id] = null;
-  };
-
-  const isMapComponent = computed(() => {
-    return props.componentCategory === FrontComponentCategory.MAP;
-  });
-
-  const handleAdd = () => {
-    if (unref(isMapComponent) && unref(dataSource).length === 2) {
-      createMessage.warning('地图组件只能绑定两条数据源');
-      return;
-    }
-    unref(dataSource).push({
-      id: buildUUID(),
-      componentInfo: props.defaultConfig || {},
-    } as unknown as DataSourceEl);
-  };
-
-  const echoDataSource = () => {
-    basicMethod.setFieldsValue(props.record.record);
-    basicMethod.clearValidate();
-    dataSource.value = [];
-    dataSource.value = props.record.record.dataSource.map((item) => {
-      const id = buildUUID();
-
-      const customCommand = item.customCommand || {};
-
-      nextTick(() => {
-        (dataSourceEl[id] as FormActionType).setFieldsValue({
-          ...item,
-          transportType: customCommand.transportType,
-          command: customCommand?.command,
-          commandType: customCommand.commandType,
-          service: customCommand.service,
-        });
-        (dataSourceEl[id] as FormActionType).clearValidate();
-      });
-
-      return {
-        id,
-        ...item,
-        transportType: customCommand.transportType,
-        command: customCommand?.command,
-        commandType: customCommand.commandType,
-        service: customCommand.service,
-      };
-    });
-  };
-
-  const showSettingButton = computed(() => {
-    const flag = frontComponentMap.get(props.frontId!)?.hasSetting;
-    return flag;
-  });
-
-  watch(
-    () => props.record,
-    () => {
-      if (Object.keys(props.record).length) echoDataSource();
-    }
-  );
-
-  const handleRowComponentInfo = (recordId: string, value: ComponentInfo) => {
-    const index = unref(dataSource).findIndex((item) => item.id === recordId);
-    ~index && (unref(dataSource)[index].componentInfo = value);
-  };
-
-  const dataSourceComponent = computed(() => {
-    return getDataSourceComponent(props.frontId as FrontComponent);
-  });
-
-  let inited = false;
-  const formListEl = ref<HTMLElement>();
-  async function handleSort() {
-    if (inited) return;
-    await nextTick();
-    const formList = unref(formListEl);
-    if (!formList) return;
-
-    const { initSortable } = useSortable(unref(formList), {
-      handle: '.sort-icon',
-      onEnd: (evt) => {
-        const { oldIndex, newIndex } = evt;
-        if (isNullAndUnDef(oldIndex) || isNullAndUnDef(newIndex) || oldIndex === newIndex) {
-          return;
-        }
-
-        const _dataSource = cloneDeep(unref(dataSource));
-
-        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);
-        }
-
-        dataSource.value = _dataSource;
-      },
-    });
-    initSortable();
-    inited = true;
-  }
-
-  const isControlCmp = computed(() => {
-    return isControlComponent(props.frontId as FrontComponent);
-  });
-
-  watch(
-    () => props.frontId,
-    async (target, oldTarget) => {
-      if ([isControlComponent(oldTarget!), isControlComponent(target!)].some(Boolean)) {
-        await resetFormFields();
-      }
-    }
-  );
-
-  onMounted(() => handleSort());
-
-  defineExpose({
-    getAllDataSourceFieldValue,
-    validate,
-  });
-</script>
-
-<template>
-  <section>
-    <h3 class="w-24 text-right pr-2 my-4">基础信息</h3>
-    <div class="w-3/4">
-      <BasicForm @register="basicRegister" class="w-full" />
-    </div>
-    <Alert type="info" show-icon v-if="isControlCmp">
-      <template #description>
-        <div>
-          控制组件数据源为TCP产品,则其控制命令下发为TCP产品 物模型=>服务，且不具备状态显示功能.
-        </div>
-        <div>
-          控制组件数据源为非TCP产品,则其控制命令下发为产品 物模型=>属性，且具备状态显示功能.
-        </div>
-      </template>
-    </Alert>
-    <Alert type="info" show-icon v-if="isMapComponent">
-      <template #description>
-        <div>
-          地图组件，需绑定两个数据源，且数据源为同一设备。第一数据源为经度，第二数据源为纬度，否则地图组件不能正常显示。
-        </div>
-      </template>
-    </Alert>
-    <h3 class="w-24 flex-shrink-0 text-right pr-2 my-4">选择数据源</h3>
-
-    <section ref="formListEl">
-      <div
-        v-for="item in dataSource"
-        :data-id="item.id"
-        :key="item.id"
-        class="flex bg-light-50 dark:text-gray-300 dark:bg-dark-700"
-      >
-        <div class="w-24 text-right flex justify-end" style="flex: 0 0 96px"> 选择设备 </div>
-        <div class="pl-2 flex-auto">
-          <component
-            :frontId="$props.frontId"
-            :isEdit="isEdit"
-            :is="dataSourceComponent"
-            :ref="(el) => setFormEl(el, item.id)"
-          />
-        </div>
-        <div class="flex justify-center gap-3 w-28">
-          <Tooltip title="复制">
-            <CopyOutlined @click="handleCopy(item)" class="cursor-pointer text-lg !leading-32px" />
-          </Tooltip>
-          <Tooltip title="设置">
-            <SettingOutlined
-              v-show="showSettingButton"
-              @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>
-      </div>
-    </section>
-
-    <div class="text-center">
-      <Button type="primary" @click="handleAdd">添加数据源</Button>
-    </div>
-    <VisualOptionsModal
-      :value="props.frontId"
-      @close="handleRowComponentInfo"
-      @register="registerVisualOptionModal"
-    />
-  </section>
-</template>
-
-<style scoped>
-  .data-source-form:deep(.ant-row) {
-    width: 100%;
-  }
-
-  .data-source-form:deep(.ant-form-item-control-input-content > div > div) {
-    width: 100%;
-  }
-</style>

-<script lang="ts" setup>
-  import { Tabs } from 'ant-design-vue';
-  import BasicModal from '/@/components/Modal/src/BasicModal.vue';
-  import BasicConfiguration from './BasicConfiguration.vue';
-  import VisualConfiguration from './VisualConfiguration.vue';
-  import { computed, ref, unref } from 'vue';
-  import { RouteParams, useRoute } from 'vue-router';
-  import { addDataComponent, updateDataComponent } from '/@/api/dataBoard';
-  import { useModalInner } from '/@/components/Modal';
-  import { DataBoardLayoutInfo } from '../../types/type';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import { decode } from '../../config/config';
-  import { ComponentInfo } from '/@/api/dataBoard/model';
-  import { useCalcGridLayout } from '../../hook/useCalcGridLayout';
-  import { FrontComponent } from '../../const/const';
-  import { frontComponentMap } from '../../components/help';
-  import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
-
-  interface DataComponentRouteParams extends RouteParams {
-    id: string;
-  }
-
-  const props = defineProps<{
-    layout: DataBoardLayoutInfo[];
-  }>();
-
-  const emit = defineEmits(['update', 'create', 'register']);
-  const ROUTE = useRoute();
-
-  const loading = ref(false);
-  const { createMessage } = useMessage();
-
-  const boardId = computed(() => {
-    return decode((ROUTE.params as DataComponentRouteParams).boardId as string);
-  });
-
-  const frontId = ref();
-
-  const isEdit = ref(false);
-
-  const componentRecord = ref<DataBoardLayoutInfo>({} as unknown as DataBoardLayoutInfo);
-
-  const componentDefaultConfig = ref<Partial<ComponentInfo>>({});
-
-  const getComponentCategory = computed(() => {
-    return frontComponentMap.get(unref(frontId))?.ComponentCategory;
-  });
-
-  const [register, { closeModal, changeOkLoading }] = useModalInner(
-    (data: { isEdit: boolean; record?: DataBoardLayoutInfo }) => {
-      componentRecord.value = data.record || ({} as unknown as DataBoardLayoutInfo);
-      if (!unref(isEdit)) frontId.value = FrontComponent.TEXT_COMPONENT_1;
-      frontId.value =
-        (data.record?.record?.frontId as FrontComponent) || FrontComponent.TEXT_COMPONENT_1;
-      isEdit.value = data.isEdit || false;
-    }
-  );
-
-  const basicConfigurationEl = ref<{
-    getAllDataSourceFieldValue: Fn<any, Recordable>;
-    validate: Fn;
-  }>();
-
-  const resetForm = () => {
-    isEdit.value = false;
-    frontId.value = undefined;
-    componentRecord.value = {} as unknown as DataBoardLayoutInfo;
-    componentDefaultConfig.value = {};
-  };
-
-  const handleSubmit = async () => {
-    try {
-      const { getAllDataSourceFieldValue, validate } = unref(basicConfigurationEl)!;
-      await validate();
-      const value = getAllDataSourceFieldValue();
-      unref(isEdit) ? handleUpdateComponent(value) : handleAddComponent(value);
-      resetForm();
-    } catch (error: unknown) {
-      if (
-        ((error || {}) as ValidateErrorEntity).errorFields &&
-        ((error || {}) as ValidateErrorEntity).errorFields.length
-      ) {
-        const tooltip = ((error || {}) as ValidateErrorEntity).errorFields[0];
-        createMessage.warning(tooltip.errors[0]);
-      }
-      throw error;
-    }
-  };
-
-  const { calcLayoutInfo } = useCalcGridLayout();
-  const handleAddComponent = async (value: Recordable) => {
-    try {
-      if (!unref(frontId)) {
-        createMessage.warning('请选择可视化组件');
-        return;
-      }
-      const layout = calcLayoutInfo(unref(props.layout));
-      changeOkLoading(true);
-      loading.value = true;
-      await addDataComponent({
-        boardId: unref(boardId),
-        record: { dataBoardId: unref(boardId), frontId: unref(frontId), ...value, layout },
-      });
-      createMessage.success('创建成功');
-      closeModal();
-      emit('create');
-    } catch (error) {
-      throw error;
-      // createMessage.error('创建失败');
-    } finally {
-      changeOkLoading(false);
-      loading.value = false;
-    }
-  };
-
-  const handleUpdateComponent = async (value: Recordable) => {
-    try {
-      changeOkLoading(true);
-      loading.value = true;
-      const res = await updateDataComponent({
-        boardId: unref(boardId),
-        record: {
-          id: unref(componentRecord).i,
-          dataBoardId: unref(boardId),
-          frontId: unref(frontId),
-          ...value,
-        },
-      });
-      createMessage.success('修改成功');
-      closeModal();
-      // emit('submit');
-      emit('update', res.data.id);
-    } catch (error) {
-      // createMessage.error('修改失败');
-    } finally {
-      changeOkLoading(false);
-      loading.value = false;
-    }
-  };
-
-  const handleComponentCheckedChange = (record: ComponentInfo) => {
-    componentDefaultConfig.value = record;
-  };
-</script>
-
-<template>
-  <BasicModal
-    v-bind="$attrs"
-    @register="register"
-    title="自定义组件"
-    width="70%"
-    :destroy-on-close="true"
-    @ok="handleSubmit"
-    @cancel="resetForm"
-    :ok-button-props="{ loading }"
-  >
-    <section>
-      <Tabs type="card">
-        <Tabs.TabPane key="basicConfig" tab="基础配置">
-          <BasicConfiguration
-            ref="basicConfigurationEl"
-            :front-id="frontId"
-            :isEdit="isEdit"
-            :record="componentRecord"
-            :defaultConfig="componentDefaultConfig"
-            :componentCategory="getComponentCategory"
-          />
-        </Tabs.TabPane>
-        <Tabs.TabPane key="visualConfig" tab="可视化配置">
-          <VisualConfiguration v-model:value="frontId" @change="handleComponentCheckedChange" />
-        </Tabs.TabPane>
-      </Tabs>
-    </section>
-  </BasicModal>
-</template>

-<script lang="ts" setup>
-  import { ref, computed } from 'vue';
-  import { FrontComponent } from '../../../const/const';
-  import { dataSourceSchema } from '../../config/basicConfiguration';
-  import { FormActionType } from '/@/components/Form';
-  import BasicForm from '/@/components/Form/src/BasicForm.vue';
-  const formEl = ref<Nullable<FormActionType>>(null);
-
-  const props = defineProps<{
-    frontId?: FrontComponent;
-    isEdit: boolean;
-  }>();
-
-  defineExpose({ formActionType: formEl });
-
-  const getDataSchema = computed(() => {
-    const { frontId, isEdit } = props;
-    if (!frontId) return [];
-    return dataSourceSchema(isEdit, frontId);
-  });
-</script>
-
-<template>
-  <BasicForm
-    ref="formEl"
-    :schemas="getDataSchema"
-    class="w-full flex-1 data-source-form"
-    :show-action-button-group="false"
-    :row-props="{
-      gutter: 10,
-    }"
-    layout="horizontal"
-    :label-col="{ span: 0 }"
-  />
-</template>

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

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

-<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 { DataSource } from '/@/api/dataBoard/model';
-  import { useForm, BasicForm } from '/@/components/Form';
-  import { formSchema, SchemaFiled } from '../config/historyTrend.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';
-
-  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: DataSource[]) => {
-    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 (dataSource: DataSource[]) => {
-    deviceAttrs.value = [];
-    loading.value = false;
-    const options = generateDeviceOptions(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>

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

-<script lang="ts" setup>
-  import { ref, unref } from 'vue';
-  import { schemasMap, VisualOptionParams } from '../config/visualOptions';
-  import { useForm, BasicForm } from '/@/components/Form';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { ComponentInfo } from '/@/api/dataBoard/model';
-  import { computed } from '@vue/reactivity';
-  import { FrontComponent, Gradient, visualOptionField } from '../../const/const';
-
-  const emit = defineEmits(['close', 'register']);
-
-  const props = defineProps<{
-    value?: string;
-  }>();
-
-  const recordId = ref('');
-
-  const getSchemas = computed(() => {
-    return schemasMap.get((props.value as FrontComponent) || 'text-component-1');
-  });
-
-  const [registerForm, method] = useForm({
-    showActionButtonGroup: false,
-    labelWidth: 120,
-    baseColProps: {
-      span: 12,
-    },
-  });
-
-  const [register, { closeModal }] = useModalInner(
-    (data: { recordId: string; componentInfo: ComponentInfo }) => {
-      recordId.value = data.recordId;
-      const gradientInfo = data.componentInfo?.gradientInfo || [];
-      let gradientRecord = {};
-      if (gradientInfo && gradientInfo.length) {
-        const first = gradientInfo.find((item) => item.key === Gradient.FIRST);
-        const second = gradientInfo.find((item) => item.key === Gradient.SECOND);
-        const third = gradientInfo.find((item) => item.key === Gradient.THIRD);
-        gradientRecord = {
-          [visualOptionField.FIRST_PHASE_COLOR]: first?.color,
-          [visualOptionField.FIRST_PHASE_VALUE]: first?.value,
-          [visualOptionField.SECOND_PHASE_COLOR]: second?.color,
-          [visualOptionField.SECOND_PHASE_VALUE]: second?.value,
-          [visualOptionField.THIRD_PHASE_COLOR]: third?.color,
-          [visualOptionField.THIRD_PHASE_VALUE]: third?.value,
-        };
-      }
-
-      method.setFieldsValue({ ...(data.componentInfo || {}), ...gradientRecord });
-    }
-  );
-
-  const handleGetValue = () => {
-    const value = method.getFieldsValue();
-    emit('close', unref(recordId), transformValue(value));
-  };
-
-  const transformValue = (value: Partial<VisualOptionParams>) => {
-    return {
-      fontColor: value.fontColor || null,
-      icon: value.icon || null,
-      iconColor: value.iconColor || null,
-      unit: value.unit || null,
-      showDeviceName: value.showDeviceName,
-      gradientInfo: [
-        { key: Gradient.FIRST, value: value.firstPhaseValue, color: value.firstPhaseColor },
-        { key: Gradient.SECOND, value: value.secondPhaseValue, color: value.secondPhaseColor },
-        { key: Gradient.THIRD, value: value.thirdPhaseValue, color: value.thirdPhaseColor },
-      ],
-    };
-  };
-
-  const handleClose = () => {
-    handleGetValue();
-    closeModal();
-  };
-</script>
-
-<template>
-  <BasicModal
-    v-bind="$attrs"
-    destroy-on-close
-    @register="register"
-    @ok="handleClose"
-    title="选项"
-    width="40%"
-  >
-    <BasicForm class="form" @register="registerForm" :schemas="getSchemas" />
-  </BasicModal>
-</template>
-
-<style scoped>
-  .form:deep(.ant-input-number) {
-    width: 100%;
-  }
-</style>

-<script lang="ts" setup>
-  import { Card } from 'ant-design-vue';
-
-  const props = defineProps({
-    controlId: {
-      type: String,
-      // required: true,
-    },
-    checkedId: {
-      type: String,
-      // required: true,
-    },
-  });
-  const emit = defineEmits(['change']);
-
-  const handleClick = () => {
-    emit('change', props.controlId);
-  };
-</script>
-
-<template>
-  <Card
-    :style="{ borderColor: props.controlId === props.checkedId ? '#3079FF' : '#fff' }"
-    hoverable
-    bordered
-    class="w-60 h-60 border-2 widget-select !bg-light-50 cursor-pointer"
-    @click="handleClick"
-  >
-    <div class="widget-container">
-      <slot></slot>
-    </div>
-    <Card.Meta>
-      <template #description>
-        <slot name="description"></slot>
-      </template>
-    </Card.Meta>
-  </Card>
-</template>
-
-<style scoped>
-  .widget-select {
-    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
-    border-width: 2px;
-  }
-
-  .widget-select:deep(.ant-card-body) {
-    /* height: 240px; */
-
-    /* width: 236px;
-    height: 196px; */
-
-    /* width: 100%;
-    height: 100%; */
-    width: 236px;
-    height: 236px;
-    padding: 0;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .widget-select:deep(.ant-card-meta) {
-    border-top: 1px solid #f0f0f0;
-    width: 100%;
-    height: 40px;
-    text-align: center;
-    line-height: 40px;
-    margin: 0;
-  }
-
-  .widget-select .widget-container {
-    width: 236px;
-    height: 196px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  [data-theme='dark'] .widget-select:deep(.ant-card-body) {
-    @apply bg-dark-900;
-  }
-
-  [data-theme='dark'] .widget-select:deep(.ant-card) {
-    @apply border-dark-300;
-  }
-</style>

-import { getDeviceAttributes, getMeetTheConditionsDevice } from '/@/api/dataBoard';
-import { getOrganizationList } from '/@/api/system/system';
-import { FormSchema, useComponentRegister } from '/@/components/Form';
-import { copyTransFun } from '/@/utils/fnUtils';
-import { DeviceAttributeParams, MasterDeviceList } from '/@/api/dataBoard/model';
-import { FrontComponent } from '../../const/const';
-import { getDeviceProfile } from '/@/api/alarm/position';
-import { getModelServices } from '/@/api/device/modelOfMatter';
-import { findDictItemByCode } from '/@/api/system/dict';
-import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
-import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
-import { TransportTypeEnum } from '/@/views/device/profiles/components/TransportDescript/const';
-import { JSONEditor } from '/@/components/CodeEditor';
-import { CommandTypeEnum } from '/@/views/rule/linkedge/config/config.data';
-import { ModelOfMatterParams } from '/@/api/device/model/modelOfMatterModel';
-
-useComponentRegister('JSONEditor', JSONEditor);
-
-export enum BasicConfigField {
-  NAME = 'name',
-  REMARK = 'remark',
-}
-
-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 [];
-};
-
-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 [];
-};
-
-export enum DataSourceField {
-  IS_GATEWAY_DEVICE = 'gatewayDevice',
-  DEVICE_TYPE = 'deviceType',
-  TRANSPORT_TYPE = 'transportType',
-  ORIGINATION_ID = 'organizationId',
-  DEVICE_ID = 'deviceId',
-  // SLAVE_DEVICE_ID = 'slaveDeviceId',
-  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',
-}
-
-export const isControlComponent = (frontId: FrontComponent) => {
-  const list = [
-    FrontComponent.CONTROL_COMPONENT_SLIDING_SWITCH,
-    FrontComponent.CONTROL_COMPONENT_SWITCH_WITH_ICON,
-    FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH,
-  ];
-  return list.includes(frontId);
-};
-
-export const isMapComponent = (frontId: FrontComponent) => {
-  const list = [
-    FrontComponent.MAP_COMPONENT_TRACK_HISTORY,
-    FrontComponent.MAP_COMPONENT_TRACK_REAL,
-  ];
-  return list.includes(frontId);
-};
-
-const isTcpProfile = (transportType: string) => {
-  return transportType === TransportTypeEnum.TCP;
-};
-
-export const basicSchema: FormSchema[] = [
-  {
-    field: BasicConfigField.NAME,
-    label: '组件名称',
-    component: 'Input',
-    // rules: [{ required: true, message: '组件名称为必填项' }],
-    componentProps: {
-      placeholder: '请输入组件名称',
-      maxLength: 32,
-    },
-  },
-  {
-    field: BasicConfigField.REMARK,
-    label: '组件备注',
-    component: 'InputTextArea',
-    // rules: [{ required: true, message: '组件备注为必填项' }],
-    componentProps: {
-      placeholder: '请输入组件备注',
-      maxLength: 255,
-    },
-  },
-];
-
-export const dataSourceSchema = (isEdit: boolean, frontId?: string): FormSchema[] => {
-  // console.log(useSelectWidgetKeys());
-  // const isEdit = unref(useSelectWidgetMode()) === DataActionModeEnum.UPDATE;
-
-  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 (isEdit) {
-              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: 'ApiTreeSelect',
-      label: '组织',
-      colProps: { span: 8 },
-      rules: [{ required: true, message: '组织为必填项' }],
-      componentProps({ formActionType }) {
-        const { setFieldsValue } = formActionType;
-        return {
-          placeholder: '请选择组织',
-          api: async () => {
-            const data = await getOrganizationList();
-            copyTransFun(data as any as any[]);
-            return data;
-          },
-          onChange() {
-            setFieldsValue({
-              [DataSourceField.DEVICE_ID]: null,
-            });
-          },
-          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(frontId!)),
-      componentProps({ formModel }) {
-        const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
-        return {
-          api: async () => {
-            try {
-              if (deviceProfileId) {
-                return await getDeviceAttribute({
-                  deviceProfileId,
-                  dataType: isControlComponent(frontId!) ? 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(frontId!) && 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(frontId as FrontComponent) &&
-        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 (isEdit && ![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(frontId!) &&
-        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: '属性重命名',
-      },
-    },
-  ];
-};

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

-import { dateUtil } from '/@/utils/dateUtil';
-
-export interface RadioRecord {
-  width: number;
-  height: number;
-  isLess: boolean;
-  radio: number;
-}
-
-export const DEFAULT_ANIMATION_INTERVAL = 2000;
-
-export const DEFAULT_RADIO_RECORD: RadioRecord = {
-  width: 200,
-  height: 140,
-  isLess: false,
-  radio: 1,
-};
-
 export const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
-
-export const getUpdateTime = (updateTime?: string) => {
-  return updateTime ? dateUtil(updateTime).format(DEFAULT_DATE_FORMAT) : '暂无更新时间';
-};
-
-export const calcScale = (
-  width: number,
-  height: number,
-  widthRadio: number,
-  heightRadio: number
-): RadioRecord => {
-  width = width * (widthRadio / 100);
-  height = height * (heightRadio / 100);
-
-  const temp = width > height ? height ** 2 : width ** 2;
-
-  const isLess = temp < 300 * 300;
-
-  const radio = temp / (300 * 300);
-
-  return {
-    width,
-    height,
-    isLess,
-    radio,
-  };
-};
-
-export const fontSize = ({
-  radioRecord,
-  basic,
-  max,
-  min,
-}: {
-  radioRecord: RadioRecord;
-  basic: number;
-  max?: number;
-  min?: number;
-}) => {
-  const { radio } = radioRecord;
-  let res = basic * radio;
-  if (max && res > max) res = max;
-  if (min && res < min) res = min;
-  return res + 'px';
-};

-import { FrontComponent, GradientColor } from '../../const/const';
-import { FormSchema } from '/@/components/Form';
-
-export interface VisualOptionParams {
-  [visualOptionField.FONT_COLOR]: string;
-  [visualOptionField.UNIT]: string;
-  [visualOptionField.ICON_COLOR]: string;
-  [visualOptionField.ICON]: string;
-  [visualOptionField.FIRST_PHASE_COLOR]: string;
-  [visualOptionField.SECOND_PHASE_COLOR]: string;
-  [visualOptionField.THIRD_PHASE_COLOR]: string;
-  [visualOptionField.FIRST_PHASE_VALUE]: string;
-  [visualOptionField.SECOND_PHASE_VALUE]: string;
-  [visualOptionField.THIRD_PHASE_VALUE]: string;
-  [visualOptionField.SHOW_DEVICE_NAME]: string;
-}
-
-export enum visualOptionField {
-  FONT_COLOR = 'fontColor',
-  UNIT = 'unit',
-  ICON_COLOR = 'iconColor',
-  ICON = 'icon',
-  FIRST_PHASE_COLOR = 'firstPhaseColor',
-  SECOND_PHASE_COLOR = 'secondPhaseColor',
-  THIRD_PHASE_COLOR = 'thirdPhaseColor',
-  FIRST_PHASE_VALUE = 'firstPhaseValue',
-  SECOND_PHASE_VALUE = 'secondPhaseValue',
-  THIRD_PHASE_VALUE = 'thirdPhaseValue',
-  SHOW_DEVICE_NAME = 'showDeviceName',
-}
-
-export const modeOne: FormSchema[] = [
-  {
-    field: visualOptionField.FONT_COLOR,
-    label: '数值字体颜色',
-    component: 'ColorPicker',
-    changeEvent: 'update:value',
-    componentProps: {
-      defaultValue: '#000',
-    },
-  },
-  {
-    field: visualOptionField.SHOW_DEVICE_NAME,
-    label: '显示设备名称',
-    component: 'Checkbox',
-  },
-];
-
-export const modeTwo: FormSchema[] = [
-  {
-    field: visualOptionField.FONT_COLOR,
-    label: '数值字体颜色',
-    component: 'ColorPicker',
-    changeEvent: 'update:value',
-    componentProps: {
-      defaultValue: '#000',
-    },
-  },
-  {
-    field: visualOptionField.UNIT,
-    label: '数值单位',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入数值单位',
-    },
-  },
-  {
-    field: visualOptionField.ICON_COLOR,
-    label: '图标颜色',
-    component: 'ColorPicker',
-    changeEvent: 'update:value',
-    componentProps: {
-      defaultValue: '#367BFF',
-    },
-  },
-  {
-    field: visualOptionField.ICON,
-    label: '图标',
-    component: 'IconDrawer',
-    changeEvent: 'update:value',
-    componentProps({ formModel }) {
-      const color = formModel[visualOptionField.ICON_COLOR];
-      return {
-        color,
-      };
-    },
-  },
-  {
-    field: visualOptionField.SHOW_DEVICE_NAME,
-    label: '显示设备名称',
-    component: 'Checkbox',
-  },
-];
-
-export const modeThree: FormSchema[] = [
-  {
-    field: visualOptionField.FONT_COLOR,
-    label: '数值字体颜色',
-    component: 'ColorPicker',
-    changeEvent: 'update:value',
-    componentProps: {
-      defaultValue: '#000',
-    },
-  },
-  {
-    field: visualOptionField.UNIT,
-    label: '数值单位',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入数值单位',
-    },
-  },
-  {
-    field: visualOptionField.FIRST_PHASE_COLOR,
-    label: '一阶段颜色',
-    component: 'ColorPicker',
-    changeEvent: 'update:value',
-    componentProps: {
-      defaultValue: GradientColor.FIRST,
-    },
-  },
-  {
-    field: visualOptionField.FIRST_PHASE_VALUE,
-    label: '一阶段阀值',
-    component: 'InputNumber',
-    componentProps: {
-      placeholder: '请输入一阶段阀值',
-      min: 0,
-    },
-  },
-  {
-    field: visualOptionField.SECOND_PHASE_COLOR,
-    label: '二阶段颜色',
-    component: 'ColorPicker',
-    changeEvent: 'update:value',
-    componentProps: {
-      defaultValue: GradientColor.SECOND,
-    },
-  },
-  {
-    field: visualOptionField.SECOND_PHASE_VALUE,
-    label: '二阶段阀值',
-    component: 'InputNumber',
-    componentProps: ({ formModel }) => {
-      return {
-        placeholder: '请输入二阶段阀值',
-        min: formModel[visualOptionField.FIRST_PHASE_VALUE],
-      };
-    },
-  },
-  {
-    field: visualOptionField.THIRD_PHASE_COLOR,
-    label: '三阶段颜色',
-    component: 'ColorPicker',
-    changeEvent: 'update:value',
-    componentProps: {
-      defaultValue: GradientColor.THIRD,
-    },
-  },
-  {
-    field: visualOptionField.THIRD_PHASE_VALUE,
-    label: '三阶段阀值',
-    component: 'InputNumber',
-    componentProps: ({ formModel }) => {
-      return {
-        placeholder: '请输入三阶段阀值',
-        min: formModel[visualOptionField.SECOND_PHASE_VALUE],
-      };
-    },
-  },
-  {
-    field: visualOptionField.SHOW_DEVICE_NAME,
-    label: '显示设备名称',
-    component: 'Checkbox',
-  },
-];
-
-export const modeFour: FormSchema[] = [
-  {
-    field: visualOptionField.FONT_COLOR,
-    label: '数值字体颜色',
-    component: 'ColorPicker',
-    changeEvent: 'update:value',
-    componentProps: {
-      defaultValue: '#000',
-    },
-  },
-  {
-    field: visualOptionField.UNIT,
-    label: '数值单位',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入数值单位',
-    },
-  },
-  {
-    field: visualOptionField.SHOW_DEVICE_NAME,
-    label: '显示设备名称',
-    component: 'Checkbox',
-  },
-];
-
-export const modeFive: FormSchema[] = [
-  {
-    field: visualOptionField.FONT_COLOR,
-    label: '数值字体颜色',
-    component: 'ColorPicker',
-    changeEvent: 'update:value',
-    componentProps: {
-      defaultValue: '#000',
-    },
-  },
-  {
-    field: visualOptionField.ICON_COLOR,
-    label: '图标颜色',
-    component: 'ColorPicker',
-    changeEvent: 'update:value',
-    componentProps: {
-      defaultValue: '#367BFF',
-    },
-  },
-  {
-    field: visualOptionField.ICON,
-    label: '图标',
-    component: 'IconDrawer',
-    changeEvent: 'update:value',
-    componentProps({ formModel }) {
-      const color = formModel[visualOptionField.ICON_COLOR];
-      return {
-        color,
-      };
-    },
-  },
-  {
-    field: visualOptionField.SHOW_DEVICE_NAME,
-    label: '显示设备名称',
-    component: 'Checkbox',
-  },
-];
-
-export const schemasMap = new Map<FrontComponent, FormSchema[]>();
-
-schemasMap.set(FrontComponent.TEXT_COMPONENT_1, modeOne);
-schemasMap.set(FrontComponent.TEXT_COMPONENT_2, modeOne);
-schemasMap.set(FrontComponent.TEXT_COMPONENT_3, modeOne);
-schemasMap.set(FrontComponent.TEXT_COMPONENT_4, modeTwo);
-schemasMap.set(FrontComponent.TEXT_COMPONENT_5, modeTwo);
-schemasMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, modeOne);
-schemasMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, modeThree);
-schemasMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, modeFour);
-schemasMap.set(FrontComponent.CONTROL_COMPONENT_SWITCH_WITH_ICON, modeFive);
-schemasMap.set(FrontComponent.CONTROL_COMPONENT_SLIDING_SWITCH, modeOne);
-schemasMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, modeOne);

 <script lang="ts" setup>
   import { Palette } from '/@/views/visual/palette';
 </script>
+
 <template>
   <Palette />
 </template>

-<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>

-import { unref } from 'vue';
-import { Layout } from 'vue3-grid-layout';
-import { DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH, DEFAULT_MAX_COL } from '../config/config';
-
-interface GapRecord {
-  maxGap: number;
-  startIndex: Nullable<number>;
-  endIndex: Nullable<number>;
-}
-
-/**
- * @description calculate where to place the component
- * @returns
- */
-export function useCalcGridLayout() {
-  const calcLayoutInfo = (
-    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 };
-  };
-
-  return { calcLayoutInfo };
-}

-import { useWebSocket } from '@vueuse/core';
-import { Ref, unref } from 'vue';
-import { DataBoardLayoutInfo } from '../types/type';
-import { useGlobSetting } from '/@/hooks/setting';
-import { isNullAndUnDef } from '/@/utils/is';
-import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
-import { isShareMode } from '/@/views/sys/share/hook';
-
-interface SocketMessage {
-  tsSubCmds: SocketMessageItem[];
-}
-
-interface SocketMessageItem {
-  entityType: string;
-  entityId: string;
-  scope: string;
-  cmdId: number;
-  keys: string;
-}
-
-interface GroupMappingRecord {
-  id: string;
-  recordIndex: number;
-  dataSourceIndex: number;
-  attribute: string;
-  deviceId: string;
-  slaveDeviceId: string;
-}
-
-interface ResponseMessage {
-  subscriptionId: number;
-  errorCode: number;
-  errorMsg: Nullable<string>;
-  data: {
-    [key: string]: [[number, string]];
-  };
-  latestValues: {
-    [key: string]: number;
-  };
-}
-
-const generateMessage = (deviceId: string, cmdId: number, attr: string): SocketMessageItem => {
-  return {
-    entityType: 'DEVICE',
-    entityId: deviceId,
-    scope: 'LATEST_TELEMETRY',
-    cmdId,
-    keys: attr,
-  };
-};
-
-export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
-  const token = isShareMode() ? getShareJwtToken() : getJwtToken();
-
-  const cmdIdMapping = new Map<number, GroupMappingRecord[]>();
-
-  const groupMapping = new Map<string, GroupMappingRecord[]>();
-
-  const waitSendQueue: string[] = [];
-
-  const { socketUrl } = useGlobSetting();
-
-  const config = {
-    server: `${socketUrl}${token}`,
-  };
-
-  // const getNeedUpdateValueById = (componentId: string, deviceId: string) => {};
-
-  const getNeedUpdateValueByIndex = (recordIndex: number, dataSourceIndex: number) => {
-    return unref(dataSourceRef)[recordIndex].record.dataSource[dataSourceIndex];
-  };
-
-  const mergeGroup = (dataSourceRef: Ref<DataBoardLayoutInfo[]>) => {
-    for (let recordIndex = 0; recordIndex < unref(dataSourceRef).length; recordIndex++) {
-      const record = unref(dataSourceRef).at(recordIndex)!;
-      const dataSource = record?.record.dataSource;
-      for (let dataSourceIndex = 0; dataSourceIndex < dataSource.length; dataSourceIndex++) {
-        const dataDatum = dataSource.at(dataSourceIndex)!;
-        const { deviceId, slaveDeviceId, attribute } = dataDatum;
-        const groupMappingRecord: GroupMappingRecord = {
-          id: record.record.id,
-          recordIndex,
-          dataSourceIndex,
-          attribute,
-          deviceId,
-          slaveDeviceId,
-        };
-        if (groupMapping.has(slaveDeviceId || deviceId)) {
-          const group = groupMapping.get(slaveDeviceId || deviceId);
-          group?.push(groupMappingRecord);
-        } else {
-          groupMapping.set(slaveDeviceId || deviceId, [groupMappingRecord]);
-        }
-      }
-    }
-  };
-
-  function generateGroupMessage() {
-    const messageList: SocketMessageItem[] = [];
-    let cmdId = 0;
-    groupMapping.forEach((value, key) => {
-      const message = generateMessage(
-        key,
-        cmdId,
-        Array.from(new Set(value.map((item) => item.attribute))).join(',')
-      );
-      messageList.push(message);
-      setCmdId(cmdId, value);
-      cmdId++;
-    });
-    return messageList;
-  }
-
-  const { close, send, open, status } = useWebSocket(config.server, {
-    onConnected() {
-      if (waitSendQueue.length) {
-        waitSendQueue.forEach((string) => {
-          send(string);
-        });
-        waitSendQueue.length = 0;
-      }
-    },
-    onMessage(_ws, message) {
-      try {
-        const res: ResponseMessage = JSON.parse(message.data);
-        const { subscriptionId, data = {} } = res;
-        if (isNullAndUnDef(subscriptionId)) return;
-        const mappingRecord = cmdIdMapping.get(subscriptionId);
-        if (!mappingRecord || !data) return;
-
-        for (const item of mappingRecord) {
-          const { attribute, recordIndex, dataSourceIndex } = item;
-          if (!attribute) continue;
-          const [[timespan, value]] = data[attribute];
-          const record = getNeedUpdateValueByIndex(recordIndex, dataSourceIndex);
-          record.componentInfo.value = value;
-          record.componentInfo.updateTime = timespan;
-        }
-        return;
-      } catch (error) {
-        throw Error(error as string);
-      }
-    },
-    // onDisconnected() {
-    //   close();
-    // },
-  });
-
-  const setCmdId = (cmdId: number, record: GroupMappingRecord[]) => {
-    cmdIdMapping.set(cmdId, record);
-  };
-
-  const transformSocketMessageItem = () => {
-    mergeGroup(dataSourceRef);
-    return {
-      tsSubCmds: generateGroupMessage(),
-    } as SocketMessage;
-  };
-
-  const beginSendMessage = () => {
-    close();
-    cmdIdMapping.clear();
-
-    // TODO current need use setTimeout delay 1 second to reconnect
-    setTimeout(() => {
-      open();
-      const messageList = transformSocketMessageItem();
-
-      if (unref(status) !== 'OPEN') {
-        waitSendQueue.push(JSON.stringify(messageList));
-        return;
-      }
-      send(JSON.stringify(messageList));
-    }, 1000);
-  };
-
-  return {
-    close,
-    send,
-    open,
-    beginSendMessage,
-  };
-}

-export type UpdateCenter = ReturnType<typeof useUpdateCenter>;
-
-export function useUpdateCenter() {
-  const eventCenter = new Map<string, Fn>();
-
-  const update = () => {
-    eventCenter.forEach((method) => {
-      method();
-    });
-  };
-
-  const add = (key: string, method: Fn) => {
-    if (eventCenter.has(key)) {
-      window.console.log(`Update Center Has Exist This Update Method(${key})`);
-      return;
-    }
-    eventCenter.set(key, method);
-  };
-
-  const remove = (key: string) => {
-    if (eventCenter.has(key)) eventCenter.delete(key);
-  };
-
-  return { update, add, remove };
-}

-import { inject, provide } from 'vue';
-import { UpdateCenter } from './useUpdateCenter';
-
-const key = Symbol('visual-board-content');
-
-type Instance = UpdateCenter;
-
-export function createVisualBoardContext(instance: Instance) {
-  provide(key, instance);
-}
-
-export function useVisualBoardContext() {
-  return inject(key) as Instance;
-}

@@ -6,7 +6,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import Dropdown from '/@/components/Dropdown/src/Dropdown.vue';
   import { DropMenu } from '/@/components/Dropdown';
-  import { DATA_BOARD_SHARE_URL, MoreActionEvent, VisualBoardPermission } from './config/config';
+  import { MoreActionEvent, VisualBoardPermission } from './config/config';
   import { useModal } from '/@/components/Modal';
   import PanelDetailModal from './components/PanelDetailModal.vue';
   import { getDataBoardList, deleteDataBoard, shareBoard } from '/@/api/dataBoard';
@@ -25,6 +25,7 @@
   import { DataActionModeEnum } from '/@/enums/toolEnum';
   import { useRole } from '/@/hooks/business/useRole';
   import { useClipboard } from '@vueuse/core';
+  import { DATA_BOARD_SHARE_URL } from '../palette';
 
   const ListItem = List.Item;
   const router = useRouter();

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

 <script lang="ts" setup>
+  import { commonDataSourceSchemas } from '../../packages/config/common.config';
   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<{
+  defineProps<{
     values: PublicComponentValueType;
     componentConfig: CreateComponentType;
   }>();
@@ -17,7 +17,7 @@
     showActionButtonGroup: false,
     layout: 'horizontal',
     labelCol: { span: 0 },
-    schemas: dataSourceSchema(false, props.componentConfig.componentConfig.key),
+    schemas: commonDataSourceSchemas(),
   });
 
   const getFormValues = () => {

 <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';
+  import { commonDataSourceSchemas } from '../../../config/common.config';
 
-  const props = defineProps<{
+  defineProps<{
     values: PublicComponentValueType;
     componentConfig: CreateComponentType;
   }>();
@@ -17,7 +17,7 @@
     showActionButtonGroup: false,
     layout: 'horizontal',
     labelCol: { span: 0 },
-    schemas: dataSourceSchema(false, props.componentConfig.componentConfig.key),
+    schemas: commonDataSourceSchemas(),
   });
 
   const getFormValues = () => {

 <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';
+  import { commonDataSourceSchemas } from '../../../config/common.config';
 
-  const props = defineProps<{
+  defineProps<{
     values: PublicComponentValueType;
     componentConfig: CreateComponentType;
   }>();
@@ -17,7 +17,7 @@
     showActionButtonGroup: false,
     layout: 'horizontal',
     labelCol: { span: 0 },
-    schemas: dataSourceSchema(false, props.componentConfig.componentConfig.key),
+    schemas: commonDataSourceSchemas(),
   });
 
   const getFormValues = () => {

 <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';
+  import { commonDataSourceSchemas } from '../../../config/common.config';
 
-  const props = defineProps<{
+  defineProps<{
     values: PublicComponentValueType;
     componentConfig: CreateComponentType;
   }>();
@@ -17,7 +17,7 @@
     showActionButtonGroup: false,
     layout: 'horizontal',
     labelCol: { span: 0 },
-    schemas: dataSourceSchema(false, props.componentConfig.componentConfig.key),
+    schemas: commonDataSourceSchemas(),
   });
 
   const getFormValues = () => {

 <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';
+  import { commonDataSourceSchemas } from '../config/common.config';
 
-  const props = defineProps<{
+  defineProps<{
     values: PublicComponentValueType;
     componentConfig: CreateComponentType;
   }>();
@@ -17,7 +17,7 @@
     showActionButtonGroup: false,
     layout: 'horizontal',
     labelCol: { span: 0 },
-    schemas: dataSourceSchema(false, props.componentConfig.componentConfig.key),
+    schemas: commonDataSourceSchemas(),
   });
 
   const getFormValues = () => {