<!--pages/homeMap/homeMap.wxml-->
<view class='background' style='background-image: url("http://bmob-cdn-13048.b0.upaiyun.com/2018/09/05/9b5bbf204029447c805576e5924f11a5.png");'>
<!-- <view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{TopTips}}</view> -->
<view wx:for="{{imagesArray}}" data-index='{{index}}' wx:key='index' class='buiding buid{{index}}' style='width:{{item.width*0.67}}rpx;height:{{item.height*0.67}}rpx;top:{{item.top*0.67}}rpx;left:{{item.left*0.67}}rpx;animation:{{item.avatar=="-1"&& index==kArr[k]?animation:""}}' bindtap='click'>
<image class='img{{index}}' style='width:{{item.width*0.67}}rpx;height:{{item.height*0.67}}rpx;' src='{{item.avatar=="-1"?item.myEnterpriseObj:item.avatar}}'></image>
</view>
</view>
/* pages/homeMap/homeMap.wxss */
page{
overflow-x: hidden;
}
.background{
width: 750rpx;
height: 1387rpx;
background-repeat:no-repeat;
background-size:750rpx 1387rpx;
background-origin:padding-box;
}
.buiding{
position: absolute;
}
.buiding:hover{
position: relative;
border: 2rpx dashed goldenrod;
}
.buid0{
text-align: center;
}
.buid1{
text-align: center;
}
.buid2{
border-radius:0%;
text-align: center;
}
.buid3{
text-align: center;
}
.buid4{
text-align: center;
}
.buid5{
border-radius:0%;
text-align: center;
}
.buid6{
border-radius:0%;
text-align: center;
}
.buid7{
text-align: center;
}
.buid8{
text-align: center;
}
@keyframes mymove
{
0% {border:none;}
50% {border:1rpx dashed goldenrod;}
100% {border:none;}
}
.weui-toptips_warn{text-align: center;background: red}
// pages/homeMap/homeMap.js
//获取应用实例
var app = getApp()
Page({
data: {
screenHeight: 0,
screenWidth: 0,
myEnterpriseElements: [], //读取的数据 myEnterpriseElements:[{url:'/images/22.png',location:0}]
imagesArray: [
{ top: '44', left: '52', width: '200', height: '200', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/440e25f3402982ab801ba59ed5823ab3.png',isEle:false,types:'farm'},
{ top: '374', left: '16', width: '200', height: '200', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/26baa5f8407ecf75806d1acddd4ddf0f.png', isEle: true },
{ top: '612', left: '8', width: '240', height: '240', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/5d17e4514077f42f8055c62d238bd12e.png', isEle: true },
{ top: '1240', left: '8', width: '240', height: '240', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/83899b69404bfaa3800f16939c02f71d.png', isEle: true },
{ top: '132', left: '533', width: '200', height: '200', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/24bd088b403c5fd0807fa0529c311c73.png', isEle: false, types: 'pasture'},
{ top: '312', left: '915', width: '200', height: '200', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/30704994407feea580eac7a149d5d55a.png', isEle: true },
{ top: '380', left: '335', width: '200', height: '200', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/a1a4d2c84014b1f78080d6bbcf8fe8ff.png', isEle: true },
{ top: '380', left: '543', width: '200', height: '200', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/9cd99b5840ba4df4803e7b0de9a31330.png', isEle: false, types: 'fish'},
{ top: '768', left: '901', width: '200', height: '200', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/cd061099404221f680c79e1b56775d5b.png', isEle: true },
{ top: '974', left: '901', width: '200', height: '200', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/e90a21f540fea76e805df03f87c2e0ea.png', isEle: true },
{ top: '1235', left: '296', width: '220', height: '220', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/b468c7aa4000fc51809d2e5d1cd0dfc9.png', isEle: false, types: 'flower'},
{ top: '1235', left: '534', width: '220', height: '220', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/cbc6ddb240f94a3f80add6b88440c3ed.png', isEle: true },
{ top: '1550', left: '299', width: '230', height: '230', myEnterpriseObj: '/images/fodder/240.png', avatar: 'http://bmob-cdn-13048.b0.upaiyun.com/2018/09/06/89991be740f3448f80e4fa8e62d2f3ef.png', isEle: true },
{ top: '1550', left: '545', width: '230', height: '230', myEnterpriseObj: '/images/fodder/240.png', avatar: '-1' },
{ top: '1550', left: '791', width: '230', height: '230', myEnterpriseObj: '/images/fodder/240.png', avatar: '-1' },
],
k: null, //闪烁元素下标
TopTips: '',
showTopTips: false,
animation: 'mymove 1s infinite' //定义动画
//data /布局
},
onLoad: function () {
// http://bmob-cdn-13048.b0.upaiyun.com/2018/09/05/9b5bbf204029447c805576e5924f11a5.png 家园7
},
onShow() {
this.load()
this.show()
let that = this
setInterval(function () {
that.show()
}, 4000)
},
show() {
//未建设单位随机闪烁
let kArr = []
for (let k in this.data.imagesArray) {
if (this.data.imagesArray[k].avatar == '-1') {
// console.log(k)
kArr.push(k)
let kNum = Math.floor(Math.random() * kArr.length + 1) - 1
this.setData({
k: kNum,
kArr: kArr,
})
}
}
// console.log('闪烁下标', this.data.kArr[this.data.k])
this.showTopTips("没有建设的单位会随机闪烁提示")
let that = this
setTimeout(function () {
that.setData({
k: null
})
}, 3000)
},
showTopTips: function (strTopTips) {
var that = this;
this.setData({
showTopTips: true,
TopTips: strTopTips
});
setTimeout(function () {
that.setData({
showTopTips: false
});
}, 1500);
},
load() {
//进入加载数据
let items = app.globalData.igJLSys.myEnterprise
console.log(items)
this.setData({
myEnterpriseElements: items
})
let imagesArray = this.data.imagesArray
let myEnterpriseElements = this.data.myEnterpriseElements
imagesArray.forEach(function (val, index, imagesArray) {
for (let ii in myEnterpriseElements) {
if (index == myEnterpriseElements[ii].locationNoInMap) {
imagesArray[index].avatar = myEnterpriseElements[ii].enterprisePointer.EtpsIcon
imagesArray[index].enterpriseID = myEnterpriseElements[ii].enterpriseID
}
}
})
this.setData({
imagesArray: imagesArray,
myEnterpriseElements: myEnterpriseElements
})
// }
},
click(e) {
console.log(e.currentTarget.dataset.index)
if (this.data.imagesArray[e.currentTarget.dataset.index].avatar == '-1') {
wx.showActionSheet({
itemList: ['建造'],
success: function (res) {
console.log(res.tapIndex)
//
}
})
} else {
if (this.data.imagesArray[e.currentTarget.dataset.index].isEle ==false){
wx.navigateTo({
url: '/pages/newMap/newMap?types=' + this.data.imagesArray[e.currentTarget.dataset.index].types,
})
}else{
wx.showToast({
title: '没有下级',
icon:'none'
})
}
}
},
})