device_operate_frm.html 12 KB
<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
      <meta name="referrer" content="no-referrer">
      <title>操作命令_frm</title>
      <link rel="stylesheet" type="text/css" href="http://iot.uccc.cc:9090/app/css/api.css"/>
      <link rel="stylesheet" type="text/css" href="http://iot.uccc.cc:9090/app/css/aui.css"/>
      <link rel="stylesheet" type="text/css" href="http://iot.uccc.cc:9090/app/css/home.css"/>
      <link rel="stylesheet" type="text/css" href="http://iot.uccc.cc:9090/app/css/element.css"/>
      <link rel="stylesheet" type="text/css" href="http://iot.uccc.cc:9090/app/css/style.css"/>

      <style>
        html,
        body{
          background-color: #F4F6F9;
        }
      </style>
  </head>
  <body>
    <div id="app">
      <template>
        <div class="store01001-operate-param-title">
          <div style="margin-left:15px;margin-right:15.5px;">
            <div class="aui-row aui-row-flex store01001-operate-top-14">
              <div class="aui-col aui-col-span-1" style="margin-top: 1rem;">
                <div class="store01001-operate-title-sign"></div>
              </div>
              <div class="aui-col aui-col-span-23">
                <span class="store01001-operate-device-name" id="device_imei">设备编号:{{ api.pageParam.imei }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="store01001-operate-info-panel">
          <div class="store01001-operate-info-inside-panel">
            <p class="store01001-operate-padding-top-21 store02001-operate-title">{{ operateTypeTitle }}</p>
            <div class="search-view-inline">
              <div class="select-list aui-ellipsis-1 store02001-operate-input" tapmode @click="selectOperaterType">
                  <span class="store01001-alarm-choose-device-title">{{ currentOperateTypeName }}</span>
                  <i></i>
              </div>
            </div>
            <p class="store01001-operate-padding-top-21 store02001-operate-title">{{ sendCmdTitle }}</p>
            <div class="search-view-inline">
              <div class="select-list aui-ellipsis-1 store02001-operate-input" tapmode @click="selectCmds">
                  <span class="store01001-alarm-choose-device-title">{{ currentSendCmdName }}</span>
                  <i></i>
              </div>
            </div>
            <p class="store01001-operate-padding-top-21 store02001-operate-title">{{ sendParamsTitle }}</p>
            <div class="search-view-inline">
              <div v-if="currentOperateTypeName === '使能控制'" class="select-list aui-ellipsis-1 store02001-operate-input" tapmode @click="selectParams">
                <span class="store01001-alarm-choose-device-title">{{ currentSendParamName }}</span>
                <i></i>
              </div>
              <div v-if="currentOperateTypeName === '设备控制' || currentOperateTypeName === '读取参数'" class="select-list aui-ellipsis-1 store02001-operate-input" style="background-color: rgba(240,245,255,1);">
              </div>
              <div v-if="currentOperateTypeName === '参数设置'" class="select-list aui-ellipsis-1 store02001-operate-input">
                <el-row>
                  <el-col :span=2>&nbsp;</el-col>
                  <el-col :span=17>
                    <input v-if="currentSendCmdName != ''" type="number" v-model="value" :placeholder="'参数范围: ' + setParam.min + ' ~ ' + setParam.max" style="height:2.75rem;" >
                    <input v-else readonly style="height:2.75rem;width: 100%;" >
                  </el-col>
                  <el-col :span=4>{{ setParam.unit }}</el-col>
                  <el-col :span=1>&nbsp;</el-col>
                </el-row>
              </div>
            </div>
            <div class="store02001-operate-send-cmd-btn" tapmode disabled @click="sendCmd"><span>下发指令</span></div>
            <div style="height: 25px;"></div>
          </div>
        </div>
      </template>
    </div>
  </body>
  <script type="text/javascript" src="http://iot.uccc.cc:9090/app/js/api.js"></script>
  <script type="text/javascript" src="http://iot.uccc.cc:9090/app/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="http://iot.uccc.cc:9090/app/js/vue.min.js"></script>
  <script type="text/javascript" src="http://iot.uccc.cc:9090/app/js/common.js"></script>
  <script type="text/javascript" src="http://iot.uccc.cc:9090/app/js/element.js"></script>
  <script type="text/javascript" src="http://iot.uccc.cc:9090/app/js/ctrl.js"></script>
  <script type="text/javascript">
      var vm,
          that;
      apiready = function(){
        api.parseTapmode();

          //---------初始化vue
          vm = new Vue({
            el: '#app',
            data: {
              operateTypeTitle: "操作分类",
              sendCmdTitle: "发送指令",
              sendParamsTitle: "发送参数",
              currentOperateTypeName: "使能控制",
              currentSendCmdName: "",
              currentSendParamName: "",
              //入参
              command: "set",
              action: "",
              value: "",
              imei: api.pageParam.imei,
              user_id: api.getPrefs({sync: true,key: 'userID'}),
              token: api.getPrefs({sync: true,key: 'userToken'}),
              //----
              setParam: {
                unit: "",
                max: 0,
                min: 0
              },
              timeOut: 60,
            },
            mounted() {
              //window.chooseProduct = this.chooseProduct;
            },
            created() {
              that = this
              api.addEventListener({
                name: 'changeOperaterType'
              }, function(ret, err){
                that.currentOperateTypeName = ret.value.curName
                that.command = ret.value.curCmd
                // if (that.currentOperateTypeName === "读取参数" || that.currentOperateTypeName === "设备控制") {
                that.value = ""
                // }
                that.action = ""
                that.currentSendParamName = ""
                that.currentSendCmdName = ""
                that.setParam = {
                  unit: "",
                  max: 0,
                  min: 0
                }
              });
              api.addEventListener({
                name: 'chooseSnType'
              }, function(ret, err){
                that.currentSendCmdName = ret.value.selectedName
                that.action = ret.value.selected
                that.value = ""
                that.currentSendParamName = ""
              });
              api.addEventListener({
                name: 'chooseszType'
              }, function(ret, err){
                that.value = ""
                that.currentSendCmdName = ret.value.selectData.name
                that.action = ret.value.selectData.value
                that.setParam.unit = ret.value.selectData.unit
                that.setParam.max = ret.value.selectData.max
                that.setParam.min = ret.value.selectData.min
              });
              api.addEventListener({
                name: 'chooseSnParam'
              }, function(ret, err){
                that.currentSendParamName = ret.value.selectedName
                that.value = ret.value.selected
              });
            },
            methods: {
              selectOperaterType() {
                api.openFrame({
                  name: 'operater_type_seleter',
                  url: 'http://iot.uccc.cc:9090/app_html/store02001/operaterTypeSelecter.html',
                  // url: './operaterTypeSelecter.html',
                  bounces: false,
                  rect: {
                    x: 0,
                    // y: api.winHeight-203,
                    y: 0,
                    w: api.winWidth,
                    h: api.winHeight
                  },
                  pageParam: {
                    from: 0
                  }
                });
              },
              selectCmds() {
                let ctr_ = this.currentOperateTypeName
                switch (ctr_) {
                  case "使能控制":
                    api.openFrame({
                      name: 'deviceTypeFooter',
                      url: 'http://iot.uccc.cc:9090/app_html/store02001/sn_cmd_footer.html',
                      // url: './sn_cmd_footer.html',
                      bounces: false,
                      rect: {
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h: api.winHeight
                      },
                    });
                  break;
                  case "参数设置":
                    api.openFrame({
                      name: 'paramSetFooter',
                      url: 'http://iot.uccc.cc:9090/app_html/store02001/param_set_footer.html',
                      // url: './param_set_footer.html',
                      bounces: false,
                      rect: {
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h: api.winHeight
                      },
                      pageParam: {
                        command: 'set'
                      }
                    });
                  break;
                  case "读取参数":
                    api.openFrame({
                      name: 'paramSetFooter',
                      url: 'http://iot.uccc.cc:9090/app_html/store02001/param_set_footer.html',
                      // url: './param_set_footer.html',
                      bounces: false,
                      rect: {
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h: api.winHeight
                      },
                      pageParam: {
                        command: 'get'
                      }
                    });
                  break;
                  case "设备控制":
                    api.openFrame({
                      name: 'deviceCtrFooter',
                      url: 'http://iot.uccc.cc:9090/app_html/store02001/device_ctr_footer.html',
                      // url: './device_ctr_footer.html',
                      bounces: false,
                      rect: {
                        x: 0,
                        y: 0,
                        w: api.winWidth,
                        h: api.winHeight
                      },
                    });
                  break;
                  default:
                    break;
                }
              },
              selectParams() {
                api.openFrame({
                  name: 'paramSetFooter',
                  url: 'http://iot.uccc.cc:9090/app_html/store02001/sn_param_footer.html',
                  url: './sn_param_footer.html',
                  bounces: false,
                  rect: {
                    x: 0,
                    y: 0,
                    w: api.winWidth,
                    h: api.winHeight
                  },
                  pageParam: {cmd: this.action}
                });
              },
              async sendCmd() {
                const params = {
                  command: this.command,
                  action: this.action,
                  value: this.value,
                  imei: this.imei,
                  user_id: this.user_id,
                  token: this.token
                }
                let cmdRes = await post_ty_401_send_cmd(params)
                console.log(JSON.stringify(cmdRes));
                if (cmdRes.code===0) {
                  addAlert('指令发送成功,请在日志中查询!');
                }else{
                  api.toast({
                    msg: '发送失败',
                    duration: 2000,
                    location: 'bottom'
                  });
                }
              }
            }
          })
      };
  </script>
</html>