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-list">
						<van-checkbox-group shape="square" v-model="checked" ref="checkboxGroup">
						  <van-cell-group inset>
						    <van-cell v-for="(item, index) in templateItemList" center clickable :key="index" :title="item.name" @click="toggle(index)" >
						      <template #right-icon>
						        <van-checkbox :name="item.id" :ref="el => checkboxRefs[index] = el" @click.stop />
						      </template>
						    </van-cell>
						  </van-cell-group>
						</van-checkbox-group>
					</div>
					<van-button class="template-list-submit" round block type="primary"  @click="templateSubmit">确认</van-button>
				</div>
			</van-popup>
            <!-- <div class="itemList" id="itemList">
                <van-checkbox-group v-model="checked">
                    <van-cell-group inset>
                        <van-cell v-for="(item, index) in templateItemList" clickable center :key="index" :title="'['+item.score+']'+item.name" :label="item.intro" @click="toggle(index)">
                            <template #right-icon>
                                <van-checkbox :name="item.id" :ref="el => checkboxRefs[index] = el" @click.stop />
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-checkbox-group>
            </div> -->
            <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;">
					<van-button round block type="primary"  @click="submitContent">提交</van-button>
				</div>
            </div>
        </div>
        <div v-else>
            <livePlayer ref="livePlayerRef" :params="paramObj"></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">
                    <span @click="navBack">{{decodeURIComponent(paramObj.name)}}
                        <van-icon class="icon" name="play" />
                    </span>
                </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
				:title="paramObj.mallName"
			    :columns="pointList"
				:option-height="40"
			    @confirm="pointConfirm"
			    @cancel="pointPopupShow = false"
			  />
			</van-popup>
        </div>
    </div>
</template>
<script setup>
    import {
        reactive,
        ref,
        onMounted,
        getCurrentInstance
    } from 'vue';
    import {
        Toast
    } from 'vant';
    import livePlayer from '@/components/livePlayer.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=ab680ffc-2e74-482b-a180-ba27c70f2b56&type=undefined&id=91&channelid=660&platform=2&name=海康GB-01&mallId=9219&mallName=国标设备测试&bookmark=false&channelNo=1&deviceSerial=33011015992467054043:33010285991117359447&accountId=337'
    const paramObj = parse(url).search || {}
    // const paramObj = parse(window.location.href).search || {}
    /********************************/
    document.title = decodeURIComponent(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)
        // wx.miniProgram.redirectTo({
        //     url: `/pages/tour/gate/index?type=${paramObj.type}&atoken=${paramObj.atoken}&userId=${paramObj.userId}&id=${paramObj.id}&channelid=${paramObj.channelid}&platform=${paramObj.platform}&mallId=${paramObj.mallId}&name=${paramObj.name}`
        // });
    };
	// 获取检查项列表
	const pointPopupShow = ref(false)
	const pointList = ref([])
	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:[];
				list.forEach((one)=>{
					one.text = one.name
					one.value = one.id
				})
	            pointList.value = list;
				console.log(list)
				console.log(pointList.value)
	        }
	    })
	}
	const pointConfirm = (row) => {
	    console.log(row)
		paramObj.channelid = row.channelId
		paramObj.id = row.id
		paramObj.name = row.name
		paramObj.bookmark = row.bookmark
		pointPopupShow.value = false
		// livePlayerRef.value.playerEz.play();
		livePlayerRef.value.loadTourVideo();
	}
    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) => {
        templateNameDefault.value = value;
        checkboxRefsShow.value = [];
        checkboxRefs.value = [];
        checked.value = []
        if (index > 0) {
            getPatrolTemplateOne(templateList.value[index].id)
        } else {
            templateItemList.value = []
            associateData.value.forEach(item => {
                templateItemList.value.push(...item.sopProjects)
            })
        }
        show.value = false;
    };
    const onCancel = () => {
        show.value = false;
    }
    const checkboxRefs = ref([]);
    const checkboxRefsShow = ref([]);
	const templateClick = (val) => {
		templateDialogShow.value = true;
    }
    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 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 = '';
                    console.log(livePlayerRef.value.playerEz)
                    livePlayerRef.value.playerEz.play();
                },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 livePlayerRef = ref()
    const picUrl = ref('')
    const captureCanvas = ref('')
    // 获取检查项
    const templateList = ref([]);
    const templateNameList = ref([]);
    const templateNameDefault = ref();
    const tempalteId = ref()
    // 单个模板检查项
    const templateItemList = ref([]);
	// 检查项弹框显示
	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 || [];
            }
        })
    }
    // 获取关联的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.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 pictureBtn = () => {
        getPatrolTemplateList()
        getAssociateList()
        getUserList()
        Toast.loading({
            duration: 0,
            message: '视频截图中···',
            forbidClick: true,
        });
        tourApi.getCapture({id:paramObj.channelid}).then(res=>{
            if(res.status!=200){
              return Toast.fail(res.data.msg);
            }
            picUrl.value = res.data.data;
            Toast.clear();
            if(paramObj.type!='titem'){
                // picUrl.value = 'https://store.keliuyun.com/images/patrol/capture/20230825/ecd2a635-84af-4968-bc30-1af130460d12.jpg'
                livePlayerRef.value.playerEz.stop();
                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()
                }
                // wx.miniProgram.redirectTo({
                //  url: `/pages/tour/index/index?action=capture&picUrl=${picUrl}&id=${paramObj.id}&channelid=${paramObj.channelid}&mallId=${paramObj.mallId}&title=${paramObj.name}&atoken=${paramObj.atoken}&userId=${paramObj.userId}`
                // }); 
            }else{
              /***********巡店详情截图****************/
                wx.miniProgram.navigateTo({
                  url: `/pages/tour/titemDetail/index?action=capture&picUrl=${picUrl}&id=${paramObj.tid}`
                });
            }

        })
    };
    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 = () => {
		// livePlayerRef.value.captureImg(paramObj)
		getPatrolTemplateList()
		getAssociateList()
		getUserList()
		Toast.loading({
		    duration: 0,
		    message: '视频截图中···',
		    forbidClick: true,
		});
		var capturePicturePromise = livePlayerRef.value.playerEz.capturePicture('default',(data) => {
			let imgData = data.base64
			let reg = new RegExp('data:image/jpeg;base64,');
			let pic = imgData.replace(reg,'')
			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'
			livePlayerRef.value.playerEz.stop();
			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()
			}
			// this.$refs.livePlayerRef.value.playerEz.stop();
			// wx.miniProgram.redirectTo({
			//  url: `/pages/tour/index/index?action=capture&picUrl=${picUrl}&id=${paramObj.id}&channelid=${paramObj.channelid}&mallId=${paramObj.mallId}&title=${paramObj.name}&atoken=${paramObj.atoken}&userId=${paramObj.userId}`
			// }); 
		}else{
		  /***********巡店详情截图****************/
			wx.miniProgram.navigateTo({
			  url: `/pages/tour/titemDetail/index?action=capture&picUrl=${picUrl}&id=${paramObj.tid}`
			});
		}
	
	};
    onMounted(() => {
		reqPatrolGateList()
	})
</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: 30px;
			}
			.template-list{
				height: 62vh;
				overflow: auto;
			}
			.template-list-submit{
				margin-top: 30px;
			}
		}
	}
	
</style>