Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
42a0bbaf 1 parent 794afa77

控制显示调整

Inline Side-by-side
Showing 2 changed files with 90 additions and 27 deletions
<!--
* @Date: 2023-07-27 11:04:04
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-11 09:42:52
* @LastEditTime: 2023-08-11 14:14:16
* @FilePath: /map-demo/src/components/Floor/index.vue
* @Description: 文件描述
-->
......@@ -34,6 +34,31 @@
<van-icon name="arrow-down" size="1.25rem" />
</span>
</div>
<div class="animate-bar icon">
<div v-if="level_show == 4" class="">
<div v-if="!svg_safe_animate_status" @click="createAnimation(true, level_show - 1, 'safe')" style="font-size: 1.25rem;">
<van-icon name="star-o" />
</div>
<div v-else @click="createAnimation(false, level_show - 1, 'safe')" style="font-size: 1.25rem;">
<van-icon name="star" />
</div>
<div style="height: 0.5rem;"></div>
<div v-if="!svg_toilet_animate_status" @click="createAnimation(true, level_show - 1, 'toilet')" style="font-size: 1.25rem;">
<van-icon name="shop-o" />
</div>
<div v-else @click="createAnimation(false, level_show - 1, 'toilet')" style="font-size: 1.25rem;">
<van-icon name="shop" />
</div>
</div>
<div v-if="level_show == 3">
<div v-if="!svg_door_animate_status" @click="createAnimation(true, level_show - 1, 'door')" style="font-size: 1.25rem;">
<van-icon name="wap-home-o" />
</div>
<div v-else @click="createAnimation(false, level_show - 1, 'door')" style="font-size: 1.25rem;">
<van-icon name="wap-home" />
</div>
</div>
</div>
</div>
<div class="mall">
<!-- <div class="surroundings">
......@@ -57,14 +82,6 @@
</a>
</div>
<div class="level_after">L{{ index + 1 }}</div>
<div v-if="level_show && index === 3" class="level_btn">
<div v-if="!svg_safe_animate_status" @click="createSafeAnimation(true)" style="font-size: 0.85rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);">
查看安全路线
</div>
<div v-else @click="createSafeAnimation(false)" style="font-size: 0.85rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);">
关闭安全路线
</div>
</div>
</div>
</div>
......@@ -157,6 +174,12 @@ export default {
show: true
},
],
svg_animate_obj: {
0: [],
1: [],
2: [],
3: [],
},
svg_safe_animate_status: false,
svg_safe_animate: `
<path id="myPath" d="M 689 525 L 889 474 L 670 230 L 473 223 L 462 95" fill="none" stroke="#D49333" stroke-width="5">
......@@ -166,7 +189,27 @@ export default {
<mpath href="#myPath" />
</animateMotion>
</circle>
`
`,
svg_toilet_animate_status: false,
svg_toilet_animate: `
<path id="myPath" d="M 1138.427 213.33 L 486.79 224.966 L 473.061 123.103" fill="none" stroke="#D49333" stroke-width="5">
</path>
<circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7">
<animateMotion dur="8s" repeatCount="indefinite">
<mpath href="#myPath" />
</animateMotion>
</circle>
`,
svg_door_animate_status: false,
svg_door_animate: `
<path id="myPath" d="M 689 525 L 889 474 L 670 230 L 473 223 L 462 95" fill="none" stroke="#D49333" stroke-width="5">
</path>
<circle id="myCircle" cx="0" cy="0" r="8" fill="#6584c7">
<animateMotion dur="8s" repeatCount="indefinite">
<mpath href="#myPath" />
</animateMotion>
</circle>
`,
}
},
async mounted() {
......@@ -208,9 +251,7 @@ export default {
onCloseLevelAll() {
this.onCloseLevel();
// 清除动画
if (this.svg_safe_animate_status) {
this.createSafeAnimation(false);
}
this.clearAllAnimation();
},
onClose() {
this.onCloseLevelAll();
......@@ -314,27 +355,45 @@ export default {
}
});
},
createSafeAnimation(flag) { // 创建安全动画路径，固定生成动画方法
clearAllAnimation () {
// 所有清除动画
for (let key in this.svg_animate_obj) {
if (this.svg_animate_obj[key].length) {
if (this[`svg_${this.svg_animate_obj[key]}_animate_status`]) {
this.createAnimation(false, key, this.svg_animate_obj[key]);
}
}
}
},
createAnimation(flag, level, id) { // 创建动画路径，固定生成动画方法
//
let insertString = '';
let level = 4;
if (flag) { // 打开
this.svg_safe_animate_status = true;
insertString = this.svg_safe_animate;
let insertIndex = this.level_list[3].svg.indexOf('</svg>');
// 清除动画
this.clearAllAnimation();
this[`svg_${id}_animate_status`] = true;
insertString = this[`svg_${id}_animate`];
let insertIndex = this.level_list[level].svg.indexOf('</svg>');
// 添加相应动画
let modifiedString = this.level_list[3].svg.slice(0, insertIndex) + insertString;
this.level_list[3].svg = modifiedString + '</svg>';
let modifiedString = this.level_list[level].svg.slice(0, insertIndex) + insertString;
this.level_list[level].svg = modifiedString + '</svg>';
// 新增ID
if (this.svg_animate_obj[level].indexOf(id) < 0) {
this.svg_animate_obj[level].push(id);
}
} else { // 关闭
this.svg_safe_animate_status = false;
let originalString = this.level_list[3].svg;
let searchTerm = this.svg_safe_animate;
this[`svg_${id}_animate_status`] = false;
let originalString = this.level_list[level].svg;
let searchTerm = this[`svg_${id}_animate`];
let startIndex = originalString.indexOf(searchTerm);
let endIndex = startIndex + searchTerm.length - 1;
// 删除相应动画
let modifiedString = originalString.substring(0, startIndex) + originalString.substring(endIndex + 1);
this.level_list[3].svg = modifiedString;
}
this.level_list[level].svg = modifiedString;
// 剔除ID
this.svg_animate_obj[level] = this.svg_animate_obj[level].filter(item => item === id);
}
},
}
}
</script>
......@@ -391,6 +450,10 @@ export default {
top: 8rem;
right: 1rem;
}
.animate-bar {
top: 12rem;
right: 1rem;
}
}
.level_after {
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-08-10 17:19:02
* @LastEditTime: 2023-08-11 14:16:19
* @FilePath: /map-demo/src/views/inner.vue
* @Description: 内部地图主体页面
-->
......@@ -277,7 +277,7 @@ export default {
point_range: [ // 景区范围经纬度
[120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
],
show_floor_popup: true,
show_floor_popup: false,
}
},
async mounted() {
......