swdz-WangHaijun
/
DevLock


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设备调试</title>
    <style>
        #main {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 15rem;
            padding: 0 .5rem;
        }

        .inputstyle {
            width: 8rem;
            height: .8rem;
            border-radius: .8rem;
            outline: none;
            border: 1px solid #efefef;
            padding: 0 .3rem;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .btnstyle {
            width: 3rem;
            height: 1rem;
            outline: none;
            border: solid rgb(118, 206, 169);
            background-color: rgb(118, 206, 169);
            color: #fff;
            border-radius: .8rem;
            margin-top: .3rem;
        }
    </style>
</head>

<body>
    <div id="main">
        <div class="container" v-if="isInstall">
            <div v-for="(item,index) in list" style="font-size: .5rem;margin-top: .3rem;" @click="tapvalue(item)">
                {{item}}
            </div>
            <input class="inputstyle" type="text" v-model="value" placeholder="请输入你需要升级的设备IMEI号码">
            <button class="btnstyle" @click="installbtn">点击搜索</button>
        </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" class="inputstyle" disabled v-model="value" placeholder="">
            <div v-for="(item,index) in phonedata" style="font-size: .5rem;margin-top: .3rem;" @click="tapphone(item)">
                {{item}}
            </div>
            <input type="text" class="inputstyle" v-model="phone" placeholder="请输入DTU绑定手机卡号">
            <br />
            <select class="inputstyle" 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" class="btnstyle">立即设置</button>
        </div>
        <div class="container" style="align-items: flex-start;" v-if="isbox">
            <div style="font-size: .5rem;">
                设备IMEI号：{{equipment}}
            </div>
            <div style="font-size: .5rem;margin-top: .4rem;display: flex;align-items: center;">
                设备状态：{{isxian}}
            </div>
            <div style="font-size: .5rem;margin-top: .4rem;display: flex;align-items: center;">
                设备版本号：{{versionNum}}
            </div>
            <div style="margin-top: .4rem;width: 100%;text-align: center;">
                <button class="btnstyle" @click="resetbtn">重置设备</button>
                <button class="btnstyle" @click="upbtn">升级程序</button>
            </div>
            <div style="font-size: .3rem;margin-top: .4rem;">
                备注：
            </div>
            <div style="font-size: .3rem;margin-top: .2rem;">
                1. 点击任何按钮后，设备需保持通电状态3-5分钟，中途不能断电，否则可能造成设备损坏
            </div>
            <div style="font-size: .3rem; margin-top: .2rem;">
                2. 设备重置/升级后，所有主板的奇数口会变更为通电状态，成功获取版本号后可继续测试设备
            </div>
            <div style="font-size: .3rem; margin-top: .2rem;">
                3. 重置设备为将现有设备重新重置状态并升级到最新版本，会清空设备原有设置所有命令，并直接获取设备版本号
            </div>
        </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>
        const vm = new Vue({
            el: '#main',
            data: {
                isInstall: true,
                value: "",
                equipment: "",
                isxian: "",
                versionNum: "",
                isnew: "",
                Numarr: [],
                list: [],
                typevalue: "1",
                phone: "",
                type: 1,
                isbox: false,
                isshezhi: false,
                phoneList: [],
                phonedata: []
            },
            mounted() {
                this.getNum()
                this.getphone()
            },
            watch: {
                value(newdata, jiu) {
                    if (typeof newdata === 'string') {
                        if (newdata.trim().length !== 0) {
                            this.debounce(this.changeStr, 1500);
                        } else { }
                    }
                    if (newdata == "") {
                        this.list = []
                    }
                },
                phone(newdata, jiu) {
                    console.log(newdata)
                    if (typeof newdata === 'string') {
                        if (newdata.trim().length !== 0) {
                            this.debounce(this.phonechange, 1500);
                        } else { }
                    }
                    if (newdata == "") {
                        this.phonedata = []
                    }
                }
            },
            methods: {
                shezhi() {
                    if (this.phone != "") {
                        if (confirm("请再次确定选择的手机号和箱体类型选择正确，提交后不可变更")) {
                            axios.get("/updateDevice?id=" + this.value + "&type=" + this.type + "&phone=" + this.phone).then(res => {
                                console.log(res)
                                if (res.data.status == 200) {
                                    this.isshezhi = false
                                    this.isbox = true
                                    alert('设备更新中')
                                }
                            })
                        }
                    } else {
                        alert("请输入手机号")
                    }
                },
                changeProduct(e) {
                    console.log(e)
                    this.type = e.target.value
                },
                getNum() {
                    axios.get("/getDevcielist").then(res => {
                        this.Numarr = res.data.data
                    })
                },
                tapvalue(item) {
                    this.value = item
                    this.list = []
                },
                tapphone(item) {
                    this.phone = item
                    this.phonedata = []
                },
                changeStr() {
                    this.list = []
                    this.Numarr.forEach(item => {
                        if (item.substr(item.length - 4) == this.value) {
                            this.list.push(item)
                        }
                    })
                    console.log(this.list)
                },
                phonechange() {
                    this.phonedata = []
                    this.phoneList.forEach(item => {
                        if (item.substr(item.length - 4) == this.phone) {
                            this.phonedata.push(item)
                        }
                    })
                    console.log(this.phonedata)
                },
                debounce(fn, wait) {
                    if (this.fun !== null) {
                        clearTimeout(this.fun)
                    }
                    this.fun = setTimeout(fn, wait)
                },
                resetbtn() {
                    if (this.isxian == '在营') {
                        axios.get("/upVersion?id=" + this.value + "&type=" + 2).then(res => {
                            if (res.data.status == 200) {
                                alert("重置命令发送成功，请耐心等待30s，系统将自动重置")
                            }
                        })
                    } else {
                        alert('设备已离线')
                    }
                },
                installbtn() {
                    if (this.value != "") {
                        axios.get("/getDevice?id=" + this.value).then(res => {
                            console.log(res)
                            if (res.data.status == 200) {
                                if (res.data.data.phone != null && res.data.data.device_type != null && res.data.data.is_last == 0) {
                                    this.isInstall = false
                                    this.isbox = true
                                    this.equipment = res.data.data.id
                                    this.isxian = res.data.data.status
                                    this.versionNum = res.data.data.version
                                    this.isnew = res.data.data.is_last
                                } else if (res.data.data.phone == null && res.data.data.device_type == null && res.data.data.is_last == 0) {
                                    this.isInstall = false
                                    this.isshezhi = true
                                    this.equipment = res.data.data.id
                                    this.isxian = res.data.data.status
                                    this.versionNum = res.data.data.version
                                    this.isnew = res.data.data.is_last
                                } else {
                                    alert('当前设备已是最新版本，已有箱体和已绑定手机号无需设置升级')
                                }

                            } else {
                                alert("无效设备")
                            }
                        })
                    } else {
                        alert("请输入编号")
                    }

                },
                upbtn() {
                    if (this.isxian == '在营' && this.isnew == 0) {
                        axios.get("/upVersion?id=" + this.value + "&type=" + 1).then(res => {
                            if (res.data.status == 200) {
                                alert('升级命令发送成功，请耐心等待3-5分钟设备升级完成后，所有锁口会变为通电状态')
                            }
                        })
                    } else if (this.isxian != "在营") {
                        alert('设备已离线')
                    } else {
                        alert('设备已是最新版本，无需更新')
                    }
                },
                getphone() {
                    axios.get("/getPhonelist").then(res => {
                        this.phoneList = res.data.data
                    })
                }
            }
        })
    </script>
</body>

</html>