<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="../script/element_ui/theme-chalk/index.css">
<style type="text/css">
html,
body{
margin:0px;
padding: 0px;
background-color: #FFFFFF;
}
/*头部渲染*/
.el-header{
height: 60px;
background-color: #1099FF;
}
.el-header div{
color: white;
font-size: 20px;
text-align: center;
margin: 30px auto;
}
/*主题内容渲染*/
.el-main .el-row{
margin-top:10px;
}
.el-main .tip{
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
font-size: 15px;
margin-top:16px;
}
.el-main .pullDownBox{
width:140px;
margin-top:20px;
}
.el-main #btnGroup .el-col{
padding:0px 10px 0;
}
.el-main #btnGroup button{
margin: 1px 0px 1px;
width:100%;
}
.el-main .demonstration{
font-size: 15px;
padding-bottom: 5px;
color: grey;
}
.el-main .foldPannel{
margin-top: 5px;
}
/*底部渲染*/
.el-footer{
background-color: black;
height: 100px;
}
/*琐碎渲染*/
.success{
color:green;
}
.fail{
color:red;
}
.el-message-box{
width: 300px;
height: 150px;
}
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app" >
<el-container v-loading="loading" :element-loading-text="loadingText">
<el-header>
<div>CQ12</div>
</el-header>
<el-main>
<!-- 转仓拍照提示-->
<el-row>
<el-col :span="6">
<el-button type="primary" @click="zhuanCangPaiZhaoClick('转仓')" :disabled="!zhuanCangPaizhaoEnable">转仓</el-button>
</el-col>
<el-col :span="6">
<el-button type="success" @click="zhuanCangPaiZhaoClick('拍照')" :disabled="!zhuanCangPaizhaoEnable">拍照</el-button>
</el-col>
<el-col :span="6" :offset="6" class="tip">
<span :class="{'success':isSuccess,'fail':!isSuccess}" v-cloak>{{tipMessage}}</span>
</el-col>
</el-row>
<!-- 下拉框 -->
<el-row class="pullDownBox">
<el-col :span="24">
<el-select v-model="value" placeholder="请选择模式" @change="modelClick()">
<el-option v-for="(item,index) in options" :key="index" :value="item.value" :label="item.label" :disabled="!pullDownEnable">
</el-option>
</el-select>
</el-col>
</el-row>
<!-- 按钮组 -->
<el-row id="btnGroup">
<el-col v-for="(item,index) in btnList" :key="index" :span="8">
<el-button round size="mini" :type="item.type" :disabled="!item.isEnable" @click="btnGroupClick(item.data,index)">{{item.name}}</el-button>
</el-col>
</el-row>
<el-divider></el-divider>
<!-- 采集间隔提示 -->
<el-row>
<el-tag>采集间隔</el-tag>
</el-row>
<!-- 滑块控制面板 -->
<el-row :gutter="30">
<el-col :span="12" v-for="(item,index) in intervalName" :key="index" >
<span class="demonstration">{{item}}:{{intervalTime[index]}}</span>
<el-slider v-model="intervalTime[index]" :max="60" :show-tooltip="isShowTip" @change="cancelTip(0)" @input="cancelTip(1)" :disabled="!intervalEnable"></el-slider>
</el-col>
</el-row>
<!-- 更改采集间隔按钮 -->
<el-row>
<el-col :span="4" :offset="16">
<el-button type="success" size="small" :disabled="!intervalEnable" @click="setIntervalButtonClick()">更改采集间隔</el-button>
</el-col>
</el-row>
<el-divider></el-divider>
<!-- 工作时段面板 -->
<el-row >
<el-col :span="12" v-for="(item,index) in workTimeName" class="foldPannel">
<span class="demonstration">{{item}}:</span>
<el-time-picker
is-range
v-model="workTimeData[index]"
range-separator="-"
start-placeholder="开始"
end-placeholder="结束"
placeholder="选择时间范围"
format="HH:mm"
value-format="HH:mm" style="width: 90%" @focus="forbiddenAlertInput()" :disabled="!workTimeEnable">
</el-time-picker>
</el-col>
</el-row>
<!-- 更改采集间隔按钮 -->
<el-row>
<el-col :span="4" :offset="16">
<el-button type="success" size="small" :disabled="!workTimeEnable" @click="setWorkTimeButtonClick()">更改工作时段</el-button>
</el-col>
</el-row>
</el-main>
<el-footer>
</el-footer>
</el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="../script/element_ui/theme-chalk/vue.js"></script>
<!-- import JavaScript -->
<script src="../script/element_ui/theme-chalk/index.js"></script>
<script src="../script/axios/axios.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="../script/mobiscroll_date.js" charset="gb2312"></script>
<script type="text/javascript" src="../script/mobiscroll.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script>
var nid = location.search.split('?')[1];
new Vue({
el: '#app',
data: function() {
return {
/*提示信息*/
tipMessage: "设备离线",
/*提示信息的状态*/
isSuccess: false,
/*全页面加载禁止点击*/
loading : false,
/*设备处于的状态*/
action:"",
/*下拉框数据*/
value:"",
options:[
{
label:"正常模式",
value:"normal"
},
{
label:"调试模式",
value:"debug"
},
{
label:"强制模式",
value:"force"
},
{
label:"时段工作模式",
value:"worktimes"
},
],
/*按钮区域数据*/
btnGroupName:["振动","加热","补光灯","下落虫","履带","诱虫灯","排水","上落虫"],
btnGroupEnable:[true,true,true,true,true,true,true,true],
btnGroupData:[137,133,131,135,134,127,132,130,],
btnGroupType:["","","","","","","",""],
/*采集间隔*/
intervalName:["等虫(分)","加热(分)","落虫(秒)","振动(秒)"],
intervalTime:[],
isShowTip:false,
/*工作时段*/
workTimeName:["工作时段1","工作时段2","工作时段3","工作时段4","工作时段5"],
workTimeData:[],
/*工作时段禁用*/
workTimeEnable:true,
/*采集间隔禁用*/
intervalEnable:true,
/*下拉框禁用*/
pullDownEnable:true,
/*转仓拍照按钮的禁用*/
zhuanCangPaizhaoEnable:true
}
},
methods:{
test(){},
/*下拉框被点击*/
modelClick(newData){
var message = newData;
var myaction = "切换模式" ;
this.loading=true
this.action=myaction
axios.get(base_url+"/api/agrDevs/sendWormCmd?funCode=136&devId="+nid+"&message="+message,{
}).then(resp=>{
this.loading=false
if(resp.data.data=="控制失败"){
this.$alert(myaction+"失败",myaction+"进度",{confirmButtonText: '确定',callback:this.test()})
}else{
this.$alert(myaction+"成功",myaction+"进度",{confirmButtonText: '确定',callback:this.test()})
this.changeButtonStatue()
}
}).catch(err=>{
this.loading=false
this.$alert("没连接到数据库,啊~后台是不是出错了","郁闷",{confirmButtonText: '确定',callback:this.test()})
})
},
changeButtonStatue(){
if(this.value=="normal"){
this.btnGroupEnable = [false,false,false,false,false,false,false,false]
this.intervalEnable=true
this.workTimeEnable=false
}else if(this.value=="debug"){
this.btnGroupEnable = [true,true,true,true,true,true,true,true]
this.intervalEnable=true
this.workTimeEnable=false
}else if(this.value=="force"){
this.btnGroupEnable = [false,false,false,false,false,false,false,false]
this.intervalEnable=true
this.workTimeEnable=false
}else if(this.value=="worktimes"){
this.btnGroupEnable = [false,false,false,false,false,false,false,false]
this.intervalEnable=true
this.workTimeEnable=true
}else{
this.btnGroupEnable = [false,false,false,false,false,false,false,false]
this.intervalEnable=true
this.workTimeEnable=true
}
},
/*按钮组中转仓拍照按钮被点击时*/
zhuanCangPaiZhaoClick(data){
var myaction ;
var funCode ;
var message;
if(data=="转仓"){
myaction = "转仓"
message = "turn"
funCode = 128
}else if(data=="拍照"){
myaction = "拍照"
funCode = 126
message = "manual"
}
this.loading=true
this.action=myaction
axios.get(base_url+"/api/agrDevs/sendWormCmd?funCode="+funCode+"&devId="+nid+"&message="+message,{
}).then(resp=>{
this.loading=false
if(resp.data.data=="控制失败"){
this.$alert(myaction+"失败",myaction+"进度",{confirmButtonText: '确定',callback:this.test()})
}else{
this.$alert(myaction+"成功",myaction+"进度",{confirmButtonText: '确定',callback:this.test()})
}
}).catch(err=>{
this.loading=false
this.$alert("没连接到数据库,啊~后台是不是出错了","转仓拍照错误",{confirmButtonText: '确定',callback:this.test()})
})
},
/*按钮组中振动等按钮被点击时*/
btnGroupClick(funCode,index){
var message
var tip
if(this.btnGroupType[index]==""){
/*此时按钮已经处于未激活状态,需要开启*/
message = "open"
tip="开启"
}else{
/*需要关闭*/
message = "close"
tip="关闭"
}
this.loading=true
this.action=tip+this.btnGroupName[index]
axios.get(base_url+"/api/agrDevs/sendWormCmd?funCode="+funCode+"&devId="+nid+"&message="+message,{
}).then(resp=>{
this.loading=false
if(resp.data.data=="控制失败"){
this.$alert(this.action+"失败",this.action+"进度",{confirmButtonText: '确定',callback:this.test()})
}else{
if(message=="open"){
this.btnGroupType.splice(index,1,"primary")
}else{
this.btnGroupType.splice(index,1,"")
}
this.$alert(this.action+"成功",this.action+"进度",{confirmButtonText: '确定',callback:this.test()})
}
}).catch(err=>{
this.loading=false
this.$alert("没连接到数据库,啊~后台是不是出错了","按钮组错误",{confirmButtonText: '确定',callback:this.test()})
})
},
/*设置间隔按钮被点击*/
setIntervalButtonClick(){
this.loading=true
this.action="设置采集间隔中"
axios.get(base_url+"/api/agrDevs/sendWormCmd?funCode=123&devId="+nid+"&squence_time="+this.intervalTime[3]+"&killTime="+this.intervalTime[2]+"&inbug_time="+this.intervalTime[0]+"&hotTime="+this.intervalTime[1],{
}).then(resp=>{
this.loading=false
if(resp.data.data=="控制失败"){
this.$alert("设置失败","操作进度",{confirmButtonText: '确定',callback:this.test()})
}else{
this.$alert("设置成功","操作进度",{confirmButtonText: '确定',callback:this.test()})
}
}).catch(err=>{
this.loading=false
this.$alert("没连接到数据库,啊~后台是不是出错了","采集间隔错误",{confirmButtonText: '确定',callback:this.test()})
})
},
setWorkTimeButtonClick(){
this.loading=true
this.action="设置时段中"
var time1 = this.workTimeData[0][0]+"-"+this.workTimeData[0][1]
var time2 = this.workTimeData[1][0]+"-"+this.workTimeData[1][1]
var time3 = this.workTimeData[2][0]+"-"+this.workTimeData[2][1]
var time4 = this.workTimeData[3][0]+"-"+this.workTimeData[3][1]
var time5 = this.workTimeData[4][0]+"-"+this.workTimeData[4][1]
axios.get(base_url+"/api/agrDevs/sendWormCmd?funCode=124&devId="+nid+"&time1="+time1+"&time2="+time2+"&time3="+time3+"&time4="+time4+"&time5="+time5,{
}).then(resp=>{
this.loading=false
if(resp.data.data=="控制失败"){
this.$alert("设置失败","操作进度",{confirmButtonText: '确定',callback:this.test()})
}else{
this.$alert("设置成功","操作进度",{confirmButtonText: '确定',callback:this.test()})
}
}).catch(err=>{
this.loading=false
this.$alert("没连接到数据库,啊~后台是不是出错了","时段错误",{confirmButtonText: '确定',callback:this.test()})
})
},
/*禁止按下时间框时弹出软键盘*/
forbiddenAlertInput(){
document.activeElement.blur();
},
/*优化手机端时间框提示*/
cancelTip(tip){
if(tip==0){
this.isShowTip=false
}else{
this.isShowTip=true
}
},
/*初始化下拉框*/
initPullBox(workModel){
if(workModel==1){
this.value="normal"
}else if(workModel==2){
this.value="debug"
}else if(workModel==3){
this.value="force"
}else if(workModel==4){
this.value="worktimes"
}
this.changeButtonStatue()
},
/*初始化按钮列表*/
initButtonList(params){
var obj = JSON.parse(params)
var values = Object.values(obj)
var myindex=0;
var keys = Object.keys(obj).filter(function(element,index){
if(element!='state'&&element!='wendu'){
myindex+=1
return true
}else{
values.splice(myindex,1)
return false
}
})
for (var i = keys.length - 1; i >= 0; i--) {
if(keys[i]=="youchongdeng"){
keys[i] = "诱虫灯"
}else if(keys[i]=="zhendong"){
keys[i] = "振动"
}else if(keys[i]=="jiareguan"){
keys[i] = "加热"
}else if(keys[i]=="buguangdeng"){
keys[i] = "补光灯"
}else if(keys[i]=="xialuochong"){
keys[i] = "下落虫"
}else if(keys[i]=="lvdai"){
keys[i] = "履带"
}else if(keys[i]=="paishui"){
keys[i] = "排水"
}else if(keys[i]=="shangluochong"){
keys[i] = "上落虫"
}
if(values[i] == false){
values[i]=""
}else{
values[i]="primary"
}
}
this.btnGroupName = keys;
this.btnGroupType = values
},
/*初始化采集间隔*/
initGetInterval(data){
var arr = []
arr.push(parseInt(data.inbug_time))
arr.push(parseInt(data.hotTime))
arr.push(parseInt(data.killTime))
arr.push(parseInt(data.squence_time))
this.intervalTime = arr
},
/*初始化工作时段*/
initGetWorkTime(timeControl){
var arr = JSON.parse(timeControl)
var result = []
for (var i = 0; i < arr.length ; i++) {
var dex = arr[i].split("-")
result[i] = dex
}
this.workTimeData = result
},
allShowoperation(dex){
this.isSuccess= dex
this.workTimeEnable=dex
/*采集间隔禁用*/
this.intervalEnable=dex
/*下拉框禁用*/
this.pullDownEnable=dex
this.btnGroupEnable=[dex,dex,dex,dex,dex,dex,dex,dex]
this.zhuanCangPaizhaoEnable=dex
}
},
computed:{
loadingText(){
return "正在"+this.action
},
/*按钮组计算属性组装*/
btnList(){
let myBtnList = []
for(let i = 0; i<this.btnGroupName.length; i++){
myBtnList.push({})
myBtnList[i].name=this.btnGroupName[i]
myBtnList[i].isEnable=this.btnGroupEnable[i]
myBtnList[i].data=this.btnGroupData[i]
myBtnList[i].type=this.btnGroupType[i]
}
return myBtnList
},
},
mounted(){
this.action = "检索数据中"
this.loading=true
/*发送请求看是否设备在线*/
axios.get(base_url+"/api/agrDevs/getEppoDevByDevId?"+"devId="+nid,{
}).then(resp=>{
if(resp.data.devOnline==0){
var dex=true
/*设备在线*/
this.tipMessage='设备在线'
/*更改全面板为显示状态*/
this.allShowoperation(dex)
/*在线的话就去后台取到各个设备的信息*/
/*初始化下拉框*/
this.initPullBox(resp.data.workModel)
/*初始化按钮列表*/
this.initButtonList(resp.data.params)
/*初始化采集间隔*/
this.initGetInterval(resp.data)
/*初始化工作时段*/
this.initGetWorkTime(resp.data.timeControl)
}else{
var dex=false
/*设备不在线*/
this.tipMessage='设备离线'
/*更改全面板为隐藏状态*/
this.allShowoperation(dex)
}
this.loading=false
}).catch(err=>{
console.log(err)
})
}
})
</script>
</html>
07-13
03-07