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

	<template>
	<view class="uni-container uni-container-bg">
		<!-- 搜索框 -->
		<!-- <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 :showAction="true" placeholder="请输入" bgColor="#edf6f9" borderColor="#4cb2b6"
						v-model="keyword" @search="handleQuery" @custom="handleQuery(keyword)"></u-search>
				</view>
			</uni-col>
		</uni-row> -->
		<view class="top">
			<view>
				<view class="search-time">
					<!-- <text class="time-item">开始时间:</text> -->
					<uni-datetime-picker class="time-item-check" type="daterange" v-model="datetimerange" />
				</view>
				<!-- <view class="search-time">
					<text class="time-item">结束时间:</text>
					<uni-datetime-picker class="time-item-check" type="date" v-model="endSingle" />
				</view> -->
			</view>
			<view class="search-icon">
				<u-icon name="search" color="#4CB2B6" size="30" @click="handleQuery"></u-icon>
			</view>
		</view>
		<view style="margin-bottom: 20rpx;">
			<u-tabs :list="items" @click="onClickItem" activeStyle="color:#4CB2B6" inactiveStyle="color:#000"
				:current="current" :scrollable="true" lineWidth="60" lineColor="#4CB2B6"></u-tabs>
			<view style="height: 2rpx;background-color: #E5E5E5;margin-top: 10rpx;"></view>
		</view>
		<view v-if="current == 0">
			<view class="" v-if="tableData.length>0">
				<uni-card v-for="(item, index) in tableData" :key="index" class="last-margin">
					<view class="titles">{{item.taskName}}</view>
					<view style="" v-if="item.taskContent">
						<span class="name-align-task">任务说明:</span>
						<span class="uni-ellipsis-set">{{item.taskContent?item.taskContent:''}}</span>
					</view>
					<!-- <text class="conts">{{item.taskContent}}</text> -->
					<!-- <view class="">
						<rich-text :nodes="item.taskContent?item.taskContent:''" class="conts"></rich-text>
					</view> -->
					<view class="">
						<span  class="name-align-task">接收时间:</span>
						<span>{{item.createTime}}</span>
					</view>
					<view class="an-niu">
						<text @click="addClickDetail(item.broadId)" class="detail">查看详情</text>
						<text v-if="item.isforward" class="solve forword">已转发</text>
						<text @click="addClickModify(item)" v-else class="solve">去完成</text>
						<text @click="forward(item)" class="solve">转发任务</text>
					</view>
				</uni-card>
			</view>
			<view style="text-align: center;" v-else>
				<view class="text-gray" style="padding-top: 20px;"> 暂无检查任务 </view>
			</view>
			<view>
				<image :src="Group" @click="addClick" class="tiantupian"></image>
			</view>
		</view>
		<view v-if="current == 1">
			<view class="" v-if="tableData.length>0">
				<uni-card v-for="(item, index) in tableData" :key="index" class="last-margin">
					<view class="titles">{{item.taskName}}</view>
					<view style="float: left;width: 130rpx;" v-if="item.taskContent">任务说明:</view>
					<view>
						<rich-text :nodes="item.taskContent?item.taskContent:''" class="conts"></rich-text>
					</view>
					<view class="">
						<text class="name-align-task">接收时间:</text>{{item.createTime}}
					</view>
					<view class="an-niu">
						<text @click="addClickDetail(item.broadId)" class="detail">查看详情</text>
						<text class="solve" style="background-color:#3491FA">待审核</text>
					</view>
				</uni-card>
			</view>
			<view style="text-align: center;" v-else>
				<view class="text-gray" style="padding-top: 20px;" > 暂无检查任务 </view>
				<!-- 	<view class="" style="padding-top: 40px;width: 120px;">
						    <image :src="jiezhiTime" @click="addClick" class="caogaoxiang"></image>
						</view> 草稿箱-->
			</view>
			
			<view>
				<image :src="Group" @click="addClick" class="tiantupian"></image>
			</view>
		</view>
		<!-- 已发布 -->
		<view v-if="current ==2">

			<view class="" v-if="tableData.length!=0">
				<uni-card v-for="(item, index) in tableData" :key="index" class="last-margin">
					<view class="titles">{{item.taskName}}</view>
					<view class="">
						<view style="float: left;" class="name-align-task" >任务说明:</view>
						<rich-text :nodes="item.taskContent?item.taskContent:''" class="conts"></rich-text>
					</view>
			<!-- 		<view class="">
						时间:{{item.createTime}}
					</view> -->
					<view><text class="name-align-task" >接收单位:</text>{{item.orgId}}</view>
					<view><text class="name-align-task" >接收人员:</text>{{item.receiverName}}</view>
					<view><text class="name-align-task" >发送者:</text>{{item.senderName}}</view>
					<view class="buju" style="display: flex;justify-content: space-between;align-items: center;">
						<view><text class="name-align-task" >发布时间:</text>{{item.createTime}}</view>
						<view class="an-niu">
							<text @click="showModal(item.id,item.broadId)" class="detail"
								v-if="item.taskStatus==2">审核</text>
							<text @click="addClickDetail(item.broadId)" class="solve"
								v-if="item.taskStatus==1||2">查看详情</text>
						</view>
					</view>
				</uni-card>
			</view>
			<view style="text-align: center;">
				<view class="text-gray" style="padding-top: 20px;" v-if="tableData.length==0"> 暂无检查任务 </view>
			</view>
			<view>
				<image :src="Group" @click="addClick" class="tiantupian"></image>
			</view>
			<u-modal title="审核是否通过" :show="showShenHe" showCancelButton closeOnClickOverlay confirmText="审核通过"
				cancelText="审核不通过" @confirm="confirm" :closeOnClickOverlay="true" @cancel="cancel" @close="close">
			</u-modal>
		</view>
		<!-- 草稿箱 -->

		<view v-if="current == 3">
			<!-- 			<u-list @scrolltolower="scrolltolower">
				<u-list-item> -->
			<view class="" v-if="tableData.length!=0" class="last-margin">
				<uni-card v-for="(item, index) in tableData" :key="index">
					<view class="titles">{{item.taskName}}</view>
					<view style="float: left;width: 130rpx;" v-if="item.taskContent">任务说明:</view>
					<view class="">
						<rich-text :nodes="item.taskContent?item.taskContent:''" class="conts"></rich-text>
					</view>
					<view class="">
						<text class="name-align-task">创建时间:</text>{{item.createTime}}
					</view>
					<view class="an-niu">
						<!-- 发布任务以前是查看详情 -->
						<text @click="showToasts(item.id)" class="detail">发布任务</text>
						<text @click="goAddCheck(item.id)" class="solve">修改任务</text>
						<text @click="deletes(item.id)" class="deletes">删除</text>
					</view>
				</uni-card>
			</view>
			<view style="text-align: center;">
				<view class="text-gray" style="padding-top: 20px;" v-if="tableData.length==0"> 暂无检查任务 </view>
			</view>
			<view>
				<image :src="Group" @click="addClick" class="tiantupian"></image>
			</view>
			<!-- 			</u-list-item>
			</u-list> -->
		</view>
		<!-- 归档 -->
		<view v-if="current == 4">

			<view class="" v-if="tableData.length!=0">
				<uni-card v-for="(item, index) in tableData" :key="index" class="last-margin">
					<view class="titles">{{item.taskName}}</view>
					<view style="float: left;width: 130rpx;" v-if="item.taskContent">任务说明:</view>
					<view class="">
						<rich-text :nodes="item.taskContent?item.taskContent:''" class="conts"></rich-text>
					</view>
					<view class="">
						<text class="name-align-task">完成时间:</text>{{item.createTime}}
					</view>
					<view class="an-niu">
						<text @click="addClickDetail(item.broadId)" class="detail">查看详情</text>
					</view>
					
				</uni-card>
			</view>
			<view style="text-align: center;">
				<view class="text-gray" style="padding-top: 20px;" v-if="tableData.length==0"> 暂无检查任务 </view>
			</view>
			<view>
				<image :src="Group" @click="addClick" class="tiantupian"></image>
			</view>
		</view>
		<!-- 多选closeable closeOnClickOverlay--点击遮罩层不可关闭检查项的弹出内容选中 ，选择单位-->
		<!-- 支队大队进来转发任务显示单位，不能删 -->
		<!-- 		<u-popup :show="checkboxShow2" :round="10" @close="checkboxShow2=false" style="position: relative;">
			<view style="width: 100%;position: absolute;left:0;bottom:30rpx;z-index: 9999;">
				<uni-row>
					<uni-col :span='12'>
						<u-button shape="circle" type="primary" color="#4CB2B6" text="确定" @click="checkboxConfirm2">
						</u-button>
					</uni-col>
					<uni-col :span='12'>
						<u-button type="primary" plain color="#4CB2B6" text="取消" shape="circle"
							@click="checkboxCancel2">
						</u-button>
					</uni-col>
				</uni-row>
			</view>
			<view class="page-body" :style="'height:' + height + 'px'">
				<scroll-view class="nav-left" scroll-y :style="'height:' + height + 'px'" :scroll-top="scrollLeftTop"
					scroll-with-animation>
					<view class="nav-left-item" :class="index == categoryActive ? 'active' : ''"
						v-for="(item, index) in list2" @click="categoryClickMain(index,item)" :key="index">
						{{ `单位${item.id}` }}
					</view>
				</scroll-view>
				<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll"
					:style="'height:' + height + 'px'" scroll-with-animation>
					<view v-for="(item, index) in list2" :key="index" class="box">
						<view style="height: 60rpx;font-size: 32rpx;color:#000;font-weight: 600;padding: 25rpx;">
							{{ `单位${item.id}` }}
						</view>
						<view class="nav-right-item">
							<u-checkbox-group size='20' iconSize='18' placement="row" iconPlacement='right'
								v-model="items.checkedList2" v-for="(items, i) in item.orgDOList" :key="i"
								@change="checkboxChange2(items.id,$event)">
								<u-checkbox activeColor="green" :customStyle="{marginBottom: '5px'}"
									:label="items.orgName" :name="items.id">
								</u-checkbox>
							</u-checkbox-group>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup> -->
		<!-- 单位进来转发任务显示人员 -->
		<u-popup :show="checkboxShow2" :round="10" @close="checkboxShow2=false" style="position: relative;"
			mode="center">
			<view style="width: 90vw;padding: 10px;">
				<text class="text-xl">检查人员</text>
				<view class="" class="person-forward">
					<u-checkbox-group v-model="item.checkboxValue1" v-for="(item, index) in personInfo" :key="index"
						placement="column" @change="checkboxChange2(item.user_id,$event)" activeColor="#4CB2B6">
						<u-checkbox :customStyle="{marginBottom: '8px'}" :label="item.nickname" :name="item.user_id">
						</u-checkbox>
					</u-checkbox-group>

				</view>
				<view class="flex flex-direction-row " style="margin: 30rpx 0;">
					<u-button shape="circle" type="primary" color="#4CB2B6" text="确定" @click="checkboxConfirm2"
						customStyle="margin-right:20px;padding:0 30px">
					</u-button>
					<u-button type="primary" plain color="#4CB2B6" text="取消" shape="circle" @click="checkboxCancel2"
						customStyle="padding:0 30px">
					</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 加载中 -->
		<isLodingModel></isLodingModel>
	</view>
</template>
<script>
	import {
		getCheckActiveList,
		getCheckActivePendList, // 主动检查提交历史列表
		draftTask, //获取草稿箱任务列表
		taskList, //获取除草稿箱以外的列表
		saveCheckRelease, //发布任务
		deleteTask, //删除任务
		addCheckActiveCompany, //获取单位
		checkSubmitForwardTask, //确认转发任务
		checkGetPerson, //单位转发任务获取人员
		verifytask //审核
	} from "@/api/check_active";
	import {
		shijianc
	} from '@/utils/common.js'
	import config from '@/config'
	const baseUrlImg = config.baseUrlImg
	// import jiezhiTime from '@/static/images/checkActive/jiezhiTime.png'; //暂时用的草稿箱图片
	export default {
		data() {
			return {
				startSingle: '',
				endSingle: '',
				datetimerange:[],
				checkedList2: [], //检查单位已选择列表
				list2: [], //选择单位项目的数据
				Group: `${baseUrlImg}/checkActive/Group.png`,
				// jiezhiTime: jiezhiTime, //暂时用的草稿箱图片
				current: 0,
				items: [{
					name: '待完成'
				}, {
					name: '已完成'
				}, {
					name: '已发布'
				}, {
					name: '草稿箱'
				}, {
					name: '归档'
				}],
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageNo: 1,
				// 数据总量
				total: 0,
				taskStatus: 0, //任务状态，0代表未执行刚建好，可修改，1表示已执行不能改
				// tableData数据加载中
				loading: false,
				// 初始化时搜索框的值
				keyword: '',
				// 开始时间与结束时间
				formData: {
					start: '请选择开始时间',
					end: '请选择结束时间',
				},
				showtimeStart: false,
				showtimeEnd: false,
				showShenHe: false,
				checkboxShow2: false, //待完成转发弹窗
				taskType: '',
				formdata: {
					pageNo: 1,
					pageSize: 10,
					creator: this.$store.state.user.id,
					taskStatus: 0,
					taskType: '',
					taskName: ''
				},
				ids: '', //当前点击转发任务的id
				FormDataTask: {
					"broadId": 0,
					"deptId": [],
					"id": 0,
					"orgId": [],
					"sender": this.$store.state.user.id,
					"receiver": [],
					"status": 0,
					"taskContent": "",
					"taskName": "",
					"taskStatus": 0,
					"taskType": "" //任务类型 1对应主动检查
				},
				personInfo: [], //转发任务的人员信息
				taskShen: 0, //审核通过状态改为3，不通过1
				taskId: 0,
				broad: 0,
				checkboxValue1: [], // u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
				//侧边栏联动
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				arr: [0, 584, 1168, 1752, 2336, 2805, 3274, 3858, 4442, 4911, 5380, 5734, 6203, 6672,
					7017
				], //初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51, //49行会计算出新值进行覆盖
				navLeftHeight: 0, //左边scroll-view 内层nav的总高度
				diff: 0, //左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight: 0 //如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
			}
		},
		watch: {
			loading: {
				handler(newLength, oldLength) {
					this.$modal.isLoadingModel(this.loading)
				},
				immediate: true
			}
		},
		// 在 vue页面，向起始页通过事件传递数据
		onLoad: function(option) {
			console.log(option, 'optionoptionoption');
			uni.setNavigationBarTitle({
				title: option.title
			})
			if (option.type) {
				this.FormDataTask.taskType = option.type
				this.taskType = option.type
			}

			if (option.current) {
				this.current = option.current
			}
		},
		onShow() {
			this.checkedTotal(this.pageNo)
			this.tableData = []
			this.getData(this.formData.pageNo)
			this.height = uni.getSystemInfoSync().windowHeight - this.tabBarHeight //设置侧边联动的高
		},
		mixins: [uni.$u.mixin],
		methods: {
			//搜索
			/** 搜索按钮操作 */
			/** 搜索按钮操作 */
			handleQuery() {
				// const end = new Date(this.endSingle).getTime()
				// const start = new Date(this.startSingle).getTime()
				// if (!this.endSingle && !this.startSingle) {
				// 	this.pageNo = 1;
				// 	this.tableData=[]
				// 	this.getData(1);
				// } else if (this.endSingle && this.startSingle && start <= end) {
				// 	// } else{
					this.pageNo = 1;
					this.tableData=[]
					this.getData(1);
				// } else if (start > end) {
				// 	this.$modal.msgError('结束时间不能小于事件时间')
				// } else {
				// 	this.$modal.msgError('请选择事件时间和结束时间')
				// }

			},
			//popup检查单位确定============
			checkboxConfirm2() {
				// this.checkedList2.map(v => {  //选择检查单位，不能删，支队和大队时放开
				// 	v.map(i => {
				// 		this.FormDataTask.orgId.push(i)
				// 	})
				// })
				this.FormDataTask.receiver = this.checkedList2 //选择检查人员，不能删，支队和大队时放开
				checkSubmitForwardTask(JSON.stringify(this.FormDataTask)).then(response => {

					if (response.data) {
						this.$modal.msg('转发成功')
						this.checkboxShow2 = false
						this.tableData = []
						this.getData(this.pageNo)
					} else {
						this.$modal.msgError(response.msg)
					}
				})

			},
			//popup取消
			checkboxCancel2() {
				this.checkboxShow2 = false
				this.checkedList2 = []
			},
			checkboxChange2(i, n) {
				if (i && n.length != 0) {
					this.checkedList2.push(i)
				} else if (i && n.length == 0) {
					this.checkedList2 = this.checkedList2.filter(item => item != i)
				}

			},
			checkedTotal(pageNo, value = '') {
				// this.loading = true
				this.pageNo = pageNo
				const form = {
					// pageNo: this.pageNo,
					// pageSize: this.pageSize,
					userId: this.$store.state.user.id
				}
				addCheckActiveCompany( //获取所属单位
					form
				).then(response => {
					this.list2 = response.data
				});
			},
			//========

			close() {
				this.showShenHe = false
			},
			//发布任务弹框
			showToasts(val) {
				saveCheckRelease({
					id: val
				}).then(response => {
					if (response.data) {
						this.tableData = []
						this.getData(this.pageNo)
						setTimeout(() => {
							uni.showToast({
								title: `发布成功`
							})
						}, 500)
						this.current = 2
						this.getData(this.pageNo)
					}
				})
			},
			//转发
			forward(val) { //展示转发的弹出层
				this.ids = val.id //当前点击任务的id
				this.checkboxShow2 = true
				this.FormDataTask.broadId = val.broadId
				this.FormDataTask.id = this.ids
				this.FormDataTask.taskName = val.taskName
				this.FormDataTask.taskStatus = val.taskStatus
				this.FormDataTask.taskContent = val.taskContent
				this.FormDataTask.orgId.push(val.orgId)
				checkGetPerson({
					orgId: val.orgId
				}).then(response => {
					this.personInfo = response.data
				})
			},
			//草稿箱删除
			deletes(val) {
				deleteTask({
					id: val
				}).then(response => {
					if (response.code == 0) {
						this.tableData = []
						this.getData(this.pageNo)
						uni.showToast({
							title: '删除成功',
							icon: "none"
						}, 200)
					}
				})
			},

			//审核模态框
			showModal(taskId, broad) {
				this.showShenHe = true
				this.taskId = taskId
				this.broad = broad
			},

			//审核通过
			confirm() {
				this.taskShen = 3
				this.showShenHe = false
				verifytask({
					taskId: this.taskId,
					broadId: this.broad,
					status: this.taskShen
				}).then(response => {
					if (response.data) {
						this.tableData = []
						this.current = 4
						this.getData(this.pageNo)
					}
				})
			},
			//审核不通过	
			cancel() {
				this.taskShen = 1
				this.showShenHe = false
				verifytask({
					taskId: this.taskId,
					broadId: this.broad,
					status: this.taskShen
				}).then(response => {
					if (response.data) {
						this.tableData = []
						this.getData(this.pageNo)
					}
				})
			},
			//修改任务
			goAddCheck(val) {
				console.log(this.taskType, 'this.taskType修改');
				uni.navigateTo({
					url: `/pagesA/fire/check_active/add_check/add_check?id=${val}&type=${this.taskType}`
				})
			},
			//去完成
			addClickModify(val) {
				uni.navigateTo({
					url: `/pagesA/fire/check_active/check_implement/check_implement?id=${val.id}&broadId=${val.broadId}&orgId=${val.orgId}&type=${this.taskType}`,
					// url:'/pagesA/fire/xiangjiceshi/xiangjiceshi',
					success: function(res) {
						res.eventChannel.emit('acceptDataFromOpenerPage', val);
					}
				})
			},
			//查看详情
			addClickDetail(val) {
				uni.navigateTo({
					url: `/pagesA/fire/check_active/check_list/check_list?id=${val}&current=${this.current}`,
					success: function(res) {
						res.eventChannel.emit('acceptDataFromOpenerPage', val);
					}
				})
			},
			navigateBack() {
				uni.navigateBack()
			},
			// tab头部点击
			onClickItem(e) {
				if (this.current !== e.index) {
					this.current = e.index
				}
				this.tableData = []
				this.pageNo = 1
				this.getData(this.pageNo)
			},
			// 获取数据
			getData(pageNo, value = '') {
				this.loading = true;
				if (this.current == 3) { //获取草稿箱内的列表
					this.formdata = {
						pageNo: 1,
						pageSize: 10,
						userId: this.$store.state.user.id,
						taskStatus: 0,
						taskType: this.taskType,
						taskName: this.keyword,
					}
					this.formdata.pageNo = pageNo ? pageNo : 1;
					this.formdata.startTime=this.datetimerange[0]?this.datetimerange[0]+' 00:00:00':'';
					this.formdata.endTime=this.datetimerange[1]?this.datetimerange[1]+' 23:59:59':''
					const json = JSON.stringify(this.formdata)
					draftTask(json).then(response => {
						// 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
						this.tableData = [...this.tableData, ...response.data.list]
						this.tableData.map(i=>{
							i.createTime=i.createTime?shijianc(i.createTime):''
						})
						this.total = response.data.total
						this.loading = false;

					})
				} else {
					this.loading = true;
					if (this.current == 0) {
						this.formdata = {
							pageNo: 1,
							pageSize: 10,
							taskStatus: 1,
							receiver: this.$store.state.user.id,
							taskType: this.taskType,
							taskName: this.keyword,
						}
						this.List(pageNo)

					} else if (this.current == 1) {
						this.formdata = {
							pageNo: 1,
							pageSize: 10,
							taskStatus: 2,
							receiver: this.$store.state.user.id,
							taskType: this.taskType,
							taskName: this.keyword,
						}
						console.log(this.formdata, this.keyword, '=========');
						this.List(pageNo)
					} else if (this.current == 2) {
						this.formdata = {
							pageNo: 1,
							pageSize: 10,
							taskStatus: 1,
							sender: this.$store.state.user.id,
							taskType: this.taskType,
							taskName: this.keyword,
						}
						console.log(this.formdata, this.keyword, '=========');
						this.List(pageNo)
						this.formdata.taskStatus = 2

						this.List(pageNo)
					} else if (this.current == 4) {
						this.formdata = {
							pageNo: 1,
							pageSize: 10,
							taskStatus: 3,
							taskType: this.taskType,
							taskName: this.keyword,
						}
						this.List(pageNo)


					}

				}
				// this.loading = false

			},
			List(pageNo) { //getData共用的接口
				this.formdata.pageNo = pageNo ? pageNo : 1;
				this.formdata.startTime=this.datetimerange[0]?this.datetimerange[0]+' 00:00:00':'';
				this.formdata.endTime=this.datetimerange[1]?this.datetimerange[1]+' 23:59:59':''
				const json = JSON.stringify(this.formdata)
				taskList(json).then(response => {
					this.tableData = [...this.tableData, ...response.data.list]
					this.tableData.map(i=>{
						i.createTime=i.createTime?shijianc(i.createTime):''
					})
					this.total = response.data.total
					this.loading = false;
				})
			},
			onClick(val) {
				uni.navigateTo({
					url: '/pagesA/fire/check_active/check_details/check_details?id=' + val.id,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(val) {},
					},
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', val)
					}
				})
			},

			addClick() {
				console.log(this.taskType, 'this.taskType新增');
				uni.navigateTo({
					url: `/pagesA/fire/check_active/add_check/add_check?type=${this.taskType}`

				})

			},
			//侧边栏导航联动
			getHeightList() {
				let _this = this;
				let selectorQuery = uni.createSelectorQuery();
				selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
					_this.leftItemHeight = rects[0].height;
					_this.navLeftHeight = _this.leftItemHeight * this.list.length;
					_this.diff = _this.navLeftHeight - _this.height;
				});
				selectorQuery.selectAll('.box').boundingClientRect(function(rects) {
					let arr = [0];
					let top = 0;
					if (rects) {
						rects.forEach(function(rect) {
							top += rect.height;
							arr.push(top);
						});
					};
					_this.arr = arr;
				}).exec();
			},
			scroll(e) {
				let _this = this;
				if (this.timeoutId) {
					clearTimeout(this.timeoutId);
				}
				this.timeoutId = setTimeout(function() {
					//节流
					_this.scrollHeight = e.detail.scrollTop + 1 + _this.height / 2;
					//+1不要删除，解决最后一项某种情况下翻到底部，左边按钮并不会切换至最后一个
					//若想使切换参考线为屏幕顶部请删除 _this.height/2
					for (let i = 0; i < _this.arr.length; i++) {
						let height1 = _this.arr[i];
						let height2 = _this.arr[i + 1];
						if (!height2 || (_this.scrollHeight >= height1 && _this.scrollHeight < height2)) {
							_this.categoryActive = i;
							_this.diff > 0 && (_this.scrollLeftTop = Math.round((_this.categoryActive * _this
								.diff) / (this.list.length - 1)));
							return false;
						}
					}
					_this.categoryActive = 0;
					_this.timeoutId = undefined;
				}, 10);
			},
			categoryClickMain(index, item) {
				this.categoryActive = index;
				this.scrollTop == this.arr[index] ? (this.scrollTop = this.scrollTop + 1) : (this.scrollTop = this.arr[
					index]); //防止两次相等造成点击不触发滚动时间
			}

			// 触底的事件
			// scrolltolower() {
			// 	// 判断是否还有下一页数据
			// 	if (this.formdata.pageNo * this.formdata.pageSize >= this.total) return uni.showToast({
			// 		title: `数据加载完毕`
			// 	})
			// 	// 判断是否正在请求其它数据，如果是，则不发起额外的请求
			// 	if (this.loading) return
			// 	this.formdata.pageNo += 1
			// 	this.getData(this.formdata.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>
	page {
		background-color: #F5F7F9;
	}
</style>
<style lang="scss" scoped>
	body {
		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;
	}

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

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

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

		.detail {
			width: 72px;
			height: 60rpx;
			border-radius: 30px;
			background-color: #F7C41E;
			margin-right: 20rpx;
			text-align: center;
			line-height: 60rpx;
		}

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

		.forword {
			//已转发
			background-color: #BBBBBB;

		}

		.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,
	.caogaoxiang {
		width: 110rpx;
		height: 110rpx;
		position: fixed;
		right: 15px;
		bottom: 80rpx;
	}

	.caogaoxiang {
		bottom: 150rpx;
		width: 120rpx;
		right: 40rpx;
		height: 120rpx;
	}

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

	.conts {
		font-size: 12px;
		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;
		}


	}

	//侧边联动
	/deep/.page-body {
		display: flex;
		background: #fff;
		overflow: hidden;
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 25%;
		background: #fafafa;
	}

	.nav-left-item {
		height: 100upx;
		border-right: solid 1px #f1f1f1;
		border-bottom: solid 1px #f1f1f1;
		font-size: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-left-item:last-child {
		border-bottom: none;
	}

	.nav-right {
		width: 75%;
	}

	/deep/.nav-right-item {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	/deep/.u-checkbox {
		width: 80% !important;
		margin-bottom: 30rpx !important;
	}

	/deep/ .u-checkbox-group {
		width: 33%;
		// justify-content: flex-end;
	}

	.box {
		display: block;
		overflow: hidden;
		border-bottom: 20upx solid #f3f3f3;
		/* min-height: 100vh; */
		/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
	}

	.box:last-child {
		border: none;
		min-height: 100vh;
	}

	.u-checkbox-group--row.data-v-3d1b15f2 {
		display: flex;
		flex-direction: row;
	}

	.nav-right-item {
		margin-top: 20px;
		float: left;
		padding: 11upx;
		font-size: 28upx;
		background: #fff;

		/deep/.u-checkbox__icon-wrap[data-v-532d01c7],/deep/.u-checkbox__icon-wrap {
			//复选框的样式
			margin: 0 20rpx;
		}

		/deep/ uni-view[data-v-3d1b15f2] {
			//复选框上线的间距
			margin: 20rpx 0 !important;
		}

		// /deep/ .u-checkbox__icon-wrap--square{
		// 	margin: 20rpx;
		// }
		.u-checkbox-label--right[data-v-532d01c7],.u-checkbox-label--right {
			margin-right: 40rpx;

		}
	}

	.nav-right-item image {
		width: 150upx;
		height: 150upx;
	}

	.active {
		font-weight: 700;
		color: #274647;
		background: #fff;
		border-right: 0;
	}

	::-webkit-scrollbar {
		/*取消小程序的默认导航条样式*/
		width: 0;
		height: 0;
		color: transparent;
	}

	/deep/.u-button[data-v-3bf2dba7],
	/deep/.u-button.data-v-3bf2dba7,/deep/.u-button {
		//按钮大小
		width: 33% !important;
	}

	//转发任务人员弹出
	.u-popup-slot {
		min-width: 300px;
		min-height: 400px;
		position: relative;

		.u-popup-slot-item {
			@include flex;
			justify-content: space-around;
			flex-direction: column;
			align-items: flex-start;
			padding: 0 40rpx;
		}

		.title {
			padding: 40rpx;
			color: #383838;
			font-size: 16px;
			font-weight: 600;

		}

		.sure-or-cancel {
			display: flex;
			position: absolute;
			bottom: 40px;
			left: 21%;
		}
	}

	.person-forward {
		padding-top: 40rpx;
		display: flex;
		flex-wrap: wrap;
	}

	/deep/.u-checkbox__icon-wrap--square[data-v-532d01c7],
	/deep/.u-checkbox__icon-wrap--square.data-v-532d01c7,/deep/.u-checkbox__icon-wrap--square {
		//转发复选框的颜色
		border-color: #4CB2B6 !important;
	}

	.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;
			}
		}
	}
</style>