From f0b2b04b1b43d4891c1808ad060b9959f9a1209c Mon Sep 17 00:00:00 2001
From: 819527061@qq.com <123456>
Date: 星期二, 25 七月 2023 14:29:42 +0800
Subject: [PATCH] 内容修改
---
src/pages/show/showIndex/showIndex.vue | 348 +++++++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 294 insertions(+), 54 deletions(-)
diff --git a/src/pages/show/showIndex/showIndex.vue b/src/pages/show/showIndex/showIndex.vue
index 70d8943..77f5dff 100644
--- a/src/pages/show/showIndex/showIndex.vue
+++ b/src/pages/show/showIndex/showIndex.vue
@@ -10,7 +10,7 @@
<div class="map" id="map"></div>
<!--<div class="map_container" id="map_container"></div>-->
</div>
- <div class="upload-box">
+ <div class="upload-box" ref="upload-box">
<el-dropdown @command="uploadClick">
<el-button class="uploadBtn" plain size="small">
涓婁紶鏂囦欢<i class="el-icon-arrow-down el-icon--right"></i>
@@ -24,14 +24,31 @@
</el-dropdown>
</div>
<div class="showIndex-wrap-inside">
+ <div class="chouti-box left">
+ <img @click="handlechouClickCLeft" src="../../../assets/img/zhankaiIcon.png" alt="">
+ </div>
+ <div class="chouti-box right">
+ <img @click="handlechouClickCRight" src="../../../assets/img/zhankaiIcon2.png" alt="">
+ </div>
<div class="indexMoudleBlock-box">
- <IndexMoudleBlock></IndexMoudleBlock>
+ <IndexMoudleBlock ref="IndexMoudleBlock"></IndexMoudleBlock>
</div>
<div class="yunwei-box">
- <YunweiBlock></YunweiBlock>
+ <div class="yunwei-box-inside">
+ <YunweiBlock ref="YunweiBlock"></YunweiBlock>
+ <div class="chouti-box2 left">
+ <img @click="handlechouClickSLeft" src="../../../assets/img/shouqiIcon.png" alt="">
+ </div>
+ </div>
+
</div>
<div class="rizhi-box">
- <TimesLogs></TimesLogs>
+ <div class="yunwei-box-inside">
+ <TimesLogs ref="TimesLogs"></TimesLogs>
+ <div class="chouti-box2 right">
+ <img @click="handlechouClickSRight" src="../../../assets/img/shouqiIcon2.png" alt="">
+ </div>
+ </div>
</div>
</div>
<uploadForm ref="uploadForm" v-if="uploadVisiable"></uploadForm>
@@ -44,6 +61,7 @@
import YunweiBlock from "./YunweiBlock";
import uploadForm from "./upload/uploadForm";
import {getMapData} from '@/api/daping'
+ import {animateShanFlash} from '@/utils/animateShanFlash'
export default {
name: "showIndex",
components: {
@@ -61,7 +79,8 @@
uploadVisiable:false, //涓婁紶鏂囦欢寮规
timer:null,
mapData:[],
- map:''
+ map:'',
+ zhankaiBtnIsShow:true
}
},
destroyed() {
@@ -81,13 +100,118 @@
},
methods: {
+ handlechouClickCLeft() { //宸﹀嚭
+ this.$nextTick(() => {
+ this.$refs.IndexMoudleBlock.loading()
+ const tl = this.gsap.timeline({defaults: {duration: 0.8}})
+ tl.fromTo('.yunwei-box',{
+ left: '-100%',
+ },{
+ left: '10px',
+ //autoAlpha: 0,
+ duration:1,
+ // ease: 'power2.out',
+ delay:0.5,
+ ease:'back.out(1)',
+ })
+ tl.fromTo('.chouti-box.left',{
+ opacity: 1
+ },{
+ opacity: 0,
+ duration:0.5,
+ },'<')
+ })
+
+ },
+ handlechouClickSLeft() { //宸︽敹
+ this.$nextTick(() => {
+ this.$refs.IndexMoudleBlock.loading2()
+ const tl = this.gsap.timeline({defaults: {duration: 0.8}})
+ tl.fromTo('.yunwei-box',{
+ left: '0',
+ },{
+ left: '-100%',
+ //autoAlpha: 0,
+ duration:1,
+ // ease: 'power2.out',
+ delay:0.5,
+ ease:'back.out(1)',
+ })
+ tl.fromTo('.chouti-box.left',{
+ left:'-100%',
+ opacity:0
+ },{
+ left:'5px',
+ opacity:1,
+ duration:1,
+ },'<')
+ })
+ },
+ handlechouClickCRight() { //鍙冲嚭
+ this.$nextTick(() => {
+ //this.$refs.TimesLogs.loading()
+ const tl = this.gsap.timeline({defaults: {duration: 0.8}})
+ tl.fromTo('.rizhi-box',{
+ right: '-100%',
+ },{
+ right: '0',
+ //autoAlpha: 0,
+ duration:1,
+ // ease: 'power2.out',
+ delay:0.5,
+ ease:'back.out(1)',
+ })
+ tl.fromTo('.chouti-box.right',{
+ opacity: 1
+ },{
+ opacity: 0,
+ duration:0.5,
+ },'<')
+ tl.fromTo('.upload-box',{
+ right: '-100%',
+ },{
+ right: '20px',
+ duration:0.5,
+ },'<')
+ })
+
+ },
+ handlechouClickSRight() { //鍙虫敹
+ this.$nextTick(() => {
+ // this.$refs.TimesLogs.loading2()
+ const tl = this.gsap.timeline({defaults: {duration: 0.8}})
+ tl.fromTo('.rizhi-box',{
+ right: '0px',
+ },{
+ right: '-24%',
+ //autoAlpha: 0,
+ duration:1,
+ // ease: 'power2.out',
+ delay:0.5,
+ ease:'back.out(1)',
+ })
+ tl.fromTo('.chouti-box.right',{
+ opacity:0,
+ right:'-100%',
+ },{
+ opacity:1,
+ right:'5px',
+ duration:1,
+ },'<')
+ tl.fromTo('.upload-box',{
+ right: '20px',
+ },{
+ right: '-100%',
+ duration:0.5,
+ },'<')
+ })
+ },
initMap() {
this.map = new window.BMap.Map("map",{
minZoom : 2,
maxZoom : 11
});
- console.log(map,'map===')
- this.map.centerAndZoom(new BMap.Point(118.183450598,39.6505309225), 11)
+ this.map.centerAndZoom(new BMap.Point(118.583450598,39.6505309225), 11)
//map.enableScrollWheelZoom(true) //榧犳爣婊氬姩缂╂斁
this.map.setCurrentCity('鍞愬北') // 璁剧疆鍦板浘鏄剧ず鐨勫煄甯� 姝ら」鏄繀椤昏缃殑
this.map.enableScrollWheelZoom(true) //寮�鍚紶鏍囨粴杞缉鏀�
@@ -147,15 +271,15 @@
address: '娌冲寳鐪佸攼灞卞競涓板崡鍖烘鑻戝ぇ琛�7鍙�',
health: '0'
},{
- lon:118.145069,
- lat:39.662586,
- address: '娌冲寳鐪佸攼灞卞競涓版鼎鍖烘浌闆姽澶ц17鍙�',
- health: '0'
+ lon:118.45153,
+ lat:39.74049,
+ address: '娌冲寳鐪佸攼灞卞競鍙ゅ喍鍖烘案鐩涜矾',
+ health: '1'
},{
- lon:118.45153,
- lat:39.74049,
- address: '娌冲寳鐪佸攼灞卞競鍙ゅ喍鍖烘案鐩涜矾',
- health: '0'
+ lon:118.45153,
+ lat:39.74049,
+ address: '娌冲寳鐪佸攼灞卞競鍙ゅ喍鍖烘案鐩涜矾',
+ health: '1'
}]
// this.mapData.forEach(item => {
// let marker = new BMap.Marker(item.lon,item.lat)
@@ -182,12 +306,12 @@
let myIcon = ''
if(item.health == 0) {
myIcon = new BMap.Icon(
- require("../../../assets/img/markerIcon3.png"),
+ '../../../../static/img/markerIcon3.png',
new BMap.Size(35, 35),
{ imageSize: new BMap.Size(35, 35),anchor : new BMap.Size(35, 35) })
}else {
myIcon = new BMap.Icon(
- require("../../../assets/img/markerIcon2.png"),
+ '../../../../static/img/markerIcon2.png',
new BMap.Size(35, 35),
{ imageSize: new BMap.Size(35, 35),anchor : new BMap.Size(35, 35) })
}
@@ -230,38 +354,45 @@
this.map.addOverlay(label);
- marker.addEventListener("click", (e)=> {
- let p = e.target;
- let point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
- let infoWindow = new BMap.InfoWindow(str, {
- // width: 320, // 淇℃伅绐楀彛瀹藉害
- // height: 200, // 淇℃伅绐楀彛楂樺害
- // title: '鐩戞帶淇℃伅', // 淇℃伅绐楀彛鏍囬ee
- enableMessage: false, //璁剧疆鍏佽淇℃伅绐楀彂閫佺煭鎭�
- str,
- }); // 鍒涘缓淇℃伅绐楀彛瀵硅薄
- this.map.openInfoWindow(infoWindow, point); //寮�鍚俊鎭獥鍙�
- })
+ this.map.addEventListener('tilesloaded',function () {
+ // marker.domElement.className = marker.domElement.className + 'mapBGAnimate'
+ // console.log(marker.domElement.className,'marker====')
+ if(item.health == 1) {
+ let divElement = document.createElement('div')
+ divElement.className = 'before'
+ let divElement2 = document.createElement('div')
+ divElement2.className = 'after'
+ //marker.ad.innerHTML = marker.ad.childNodes[0]
+ marker.ad.appendChild(divElement)
+ marker.ad.appendChild(divElement2)
+ marker.ad.firstChild.style.position = 'relative'
+ marker.ad.firstChild.style.zIndex = '5';
+ }
+ marker.ad.style.overflow = ''
+ marker.ad.className = ''
+ marker.ad.className = 'mapBGAnimate'
+ })
- // marker.addEventListener('mouseover', function () {
- // alert(marker)
- // console.log(marker,'marker==')
- // //榧犳爣绉诲叆鍔ㄧ敾
- // let divElement = document.createElement('div')
- // divElement.className = 'before'
- // let divElement2 = document.createElement('div')
- // divElement2.className = 'after'
- // marker.hd.innerHtml = marker.hd.childNodes[0]
- // marker.hd.appendChild(divElement)
- // marker.hd.appendChild(divElement2)
- // marker.hd.className = ''
- // marker.hd.className = 'mapBGFault'
- // label.show()
- // })
- // marker.addEventListener('mouseout', function () {
- // marker.hd.className = ''
- // label.hide()
- // })
+ let bdary = new BMap.Boundary();
+ console.log(bdary,'======================bdary=================')
+
+ bdary.get('鍞愬北甯傝矾鍖楀尯', (rs) => { //鑾峰彇琛屾斂鍖哄煙
+ alert(111)
+ console.log(re,'re=================')
+ //杩欓噷鏄敤鎴疯嚜宸辩殑鍑芥暟銆�
+ this.map.clearOverlays(); //娓呴櫎鍦板浘瑕嗙洊鐗�
+ var count = rs.boundaries.length; //琛屾斂鍖哄煙鐨勭偣鏈夊灏戜釜
+
+ for(var i = 0; i < count; i++){
+
+ var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //寤虹珛澶氳竟褰㈣鐩栫墿
+
+ this.map.addOverlay(ply); //娣诲姞瑕嗙洊鐗�
+ this.map.setViewport(ply.getPath()); //璋冩暣瑙嗛噹
+
+ }
+
+ });
}
})
@@ -270,7 +401,60 @@
}
</script>
+
<style lang="scss">
+.mapBGAnimate{
+ position: relative;
+ img{
+ animation: huxi 2s infinite;
+ transform-origin: center;
+ filter:drop-shadow(0px 4px 2px rgba(0,0,0,0.3));
+ }
+}
+@keyframes huxi {
+ 0%{
+ transform: translateY(0);
+ }
+ 50%{
+ transform: translateY(-10px);
+ }
+ 100%{
+ transform: translateY(0);
+ }
+}
+.mapBGAnimate .before{
+ content: '';
+ position: absolute;
+ left: -2px;
+ top:15px;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: rgba(255,0,6,0.5);
+ transform: scale(0);
+ animation: myfirst 2s;
+ animation-iteration-count: infinite;
+ z-index: 4;
+}
+.mapBGAnimate .after{
+ content: '';
+ position: absolute;
+ left: -2px;
+ top:15px;
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ background: rgba(255,0,6,0.4);
+ transform: scale(0);
+ animation: myfirst 2s infinite 0.3s;
+ z-index: 4;
+}
+@keyframes myfirst {
+ to{
+ background: rgba(0,0,0,0);
+ transform: scale(2);
+ }
+}
.upload-box{
.uploadBtn{
background: linear-gradient(to right,#0e0e25,#092749);
@@ -296,32 +480,88 @@
position: relative;
.upload-box{
position: absolute;
- right: 0.1042rem /* 20/192 */;
+ right: -100%;
top: -0.09375rem /* -18/192 */;
z-index: 999999999;
}
.showIndex-wrap-inside{
width: 100%;
height: 100%;
+ .chouti-box{
+ width: 0.1771rem /* 34/192 */;
+ height: 0.4896rem /* 94/192 */;
+ cursor: pointer;
+ z-index: 9999;
+ img{
+ width: 100%;
+ height: 100%;
+ }
+ &.left{
+ position: absolute;
+ left: 10px;
+ top: 20%;
+ }
+ &.right{
+ position: absolute;
+ right: 10px;
+ top: 20%;
+ }
+ }
}
.indexMoudleBlock-box{
- position: absolute;
- left: 0.1823rem /* 35/192 */;
- top: 0;
+ //position: absolute;
+ //left: 0.1823rem /* 35/192 */;
+ //top: 0;
+ width: 100%;
+ display: flex;
}
.yunwei-box{
position: absolute;
- left: 0.1823rem /* 35/192 */;
+ left:-100%;
top: 0.9375rem /* 180/192 */;
height: calc(100% - 0.9896rem /* 190/192 */);
max-height: 4.078125rem /* 783/192 */;
+ .yunwei-box-inside{
+ position: relative;
+ .chouti-box2{
+ width: 0.1771rem /* 34/192 */;
+ height: 0.4896rem /* 94/192 */;
+ cursor: pointer;
+ &.left{
+ position: absolute;
+ right: -0.2083rem /* -40/192 */;
+ top: 0.1042rem /* 20/192 */;
+ }
+ img{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
}
.rizhi-box{
position: absolute;
- right: 0.15625rem /* 30/192 */;
+ right: -100%;
top:0.9375rem /* 180/192 */;
height: calc(100% - 0.9896rem /* 190/192 */);
max-height: 4.078125rem /* 783/192 */;
+ .yunwei-box-inside{
+ position: relative;
+ .chouti-box2{
+ width: 0.1771rem /* 34/192 */;
+ height: 0.4896rem /* 94/192 */;
+ cursor: pointer;
+ &.right{
+ position: absolute;
+ left:-0.15625rem /* -30/192 */;
+ top: 0.1042rem /* 20/192 */;
+ }
+ img{
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
}
.mapBox{
width: 100%;
--
Gitblit v1.9.1