bike/pages_admin/worke/woke_deviceMgmt.vue

<template>
	<view class="page">
		<u-navbar title="设备管理" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='45'></u-navbar>
		<view class="tap">
			<!-- <view class="tap_cont " :class="curtitidx==0?'act1':''" @click="changeidx(0)">
				投放中设备
			</view>
			<view class="tap_cont" :class="curtitidx==1?'act1':''"  @click="changeidx(1)">
				仓库中设备
			</view> -->

		</view>
		<view class="stause_box">
			<view class="stause_li" @click="show=true">
				{{tit}}
				<view class="iconfont icon-xiangxia1"></view>
			</view>
			<view class="stause_li" style="margin-left: 50rpx;" @click="showdsc=true">
				{{sctit}}
				<view class="iconfont icon-xiangxia1"></view>
			</view>
		</view>

		<view class="info_card" style="margin-top: 20rpx;" v-for="(item,index) in deviceList" :key="index" v-if="">
			<view class="info_tit" style="margin-left: 36rpx;">
				<view class="tit_left" v-if="stepindex==1">
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uTuWiPEViwzaPPHAgjdN" mode=""
						v-if="!isSelected(item.sn)" @click="selectItem(item.sn)"></image>
					<image src="https://lxnapi.ccttiot.com/bike/img/static/uGY25CNyW7Vz0LJcOYtS" mode=""
						v-if="isSelected(item.sn)" @click="deselectItem(item.sn)"></image>

				</view>
				车牌号：{{item.vehicleNum}}
				<view class="tit_right" :style="{ color: getStatusColor(item) }">

					<view class="yuan" :style="{ background: getStatusColor(item) }"></view>
					{{status(item)}}
				</view>
			</view>
			<view class="lines"></view>
			<view class="cont">


				<view class="info_li">
					<view class="half_infoli">
						MAC：<span>{{item.mac}}</span>
					</view>
					<view class="half_infoli">
						电量：<span>{{item.remainingPower}}%</span>
					</view>
				</view>
				<view class="info_li">
					<view class="half_infoli">
						SN：<span>{{item.sn}}</span>
					</view>
					<view class="half_infoli">
						型号：<span>{{item.model}}</span>
					</view>
				</view>
			</view>
		</view>


		<view class="bot_box">
			<view class="step1" v-if="stepindex ==0">
				<view class="step1_left">
					设备总数：<span>{{deviceList.length}}</span>
				</view>
				<view class="right_box" @click="stepindex=1">
					批量操作
				</view>
			</view>
			<view class="step2">
				<view class="top">
					<view class="top_left" @click="selectAll">
						<image
							:src="isAllSelected ? 'https://lxnapi.ccttiot.com/bike/img/static/uGY25CNyW7Vz0LJcOYtS' : 'https://lxnapi.ccttiot.com/bike/img/static/uTuWiPEViwzaPPHAgjdN'"
							mode=""></image>
						{{ isAllSelected ? '取消全选' : '全选' }}
					</view>
					<view class="top_right">
						已选设备：{{selectedItems.length}}
					</view>
				</view>
				<view class="bot_btn">
					<view class="btn" @click="closestep()">
						取消
					</view>
					<!-- 	<view class="btn">
						返仓
					</view> -->
					<view class="btn" @click="ban()">
						车辆禁用
					</view>
					<view class="btn" @click="pick()">
						车辆解禁
					</view>


				</view>
			</view>
		</view>
		<view class="bottom" style="width: 100%;height: 300rpx;">

		</view>
		<u-select v-model="show" :list="list" title='设备状态' @confirm="confirm"></u-select>
		<u-select v-model="showdsc" :list="lists" title='剩余电量' @confirm="confirms"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curtitidx: 0,
				bgc: {
					backgroundColor: "#fff",
				},
				showdsc: false,
				sctit: '从高到低',
				scidx: 'desc',
				show: false,
				lists: [{
						value: 'desc',
						label: '从高到低'
					},
					{
						value: 'asc',
						label: '从低到高'
					},
				],
				list: [{
						value: '',
						label: '全部'
					},
					{
						value: '0',
						label: '未上架'
					},
					{
						value: '1',
						label: '待租'
					},
					{
						value: '2',
						label: '预约中'
					},
					{
						value: '3',
						label: '骑行中'
					},
					{
						value: '4',
						label: '临时锁车'
					},
					{
						value: '8',
						label: '下线'
					}

				],
				tit: '全部',
				typeidx: '',
				deviceList: [],
				stepindex: 0,
				selectedItems: [],

			}
		},

		onLoad() {
			this.getDevice()
		},
		computed: {
			isAllSelected() {
				if (this.selectedItems.length == this.deviceList.length) {
					return true
				} else {
					return false
				}

			}
		},

		methods: {
			ban() {
				let data = {
					disableType: 'disable',
					sns: this.selectedItems.join(',')
				}
				this.$u.post(`/appVerify/device/disable?sns=` + data.sns + '&disableType=disable').then((res) => {
					if (res.code == 200) {
						this.closestep()
						this.getDevice()
					} else {
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});
			},
			pick() {
				let data = {
					disableType: 'enable',
					sns: this.selectedItems.join(',')
				}
				this.$u.post(`/appVerify/device/disable?sns=` + data.sns + '&disableType=enable').then((res) => {
					if (res.code == 200) {
						this.closestep()
						this.getDevice()


					} else {
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});
			},
			confirms(e) {

				this.scidx = e[0].value
				this.sctit = e[0].label
				this.getDevice()
			},
			getStatusColor(item) {
				if (item.onlineStatus == 0) {
					// 离线状态为红色
					return 'red';
				} else if (item.status == 0 || item.status == 8) {
					// 下线和未上架状态为灰色
					return 'gray';
				} else {
					// 其他状态为蓝色
					// return 'blue';
				}
			},
			closestep() {
				this.selectedItems = []
				this.stepindex = 0
			},
			isSelected(sn) {
				return this.selectedItems.includes(sn);
			},
			selectItem(sn) {
				this.selectedItems.push(sn);
				// 更新 isAllSelected

				console.log(this.selectedItems, '选择');
			},
			deselectItem(sn) {
				this.selectedItems = this.selectedItems.filter(item => item !== sn);
				// 更新 isAllSelected

				console.log(this.selectedItems, '删除');
			},

			selectAll() {
				if (this.selectedItems.length === this.deviceList.length) {
					// All items are already selected, so deselect all
					this.selectedItems = [];
				} else {
					// Select all items
					this.selectedItems = this.deviceList.map(item => item.sn);
				}
			},
			status(item) {
				if (item.onlineStatus == 0) {
					return '离线'
				} else {
					if (item.status == 0) {
						return '未上架'
					} else if (item.status == 1) {
						return '待租'
					} else if (item.status == 2) {
						return '预约中'
					} else if (item.status == 3) {
						return '骑行中'
					} else if (item.status == 4) {
						return '临时锁车中'
					} else if (item.status == 8) {
						return '下线'
					}
				}

			},
			getDevice() {
				let data = {
					powerStart: '',
					powerEnd: '',
					sort: this.scidx,
					status: this.typeidx
				}

				this.selectedItems = [];
				this.$u.get(`/appVerify/allVehicleInfo?`, data).then((res) => {
					if (res.code == 200) {
						this.deviceList = res.data


					} else {
						// 处理接口返回错误的情况
					}
				}).catch(error => {
					// 处理接口请求失败的情况
				});
			},
			confirm(e) {
				// console.log(e,'eeeeeeeeee');
				this.typeidx = e[0].value
				this.tit = e[0].label
				this.getDevice()
				// console.log(e);
				// this.mode = e[0].label
				// this.gettype()
			},
			changeidx(idx) {
				this.curtitidx = idx
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.page {
		width: 750rpx;

		.info_card {
			background: #FFFFFF;

			.info_tit {
				display: flex;
				flex-wrap: nowrap;
				padding: 22rpx 28rpx;

				.tit_left {
					display: flex;
					align-items: center;
					font-weight: 400;
					font-size: 28rpx;
					color: #3D3D3D;

					image {
						width: 46rpx;
						height: 46rpx;
					}
				}

				.tit_right {
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					margin-left: auto;
					font-weight: 400;
					font-size: 28rpx;
					color: #4C97E7;

					.yuan {
						margin-right: 12rpx;
						margin-top: 6rpx;
						width: 15rpx;
						height: 15rpx;
						border-radius: 50%;
						background: #4C97E7;
					}
				}
			}

			.lines {
				width: 750rpx;
				height: 2rpx;
				border: 2rpx solid #ccc;
			}

			.cont {
				padding: 26rpx 28rpx;

				.info_li {
					display: flex;
					flex-wrap: nowrap;
					font-weight: 400;
					font-size: 28rpx;
					color: #808080;

					span {
						color: #3D3D3D;
					}

					line-height: 48rpx;

					.half_infoli {
						display: flex;
						flex-wrap: nowrap;
						width: 50%;
						font-weight: 400;
						font-size: 28rpx;
						color: #808080;
						white-space: nowrap;
						/* 禁止换行 */
						overflow: hidden;
						/* 超出部分隐藏 */
						text-overflow: ellipsis;
						span {
							color: #3D3D3D;
							white-space: nowrap;
							/* 禁止换行 */
							overflow: hidden;
							/* 超出部分隐藏 */
							text-overflow: ellipsis;
						}

						.input {
							width: 30%;
							white-space: nowrap;
							/* 禁止换行 */
							overflow: hidden;
							/* 超出部分隐藏 */
							text-overflow: ellipsis;
						}
					}
				}
			}
		}

		.bot_box {
			padding: 0 30rpx;
			position: fixed;
			bottom: 0;
			width: 750rpx;
			height: 232rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);

			.step2 {
				padding: 42rpx 32rpx;
				display: flex;
				flex-wrap: wrap;
				// align-items: center;
				// flex-wrap: nowrap;
				width: 100%;
				height: 100%;

				.top {
					width: 100%;
					display: flex;

					.top_left {
						display: flex;
						flex-wrap: nowrap;
						font-weight: 400;
						font-size: 36rpx;
						color: #3D3D3D;

						image {
							width: 46rpx;
							height: 46rpx;
						}
					}

					.top_right {
						font-weight: 400;
						font-size: 36rpx;
						color: #3D3D3D;
						margin-left: auto;
					}
				}

				.bot_btn {

					display: flex;
					flex-wrap: wrap;

					width: 750rpx;

					background: #fff;
					// background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);

					.btn:nth-child(4n) {
						margin-right: 0;
					}

					.btn {
						margin-right: 18rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 164rpx;
						height: 66rpx;
						background: #E2F2FF;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						border: 2rpx solid #4C97E7;
						font-weight: 400;
						font-size: 28rpx;
						color: #3D3D3D;
					}
				}
			}

			.step1 {
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				width: 100%;
				height: 100%;

				.step1_left {
					font-weight: 400;
					font-size: 36rpx;
					color: #3D3D3D;

					span {
						color: #4C97E7;
					}
				}

				.right_box {
					margin-left: auto;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 244rpx;
					height: 66rpx;
					background: #4C97E7;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					border: 2rpx solid #4C97E7;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}

		.stause_box {
			background: #fff;
			padding: 44rpx 30rpx;
			display: flex;
			flex-wrap: nowrap;

			.stause_li {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				font-weight: 400;
				font-size: 32rpx;
				color: #3D3D3D;

				.icon-xiangxia1 {
					margin-left: 6rpx;
					font-size: 20rpx;
				}
			}
		}

		.tap {
			padding-top: 24rpx;
			width: 750rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-around;
			background: #fff;

			.tap_cont {
				text-align: center;
				padding-bottom: 15rpx;
				width: 200rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #3D3D3D;
				border-bottom: 6rpx solid #fff;
			}

			.act1 {
				border-bottom: 6rpx solid #4C97E7;
				color: #4C97E7;
			}
		}
	}
</style>