swdz-WangHaijun
/
DevLock


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备调试</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;
        }

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

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

<body>
<div id="main" style="margin-bottom: 2rem;">
    <nav class="bianhao">
        设备编号：@{{arrdata.device_name}}
    </nav>
    <article>
        <div class="bianhao" style="padding-top: 0;">
            设备型号：@{{xiangti}}
        </div>
        <div class="bianhao" style="padding-top: 0;">
            示意图：
        </div>
        <div style="text-align: center;">
            <img src="{{$img}}" alt="" style="width: 7rem;height: 4rem;">
        </div>
        <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>
            <div style="font-size: .3rem;padding-top: .1rem;padding-bottom: .1rem;">点击【开始测试】，全部箱体立即锁死，每15秒锁位状态改变一次
            </div>
        </div>
        <div class="bianhao" style="padding-top: 0; margin-top: .4rem; border-bottom: 0.01rem solid #efefef;">
            <button v-preventclick @click="dingshi()" class="" :disabled="dingshibtn">@{{time}}s定时</button>
            <div style="font-size: .3rem;padding-top: .1rem;padding-bottom: .1rem;">
                点击【定时测试】，3min后，锁位开启，4min后锁位关闭，设备配置后，无法点击调试</div>
        </div>
        <div v-for="(item,index) in boxarr" :key="index">
            <div class="bianhao"
                 style="font-size: 0.4rem;display: flex; align-items: center; justify-content: space-between;">
                <div>@{{item.name}}</div>
                <button @click="suowei(item,index)" :data-index="index" :data-id="item.id" :data-name="item.name"
                        v-preventclick class="suoweiList" :disabled="allbtn">@{{item.time}}s定时</button>
            </div>
        </div>
    </article>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
<script src="./js/auto-size.js"></script>
<script>
    var id = {{$id}}
    Vue.directive('preventclick', {
        inserted: function (button, bind) {
            button.addEventListener('click', () => {
                if (!button.disabled) {
                    button.disabled = true;
                    setTimeout(() => {
                        button.disabled = false
                    }, 180000)
                }
            })
        }
    })
    const vm = new Vue({
        el: '#main',
        data: {
            isstart: false,
            mssage: "开始测试",
            classbtn: "",
            time: 180,
            allbtn: false,
            startbtndib: false,
            dingshibtn: false,
            arrdata: {},
            boxarr: [],
            type: 1,
            dingshitype: 3,
            alltype: 4,
            startdata: "",
            xiangti: ""
        },
        mounted() {
            this.getData()
        },
        methods: {
            startbtn(e) {
                //开始测试
                axios.get("http://172.31.31.199/send_protocol?id="+id+"&type=" + this.type).then(res => {
                    if (res.data.code == 603) {
                        alert(res.data.msg)
                    } else {
                        this.allbtn = !this.allbtn
                        this.dingshibtn = !this.dingshibtn
                        this.isstart = !this.isstart
                        if (this.isstart) {
                            this.mssage = "停止测试"
                            this.classbtn = "redbtn"
                            this.type = 2
                        } else {
                            this.mssage = "开始测试"
                            this.classbtn = ""
                            this.type = 1
                        }
                        console.log(this.type)
                    }
                })
            },
            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)
                axios.get("http://172.31.31.199/send_protocol?id="+id+"&type=" + this.dingshitype).then(res => {
                    if (res.data.code == 603) {
                        alert(res.data.msg)
                    }
                })
            },
            suowei(e, index) {
                let el = document.querySelectorAll('.suoweiList')
                el.forEach(item => {
                    if (item.dataset.index != index && !item.disabled) {
                        item.disabled = true
                        setTimeout(() => {
                            item.disabled = false
                        }, 20000);
                    }
                });
                axios.get("http://172.31.31.199/send_protocol?id="+id+"&type=" + this.alltype + "&box_name=" + e.id).then(res => {
                    if (res.data.code == 603) {
                        alert(res.data.msg)
                    } else {
                        this.reduceCount(index)
                    }
                })
            },
            getData: function () {
                axios.get("http://172.31.31.199/get_boxname?id="+id).then(res => {
                    console.log(res)
                    if (res.data.code == 200) {
                        let num = res.data.data.device_type == "1" ? 5 : 6
                        this.arrdata = res.data.data
                        this.xiangti = this.arrdata.device_type == "1" ? '四箱' : '五箱'
                        for (let i = 0; i < num; i++) {
                            let obj = {
                                time: 180,
                                status: false,
                                name: i + 1 + "号箱体",
                                id: i + 1
                            }
                            this.boxarr.push(obj)
                        }

                    }
                })
            },
            reduceCount(index) {
                let _index = index;
                let time = setInterval(() => {
                    if (this.boxarr[_index].time > 0) {
                        this.boxarr[_index].time--;
                    } else {
                        clearInterval(time)
                        this.boxarr[_index].time = 180;
                    }
                    Vue.set(this.boxarr[_index], this.boxarr[_index].time, this.boxarr[_index].time)
                }, 1000);
            }
        },
    })
</script>
</body>

</html>