tqApp-webView/pages/realtimeWatch/module/eleChoose.vue

<template>
	<view class="container">	
		<view class="search">
			<u-row>
				<u-col :span="2">
					<view class="all-choosed" @click="handleChooseAll">
						<image
							:src="allChecked?'/static/icon/choosed.png':'/static/icon/nochoose.png'" 
							class="choosed-image">
						</image>
						全选
					</view>
				</u-col>
				<u-col :span="10">
					<u-search
						v-model="search.text"
						placeholder="关键字搜索" 
						@search="handleSearch"
						@custom="handleSearch"
						:actionStyle="{
							color: '#2979ff'
						}"
					>
					</u-search>
				</u-col>
			</u-row>

		</view>
		<view class="last">
			<u-button type="primary" :plain="true" :disabled="page==1" @click="handleLast"
				:custom-style="{
					borderColor: '#FFF',
					background: '#F2f2f2',
				}"
			>
				<!-- <u-icon name="arrow-up" color="#2979ff" size="28"></u-icon> -->
				<image
					:src="'/static/icon/up.png'" 
					class="option-image">
				</image>
			</u-button>
		</view>
		<view class="list">
			<template v-for="(item,index) in showList">
				<view class="item" :key="index" @click="handleChoose(item)">
					<image 
						:src="item.checked?'/static/icon/choosed.png':'/static/icon/nochoose.png'" 
						class="choosed-image">
					</image>
					<image 
						:src="item.icon" 
						class="icon-image">
					</image>
					<view>
						<view class="item-value">
							{{item.label}}<text v-if="item.workStatusName">（{{item.workStatusName}}）</text>
						</view>
						<view class="item-label">
							{{item.deptName}}
						</view>
					</view>
					
				</view>
			</template>
			
			<view class="empty" v-if="showList.length==0">{{tips}}</view>
		</view>
		<view class="next">
			<u-button type="primary" :plain="true" :disabled="page==totalPage" @click="handleNext"
				:custom-style="{
					borderColor: '#FFF',
					background: '#F2f2f2',
				}"
			>
				<!-- <u-icon name="arrow-down" color="#2979ff" size="28"></u-icon> -->
				<image
					:src="'/static/icon/down.png'" 
					class="option-image">
				</image>
			</u-button>
		</view>
	</view>
</template>

<script>
import {isArray,clone,isObject } from 'lodash'
import {realTimeList, realTimeMap} from '@/api/realtimeWatch.js'
import {getImages} from '@/plugins/images'
import {copyProps,clearProps} from '@/utils/gdtq.js'
//资源引入
// 车辆图片
let car_list_online = getImages('/assetsMobile/images/map/icon/vehicle/car_list_online.png') //行驶在线
let car_list_engin = getImages('/assetsMobile/images/map/icon/vehicle/car_list_engin.png') //停驶在线 
let car_list_unline = getImages('/assetsMobile/images/map/icon/vehicle/car_list_unline.png') //离线
let car_list_warning = getImages('/assetsMobile/map/icon/vehicle/car_list_warning.png') //报警

let car_online = getImages('/assetsMobile/images/map/icon/vehicle/car_online.png') //行驶在线--地图
let car_engin = getImages('/assetsMobile/images/map/icon/vehicle/car_engin.png') //停驶在线  -- 地图
let car_unline = getImages('/assetsMobile/images/map/icon/vehicle/car_unline.png') //离线 --地图
let car_warning = getImages('/assetsMobile/images/map/icon/vehicle/car_warning.png') //报警 --地图
//人员图片
let people_list_online = getImages('/assetsMobile/images/map/icon/people/people_list_online.png') //在线
let people_list_engin = getImages('/assetsMobile/images/map/icon/people/people_list_engin.png') //停留在线
let people_list_unline = getImages('/assetsMobile/images/map/icon/people/people_list_unline.png') //离线
let people_list_warning = getImages('/assetsMobile/images/map/icon/people/people_list_warning.png') //报警

let people_online = getImages('/assetsMobile/images/map/icon/people/people_online.png') //在线--地图
let people_engin = getImages('/assetsMobile/images/map/icon/people/people_engin.png') //停留在线--地图
let people_unline = getImages('/assetsMobile/images/map/icon/people/people_unline.png') //离线--地图
let people_warning = getImages('/assetsMobile/images/map/icon/people/people_warning.png') //报警--地图

export default {
	props: {
		size: {
			type: Number,
			default: 30
		},
		// 类型 1.人员 2.车辆
		queryType: {
			type: Number,
			default: 2
		}
	},
    data() {
        return {
			allChecked: false,
		   
		   page: 1,
		   total: 0,
		   totalPage: 0,
		   search: {
			   text: ''
		   },
		   
		   allData: {},
		   orginList: [],
		   resultList: [], //搜索结果集合
		   showList: [], 
		   
			checkedKey: [], //选中id
		   lastTime: null,
		   tips: '加载中'
        }
    },
	mounted() {
		
		if(this.queryType == 2) {
			this.checkedKey = this.$store.state.realtimeWatch.vheicleCheckArr.map(e => e.id)
			this.$store.dispatch('getVehIcon').then((res) => {
				
			}).finally(() => {
				this.getData()
				
			})
		}
		
		if(this.queryType == 1) {
			this.checkedKey = this.$store.state.realtimeWatch.peopleCheckArr.map(e => e.id)
			this.$store.dispatch('getUserIcon').then((res) => {
				
			}).finally(() => {
				this.getData()
			})
		}
		
	},
	
    methods: {
		
		handleChooseAll() {
			
			this.allChecked = !this.allChecked

			this.resultList.map(e => {
				e.checked = this.allChecked
			}) 
		},
		handleChoose(item) {
			item.checked=!item.checked
			this.computeCheckedData()
		},
		
		computeCheckedData() {
			let allLength = this.resultList.length
			let checedLength = this.resultList.filter((e) => e.checked).length
			if(allLength == checedLength) {
				this.allChecked = true
			} else {
				this.allChecked = false
			}
		},
		
		getChoosed() {
			let data = this.orginList.filter((e) => e.checked && !e.disabled)
			// console.log(data,'datadtatatdata')
			this.$emit('choosed',data)
			if(this.queryType == 2) {
				this.$store.dispatch('setVheicleCheckArr',data)
			} else if (this.queryType == 1) {
				this.$store.dispatch('setPeopleCheckArr',data)
			}
			
		},
		
		handleSearch() {
			this.page = 1
			if(this.search.text) {
				this.resultList = this.orginList.filter((e) => e.label.includes(this.search.text) || e.deptName.includes(this.search.text))
			} else {
				this.resultList = clone(this.orginList)
			}
			this.computeCheckedData()
			this.totalPage = Math.ceil(this.resultList.length / this.size)
			this.handlePageData()	
		},
		//上一页
		handleLast() {
			if(this.page != 1) this.page -= 1;
			this.handlePageData()
		},
		//下一页
		handleNext() {
			if(this.page != this.totalPage) this.page += 1;	
			this.handlePageData()
		},
		//处理分页数据
		handlePageData() {
			let index = (this.page - 1) * this.size
			this.showList = clone(this.resultList).splice(index,this.size)
		},
        getData() {
			let that = this;

			this.$store.dispatch('setLoading',true)
			
			this.$store.dispatch('setTreeInterVal', {
				cb: () => {
					 that.refreshData();
				}
			})
			
		    realTimeList({
				type: this.queryType,
			}).then((res) => {
				
			    if(isArray(res.data)) {
					this.lastTime = res.time
					
					res.data.forEach((item) => {
						let disabled = false
						if(this.isNull(item.lat)||this.isNull(item.lng)){
							disabled=true
						}
						let iconData = this.getIcons(item)
			
						let obj = {
							...item,
							...iconData,
							checked: this.checkedKey.includes(item.id),
							disabled
						}
						
						this.orginList.push(obj);
						this.allData[obj.id] = obj
					})				
					
					this.handleSearch()
					
					this.$emit('getDataed')
					
				} else {
					this.orginList = [];
					this.showList = [];
					this.allData = {};
					this.page = 1
					this.totalPage = 0
				}
				
				 if(Object.prototype.hasOwnProperty.call(res,'extra')) {
						this.handleCount(res.extra)
					} else {
						this.handleCount({})
					}
		   }).finally(() => {
			   this.$store.dispatch('setLoading',false)
			   this.tips = '暂无数据'
		   })
	   },
	   
	   refreshData() {		   
		   
		   realTimeMap({
			   type: this.queryType,
			   time: this.lastTime,
		   }).then((res) => {
				if(res.code == "0") {
					this.lastTime = res.time
					 
					 for(let i in res.data) {
						 let item = res.data[i]
						 
						 if(this.allData[i]) {
							 let iconData = this.getIcons(item)
							 let disabled = false
			 
							 if(this.isNull(item.lat)||this.isNull(item.lng)){
							 	disabled=true
							 }
							 item.disabled = disabled
							 
							 if(iconData) {
								 copyProps(this.allData[i],iconData)
							 }
							 // console.log(this.allData[i].speed,'this.allData[i]')
							 copyProps(this.allData[i],item)
							
						 } else  {
							 let disabled = false
							 if(this.isNull(item.lat)||this.isNull(item.lng)){
							 	disabled=true
							 }
							 let iconData = this.getIcons(item)
							 let obj = {
								 ...item,
								 ...iconData,
								 checked: this.checkedKey.includes(item.id),
								 disabled
							 }
							 this.originList.push(obj);
							 this.allData[obj.id] = obj
						 }
					 }
					
				} 
		   }).finally(() => {

		   })
		   
	   },
		
		
		getIcons(item) {
		   if(this.queryType == 2) {
			   return this.getVehIcon(item)
		   } else if (this.queryType == 1) {
			   return this.getUserIcon(item)
		   }
		},
		
		getVehIcon(item) {
		    //列表图标
		    let listIcon = this.$store.state.icon.vehIcon[2]
		    //地图图标
		    let mapIcon = this.$store.state.icon.vehIcon[1]
		
		    let icon = ""
		    let img = ""
		    let tips = ""
		    let filterStatus = ""  //用筛选
		    if(item.isAlarm == '1') {
		        icon = listIcon[4][item.vehType]? getImages(listIcon[4][item.vehType]):car_list_warning
		        img = mapIcon[4][item.vehType]? getImages(mapIcon[4][item.vehType]):car_warning
		
		        tips = '报警'
		        filterStatus = '0'
		    } else if (item.online == "1" && item.engineStatus == "1" && item.speed > 0) {
		        icon = listIcon[1][item.vehType]?getImages(listIcon[1][item.vehType]):car_list_online
		        img = mapIcon[1][item.vehType]? getImages(mapIcon[1][item.vehType]):car_online
		        tips = '行驶在线'
		        filterStatus = '1'
		    } else if (item.online == "1" && (item.engineStatus == "0" || item.speed == 0)) {
		        icon = listIcon[2][item.vehType]?getImages(listIcon[2][item.vehType]):car_list_engin
		        img = mapIcon[2][item.vehType]? getImages(mapIcon[2][item.vehType]):car_engin
		        tips = '停驶在线'
		        filterStatus = '2'
		    } else if (item.online == "0") {
		        icon = listIcon[3][item.vehType]?getImages(listIcon[3][item.vehType]):car_list_unline
		        img = mapIcon[3][item.vehType]? getImages(mapIcon[3][item.vehType]):car_unline
		        tips = '离线'
		        filterStatus = '3'
		    } else if (item.online == "2") {
		        icon = listIcon[3][item.vehType]?getImages(listIcon[3][item.vehType]):car_list_unline
		        img = mapIcon[3][item.vehType]? getImages(mapIcon[3][item.vehType]):car_unline
		        tips = '从未上线'
		        filterStatus = '3'
		    } else {
		        icon = listIcon[3][item.vehType]?getImages(listIcon[3][item.vehType]):car_list_unline
		        img = mapIcon[3][item.vehType]? getImages(mapIcon[3][item.vehType]):car_unline
		        tips = '离线'
		        filterStatus = '3'
		    }
		    return {
		        icon,
		        img,
		        tips,
		        filterStatus,
				code: 'vehicle', 
		    }
		},
	   
	  
	   //人员图标
	   getUserIcon(item) {
	       let listIcon = this.$store.state.icon.userIcon[2]
	       //地图图标
	       let mapIcon = this.$store.state.icon.userIcon[1]
	   
	       let icon = ""
		   let img = ""
		   let tips = ""
		   let filterStatus = ""  //用筛选
		   if(item.isAlarm == '1') {
		       icon = listIcon[4][item.workType]? getImages(listIcon[4][item.workType]):people_list_warning
		       img = mapIcon[4][item.workType]? getImages(mapIcon[4][item.workType]):people_warning
		       tips = '报警'
		       filterStatus = '0'
		   } else if (item.online == "1" && item.speed > 0) {
	          icon = listIcon[1][item.workType]?getImages(listIcon[1][item.workType]):people_list_online
	          img = mapIcon[1][item.workType]? getImages(mapIcon[1][item.workType]):people_online
			  tips = '行走在线'
			   filterStatus = '1'
	       } else if (item.online == "1" && item.speed == 0) {
	          icon = listIcon[2][item.workType]?getImages(listIcon[2][item.workType]):people_list_engin
	          img = mapIcon[2][item.workType]? getImages(mapIcon[2][item.workType]):people_engin
			  tips = '停留在线'
			   filterStatus = '2'
	       } else {
	           icon = listIcon[3][item.workType]?getImages(listIcon[3][item.workType]):people_list_unline
	           img = mapIcon[3][item.workType]? getImages(mapIcon[3][item.workType]):people_unline
			    tips = '离线'
				filterStatus = '3'
	       }   
	   
	       return {
	           icon,
			   img,
			   tips,
			   filterStatus,
			    code: 'people', 
	       }
	   },
	   
	   //计算在线数量
	handleCount(obj) {
	     
	       let cout = {
	           alarmNum: 0,
	           totalNum: 0,
	           offLine: 0,
	           onlineNum: 0,
	       }
	           
	       if (isObject(obj)) {
	           for(let i in cout) {
				   if(obj[i]) {
					    cout[i] = obj[i]
				   }
	              
	           }   
	       }
	       let countObj = [
	           { label: "全部", value: cout.totalNum },
	           {
	               label: "在线",
	               value: cout.onlineNum,
	           },
	           {
	               label: "离线",
	               value: cout.offLine,
	           },
	           {
	               label: "报警",
	               value: cout.alarmNum,
	               style: 'color:#D40000;'
	           },
	       ];
	       
	       this.$store.dispatch('setCountInfo',countObj)
	      
	   },
	   
    },
	
	
	beforeDestroy() {
		this.$store.dispatch('clearTreeInterVal')
	}

}
</script>

<style lang="scss" scoped>
	
	/* 内容satrt */
	.container {
		background: #fff;
		.search {
			padding: 20rpx 40rpx 10rpx 40rpx;
			
			.all-choosed {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 24rpx;
			}
		}
		.list {
			height: calc(85vh - 400rpx);
			padding: 0 20rpx;
			overflow-y: auto;
			
			.item {
				padding: 10rpx 20rpx;
				display: flex;
				align-items: center;
	 
				.item-value {
					font-size: 22rpx;
				}
				.item-label {
					font-size: 22rpx;
				}
				// border-bottom: 2rpx solid #ddd;
			}
			.empty {
				display: flex;
				align-items: center;
				justify-content: center;
				height: calc(100vh - 500rpx);
				color: #909193;
				min-height: 800rpx;
			}
		}
		
		.last,.next {
			margin: 10rpx 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	
	}
	
	/* 内容end */
	
	.choosed-image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}
	.icon-image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}
	.option-image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	

</style>