<script>
import Vue from 'vue'
import zhanpai from '@/assets/imagemap/zhanpai.svg'
setInfoWindow(data) {
let infoWindowContent = Vue.extend({
data() {
return {
// activeName: _this.activeName || 'first',
gunsList: v.gunsList,
// vtype: type == 'isClickAll' ? 1 : 0,
}
},
// 创建相关点击方法
methods: {
toDetail() {
this.$emit('toReport', data.vin, data.plate, data.fuelPowerNo)
},
toReport() {
this.$emit('toDetail', data.vin, data.plate, data.fuelPowerNo)
},
toTrack() {
this.$emit('toTrack', data.vin, data.plate, data.fuelPowerNo)
},
toDownload() {
this.$emit('toDataload', data.vin, data.plate, data.fuelPowerNo)
},
toStatistics() {
this.$emit('tostatistics', data.vin, data.plate, data.fuelPowerNo)
}
// // 关闭窗口
// clearInfoWindow() {
// _this.clickhyStationId = null
// _this.map.clearInfoWindow()
// // 关闭弹窗，显示所有覆盖物最佳视野
// let allOverlays = _this.map.getAllOverlays()
// _this.map.setFitView(allOverlays, false, [0, 0, 100, 0], 11)
// },
},
template: `<div id="diaWrap" class="mapIconWrap markersWrap ${this.name} distribute-amap-infoWindow" >
<el-image src="${zhanpai}" fit="contain" class="cz-nameimg" />
<div class="alert ${data && data.alarmCount > 0 ? '' : 'hidden'}"></div>
<div class="fuelTitle"><span>VIN：${data.vin}</span> <span class="online ${this.getStatusClass(data)}"> ${this.getOnlineStatus(data)}</span> </div>
<div class="item add">${data.addressdetail} </div>
<div><span class="cz-locaname" v-for="(item,idx) in gunsList">{{item.gunNo}}路线</span></div>
<div class="flex">
<button class="item-tab detail-tab" @click="toDetail">1</button>
<button class="item-tab message-tab" @click="toReport">2</button>
<button class="item-tab track-tab" @click="toTrack">3</button>
<button class="item-tab dataload-tab" @click="toDownload">4</button>
<button class="item-tab statistics-tab" @click="toStatistics">5</button>
</div>
</div>`,
})
_this.$nextTick(() => {
// 先定位标注点，再打开弹窗
const timeout = setTimeout(() => {
_this.infoWindow.setContent(new infoWindowContent().$mount().$el)
_this.infoWindow.open(_this.map, new AMap.LngLat(data.lng, data.lat))
}, 800)
// 清理定时器
_this.clearedTime(timeout)
})
}
},
// 清理定时器
clearedTime(timeout) {
// timeout返回数值id，整型，可用于 取消 setTimeout 设置的函数
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearTimeout(timeout)
timeout = null
})
},
</script>
特别注意：
需要在vue.config.js文件中，增加vue$: "vue/dist/vue.esm.js",然后重新运行项目即可
configureWebpack: {
name: name,
resolve: {
alias: {
vue$: "vue/dist/vue.esm.js",// 增加该行即可
'@': resolve('src')
}
}
},
