project-shenyangk11
/
sy_k11_H_base_daoshi_vue_ts
forked from common/base_daoshi_vue_ts
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 🚀 修改公共设施可滑动，修改周边增加箭头

pull/19/head
张耀 3 years ago
parent
f848ff8f72
commit
d358c4a7c7
5 changed files with 94 additions and 13 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      public/static/qm/MainMap_QM.js
  2. 44
      src/assets/images/arround/arrow.svg
  3. 2
      src/components/GuideFloors/GuideFloors.vue
  4. 7
      src/components/Traffic/Traffic.vue
  5. 49
      src/views/Guide/Guide.vue

5
public/static/qm/MainMap_QM.js
View File

@ -5893,7 +5893,7 @@ FindPath_QM.prototype.drawPath = function (floorOrder) {
}
}
//this.lineDashed.name = 'lineDash'
this.lineDashed_old = new PathLine(12, linePath, parseInt(Map_QM.util.buildHeight) + 1, 'rgb(169,181,211)', 'rgb(189, 192, 203)', true)
this.lineDashed_old = new PathLine(12, linePath, parseInt(Map_QM.util.buildHeight) + 1, 'rgb(110, 149, 254)', 'rgb(110,125,254)', true)
this.lineDashed_old.renderOrder = 128
Map_QM.mapArr[Map_QM.util.selectBuild][floorOrder].allObj.add(this.lineDashed_old)
@ -6012,7 +6012,7 @@ FindPath_QM.prototype.playMoveGuide = function () {
Map_QM.guide.position.x = px;
Map_QM.guide.position.y = py;
Map_QM.moveCameraBy2D({ x: px, y: -1 * py });
_selfFindPath.updateDrawPath() //实时绘制有效路径 await 修是 promise
//_selfFindPath.updateDrawPath() //实时绘制有效路径 await 修是 promise
}
if (_selfFindPath.pathPlay.isPlay && Map_QM.guide) {
@ -6038,3 +6038,4 @@ FindPath_QM.prototype.playMoveGuide = function () {
}

44
src/assets/images/arround/arrow.svg
View File

@ -0,0 +1,44 @@
<svg width="878" height="188" viewBox="0 0 878 188" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M543.534 158.459L540.579 159.57L538.996 164.05L543.139 166.378L546.094 165.266L541.951 162.939L543.534 158.459Z" fill="white"/>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M547.968 156.793L545.012 157.904L543.429 162.384L547.572 164.712L550.527 163.6L546.384 161.273L547.968 156.793Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M552.398 155.127L549.443 156.238L547.86 160.718L552.003 163.046L554.958 161.934L550.815 159.607L552.398 155.127Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M345.08 146.273L341.958 145.8L338.39 148.938L340.869 152.991L343.99 153.464L341.511 149.411L345.08 146.273Z" fill="white"/>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M349.762 146.982L346.641 146.509L343.072 149.647L345.551 153.7L348.673 154.173L346.193 150.12L349.762 146.982Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M354.443 147.691L351.321 147.218L347.752 150.356L350.232 154.409L353.353 154.882L350.874 150.829L354.443 147.691Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.28589 63.5898L4.22594 64.3672L2.15701 68.6447L6.01673 71.416L9.07667 70.6387L5.21696 67.8673L7.28589 63.5898Z" fill="white"/>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M11.876 62.4238L8.81603 63.2012L6.7471 67.4787L10.6068 70.25L13.6668 69.4726L9.80704 66.7013L11.876 62.4238Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M16.4641 61.2598L13.4042 62.0372L11.3352 66.3147L15.1949 69.086L18.2549 68.3086L14.3952 65.5373L16.4641 61.2598Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M116.286 40.5898L113.226 41.3672L111.157 45.6447L115.017 48.416L118.077 47.6387L114.217 44.8673L116.286 40.5898Z" fill="white"/>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M120.876 39.4238L117.816 40.2012L115.747 44.4787L119.607 47.25L122.667 46.4726L118.807 43.7013L120.876 39.4238Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M125.464 38.2598L122.404 39.0372L120.335 43.3147L124.195 46.086L127.255 45.3086L123.395 42.5373L125.464 38.2598Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M46.8013 71.7148L49.8894 71.0583L52.1249 66.8655L48.3771 63.9446L45.2889 64.6011L49.0367 67.522L46.8013 71.7148Z" fill="white"/>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M42.1689 72.6992L45.2571 72.0427L47.4926 67.8498L43.7448 64.929L40.6566 65.5855L44.4044 68.5063L42.1689 72.6992Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M37.5386 73.6836L40.6267 73.0271L42.8622 68.8342L39.1144 65.9133L36.0262 66.5698L39.774 69.4907L37.5386 73.6836Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M109.801 58.7148L112.889 58.0583L115.125 53.8655L111.377 50.9446L108.289 51.6011L112.037 54.522L109.801 58.7148Z" fill="white"/>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M105.169 59.6992L108.257 59.0427L110.493 54.8498L106.745 51.929L103.657 52.5855L107.404 55.5063L105.169 59.6992Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M100.539 60.6836L103.627 60.0271L105.862 55.8342L102.114 52.9133L99.0262 53.5698L102.774 56.4907L100.539 60.6836Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M345.003 162.445L348.076 163.169L350.22 167.409L346.409 170.248L343.336 169.524L347.146 166.686L345.003 162.445Z" fill="white"/>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M340.393 161.359L343.466 162.083L345.61 166.323L341.799 169.162L338.726 168.439L342.537 165.6L340.393 161.359Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M335.785 160.275L338.858 160.999L341.002 165.239L337.191 168.078L334.118 167.355L337.929 164.516L335.785 160.275Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M134.003 117.445L137.076 118.169L139.22 122.409L135.409 125.248L132.336 124.524L136.146 121.686L134.003 117.445Z" fill="white"/>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M129.393 116.359L132.466 117.083L134.61 121.323L130.799 124.162L127.726 123.439L131.537 120.6L129.393 116.359Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M124.785 115.275L127.858 115.999L130.002 120.239L126.191 123.078L123.118 122.355L126.929 119.516L124.785 115.275Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M132.08 104.273L128.958 103.8L125.39 106.938L127.869 110.991L130.99 111.464L128.511 107.411L132.08 104.273Z" fill="white"/>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M136.762 104.982L133.641 104.509L130.072 107.647L132.551 111.7L135.673 112.173L133.193 108.12L136.762 104.982Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M141.443 105.691L138.321 105.218L134.752 108.356L137.232 112.409L140.353 112.882L137.874 108.829L141.443 105.691Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M556.516 173.357L559.467 172.234L563.618 174.545L562.054 179.031L559.103 180.154L560.668 175.668L556.516 173.357Z" fill="white"/>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M552.09 175.043L555.04 173.92L559.192 176.231L557.627 180.717L554.677 181.84L556.242 177.354L552.09 175.043Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M547.666 176.727L550.616 175.604L554.768 177.914L553.203 182.401L550.253 183.524L551.817 179.037L547.666 176.727Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M852.516 59.3574L855.467 58.2344L859.618 60.545L858.054 65.0314L855.103 66.1545L856.668 61.668L852.516 59.3574Z" fill="white"/>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M848.09 61.043L851.04 59.9199L855.192 62.2305L853.627 66.717L850.677 67.84L852.242 63.3536L848.09 61.043Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M843.666 62.7266L846.616 61.6035L850.768 63.9141L849.203 68.4006L846.253 69.5236L847.817 65.0372L843.666 62.7266Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M841.534 50.459L838.579 51.57L836.996 56.0501L841.139 58.3775L844.094 57.2665L839.951 54.9391L841.534 50.459Z" fill="white"/>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M845.968 48.793L843.012 49.904L841.429 54.3841L845.572 56.7115L848.527 55.6005L844.384 53.2731L845.968 48.793Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M850.398 47.127L847.443 48.238L845.86 52.7181L850.003 55.0455L852.958 53.9344L848.815 51.607L850.398 47.127Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M840.192 4.79297L837.042 4.57639L833.741 7.99438L836.543 11.832L839.693 12.0486L836.891 8.21096L840.192 4.79297Z" fill="white"/>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M844.917 5.11719L841.767 4.90061L838.466 8.3186L841.268 12.1562L844.418 12.3728L841.616 8.53517L844.917 5.11719Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M849.639 5.44141L846.49 5.22483L843.189 8.64281L845.991 12.4804L849.14 12.697L846.339 8.85939L849.639 5.44141Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M869.117 22.8906L872.242 23.3424L875.789 20.1812L873.282 16.1446L870.158 15.6928L872.664 19.7294L869.117 22.8906Z" fill="white"/>
<path opacity="0.8" fill-rule="evenodd" clip-rule="evenodd" d="M864.43 22.2129L867.554 22.6647L871.102 19.5035L868.595 15.4668L865.47 15.015L867.977 19.0517L864.43 22.2129Z" fill="white"/>
<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M859.745 21.5352L862.869 21.987L866.417 18.8257L863.91 14.7891L860.785 14.3373L863.292 18.3739L859.745 21.5352Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

2
src/components/GuideFloors/GuideFloors.vue
View File

@ -95,7 +95,7 @@ defineExpose({
<style lang="scss" scoped>
.floors-wrapper {
position: absolute;
top: 266px;
top: 190px;
left: 0;
z-index: 2;
width: 80px;

7
src/components/Traffic/Traffic.vue
View File

@ -123,6 +123,7 @@
</div>
</div>
</div>
<img src="@/assets/images/arround/arrow.svg" class="arrow" />
</div>
</transition>
</template>
@ -455,5 +456,11 @@ function changeStatus(status: string, item: any) {
}
}
}
.arrow {
position: absolute;
top: 247px;
left: 168px;
z-index: 99;
}
}
</style>

49
src/views/Guide/Guide.vue
View File

@ -31,12 +31,29 @@
<!-- 控制地图 -->
<!-- 公共设施 -->
<div class="fac-list animate__animated animate__fadeInUp">
<div v-for="(item, index) in facilityList" :key="index" class="fac-item" @click="clickFac(item)">
<img :src="item.filePath" alt="" />
<p v-text="switchLanguage(item, 'name')"></p>
<scrollView
ref="facScroll"
class="fac-scroll animate__animated animate__fadeInUp"
:pull-up="false"
:scroll-x="true"
:list="facilityList"
:refresh-delay="200"
:scrollbar="false"
>
<div class="fac-list">
<div
v-for="(item, index) in facilityList"
:key="index"
class="fac-item"
:class="{ 'fac-last': index === facilityList.length - 1 }"
@click="clickFac(item)"
>
<img :src="item.filePath" alt="" />
<p v-text="switchLanguage(item, 'name')"></p>
</div>
</div>
</div>
</scrollView>
<div class="map-btns-list">
<div
v-for="(item, index) in list"
@ -85,7 +102,7 @@ const { language, facilityList, mapStatus, device } = storeToRefs(store)
import { useGuideMapOperation } from '@/composables/useGuideMapOperation'
import { useFacilityNav } from '@/composables/useFacilityNav'
import { useGuideFilterShop } from '@/composables/useGuideFilterShop'
import { ref, onMounted, watch, onBeforeUnmount } from 'vue'
import { ref, onMounted, watch, onBeforeUnmount, nextTick } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
@ -94,6 +111,7 @@ const { floorIdx, selectedShopList, filterShopByFloorName, filterAboutCurrentInf
const { switchFloor, handleMapIcon, list, mapIdx } = useGuideMapOperation() //复位 位置等操作
const { handleFacility } = useFacilityNav() //公共设施导航
const facScroll = ref()
const selectFloor = ref<Floor>()
import Brand from '@/utils/Class/Brand'
@ -187,6 +205,11 @@ onMounted(() => {
floorMapCode: ''
})
}
nextTick(() => {
if (facScroll.value) {
facScroll.value.scrollToElement('.fac-last', 30)
}
})
})
onBeforeUnmount(() => {
window.Map_QM.removeEventListener('icon', onClickMapIcon)
@ -253,14 +276,20 @@ watch(mapStatus, newValue => {
}
}
}
.fac-list {
.fac-scroll {
position: absolute;
top: 881px;
left: 590px;
right: 564px;
z-index: 1;
overflow: hidden;
width: 1170px;
}
.fac-list {
display: flex;
justify-content: flex-start;
justify-content: flex-end;
width: fit-content;
.fac-item {
flex-shrink: 0;
width: 44px;
margin-right: 16px;
font-size: 10px;
@ -282,7 +311,7 @@ watch(mapStatus, newValue => {
.map-btns-list {
position: absolute;
top: 881px;
left: 421px;
left: 38px;
z-index: 2;
display: flex;
.map-btn {

Write Preview
Loading…
Cancel
Save