ybxf-security-uniapp/pagesA/fire/fire_device/index.vue

<template>
	<view class="uni-container uni-container-bg">
		<view class="example container">
			<!-- 搜索框 -->
			<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
				<uni-col :span="24">
					<view class="u-page__tag-item">
						<u-search placeholder="请输入消防设施名称" bgColor="#edf6f9" borderColor="#4cb2b6" v-model="keyword"
							:show-action="true" @custom="search"></u-search>
					</view>
				</uni-col>
			</uni-row>
			<!-- 下拉框 -->
			<view class="u-page__tag-item"
				style="margin-bottom: 26upx;width: 700upx;border-bottom: 2px solid #55cbbf;background-color: #f5f7fa;">
				<u-form>
					<u-form-item prop="orgName" @click="
						showOrg = true;
						hideKeyboard();
					" label="单位选择:" labelWidth="100px">
						<u--input border="none" disabled v-model="formData.orgName" placeholder="请选择所属单位"></u--input>
						<u-icon slot="right" name="arrow-down"></u-icon>
					</u-form-item>
				</u-form>
			</view>
			<!-- 卡片栏 -->
			<view class="" v-if="tableData.length>0 && isLoaded" style="margin-bottom: 90rpx;">
				<uni-card v-for="(item, index) in tableData" :isFull="true">
					<!-- :thumbnail="qr&ids==item.id?item.fpdQcode:''" :key="index"
				  :title="item.fpdName"
				  	:sub-title="'设施编号:' + item.fpdCode" :extra="'设施类别:' + item.fpdTypeName"-->
					<!-- @click="saveQRCodeToLocal(qr&ids==item.id?item.fpdQcode:'')" -->
					<!-- @click.native="previewQRCode(qr&ids==item.id?item.fpdQcode:'')" -->
					<!-- 标题 -->
					<template #title>
						<view class="nav-title">
							<view @click="saveQRCodeToLocal(qr&ids==item.id?item.fpdQcode:'')" v-if="qr && ids == item.id">
								<img :src="qr && ids == item.id ? item.fpdQcode : ''"
									style="with:100rpx;height:100rpx;margin-top:10rpx" v-if="qr && ids == item.id">
							</view>
							<view class="">
								<view class="title-fpdname">
									{{item.fpdName}}
								</view>
								<view class="title-fpdcode">
									{{`设施编号:${item.fpdCode}`}}
								</view>
							</view>
							<view class="">
								{{`设施类别:${item.fpdTypeName?item.fpdTypeName:''}`}}
							</view>
						</view>
					</template>
					<view class="titles">{{ item.buildingName }}</view>
					<!-- 简要内容 -->
					<view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
						<text>设备状态：</text>
						<text v-if="item.fpdStatus==0" class="conts">正常</text>
						<text v-if="item.fpdStatus==1" class="conts">有问题</text>
					</view>
					<view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
						<text>所在位置：</text>
						<text class="conts">{{ item.fpdLocal }}</text>
					</view>
					<view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
						<text>所属建筑：</text>
						<text class="conts">{{ item.buildingId }}</text>
					</view>
					<view style="display: flex;margin-bottom: 15rpx; color: #728f90;">
						<text>所属单位：</text>
						<text class="conts max-width">{{ item.orgDO.orgName }}</text>
					</view>
					<!-- 删除按钮 -->
					<view class="an-niu" @click="showModal(item)" style="z-index:99">
						<!-- @click.native="onClickDel(item)" -->
						<view class="detailDel">删除</view>
					</view>
					<view class="an-niu" @click="onClick(item, formData.orgName)" link>
						<text class="detail">编辑</text>
					</view>
					<view class="an-niu" link>
						<text class="detail" @click.native="anniuQR(item.fpdQcode,item.id)">生成二维码</text>
					</view>
					<!-- <view class="an-niu" @click.stop="saveQRCodeToLocal(item.fpdQcode)" link>
					<text class="detail">保存图片</text>
				</view> -->
				</uni-card>
			</view>
			<!-- tableData为空时显示  -->
			<view v-else-if="tableData.length==0 && isLoaded" style="text-align: center;">
				<view class="text-gray" style="padding-top: 20px;" v-if="tableData == 0">
					<img :src="tan90" alt="暂无数据" />
				</view>
			</view>
			<view>
				<image :src="Group" @click="addClick" class="tiantupian"></image>
			</view>
			<u-action-sheet :show="showOrg" :actions="actions" title="请选择单位" @close="showOrg = false"
				@select="">
			</u-action-sheet>
			<!-- 	<u-modal
			:show="show"
			@confirm="confirm"
			@cancel="cancel"
			@close="close"
			asyncClose
			closeOnClickOverlay
			showCancelButton
			confirmColor="red"
			:title="title"
			:content="content"
			ref="uModal"
		></u-modal> -->
			<u-modal :show="show" @confirm="confirm" @cancel="cancel" @close="close" asyncClose closeOnClickOverlay
				showCancelButton confirmColor="red" :title="title" :content="content" ref="uModal" :asyncClose="true">
			</u-modal>
			<!-- 加载中 -->
			<isLodingModel></isLodingModel>
		</view>
	</view>
</template>
<script>
	var that = '';
	import {
		getDevice, //获取消防设施列表
		delDevice, //删除
		getOrgId //获取orgId
	} from '@/api/fire_device';
	import config from '@/config'
	const baseUrlImg = config.baseUrlImg
	export default {
		data() {
			return {
				screenHeight: this.$screenHeight,
				isLoaded: false,
				Group: `${baseUrlImg}/checkActive/Group.png`,
				showOrg: false,
				actions: [],
				orgId: '',
				// 数据
				tableData: [],
				title: '是否删除该数据项?',
				content: '确认删除？',
				id: '',
				tan90: `${baseUrlImg}/tan90.png`,
				// 每页数据量
				pageSize: 10,
				FPDstatus: '',
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				// tableData数据加载中
				loading: false,
				// 初始化时搜索框的值
				keyword: '',
				qr: false, //二维码是否展示
				ids: '', //点击生成的是哪个二维码
				// 开始时间与结束时间
				formData: {
					orgName: '',
					fpdStatusValue: ''
				},
				show: false,
				showtimeStart: false,
				showtimeEnd: false
			};
		},
		// 在 vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			that = this;

		},
		onShow() {
			this.actions = []
			getOrgId({
				pageNo: this.pageNo,
				pageSize: this.pageSize,
				userId: this.$store.state.user.id
			}).then(response => {
				console.log(response, 'response');
				// 取到用户对应的单位名称与id
				response.data.map(v => {
					this.actions.push({
						id: v.dwid,
						name: v.orgName
					});
				});
				console.log(response.data, '21321312');
				this.formData.orgName = response.data[0].orgName;
				this.formData.orgId = response.data[0].dwid;
				this.tableData = []
				this.getData();

			}).catch(err => {
				this.loading = false
				this.$modal.msg(err)
			})
			// this.tableData={}
			// this.getData();
		},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		mixins: [uni.$u.mixin],
		methods: {
			search(val) {
				console.log(val, 'valvals');
				this.isLoaded = false
				this.loading = true
				this.tableData = []
				this.getData()
			},
			async saveQRCodeToLocal(qrCodeUrl) {
				uni.previewImage({
					current: qrCodeUrl,
					urls: [qrCodeUrl],
					width: 50, // 设置预览图片的宽度
					height: 50, // 设置预览图片的高度
				});
				const authSetting = await uni.getSetting();
				if (authSetting[1].authSetting['scope.writePhotosAlbum'] === false) {
					uni.showModal({
						title: '提示',
						content: '请开启相册权限以保存二维码',
						success: res => {
							if (res.confirm) {
								uni.openSetting();
							}
						},
					});
					return;
				}
				const tempFilePath = qrCodeUrl
				uni.showLoading({
					title: '正在保存',
				});
				uni.saveImageToPhotosAlbum({
					filePath: tempFilePath,
					success: () => {
						uni.showToast({
							title: '保存成功',
							icon: 'success',
						});
					},
					fail: () => {
						uni.showToast({
							title: '保存失败，请重试',
							icon: 'none',
						});
					},
					complete: () => {
						uni.hideLoading();
					},
				});
			},
			// previewQRCode(qrCodeUrl) {
			// 	console.log(qrCodeUrl, 'qrCodeUrlqrCodeUrl');

			// 	uni.previewImage({
			// 		current: qrCodeUrl,
			// 		urls: [qrCodeUrl],
			// 		width: 50, // 设置预览图片的宽度
			// 		height: 50, // 设置预览图片的高度
			// 	});

			// },
			anniuQR(qrCodeUrl, valid) { //生成二维码
				this.ids = valid
				this.qr = true
				uni.previewImage({
					urls: [qrCodeUrl],
				});
			},
			// 模态框内容
			showModal(val) {
				this.show = true;
				this.id = val.id;
			},
			confirm() {
				this.show = false;
				delDevice({
					id: this.id
				}).then(response => {
					this.isLoaded = false
					this.tableData = []
					this.getData();
					// this.tableData = response.data;
					console.log(this.tableData, '获取设施信息详细信息获取设施信息详细信息获取设施信息详细信息获取设施信息详细信息');
				});
			},
			close() {
				this.show = false;
				console.log('close');
			},
			cancel() {
				this.show = false;
				console.log('cancel');
			},
			// 编辑
			addClickDetail(val) {
				uni.navigateTo({
					url: `/pagesA/fire/fire_device/edit_device/edit_device?item=${JSON.stringify(val)}`
				});
			},
			// 获取数据
			getData(pageNo) {
				this.loading = true;
				// 获取设施信息详细信息
				getDevice({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					orgId: this.formData.orgId,
					fpdName: this.keyword
				}).then(response => {
					console.log(response);
					this.isLoaded = true
					this.tableData = [...this.tableData, ...response.data.records]
					this.loading = false
					this.total=response.data.total
					// this.tableData = response.data.records;
					console.log(this.tableData, '获得消防设施详细信息');
					// 根据返回值，显示记录类型的中文名称
					this.tableData.map(i => {
						if (i.fpdType == 1) {
							i.fpdTypeName = '设备类型1'
						} else if (i.fpdType == 2) {
							i.fpdTypeName = '设备类型2'
						}
					})

				}).catch(err => {
					this.loading = false
					this.$modal.msg(err)
				})
			},

			sexSelect(e) {
				this.formData.orgId = e.id;
				this.formData.orgName = e.name;
				// 获取培训演练信息详细信息
				getDevice({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					orgId: this.formData.orgId
				}).then(response => {
					this.tableData = response.data.list;
				});
				this.$$forceUpdate()
			},

			// 传递数据
			onClick(val, orgName) {
				console.log(val, 'val');
				this.isLoaded = false
				uni.navigateTo({
					url: '/pagesA/fire/fire_device/edit_device/edit_device?id=' + val.id + '&orgName=' + orgName,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(val) {
							console.log(val, '打开页面传送到当前页面的数据');
						}
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', val);
					}
				});
			},

			// 删除
			onClickDel(val) {
				this.id = val.id;
				console.log(this.id);
				delDevice({
					id: this.id
				}).then(response => {
					this.loading = true;
					this.isLoaded = false
					this.tableData = []
					this.getData();
					console.log(this.tableData, '获取');
				});
			},
			addClick() {
				this.isLoaded = false
				uni.navigateTo({
					url: `/pagesA/fire/fire_device/add_device/add_device?&orgName=${this.formData.orgName}&orgId=${this.formData.orgId}`,
				});
			},
			// 隐藏键盘
			hideKeyboard() {
				uni.hideKeyboard();
			},
			
		},
		// 触底的事件
		onReachBottom() {
			console.log(this.loading,'ssss');
			// 判断是否还有下一页数据
			if (this.pageNo * this.pageSize >= this.total)
				return uni.showToast({
					title: `数据加载完毕`
				});
			// 判断是否正在请求其它数据，如果是，则不发起额外的请求
			if (this.loading) return;
			this.pageNo += 1;
			this.getData(this.pageNo);
		}
	};
</script>
<style lang="scss" scoped>
	body {
		background-color: #f5f7f9;
	}

	page {
		background-color: #f5f7f9;
	}

	/deep/ .u-tabs__wrapper[data-v-0de61367],
	.u-tabs__wrapper.data-v-0de61367,
	/deep/.u-tabs__wrapper {
		width: 99%;
	}

	/deep/.u-tabs__wrapper__nav__item[data-v-0de61367],
	/deep/.u-tabs__wrapper__nav__item.data-v-0de61367,
	/deep/.u-tabs__wrapper__nav__item {
		padding: 0 60rpx;
	}

	.uni-container {
		height: 100vh;
		padding-right: 20upx;
	}

	.addInsp {
		width: 40px;
		position: fixed;
		right: 4px;
		z-index: 99999;
	}

	::v-deep .u-icon__icon {
		margin-right: 0px !important;
	}

	.an-niu {
		float: right;
		font-size: 10px;
		text-align: center;
		display: flex;
		margin-top: 20upx;
		padding-bottom: 30rpx;
		// margin-top: 50rpx;
		color: #fff;

		.detail {
			padding: 0 40rpx;
			height: 60rpx;
			border-radius: 30px;
			background-color: #4cb2b6;
			margin-right: 20rpx;
			text-align: center;
			line-height: 60rpx;
		}

		.detailDel {
			padding: 0 40rpx;
			height: 60rpx;
			border-radius: 30px;
			background-color: #ff2e31;
			color: white;
			margin-right: 20rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 30upx;
		}

		.solve {
			width: 62px;
			height: 60rpx;
			margin-right: 20rpx;
			border-radius: 30px;
			background-color: #4cb2b6;
			line-height: 60rpx;
		}

		.deletes {
			width: 62px;
			height: 60rpx;
			border-radius: 60rpx;
			background-color: red;
			color: #fff;
			line-height: 60rpx;
		}
	}

	/deep/.segmented-control__item--button {
		background-color: rgb(76, 178, 182) !important;
	}

	/deep/.segmented-control__item--button--active {
		background-color: #ffffff !important;
	}

	/deep/.uni-card {
		box-shadow: 0px 0px 3px 0px rgba(86, 165, 168, 0.63) !important;
		border-radius: 30rpx;
	}

	.tiantupian {
		width: 110rpx;
		height: 110rpx;
		position: fixed;
		right: 15px;
		bottom: 10rpx;
	}

	// 控制二维码缩略图大小


	/deep/ .uni-card .uni-card__header .uni-card__header-avatar {
		width: 65px;
		height: 65px;
		overflow: hidden;
		border-radius: 5px;
		margin-right: 10px;
	}

	/deep/ .uni-card .uni-card__header .uni-card__header-avatar .uni-card__header-avatar-image {
		flex: 1;
		width: 65px;
		height: 65px;
	}

	//列表样式
	.titles {
		font-weight: 600;
		margin-bottom: 10rpx;
		color: black;
		font-size: 32rpx;
	}

	.conts {
		max-width: 470rpx;
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 1;
		/*显示文本行数*/
		overflow: hidden;
		/*溢出隐藏*/
		color: #274647;
		text-overflow: ellipsis;
		/*不知道干嘛的*/

		.conts-title {
			margin-right: 10rpx;
			color: #728f90;
		}
	}

	.max-width {
		max-width: 180upx;
	}

	/deep/ .u-form-item__body__left__content__label {
		font-size: 28upx !important;
	}

	.nav-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #728f90;
		border-bottom: 1px solid #DCDCDC;
		;
		padding-bottom: 20rpx;

		.title-fpdname {
			color: #000;
		}

		.title-fpdcode {
			margin-top: 10rpx
		}
	}
	.example{
		overflow-y: auto;
	}
	/deep/.u-action-sheet {
		overflow-y: auto;
		height: 1000rpx;
		background-color: #fff;
	}
</style>