swdz-WangHaijun
/
DevLock


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

        select {
            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 v-for="(item,index) in list" style="font-size: .5rem;margin-top: .3rem;" @click="tapvalue(item)">
                {{item}}
            </div>
        </div>
        <!-- <div v-if="isshezhi" style="margin-top: 1rem; text-align: center">
            <h1 style="font-size: 0.7rem;text-align: center">绿色地球定时定点设备调试</h1>
            <input type="text" disabled v-model="value" placeholder="">
            <input type="text" v-model="phone" placeholder="请输入DTU绑定手机卡号">
            <br />
            <select v-model="typevalue" @change="changeProduct($event)">
                <option value="1">四箱</option>
                <option value="2">五箱</option>
                <option value="3">四箱可回收</option>
                <option value="4">五箱可回收</option>
            </select>
            <button @click="shezhi">立即设置</button>
        </div> -->
        <div v-if="isbox">
            <nav class="bianhao">
                设备编号：{{arrdata.device_name}}
            </nav>
            <article>
                <div class="bianhao" style="padding-top: 0;">
                    设备型号：{{xiangti}}
                </div>
                <div class="bianhao" style="padding-top: 0;display: flex;justify-content: space-between;">
                    <span> 在线情况：{{isstatus}}</span> <span>版本号：{{arrdata.version}}</span>
                </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(arrdata)" :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(arrdata)" 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="./auto-size.js"></script>
    <script>
        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: "",
                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: "",
                phone: "",
                typevalue: "1",
                isbox: false,
                isshezhi: false,
                isstatus: "",
                Numarr: [],
                list: []
            },
            mounted() {
                // this.getData("866222053211317")
                // console.log("111111")
                this.getNum()
            },
            watch: {
                value(newdata, jiu) {
                    if (typeof newdata === 'string') {
                        if (newdata.trim().length !== 0) {
                            this.debounce(this.changeStr, 1500);
                        } else { }
                    }
                    if (newdata == "") {
                        this.list = []
                    }
                }
            },
            methods: {
                tapvalue(item) {
                    this.value = item
                    this.list = []
                },
                changeStr() {
                    this.list = []
                    this.Numarr.forEach(item => {
                        if (item.substr(item.length - 4) == this.value) {
                            this.list.push(item)
                        }
                    })
                    console.log(this.list)
                },
                debounce(fn, wait) {
                    if (this.fun !== null) {
                        clearTimeout(this.fun)
                    }
                    this.fun = setTimeout(fn, wait)
                },
                changeProduct(e) {
                    console.log(e)
                    this.type = e.target.value
                },
                btnfun() {
                    if (this.value != "") {
                        axios.get("/getDevice?id=" + this.value).then(res => {
                            console.log(res)
                            if (res.data.status == 200) {
                                this.phone = res.data.data.phone
                                this.typevalue = res.data.data.device_type
                                this.findBox = false;
                                this.isbox = true
                                this.getData()
                            }
                        })
                    }

                },
                // shezhi() {
                //     if (this.phone != "") {
                //         axios.get("/updateDevice?id=" + this.value + "&type=" + this.type + "&phone=" + this.phone).then(res => {
                //             console.log(res)
                //             if (res.data.status == 200) {
                //                 this.isbox = true

                //             }
                //         })
                //     } else {
                //         alert("请输入手机号")
                //     }
                // },
                startbtn(e) {
                    //开始测试
                    axios.get("/send_protocol?id=" + this.value + "&type=" + this.type + "&status" + this.isstatus).then(res => {
                        if (res.data.code == 603) {
                            alert(res.data.msg)
                        } else if (res.data.code == 604) {
                            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("/send_protocol?id=" + this.value + "&type=" + this.dingshitype + "&status" + this.isstatus).then(res => {
                        if (res.data.code == 603) {
                            alert(res.data.msg)
                        } else if (res.data.code == 604) {
                            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("/send_protocol?id=" + this.value + "&type=" + this.alltype + "&box_name=" + e.id + "&status" + this.isstatus).then(res => {
                        if (res.data.code == 603) {
                            alert(res.data.msg)
                        } else if (res.data.code == 604) {
                            alert(res.data.msg)
                        } else {
                            this.reduceCount(index)
                        }
                    })
                },
                getData: function (id) {
                    axios.get("/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.devceImg = '/' + res.data.data.device_image
                            // this.xiangti = this.arrdata.device_type == "1" ? '四箱' : '五箱'
                            this.isshezhi = false
                            this.isstatus = this.arrdata.status
                            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);
                },
                getNum() {
                    axios.get("/getDevcielist").then(res => {
                        this.Numarr = res.data.data
                    })
                }
            },
        })
    </script>
</body>

</html>