swdz-WangHaijun
/
DevLock


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #main {
            padding: 0 .4rem;
        }

        #main .bianhao {
            font-size: 0.5rem;
            font-weight: bold;
            color: black;
            padding: .4rem;
        }

        button {
            width: 2.3rem;
            background-color: #fff;
            outline: none;
            border: 0.01rem solid #efefef;
            padding: 0.2rem;
            margin-top: 0.3rem;
        }

        .redbtn {
            background-color: red !important;
            color: white !important;
        }

        .whitebtn {
            background-color: white;
            color: black;
        }
    </style>
</head>

<body>
<div id="main">
    <nav class="bianhao">
        设备编号：{{$device->device_name}}
    </nav>
    <article>
        <div class="bianhao" style="padding-top: 0;">
            全部锁位
        </div>
        <div class="bianhao" style="padding-top: 0; border-bottom: 0.01rem solid #efefef;">
            <button @click="startbtn()" :class="classbtn" :disabled="startbtndib">@{{mssage}}</button>
            <button v-preventclick @click="dingshi()" class="" :disabled="dingshibtn">@{{time}}s定时</button>
        </div>
        @foreach( $box as $key=>$bn)
        <div  :key="{{$key}}">
            <div class="bianhao" style="font-size: 0.4rem;">
                {{$bn}}
            </div>
            <div class="bianhao" style="padding-top: 0;">
                <button @click="suowei" :data-name="'box'+{{$key+1}}" v-preventclick class="suoweiList" :disabled="allbtn">180s定时</button>
            </div>
        </div>
        @endforeach
    </article>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script src="./js/auto-size.js"></script>
<script>
    Vue.directive('preventclick', {
        inserted: function (button, bind) {
            button.addEventListener('click', () => {
                let time = 180
                if (!button.disabled) {
                    button.disabled = true;
                    setTimeout(() => {
                        button.disabled = false
                        vm.startbtndib= false
                        vm.dingshibtn = false
                    }, 181000)
                    let timer=setInterval(()=>{
                        button.innerHTML = time+"s定时"
                        time--
                        if (time<=0){
                            clearInterval(timer)
                            button.innerHTML = "180s定时"
                        }
                    },1000)
                }
            })
        }
    })
    const vm = new Vue({
        el: '#main',
        data: {
            isstart: false,
            mssage: "开始测试",
            classbtn: "",
            time: 180,
            allbtn: false,
            startbtndib: false,
            dingshibtn: false,
        },
        methods: {
            startbtn(e) {
                //开始测试
                this.isstart = !this.isstart
                this.allbtn = !this.allbtn
                this.dingshibtn = !this.dingshibtn
                if (this.isstart) {
                    var type = 1;
                    this.mssage = "停止测试"
                    this.classbtn = "redbtn"
                } else {
                    var type = 2;
                    this.mssage = "开始测试"
                    this.classbtn = ""
                }
            },
            dingshi() {
                this.startbtndib = true
                this.allbtn = true
                let timestop = setInterval(() => {
                    this.time--
                    if (this.time == 0) {
                        clearInterval(timestop)
                        this.time = 180
                        this.startbtndib = false
                        this.allbtn = false
                    }
                }, 1000)
            },
            suowei(e){
                this.startbtndib = true
                this.dingshibtn = true
                console.log(e.currentTarget.dataset.name)
            }
        },
    })
</script>
</body>

</html>