fix: 🧩 相关优化

public/static/offline/JSON/config.json

@@ -1 +1,15 @@
-{"code":200,"msg":"操作成功","data":[{"id":265,"title":"前端配置","content":{"interfaceUrl":"https://project-iot.test.1000my.com/api","mobileNav":"https://qianmu-iot.1000my.com/test-projects/project-ey_fpaur6s6fkgvszywana/index.html#/?","handWriteUrl":"http://saas.1000my.com:8014/words"}}]}
+{
+  "code": 200,
+  "msg": "操作成功",
+  "data": [
+    {
+      "id": 265,
+      "title": "前端配置",
+      "content": {
+        "interfaceUrl": "http://192.168.1.137/api",
+        "mobileNav": "https://qianmu-iot.1000my.com/test-projects/project-ey_fpaur6s6fkgvszywana/index.html#/?",
+        "handWriteUrl": "http://saas.1000my.com:8014/words"
+      }
+    }
+  ]
+}

public/static/qm/MainMap_QM.js

@@ -1783,7 +1783,7 @@ MainMap_QM.prototype = {
 			let floor = new FloorMap_QM(bIndex, fIndex, Map_QM.util.allMap[bIndex].buildArr[fIndex].name);
 			floor.floorName = Map_QM.util.allMap[bIndex].buildArr[fIndex].name;
 			floor.initDraw();
-			floor.allObj.position.set(bIndex * Map_QM.util.options.bSpace, 0, 0);
+			//floor.allObj.position.set(bIndex * Map_QM.util.options.bSpace, 0, 0);
 			if (fIndex != parseInt(Map_QM.util.deviceObj.floor)) {
 				floor.allObj.visible = false;
 			}
@@ -5267,7 +5267,9 @@ FloorMap_QM = function (bIndex, fIndex, floorName) {
 	this.floorOrder = fIndex;
 	this.buildOrder = bIndex
 	this.floorName = floorName;
-
+	if(fIndex==4){
+		this.allObj.position.x = -600;
+	}
 	//存放设施图标
 	this.serObj = new THREE.Object3D();
 	//存放车位box

src/App.vue

@@ -25,5 +25,9 @@ body,
   :deep(.swiper-pagination-bullet) {
     border-radius: 2px;
   }
+  .animate__animated {
+    animation-duration: 0.3s !important;
+    animation-duration: 0.3s !important;
+  }
 }
 </style>

src/components/Map/Map.vue

@@ -90,10 +90,10 @@ function handleDetail() {
 <style lang="scss" scoped>
 #mapContainer {
   position: absolute;
-  top: 152px;
-  right: 345px;
-  width: 1122px;
-  height: 676px;
+  top: 0;
+  right: 0;
+  width: 1432px;
+  height: 948px;
 }
 .map-flex {
   display: flex;

src/components/PublicComponent/PublicComponent.vue

@@ -11,9 +11,7 @@
   <Search v-if="showSearch"></Search>
 
   <!-- 推荐弹窗 -->
-  <Transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
-    <RecommendDialog />
-  </Transition>
+  <RecommendDialog />
 
   <shopdetail v-if="showDetail"></shopdetail>
 
@@ -41,7 +39,7 @@ const RecommendDialog = defineAsyncComponent(() => import('@/components/Recommen
 const router = useRouter()
 const route = useRoute()
 const store = useRootStore()
-const { language, showSearch, showDetail, shopList } = storeToRefs(store)
+const { language, showSearch, showDetail, shopList, device } = storeToRefs(store)
 const { checkHandleScreen, showCountDownDialog, title, toIndexTime, toWallpaperTime, isWallpaper } = useHandleScreen(handleScreen)
 
 //指定时间返回首页时做的操作
@@ -78,13 +76,13 @@ watch(route, to => {
   if (to.fullPath === '/' || to.fullPath === '/nav') {
     window?.Map_QM?.startRender()
     if (to.fullPath === '/') {
-      window?.Map_QM?.showFloor(6)
+      window?.Map_QM?.showFloor(device.value.floorOrder)
       const art: any = document.getElementById('mapContainer')
-      art.style.width = '2244px'
-      art.style.height = '1352px'
-      art.style.right = '690px'
-      art.style.top = '304px'
-      window.Map_QM.changeWindowResize(2244, 1352)
+      art.style.width = '2864px'
+      art.style.height = '1896px'
+      art.style.right = '0'
+      art.style.top = '0'
+      window.Map_QM.changeWindowResize(2864, 1896)
     }
   } else {
     window?.Map_QM?.cancelRender()

src/components/Recommend/Recommend.vue

@@ -4,8 +4,7 @@
     <div class="close-icon" @click="close">
       <img src="@/assets/images/shopDetail/close.svg" alt="" />
     </div>
-
-    <div class="content">
+    <div class="content animate__animated animate__fadeInUp">
       <div class="name-container">
         <div class="name">{{ columnList[0].content.name }}</div>
         <div class="line">/</div>

src/composables/useGuideFilterShop.ts

@@ -1,13 +1,26 @@
-import { ref, shallowRef, toRefs } from 'vue'
+import { ref, shallowRef, toRefs, computed } from 'vue'
 import { useRootStore } from '@/store/root'
 import { hideMapDialog } from '@/composables/useInitMap'
 export const useGuideFilterShop = () => {
   const store = useRootStore()
-  const { shopList, specialIndustryList } = toRefs(store)
+  const { shopList, specialIndustryList, device } = toRefs(store)
 
   const areaName = ref('全部区域') //区域选中索引
-  const floorIdx = ref(6) //楼层选中索引
-  const selectedShopList = shallowRef<Shop[]>([]) //选中楼层的店铺列表
+  const floorIdx = ref(device.value.floorOrder) //楼层选中索引
+  const selectedShopList = shallowRef<Shop[]>(shopList.value.filter(item => item.floorOrder === device.value.floorOrder)) //选中楼层的店铺列表
+  const showFoodIn = computed(() => {
+    const arr = selectedShopList.value.filter(item => {
+      let flag = false
+      for (let i = 0; i < specialIndustryList.value.length; i++) {
+        if (specialIndustryList.value[i].content.industry_id === item.industryFatherCode) {
+          flag = true
+          break
+        }
+      }
+      return flag
+    })
+    return arr.length
+  })
 
   // 切换楼层
   function changeFloor(floorOrder: number) {
@@ -49,7 +62,7 @@ export const useGuideFilterShop = () => {
 
   // 筛选美食业态
   function changeFoodShopList() {
-    selectedShopList.value = shopList.value.filter(item => {
+    selectedShopList.value = selectedShopList.value.filter(item => {
       let flag = false
       for (let i = 0; i < specialIndustryList.value.length; i++) {
         if (specialIndustryList.value[i].content.industry_id === item.industryFatherCode) {
@@ -61,5 +74,5 @@ export const useGuideFilterShop = () => {
     })
   }
 
-  return { areaName, floorIdx, selectedShopList, changeFloor, changeArea, changeFoodShopList }
+  return { areaName, floorIdx, selectedShopList, changeFloor, changeArea, changeFoodShopList, showFoodIn }
 }

src/composables/useGuideMapOperation.ts

@@ -27,10 +27,10 @@ export const useGuideMapOperation = (callback: (index: number) => void, changeFo
 
     switch (item.name) {
       case MapControl.RESET:
-        callback(6)
+        callback(device.value.floorOrder)
         onClickDeviceSite()
         mapTimer.value = setTimeout(() => {
-          mapIdx.value = -1
+          mapIdx.value = -2
           mapTimer.value = -1
           clearTimeout(mapTimer.value)
         }, 300)

src/composables/useInitMap.ts

@@ -28,7 +28,6 @@ export const useInitMap = async function () {
           })
         })
         store.SET_MAP_PARK_LIST(arr)
-        window.Map_QM.showFloor(6)
       },
       {
         build: device.value?.buildingOrder ?? 0,

src/composables/useStartNavi.ts

@@ -16,7 +16,7 @@ export const useStartNavi = (shop: Ref<Shop>, device: Ref<Device>, setPauseRefFn
   startNavi(shop.value)
 
   onBeforeUnmount(() => {
-    window.Map_QM.showFloor(6)
+    window.Map_QM.showFloor(device.value.floorOrder)
   })
 
   //导航动画

src/views/Guide/Floor.vue

@@ -69,6 +69,9 @@ function changeFloor(floorOrder: number) {
   .ac {
     color: #fff;
     background: #e00068;
+    img {
+      filter: brightness(0) invert(500%);
+    }
   }
 }
 </style>

src/views/Guide/FloorPicList.vue

@@ -40,7 +40,7 @@ getFloorPicList().then(({ data }) => {
 <style lang="scss" scoped>
 .floor-pic-lists {
   position: fixed;
-  top: 246px;
+  top: 247px;
   right: 50px;
   z-index: 998;
   .floor {
@@ -49,7 +49,6 @@ getFloorPicList().then(({ data }) => {
     padding: 3px 0;
     margin-bottom: 8px;
     background: linear-gradient(270deg, rgb(138 118 106 / 10%) 0%, rgb(138 118 106 / 0%) 100%);
-    border: 2px solid #fff;
     border-radius: 0 24px 24px 0;
     img {
       width: 208px;

src/views/Guide/Guide.vue

@@ -6,8 +6,8 @@
     </Transition>
 
     <!-- 区域列表 -->
-    <Transition appear enter-active-class="animate__animated animate__fadeIn">
-      <Area v-if="floorIdx !== 6" :area-name="areaName" @change-area="changeAreas" />
+    <Transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
+      <Area v-if="floorIdx === 3 || floorIdx === 5" :area-name="areaName" @change-area="changeAreas" />
     </Transition>
 
     <!-- 店铺列表 -->
@@ -27,6 +27,14 @@
           </div>
         </ScrollView>
         <div class="faclists">
+          <Transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
+            <div v-if="showFoodIn" class="reset-dir" @click="handleMapIcon(foodIn, -1)">
+              <div class="top" :class="mapIdx === -1 && 'ac'">
+                <img :src="foodIn.icon" alt="" />
+              </div>
+              <div class="txt">{{ switchLanguage(foodIn, 'name') }}</div>
+            </div>
+          </Transition>
           <div v-for="(item, index) in list" :key="item.name" class="reset-dir" @click="handleMapIcon(item, index)">
             <div class="top" :class="mapIdx === index && 'ac'">
               <img :src="item.icon" alt="" />
@@ -73,7 +81,7 @@
 
     <!-- 区域缩略图 -->
     <Transition appear enter-active-class="animate__animated animate__fadeIn">
-      <img v-if="floorIdx !== 6" class="area" :src="areaPic[areaName]" alt="" />
+      <img v-if="floorIdx === 3 || floorIdx === 5" class="area" :src="areaPic[areaName]" alt="" />
     </Transition>
 
     <!-- 人行道等 -->
@@ -105,10 +113,11 @@ import ShopList from './ShopList.vue'
 import Place from './Place.vue'
 import ArtList from './ArtList.vue'
 import FloorPicList from './FloorPicList.vue'
+import { MapControl } from './list'
 const store = useRootStore()
 const { switchLanguage } = useSwitchLanguage()
 const { language, facilityList, artPlaceList, currentArtName } = toRefs(store)
-const { floorIdx, areaName, selectedShopList, changeFloor, changeArea, changeFoodShopList } = useGuideFilterShop() //筛选店铺
+const { floorIdx, areaName, selectedShopList, changeFloor, changeArea, changeFoodShopList, showFoodIn } = useGuideFilterShop() //筛选店铺
 const { handleMapIcon, list, mapIdx } = useGuideMapOperation(changeFloor, changeFoodShopList) //复位 位置等操作
 const { handleFacility } = useFacilityNav() //公共设施导航
 
@@ -123,14 +132,14 @@ getAreaPicList().then(({ data }) => {
 // 切换楼层
 function changeFloors(floorOrder: number) {
   changeFloor(floorOrder)
-  mapIdx.value = -1
+  mapIdx.value = -2
   currentArtName.value && store.SET_CURRENT_ART_NAME('')
 }
 
 // 切换区域
 function changeAreas(name: string) {
   changeArea(name)
-  mapIdx.value = -1
+  mapIdx.value = -2
   currentArtName.value && store.SET_CURRENT_ART_NAME('')
 }
 
@@ -158,6 +167,13 @@ function show(item: ArtPlace) {
   store.SET_CURRENT_ART_NAME(item.content.name)
   store.SET_SHOP(shop)
 }
+
+const foodIn = {
+  name: MapControl.FOOD,
+  nameEn: 'food',
+  icon: require('@/assets/images/guide/food.svg'),
+  iconActive: require('@/assets/images/guide/brand_active.svg')
+}
 </script>
 
 <style lang="scss" scoped>
@@ -240,7 +256,7 @@ function show(item: ArtPlace) {
       .line {
         width: 1px;
         height: 32px;
-        margin: 0 32px 0 16px;
+        margin: 8px 32px 0 16px;
         background: rgb(0 0 0 / 10%);
       }
       .myScroll {
@@ -339,24 +355,5 @@ function show(item: ArtPlace) {
     width: 256px;
     height: 100px;
   }
-
-  .floor-pic-list {
-    position: fixed;
-    top: 232px;
-    right: 50px;
-    z-index: 998;
-    .floor {
-      width: 296px;
-      height: 86px;
-      padding: 3px 0;
-      margin-bottom: 8px;
-      background: linear-gradient(270deg, rgb(138 118 106 / 10%) 0%, rgb(138 118 106 / 0%) 100%);
-      border-radius: 0 24px 24px 0;
-      img {
-        width: 200px;
-        height: 80px;
-      }
-    }
-  }
 }
 </style>

src/views/Guide/list.ts

@@ -12,12 +12,6 @@ export type Item = {
 }
 
 export const list: Item[] = [
-  {
-    name: MapControl.FOOD,
-    nameEn: 'food',
-    icon: require('@/assets/images/guide/food.svg'),
-    iconActive: require('@/assets/images/guide/brand_active.svg')
-  },
   {
     name: MapControl.RESET,
     nameEn: 'reset',

src/views/Nav/Nav.vue

@@ -128,9 +128,7 @@
     <div class="bottoms">
       <div class="direction-container">
         <div class="ma-top">
-          <div class="dir-img">
-            <img class="animate__animated animate__infinite" :class="directionInfo.class" :src="directionInfo.icon" alt="" />
-          </div>
+          <img class="dir-img animate__infinite" :class="directionInfo.class" :src="directionInfo.icon" alt="" />
           <div class="direc-text" :class="{ 'd-en': language === 'en' }">{{ switchLanguage(directionInfo, 'text') }}</div>
           <div class="label">{{ $t('navs.tip') }}</div>
         </div>
@@ -188,7 +186,6 @@ function back() {
 
 // 切换路线
 function changeControl(name: NavMethods, index: number) {
-  console.log(name)
   pathGroupRef.value.resetPlayIdx()
   pathGroupRef.value.myScroll.scrollTo(0, 0, 0)
   handleControl(name, index)
@@ -220,14 +217,6 @@ watch(shop, newVal => {
   }
 })
 
-onUnmounted(() => {
-  const art: any = document.getElementById('mapContainer')
-  art.style.width = '2244px'
-  art.style.height = '1352px'
-  art.style.right = '690px'
-  art.style.top = '304px'
-  window.Map_QM.changeWindowResize(2244, 1352)
-})
 const art: any = document.getElementById('mapContainer')
 art.style.width = '2528px'
 art.style.height = '1896px'
@@ -525,10 +514,14 @@ window.Map_QM.changeWindowResize(2528, 1896)
         overflow: hidden;
         width: 132px;
         height: 206px;
-
-        img {
+        .dir-img {
           width: 132px;
           height: 132px;
+          animation-duration: 1s;
+          animation-duration: 1s;
+          animation-fill-mode: both;
+          animation-fill-mode: both;
+          animation-iteration-count: infinite;
         }
         .direc-text {
           margin-top: 20px;

src/views/Service/Service.vue

@@ -18,22 +18,18 @@
       <!-- 顧客心聲 -->
       <PictureText v-if="switchIdx === 1" :ac-list="customerVoiceList" :qr-list="qrCodeList" />
       <!-- 服务 -->
-      <ScrollView v-else ref="actScroll" :list="serviceList" :refresh-delay="200" :scrollbar="true" class="service-scroll">
-        <ul class="act-list">
-          <serviceItem v-for="(item, index) in serviceList" :key="index" :service-item="item" @click="clickItem"></serviceItem>
-        </ul>
+      <ScrollView v-else ref="actScroll" :list="serviceList" :refresh-delay="200" class="service-scroll" scroll-x>
+        <div style="display: inline-block">
+          <ul class="act-list">
+            <serviceItem v-for="(item, index) in serviceList" :key="index" :service-item="item" @click="clickItem"></serviceItem>
+          </ul>
+        </div>
       </ScrollView>
     </transition>
     <activityDetail v-if="showDetail" :act-info="currentItem" @close="showDetail = false"></activityDetail>
   </div>
 </template>
 <script setup lang="ts">
-// import { Autoplay, FreeMode, Pagination } from 'swiper'
-// import { Swiper, SwiperSlide } from 'swiper/vue'
-// import 'swiper/css'
-// import 'swiper/css/free-mode'
-// const modules = [Autoplay, FreeMode, Pagination]
-
 import activityDetail from '@/components/ActivityDetail/ActivityDetail.vue'
 import ScrollView from '@/base/ScrollView/ScrollView.vue'
 import serviceItem from './ServiceItem.vue'
@@ -118,18 +114,18 @@ function getData() {
 getData()
 </script>
 <style lang="scss" scoped>
-:deep(.bscroll-vertical-scrollbar) {
-  z-index: 3 !important;
-  // width: 500px !important;
-  background: rgb(0 0 0 / 10%);
-  border-radius: 6px;
-  opacity: 1 !important;
-  .bscroll-indicator {
-    background: #e0006891 !important;
-    border: none !important;
-    border-radius: 6px !important;
-  }
-}
+// :deep(.bscroll-vertical-scrollbar) {
+//   z-index: 3 !important;
+//   // width: 500px !important;
+//   background: rgb(0 0 0 / 10%);
+//   border-radius: 6px;
+//   opacity: 1 !important;
+//   .bscroll-indicator {
+//     background: #e0006891 !important;
+//     border: none !important;
+//     border-radius: 6px !important;
+//   }
+// }
 .service-container {
   overflow: hidden;
   padding-top: 152px;
@@ -151,7 +147,8 @@ getData()
     .act-list {
       // display: flex;
       display: grid;
-      grid-template-columns: repeat(6, 288px);
+      grid-template-rows: 1fr 1fr;
+      grid-auto-flow: column;
       gap: 16px 16px;
     }
   }