water_maintenance/src/components/ThreeWorldEventQingXiCheAndQv/ThreeWorldQingXiCheAndQv.vue

<script setup>
import { watch } from "vue";
import { CommonVal } from "@/components/ChengGuangYuanJing/store/CommonVal.js";
import { IframeEdit } from '@/components/ChengGuangYuanJing/js/IframeEdit.js'

// 固定操作3d的代码。可以不做其他修改

// 接收参数
const props = defineProps({
    iframeId: {
        type: String
    },
    url: {
        type: String
    },
});


// 定义发射给父组件的方法
const emits = defineEmits([
    'callbackObjIframeEdit',
    'callbackLoadPercentage',
    'callbackLoadEnd',
    'callbackDistanceYes',
    'callbackDistanceNo',
    'callbackCameraVisualAngleJsonToLook'
])


/**
 * 回调加载百分比
 */
const callbackLoadPercentageEvent = (json) => {
    emits('callbackLoadPercentage', json);
}

/**
 * 回调加载完成
 */
const callbackLoadEndEvent = (json) => {
    emits('callbackLoadEnd', json);
}

/**
 * 回调距离范围内
 */
const callbackDistanceYesEvent = (json) => {
    emits('callbackDistanceYes', json);
}

/**
 * 回调距离范围外
 */
const callbackDistanceNoEvent = (json) => {
    emits('callbackDistanceNo', json);
}

/**
 * 回调视角切换完成
 */
const callbackCameraVisualAngleJsonToLookEvent = (json) => {
    emits('callbackCameraVisualAngleJsonToLook', json);
}

/**
 * 页面初始化
 */
const viewInit = () => {

    // 判断是否成功找到摇杆才触发
    var viewTimeBool = setInterval(function () {

        try {

            var objPreviewBtnMove = objIframeEdit.objIframe.$("#previewBtnMove");
            if (objPreviewBtnMove != null && objPreviewBtnMove != undefined) {
                viewAssemblyVisibilityMain();
                // clearInterval(viewTimeBool);
                // viewTimeBool = null;
            }

        } catch (e) {
        }

    }, 1000 / 3);

}

/**
 * 隐藏页面组件
 */
const viewAssemblyVisibilityMain = () => {

    objIframeEdit.viewAssemblyVisibility();
    objIframeEdit.viewAssemblyVisibilityRole();
    objIframeEdit.viewBackgroundColorClean();
    // 额外隐藏其他的组件
    objIframeEdit.objIframe.$("#edit3DActionTab").css("display", "none");
    objIframeEdit.objIframe.$(".previewRoleChatMain").css("display", "none");
    objIframeEdit.objIframe.$(".previewBtnMove").css("display", "none");
    objIframeEdit.objIframe.$(".previewBtnAction").css("display", "none");
    
}

// 如果是多个iframe，则new 出多个即可。 后续对应的iframe，单独对应的对象去触发封装好的方法
let objIframeEdit = new IframeEdit();
CommonVal().obj[props.iframeId] = objIframeEdit;

/**
 * 初始化应用
 */
const appInit = () => {

    objIframeEdit.loading(
        // html iframe 的 唯一 id， 也就是对应 html id="" 的参数
        props.iframeId,
        // 加载完成回调
        function (roleChoiceOpenBool) {

            callbackLoadEndEvent({
                "roleChoiceOpenBool": roleChoiceOpenBool
            });

            // 如果是角色选择
            if (roleChoiceOpenBool === true) {

                try {
                    objIframeEdit.objIframe.$(".weiXinSaoYiSao").css("display", "none");
                } catch (e) {
                }

                try {
                    objIframeEdit.objIframe.$(".qrContainerMainLogin").css("display", "none");
                } catch (e) {
                }

                try {
                    objIframeEdit.objIframe.$(".mainLoginSubmitWeiXin").css("display", "none");
                } catch (e) {
                }

                try {

                    let btnAll = objIframeEdit.objIframe.$(".btn");
                    for (let btnAllI = 0; btnAllI < btnAll.length; btnAllI++) {

                        if (btnAll[btnAllI].innerText == "微信登录") {
                            // console.log(btnAll[btnAllI].innerText);
                            btnAll[btnAllI].style.display = "none";
                        }

                    }

                } catch (e) {

                }

            // console.log("加载完成，当前是选择角色页面");
            } else {

                // console.log("加载完成，当前是3d场景页面");
                // 某个视角切换完成回调逻辑
                objIframeEdit.objIframe.window.CameraVisualAngleJsonToLookEvent = function (json) {
                callbackCameraVisualAngleJsonToLookEvent(json);
                
            };

            // 初始化被操作的页面
            viewInit();
            
        }

        },
        // 加载百分比
        function (
            // 加载百分比
            loadPercentage,
            // 是否需要触发点击进入的逻辑
            clickIntoBool
        ) {

            // console.log( "当前加载百分比", loadPercentage, clickIntoBool );
            callbackLoadPercentageEvent({
                "loadPercentage": loadPercentage,
                "clickIntoBool": clickIntoBool
            });
            
        }
    );

    // 回调距离事件
    objIframeEdit.distanceEventJsonCallback = function (distanceEventJson) {

        // console.log("回调距离事件", distanceEventJson);
        callbackDistanceYesEvent(distanceEventJson["yes"]);
        callbackDistanceNoEvent(distanceEventJson["no"]);

    };

}

appInit();

</script>

<template>
    <div class="threeWorldIframeContent" >

        <iframe
            :id="iframeId" :name="iframeId"
            class="threeWorldIframe"
            scrolling="auto" frameborder="no" marginwidth="0" marginheight="0"
            :src="url"
        >
        </iframe>

    </div>
</template>

<style lang="less" scoped>

.threeWorldIframeContent * {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}

.threeWorldIframeContent {
    width: 100%;
    height: 100%;
    // position: fixed;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;
    /* 注意这里必须是被允许穿透点击的，否则堆叠高于了  canvas，则会出现无法点击到canvas了。加了这个即可解决这个问题  */
    // pointer-events: none;
}

.threeWorldIframe {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;
    /* 注意这里必须是被允许穿透点击的，否则堆叠高于了  canvas，则会出现无法点击到canvas了。加了这个即可解决这个问题  */
    // pointer-events: none;
}
</style>