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>
            <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 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 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>
                <van-cell-group inset>
                    <van-field v-model="message" rows="2" autosize label="备注" type="textarea" placeholder="请输入备注" />
                </van-cell-group>
                <van-button round block type="primary"  @click="submitContent">提交</van-button>
            </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="pictureBtn" 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="pictureBtn">
                        <van-icon class="iconMargin" name="photograph" />巡检
                    </span>
                </div>
            </div>
        </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=16e4bf63-a3cd-420c-895a-a22617939989&type=undefined&id=42&channelid=122&platform=2&name=全景球机&mallId=9216&bookmark=true&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 = () => {
        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 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;
        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 toggle = (index) => {
        checkboxRefs.value[index].toggle();
    }
    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('请选择整改人');
            }
        }
        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 = [];
                    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 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)
                    templateNameDefault.value = templateList.value[0].name;
                    templateList.value.unshift({
                        name: '全部',
                        id: ''
                    })
                    templateNameList.value = []
                    templateList.value.forEach(item => {
                        templateNameList.value.push(item.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()
                    document.getElementById('itemList').style.height = (window.innerHeight - heightC - 250) + 'px'
                }
                // 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}`
                });
            }

        })
    };
    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
    }
    onMounted(() => {})
</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;
    }
</style>