province-uniapp-qinghai-gsq/queue-monitor/pages/schedule/schedule.vue

<template>
	<view id="main" class="content main">
		<app-header @back="back">远程调度</app-header>
		<view>
			<view>
				<view id="top">
					<u-cell title="选择粮库" :value="form.orgName" :is-link="true"
						@click="storehouseSelectShow = true"></u-cell>

					<view class="queueCar">
						<view class="text">
						<view>排队车辆</view>
						<view>
							<view class="num">{{carCount}}</view> 辆</view>
						</view>
					</view>
					<view class="title">车辆调度</view>
				</view>
				<view class="list">
					<HM-dragSorts v-if="showList" :key="updateKey" :list="dataList" :autoScroll="true" :feedbackGenerator="true"
					   :listHeight="listH" :rowHeight="55" @confirm="confirm"></HM-dragSorts>
				</view>

				<u-action-sheet2 :actions="orgList" :closeOnClickOverlay="true" :closeOnClickAction="true" title="选择粮库"
					:show="storehouseSelectShow" @select="onOrgSelect" @close="storehouseSelectShow = false">
				</u-action-sheet2>
			</view>
			<tabbar></tabbar>
		</view>
	</view>
</template>

<script>
	import {
		HOME_INDEX,
		CAR_INDEX,
		MONITOR_INDEX,
		LIVE_INDEX
	} from '@/config/constants'
	import dragSorts from '@/uni_modules/HM-dragSorts/components/HM-dragSorts/HM-dragSorts.vue'
	import {
		getCarDynamicCheck,
		updateSort
	} from '@/api/schedule';
	import {
		getOrgTypes,
		getVehicleTypes
	} from '@/api/basic'
	import appHeader from '@/pages/components/header/header.vue'
	import tabbar from '@/pages/components/tabbar.vue'
	import uActionSheet2 from '@/components/u-action-sheet/my-action-sheet.vue'
	export default {
		components: {
			'HM-dragSorts': dragSorts,
			appHeader,
			tabbar,
			uActionSheet2,
		},
		data() {
			return {
				updateKey: 0,
				storehouseSelectShow: false,
				orgList: [],
				dataList: [],
				vehicleTypeMap: {},
				carCount: 0,
				showList: false,
				listH: 0,
				form: {
					orgName: null,
					orgId: null,
				},
			}
		},
		mounted() {
			getOrgTypes().then(resp => {
				const list = resp.data || list
				list.forEach(d => {
					d.name = d.orgName
				})
				this.orgList = resp.data || []
			})
			getVehicleTypes().then(resp => {
				const list = resp.data || []
				list.forEach(d => {
					this.vehicleTypeMap[d.id] = d
				})
			})
			this.$nextTick(() => {
				let total
				this.getTotalHeight().then(all => {
					this.getTopHeight().then(t => {
						const listH = all - t - 60 - 80 - 20
						console.log("listH", listH);
						this.listH = listH
						this.showList = true
					})
				})

			})
		},
		methods: {
			back() {
				getApp().globalData.tabIndex = HOME_INDEX
				uni.redirectTo({
					url: '/pages/home/home'
				})
			},
			getTopHeight() {
				return new Promise((resolve) => {
					const query = uni.createSelectorQuery().in(this);
					query
					  .select("#top")
					  .boundingClientRect((data) => {
						  const topH = data.height
						  console.log('top 高度', topH);
						  resolve(topH)
					  })
					  .exec();
				})
			},
			getTotalHeight() {
				return new Promise((resolve) => {
					const query = uni.createSelectorQuery().in(this);
					query
					  .select("#main")
					  .boundingClientRect((data) => {
						  const topH = data.height
						  console.log('main 高度', topH);
						  resolve(topH)
					  })
					  .exec();
				})
			},
			onOrgSelect(data) {
				console.log('choose', data);
				this.form.orgName = data.orgName
				this.form.orgId = data.orgId
				this.queryData()
			},
			queryData() {
				console.log('orgId = ', this.form.orgId);
				return getCarDynamicCheck({
					orgId: this.form.orgId
				}).then(resp => {
					if (resp.code === 200) {
						this.updateKey += 1
						this.carCount = resp.data.carCount
						const list = resp.data.listParam || []
						this.updateList(list)
					}
				})
			},
			updateList(list) {
				let i = 1
				list.forEach(d => {
					d.name = `车牌号: ${d.licensePlateNumber} 排队号: ${i ++} 类型: ${this.carTypeName(d.vehicleType)} `
				})
				this.dataList = list
			},
			carTypeName(typeId) {
				if (typeId in this.vehicleTypeMap) {
					return this.vehicleTypeMap[typeId]?.dictLabel
				}
				return ""
			},
			onclick() {
				console.log('click', arguments);
			},
			change() {
				console.log('change', arguments);
			},
			confirm(data) {
				console.log('confirm', arguments);
				const {
					list
				} = data
				let i = 1
				const ret = list.map(d => {
					return {
						reservationRegisterId: d.id,
						sortNo: i++
					}
				})
				console.log(list, this.dataList);
				// {
				// 	id: xxx,
				// 	sortNo: 1,
				// }
				uni.showLoading({
					title: '更新中'
				})
				updateSort(ret).then(resp => {
					if (resp.code === 200) {
						this.queryData().then(_ => {
							uni.showToast({
								title: '更新成功',
								icon: 'success'
							})
						})
					}
				}).finally(_ => {
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #f0f1f2;
		height: 100vh;
		.title {
			margin-left: 15px;
			font-size: 20px;
			font-weight: 0.9;
		}
	}
	.queueCar {
		background: url('~@/static/queue-car.png') no-repeat;
		background-size: 100% 100%;
		height: 100px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.text {
			margin-left: 30px;
			.num {
				display: inline-block;
				font-size: 30px;
				color: #334ec2;
			}
		}
		
		
	}
	.list {
		margin: 10px;
	}
</style>