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

<template>
	<view class="container uni-container uni-container-bg">
		<uni-section title="" padding style="background-color: #F5F7F9;">
			<view class="example-body">
				<view class="tag-view" style="display: flex;flex-wrap: wrap;">
					<uni-tag style="margin: 5px;cursor: pointer;padding: 5px;" v-for="(item,index) in tagLabel"
						:key="index" :inverted="true" :text="item.label" type="primary"
						@click="setInverted(item.value,item.rotues)" :class="{bg:item.value==clicKValue}" />
				</view>
			</view>
		</uni-section>
		<component :is="selectedTag" v-if="selectedTag!=''">
			<router-view v-if="selectedTag !== null">
			</router-view>
		</component>
		<u-list @scrolltolower="scrolltolower" v-if="tableData.length>0 && isLoaded&&fireInspection">
			<view class="top">
				<view class="">
					<u-search placeholder="请输入任务名称" bgColor="#edf6f9" borderColor="#4cb2b6" v-model="taskname"
						:showAction="false"></u-search>
					<view class="search-time">
						<uni-datetime-picker v-model="kewords" type="daterange" @custom="changeLog" />
					</view>
				</view>
				<view class="search-icon">
					<u-icon name="search" color="#4CB2B6" size="42" @click="changeLog"></u-icon>
				</view>
			</view>
			<u-list-item v-for="(item, index) in tableData" :key="index" @click.native="onClick(item)" link>
				<uni-row class="demo-uni-row padding-tb-sm" :gutter="20" width="100%">
					<uni-col :span="24" class="text-xl font-weight-700" v-if="my==''">{{ item.task_name }}</uni-col>
					<!-- 	<u-badge v-if="item.isdenger==1" :value="1011" numberType="overflow" isDot
						customStyle="margin-right:40px" /> -->
					<u-icon v-if="item.isdenger==1&&my==''" name="warning-fill" color="#ff5647" size="28"
						customStyle="margin-right:20px"></u-icon>
				</uni-row>
				<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
					<uni-col :span="24" class="text-cut text-grey1">任务介绍：{{ item.insp_name }}</uni-col>
					<u-icon v-if="item.isdenger==1&&my!=''" name="warning-fill" color="#ff5647" size="28"
						customStyle="margin-right:20px"></u-icon>
				</uni-row>
				<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
					<uni-col :span="24" class="text-cut text-grey1">详情描述：{{ item.description }}</uni-col>
				</uni-row>
				<uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
					<uni-col :span="24" class="text-cut text-grey1">提交时间：{{ item.inspect_time}}</uni-col>
					<!-- 	<uni-col :span="16" class="text-cut text-grey1">提交时间：{{ item.cutofftime }}</uni-col>
					<uni-col :span="8" class="justify-end flex ">
						<u-button class="margin-right-sm" size="small" color="#4CB2B6" style="width: 160rpx; "
							 > 查看 </u-button>
						<u-button size="small" color="red" style="width: 160rpx;">删除</u-button>
					</uni-col> -->
				</uni-row>
				<!-- <uni-row class="demo-uni-row padding-bottom-sm" :gutter="20" width="100%">
					<uni-col :span="24" class="text-cut text-grey1"> 
						<u-avatar-group :urls="item.url" size="35" gap="0.4" maxCount='5' @showMore="onClick(item)">
						</u-avatar-group>
					</uni-col>
				</uni-row> -->
			</u-list-item>
		</u-list>
		<view v-else-if="tableData.length==0 && isLoaded" style="text-align: center;">
			<view class="text-gray" style="padding-top: 20px;">
				<img :src="tan90" alt="暂无数据" />
			</view>
		</view>
		<!-- 	加载中
		<isLodingModel></isLodingModel> -->
	</view>
</template>
<script>
	let that = null;
	import {
		getInspecthisPage,
		getSelfInspecthisPage
	} from '@/api/task';
	import {
		getInsHisImgurl,
	} from '@/api/check_record';
	import {
		shijianc
	} from '@/utils/common.js'
	import config from '@/config'
	const baseUrlImg = config.baseUrlImg
	export default {
		components: {
			Drill: () => import('@/pagesA/fire/drill/index.vue'),
			FpdDetection: () => import('@/pagesA/fire/fpd_detection/fpd_detection.vue'),
			FireSpecial: () => import('@/pagesB/fire/fireSpecial/index.vue'),
			FireWork: () => import('@/pagesB/fire/fireWork/index.vue')
		},
		data() {
			return {
				isLoaded: false,
				tan90: `${baseUrlImg}/tan90.png`,
				// 数据
				tableData: [],
				taskname: '',
				// 每页数据量
				pageSize: 20,
				kewords: [],
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				// tableData数据加载中
				loading: false,
				statusList: {
					0: '未完成',
					1: '已完成',
					2: '审核中',
					3: '审核未通过'
				},
				urls2: ['https://cdn.uviewui.com/uview/album/1.jpg', 'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg', 'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg', 'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg', 'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg', 'https://cdn.uviewui.com/uview/album/10.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg', 'https://cdn.uviewui.com/uview/album/10.jpg',
				],
				my: '',
				title: '暂无数据',
				tagLabel: [{
						value: 0,
						rotues: '',
						label: '消防检查结果'
					},
					{
						value: 1,
						rotues: 'Drill',
						label: '检查项培训演练'
					},
					{
						value: 2,
						rotues: 'fpd-detection',
						label: '消防设施维护和检测'
					},
					{
						value: 3,
						rotues: 'fire-special',
						label: '特种作业人员'
					},
					{
						value: 4,
						rotues: 'fire-work',
						label: '动火审批'
					},

				],
				drill: false,
				fireService: false,
				special: false,
				hotApproval: false,
				fireInspection: true,
				clicKValue: 0, //点击的样式
				selectedTag:''
			};
		},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		// 在 vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			console.log(option, 'option');
			if (option.my) {
				this.my = option.my
			}

		},

		onShow() {
			this.tableData = []
			this.getData(1);
		},

		methods: {
			setInverted(value, rotues) { //标签的点击事件
				switch (value) {
					case 0:
						this.fireInspection = true //消防检查结果
						break;
					case 1:
						this.drill = true //培训与演练
						this.fireInspection = false
						break;
					case 2:
						this.fireService = true //消防设施维护和检测
						this.fireInspection = false
						break;
					case 3:
						this.special = true //特种作业人员
						this.fireInspection = false
						break;
					case 4:
						this.hotApproval = true //动火审批
						this.fireInspection = false
						break;
					default:
						break;
				}
				this.clicKValue = value
				this.selectedTag = rotues;
			},
			changeLog(e) {
				this.title = ''
				this.isLoaded = false
				this.tableData = []
				if (this.kewords.length > 0 && this.kewords[0].indexOf(":") === -1) {
					this.kewords[0] = this.kewords[0] + ' 00:00:00'
					this.kewords[1] = this.kewords[1] + ' 23:59:59'
				}
				this.getData(1)
				console.log(this.kewords, 'ddddddddddd', e);
			},
			// =================数据转换==================
			statusListTran(val) {
				//status状态转换
				return this.statusList[val];
			},
			// ================================ 
			// 获取数据
			getData(pageNo, value = '') {
				this.loading = true;
				this.pageNo = pageNo;
				let formChuan = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					userId: this.$store.state.user.id,
					inspectTime: this.kewords,
					taskName: this.taskname
				}
				if (this.my == 'onlymy') {
					getSelfInspecthisPage(formChuan).then(response => {
						console.log('response', response);
						// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
						this.isLoaded = true
						this.tableData = [...this.tableData, ...response.data.records];
						this.tableData.map(i => {
							i.inspect_time = shijianc(i.inspect_time)
						})
						// this.tableData = response.data.list;
						this.total = response.data.total;
						this.loading = false;
					});
				} else {
					getInspecthisPage(formChuan).then(response => {
						console.log('1111', response);
						this.isLoaded = true
						// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
						this.tableData = [...this.tableData, ...response.data.list];
						this.tableData.map(i => {
							i.inspect_time = shijianc(i.inspect_time)
						})
						// this.tableData = response.data.list;
						this.total = response.data.total;
						this.loading = false;
					});
				}

			},
			onClick(val) {
				console.log(val);
				this.isLoaded = false
				if (this.my == "myonly") {
					uni.navigateTo({
						url: `/pagesA/fire/check_record/picture/picture?items=${JSON.stringify(val)}`
					});
				} else {
					uni.navigateTo({
						url: `/pagesA/fire/check_record/picture/picture?id=${val.id}`
					});
				}
			},
			gotoDetails(val) {
				this.isLoaded = false
				console.log('val.status', val.status);
				var url = '';
				if (val.status == 1) {
					//主动检查详情
					url = '/pagesA/fire/check_active/check_details/check_details?id=' + val.id;
				} else if (val.status == 2) {
					//每日巡检详情
					url = '/pages/s9Unit/daily_inspection/inspection_details/inspection_details?id=' + val.id;
				} else if (val.status == 3) {
					url = '/pagesA/fire/hidden_trouble/trouble_details/trouble_details?id=' + val.id;
				} else if (val.status == 4) {
					url = '/pagesA/fire/check_tasks/tasks_details/tasks_details?id=' + val.id;
				} else {}
				uni.navigateTo({
					url: url
				});
			},
			gotoPersonnelDetails(val) {
				this.isLoaded = false
				uni.navigateTo({
					url: '/pagesA/fire/check_record/personnel_record/personnel_record?id=' + val.id
				});
			},
			// 触底的事件
			scrolltolower() {
				// 判断是否还有下一页数据
				if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
					title: `数据加载完毕`
				});
				// 判断是否正在请求其它数据，如果是，则不发起额外的请求
				if (this.loading) return;
				this.pageNo += 1;
				this.getData(this.pageNo);
			}
			// 触底的事件
			// onReachBottom() {
			// 	// 判断是否还有下一页数据
			// 	if (this.pageNo * this.pageSize >= this.total) return uni.showToast({
			// 		title: `数据加载完毕`
			// 	})
			// 	// 判断是否正在请求其它数据，如果是，则不发起额外的请求
			// 	if (this.loading) return
			// 	this.pageNo += 1
			// 	this.getData(this.pageNo)
			// }
		}
	};
</script>
<style scoped lang="scss">
	.uni-container {
		height: 100vh;
	}

	.top {
		display: flex;
		align-items: center;
		width: 90%;
		margin-left: 5%;
		justify-content: space-between;

		.search-time {
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			margin-bottom: 20rpx;

			.time-item {
				margin-right: 20rpx;
			}

		}
	}

	::v-deep .u-icon__icon {
		top: 2px !important;
		padding-left: 3px !important;
	}

	::v-deep .uni-section-header {
		padding: 0 !important;
	}

	.bg {
		background-color: #bdbdbd;
	}
</style>