Merge branch 'ww' into 'main'

chore: merge code && resolve conflict

See merge request huang/yun-teng-iot-front!295

 import {
   AddDataBoardParams,
   AddDataComponentParams,
+  ComponentInfoDetail,
   DataBoardList,
   DataComponentRecord,
   GetDataBoardParams,
@@ -103,12 +104,10 @@ export const updateDataBoardLayout = (params: UpdateDataBoardLayoutParams) => {
  * @returns
  */
 export const getDataComponent = (params: string) => {
-  return defHttp.get<{ data: { componentData: DataComponentRecord[]; componentLayout: Layout[] } }>(
-    {
-      url: `${DataComponentUrl.GET_DATA_COMPONENT}/${params}`,
-      // params: { boardId: params },
-    }
-  );
+  return defHttp.get<ComponentInfoDetail>({
+    url: `${DataComponentUrl.GET_DATA_COMPONENT}/${params}`,
+    // params: { boardId: params },
+  });
 };
 
 export const addDataComponent = (params: AddDataComponentParams) => {
@@ -151,7 +150,7 @@ export const updateDataComponent = (params: UpdateDataComponentParams) => {
  */
 export const getShareBoardComponentInfo = (params: { boardId: string; tenantId: string }) => {
   const { boardId, tenantId } = params;
-  return defHttp.get({
+  return defHttp.get<ComponentInfoDetail>({
     url: `${DataBoardShareUrl.GET_DATA_COMPONENT}/${boardId}/${tenantId}`,
   });
 };

@@ -136,3 +136,7 @@ export interface MasterDeviceList {
   id: string;
   name: string;
 }
+
+export interface ComponentInfoDetail {
+  data: { componentData: DataComponentRecord[]; componentLayout: Layout[] };
+}

@@ -38,6 +38,10 @@
       type: Object as PropType<RadioRecord>,
       default: () => DEFAULT_RADIO_RECORD,
     },
+    random: {
+      type: Boolean,
+      default: true,
+    },
   });
 
   const getControlsWidgetId = () => `widget-chart-${props.value.id}`;
@@ -85,13 +89,24 @@
     }
   );
 
+  let timeout: Nullable<number> = null;
+
+  function handleRandomValue() {
+    const newValue = Math.floor(Math.random() * 100);
+    const updateFn = getUpdateValueFn(props.layout.componentType);
+    unref(chartRef)?.setOption((updateFn(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 lang="ts" setup>
-  import { computed } from 'vue';
+  import { computed, onMounted, onUnmounted, ref, unref } from 'vue';
   import { Space, Tooltip } from 'ant-design-vue';
-  import type { DigitalDashBoardLayout, DigitalDashBoardValue } from './digitalDashBoard.config';
+  import {
+    DigitalComponentDefaultConfig,
+    DigitalDashBoardLayout,
+    DigitalDashBoardValue,
+  } from './digitalDashBoard.config';
   import { dateUtil } from '/@/utils/dateUtil';
   import {
     fontSize,
     RadioRecord,
     DEFAULT_DATE_FORMAT,
     DEFAULT_RADIO_RECORD,
+    DEFAULT_ANIMATION_INTERVAL,
   } from '../../detail/config/util';
+  import { isNaN } from 'lodash';
 
   const props = defineProps<{
     layout: DigitalDashBoardLayout;
     value: DigitalDashBoardValue;
     radio?: RadioRecord;
+    random?: boolean;
   }>();
 
+  const changeValue = ref(0);
+
+  const getPropsValue = computed(() => {
+    return { value: unref(changeValue), ...DigitalComponentDefaultConfig, ...props.value };
+  });
+
   const integerPart = computed(() => {
-    let { value = 0 } = props.value;
+    let { value = 0 } = unref(getPropsValue);
     const { max = 5 } = props.layout;
     if (isNaN(value)) value = 0;
     let _value = Number(value).toFixed(2).split('.')[0];
@@ -28,7 +41,7 @@
   });
 
   const decimalPart = computed(() => {
-    let { value = 0 } = props.value;
+    let { value = 0 } = unref(getPropsValue);
     const { keepNumber = 2 } = props.layout;
     if (isNaN(value)) value = 0;
     let _value = Number(value)?.toFixed(2).split('.')[1];
@@ -43,6 +56,23 @@
     const { radio } = props.radio || DEFAULT_RADIO_RECORD;
     return radio;
   });
+
+  let timeout: Nullable<number> = null;
+
+  const handleRandom = () => {
+    const newValue = Math.floor(Math.random() * 100);
+    changeValue.value = newValue;
+  };
+
+  onMounted(() => {
+    if (props.random)
+      timeout = setInterval(handleRandom, DEFAULT_ANIMATION_INTERVAL) as unknown as number;
+  });
+
+  onUnmounted(() => {
+    clearInterval(timeout as number);
+    timeout = null;
+  });
 </script>
 
 <template>
@@ -56,7 +86,7 @@
               :key="number"
               class="border border-gray-400 p-2"
               :style="{
-                color: props.value.fontColor,
+                color: getPropsValue.fontColor,
                 fontSize: fontSize({ radio: getRadio, basic: 20 }),
               }"
             >
@@ -69,7 +99,7 @@
               :key="number"
               class="border border-gray-400 p-1"
               :style="{
-                color: props.value.fontColor,
+                color: getPropsValue.fontColor,
                 fontSize: fontSize({ radio: getRadio, basic: 18 }),
               }"
             >
@@ -84,7 +114,7 @@
         :style="{ fontSize: fontSize({ radio: getRadio, basic: 18 }) }"
       >
         <span>{{ props.value.name || '电表' }}</span>
-        <span class="px-1">({{ 'kw/h' }})</span>
+        <span class="px-1">({{ getPropsValue.unit }})</span>
       </div>
       <div
         class="text-center mt-1 text-gray-400 text-xs truncate"

 import { EChartsOption } from 'echarts';
 import { fontSize } from '../../detail/config/util';
 import { Gradient, visualOptionField } from '../../detail/config/visualOptions';
-import { DataComponentRecord, DataSource, GradientInfo } from '/@/api/dataBoard/model';
+import {
+  ComponentInfo,
+  DataComponentRecord,
+  DataSource,
+  GradientInfo,
+} from '/@/api/dataBoard/model';
 import { isArray } from '/@/utils/is';
 import { buildUUID } from '/@/utils/uuid';
 
@@ -36,11 +41,13 @@ export interface DashboardComponentLayout {
   componentType: InstrumentComponentType;
 }
 
-export const instrumentComponent1 = (params?: {
-  value: number;
-  unit: string;
-  fontColor: string;
-}): EChartsOption => {
+export enum GradientColor {
+  FIRST = '#67e0e3',
+  SECOND = '#37a2da',
+  THIRD = '#fd666d',
+}
+
+export const instrumentComponent1 = (params?: Partial<ComponentInfo>): EChartsOption => {
   const { value = 10, unit = '°C' } = params || {};
   return {
     series: [
@@ -108,7 +115,7 @@ export const instrumentComponent1 = (params?: {
         },
         data: [
           {
-            value: value,
+            value: value as number,
           },
         ],
       },
@@ -146,7 +153,7 @@ export const instrumentComponent1 = (params?: {
         },
         data: [
           {
-            value: value,
+            value: value as number,
           },
         ],
       },
@@ -154,16 +161,11 @@ export const instrumentComponent1 = (params?: {
   };
 };
 
-export const instrumentComponent2 = (params?: {
-  gradient: GradientInfo[];
-  value: number;
-  unit: string;
-  fontColor: string;
-}): EChartsOption => {
-  const { gradient = [], value = 0, unit = 'km/h' } = params || {};
-  const firstRecord = getGradient(Gradient.FIRST, gradient);
-  const secondRecord = getGradient(Gradient.SECOND, gradient);
-  const thirdRecord = getGradient(Gradient.THIRD, gradient);
+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(''));
@@ -182,9 +184,9 @@ export const instrumentComponent2 = (params?: {
           lineStyle: {
             width: 20,
             color: [
-              [firstGradient, firstRecord?.color || '#67e0e3'],
-              [secondGradient, secondRecord?.color || '#37a2da'],
-              [1, thirdRecord?.color || '#fd666d'],
+              [firstGradient, firstRecord?.color || GradientColor.FIRST],
+              [secondGradient, secondRecord?.color || GradientColor.SECOND],
+              [1, thirdRecord?.color || GradientColor.THIRD],
             ],
           },
         },
@@ -223,7 +225,7 @@ export const instrumentComponent2 = (params?: {
         },
         data: [
           {
-            value: value,
+            value: value as number,
           },
         ],
       },
@@ -293,14 +295,23 @@ export const update_instrument_2_value = (value) => {
 
 function setGradientInfo(dataSource: DataSource) {
   const componentInfo = dataSource.componentInfo;
-  return instrumentComponent2({
-    unit: componentInfo.unit,
-    value: 0,
-    gradient: componentInfo.gradientInfo,
-    fontColor: componentInfo.fontColor,
-  });
+  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,

+import { ComponentInfo } from '/@/api/dataBoard/model';
+
 export type DigitalDashBoardComponentType = 'digital-dashboard-component';
 
 export interface DigitalDashBoardLayout {
@@ -12,3 +14,8 @@ export interface DigitalDashBoardValue {
   value?: number;
   fontColor?: string;
 }
+
+export const DigitalComponentDefaultConfig: Partial<ComponentInfo> = {
+  fontColor: '#000',
+  unit: 'kw/h',
+};

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

@@ -7,7 +7,7 @@
     DEFAULT_RADIO_RECORD,
     DEFAULT_DATE_FORMAT,
   } from '../../detail/config/util';
-  import type { TextComponentLayout, TextComponentValue } from './config';
+  import { TextComponentDefaultConfig, TextComponentLayout, TextComponentValue } from './config';
   import { SvgIcon } from '/@/components/Icon';
   import { dateUtil } from '/@/utils/dateUtil';
   const props = defineProps({
@@ -17,7 +17,8 @@
     },
     value: {
       type: Object as PropType<TextComponentValue>,
-      default: () => ({ name: '温度', value: 123 } as TextComponentValue),
+      default: () =>
+        ({ ...TextComponentDefaultConfig, name: '温度', value: 123 } as TextComponentValue),
     },
     radio: {
       type: Object as PropType<RadioRecord>,
@@ -65,8 +66,8 @@
               prefix="iconfont"
               :style="{
                 color: props.value.iconColor,
-                width: fontSize({ radio: getRadio, basic: 50 }),
-                height: fontSize({ radio: getRadio, basic: 50 }),
+                width: fontSize({ radio: getRadio, basic: 50, min: 16 }),
+                height: fontSize({ radio: getRadio, basic: 50, min: 16 }),
               }"
             />
           </div>

-import { formatToDateTime } from '/@/utils/dateUtil';
-import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
+import { ComponentInfo, DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
 export interface TextComponentLayout {
   id: string;
   base?: boolean;
@@ -26,28 +25,21 @@ export type TextComponentType =
   | 'text-component-4'
   | 'text-component-5';
 
-type TextComponentDefault = TextComponentLayout & { value: TextComponentValue };
+type TextComponentDefault = TextComponentLayout;
 
 export const TextComponent1Config: TextComponentDefault = {
   id: 'text-component-1',
   base: true,
-  value: { value: 123, name: '温度' },
 };
 
 export const TextComponent2Config: TextComponentDefault = {
   id: 'text-component-2',
   base: false,
-  value: { value: 123, name: '温度' },
 };
 export const TextComponent3Config: TextComponentDefault = {
   id: 'text-component-3',
   base: false,
   showUpdate: true,
-  value: {
-    value: 123,
-    name: '温度',
-    updateTime: formatToDateTime(new Date(), 'YYYY-MM-DD HH:mm:ss'),
-  },
 };
 export const TextComponent4Config: TextComponentDefault = {
   id: 'text-component-4',
@@ -55,19 +47,19 @@ export const TextComponent4Config: TextComponentDefault = {
   showIcon: true,
   showUpdate: true,
   showUnit: true,
-  value: {
-    value: 123,
-    name: '温度',
-    updateTime: formatToDateTime(new Date(), 'YYYY-MM-DD HH:mm:ss'),
-    unit: '℃',
-  },
 };
 export const TextComponent5Config: TextComponentDefault = {
   id: 'text-component-5',
   base: false,
   showIcon: true,
   showUnit: true,
-  value: { value: 123, name: '温度', unit: '℃' },
+};
+
+export const TextComponentDefaultConfig: Partial<ComponentInfo> = {
+  fontColor: '#000',
+  unit: '℃',
+  iconColor: '#000',
+  icon: 'CO2',
 };
 
 export const textComponentConfig: TextComponentDefault[] = [

@@ -21,6 +21,7 @@
   const props = defineProps<{
     record: DataBoardLayoutInfo;
     frontId?: string;
+    defaultConfig?: Partial<ComponentInfo>;
   }>();
 
   const { createMessage } = useMessage();
@@ -29,7 +30,9 @@
   //   ...props.record,
   // } as unknown as DataBoardLayoutInfo);
 
-  const dataSource = ref<DataSourceEl[]>([{ id: buildUUID() } as unknown as DataSourceEl]);
+  const dataSource = ref<DataSourceEl[]>([
+    { id: buildUUID(), componentInfo: props.defaultConfig || {} } as unknown as DataSourceEl,
+  ]);
 
   const [basicRegister, basicMethod] = useForm({
     schemas: basicSchema,
@@ -65,7 +68,7 @@
       const componentInfo = unref(dataSource)[index].componentInfo || {};
       _dataSource.push({
         ...value,
-        componentInfo: { ...componentInfo },
+        componentInfo: { ...(props.defaultConfig || {}), ...componentInfo },
       });
     }
     return _dataSource;
@@ -96,9 +99,17 @@
       createMessage.warning('请先选择可视化组件');
       return;
     }
+
+    // const defaultConfig = getComponentDefaultConfig(props.frontId as WidgetComponentType);
+
+    const componentInfo: ComponentInfo = {
+      ...(props.defaultConfig || {}),
+      ...(item.componentInfo || {}),
+    };
+
     openModal(true, {
       recordId: item.id,
-      componentInfo: item.componentInfo,
+      componentInfo,
     });
   };
 
@@ -111,6 +122,7 @@
   const handleAdd = () => {
     unref(dataSource).push({
       id: buildUUID(),
+      componentInfo: props.defaultConfig || {},
     } as unknown as DataSourceEl);
   };
 
@@ -185,19 +197,19 @@
       </div>
       <div class="flex justify-center gap-3 w-24">
         <Tooltip title="复制">
-          <CopyOutlined @click="handleCopy(item)" class="cursor-pointer text-lg !leading-52px" />
+          <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-52px"
+            class="cursor-pointer text-lg !leading-32px"
           />
         </Tooltip>
         <Tooltip title="删除">
           <DeleteOutlined
             @click="handleDelete(item)"
-            class="cursor-pointer text-lg !leading-52px"
+            class="cursor-pointer text-lg !leading-32px"
           />
         </Tooltip>
       </div>

@@ -10,12 +10,13 @@
   import { DataBoardLayoutInfo } from '../../types/type';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { decode } from '../../config/config';
+  import { ComponentInfo } from '/@/api/dataBoard/model';
 
   interface DataComponentRouteParams extends RouteParams {
     id: string;
   }
 
-  const emit = defineEmits(['submit', 'register']);
+  const emit = defineEmits(['update', 'create', 'register']);
 
   const ROUTE = useRoute();
 
@@ -31,12 +32,13 @@
 
   const componentRecord = ref<DataBoardLayoutInfo>({} as unknown as DataBoardLayoutInfo);
 
+  const componentDefaultConfig = ref<Partial<ComponentInfo>>({});
+
   const [register, { closeModal, changeOkLoading }] = useModalInner(
     (data: { isEdit: boolean; record?: DataBoardLayoutInfo }) => {
       componentRecord.value = data.record || ({} as unknown as DataBoardLayoutInfo);
       frontId.value = data.record?.record?.frontId || '';
       isEdit.value = data.isEdit || false;
-      console.log(unref(isEdit));
     }
   );
 
@@ -54,6 +56,10 @@
 
   const handleAddComponent = async (value: Recordable) => {
     try {
+      if (!unref(frontId)) {
+        createMessage.warning('请选择可视化组件');
+        return;
+      }
       changeOkLoading(true);
       await addDataComponent({
         boardId: unref(boardId),
@@ -61,7 +67,7 @@
       });
       createMessage.success('创建成功');
       closeModal();
-      emit('submit');
+      emit('create');
     } catch (error) {
       // createMessage.error('创建失败');
     } finally {
@@ -72,7 +78,7 @@
   const handleUpdateComponent = async (value: Recordable) => {
     try {
       changeOkLoading(true);
-      await updateDataComponent({
+      const res = await updateDataComponent({
         boardId: unref(boardId),
         record: {
           id: unref(componentRecord).i,
@@ -83,13 +89,18 @@
       });
       createMessage.success('修改成功');
       closeModal();
-      emit('submit');
+      // emit('submit');
+      emit('update', res.data.id);
     } catch (error) {
       // createMessage.error('修改失败');
     } finally {
       changeOkLoading(false);
     }
   };
+
+  const handleComponentCheckedChange = (record: ComponentInfo) => {
+    componentDefaultConfig.value = record;
+  };
 </script>
 
 <template>
@@ -108,10 +119,11 @@
             ref="basicConfigurationEl"
             :front-id="frontId"
             :record="componentRecord"
+            :defaultConfig="componentDefaultConfig"
           />
         </Tabs.TabPane>
         <Tabs.TabPane key="2" tab="可视化配置">
-          <VisualConfiguration v-model:value="frontId" />
+          <VisualConfiguration v-model:value="frontId" @change="handleComponentCheckedChange" />
         </Tabs.TabPane>
       </Tabs>
     </section>

@@ -105,6 +105,7 @@
       // 发送请求
       loading.value = true;
       const res = await getDeviceHistoryInfo(searchParams);
+      loading.value = false;
       // 判断数据对象是否为空
       if (!Object.keys(res).length) {
         isNull.value = false;
@@ -113,7 +114,6 @@
         isNull.value = true;
       }
       setChartOptions(res, value.keys);
-      loading.value = false;
     },
   });
 
@@ -150,6 +150,7 @@
       startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
       endTs: Date.now(),
       agg: AggregateDataEnum.NONE,
+      limit: 7,
     });
 
     // 判断对象是否为空
@@ -218,7 +219,11 @@
         <div v-show="isNull" ref="chartRef" :style="{ height: '350px', width: '100%' }">
           <Loading :loading="loading" :absolute="true" />
         </div>
-        <Empty description="暂无数据，请选择设备查询" v-show="!isNull" />
+        <Empty
+          class="h-350px flex flex-col justify-center items-center"
+          description="暂无数据，请选择设备查询"
+          v-show="!isNull"
+        />
       </section>
     </section>
   </BasicModal>

@@ -5,15 +5,19 @@
   import { textComponentConfig } from '../../components/TextComponent/config';
   import { instrumentComponentConfig } from '../../components/InstrumentComponent';
   import { pictureComponentList } from '../../components/PictureComponent';
+  import { getComponentDefaultConfig } from '../config/help';
+  import { WidgetComponentType } from '../config/visualOptions';
   const props = defineProps<{
     value: string;
   }>();
-  const emit = defineEmits(['update:value']);
+  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 handleCheck = (checked: string) => {
+  const handleCheck = (checked: WidgetComponentType) => {
+    const defaultConfig = getComponentDefaultConfig(checked);
     emit('update:value', checked);
+    emit('change', defaultConfig);
   };
 </script>
 
@@ -59,7 +63,12 @@
                 :control-id="item.id"
                 @change="handleCheck"
               >
-                <component :is="item.component" :layout="item.layout" :value="item.value" />
+                <component
+                  :is="item.component"
+                  :random="true"
+                  :layout="item.layout"
+                  :value="item.value"
+                />
               </VisualWidgetSelect>
             </List.Item>
           </template>

@@ -87,7 +87,7 @@
     @register="register"
     @ok="handleClose"
     title="选项"
-    width="60%"
+    width="40%"
   >
     <BasicForm class="form" @register="registerForm" :schemas="getSchemas" />
   </BasicModal>

@@ -20,10 +20,10 @@
 
 <template>
   <Card
-    :style="{ borderColor: props.controlId === props.checkedId ? '#1a74e8' : '#f0f0f0' }"
+    :style="{ borderColor: props.controlId === props.checkedId ? '#1a74e8' : '#dcdfe6' }"
     hoverable
     bordered
-    class="w-60 h-60 widget-select !bg-light-50"
+    class="w-60 h-60 widget-select !bg-light-50 cursor-pointer"
     @click="handleClick"
   >
     <div class="widget-container">
@@ -48,7 +48,7 @@
   }
 
   .widget-select:deep(.ant-card-meta) {
-    border-top: 1px solid #efefef;
+    border-top: 1px solid #dcdfe6;
     width: 100%;
     height: 40px;
     text-align: center;

@@ -6,20 +6,24 @@ import {
   TextComponent3Config,
   TextComponent4Config,
   TextComponent5Config,
+  TextComponentDefaultConfig,
   transformTextComponentConfig,
 } from '../../components/TextComponent/config';
-import { DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
+import { ComponentInfo, DataComponentRecord, DataSource } from '/@/api/dataBoard/model';
 import DashBoardComponent from '../../components/InstrumentComponent/DashBoardComponent.vue';
 import PictureComponent from '../../components/PictureComponent/PictureComponent.vue';
 import { transformPictureConfig } from '../../components/PictureComponent/pictureComponent.config';
 import { WidgetComponentType } from './visualOptions';
 import {
   DashboardComponentLayout,
+  Instrument1DefaultConfig,
+  Instrument2DefaultConfig,
   instrumentComponent1,
   instrumentComponent2,
   transformDashboardComponentConfig,
 } from '../../components/InstrumentComponent/dashBoardComponent.config';
 import DigitalDashBoard from '../../components/InstrumentComponent/DigitalDashBoard.vue';
+import { DigitalComponentDefaultConfig } from '../../components/InstrumentComponent/digitalDashBoard.config';
 export enum FrontComponent {
   TEXT_COMPONENT_1 = 'text-component-1',
   TEXT_COMPONENT_2 = 'text-component-2',
@@ -42,6 +46,11 @@ export interface ComponentConfig {
   ) => Recordable;
 }
 
+export const frontComponentDefaultConfigMap = new Map<
+  WidgetComponentType,
+  Partial<ComponentInfo>
+>();
+
 export const frontComponentMap = new Map<WidgetComponentType, ComponentConfig>();
 
 frontComponentMap.set(FrontComponent.TEXT_COMPONENT_1, {
@@ -103,3 +112,21 @@ frontComponentMap.set(FrontComponent.PICTURE_COMPONENT_1, {
   ComponentConfig: {},
   transformConfig: transformPictureConfig,
 });
+
+frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_1, TextComponentDefaultConfig);
+frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_2, TextComponentDefaultConfig);
+frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_3, TextComponentDefaultConfig);
+frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_4, TextComponentDefaultConfig);
+frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_5, TextComponentDefaultConfig);
+
+frontComponentDefaultConfigMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, Instrument1DefaultConfig);
+frontComponentDefaultConfigMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, Instrument2DefaultConfig);
+
+frontComponentDefaultConfigMap.set(
+  FrontComponent.DIGITAL_DASHBOARD_COMPONENT,
+  DigitalComponentDefaultConfig
+);
+
+export const getComponentDefaultConfig = (key: WidgetComponentType) => {
+  return frontComponentDefaultConfigMap.get(key) || {};
+};

@@ -5,6 +5,8 @@ export interface RadioRecord {
   radio: number;
 }
 
+export const DEFAULT_ANIMATION_INTERVAL = 2000;
+
 export const DEFAULT_RADIO_RECORD: RadioRecord = {
   width: 300,
   height: 300,
@@ -37,8 +39,19 @@ export const calcScale = (
   };
 };
 
-export const fontSize = ({ radio, basic, max }: { radio: number; basic: number; max?: number }) => {
+export const fontSize = ({
+  radio,
+  basic,
+  max,
+  min,
+}: {
+  radio: number;
+  basic: number;
+  max?: number;
+  min?: number;
+}) => {
   let res = basic * radio;
   if (max && res > max) res = max;
+  if (min && res < min) res = min;
   return res + 'px';
 };

@@ -175,7 +175,7 @@ schemasMap.set('text-component-1', modeOne);
 schemasMap.set('text-component-2', modeOne);
 schemasMap.set('text-component-3', modeOne);
 schemasMap.set('text-component-4', modeTwo);
-schemasMap.set('text-component-4', modeTwo);
+schemasMap.set('text-component-5', modeTwo);
 schemasMap.set('instrument-component-1', modeOne);
 schemasMap.set('instrument-component-2', modeThree);
 schemasMap.set('digital-dashboard-component', modeFour);

@@ -24,7 +24,12 @@
   } from '/@/api/dataBoard';
   import { useRoute, useRouter } from 'vue-router';
   import { computed, unref } from '@vue/reactivity';
-  import { DataComponentRecord, DataSource, Layout } from '/@/api/dataBoard/model';
+  import {
+    ComponentInfoDetail,
+    DataComponentRecord,
+    DataSource,
+    Layout,
+  } from '/@/api/dataBoard/model';
   import { frontComponentMap } from './config/help';
   import { calcScale } from './config/util';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -98,6 +103,9 @@
       width = 100;
     }
 
+    data.width = newWPx;
+    data.height = newHPx;
+
     data.record.dataSource = data?.record.dataSource.map((item) => {
       if (!item.uuid) item.uuid = buildUUID();
       return {
@@ -194,7 +202,7 @@
     try {
       return await getDataComponent(unref(getBoardId));
     } catch (error) {}
-    return [];
+    return {} as ComponentInfoDetail;
   };
 
   const getSharePageComponentData = async () => {
@@ -202,7 +210,7 @@
       const params = unref(getSharePageParams);
       return await getShareBoardComponentInfo(params);
     } catch (error) {}
-    return [];
+    return {} as ComponentInfoDetail;
   };
 
   const getDataBoradDetail = async () => {
@@ -211,7 +219,7 @@
         ? await getSharePageComponentData()
         : await getBasePageComponentData();
     } catch (error) {}
-    return [];
+    return {} as ComponentInfoDetail;
   };
 
   const loading = ref(false);
@@ -245,6 +253,35 @@
     }
   };
 
+  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 WidgetComponentType);
@@ -383,6 +420,7 @@
                   :update="update"
                   :radio="record.radio || {}"
                   v-bind="getComponentConfig(item.record, record)"
+                  :random="false"
                 />
               </template>
             </WidgetWrapper>
@@ -391,7 +429,11 @@
         <Empty v-if="!dataBoardList.length" />
       </Spin>
     </section>
-    <DataBindModal @register="register" @submit="getDataBoardComponent" />
+    <DataBindModal
+      @register="register"
+      @update="handleUpdateComponent"
+      @create="getDataBoardComponent"
+    />
     <HistoryTrendModal @register="registerHistoryDataModal" />
   </section>
 </template>

@@ -88,9 +88,9 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
         throw Error(error as string);
       }
     },
-    onDisconnected() {
-      close();
-    },
+    // onDisconnected() {
+    //   close();
+    // },
   });
 
   const setCmdId = (cmdId: number, record: CmdMapping) => {

@@ -136,6 +136,7 @@
     const hasDetailPermission = hasPermission('api:yt:dataBoard:detail');
     if (hasDetailPermission)
       router.push(`/data/board/detail/${encode(record.id)}/${encode(record.name)}`);
+    else createMessage.warning('没有权限');
   };
 
   const handlePagenationPosition = () => {
@@ -202,11 +203,11 @@
                     <span>
                       {{ item.viewType === ViewType.PRIVATE_VIEW ? '私有看板' : '公共看板' }}
                     </span>
-                    <span v-if="item.viewType === ViewType.PUBLIC_VIEW">
+                    <!-- <span v-if="item.viewType === ViewType.PUBLIC_VIEW">
                       <Tooltip title="点击复制分享链接">
                         <ShareAltOutlined class="ml-2" @click.stop="handleCopyShareUrl(item)" />
                       </Tooltip>
-                    </span>
+                    </span> -->
                   </div>
                   <div>{{ item.updateTime || item.createTime }}</div>
                 </div>

@@ -5,4 +5,6 @@ export type FrontDataSourceRecord = DataSource;
 
 export type DataBoardLayoutInfo = Layout & {
   record: DataComponentRecord;
+  width?: number;
+  height?: number;
 };

@@ -4,19 +4,22 @@
     <div class="right-wrap">
       <BasicTable style="cursor: pointer" @register="registerTable" @rowClick="deviceRowClick">
         <template #deviceState="{ record }">
-          <Tag :color="
-            record.deviceState == DeviceState.INACTIVE
-              ? 'warning'
-              : record.deviceState == DeviceState.ONLINE
-              ? 'success'
-              : 'error'
-          " class="ml-2">
+          <Tag
+            :color="
+              record.deviceState == DeviceState.INACTIVE
+                ? 'warning'
+                : record.deviceState == DeviceState.ONLINE
+                ? 'success'
+                : 'error'
+            "
+            class="ml-2"
+          >
             {{
-            record.deviceState == DeviceState.INACTIVE
-            ? '待激活'
-            : record.deviceState == DeviceState.ONLINE
-            ? '在线'
-            : '离线'
+              record.deviceState == DeviceState.INACTIVE
+                ? '待激活'
+                : record.deviceState == DeviceState.ONLINE
+                ? '在线'
+                : '离线'
             }}
           </Tag>
         </template>
@@ -27,393 +30,406 @@
         </template>
       </BasicTable>
     </div>
-    <BasicModal @register="registerModal" title="历史数据" width="70%" :minHeight="400" :footer="null"
-      :canFullscreen="false" @cancel="handleCancelModal">
+    <BasicModal
+      @register="registerModal"
+      title="历史数据"
+      width="70%"
+      :minHeight="400"
+      :footer="null"
+      :canFullscreen="false"
+      @cancel="handleCancelModal"
+    >
       <TimePeriodForm @register="timePeriodRegister" />
       <!-- <BasicForm @register="registerForm" /> -->
       <div v-show="isNull" ref="chartRef" :style="{ height: '550px', width }">
         <Loading :loading="loading" :absolute="true" />
       </div>
-      <Empty v-show="!isNull" />
+      <Empty
+        :style="{ height: '550px', width }"
+        class="flex flex-col justify-center items-center"
+        v-show="!isNull"
+      />
     </BasicModal>
     <DeviceDetailDrawer @register="registerDetailDrawer" />
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref, nextTick, unref, onMounted, Ref, onUnmounted } from 'vue';
-import { useScript } from '/@/hooks/web/useScript';
-import { formSchema, columns } from './config.data';
-import { BasicTable, useTable } from '/@/components/Table';
-import { devicePage } from '/@/api/alarm/contact/alarmContact';
-import { Tag, Empty } from 'ant-design-vue';
-import { DeviceState } from '/@/api/device/model/deviceModel';
-import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
-import { useModal, BasicModal } from '/@/components/Modal';
-import { useECharts } from '/@/hooks/web/useECharts';
-import {
-  getDeviceHistoryInfo,
-  getDeviceDataKeys,
-  getDeviceActiveTime,
-} from '/@/api/alarm/position';
-import { useDrawer } from '/@/components/Drawer';
-import DeviceDetailDrawer from '/@/views/device/list/cpns/modal/DeviceDetailDrawer.vue';
-import moment from 'moment';
-// 导入一些静态图片,避免打包时不能正确解析
-import djx from '/@/assets/images/djx.png';
-import zx from '/@/assets/images/zx.png';
-import lx from '/@/assets/images/lx.png';
-import djh from '/@/assets/images/djh.png';
-import online from '/@/assets/images/online1.png';
-import lx1 from '/@/assets/images/lx1.png';
-import Loading from '/@/components/Loading/src/Loading.vue';
-import { TimePeriodForm, useTimePeriodForm } from './cpns/TimePeriodForm';
-import { selectDeviceAttrSchema, eChartOptions } from './config.data';
-import { defaultSchemas } from './cpns/TimePeriodForm/config';
-import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
-import { dateUtil } from '/@/utils/dateUtil';
-export default defineComponent({
-  name: 'BaiduMap',
-  components: {
-    BasicTable,
-    Tag,
-    Empty,
-    BasicModal,
-    DeviceDetailDrawer,
-    Loading,
-    TimePeriodForm,
-  },
-  props: {
-    width: {
-      type: String,
-      default: '100%',
+  import { defineComponent, ref, nextTick, unref, onMounted, Ref, onUnmounted } from 'vue';
+  import { useScript } from '/@/hooks/web/useScript';
+  import { formSchema, columns } from './config.data';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { devicePage } from '/@/api/alarm/contact/alarmContact';
+  import { Tag, Empty } from 'ant-design-vue';
+  import { DeviceState } from '/@/api/device/model/deviceModel';
+  import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
+  import { useModal, BasicModal } from '/@/components/Modal';
+  import { useECharts } from '/@/hooks/web/useECharts';
+  import {
+    getDeviceHistoryInfo,
+    getDeviceDataKeys,
+    getDeviceActiveTime,
+  } from '/@/api/alarm/position';
+  import { useDrawer } from '/@/components/Drawer';
+  import DeviceDetailDrawer from '/@/views/device/list/cpns/modal/DeviceDetailDrawer.vue';
+  import moment from 'moment';
+  // 导入一些静态图片,避免打包时不能正确解析
+  import djx from '/@/assets/images/djx.png';
+  import zx from '/@/assets/images/zx.png';
+  import lx from '/@/assets/images/lx.png';
+  import djh from '/@/assets/images/djh.png';
+  import online from '/@/assets/images/online1.png';
+  import lx1 from '/@/assets/images/lx1.png';
+  import Loading from '/@/components/Loading/src/Loading.vue';
+  import { TimePeriodForm, useTimePeriodForm } from './cpns/TimePeriodForm';
+  import { selectDeviceAttrSchema, eChartOptions } from './config.data';
+  import { defaultSchemas } from './cpns/TimePeriodForm/config';
+  import { QueryWay, SchemaFiled, AggregateDataEnum } from './cpns/TimePeriodForm/config';
+  import { dateUtil } from '/@/utils/dateUtil';
+  export default defineComponent({
+    name: 'BaiduMap',
+    components: {
+      BasicTable,
+      Tag,
+      Empty,
+      BasicModal,
+      DeviceDetailDrawer,
+      Loading,
+      TimePeriodForm,
     },
-    height: {
-      type: String,
-      default: 'calc(100vh - 78px)',
-    },
-  },
-  setup() {
-    let entityId = '';
-    let globalRecord: any = {};
-    const wrapRef = ref<HTMLDivElement | null>(null);
-    const chartRef = ref<HTMLDivElement | null>(null);
-    const deviceAttrs = ref<string[]>([]);
-    const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
-    const isNull = ref(true);
-    const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
-    const [registerDetailDrawer, { openDrawer }] = useDrawer();
-    const [registerModal, { openModal }] = useModal();
-    const loading = ref(false);
-
-    const [registerTable] = useTable({
-      api: devicePage,
-      columns,
-      resizeHeightOffset: 32,
-      formConfig: {
-        schemas: formSchema,
-        labelAlign: 'left',
+    props: {
+      width: {
+        type: String,
+        default: '100%',
       },
-      showIndexColumn: false,
-      useSearchForm: true,
-      pagination: {
-        showSizeChanger: false,
+      height: {
+        type: String,
+        default: 'calc(100vh - 78px)',
       },
-    });
+    },
+    setup() {
+      let entityId = '';
+      let globalRecord: any = {};
+      const wrapRef = ref<HTMLDivElement | null>(null);
+      const chartRef = ref<HTMLDivElement | null>(null);
+      const deviceAttrs = ref<string[]>([]);
+      const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
+      const isNull = ref(true);
+      const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
+      const [registerDetailDrawer, { openDrawer }] = useDrawer();
+      const [registerModal, { openModal }] = useModal();
+      const loading = ref(false);
 
-    async function initMap() {
-      await toPromise();
-      await nextTick();
-      const wrapEl = unref(wrapRef);
-      const BMap = (window as any).BMap;
-      if (!wrapEl) return;
-      const map = new BMap.Map(wrapEl);
+      const [registerTable] = useTable({
+        api: devicePage,
+        columns,
+        resizeHeightOffset: 32,
+        formConfig: {
+          schemas: formSchema,
+          labelAlign: 'left',
+        },
+        showIndexColumn: false,
+        useSearchForm: true,
+        pagination: {
+          showSizeChanger: false,
+        },
+      });
+
+      async function initMap() {
+        await toPromise();
+        await nextTick();
+        const wrapEl = unref(wrapRef);
+        const BMap = (window as any).BMap;
+        if (!wrapEl) return;
+        const map = new BMap.Map(wrapEl);
 
-      const getLocation = new BMap.Geolocation();
-      getLocation.getCurrentPosition((position) => {
-        if (position) {
-          let preMarker = null;
-          const point = new BMap.Point(position.point.lng, position.point.lat);
-          let marker = new BMap.Marker(point, { size: 30 });
-          if (marker) {
-            map.removeOverlay(preMarker);
+        const getLocation = new BMap.Geolocation();
+        getLocation.getCurrentPosition((position) => {
+          if (position) {
+            let preMarker = null;
+            const point = new BMap.Point(position.point.lng, position.point.lat);
+            let marker = new BMap.Marker(point, { size: 30 });
+            if (marker) {
+              map.removeOverlay(preMarker);
+            }
+            map.addOverlay(marker);
+            map.centerAndZoom(point, 15);
+            map.enableScrollWheelZoom(true);
+          } else {
+            const point = new BMap.Point(104.04666605565338, 30.543516387560476);
+            map.centerAndZoom(point, 15);
+            map.enableScrollWheelZoom(true);
           }
-          map.addOverlay(marker);
-          map.centerAndZoom(point, 15);
-          map.enableScrollWheelZoom(true);
-        } else {
-          const point = new BMap.Point(104.04666605565338, 30.543516387560476);
-          map.centerAndZoom(point, 15);
-          map.enableScrollWheelZoom(true);
-        }
-      })
-    }
-    // 点击表格某一行触发
-    const deviceRowClick = async (record) => {
-      entityId = record.tbDeviceId;
-      globalRecord = record;
-      const BMap = (window as any).BMap;
-      const wrapEl = unref(wrapRef);
-      const map = new BMap.Map(wrapEl);
-      // if (record.deviceInfo.address) {
-      // keys = await getDeviceDataKeys(entityId);
-      try {
-        deviceAttrs.value = (await getDeviceDataKeys(entityId)) || [];
-      } catch (error) { }
+        });
+      }
+      // 点击表格某一行触发
+      const deviceRowClick = async (record) => {
+        entityId = record.tbDeviceId;
+        globalRecord = record;
+        const BMap = (window as any).BMap;
+        const wrapEl = unref(wrapRef);
+        const map = new BMap.Map(wrapEl);
+        // if (record.deviceInfo.address) {
+        // keys = await getDeviceDataKeys(entityId);
+        try {
+          deviceAttrs.value = (await getDeviceDataKeys(entityId)) || [];
+        } catch (error) {}
 
-      const { name, organizationDTO, deviceState, deviceProfile } = record;
-      const { longitude, latitude, address } = record.deviceInfo;
-      //这里如果没有地理位置 最好设置一个默认位置 不然地图会全蓝
-      const point = new BMap.Point(
-        longitude == '' ? 104.04666605565338 : longitude,
-        latitude == '' ? 30.543516387560476 : latitude
-      );
-      let options = {
-        width: 330, // 信息窗口宽度
-        height: 0, // 信息窗口高度
-      };
-      map.centerAndZoom(point, 15);
-      map.enableScrollWheelZoom(true);
-      // 创建信息窗口对象
-      const res = await getDeviceActiveTime(entityId);
+        const { name, organizationDTO, deviceState, deviceProfile } = record;
+        const { longitude, latitude, address } = record.deviceInfo;
+        //这里如果没有地理位置 最好设置一个默认位置 不然地图会全蓝
+        const point = new BMap.Point(
+          longitude == '' ? 104.04666605565338 : longitude,
+          latitude == '' ? 30.543516387560476 : latitude
+        );
+        let options = {
+          width: 330, // 信息窗口宽度
+          height: 0, // 信息窗口高度
+        };
+        map.centerAndZoom(point, 15);
+        map.enableScrollWheelZoom(true);
+        // 创建信息窗口对象
+        const res = await getDeviceActiveTime(entityId);
 
-      let { value: activeStatus, lastUpdateTs } = res[0];
-      lastUpdateTs = moment(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss');
-      let infoWindow = new BMap.InfoWindow(
-        `
+        let { value: activeStatus, lastUpdateTs } = res[0];
+        lastUpdateTs = moment(lastUpdateTs).format('YYYY-MM-DD HH:mm:ss');
+        let infoWindow = new BMap.InfoWindow(
+          `
             <div style="display:flex;justify-content:space-between; margin:20px 0px;">
               <div style="font-size:16px;font-weight:bold">${name}</div>
-              ${deviceState === 'INACTIVE'
-          ? `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${djh}" class="mr-1">待激活</div>`
-          : deviceState === 'ONLINE'
-            ? `<div style="display:flex;align-items:center; ">
+              ${
+                deviceState === 'INACTIVE'
+                  ? `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${djh}" class="mr-1">待激活</div>`
+                  : deviceState === 'ONLINE'
+                  ? `<div style="display:flex;align-items:center; ">
                   <img style="width:15px;height:15px" src="${online}" class="mr-1">在线</div>`
-            : `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${lx1}" class="mr-1">离线</div>`
-        }
+                  : `<div style="display:flex;align-items:center;"><img style="width:15px;height:15px" src="${lx1}" class="mr-1">离线</div>`
+              }
             </div>
             <div>所属组织：${organizationDTO.name}</div>
             <div style="margin-top:6px;">接入协议：${deviceProfile.transportType}</div>
-            <div style="margin-top:6px;">设备位置：${address == '' ? '该设备暂无地理位置' : address
-        }</div>
+            <div style="margin-top:6px;">设备位置：${
+              address == '' ? '该设备暂无地理位置' : address
+            }</div>
             <div style="margin-top:6px;">${activeStatus ? '在' : '离'}线时间：${lastUpdateTs}</div>
             <div style="display:flex;justify-content:end; margin-top:10px">
               <button onclick="openDeviceInfoDrawer()" style="margin-right:10px;color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">设备信息</button>
               <button onclick="openHistoryModal()" style="color:#fff;background-color:#409eff;padding:4px; border-radius:4px;">历史数据</button>
             </div>
             `,
-        options
-      );
+          options
+        );
 
-      map.openInfoWindow(infoWindow, map.getCenter());
-      let preMarker = null;
+        map.openInfoWindow(infoWindow, map.getCenter());
+        let preMarker = null;
 
-      const rivet = deviceState === 'INACTIVE' ? djx : deviceState === 'ONLINE' ? zx : lx;
-      let myIcon = new BMap.Icon(rivet, new BMap.Size(20, 30));
-      let marker = new BMap.Marker(point, { icon: myIcon });
-      if (marker) {
-        map.removeOverlay(preMarker);
-      }
-      map.addOverlay(marker);
-      //标注监听事件
-      marker.addEventListener('click', function (e) {
-        const point = e.point;
-        map.openInfoWindow(infoWindow, point);
-      });
-      //标注监听事件
-      // } else {
-      //   const point = new BMap.Point(106.63028229687498, 36.06735821600903);
-      //   let options = {
-      //     width: 100, // 信息窗口宽度
-      //     height: 100, // 信息窗口高度
-      //     title: '提示', // 信息窗口标题
-      //   };
-      //   map.centerAndZoom(point, 5);
-      //   map.enableScrollWheelZoom(true);
-      //   let infoWindow = new BMap.InfoWindow('该设备暂无地理位置', options); // 创建信息窗口对象
-      //   map.openInfoWindow(infoWindow, map.getCenter());
-      // }
-    };
+        const rivet = deviceState === 'INACTIVE' ? djx : deviceState === 'ONLINE' ? zx : lx;
+        let myIcon = new BMap.Icon(rivet, new BMap.Size(20, 30));
+        let marker = new BMap.Marker(point, { icon: myIcon });
+        if (marker) {
+          map.removeOverlay(preMarker);
+        }
+        map.addOverlay(marker);
+        //标注监听事件
+        marker.addEventListener('click', function (e) {
+          const point = e.point;
+          map.openInfoWindow(infoWindow, point);
+        });
+        //标注监听事件
+        // } else {
+        //   const point = new BMap.Point(106.63028229687498, 36.06735821600903);
+        //   let options = {
+        //     width: 100, // 信息窗口宽度
+        //     height: 100, // 信息窗口高度
+        //     title: '提示', // 信息窗口标题
+        //   };
+        //   map.centerAndZoom(point, 5);
+        //   map.enableScrollWheelZoom(true);
+        //   let infoWindow = new BMap.InfoWindow('该设备暂无地理位置', options); // 创建信息窗口对象
+        //   map.openInfoWindow(infoWindow, map.getCenter());
+        // }
+      };
 
-    // 设备信息
-    const openDeviceInfoDrawer = async () => {
-      const { id, tbDeviceId } = globalRecord;
-      openDrawer(true, {
-        id,
-        tbDeviceId,
-      });
-    };
+      // 设备信息
+      const openDeviceInfoDrawer = async () => {
+        const { id, tbDeviceId } = globalRecord;
+        openDrawer(true, {
+          id,
+          tbDeviceId,
+        });
+      };
 
-    const [timePeriodRegister, method] = useTimePeriodForm({
-      schemas: [...defaultSchemas, ...selectDeviceAttrSchema],
-      async submitFunc() {
-        // 表单验证
-        await method.validate();
-        const value = method.getFieldsValue();
-        const searchParams = getSearchParams(value);
+      const [timePeriodRegister, method] = useTimePeriodForm({
+        schemas: [...defaultSchemas, ...selectDeviceAttrSchema],
+        async submitFunc() {
+          // 表单验证
+          await method.validate();
+          const value = method.getFieldsValue();
+          const searchParams = getSearchParams(value);
 
-        if (!hasDeviceAttr()) return;
-        // 发送请求
-        loading.value = true;
-        const res = await getDeviceHistoryInfo(searchParams);
-        // 判断数据对象是否为空
-        if (!Object.keys(res).length) {
-          isNull.value = false;
-          return;
+          if (!hasDeviceAttr()) return;
+          // 发送请求
+          loading.value = true;
+          const res = await getDeviceHistoryInfo(searchParams);
+          // 判断数据对象是否为空
+          if (!Object.keys(res).length) {
+            isNull.value = false;
+            return;
+          } else {
+            isNull.value = true;
+          }
+          setChartOptions(res, value.keys);
+          loading.value = false;
+        },
+      });
+
+      function getSearchParams(value: Recordable) {
+        const { startTs, endTs, interval, agg, limit, keys, way } = value;
+        if (way === QueryWay.LATEST) {
+          return {
+            entityId,
+            keys: keys ? keys : unref(deviceAttrs).join(),
+            startTs: moment().subtract(startTs, 'ms').valueOf(),
+            endTs: Date.now(),
+            interval,
+            agg,
+            limit,
+          };
         } else {
-          isNull.value = true;
+          return {
+            entityId,
+            keys: keys ? keys : unref(deviceAttrs).join(),
+            startTs: moment(startTs).valueOf(),
+            endTs: moment(endTs).valueOf(),
+            interval,
+            agg,
+            limit,
+          };
         }
-        setChartOptions(res, value.keys);
-        loading.value = false;
-      },
-    });
-
-    function getSearchParams(value: Recordable) {
-      const { startTs, endTs, interval, agg, limit, keys, way } = value;
-      if (way === QueryWay.LATEST) {
-        return {
-          entityId,
-          keys: keys ? keys : unref(deviceAttrs).join(),
-          startTs: moment().subtract(startTs, 'ms').valueOf(),
-          endTs: Date.now(),
-          interval,
-          agg,
-          limit,
-        };
-      } else {
-        return {
-          entityId,
-          keys: keys ? keys : unref(deviceAttrs).join(),
-          startTs: moment(startTs).valueOf(),
-          endTs: moment(endTs).valueOf(),
-          interval,
-          agg,
-          limit,
-        };
       }
-    }
 
-    const openHistoryModal = async () => {
-      openModal(true);
+      const openHistoryModal = async () => {
+        openModal(true);
 
-      await nextTick();
-      method.updateSchema({
-        field: 'keys',
-        componentProps: {
-          options: unref(deviceAttrs).map((item) => ({ label: item, value: item })),
-        },
-      });
+        await nextTick();
+        method.updateSchema({
+          field: 'keys',
+          componentProps: {
+            options: unref(deviceAttrs).map((item) => ({ label: item, value: item })),
+          },
+        });
 
-      method.setFieldsValue({
-        [SchemaFiled.START_TS]: 1 * 24 * 60 * 60 * 1000,
-        [SchemaFiled.LIMIT]: 7,
-        [SchemaFiled.AGG]: AggregateDataEnum.NONE,
-      });
+        method.setFieldsValue({
+          [SchemaFiled.START_TS]: 1 * 24 * 60 * 60 * 1000,
+          [SchemaFiled.LIMIT]: 7,
+          [SchemaFiled.AGG]: AggregateDataEnum.NONE,
+        });
 
-      if (!hasDeviceAttr()) return;
+        if (!hasDeviceAttr()) return;
 
-      const res = await getDeviceHistoryInfo({
-        entityId,
-        keys: unref(deviceAttrs).join(),
-        startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
-        endTs: Date.now(),
-        agg: AggregateDataEnum.NONE,
-      });
+        const res = await getDeviceHistoryInfo({
+          entityId,
+          keys: unref(deviceAttrs).join(),
+          startTs: Date.now() - 1 * 24 * 60 * 60 * 1000,
+          endTs: Date.now(),
+          agg: AggregateDataEnum.NONE,
+        });
 
-      // 判断对象是否为空
-      if (!Object.keys(res).length) {
-        isNull.value = false;
-        return;
-      } else {
-        isNull.value = true;
-      }
-      setChartOptions(res);
-    };
-    function hasDeviceAttr() {
-      if (!unref(deviceAttrs).length) {
-        isNull.value = false;
-        return false;
-      } else {
-        isNull.value = true;
-        return true;
+        // 判断对象是否为空
+        if (!Object.keys(res).length) {
+          isNull.value = false;
+          return;
+        } else {
+          isNull.value = true;
+        }
+        setChartOptions(res);
+      };
+      function hasDeviceAttr() {
+        if (!unref(deviceAttrs).length) {
+          isNull.value = false;
+          return false;
+        } else {
+          isNull.value = true;
+          return true;
+        }
       }
-    }
 
-    function setChartOptions(data, keys?) {
-      const dataArray: any[] = [];
-      for (const key in data) {
-        for (const item1 of data[key]) {
-          let { ts, value } = item1;
-          const time = dateUtil(ts).format('YYYY-MM-DD HH:mm:ss');
-          value = Number(value).toFixed(2);
-          dataArray.push([time, value, key]);
+      function setChartOptions(data, keys?) {
+        const dataArray: any[] = [];
+        for (const key in data) {
+          for (const item1 of data[key]) {
+            let { ts, value } = item1;
+            const time = dateUtil(ts).format('YYYY-MM-DD HH:mm:ss');
+            value = Number(value).toFixed(2);
+            dataArray.push([time, value, key]);
+          }
         }
+        keys = keys ? [keys] : unref(deviceAttrs);
+        const series: any = keys.map((item) => {
+          return {
+            name: item,
+            type: 'line',
+            data: dataArray.filter((item1) => item1[2] === item),
+          };
+        });
+        // 设置数据
+        setOptions(eChartOptions(series, keys));
       }
-      keys = keys ? [keys] : unref(deviceAttrs);
-      const series: any = keys.map((item) => {
-        return {
-          name: item,
-          type: 'line',
-          data: dataArray.filter((item1) => item1[2] === item),
-        };
-      });
-      // 设置数据
-      setOptions(eChartOptions(series, keys));
-    }
 
-    const handleCancelModal = () => {
-      method.setFieldsValue({
-        [SchemaFiled.WAY]: QueryWay.LATEST,
-        [SchemaFiled.KEYS]: null,
-        [SchemaFiled.DATE_RANGE]: [],
-        [SchemaFiled.INTERVAL]: null,
-        [SchemaFiled.LIMIT]: 7,
-        [SchemaFiled.AGG]: AggregateDataEnum.NONE,
-      });
-      getInstance()?.clear();
-    };
+      const handleCancelModal = () => {
+        method.setFieldsValue({
+          [SchemaFiled.WAY]: QueryWay.LATEST,
+          [SchemaFiled.KEYS]: null,
+          [SchemaFiled.DATE_RANGE]: [],
+          [SchemaFiled.INTERVAL]: null,
+          [SchemaFiled.LIMIT]: 7,
+          [SchemaFiled.AGG]: AggregateDataEnum.NONE,
+        });
+        getInstance()?.clear();
+      };
 
-    onMounted(() => {
-      initMap();
-      (window as any).openDeviceInfoDrawer = openDeviceInfoDrawer;
-      (window as any).openHistoryModal = openHistoryModal;
-    });
+      onMounted(() => {
+        initMap();
+        (window as any).openDeviceInfoDrawer = openDeviceInfoDrawer;
+        (window as any).openHistoryModal = openHistoryModal;
+      });
 
-    onUnmounted(() => {
-      (window as any).openDeviceInfoDrawer = null;
-      (window as any).openHistoryModal = null;
-    });
+      onUnmounted(() => {
+        (window as any).openDeviceInfoDrawer = null;
+        (window as any).openHistoryModal = null;
+      });
 
-    return {
-      wrapRef,
-      registerTable,
-      deviceRowClick,
-      DeviceState,
-      registerModal,
-      chartRef,
-      isNull,
-      registerDetailDrawer,
-      loading,
-      timePeriodRegister,
-      handleCancelModal,
-    };
-  },
-});
+      return {
+        wrapRef,
+        registerTable,
+        deviceRowClick,
+        DeviceState,
+        registerModal,
+        chartRef,
+        isNull,
+        registerDetailDrawer,
+        loading,
+        timePeriodRegister,
+        handleCancelModal,
+      };
+    },
+  });
 </script>
 <style scoped lang="less">
-.wrapper {
-  position: relative;
+  .wrapper {
+    position: relative;
 
-  :deep(.BMap_shadow) {
-    display: none;
+    :deep(.BMap_shadow) {
+      display: none;
+    }
   }
-}
 
-.right-wrap {
-  padding-top: 10px;
-  width: 28%;
-  height: 95%;
-  position: absolute;
-  right: 5%;
-  top: 3%;
-  background-color: #fff;
-}
+  .right-wrap {
+    padding-top: 10px;
+    width: 28%;
+    height: 95%;
+    position: absolute;
+    right: 5%;
+    top: 3%;
+    background-color: #fff;
+  }
 </style>