edu_train_web_new/user_web/src/components/student/courseChapter3d/showDownHole.vue

<!-- 完成说明 -->
<script setup lang="ts">
import { onMounted, watch, ref } from 'vue';
import { courseChapter3dShow } from "@/stores/courseChapter3dShow.ts";
import { studentTaskFoundationAdd, studentTaskFoundationGetByStudentTaskId } from "@/api/studentTaskFoundation.ts";

// watch(
//     () => courseChapter3dShow().show.showCongratulationsViewBool,
//     (newVal, oldVal) => {
//     }
// );

const submitEvent = () => {

    // console.log(
    //     "courseChapter3dShow().show.showDownHoleConfig ===",
    //     courseChapter3dShow().show.showDownHoleConfig
    // );

    // 先进行验证字段是否都填写完成
    for (let key in courseChapter3dShow().show.showDownHoleConfig) {

        let val = courseChapter3dShow().show.showDownHoleConfig[key];
        // console.log("填写提交的内容", key, val);

        if (val == null || val == undefined || val == '' || val == ' ') {

            courseChapter3dShow().show.showPromptEvent(
                "请填写下井信息,才可以进行下一步",
                null,
                function(res : any) {
                    // console.log("yes", res);
                    
                }
            );
            return;
        }
    }


    

    courseChapter3dShow().show.showDownHoleViewOpen = false;
    if (typeof courseChapter3dShow().show.showDownHoleCallback == 'function') {
        courseChapter3dShow().show.showDownHoleCallback("yes");
    }
    
}

</script>

<template>

    <div class="showDownHole">
        
        <img class="exit" src="../../../assets/downHole/Union.webp" @click="submitEvent()" />
        <img class="topTitleImg" src="../../../assets/downHole/dy.webp" />
        <div class="title" >下井信息录入</div>

        <div class="inputMain" >

            <div class="edit" >
                <div class="editLeft">任务名称/编号：</div>
                <div class="editRight">
                    <input class="newInput" type="text" v-model="courseChapter3dShow().show.showDownHoleConfig.taskName"
                    placeholder="请输入 任务名称/编号" />
                </div>
            </div>

            <div class="edit" >
                <div class="editLeft">检测地点：</div>
                <div class="editRight">
                    <input class="newInput" type="text" v-model="courseChapter3dShow().show.showDownHoleConfig.location"
                    placeholder="请输入 检测地点" />
                </div>
            </div>

            <div class="edit" >
                <div class="editLeft">井号：</div>
                <div class="editRight">
                    <input class="newInput" type="text" v-model="courseChapter3dShow().show.showDownHoleConfig.hashSign"
                    placeholder="请输入 井号" />
                </div>
            </div>

            <div class="edit" >
                <div class="editLeft">检测方向：</div>
                <div class="editRight">
                    <input class="newInput" type="text" v-model="courseChapter3dShow().show.showDownHoleConfig.detectionDirection"
                    placeholder="请输入 检测方向" />
                </div>
            </div>

            <div class="edit" >
                <div class="editLeft">管道类型：</div>
                <div class="editRight">
                    <input class="newInput" type="text" v-model="courseChapter3dShow().show.showDownHoleConfig.pipeType"
                    placeholder="请输入 管道类型" />
                </div>
            </div>

            <div class="edit" >
                <div class="editLeft">材质：</div>
                <div class="editRight">
                    <input class="newInput" type="text" v-model="courseChapter3dShow().show.showDownHoleConfig.material"
                    placeholder="请输入 材质" />
                </div>
            </div>

            <div class="edit" >
                <div class="editLeft">管径：</div>
                <div class="editRight">
                    <input class="newInput" type="text" v-model="courseChapter3dShow().show.showDownHoleConfig.pipeDiameter"
                    placeholder="请输入 管径" />
                </div>
            </div>

            <div class="editBtn" @click="submitEvent()" >
                提交信息
            </div>

        </div>

    </div>
    
</template>

<style lang="scss" scoped>

    $proportion : 0.8;

    .showDownHole * {

        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;

        /*固定宽度,设置内边距,不会影响宽度和高度的自增*/
        box-sizing:border-box;
        -moz-box-sizing:border-box; /* Firefox */
        -webkit-box-sizing:border-box; /* Safari */
        
    }

    .showDownHole {
    
        position: fixed;
        width: 54.92rem * $proportion;
        height: 54.21rem * $proportion;
        z-index: 1;
        top: 50%;
        left: 50%;
        margin: -27.105rem * $proportion 0px 0px -27.46rem * $proportion;
        
        background-image: url("../../../assets/downHole/bg.webp");
        -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        -o-background-size: 100% 100%;
        background-size: 100% 100%;
        background-position: center center;

        .exit {
            position: absolute;
            cursor:pointer;
            width: 1.71rem * $proportion;
            top: 1.64rem * $proportion;
            right: 2.5rem * $proportion;
        }

        .topTitleImg {
            position: absolute;
            width: 4.07rem * $proportion;
            left: 50%;
            margin: 0px 0px 0px -2.035rem * $proportion;
            top: 2.14rem * $proportion;
        }

        .title {
            position: absolute;
            z-index: 1;
            width: 100%;
            text-align: center;
            font-weight: 500;
            font-size: 2rem * $proportion;
            color: #87D9FE;
            top: 4.17rem * $proportion;
        }

        .inputMain {
            position: absolute;
            width: 87%;
            left: 6.5%;
            top: 9rem * $proportion;

            .edit {
                position: relative;
                width: 100%;
                height: 3.5rem * $proportion;
                margin: 1.57rem * $proportion 0px 1.57rem * $proportion 0px;

                background-image: url("../../../assets/downHole/edit.webp");
                -webkit-background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                -o-background-size: 100% 100%;
                background-size: 100% 100%;
                background-position: center center;

                .editLeft, .editRight {
                    position: absolute;
                    height: 100%;
                    top: 0px;
                    line-height: 3.5rem * $proportion;
                }

                .editLeft {
                    left: 0px;
                    width: 29%;
                    font-weight: 400;
                    font-size: 1.28rem * $proportion;
                    color: #CCD2DF;
                    padding: 0px 0px 0px 1.35rem * $proportion;
                }

                .editRight {
                    right: 0px;
                    width: 71%;
                    font-weight: 400;
                    font-size: 1.28rem * $proportion;
                    color: #FFFFFF;

                    .newInput {
                        /* 移除默认外观 */
                        -webkit-appearance: none;
                        -moz-appearance: none;
                        appearance: none;
                        
                        /* 移除边框和轮廓 */
                        border: none;
                        outline: none;
                        
                        /* 移除默认内边距 */
                        padding: 0;
                        
                        /* 继承字体样式 */
                        font-family: inherit;
                        font-size: inherit;
                        line-height: inherit;
                        
                        /* 背景透明 */
                        background: transparent;
                        width: 100%;
                    }

                    .newInput::placeholder {
                        color: #ebeaea;
                    }

                }
                
            }

            .editBtn {
                position: relative;
                width: 14.21rem * $proportion;
                height: 3.5rem * $proportion;
                line-height: 3.5rem * $proportion;
                margin: 1.57rem * $proportion auto 1.57rem * $proportion auto;
                text-align: center;
                font-weight: 400;
                font-size: 1.28rem * $proportion;
                color: #FFFFFF;
                cursor:pointer;
                background-image: url("../../../assets/downHole/btn.webp");
                -webkit-background-size: 100% 100%;
                -moz-background-size: 100% 100%;
                -o-background-size: 100% 100%;
                background-size: 100% 100%;
                background-position: center center;
            }

        }

    }

</style>