swdz-WangHaijun
/
DevLock


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
							<!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;
        }

        input{
            /*width: 2.3rem;*/
            background-color: #fff;
            outline: none;
            border: 0.01rem solid #efefef;
            padding: 0.22rem;
        }
    </style>
</head>

<body>

<div id="main" style="margin-bottom: 2rem;">
    <div v-if="findBox" style="margin-top: 1rem; text-align: center">
        <h1 style="font-size: 0.7rem;text-align: center">绿色地球定时定点设备调试</h1>
        <input type="text"  v-model="value" placeholder="请输入设备编号" >
        <button  @click="btnfun()" >搜索</button>
    </div>
    <div v-else>
        <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 v-bind:src="{{@devceImg}}"  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">定时测试</button>
                <div style="font-size: .3rem;padding-top: .1rem;padding-bottom: .1rem;">
                    点击【定时测试】，5-6秒之内锁位关闭，约4分钟左右锁位开启，1分钟后锁位关闭，测试按钮可再次点击。<br>注:设备配置后，无法点击调试</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">定时测试</button>
                </div>
            </div>
        </article>
    </div>
</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 src="./js/jquery-1.11.0.min.js"></script>
<script>
    Vue.directive('preventclick', {
        inserted: function (button, bind) {
            button.addEventListener('click', () => {
                if (!button.disabled) {
                    button.disabled = true;
                    setTimeout(() => {
                        button.disabled = false
                    }, 180000)
                }
            })
        }
    })
    var url = "{{env('APP_URL')}}"
    const vm = new Vue({
        el: '#main',
        data: {
            isstart: false,
            mssage: "开始测试",
            classbtn: "",
            findBox: true,
            isShow:false,
            time: 180,
            allbtn: false,
            startbtndib: false,
            dingshibtn: false,
            devceImg:'',
            id:'',
            arrdata: {},
            boxarr: [],
            boxnamearr:["四箱","五箱","四箱可回收","五箱可回收"],
            type: 1,
            dingshitype: 3,
            alltype: 4,
            startdata: "",
            xiangti: "",
            value:""
        },
        mounted() {
            // this.getData("866222053211317")
            // console.log("111111")
        },

        methods: {
            btnfun(){
                console.log(this.value)
                if(this.value){
                    this.getData(this.value)
                } else {
                    alert('请输入设备编号')
                }
            },
            startbtn(e) {
                //开始测试
                axios.get("http://172.31.31.199/send_protocol?id="+this.value+"&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="+this.value+"&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="+this.value+"&type=" + this.alltype + "&box_name=" + e.id).then(res => {
                    if (res.data.code == 603) {
                        alert(res.data.msg)
                    } else {
                        this.reduceCount(index)
                    }
                })
            },
            getData: function (id) {
                axios.get("http://172.31.31.199/get_boxname?id="+this.value).then(res => {
                    console.log(res)
                    if (res.data.code == 200) {
                        let type = res.data.data.device_type
                        switch (parseInt(type)){
                            case 1:
                                num = 4;
                                break;
                            case 2:
                                num = 5;
                                break;
                            case 3:
                                num = 5;
                                break;
                            case 4:
                                num = 6;
                                break;
                            default:
                                console.log('defige',type)
                                num = 4;
                        }
                        this.arrdata = res.data.data
                        if(this.arrdata.length == 0){
                            alert('异常设备请重新输入');
                            return ;
                        }
                        this.findBox = false;
                        this.devceImg = res.data.data.device_image
                        // this.xiangti = this.arrdata.device_type == "1" ? '四箱' : '五箱'

                        this.xiangti = this.boxnamearr[res.data.data.device_type-1];
                        if((res.data.data.device_type-1) < 0){
                            this.xiangti = '四箱';
                        }
                        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>