my_devices_frm.html 13.9 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">
      <title>我的设备</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/home.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/element.css"/>
      <link rel="stylesheet" type="text/css" href="../../css/style.css"/>

  </head>
  <style>
    html,
    body{
      background: #F4F6F9;
    }
  </style>
  <body>
    <div id="app">
      <template>
        <div class="search-view-inline" tapmode @click="chooseDeviceType">
          <div class="select-list aui-ellipsis-1">
              <span class="choose-device-title">设备型号 {{ selectTypeName }}</span>
              <i></i>
          </div>
        </div>
        <div class="device-list-outside">
          <div class="device-list-area">
            <div class="device-info-card my-device-card-bg" v-for="(bind_list_d, bind_list_i) in bindList">
              <div class="device-info-card-inside my-device-card-inside-bg" @click="handleDevice(bind_list_d)">
                <el-row :gutter="10">
                  <el-col :span=5>
                    <div class="card-img">
                      <img :src="bind_list_d.store.storeType.pic_url"/>
                      <span class="ms">{{ bind_list_d.store.storeType.name }}</span>
                    </div>
                  </el-col>
                  <el-col :span=17 :offset=2>
                    <el-row>
                      <el-col :span=24 style="margin-top: 0rem;">
                        <span v-if="bind_list_d.storename != null && bind_list_d.storename != ''" class="my-device-title">{{ bind_list_d.storename }}</span>
                        <span v-else class="my-device-title">{{ bind_list_d.imei }}</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span=24 style="margin-top: 0rem;">
                        <span class="my-device-code-and-position">设备编号: {{ bind_list_d.imei }}</span>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span=24 style="margin-top: 0rem;">
                        <span v-if='userType === 1' class="my-device-code-and-position">设备位置: {{ bind_list_d.province }} {{ bind_list_d.city }} {{ bind_list_d.address }}</span>
                        <span v-if='userType === 2' class="my-device-code-and-position">设备位置: {{ bind_list_d.location }}</span>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
              <!-- 操作按钮 -->
              <div class="my-device-btn-area">
                <el-row>
                  <el-col :span=24>
                    <div v-if="userType === 1"  class="my-device-btn-delete" @click="removeDevice(bind_list_d.imei, bind_list_d.id)">删除设备</div>
                    <div v-if="userType === 1"  class="my-device-btn-reset-pwd" @click="resetDevice(bind_list_d.imei)">重置密码</div>
                  </el-col>
                </el-row>
              </div>
              <!-- ---- -->
            </div>

          </div>
        </div>
      </template>
    </div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>
  <script type="text/javascript" src="../../script/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/element.js"></script>
  <script type="text/javascript" src="../../script/ctrl.js"></script>
  <script type="text/javascript">
      var vm,
          inputDialogJSON,
          that;
      apiready = function(){
        api.parseTapmode();
        inputDialogJSON = returnInputDialogJSON()

        api.setRefreshHeaderInfo({
            bgColor: '#F4F6F9',
            textColor: 'rgba(55,57,78,1)',
            textDown: '下拉刷新设备列表...',
            textUp: '松开刷新...'
        }, function(ret, err) {
          refreshList();
          api.refreshHeaderLoadDone();
        });
        //---------初始化vue
        vm = new Vue({
          el: '#app',
          data: {
            typeList: [],
            token: api.getPrefs({sync: true,key: 'userToken'}),
            bindParams: {
              user_id: api.getPrefs({sync: true,key: 'userID'}),
              params: {},
              type: "",
              imei: "",
              limit: 1000,
              page: 1,
              dtu_imei: "",
            },
            bindList: [],
            selectedProductId: "",
            selectTypeName: "",
            userType: Number(api.getPrefs({sync: true,key: 'userType'})),
          },
          mounted() {
            window.refreshList = this.refreshList;
            this.initTypes()
            this.searchByCondition(this.selectedProductId)
          },
          created() {
            that = this;
            api.addEventListener({
              name: 'choose_product_type'
            }, function(ret, err){
              that.selectTypeName = ret.value.selectedName
              that.selectedProductId = ret.value.selected
              that.searchByCondition(that.selectedProductId)
            });
            
          },
          methods: {
            async initTypes() { //获取所有设备型号
              var result = await get_product_type_list()
              if (result && result.data.TotalCount > 0) {
                this.typeList = result.data.List
              }
            },
            async searchByCondition(productId) {
              api.showProgress({
                  style: 'default',
                  animationType: 'fade',
                  title: '加载中...',
                  text: '',
                  modal: false
              });
              this.bindList = []
              if (productId != '') {
                this.bindParams.type = productId
              }
              var user_perference = await get_product_perference(this.bindParams.user_id)
              let userPreferenceList = user_perference.data

              for (let i = 0; i < userPreferenceList.length; i++) {
                const productPref = JSON.parse(userPreferenceList[i]);
                const prefList = []
                productPref.data_index.forEach(d => {
                  prefList.push('"'+d+'"')
                });
                eval('this.bindParams.params["' + productPref.name +'"]=[' + prefList + ']')
              }
              let bind_list_data_ = {}
              if (this.userType === 1) {
                bind_list_data_ = await get_bind_list_data(this.bindParams)  
              }else if (this.userType === 2) {
                //单位下所有设备
                bind_list_data_ = await get_enterprise_group_store(this.bindParams)
              }
              api.hideProgress();
              api.refreshHeaderLoadDone();
              if (bind_list_data_.data.list.count > 0) {
                let rows = bind_list_data_.data.list.rows
                rows.forEach(b => {
                  if (b.store === null && b.type === '05001') {
                    b.store = {
                      storeType: {
                        name: 'TY-140',
                        pic_url: 'http://iot.uccc.cc:9090/product/05001.png',
                      }
                    }
                  }
                });
              }
              let handleList = bind_list_data_.data.list.rows
              this.bindList = handleList
            },
            removeDevice(imei, deviceId) {
              var dialogBox = api.require('dialogBox');
              dialogBox.alert({
                  texts: {
                      title: '确认移除设备',
                      content: '设备编号:' + imei,
                      leftBtnTitle: '取消',
                      rightBtnTitle: '确认'
                  },
                  styles: {
                      bg: '#fff',
                      w: 300,
                      corner:6,
                      title: {
                          marginT: 30,
                          icon: '',
                          iconSize: 40,
                          titleSize: 16,
                          titleColor: '#37394e'
                      },
                      content: {
                          color: '#818295',
                          size: 14
                      },
                      left: {
                          marginB: 7,
                          marginL: 20,
                          w: 130,
                          h: 35,
                          corner: 10,
                          bg: '#5B7FF8',
                          color: '#FFFFFF',
                          size: 12
                      },
                      right: {
                          marginB: 7,
                          marginL: 10,
                          w: 130,
                          h: 35,
                          corner: 10,
                          bg: '#5B7FF8',
                          color: '#FFFFFF',
                          size: 12
                      }
                  }
              },async function(ret) {
                  if (ret.eventType == 'left') {
                    dialogBox.close({
                        dialogName: 'alert'
                    });
                  }else if (ret.eventType == 'right') {
                    let unbindParams = {
                      token: that.token,
                      deviceId: deviceId,
                    }
                    let unbindRes = await unbind_device(unbindParams)
                    if (unbindRes.code == 0) {
                      //删除设备同步推送
                      var ajpush = api.require('ajpush')
                      initAndListenPush(ajpush, false)
                      refreshList();
                      api.toast({
                          msg: '移除设备成功!',
                          duration: 2000,
                          location: 'bottom'
                      })
                      dialogBox.close({
                        dialogName: 'alert'
                      });
                    }
                  }
              });
            },
            async resetDevice(imei) {
              const getPwdParams = {
                token: this.token,
                userId: this.bindParams.user_id,
                imei: imei,
              }
              let getPwd = await get_device_info_by_user(getPwdParams)
              let curPwd = getPwd.data.device.password
              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) {
                    const updatePwdParams = {
                      token: api.getPrefs({sync: true,key: 'userToken'}),
                      old_pwd: curPwd,
                      new_pwd: ret.text,
                      imei: imei
                    }
                    let updatePwdRes = await post_update_device_pwd(updatePwdParams)
                    if ( updatePwdRes.code == 0 ) {
                      var dialogBox = api.require('dialogBox');
                      dialogBox.close({
                          dialogName: 'input'
                      });
                      refreshList();
                      api.toast({msg: '设备密码已重置!'});
                    }else {
                      api.toast({
                          msg: "更新失败," + ajaxCodeCheck(ret.code, ret.msg, '请稍后再试')
                      });
                    }
                  }else {
                    api.toast({msg: '请输入6位以内数字'});
                    return;
                  }
                }
              });
            },
            refreshList() {
              this.selectedProductId = 'all'
              this.searchByCondition('all')
            },
            chooseDeviceType() {
              api.openFrame({
                name: 'deviceTypeFooter',
                url: '../utils/device_type_footer.html',
                bounces: false,
                rect: {
                  x: 0,
                  y: 0,
                  w: api.winWidth,
                  h: api.winHeight
                },
                pageParam: {
                  selectedProductId: this.selectedProductId
                }
              });
            },
            handleDevice(d) {
              if (d.store.storeType.name === 'TY-140') {
                console.log(999);
                api.openWin({
                  name: 'dtu_devices_win',
                  url: './dtu_devices_win.html',
                  slidBackEnabled: true,
                  pageParam: {imei: d.imei}
                });
              }
            }
          }
        })
      };
  </script>
</html>