pref：优化设备地理位置为当前定位

@@ -4,22 +4,19 @@
     <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>
@@ -30,15 +27,8 @@
         </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 }">
@@ -50,364 +40,380 @@
   </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,
+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%',
     },
-    props: {
-      width: {
-        type: String,
-        default: '100%',
+    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',
       },
-      height: {
-        type: String,
-        default: 'calc(100vh - 78px)',
+      showIndexColumn: false,
+      useSearchForm: true,
+      pagination: {
+        showSizeChanger: false,
       },
-    },
-    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',
-        },
-        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);
 
-      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 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 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);
+        }
+      })
+    }
+    // 点击表格某一行触发
+    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
-        );
-
-        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());
-        // }
-      };
+        options
+      );
 
-      // 设备信息
-      const openDeviceInfoDrawer = async () => {
-        const { id, tbDeviceId } = globalRecord;
-        openDrawer(true, {
-          id,
-          tbDeviceId,
-        });
-      };
+      map.openInfoWindow(infoWindow, map.getCenter());
+      let preMarker = null;
 
-      const [timePeriodRegister, method] = useTimePeriodForm({
-        schemas: [...defaultSchemas, ...selectDeviceAttrSchema],
-        async submitFunc() {
-          // 表单验证
-          await method.validate();
-          const value = method.getFieldsValue();
-          const searchParams = getSearchParams(value);
+      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());
+      // }
+    };
 
-          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;
-        },
+    // 设备信息
+    const openDeviceInfoDrawer = async () => {
+      const { id, tbDeviceId } = globalRecord;
+      openDrawer(true, {
+        id,
+        tbDeviceId,
       });
+    };
 
-      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,
-          };
+    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;
         } else {
-          return {
-            entityId,
-            keys: keys ? keys : unref(deviceAttrs).join(),
-            startTs: moment(startTs).valueOf(),
-            endTs: moment(endTs).valueOf(),
-            interval,
-            agg,
-            limit,
-          };
+          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 {
+        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));
       }
-
-      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;
+      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));
+    }
 
-      onUnmounted(() => {
-        (window as any).openDeviceInfoDrawer = null;
-        (window as any).openHistoryModal = null;
+    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();
+    };
 
-      return {
-        wrapRef,
-        registerTable,
-        deviceRowClick,
-        DeviceState,
-        registerModal,
-        chartRef,
-        isNull,
-        registerDetailDrawer,
-        loading,
-        timePeriodRegister,
-        handleCancelModal,
-      };
-    },
-  });
+    onMounted(() => {
+      initMap();
+      (window as any).openDeviceInfoDrawer = openDeviceInfoDrawer;
+      (window as any).openHistoryModal = openHistoryModal;
+    });
+
+    onUnmounted(() => {
+      (window as any).openDeviceInfoDrawer = null;
+      (window as any).openHistoryModal = null;
+    });
+
+    return {
+      wrapRef,
+      registerTable,
+      deviceRowClick,
+      DeviceState,
+      registerModal,
+      chartRef,
+      isNull,
+      registerDetailDrawer,
+      loading,
+      timePeriodRegister,
+      handleCancelModal,
+    };
+  },
+});
 </script>
 <style scoped lang="less">
-  .wrapper {
-    position: relative;
-    :deep(.BMap_shadow) {
-      display: none;
-    }
-  }
-  .right-wrap {
-    padding-top: 10px;
-    width: 28%;
-    height: 95%;
-    position: absolute;
-    right: 5%;
-    top: 3%;
-    background-color: #fff;
+.wrapper {
+  position: relative;
+
+  :deep(.BMap_shadow) {
+    display: none;
   }
+}
+
+.right-wrap {
+  padding-top: 10px;
+  width: 28%;
+  height: 95%;
+  position: absolute;
+  right: 5%;
+  top: 3%;
+  background-color: #fff;
+}
 </style>