| xqd
@@ -4,7 +4,7 @@
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <title>Document</title>
|
|
|
+ <title>设备调试</title>
|
|
|
<style>
|
|
|
* {
|
|
|
padding: 0;
|
| xqd
@@ -28,7 +28,6 @@
|
|
|
outline: none;
|
|
|
border: 0.01rem solid #efefef;
|
|
|
padding: 0.2rem;
|
|
|
- margin-top: 0.3rem;
|
|
|
}
|
|
|
|
|
|
.redbtn {
|
| xqd
@@ -44,52 +43,56 @@
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
-<div id="main">
|
|
|
+<div id="main" style="margin-bottom: 2rem;">
|
|
|
<nav class="bianhao">
|
|
|
- 设备编号:{{$device->device_name}}
|
|
|
+ 设备编号:@{{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;">点击【开始测试】,全部箱体立即锁死,每20秒锁位状态改变一次
|
|
|
+ </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;">
|
|
|
+ 点击【定时测试】,2min后,锁位开启,3min后锁位关闭,设备配置后,无法点击调试</div>
|
|
|
</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 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>
|
|
|
- @endforeach
|
|
|
</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', () => {
|
|
|
- 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)
|
|
|
+ }, 180000)
|
|
|
}
|
|
|
})
|
|
|
}
|
| xqd
@@ -104,40 +107,108 @@
|
|
|
allbtn: false,
|
|
|
startbtndib: false,
|
|
|
dingshibtn: false,
|
|
|
+ arrdata: {},
|
|
|
+ boxarr: [],
|
|
|
+ type: 1,
|
|
|
+ dingshitype: 3,
|
|
|
+ alltype: 4,
|
|
|
+ startdata: "",
|
|
|
+ xiangti: ""
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData()
|
|
|
},
|
|
|
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 = ""
|
|
|
- }
|
|
|
+ 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
|
|
|
+ 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)
|
|
|
+ } else {
|
|
|
+ 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, 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)
|
|
|
}
|
|
|
- }, 1000)
|
|
|
+ })
|
|
|
},
|
|
|
- suowei(e){
|
|
|
- this.startbtndib = true
|
|
|
- this.dingshibtn = true
|
|
|
- console.log(e.currentTarget.dataset.name)
|
|
|
+ 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);
|
|
|
}
|
|
|
},
|
|
|
})
|