tqApp-webView/pagesSanitation/workDetails/index.vue

<template>
	<view class="page-container">
		
		<view class="page-container-tip">
			<view class="tip">
				<u-icon name="volume" color="#4573FC" size="16"></u-icon>{{`尊敬的驾驶员，当前任务完成率${renderItem(trackInfo,'percentage','--')}%`}}
			</view>
		</view>
		<map-container
			ref="mapContainerRef"
			:pointsData="pointsData"
			@handleMarkerClick="handleMarkerClick"
			@onload="handleOnload"
			:markerClusterOptions="{
				maxZoom: 1,
			}"
		>
		</map-container>
		
		
		
		<u-modal :show="alarmShow" width="600rpx" confirmText="我知道了" confirmColor="#1D6FE9"
			@confirm="() => {
				alarmShow = false
				alarmName = ''
			}"
		>
			<view class="slot-content">
				<view class="err-tip">
					{{alarmName?`${alarmName}，请核查！`:''}}
				</view>
			</view>
		</u-modal>
				
		
		<vehInfo ref="vehInfoRef" :trackInfo='trackInfo' :workTrackInfo="workTrackInfo"></vehInfo>
	</view>
</template>

<script>
import {trackInfo,workTrackInfoRecord} from '@/api/system/workPlan.js'
import MapContainer from '@/components/MapContainer'
import vehInfo from './module/vehInfo.vue'
import {isEmpty} from 'lodash'
import {getImages} from '@/plugins/images'

let car_online = getImages('/assetsMobile/images/map/icon/vehicle/car_online.png') //行驶在线--地图
let pointWarning = getImages('/assetsMobile/images/map/icon/pointWarning.png') //报警图标

export default {
	components: {
		MapContainer,
		vehInfo,
	},
	computed: {
		pointsData() {	
			let list = []
			return list;
		},
	},
	data() {
		return {
			map: null,
			schId: null,
			
			trackList: [], //轨迹路线坐标系列表
			trackPoyline: null,
			polyline: null,
			
			//路线坐标系列表
			pointList: [],
			//绑定站点列表
			bindList: [],
			//车辆图标
			iconUrl: null,
			
			trackInfo: {},
			workTrackInfo: {},
			
			alarmShow: false,
			alarmName: '',
			
			alarmList:[], //报警列表
			
			fetched: false,
			
			timener: null,
		}
	},
	onLoad({schId}) {
		if(schId) {
			this.schId = schId
		} 
		
		if (this.timener) {
			clearInterval(this.timener)
		}
	},
	
	beforeDestroy() {
		clearInterval(this.timener)
	},
	watch: {
		alarmList: {
			immediate: false,
			deep: true,
			handler(newVal,oldVal) {
				// console.log(newVal,oldVal,'newVal')
				if(!isEmpty(newVal) && this.fetched) {
					if(newVal.length > oldVal.length) {
						let len = newVal.length
						
						this.alarmName =  newVal[len-1].alarmName
						this.alarmShow = true
					}
				}
				
				if(!this.fetched) {
					this.fetched = true
				}
			}
		}
	},
	onShow() {
		
	},
	onHide() {
		
	},
	onReady() {
		
	},
	methods: {
		initTime() {
			
			if (this.timener) {
				return
			} else {
				this.timener = setInterval(() => {
					this.getTrackInfo({schId: this.schId})
				}, 10000)
			}
		
		},
		
		async getTrackInfo({schId}) {
			let {code,data} = await trackInfo({schId})
			if(code == 0) {
				 /* 绑定点 */
				this.bindList = data.bindList.map((item) => {
					return {
						facType: item.facType,
						iconUrl: item.iconUrl,
						id: item.id,
						name: item.name,
						lng:item.lng,
						lat:item.lat,
						radius:item.radius,
					}
				})
				 this.iconUrl = data.iconUrl
				 this.pointList = data.pointList
				 this.trackInfo = data
				
				 
				 this.getWorkTrackInfoRecord({schId: this.schId})
			}
		},
		async getWorkTrackInfoRecord({schId}) {
			let {code,data} = await workTrackInfoRecord({schId})
			if(code == 0) {

				this.trackList = data.trackList	
				this.workTrackInfo = data
				this.alarmList = data.alarmList?data.alarmList:[]
				
				this.drawBindList()
				this.drawPolyline()
				this.drawtrackPoyline(this.iconUrl)
				
				if(data.workStatus==0 || data.workStatus == 1) {
					this.initTime()
				}
			}
		},
		 /* 画覆盖物 */
		drawBindList() {
		
			this.$refs.mapContainerRef.createProjects('removeAllMarkers')	
			    /* 画绑定点 */
			let getPoints = []
			this.bindList.forEach((item) => {
				  getPoints.push({
					...item,
					lng02: item.lng,
					lat02: item.lat,
					option: {
						position:[item.lng,item.lat],
						content: item.iconUrl?`<img style="width: 28px;"  src="${getImages(item.iconUrl)}" />`:'',
						offset: item.iconUrl?[-14,-28]:[0,0],
						title: item.name
					},
					hiddenInfoWindow: true,
				  })
			})
			
			this.alarmList.forEach((item) => {
				getPoints.push({
					...item,
		
					option: {
						position:[item.lng02,item.lat02],
						content: `<img style="width: 20px;"  src="${pointWarning}" />`,
						offset: [-14,-28],
						title: item.alarmName
					},
					hiddenInfoWindow: true,
				})
			})
			// console.log(getPoints,'getPointsgetPoints')
			 this.$refs.mapContainerRef.createProjects('createMarker', { list: getPoints, type: 'workPlan' })
		},
		
		 /* 画本计划路线 */
		
		drawPolyline() {
		    if(isEmpty(this.pointList)) return
			  let getPath = []
			  this.pointList.forEach((item) => {
				  getPath.push([item.lng,item.lat])
			  })
			  if (!this.isNull(this.polyline)) {
				this.$refs.mapContainerRef.removeOverlays(this.polyline)
			  }
			  this.polyline = this.$refs.mapContainerRef.createPolyline(getPath,{
					isOutline: true,
					outlineColor: '#FD5D09',
					borderWeight: 2,
					strokeColor: "#FEAE84",
					strokeOpacity: 1,
					strokeWeight: 4,
					// 折线样式还支持 'dashed'
					strokeStyle: "solid",
					// strokeStyle是dashed时有效
					// strokeDasharray: [10, 5],
					lineJoin: 'round',
					lineCap: 'round',
					zIndex: 50,
					showDir: false,
				})
			
			  this.$refs.mapContainerRef.setFitView(this.polyline, false, [40, 200, 20, 20])
		},
		
		/*画轨迹 车辆图标*/
		drawtrackPoyline(iconUrl) {
		    
		    if(isEmpty(this.trackList)) return
		
		
		    let getPath = []
		    this.trackList.forEach((item) => {
		        getPath.push([item.lng02,item.lat02])
		    })
		    if (!this.isNull(this.trackPoyline)) {
		         this.$refs.mapContainerRef.removeOverlays(this.trackPoyline)
		    }
		
		    this.trackPoyline =  this.$refs.mapContainerRef.createPolyline(getPath,{
		        isOutline: true,
		        outlineColor: '#00FFFF',
		        borderWeight: 2,
		        strokeColor: "#7FFFFF",
		        strokeOpacity: 1,
		        strokeWeight: 4,
		        // 折线样式还支持 'dashed'
		        strokeStyle: "solid",
		        // strokeStyle是dashed时有效
		        strokeDasharray: [10, 5],
		        lineJoin: 'round',
		        lineCap: 'round',
		        zIndex: 52,
		        showDir: false,
		    })
		
		
		    /* 添加车辆图标 */
		    let  getPoints= []
		    if(!isEmpty(this.trackList)) {
		        let end = this.trackList[this.trackList.length-1]

		        getPoints.push({
		            ...end,
		            tabStyle: 'vehicle',
		            option: {
		                position:[end.lng02,end.lat02],
		                content: `<img style="width: 28px;transform:rotate(${end.direction}deg);"  src="${iconUrl?getImages(iconUrl) : car_online}" />`,
		                offset: [-14,-14],
		            },
					hiddenInfoWindow: true,
		        })
		    }
			// console.log(iconUrl,'iconUrliconUrl')
		    this.$refs.mapContainerRef.createProjects('createMarker', { list: getPoints, type: 'workPlan' })
		
		},
		
		//点击标注点
		handleMarkerClick(e) {
			// console.log(e,'handleMarkerClick')
			const {cluster} = e
			let item = cluster.p.item
			
			// const {address} = item
			// if(address) this.$refs.vehInfoRef.show(item)
			
		},
		handleOnload(map) {
			this.map = map	
			this.getTrackInfo({schId: this.schId})
			
			
		},
	}
}
</script>

<style lang="scss" scoped>

.err-tip {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 32rpx;
	color: #FF2D2D;
	text-align: right;
	font-style: normal;
}
.page-container {
	background: #fff;
	font-size: 28rpx;
	
	height: 100vh;
	position: relative;
	
	.page-container-tip {
		height: 72rpx;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		background: rgba(69, 115, 252, 0.1);
		display: flex;
		align-items: center;
		.tip {
			margin-left: 40rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #4573FC;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
			
			display: flex;
			align-items: center;
		}
	}
	.footer {
		padding: 10rpx 0;
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
	}
}	


::v-deep {
	
	.u-form-item__body {
		padding: 0;
	}
	.hidde-cell-title {
		
		.u-cell__body__content {
			width: auto;
			flex: none;
			
		}
		.u-cell__body {
			.value {
				flex: 1;
			}
		}
		
	}
	
}
</style>