diff --git a/public/static/offline/JSON/getArtWorkList.json b/public/static/offline/JSON/getArtWorkList.json index 586ba99..f353aab 100644 --- a/public/static/offline/JSON/getArtWorkList.json +++ b/public/static/offline/JSON/getArtWorkList.json @@ -16,6 +16,9 @@ "contentEn": "fwefwqe", "icon": [ "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/DEB6NDQ8975GvfR5yKclw.png" + ], + "icon_sel": [ + "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/DEB6NDQ8975GvfR5yKclw.png" ] } }, @@ -33,6 +36,9 @@ "contentEn": "fwerf", "icon": [ "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/RyWHWQugQvDwEjEY_MwHb.png" + ], + "icon_sel": [ + "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/DEB6NDQ8975GvfR5yKclw.png" ] } }, @@ -50,6 +56,9 @@ "contentEn": "56456", "icon": [ "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/ea-Q5M6K-ri1xw3UfY18_.png" + ], + "icon_sel": [ + "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/DEB6NDQ8975GvfR5yKclw.png" ] } }, @@ -67,6 +76,9 @@ "contentEn": "hhrt", "icon": [ "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/j49AhcyUGy3ooRveXNTAt.png" + ], + "icon_sel": [ + "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/DEB6NDQ8975GvfR5yKclw.png" ] } }, @@ -84,6 +96,9 @@ "contentEn": "545", "icon": [ "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/GeJT_PoeLfW6e2SgxCGmQ.png" + ], + "icon_sel": [ + "/iotFile/project-ey_fpaur6s6fkgvszywana/20230713/DEB6NDQ8975GvfR5yKclw.png" ] } } diff --git a/public/static/qm/MainMap_QM.js b/public/static/qm/MainMap_QM.js index bd03e7e..f53cb7c 100644 --- a/public/static/qm/MainMap_QM.js +++ b/public/static/qm/MainMap_QM.js @@ -2203,6 +2203,7 @@ MainMap_QM.prototype = { * */ showFloor: function (fIndex = -1, callBack = undefined) { + Map_QM.changeMapModel("3D"); Map_QM.resetFloorState(); Map_QM.clearFloor(fIndex); if (fIndex != -1) { @@ -2426,7 +2427,7 @@ MainMap_QM.prototype = { * */ onShowDeviceSite: function () { - this.changeMapModel("3D"); + //this.changeMapModel("3D"); this.showFloor(this.util.deviceObj.floor); }, /** @@ -2930,7 +2931,7 @@ MainMap_QM.prototype = { if(Map_QM.mapArr[Map_QM.util.selectBuild] && Map_QM.mapArr[Map_QM.util.selectBuild][Map_QM.util.selectFloor]){ Map_QM.labelRenderer.renderObject( Map_QM.mapArr[Map_QM.util.selectBuild][Map_QM.util.selectFloor].labelObj, Map_QM.camera ); } - Map_QM.CSSObject && Map_QM.labelRenderer.renderObject( Map_QM.CSSObject, Map_QM.camera); + Map_QM.CSSObject && Map_QM.labelRenderer.renderObject( Map_QM.CSSObject, Map_QM.camera); for (let item of Map_QM.mixers) { item.update(T); } @@ -3053,13 +3054,13 @@ MainMap_QM.prototype = { */ addElementByNode: function (divObj, node, type='tip') { Map_QM.elementDestroy(type); - floorOrder == -1 && (floorOrder = Map_QM.util.selectFloor); - let pathData = Config.allMap[Config.selectBuild].buildArr[floorOrder].mapData.path; + let floorOrder = Map_QM.util.selectFloor; + let pathData = Map_QM.util.allMap[Map_QM.util.selectBuild].buildArr[floorOrder].mapData.path; if (!pathData || !divObj ) { return; } if(pathData.nodes.length > 0){ - pathData.nodes.sort(Config.sortNode); + pathData.nodes.sort(Map_QM.util.sortNode); let shopInfo = new THREE.CSS2DObject(divObj); shopInfo.position.set(pathData.nodes[parseInt(node)].x, -1*pathData.nodes[parseInt(node)].y, 60 ) shopInfo.applyMatrix4(Map_QM.mapArr[Map_QM.util.selectBuild][floorOrder].allObj.matrix); @@ -3070,6 +3071,25 @@ MainMap_QM.prototype = { return; }, + showAreaAnimate:function (aName="-"){ + if(aName=="-"){ + isJUZ = false; + Map_QM.controls.setZoom(1) + Map_QM.controls.reset() + let angle = Map_QM.util.options.deviceAng ? Map_QM.util.deviceObj.angle : Map_QM.util.mapAngle + Map_QM.rotationAngle(angle) + return; + } + TweenMax.killAll(true) + Map_QM.mapArr[Map_QM.util.selectBuild][Map_QM.util.selectFloor].allObj.traverse((obj) => { + if(obj.userData && obj.userData.type == "build"){ + if(obj.name == aName){ + Map_QM.onShowLocalSite({x:obj.userData.xaxis,y:obj.userData.yaxis}); + } + } + }); + }, + /** * @api {方法} changeShowShopName() 修改房间显示名称 * @apiGroup 地图显示 @@ -3237,6 +3257,7 @@ MainMap_QM.prototype = { for (let i = 0; i < intersects.length; i++) { //房间BOX点击 + console.log(intersects); if (intersects[i].object.userData && intersects[i].object.userData.type == "shop" && intersects[i].object.name != "") { if (Map_QM.endModel && Map_QM.endModel.visible) { Map_QM.endModel.visible = false; @@ -5293,7 +5314,32 @@ FloorMap_QM.prototype = { }, initArt:function(){ if (Map_QM.util.artUrl.length > 0) { - + let _this = this; + Map_QM.util.artUrl.forEach((item)=>{ + let url = Map_QM.util.beforPath + item.content.icon[0]; + let spriteMap = new THREE.TextureLoader().load(url); + let spriteMaterial = new THREE.SpriteMaterial({ //sizeAttenuation: false 禁止跟随鼠标缩放 + map: spriteMap, + depthTest: true, + transparent: true, + alphaTest: 0.1 + }); + let sprite = new MySprite_QM(spriteMaterial); + sprite.scale.set(64, 64, 1); + sprite.imgUrl = url; + sprite.center = new THREE.Vector2(0.5, 0); + sprite.userData = item; + sprite.userData.type = "art"; + sprite.userData.use = "all"; + sprite.userData.src = url; + let pathData = Map_QM.util.allMap[_this.buildOrder].buildArr[_this.floorOrder].mapData.path; + if(pathData.nodes.length > 0){ + pathData.nodes.sort(Config.sortNode); + sprite.position.set(pathData.nodes[parseInt(item.content.point)].x, -1*pathData.nodes[parseInt(item.content.point)].y, 60); + sprite.renderOrder = 300; + _this.serObj.add(sprite); + } + }) } }, initLogos: function () { @@ -5432,10 +5478,12 @@ FloorMap_QM.prototype = { mash.castShadow = false; mash.userData = { "type": "build", - "order": this.floorOrder + "order": this.floorOrder, + "xaxis":mapData.buildArea[i].xaxis, + "yaxis":mapData.buildArea[i].yaxis, }; mash.userData.opacity = mapData.buildArea[i].alphaModle / 100 || 0; - mash.name = "floor"; + mash.name = mapData.buildArea[i].name; this.allObj.add(mash); } //房间 @@ -6147,7 +6195,7 @@ MyModel_QM.prototype.MyModelShape = function (areaArr, howllowArr, opObj, entity let cubeEdges = new THREE.EdgesGeometry(scanGeometry, 60); let cubeLine = new THREE.LineSegments(cubeEdges, material); cubeLine.renderOrder = indexOrder - 5; - mesh.add(cubeLine); + //mesh.add(cubeLine); } if (opObj.name != "floor") { mesh.position.z = opObj.site || 0; diff --git a/src/assets/images/guide/arrow.svg b/src/assets/images/guide/arrow.svg new file mode 100644 index 0000000..52a8b84 --- /dev/null +++ b/src/assets/images/guide/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/guide/triangle.svg b/src/assets/images/guide/triangle.svg new file mode 100644 index 0000000..8a56f32 --- /dev/null +++ b/src/assets/images/guide/triangle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Map/Map.vue b/src/components/Map/Map.vue index 513bed6..7c09ded 100644 --- a/src/components/Map/Map.vue +++ b/src/components/Map/Map.vue @@ -3,7 +3,7 @@
- +
@@ -15,6 +15,36 @@
{{ $t('nav') }}
+ +
+
+
{{ shop.shopName }}
+
{{ shop.shopNameEn }}
+
+
+ +
{{ $t('nav2') }}
+
+
+ +
+
{{ shop.industryCode }}
+
+ +
+ +
+
{{ shop.shopName }}
+
{{ shop.shopNameEn }}
+
+
+ +
{{ $t('nav2') }}
+
+
+ +
+
@@ -145,4 +175,93 @@ function handleDetail() { line-height: 24px; user-select: none; } + +#artInfo { + position: absolute; + z-index: 500; + width: 200px; + height: 110px; + visibility: hidden; + .circle { + @include fl(center); + + position: absolute; + bottom: 0; + left: 50%; + width: 20px; + height: 20px; + font-size: 10px; + font-family: 'font_regular'; + color: #fff; + background: #e00068; + border-radius: 50%; + font-style: normal; + font-weight: 400; + line-height: 12px; + } +} +#artWorkInfo { + position: absolute; + z-index: 500; + width: 200px; + height: 110px; + visibility: hidden; + .door { + width: 200px; + height: 112px; + border-radius: 14px 14px 0 0; + } +} +.top { + width: 200px; + height: 56px; + padding-top: 9px; + padding-left: 16px; + background: #8a766a; + border-radius: 14px 14px 0 0; + .name { + margin-bottom: 4px; + font-size: 14px; + font-family: 'font_bold'; + color: #fff; + font-style: normal; + font-weight: 700; + line-height: 22px; + } + .nameEn { + font-size: 10px; + font-family: 'font_bold'; + color: rgb(255 255 255 / 60%); + font-style: normal; + font-weight: 700; + line-height: 12px; + } +} +.middle { + width: 200px; + height: 32px; + padding: 10px 16px; + background: #e2dcd5; + border-radius: 0 0 14px 14px; + img { + width: 12px; + height: 12px; + margin-right: 6px; + } + .label { + font-size: 10px; + font-family: 'bold_regular'; + color: #615c59; + font-style: normal; + font-weight: 400; + line-height: 12px; + } +} +.triangle { + text-align: center; + img { + width: 12px; + height: 5px; + } +} diff --git a/src/composables/useGuideFilterShop.ts b/src/composables/useGuideFilterShop.ts index 14d433f..ed2a85c 100644 --- a/src/composables/useGuideFilterShop.ts +++ b/src/composables/useGuideFilterShop.ts @@ -22,11 +22,18 @@ export const useGuideFilterShop = () => { areaName.value = name if (name === '全部区域') { selectedShopList.value = shopList.value.filter(item => item.floorOrder === floorIdx.value) + window.Map_QM.showAreaAnimate() } else { selectedShopList.value = selectedShopList.value.filter(item => item.regionName === name) + window.Map_QM.showAreaAnimate(name) } hideMapDialog() } - return { areaName, floorIdx, selectedShopList, changeFloor, changeArea } + // 筛选美食业态 + function changeFoodShopList() { + selectedShopList.value = shopList.value.filter(item => item.isSpecial) + } + + return { areaName, floorIdx, selectedShopList, changeFloor, changeArea, changeFoodShopList } } diff --git a/src/composables/useGuideMapOperation.ts b/src/composables/useGuideMapOperation.ts index fc40f16..6de4ba1 100644 --- a/src/composables/useGuideMapOperation.ts +++ b/src/composables/useGuideMapOperation.ts @@ -4,7 +4,7 @@ import { list, MapControl } from '@/views/Guide/list' import type { Item } from '@/views/Guide/list' import { useRootStore } from '@/store/root' -export const useGuideMapOperation = (callback: (index: number) => void) => { +export const useGuideMapOperation = (callback: (index: number) => void, changeFoodShopList: () => void) => { const mapIdx = ref(-1) const mapTimer = ref() const store = useRootStore() @@ -20,11 +20,6 @@ export const useGuideMapOperation = (callback: (index: number) => void) => { hideMapDialog() window.Map_QM.onShowDeviceSite() } - //活动品牌 - function onClickShopAct() { - hideMapDialog() - window.Map_QM.changeStateShopPro(true) - } function handleMapIcon(item: Item, index: number) { clearTimeout(mapTimer.value) @@ -46,8 +41,8 @@ export const useGuideMapOperation = (callback: (index: number) => void) => { onClickMeDirect() break - case MapControl.ACTIVITY_BRAND: - onClickShopAct() + case MapControl.FOOD: + changeFoodShopList() break default: @@ -55,15 +50,10 @@ export const useGuideMapOperation = (callback: (index: number) => void) => { } } - //切换楼层 - function switchFloor(floorOrder: number) { - hideMapDialog() - window.Map_QM.showFloor(floorOrder) - } onBeforeUnmount(() => { hideMapDialog() clearTimeout(mapTimer.value) }) - return { switchFloor, handleMapIcon, list, mapIdx } + return { handleMapIcon, list, mapIdx } } diff --git a/src/composables/useInitMap.ts b/src/composables/useInitMap.ts index 6e6a62d..70d1661 100644 --- a/src/composables/useInitMap.ts +++ b/src/composables/useInitMap.ts @@ -6,7 +6,7 @@ import { PREFIX } from '@/enums' export const useInitMap = async function () { const store = useRootStore() - const { device, facilityList, shopList } = storeToRefs(store) + const { device, facilityList, shopList, artPlaceList } = storeToRefs(store) try { const { data } = await getMapData() const delPrefixOfFacilityList = facilityList.value.map(item => ({ @@ -27,6 +27,7 @@ export const useInitMap = async function () { navPoint: device.value.location, angle: device.value.angle, iconUrl: delPrefixOfFacilityList, + artUrl: artPlaceList, mapData: data, shopData: shopList.value.slice() } @@ -49,9 +50,14 @@ function onClickShop(event: any) { hideMapDialog() } } + //地图弹框消失 export function hideMapDialog() { window.shopInfo.style.visibility = 'hidden' + const art: any = document.getElementById('artInfo') + const artWork: any = document.getElementById('artWorkInfo') + art.style.visibility = 'hidden' + artWork.style.visibility = 'hidden' } //显示地图弹框 diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json index cbc286e..078bb33 100644 --- a/src/i18n/lang/en.json +++ b/src/i18n/lang/en.json @@ -1,6 +1,7 @@ { "detail": "Detail", "nav": "Navigate", + "nav2": "Navigate", "energy": "Energy", "replay": "Replay", "pause": "Pause", diff --git a/src/i18n/lang/zh.json b/src/i18n/lang/zh.json index 472dd0f..4f37f2f 100644 --- a/src/i18n/lang/zh.json +++ b/src/i18n/lang/zh.json @@ -1,6 +1,7 @@ { "detail": "详情", "nav": "导航", + "nav2": "立即导航", "energy": "新能源", "replay": "重播", "pause": "暂停", diff --git a/src/types/art.d.ts b/src/types/art.d.ts index baee5e7..45094bb 100644 --- a/src/types/art.d.ts +++ b/src/types/art.d.ts @@ -18,6 +18,7 @@ declare type ArtPlace = { point: string content: string contentEn: string - icon: string[] + icon: string[] // 图标 + icon_sel: string[] // 选中图标 } } diff --git a/src/types/map.d.ts b/src/types/map.d.ts index c309511..4f7e8da 100644 --- a/src/types/map.d.ts +++ b/src/types/map.d.ts @@ -361,6 +361,19 @@ export declare global { * @param cDist 摄像头距离 */ setCameraDist(cDist: number): void + + /** + * 调整地图显示区域 + * @param name 区域名称 不传则显示默认地图 + */ + showAreaAnimate(name?: string): void + + /** + * 展示艺术弹窗 + * @param divObject 弹窗ui + * @param node 点位 + */ + addElementByNode(divObject, node): void } pathCameraState: '2D' | '3D' diff --git a/src/views/Guide/Area.vue b/src/views/Guide/Area.vue index 99a0623..4a9b73c 100644 --- a/src/views/Guide/Area.vue +++ b/src/views/Guide/Area.vue @@ -26,6 +26,7 @@ function changeArea(name: string) { emit('changeArea', name) } +// 获取区域列表 const areaList = ref([]) getRegionList().then(({ data }) => { areaList.value = [ diff --git a/src/views/Guide/ArtList.vue b/src/views/Guide/ArtList.vue index ad44fef..2c21eee 100644 --- a/src/views/Guide/ArtList.vue +++ b/src/views/Guide/ArtList.vue @@ -8,7 +8,7 @@ >
-
+
{{ index + 1 }}
{{ item.content.name }}
@@ -25,10 +25,16 @@