App.vue

<template>
	<div class="fullPage touchmove">
		<div v-if="picUrl">
			<!-- <img mode="widthFix" style="position:relative;width:100vw;height: 50vwpx;" :src="picUrl"/> -->
			<canvas id="painter" ref="captureCanvas"></canvas>
			<div class="template-name-box">
				<div class="template-name-content">
					<span class="template-name-title">模板名称：</span>
					<van-cell :title="templateNameDefault" @click="show = true" is-link />
					<van-popup v-model:show="show" position="bottom">
						<van-picker :columns="templateNameList" @confirm="onConfirm" @cancel="onCancel" />
					</van-popup>
				</div>
				<van-button class="template-btn" plain type="primary" size="small" @click="templateClick"> + 问题项</van-button>
			</div>
			<div class="template-select-box" v-if="checkboxRefsShow.length > 0">
				<div class="template-select-list">
					<van-tag class="template-select-one" v-for="(item, index) in checkboxRefsShow" :key="index" closeable
						size="large" type="primary" @close="deleteTemplate(item,index)">
						{{item.name}}
					</van-tag>
				</div>
			</div>
			<van-popup v-model:show="templateDialogShow" position="bottom" class="template-list-model" closeable round>
				<div class="template-list-box">
					<div class="template-list-title">添加问题项</div>
					<div class="template-search-box">
						<form action="/">
						  <van-search v-model="templateSearch" placeholder="请输入搜索问题项名称" @search="templateSearchChange"/>
						</form>
					</div>
					<div class="template-list">
						<van-checkbox-group shape="square" v-model="checked" ref="checkboxGroup">
							<van-collapse v-model="templatecollapseNames">
							  <van-collapse-item v-for="(item, index) in templateGroupList" :key="item.id" :title="item.name" :name="item.id">
										<van-cell-group inset>
											<van-cell v-for="(one, ind) in item.sopProjects" center clickable :key="one.id" :title="one.name" @click="toggle(ind)">
												<template #right-icon>
													<van-checkbox :name="one.id" :ref="el => checkboxRefs[one.allIndex] = el" @click.stop />
												</template>
											</van-cell>
										</van-cell-group>
							  </van-collapse-item>
							</van-collapse>
						</van-checkbox-group>
					</div>
					<van-button class="template-list-submit" round block type="primary" @click="templateSubmit">确认</van-button>
				</div>
			</van-popup>
			<div class="formBox">
				<van-field v-model="message" rows="2" autosize label="备注" type="textarea" placeholder="请输入备注" />
				<van-field name="radio" label="是否需要整改">
					<template #input>
						<van-radio-group v-model="isRectify" direction="horizontal">
							<van-radio name="1">需要</van-radio>
							<van-radio name="2">不需要</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<van-field v-show="isRectify==1" v-model="rectificationUserName" is-link readonly name="picker" label="整改人"
					placeholder="点击选择整改人" @click="showRectification = true" />
				<van-popup v-model:show="showRectification" position="bottom">
					<van-picker :columns="userNameList" @confirm="onUserConfirm" @cancel="showRectification = false" />
				</van-popup>
				<div style="padding:15px;display: flex;align-items: center;justify-content: space-around;">
					<van-button style="width: 45%;" round block @click="goBackVideo">返回</van-button>
					<van-button style="width: 45%;" round block type="primary" @click="submitContent">提交</van-button>
				</div>
			</div>
		</div>
		<div v-else>
			<livePlayer ref="vionPlayer" @screenshotEnd="screenshotEnd"></livePlayer>
			<div class="tour-btns" v-if="paramObj.type=='titem'">
				<van-button @click="navBackTour" type="primary">返回上一页</van-button>
				<van-button @click="goCaptureImg" type="primary">确认并截图</van-button>
			</div>
			<div class="tour-btns" v-else-if="paramObj.type=='view'">
				<van-button block @click="navBack" type="primary">查看其他监控点</van-button>
			</div>
			<div class="tour-btns1" v-else>
				<div class="box gate-name-box">
					<span @click="navBack" class="" style="display: inline-flex;align-items: center;">
						<span class="text-ellipsis">{{gateEditName}}</span>
						<van-icon class="icon" name="play" />
					</span>
					<img src="../src/assets/edit.png" alt="" class="gate-name-edit-img" @click="gateEdit">
				</div>
				<div class="box box1">
					<span v-if="bookmark" @click="delCollectGate">
						<van-icon class="iconMargin" color="#F7B500" name="star" />收藏
					</span>
					<span v-else @click="collectGate">
						<van-icon class="iconMargin" name="star-o" />收藏
					</span>
					<span @click="goCaptureImg">
						<van-icon class="iconMargin" name="photograph" />巡检
					</span>
				</div>
			</div>
			<!-- 监控点选择器 -->
			<van-popup v-model:show="pointPopupShow" round position="bottom">
				<van-picker :default-index="pointListIndex" :title="paramObj.mallName" :columns="pointList" :option-height="40" @confirm="pointConfirm"
					@cancel="pointPopupShow = false" />
			</van-popup>
			<!-- 监控场景名称修改 -->
			<van-dialog use-slot title="监控点信息修改" v-model:show="gateEditShow" show-cancel-button @cancel="gateEditHide" @confirm="gateEditSave" :confirm-button-disabled="gateEditName.trim() == ''">
				<div style="margin:20px 10px;">
					<van-cell-group>
					  <van-field v-model="gateEditName"  placeholder="请输入监控点名称">
							<template #label>
								<span style="display: inline-flex;align-items: center;">
									监控点名称
									<span class="grop-name-required">*</span>
								</span>
							</template>
						</van-field>
					</van-cell-group>
					<van-cell-group style="display: flex;align-items: center;">
						<van-field style="display: inline-flex;" v-model="gateEditGroup" label="所属分组" placeholder="请输入分组名称">
						</van-field>
						<van-button style="width: 14vw;" size="small" type="primary" @click="groupPicker = true">选择</van-button>
					</van-cell-group>
					<div class="group-remark">
						<div>所属分组信息允许为空。</div>
						<div>新分组可直接输入名称自动创建，已有分组信息从列表中选择。</div>
					</div>
				</div>
			</van-dialog>
			<!-- 监控场景分组选择 -->
			<van-popup v-model:show="groupPicker" round position="bottom">
			  <van-picker :default-index="gateEditGroupIndex" :columns="groupList" @cancel="groupPicker = false" @confirm="groupChange" />
			</van-popup>
			<!-- 监控场景添加分组 -->
			<van-dialog use-slot title="新增分组" v-model:show="groupAddShow" show-cancel-button @cancel="groupAddHide" @confirm="groupAddSave" :confirm-button-disabled="groupAddName.trim() == ''">
				<div style="margin:20px 10px;">
					<van-cell-group>
					  <van-field v-model="groupAddName" required label="分组名称" placeholder="请输入分组名称" />
					</van-cell-group>
				</div>
			</van-dialog>
		</div>
	</div>
</template>
<script setup>
	import {
		reactive,
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import {
		Toast
	} from 'vant';
	import livePlayer from '@/components/extension/index.vue';
	import shopTour from '@/components/shopTour.vue';
	//import vconsole from 'vconsole';
	if (process.env.NODE_ENV !== 'production') {
		//new vconsole();
	}
	/*获取 Url 参数 S*/
	import parse from 'url-param-parser';
	let url = 'https://store.keliuyun.com/video/?userId=8840&atoken=d959778d-904f-468e-99dd-2193998ffda1&type=undefined&id=632&name=会议室门口01&mallId=9217&mallName=河南分公司&bookmark=false&channelNo=4&deviceSerial=F16423875&gateUnid=cf21f4a8-65c6-11ee-837e-00163e143ecd&ptzEnable=0&aiChannelId=&mallOrgName=办公室&accountId=337&terminalType=devtools&newLevel=' // 萤石

	const paramObj = parse(url).search || {}
	// const paramObj = parse(window.location.href).search || {}
	/********************************/
	paramObj.name = paramObj.name?decodeURIComponent(paramObj.name):'';
	paramObj.mallName = paramObj.mallName?decodeURIComponent(paramObj.mallName):'';
	paramObj.mallOrgName = paramObj.mallOrgName?decodeURIComponent(paramObj.mallOrgName):'';
	document.title = paramObj.name;
	window.localStorage.setItem('atoken', paramObj.atoken);
	window.localStorage.setItem('lang', 'zh_CN');
	/*获取 Url 参数 E*/
	import tourApi from '@/api';
	//var data = reactive(v);
	const dataURLtoFile = (dataurl, filename, filetype) => {
		var arr = dataurl.split(","),
			bstr = atob(arr[1]),
			n = bstr.length,
			u8arr = new Uint8Array(n);
		while (n--) {
			u8arr[n] = bstr.charCodeAt(n);
		}
		return new File([u8arr], filename, {
			type: filetype
		});
	}
	const navBack = () => {
		pointPopupShow.value = true
		console.log(paramObj)
	};
	
	// 监控场景编辑
	const gateEditShow = ref(false)
	const groupPicker = ref(false)
	const gateEditName = ref('')
	const gateEditGroup = ref('')
	const gateEditGroupIndex = ref(0)
	gateEditName.value = paramObj.name
	gateEditGroup.value = paramObj.mallOrgName
	// 监控场景编辑弹框显示
	const gateEdit = () => {
		gateEditName.value = paramObj.name
		gateEditGroup.value = paramObj.mallOrgName
		gateEditShow.value = true
	};
	// 监控场景编辑弹框关闭
	const gateEditHide = () => {
		gateEditName.value = paramObj.name
		gateEditGroup.value = paramObj.mallOrgName
		gateEditShow.value = false
	};
	// 监控场景编辑保存
	const gateEditSave = () => {
		let par = {
			id:paramObj.id,
			mallId:paramObj.mallId,
			aiChannelId:paramObj.aiChannelId?paramObj.aiChannelId:'',
			name:gateEditName.value,
			mallOrgName:gateEditGroup.value,
		}
		tourApi.editPatrolGate(par).then(res => {
			if (res.data.code == 200) {
				// 更新监控点名称
				gateEditShow.value = false
				paramObj.name = gateEditName.value
				paramObj.mallOrgName = gateEditGroup.value
				document.title = paramObj.name;
				reqPatrolGateList()
				reqGateGroupList()
			} else {
				Toast.fail('修改失败');
			}
		})
	};
	// 监控场景分组修改
	const groupChange = (val) => {
		gateEditGroup.value = val.name
		gateEditGroupIndex.value = (groupList.value.filter(v => v.text == gateEditGroup.value)[0]).index
		groupPicker.value = false
	};
	
	// 获取分组列表
	const groupList = ref([])
	const reqGateGroupList = () => {
		tourApi.getDeviceGroupList(paramObj.mallId).then(res => {
			if (res.data.code == 200) {
				let list = res.data.data ? res.data.data : [];
				for(let i = 0; i < list.length; i++){
					list[i].text = list[i].name
					list[i].value = list[i].id
					list[i].index = i
				}
				groupList.value = list;
				gateEditGroupIndex.value = gateEditGroup.value?(groupList.value.filter(v => v.text == gateEditGroup.value)[0]).index:0;
			}
		})
	}
	
	//监控场景添加分组
	const groupAddShow = ref(false)
	const groupAddName = ref('')
	// 监控场景添加分组弹框显示
	const groupAdd = () => {
		groupAddName.value = ''
		groupAddShow.value = true
	};
	// 监控场景添加分组弹框关闭
	const groupAddHide = () => {
		groupAddShow.value = false
	};
	// 监控场景添加分组保存
	const groupAddSave = () => {
		// console.log('保存')
		// 更新分组名称
		gateEditGroup.value = groupAddName.value
		groupAddShow.value = false
	};
	
	// 获取检查项列表
	const pointPopupShow = ref(false)
	const pointList = ref([])
	const pointListIndex = ref(0)
	const reqPatrolGateList = () => {
		tourApi.getPatrolGateList({
			pageNum: 1,
			pageSize: 99999,
			mallId: paramObj.mallId,
		}).then(res => {
			// console.log(res)
			if (res.data.code == 200) {
				let list = res.data.data && res.data.data.list ? res.data.data.list : [];
				for(let i = 0; i < list.length; i++){
					list[i].text = list[i].name
					list[i].value = list[i].id
					list[i].index = i
				}
				pointList.value = list;
				pointListIndex.value = (pointList.value.filter(v => v.text == paramObj.name)[0]).index;
				// console.log(list)
				// console.log(pointList.value)
			}
		})
	}
	const pointConfirm = (row) => {
		console.log(row)
		paramObj.id = row.id
		paramObj.name = row.name
		gateEditName.value = paramObj.name
		paramObj.bookmark = row.bookmark
		paramObj.mallOrgName = row.mallOrgName
		paramObj.gateUnid = row.unid
		document.title = paramObj.name;
		pointListIndex.value = (pointList.value.filter(v => v.text == paramObj.name)[0]).index;
		pointPopupShow.value = false
		vionPlayer.value.playWebVideo(paramObj);
	}
	const navBackTour = () => {
		wx.miniProgram.navigateBack();
	}
	
	const bookmark = ref(paramObj.bookmark)
	const collectGate = () => {
		tourApi.setBookmark({
			userId: paramObj.userId,
			patrolGateIds: [paramObj.id]
		}).then(res => {
			if (res.data.code == 200) {
				bookmark.value = true;
				return Toast.success('收藏成功');
			}
		})
	}
	const delCollectGate = () => {
		tourApi.delBookmark({
			userId: paramObj.userId,
			patrolGateIds: [paramObj.id]
		}).then(res => {
			if (res.data.code == 200) {
				bookmark.value = false;
				return Toast.success('取消收藏成功');
			}
		})
	}

	const show = ref(false);
	const showPopup = () => {
		show.value = true;
	};
	const checked = ref([]);
	const onConfirm = (value, index) => {
		console.log(value, index)
		templateNameDefault.value = value;
		checkboxRefsShow.value = [];
		checkboxRefs.value = [];
		checked.value = []
		templateSearch.value = ''
		if (index > 0) {
			getPatrolTemplateOne(templateList.value[index].id)
		} else {
			templateGroupList.value = []
			associateData.value.forEach(item => {
				templateGroupList.value.push(item)
			})
		}
		show.value = false;
	};
	const onCancel = () => {
		show.value = false;
	}
	const checkboxRefs = ref([]);
	const checkboxRefsShow = ref([]);
	const templateSearch = ref('');
	const templateClick = (val) => {
		templateDialogShow.value = true;
	}
	const templatecollapseNames = ref([]);
	const templateSearchChange = (val) => {
		console.log(val)
		templateSearch.value = val;
		let allList = templateItemList.value
		let groupList = {}
		allList.forEach((item,index)=>{
			item.allIndex = index
			if(val==''||(val!=''&&item.name.indexOf(val) != -1)) {
				if(groupList[item.sopTypeId]) {
					groupList[item.sopTypeId].sopProjects.push(item)
				} else {
					groupList[item.sopTypeId] = {
						id:item.sopTypeId,
						name:item.sopTypeName,
						sopProjects:[item]
					}
				}
			}
		})
		templateGroupList.value = []
		templatecollapseNames.value = []
		for(let i in groupList) {
			templateGroupList.value.push(groupList[i])
			templatecollapseNames.value.push(groupList[i].id)
		}
	}
	
	const toggle = (index) => {
		checkboxRefs.value[index].toggle();
	}
	const templateSubmit = (index) => {
		templateDialogShow.value = false;
		if (checked.value && checked.value.length > 0) {
			checkboxRefsShow.value = []
			checked.value.forEach(item => {
				let sopItem = templateItemList.value.find(childItem => item == childItem.id);
				checkboxRefsShow.value.push({
					"id": sopItem.id,
					"name": sopItem.name,
				})
			})
		}
	}
	const deleteTemplate = (item, index) => {
		checkboxRefsShow.value.splice(index, 1)
		checked.value.splice(index, 1)
	}


	const message = ref();
	const isRectify = ref("1")
	const showRectification = ref(false)
	const rectificationUserName = ref('')
	const onUserConfirm = (value) => {
		showRectification.value = false;
		rectificationUserName.value = value
	};
	const goBackVideo = () => {
		message.value = '';
		rectificationUserName.value = '';
		checked.value = [];
		checkboxRefsShow.value = [];
		checkboxRefs.value = [];
		picUrl.value = '';
		setTimeout(() => {
			vionPlayer.value.playWebVideo(paramObj);
		}, 200)
	}
	const submitContent = () => {
		let base64Str = dataURLtoFile(captureCanvas.value.toDataURL('image/jpeg'), new Date().getTime(), 'image/jpeg')
		let formData = new FormData();
		formData.append('accountId', paramObj.accountId)
		formData.append('mallId', paramObj.mallId)
		formData.append('gateId', paramObj.id)
		formData.append('patrolType', 1)
		let sops = []
		if (checked.value && checked.value.length > 0) {
			checked.value.forEach(item => {
				let sopItem = templateItemList.value.find(childItem => item == childItem.id);
				sops.push({
					"id": sopItem.id,
					"status": 0,
					"score": sopItem.score
				})
			})
			formData.append('sops', JSON.stringify(sops))
		} else {
			return Toast.fail('请选择检查项');
		}

		if (message.value) {
			formData.append('remark', message.value)
		}
		if (isRectify.value == 1) {
			if (rectificationUserName.value) {
				let user = userList.value.find(item => item.name == rectificationUserName.value);
				formData.append('handler', user.id)
			} else {
				return Toast.fail('请选择整改人');
			}
		} else {
			formData.append('handler', '')
		}
		formData.append('pic', base64Str)
		tourApi.confirmPatrolRecord(formData, {
			headers: {
				'Content-type': 'application/x-www-form-urlencoded;charset=utf-8' //multipart/form-data; charset=utf-8
			}
		}).then(res => {
			let result = res.data;
			if (result.code == '200') {
				Toast.success('提交成功');
				setTimeout(() => {
					message.value = '';
					rectificationUserName.value = '';
					checked.value = [];
					checkboxRefsShow.value = [];
					checkboxRefs.value = [];
					let context = captureCanvas.value.getContext("2d")
					context.clearRect(0, 0, window.innerWidth, window.innerWidth / 1.78)
					picUrl.value = '';
				}, 1000)
			} else {
				return Toast.fail(result.msg);
			}

		})
	}


	const userList = ref([]);
	const userNameList = ref([]);
	const getUserList = () => {
		userList.value = []
		userNameList.value = []
		tourApi.getUsers({
			mallId: paramObj.mallId
		}).then(data => {
			let result = data.data
			if (result.data && result.data.length) {
				result.data.forEach(item => {
					item.name = item.realName + '(' + item.loginName + ')';
					userNameList.value.push(item.realName + '(' + item.loginName + ')')
				})
			}
			userList.value = result.data
		})
	}
	const vionPlayer = ref()
	const picUrl = ref('')
	const captureCanvas = ref('')
	// 获取检查项
	const templateList = ref([]);
	const templateNameList = ref([]);
	const templateNameDefault = ref();
	const tempalteId = ref()
	// 单个模板检查项
	const templateItemList = ref([]);
	// 单个模板检查项--带分组
	const templateGroupList = ref([]);
	setTimeout(() => {
		vionPlayer.value.playWebVideo(paramObj);
	}, 1000)
	// 检查项弹框显示
	const templateDialogShow = ref(false);
	const getPatrolTemplateList = () => {
		tourApi.getPatrolTemplateListFun({
			accountId: paramObj.accountId,
			pageSize: 999,
		}).then(res => {
			let result = res.data;
			if (result.code == 200) {
				templateList.value = result.data.list;
				if (templateList.value.length) {
					tempalteId.value = templateList.value[0].id
					getPatrolTemplateOne(templateList.value[0].id)
					// templateList.value.unshift({
					//     name: '全部',
					//     id: ''
					// })
					templateNameList.value = []
					templateList.value.forEach(item => {
						templateNameList.value.push(item.name)
					})
					templateNameDefault.value = templateList.value[0].name;
				}
			}
		})
	}
	// 获取单个模板检查项
	const getPatrolTemplateOne = (val) => {
		tourApi.getPatrolTemplateOne({
			id: val,
		}).then(res => {
			let result = res.data;
			if (result.code == 200) {
				templateItemList.value = result.data.sopProjects || [];
				let sopProjects = result.data.sopProjects
				let groupList = {}
				sopProjects.forEach((item,index)=>{
					item.allIndex = index
					if(groupList[item.sopTypeId]) {
						groupList[item.sopTypeId].sopProjects.push(item)
					} else {
						groupList[item.sopTypeId] = {
							id:item.sopTypeId,
							name:item.sopTypeName,
							sopProjects:[item]
						}
					}
				})
				templateGroupList.value = []
				templatecollapseNames.value = []
				for(let i in groupList) {
					templateGroupList.value.push(groupList[i])
					templatecollapseNames.value.push(groupList[i].id)
				}
			}
		})
	}
	// 获取关联的SOP
	const associateData = ref([])
	const getAssociateList = (record) => {
		associateData.value = [];
		tourApi.getPatrolSopTypeTree({
			accountId: paramObj.accountId,
			system: 0
		}).then(data => {
			let result = data.data;
			if (result.code == '200') {
				let tableData = result.data
				tableData.sort((a,b)=>{
					return a.id - b.id
				})
				console.log('tableData',tableData)
				tableData.forEach((item, index) => {
					if (item.sopProjects.length > 0) {
						item.key = 1000 + item.id
						let sopProjects = JSON.parse(JSON.stringify(item.sopProjects))
						item.sops = sopProjects
						item.len = sopProjects.length
						item.choiceNum = 0
						associateData.value.push(item)
					}
				})
			}
		})
	}
	
	const locHistory = ref([]);
	const lastLoc = ref();
	const isMouseDown = ref(false);
	const windowToCanvas = function(x, y) {
		var bbox = captureCanvas.value.getBoundingClientRect(); //获取canvas的位置信息
		return {
			x: Math.round(x - bbox.left),
			y: Math.round(y - bbox.top)
		} //返回当前鼠标相对于canvas的位置
	}

	const capture = function() {
		// 绘制
		var context = captureCanvas.value.getContext("2d");
		captureCanvas.value.addEventListener('touchstart', function(e) {
			e.preventDefault();
			isMouseDown.value = true;
			lastLoc.value = windowToCanvas(e.touches[0].clientX, e.touches[0].clientY)
			locHistory.value.push({
				x: lastLoc.value.x,
				y: lastLoc.value.y,
			})
			console.log(locHistory.value)
		})
		captureCanvas.value.addEventListener('touchmove', function(e) {
			e.preventDefault();
			if (isMouseDown.value) {
				moveStroke({
					x: e.touches[0].clientX,
					y: e.touches[0].clientY
				}, context)
			}
		})
		captureCanvas.value.addEventListener('touchend', function(e) {
			locHistory.value.push({
				x: lastLoc.value.x,
				y: lastLoc.value.y,
			})
			isMouseDown.value = false;
		})
	}
	const calcDistance = function(loc1, loc2) {
		return Math.sqrt((loc1.x - loc2.x) * (loc1.x - loc2.x) + (loc1.y - loc2.y) * (loc1.y - loc2
			.y)) //通过起始结束坐标x,y值计算路程长度
	}
	const moveStroke = function(point, context) {
		var curLoc = windowToCanvas(point.x, point.y)
		var curTimestamp = new Date().getTime();
		var s = calcDistance(curLoc, lastLoc.value)
		var lineWidth = 3
		//draw
		context.beginPath()
		context.moveTo(lastLoc.value.x, lastLoc.value.y)
		context.lineTo(curLoc.x, curLoc.y)

		locHistory.value.push({
			x: curLoc.x,
			y: curLoc.y,
		})

		context.lineWidth = 3
		context.strokeStyle = '#FF0000';
		context.lineCap = "round"
		context.linJoin = "round"
		context.stroke();

		//每次过程结束时，将结束值赋给初始值，一直延续
		lastLoc.value = curLoc
	}

	// 前端截图
	const goCaptureImg = () => {
		getPatrolTemplateList()
		getAssociateList()
		getUserList()
		Toast.loading({
			duration: 0,
			message: '视频截图中···',
			forbidClick: true,
		});
		vionPlayer.value.screenshot().then(data => {
			screenshotEnd(data)
		}).catch(err => {
		})
	}
	// 截图出口
	const screenshotEnd = (imgData) => {
		console.log(imgData)
		let reg = new RegExp('data:image/jpeg;base64,');
		let regPng = new RegExp('data:image/png;base64,');
		let pic = imgData.replace(reg, '')
		pic = pic.replace(regPng, '')
		tourApi.uploadScreenshot({
			gateId: paramObj.id,
			pic: pic
		}).then(res => {
			// console.log(res)
			let result = res.data;
			if (result.code == 200) {
				Toast.success('截图成功');
				pictureProcess(result.data.pic)
			} else {
				Toast.success(result.msg);
			}
		})
	}
	const pictureProcess = (imgUrl) => {
		picUrl.value = imgUrl;
		Toast.clear();
		if (paramObj.type != 'titem') {
			// picUrl.value = 'https://store.keliuyun.com/images/patrol/capture/20230825/ecd2a635-84af-4968-bc30-1af130460d12.jpg'
			vionPlayer.value.stopPlay();
			let image = new Image()
			image.src = 'https://store.keliuyun.com/images/' + picUrl.value;
			image.style.width = window.innerWidth + 'px';
			let heightC = window.innerWidth / 1.78
			image.style.height = heightC + 'px'
			image.crossOrigin = 'Anonymous'
			image.onload = () => {
				captureCanvas.value.width = window.innerWidth;
				captureCanvas.value.height = heightC;
				let ctx = captureCanvas.value.getContext("2d");
				ctx.drawImage(image, 0, 0, window.innerWidth, heightC);
				capture()
			}
		} else {
			/***********巡店详情截图****************/
			if(paramObj.newLevel) {
				wx.miniProgram.redirectTo({
					url: `/pages/tour/inspectionDetail/index?action=capture&picUrl=${imgUrl}&id=${paramObj.tid}`
				});
			} else {
				wx.miniProgram.redirectTo({
					url: `/pages/tour/titemDetail/index?action=capture&picUrl=${picUrl}&id=${paramObj.tid}`
				});
			}
		}

	};
	onMounted(() => {
		reqPatrolGateList()
		reqGateGroupList()
	})
</script>
<style scoped lang="less">
	.tour-btns {
		display: flex;
		justify-content: space-between;
		padding: 20px 2vw 0;
		--van-button-border-radius: 60px;

		:deep(.van-button) {
			margin-bottom: 20px;
			border-radius: 60px;
			width: 47vw;

			&.van-button--block {
				width: 100%;
			}
		}
	}

	.tour-btns1 {
		display: flex;
		background: #E6EDFF;
		height: 15vw;
		line-height: 15vw;
		padding: 0 20px;

		.box {
			display: inline-block;
			flex: 1;
		}

		.box1 {
			text-align: right;

			span {
				margin-left: 20px;
			}

		}

		.icon {
			transform: rotate(90deg);
		}
	}

	.iconMargin {
		margin-right: 10px;
	}

	.itemList {
		overflow: auto;
		height: 50%;
	}

	:deep(.van-cell-group--inset) {
		margin: 0;
	}

	.template-select-box {
		background: #fff;
	}

	.template-select-list {
		padding: 30px 0px 10px;
		margin: 0 30px;
		border-bottom: 1px solid var(--van-cell-border-color);

		.template-select-one {
			margin: 0 20px 20px 0;
			padding: 1.8vw;

			/deep/.van-tag__close {
				margin-left: 10px;
			}
		}
	}

	.template-name-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding: 0 30px;
		border-bottom: 1px solid var(--van-cell-border-color);
	}

	.template-name-content {
		display: flex;
		align-items: center;
	}

	.template-name-title {
		width: 5em;
		min-width: 5em;
		font-size: var(--van-cell-font-size);
		color: var(--van-field-label-color);
	}

	.template-btn {
		width: 6em;
	}

	.template-name-content /deep/.van-cell {
		padding-left: 0px;
	}

	.template-list-model {
		.template-list-box {
			width: calc(100vw - 0px);
			height: calc(80vh - 0px);
			padding: 30px;
			background: #fff;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;

			.template-list-title {
				font-size: var(--van-font-size-lg);
				line-height: var(--van-font-size-lg);
				margin-bottom: 10px;
			}
			.template-search-box{
				// border-top: 1px solid #cccccc;
				border-bottom: 1px solid #cccccc;
				margin-bottom: 30px;
			}

			.template-list {
				height: 54vh;
				overflow: auto;
			}

			.template-list-submit {
				margin-top: 30px;
			}
		}
	}
	
	.gate-name-box{
		display: inline-flex!important;
		align-items: center;
	}
	.gate-name-edit-img{
		width: 40px;
		height:40px;
		display: inline-block;
		margin-left: 20px;
	}
	.group-remark{
		font-size: var(--van-calendar-info-font-size);
		line-height: 34px;
		color: #bbb;
		margin-top: 20px;
	}
	.grop-name-required{
		position: relative;
		top:4px;
		font-size: 12px;
		margin-left: 8px;
		color: var(--van-field-required-mark-color);
		content: "*";
	}
	

	.text-ellipsis{
		display: inline-block;
		max-width: 30vw;
		margin-right: 10px;
	  overflow:hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  -o-text-overflow:ellipsis;
	}
</style>