device_details_frm.html 18.2 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: #F4F6F9;
          }
      </style>
  </head>
  <body>
    <div id="app">
      <template>
        <div class="store01001-device-title">
          <div style="margin-left:15px;margin-right:15.5px;">
            <div class="aui-row aui-row-flex top-14">
              <div class="aui-col aui-col-span-1">
                <div class="store01001-title-sign"  style="margin-top: 0.55rem;"></div>
              </div>
              <div class="aui-col aui-col-span-15">
                <span class="store01001-device-details-name"  style="margin-top: 0.6rem;">设备编号:{{ imei }}</span>
              </div>
              <div class="aui-col aui-col-span-8 aui-row-flex-end">
              </div>
            </div>
          </div>
        </div>
        <div class="store01001-info-title2">
          <el-row>
            <el-col :span=8>{{ deviceServerInfoTitle }}</el-col>
            <el-col :span=16 class="store01001-device-details-time">{{ updateTime }} 更新</el-col>
          </el-row>
        </div>
        <div class="store01001-device-details-infos">
          <div class="store01001-device-details-list-panel">
            <div class="store01001-device-details-list-panel-inside">
              <el-row class="store01001-device-details-list-area" v-for="(list_d, list_i) in serverInfoList">
                <div  tapmode @click="editServerInfo(list_i)">
                  <el-col :span=3>
                    <img :src="list_d.img" style="height: 22px;" />
                  </el-col>
                  <el-col :span=7>
                    <span>{{list_d.name}}</span>
                  </el-col>
                  <el-col :span=list_d.span1 style="text-align: right;">
                    <span v-if="list_i===1 || list_i===2 || list_i===3" class="hidden-font-one-line" style="color:rgba(174,184,206,1);font-size:12px;text-align: right;">{{list_d.extra1 | titleFilter }}</span>
                  </el-col>
                  <el-col :span=list_d.span2 v-if="userType === 1">
                    <el-row v-if="list_i===0">
                      <el-col :span=19>
                      <img v-if="list_d.extra2 === 0" src="http://iot.uccc.cc:9090/product/01001/icon_badgeDot_red.png" style="height: 12px;float: right;margin-top: 1.65rem;" />
                      <img v-if="list_d.extra2 === 1" src="http://iot.uccc.cc:9090/product/01001/icon_badgeDot_green.png" style="height: 12px;float: right;margin-top: 1.65rem;" />
                      </el-col>
                      <el-col :span=5>
                        <span v-if="list_i===0 && list_d.extra2 === 0" style="font-size:14px;color:rgba(250,82,81,1);">&nbsp;离线</span>
                        <span v-if="list_i===0 && list_d.extra2 === 1" style="font-size:14px;color:rgba(112,194,72,1);">&nbsp;在线</span>
                      </el-col>
                    </el-row>
                    <i v-if="list_i===1 || list_i===2 || list_i===3" class="aui-iconfont aui-icon-right"></i>
                  </el-col>
                  <el-col :span=list_d.span2 v-if="userType === 2">
                    <el-row v-if="list_i===0">
                      <el-col :span=19>
                      <img v-if="list_d.extra2 === 0" src="http://iot.uccc.cc:9090/product/01001/icon_badgeDot_red.png" style="height: 12px;float: right;margin-top: 1.65rem;" />
                      <img v-if="list_d.extra2 === 1" src="http://iot.uccc.cc:9090/product/01001/icon_badgeDot_green.png" style="height: 12px;float: right;margin-top: 1.65rem;" />
                      </el-col>
                      <el-col :span=5>
                        <span v-if="list_i===0 && list_d.extra2 === 0" style="font-size:14px;color:rgba(250,82,81,1);">&nbsp;离线</span>
                        <span v-if="list_i===0 && list_d.extra2 === 1" style="font-size:14px;color:rgba(112,194,72,1);">&nbsp;在线</span>
                      </el-col>
                    </el-row>
                    <!-- <i v-if="list_i===1 || list_i===2 || list_i===3" class="aui-iconfont aui-icon-right"></i> -->
                  </el-col>
                  <!-- ---- -->
                </div>  
              </el-row>
            </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" src="http://iot.uccc.cc:9090/app/js/fastclick.js"></script>
  <script type="text/javascript" src="../../../script/common.js"></script>
  <script type="text/javascript" src="../../../script/ctrl.js"></script>
  <script type="text/javascript">
      var vm,
          that,
          inputDialogJSON;
      apiready = function(){
        api.parseTapmode();
        inputDialogJSON = returnInputDialogJSON()
        $(function() {
                  FastClick.attach(document.body);
        });

          //---------初始化vue
          vm = new Vue({
            el: '#app',
            data: {
              productId: api.pageParam.productId,
              imei: api.pageParam.imei,
              deviceServerInfoTitle: '设备终端信息',
              serverInfoListTemp: [
                {img: "http://iot.uccc.cc:9090/product/01001/icon_deviceInfo_sbzt.png", name: '设备状态', extra1: '', extra2: 0, span1: 0, span2: 14},
              ],
              serverInfoList: [],
              userId: api.getPrefs({sync: true,key: 'userID'}),
              token: api.getPrefs({sync: true,key: 'userToken'}),
              devicePwd: '',
              updateTime: '',
              measureInfoList: [],
              detailInfo: {},
              userType: Number(api.getPrefs({sync: true,key: 'userType'})),
            },
            mounted() {
              //window.chooseProduct = this.chooseProduct;
            },
            created() {
              that = this
              /** 下拉刷新 */
              api.setRefreshHeaderInfo({
                  loadingImg:'widget://image/alpha0.png',
                  bgColor: '#5B7FF8',
                  textColor: 'rgba(255,255,255,0.5)',
                  textDown: '下拉刷新...',
                  textUp: '松开刷新...'
              }, function(ret, err) {
                that.initData1();
                api.refreshHeaderLoadDone();
              });


              this.initData1()
              // this.initData2()
            },
            filters: {
              titleFilter(t) {
                if (t != null) {
                  if (t.length > 10) {
                    return t.substring(0, 9) + "..."
                  }else {
                    return t
                  }  
                }else {
                  return '暂无'
                }
              }
            },
            methods: {
              async initData1() {
                const params = {
                  userId: this.userId,
                  imei: this.imei,
                  token: this.token
                }
                let deviceInfosRes = await get_device_infos_by_imei(params)
                let deviceInfo = deviceInfosRes.data.device
                this.detailInfo = eval("deviceInfo.store"+(deviceInfo.storeType.table))
                console.log(JSON.stringify(this.detailInfo));
                
                // 设备终端信息
                if (deviceInfo.online) {
                  this.serverInfoListTemp[0].extra2 = 1
                }
                // {img: "http://iot.uccc.cc:9090/product/01001/icon_deviceInfo_sbwz.png", name: '设备位置', extra1: '', extra2: '', span1: 12, span2: 2},
                // {img: "http://iot.uccc.cc:9090/product/01001/sbmm.png", name: '设备密码', extra1: '修改设备密码', extra2: '', span1: 12, span2: 2},
                // {img: "http://iot.uccc.cc:9090/product/01001/icon_deviceInfo_sbmm.png", name: '设备名称', extra1: '', extra2: '', span1: 12, span2: 2},
                if (this.userType === 1) {
                  this.serverInfoListTemp[1] = {img: "http://iot.uccc.cc:9090/product/01001/icon_deviceInfo_sbwz.png", name: '设备位置', extra1: '', extra2: '', span1: 12, span2: 2}
                  this.serverInfoListTemp[1].extra1 = deviceInfo.bind.address
                  this.serverInfoListTemp[2] = {img: "http://iot.uccc.cc:9090/product/01001/sbmm.png", name: '设备密码', extra1: '修改设备密码', extra2: '', span1: 12, span2: 2}
                  this.serverInfoListTemp[3] = {img: "http://iot.uccc.cc:9090/product/01001/icon_deviceInfo_sbmm.png", name: '设备名称', extra1: '', extra2: '', span1: 12, span2: 2}
                  if (deviceInfo.bind.storename != null) {
                    this.serverInfoListTemp[3].extra1 = deviceInfo.bind.storename
                  }else {
                    this.serverInfoListTemp[3].extra1 = this.imei
                  }
                }else if (this.userType === 2) {
                  this.serverInfoListTemp[1] = {img: "http://iot.uccc.cc:9090/product/01001/icon_deviceInfo_txlx.png", name: '通信类型', extra1: '', extra2: '', span1: 12, span2: 2}
                  this.serverInfoListTemp[2] = {img: "http://iot.uccc.cc:9090/product/01001/icon_deviceInfo_sbwz.png", name: '设备位置', extra1: '', extra2: '', span1: 12, span2: 2}
                  this.serverInfoListTemp[3] = {img: "http://iot.uccc.cc:9090/product/01001/icon_deviceInfo_ssxm.png", name: '所属项目', extra1: '', extra2: '', span1: 12, span2: 2}
                  this.serverInfoListTemp[1].extra1 = deviceInfo.nbmodel
                  this.serverInfoListTemp[2].extra1 = deviceInfo.location
                  this.serverInfoListTemp[3].extra1 = deviceInfo.groupName
                }
                this.devicePwd = deviceInfo.password
                this.updateTime = parseTime(deviceInfo.updatedAt,'{y}-{m}-{d} {h}:{i}:{s}')

                let serverInfoTemp = this.serverInfoListTemp
                // this.serverInfoListTemp.forEach((d, i) => {
                //   // 缓存图片
                //   let pic_url_ = api.getPrefs({sync: true,key: d.img})
                //   if (!pic_url_) {
                //     api.imageCache({
                //         url: d.img
                //     }, function(ret, err) {
                //         let url = ret.url;
                //         // $api.setStorage(d.img, url);
                //         api.setPrefs({
                //           key: d.img,
                //           value: url
                //         });
                //         serverInfoTemp[i].img = url
                //     });
                //   }else {
                //     serverInfoTemp[i].img = pic_url_
                //   }
                // })
                this.serverInfoList = serverInfoTemp
                // this.measureInfoListTemp.forEach((d, i) => {
                //   // 缓存图片
                //   let pic_url_ =  api.getPrefs({sync: true,key: d.img})
                //   if (!pic_url_) {
                //     api.imageCache({
                //         url: d.img
                //     }, function(ret, err) {
                //         let url = ret.url;
                //         // $api.setStorage(d.img, url);
                //         api.setPrefs({
                //           key: d.img,
                //           value: url
                //         });
                //         measureInfoTemp[i].img = url
                //     });
                //   }else {
                //     measureInfoTemp[i].img = pic_url_
                //   }
                // })
              },
              editServerInfo(index) {
                switch (index) {
                  case 1: //position
                    this.changePosition()
                    break;
                  case 6: //resetPwd
                    this.resetDevice()
                    break;
                  case 7: //devicename
                    this.changeDeviceName()
                    break;
                  default:
                    break;
                }
              },
              resetDevice() {
                let curPwd = this.devicePwd
                if (curPwd == null) {
                  inputDialogJSON.texts.title = "此设备未设置过密码!"
                }else {
                  inputDialogJSON.texts.title = "原密码:" + curPwd
                }
                inputDialogJSON.texts.placeholder = "请输入新密码"
                inputDialogJSON.styles.title.color = '#37394E'
                let dialogBox = api.require('dialogBox')
                dialogBox.input(inputDialogJSON, async function(ret) {
                  if (ret.eventType == 'left') {
                      var dialogBox = api.require('dialogBox');
                      dialogBox.close({
                          dialogName: 'input'
                      });
                  }else if (ret.eventType == "right") {
                    if (curPwd == null) {
                      api.toast({msg: '该设备无法设置密码!'});
                      return;
                    }
                    let regularRes = /^\d+$/.test(ret.text);
                    if (regularRes && ret.text.length <= 6 && ret.text.length > 0) {
                      let updatePwdParams = {
                        token: api.getPrefs({sync: true,key: 'userToken'}),
                        old_pwd: curPwd,
                        new_pwd: ret.text,
                        imei: that.imei
                      }
                      let updatePwdRes = await post_update_device_pwd(updatePwdParams)
                      console.log(JSON.stringify(updatePwdRes));
                      if ( updatePwdRes.code == 0 ) {
                        var dialogBox = api.require('dialogBox');
                        dialogBox.close({
                            dialogName: 'input'
                        });
                        that.initData1()
                        api.toast({msg: '设备密码已重置!'});
                      }else {
                        api.toast({
                            msg: "更新失败," + ajaxCodeCheck(ret.code, ret.msg, '请稍后再试')
                        });
                      }
                    }else {
                      api.toast({msg: '请输入6位以内数字'});
                      return;
                    }
                  }
                });
              },
              changePosition() {
                api.prompt({
                    title: '修改设备地址',
                    text: this.serverInfoList[5].extra1,
                    buttons: ['取消', '确定']
                },async function(ret, err) {
                    var index = ret.buttonIndex;
                    var text = ret.text;
                    if (index == 2) {
                      if (text.length <= 15 && text != '') {
                        let params = {
                          imei: that.imei,
                          user_id: that.userId,
                          address: text
                        }
                        let handleRes = await post_modify_device_info(that.token, params)
                        console.log(JSON.stringify(handleRes));

                        if (handleRes.code === 0) {
                          api.toast({msg: '修改成功'});
                          that.initData1()
                        }else {
                          api.toast({msg: '修改失败'});
                        }
                      }else if (text == '') {
                        api.toast({msg: '设备名称不可为空'});
                      }else if (text.length > 15) {
                        api.toast({msg: '设备名称最多15个字符!'});
                      }
                    }
                });
              },
              changeDeviceName() {
                api.prompt({
                    title: '修改设备名称',
                    text: this.serverInfoList[7].extra1,
                    buttons: ['取消', '确定']
                },async function(ret, err) {
                    var index = ret.buttonIndex;
                    var text = ret.text;
                    if (index == 2) {
                      if (text.length <= 15 && text != '') {
                        let params = {
                          imei: that.imei,
                          user_id: that.userId,
                          store_name: text
                        }
                        let handleRes = await post_modify_device_info(that.token, params)
                        if (handleRes.code === 0) {
                          api.toast({msg: '修改成功'});
                          that.initData1()
                        }else {
                          api.toast({msg: '修改失败'});
                        }
                      }else if (text == '') {
                        api.toast({msg: '设备名称不可为空'});
                      }else if (text.length > 15) {
                        api.toast({msg: '设备名称最多15个字符!'});
                      }
                    }
                });
              }
            }
          })
      };
  </script>
</html>