feat: save

.env.development

@@ -22,3 +22,5 @@ VITE_GLOB_UPLOAD_URL=/upload
 
 # Interface prefix
 VITE_GLOB_API_URL_PREFIX=
+
+VITE_GOOGLE_KEY=AIzaSyBGUvCR1bppO9pfuS0MUWzuftiZ127y4Os

.env.production

@@ -34,3 +34,6 @@ VITE_USE_PWA = false
 
 # Is it compatible with older browsers
 VITE_LEGACY = false
+
+
+VITE_GOOGLE_KEY=AIzaSyBGUvCR1bppO9pfuS0MUWzuftiZ127y4Os

src/api/mapOpt/list.ts

@@ -1,10 +1,17 @@
 import { defHttp } from '/@/utils/http/axios';
 
 import { BasicPageParams, BasicFetchResult } from '/@/api/model/baseModel';
-export type PageParams = BasicPageParams;
+
+export type PageParams<T> = BasicPageParams & T;
+
 enum Api {
   pageList = '/service/manage_jp/project/list',
   saveOrUpdate = '/service/manage_jp/project/saveOrUpdate',
+  del = '/service//manage_jp/project/del',
+  allGps = '/service/manage_jp/projectScene/allSceneGps',
+  getScene = '/service/manage_jp/project/getScene',
+  addScene = '/service/manage_jp/project/addScene',
+  delScene = '/service/manage_jp/project/delScene',
 }
 
 type listType = {};
@@ -19,12 +26,22 @@ export type MapOptType = {
   alt?: number;
 };
 
+export type MapSearchType = {
+  searchKey: string;
+  type?: number;
+};
+
+export type AddSceneParamType = {
+  numList: string[];
+  projectId: number;
+};
+
 export type ListGetResultModel = BasicFetchResult<listType>;
 /**
  * @description: Get sample list value
  */
 
-export const ListApi = (params: PageParams) =>
+export const ListApi = (params: PageParams<{}>) =>
   defHttp.post<ListGetResultModel>({
     url: Api.pageList,
     params,
@@ -45,3 +62,60 @@ export const AddOptOrUpdateApi = (params: MapOptType) =>
       ignoreCancelToken: true,
     },
   });
+
+export const DelMapOptApi = (params: Pick<MapOptType, 'id'>) =>
+  defHttp.post<any>({
+    url: Api.del,
+    params,
+    data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+export const AllGpsApi = (params: MapSearchType) =>
+  defHttp.post<any>({
+    url: Api.allGps,
+    data: {
+      ...params,
+      type: Number(params.type),
+    },
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const GetSceneListApi = (
+  params: PageParams<{
+    projectId: number;
+  }>,
+) =>
+  defHttp.post<any>({
+    url: Api.getScene,
+    data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const AddSceneApi = (params: AddSceneParamType) =>
+  defHttp.post<any>({
+    url: Api.addScene,
+    data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });
+
+export const DelSceneApi = (params: AddSceneParamType) =>
+  defHttp.post<any>({
+    url: Api.delScene,
+    data: params,
+    headers: {
+      // @ts-ignore
+      ignoreCancelToken: true,
+    },
+  });

src/api/scene/list.ts

@@ -29,7 +29,6 @@ enum Api {
   unCollaborate = 'service/manage_jp/contractor/unCollaborate',
   unCollaborateList = 'service/manage_jp/contractor/details',
   genOBJ = 'service/manage_jp/scene/generateObjFile',
-  allGps = 'service/manage_jp/api/allSceneGps',
 }
 
 /**
@@ -178,12 +177,3 @@ export const generateObjFileAPI = (params: GenOBJParam) =>
       ignoreCancelToken: true,
     },
   });
-
-export const AllGpsApi = () =>
-  defHttp.get<any>({
-    url: Api.allGps,
-    headers: {
-      // @ts-ignore
-      ignoreCancelToken: true,
-    },
-  });

src/router/routes/index.ts

@@ -64,7 +64,7 @@ export const MapRoute: AppRouteRecordRaw = {
   component: () => import('/@/views/map/index.vue'),
   meta: {
     title: t('routes.dashboard.mapOpt'),
-    ignoreAuth: true,
+    ignoreAuth: false,
   },
 };
 

src/views/map/addProjectModal.vue

@@ -1,5 +1,11 @@
 <template>
-  <BasicModal v-bind="$attrs" @register="register" title="新增项目" @ok="handleSubmit">
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="新增项目"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
     <div class="p-20px">
       <BasicForm @register="registerForm">
         <template #location>
@@ -8,14 +14,6 @@
             <a-button type="default" @click="$emit('open-map')">地图选择</a-button>
           </div>
         </template>
-        <!-- <template #isShow="{ record }">
-          <Switch v-model:checked="record.isShow" />
-        </template> -->
-        <!-- <template #label="{ model, field }">
-          {{ model[field] }}
-        </template>
-        <template #process> {{ downloadInfo.process }} % </template>
-        <template #status> {{ downloadInfo.status }} </template> -->
       </BasicForm>
     </div>
     <template #centerFooter> </template>
@@ -79,13 +77,14 @@
         }>,
       },
     },
-    emits: ['register', 'success', 'open-map', 'reload'],
+    emits: ['register', 'success', 'open-map', 'reload', 'cancel'],
     setup(props, { emit }) {
       // const { createMessage } = useMessage();
       const sceneNum = ref('');
       const location = computed(() =>
         props.currentLatLng ? `${props.currentLatLng?.lat}, ${props.currentLatLng?.lng}` : '',
       );
+      const googleKey = computed(() => import.meta.env.VITE_GOOGLE_KEY);
 
       const [registerForm, { setFieldsValue, validate }] = useForm({
         schemas: schemas,
@@ -119,7 +118,7 @@
           projectName: data.projectName,
           projectSn: data.projectSn,
           lat: props.currentLatLng?.lat,
-          long: props.currentLatLng?.lng,
+          lon: props.currentLatLng?.lng,
           alt: 0,
         };
         const res = await AddOptOrUpdateApi(pro);
@@ -128,6 +127,11 @@
         emit('reload');
       };
 
+      const handleCancel = async () => {
+        // console.log('handleCancel');
+        emit('cancel');
+      };
+
       return {
         t,
         register,
@@ -136,6 +140,8 @@
         closeModal,
         registerForm,
         location,
+        handleCancel,
+        googleKey,
       };
     },
   });

src/views/map/index.vue

@@ -2,7 +2,7 @@
   <GoogleMap
     ref="mapRef"
     :center="center"
-    api-key="AIzaSyBGUvCR1bppO9pfuS0MUWzuftiZ127y4Os"
+    :api-key="googleKey"
     mapId="DEMO_MAP_ID"
     :map-type-control="true"
     :disable-default-ui="false"
@@ -43,7 +43,7 @@
     <CustomControl position="TOP_LEFT">
       <div class="top_left_control">
         <div>
-          <a-input
+          <!-- <a-input
             type="text"
             style="width: 220px"
             v-model:value="form.searchValue"
@@ -51,19 +51,33 @@
             :placeholder="t('common.inputText')"
           >
             <template #prefix><SearchOutlined /></template>
-          </a-input>
+          </a-input> -->
+
+          <AutoComplete
+            v-model:value="form.searchValue"
+            :options="options"
+            size="large"
+            allowClear
+            style="width: 300px"
+            :placeholder="t('common.inputText')"
+            @select="handleSelect"
+            @search="onSearch"
+          >
+            <template #option="{ title, value: num }">
+              <span style="font-weight: bold" :value="num">{{ title }}</span>
+            </template>
+          </AutoComplete>
         </div>
         <div>
           <Select
             ref="select"
             v-model:value="form.type"
             style="width: 120px"
-            allow-clear
             size="large"
             :placeholder="t('common.chooseText')"
           >
-            <SelectOption value="jack">全部项目</SelectOption>
-            <SelectOption value="lucy">全部场景</SelectOption>
+            <SelectOption :value="0">全部项目</SelectOption>
+            <SelectOption :value="1">全部场景</SelectOption>
           </Select>
         </div>
 
@@ -80,8 +94,8 @@
 </template>
 
 <script lang="ts" setup>
-  import { SearchOutlined } from '@ant-design/icons-vue';
-  import { ref, onMounted, watch } from 'vue';
+  // import { SearchOutlined } from '@ant-design/icons-vue';
+  import { ref, onMounted, watch, computed } from 'vue';
   import {
     GoogleMap,
     AdvancedMarker,
@@ -91,131 +105,53 @@
   } from 'vue3-google-map';
   import { useRouteQuery } from '@vueuse/router';
   // import { Loading } from '/@/components/Loading';
-  import { Select, SelectOption } from 'ant-design-vue';
+  import { Select, SelectOption, AutoComplete } from 'ant-design-vue';
   // import { ApiTreeSelect } from '/@/components/Form';
   // import { all } from './test';
   const loadingRef = ref(true);
   import { useI18n } from '/@/hooks/web/useI18n';
 
-  import { AllGpsApi } from '/@/api/scene/list';
+  import { AllGpsApi } from '/@/api/mapOpt/list';
   const { t } = useI18n();
-
+  const googleKey = computed(() => import.meta.env.VITE_GOOGLE_KEY);
   const center = { lat: 35.717, lng: 139.731 };
+  const options = ref([]);
   // const pinOptions = { background: '#FBBC04' };
   const lang = useRouteQuery('lang', 'ja');
   // console.log('lang', lang);
 
   const form = ref({
     searchValue: '',
-    type: undefined,
+    type: 1,
     orgId: undefined,
   });
 
   const mapRef = ref();
-
-  const locations = ref([
-    { lat: 35.717, lng: 139.731 },
-    { lat: 35.717222, lng: 139.199731 },
-    { lat: 35.717222, lng: 139.199731 },
-    { lat: 35.717222, lng: 139.199731 },
-    { lat: 35.417222, lng: 139.192731 },
-    { lat: 35.717222, lng: 139.199731 },
-    { lat: 35.717222, lng: 139.199731 },
-    { lat: 34.717222, lng: 139.27819 },
-
-    { lat: 36.31296720118859, lng: 139.3926063119922 },
-    { lat: 35.62235838888284, lng: 139.71015593805745 },
-    { lat: 35.86823489038979, lng: 140.14478176589813 },
-    { lat: 35.666319244178254, lng: 139.68656650039 },
-    { lat: 35.66210809403935, lng: 139.69871520996094 },
-    { lat: 35.6555101891923, lng: 139.6854507014398 },
-    { lat: 35.65383639825058, lng: 139.67137446852965 },
-    { lat: 35.63160781942685, lng: 139.69101567233477 },
-    { lat: 35.6370693778054, lng: 139.7189712524414 },
-    { lat: 35.6370693778054, lng: 139.7189712524414 },
-    { lat: 35.63368820266599, lng: 139.69704879782842 },
-    { lat: 35.671210059759105, lng: 139.78837265036748 },
-    { lat: 35.67953081677376, lng: 139.81919354352647 },
-    { lat: 35.71480112339862, lng: 139.84185284528428 },
-    { lat: 35.689848647011665, lng: 139.86931866559678 },
-    { lat: 35.6370835731761, lng: 139.73909710131483 },
-    { lat: 35.64524468393014, lng: 139.7480234929164 },
-    { lat: 35.62850304525592, lng: 139.74750850878553 },
-    { lat: 35.65654330733842, lng: 139.73094318590955 },
-    { lat: 35.25333139421992, lng: 140.1328670531019 },
-    { lat: 35.520945427155084, lng: 139.70861514045217 },
-    { lat: 35.52835001979981, lng: 139.72466547919728 },
-    { lat: 35.53219175620018, lng: 139.72543795539357 },
-    { lat: 36.06471592950127, lng: 139.56015044311627 },
-    { lat: 35.99663544599227, lng: 139.51716429913103 },
-
-    { lat: 36.00330154326686, lng: 139.73277098858415 },
-    { lat: 34.85159530859275, lng: 135.79240136718747 },
-
-    { lat: 33.39618823869116, lng: 130.68578108352963 },
-    { lat: 32.90613073777195, lng: 131.45866324766476 },
-    { lat: 31.571382620455626, lng: 131.29605440525106 },
-    { lat: 43.484211753270436, lng: 143.19908481320442 },
-
-    { lat: 43.04453309951811, lng: 141.92720114193736 },
-    { lat: 43.70103868045711, lng: 143.26774936398567 },
-    { lat: 39.59910275038968, lng: 140.79112971490326 },
-    { lat: 39.038147596858046, lng: 141.42833674615326 },
-
-    { lat: 39.852593533335906, lng: 141.58214533990326 },
-    { lat: 39.40536603650614, lng: 141.81934919778516 },
-    { lat: 37.280345063819624, lng: 140.40488676127148 },
-    { lat: 37.650945729111164, lng: 140.66306547220898 },
-
-    { lat: 26.2115166886031, lng: 127.75279725182631 },
-    { lat: 44.34833983328789, lng: 143.34691816315754 },
-    { lat: 43.00128806366339, lng: 144.3869447551281 },
-    { lat: 28.192627956555494, lng: 129.313005376943 },
-    { lat: 28.259479947389917, lng: 129.36450379002895 },
-
-    { lat: 38.735843285553415, lng: 140.10460862452084 },
-    { lat: 39.23754027286606, lng: 140.19249924952084 },
-
-    { lat: 36.552075508234424, lng: 136.70281355238654 },
-    { lat: 36.28575067992493, lng: 136.49407331801154 },
-
-    { lat: 36.22987124498562, lng: 137.90955145716998 },
-    { lat: 35.8122427890604, lng: 137.86835272670123 },
-
-    { lat: 37.57569302701527, lng: 139.43412377785248 },
-    { lat: 37.18502777318644, lng: 138.82987573097748 },
-
-    { lat: 37.10846065439149, lng: 138.6381507062294 },
-    { lat: 37.106817847812714, lng: 138.68896247380752 },
-    { lat: 37.11502932699901, lng: 138.62138419322386 },
-    { lat: 37.1148924396862, lng: 138.67133765391722 },
-    { lat: 37.07600642884621, lng: 138.64267020396605 },
-    // eslint-disable-next-line @typescript-eslint/no-loss-of-precision
-    { lat: 35.43717666390691, lng: 139.45083618164062 },
-    { lat: 35.45060223946404, lng: 139.53495025634766 },
-    { lat: 35.38645461274881, lng: 139.44146351130624 },
-    { lat: 35.39750986273954, lng: 139.49442104609628 },
-    { lat: 35.40366656004627, lng: 139.49115947993417 },
-    { lat: 34.85417907268749, lng: 136.55081855570842 },
-  ]);
-
+  const locations = ref([]);
   // locations.value = locations.value.concat(all);
   console.log('total', locations.value.length);
 
   watch(
-    () => mapRef.value?.ready,
-    (ready) => {
+    () => [mapRef.value?.ready, locations],
+    ([ready, lo]) => {
       if (!ready) return;
-      console.log('ready', ready);
+      console.log('ready', ready, lo.value.length);
       loadingRef.value = false;
-      mapFitBounds(mapRef, locations.value);
+      if (ready && lo.value.length > 2) {
+        // debugger;
+        mapFitBounds(mapRef, locations.value);
+      }
     },
     {
       deep: true,
     },
   );
+  const getGps = () => {
+    return AllGpsApi({ searchKey: form.value.searchValue, type: form.value.type });
+  };
   onMounted(async () => {
-    const allGps = await AllGpsApi();
+    const allGps = await getGps();
+
     console.log('allGps', allGps);
     let data = allGps.map((item) => {
       const mapper = {
@@ -226,10 +162,22 @@
       };
       return mapper;
     });
-
     locations.value = data;
   });
 
+  watch(
+    () => form,
+    async () => {
+      // const allGps = await getGps();
+      // // const opts = allGps.map
+      // options.value = allGps;
+      // console.log('allGps', allGps);
+    },
+    {
+      deep: true,
+    },
+  );
+
   function mapFitBounds(mapRef, markers) {
     let bounds;
     const api = mapRef.value.api;
@@ -255,9 +203,18 @@
     // infowindowPosition.value.lat = lat();
     // infowindowPosition.value.lng = lng();
   };
-  // const render = ({ count, position }) => {
-  //   console.log('count', count, position);
-  // };
+
+  const onSearch = async (item) => {
+    console.log('onSearch', item);
+    const allGps = await getGps();
+    // const opts = allGps.map
+    options.value = allGps;
+    // debugger;
+  };
+
+  const handleSelect = (item: any) => {
+    console.log('onSelect', item);
+  };
 </script>
 <style lang="less">
   // @import './dark.less';

src/views/map/list.vue

@@ -5,7 +5,12 @@
         <a-button type="primary" @click="handleCreate">新增项目</a-button>
       </template>
       <template #isShow="{ record }">
-        <Switch :checked="record.isShow" :checkedValue="1" :unCheckedValue="0" />
+        <Switch
+          :checked="record.isShow"
+          :checkedValue="1"
+          :unCheckedValue="0"
+          @click="handleUpdateSwitch(record)"
+        />
       </template>
 
       <template #createTime="{ record }">
@@ -13,7 +18,6 @@
       </template>
 
       <template #action="{ record }">
-        {{ record }}
         <TableAction
           :actions="[
             {
@@ -28,7 +32,7 @@
               // icon: 'mage:edit-fill',
               label: '场景管理',
               tooltip: '场景管理',
-              onClick: () => {},
+              onClick: () => handleOpenScene(record),
             },
             {
               // color: 'warning',
@@ -41,8 +45,11 @@
               color: 'error',
               // icon: 'mage:edit-fill',
               label: '删除',
-              tooltip: '地图模式',
-              onClick: () => {},
+              tooltip: '删除',
+              popConfirm: {
+                title: t('common.delConfirm'),
+                confirm: handleDelete.bind(null, record),
+              },
             },
           ]"
         />
@@ -52,9 +59,11 @@
       @register="registerAddProjectModal"
       @open-map="handleSelectMap"
       @reload="reload"
+      @cancel="currentLatLng = undefined"
       :currentLatLng="currentLatLng"
     />
     <MapSelectModal @register="registerMapSelectModal" @update="handleMapChose" />
+    <SceneModal @register="registerSceneModal" />
   </div>
 </template>
 <script lang="ts">
@@ -65,22 +74,33 @@
   import { Time } from '/@/components/Time';
   import { useModal } from '/@/components/Modal';
 
-  import { ListApi } from '/@/api/mapOpt/list';
+  import { ListApi, MapOptType, DelMapOptApi, AddOptOrUpdateApi } from '/@/api/mapOpt/list';
   import { useI18n } from '/@/hooks/web/useI18n';
   // import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useGo } from '/@/hooks/web/usePage';
   import { useLocaleStore } from '/@/store/modules/locale';
   import AddProjectModal from './addProjectModal.vue';
   import MapSelectModal from './mapSelectModal.vue';
+  import SceneModal from './sceneModal.vue';
+
   const localeStore = useLocaleStore();
 
   const isJA = computed(() => localeStore.getLocale === 'ja');
 
   export default defineComponent({
-    components: { BasicTable, AddProjectModal, MapSelectModal, Switch, Time, TableAction },
+    components: {
+      BasicTable,
+      AddProjectModal,
+      MapSelectModal,
+      SceneModal,
+      Switch,
+      Time,
+      TableAction,
+    },
     setup() {
       const [registerAddProjectModal, { openModal: openAddProjectModal }] = useModal();
       const [registerMapSelectModal, { openModal: openMapModal }] = useModal();
+      const [registerSceneModal, { openModal: openSceneModal }] = useModal();
       const { createMessage } = useMessage();
       const go = useGo();
       const { t } = useI18n();
@@ -116,7 +136,7 @@
         },
 
         {
-          title: '操作',
+          title: t('common.operating'),
           dataIndex: '',
           slots: { customRender: 'action' },
           fixed: 'right',
@@ -129,7 +149,7 @@
         labelWidth: 100,
         schemas: [
           {
-            field: 'phoneNum',
+            field: 'projectName',
             label: '项目名称',
             component: 'Input',
             colProps: {
@@ -161,10 +181,26 @@
       function handleSelectMap() {
         openMapModal(true);
       }
-      function handleMapChose(coord) {
+      function handleMapChose(coord: { lat: number; lng: number }) {
         console.log('handleMapChose', coord);
         currentLatLng.value = coord;
       }
+      async function handleDelete(record: MapOptType) {
+        await DelMapOptApi({ id: record.id });
+        // console.log('handleDelete', record, res);
+        createMessage.success(t('common.optSuccess'));
+        reload();
+      }
+      async function handleUpdateSwitch(record: MapOptType) {
+        const reveseValue = Math.abs(record.isShow - 1);
+        record.isShow = reveseValue;
+        await AddOptOrUpdateApi(record);
+        reload();
+      }
+      function handleOpenScene(record: MapOptType) {
+        console.log('handleOpenScene', record);
+        openSceneModal(true, record);
+      }
 
       return {
         registerTable,
@@ -178,6 +214,10 @@
         handleMapChose,
         currentLatLng,
         reload,
+        handleDelete,
+        handleUpdateSwitch,
+        registerSceneModal,
+        handleOpenScene,
       };
     },
   });

src/views/map/mapSelectModal.vue

@@ -12,7 +12,7 @@
   >
     <GoogleMap
       ref="mapRef"
-      api-key="AIzaSyBGUvCR1bppO9pfuS0MUWzuftiZ127y4Os"
+      :api-key="googleKey"
       mapId="DEMO_MAP_ID"
       :center="center"
       :map-type-control="false"
@@ -113,6 +113,7 @@
       const mapRef = ref();
       const searchMarker = ref({ lat: 0, lng: 0 });
       const searchMarkerRef = ref();
+      const googleKey = computed(() => import.meta.env.VITE_GOOGLE_KEY);
 
       const lang = computed(() => localeStore.getLocale);
 
@@ -230,6 +231,7 @@
       };
       const handleCancel = async () => {
         resetMapview();
+        console.log('reset map');
       };
       const handleRsize = () => {
         console.log('handleRsize');
@@ -250,6 +252,7 @@
         searchMarker,
         handleCancel,
         handleRsize,
+        googleKey,
         // searchMarkerShow,
       };
     },

src/views/map/sceneModal.vue

@@ -0,0 +1,244 @@
+<template>
+  <BasicModal
+    v-bind="$attrs"
+    @register="register"
+    title="项目场景"
+    @ok="handleSubmit"
+    :width="850"
+    @cancel="handleCancel"
+    :closeFunc="handlecloseFunc"
+  >
+    <BasicTable @register="registerTable" v-if="!isAdding">
+      <template #toolbar>
+        <a-button type="primary" @click="isAdding = true">添加场景</a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '查看',
+              tooltip: '查看',
+              disabled: !record.webSite,
+              onClick: () => handleSceneOpen(record),
+            },
+            {
+              color: 'error',
+              // icon: 'mage:edit-fill',
+              label: '删除',
+              tooltip: '删除',
+              popConfirm: {
+                title: t('common.delConfirm'),
+                confirm: () => handleSceneDel(record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <BasicTable
+      @register="registerEditTable"
+      v-else
+      rowKey="num"
+      :rowSelection="{ type: 'checkbox' }"
+    />
+
+    <!-- </BasicTable> -->
+    <template #centerFooter> </template>
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, ref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { ListApi } from '/@/api/scene/list';
+  import { AddSceneApi, DelSceneApi } from '/@/api/mapOpt/list';
+  import { useI18n } from '/@/hooks/web/useI18n';
+  import { FormProps } from '/@/components/Form';
+
+  import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { useLocaleStore } from '/@/store/modules/locale';
+  // import { disableCache } from '@iconify/iconify';
+  const localeStore = useLocaleStore();
+  const { t } = useI18n();
+
+  export default defineComponent({
+    components: { BasicModal, BasicTable, TableAction },
+    props: {
+      currentLatLng: {
+        type: Object as PropType<{
+          lat: number;
+          lng: number;
+        }>,
+      },
+    },
+    emits: ['register', 'success', 'open-map', 'reload', 'cancel'],
+    setup(props, { emit }) {
+      // const { createMessage } = useMessage();
+      const projectId = ref('');
+      const isAdding = ref(false);
+      const { createMessage } = useMessage();
+      const isJA = computed(() => localeStore.getLocale === 'ja');
+      const location = computed(() =>
+        props.currentLatLng ? `${props.currentLatLng?.lat}, ${props.currentLatLng?.lng}` : '',
+      );
+
+      const [register, { closeModal }] = useModalInner((data) => {
+        data && onDataReceive(data);
+      });
+      const searchForm: Partial<FormProps> = {
+        labelWidth: 100,
+        schemas: [
+          {
+            field: 'sceneName',
+            label: t('routes.scenes.sceneName'),
+            component: 'Input',
+            colProps: {
+              span: 10,
+            },
+          },
+        ],
+      };
+
+      const columns: BasicColumn[] = [
+        {
+          title: 'ID',
+          dataIndex: 'id',
+          ifShow: false,
+          fixed: 'left',
+          width: 60,
+        },
+        {
+          title: t('routes.scenes.sceneName'),
+          dataIndex: 'sceneName',
+          ellipsis: false,
+          width: 80,
+        },
+        {
+          title: t('routes.scenes.num'),
+          dataIndex: 'num',
+          width: 100,
+        },
+        {
+          title: t('routes.scenes.snCode'),
+          dataIndex: 'snCode',
+          width: 100,
+        },
+        {
+          title: t('common.operating'),
+          dataIndex: '',
+          slots: { customRender: 'action' },
+          fixed: 'right',
+          align: 'center',
+          width: 150,
+        },
+      ];
+      const [registerTable, { reload }] = useTable({
+        title: '场景列表',
+        api: ListApi,
+        columns: columns,
+        resizeHeightOffset: 300,
+        useSearchForm: false,
+        showTableSetting: false,
+        tableSetting: { fullScreen: true },
+        showIndexColumn: false,
+        rowKey: 'id',
+        pagination: { pageSize: 10 },
+        ellipsis: false,
+        bordered: true,
+        immediate: false,
+        searchInfo: {
+          projectId: projectId,
+        },
+      });
+
+      const [registerEditTable, { getSelectRowKeys }] = useTable({
+        title: '选择场景',
+        api: ListApi,
+        columns: columns.filter((item) => item.title !== t('common.operating')),
+        formConfig: searchForm,
+        resizeHeightOffset: 300,
+        useSearchForm: true,
+        showTableSetting: false,
+        tableSetting: { fullScreen: true },
+        showIndexColumn: false,
+        rowKey: 'num',
+        pagination: { pageSize: 10 },
+        ellipsis: false,
+        bordered: true,
+      });
+
+      function onDataReceive(data) {
+        console.log('Data Received', data.id);
+        projectId.value = data.id;
+
+        reload();
+      }
+      const handleSubmit = async () => {
+        if (isAdding.value) {
+          const ids = getSelectRowKeys();
+          console.log('handleSubmit', ids);
+          isAdding.value = false;
+          if (ids.length > 0) {
+            await AddSceneApi({
+              projectId: Number(projectId.value),
+              numList: ids,
+            });
+            reload();
+          } else {
+            createMessage.error(t('modal.atLeastOne'));
+          }
+        } else {
+          // debugger;
+          closeModal();
+        }
+      };
+
+      const handleCancel = async () => {
+        emit('cancel');
+      };
+      const handleSceneDel = async (record: any) => {
+        console.log('record', record.num);
+        await DelSceneApi({
+          projectId: Number(projectId.value),
+          numList: [record.num],
+        });
+        reload();
+      };
+      const handlecloseFunc = () => {
+        if (isAdding.value) {
+          isAdding.value = false;
+          setTimeout(reload, 500);
+          return Promise.resolve(false);
+        } else {
+          return Promise.resolve(true);
+        }
+      };
+      const handleSceneOpen = (record: any) => {
+        const link = record.webSite + `&lang=${isJA.value ? 'ja' : 'zh'}`;
+        console.log('record', link);
+        window.open(link, '_blank');
+      };
+
+      return {
+        t,
+        register,
+        handleSubmit,
+        closeModal,
+        location,
+        handleCancel,
+        registerTable,
+        registerEditTable,
+        isAdding,
+        handleSceneDel,
+        handlecloseFunc,
+        handleSceneOpen,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  :deep(.vben-basic-table-action.left) {
+    justify-content: center;
+  }
+</style>