appLoader样例vue-cli3+elementUI(记录)

<!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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
APICloud AppLoader APICloud AppLoaderv1.2.18更新日志 模块新增: 1.waterBallProgress 概述:水球波浪加载指示器模块(来自个人模块开发者) 2.duibaSales 概述:兑吧商城模块(来自个人模块开发者) 3.yunnex 概述:掌贝POS硬件调用对接SDK(来自个人模块开发者) 4.sunmiPrinter 概述:商米打印模块,支持商米主推的智能商用硬件V1(来自个人模块开发者) 5.toBackground 概述:可用于Android App一键进入后台运行模块(来自个人模块开发者) 6.realNetwork 概述:检测手机是否能真正上网,避免手机接入“伪链接”(来自个人模块开发者) 模块优化: 1.UIMultiSelector 模块open接口添加 maskClose 参数,自定义点击遮罩层是否关闭选择器功能,回调函数内 添加clickMask事件(用户点击遮罩层事件) 2.UIMultiSelector模块开源源码更新:地址:https://github.com/apicloudcom/UIMultiSelector 3.ble 模块开源源码更新,地址:https://github.com/apicloudcom/ble 4.ble模块添加getPeripheralRssi接口,获取指定设备的rssi值 5.UIPullRefreshMotive、UIPullRefreshFlash、pullRefreshLoop、UIPullRefresh、UIPullRefreshDrop下拉刷新模块在iOS平台更新与页面弹动冲突问题 6.aMap模块在iOS平台上更新原生SDK 为当前最新版本,getLocation接口回调里添加 altitude参数,支持返回海拔信息 7.aMap模块开源源码更新:地址:https://github.com/apicloudcom/aMap 8.aMapLBS 模块在 iOS 平台上更新原生 SDK 为高德当前发布最新版本,支持返回海拔信息 9.aMapReportLocation 模块在 iOS 平台上更新原生 SDK 为高德当前发布最新版本,支持返回海拔信息 10.aMapNavigation模块在 iOS 平台上跟新原生 SDK 为高德当前发布最新版本 11.miniQuPai 模块修复在iOS 平台上横屏时录制界面布局异常问题 12.polyvVideo 在iOS平台上添加setPlayerFrame接口,用于设置播放器的frame值
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值