<template>
  <div>
    <el-row :gutter="20" class="elrow">
      <el-col :span="24">
        <el-card shadow="hover">
          <el-row>
            <el-col :span="6">
              <div class="grid-content grid-con-1">
                <div class="colposition">
                  <img src="../../assets/img/mszssbgl.png" class="w100" alt="" />
                  <div class="grid-cont-right">
                    <div>网关总数</div>
                    <div class="grid-num">{{ sumpageTotal }}</div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" class="">
              <div class="grid-content grid-con-2">
                <div class="colposition">
                  <img src="../../assets/img/wifisbgl.png" class="w100" alt="" />
                  <div class="grid-cont-right">
                    <div>在线状态</div>
                    <div class="grid-num">{{ online }}</div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" class="">
              <div class="grid-content grid-con-2">
                <div class="colposition">
                  <img src="../../assets/img/lxztsbgl.png" class="w100" alt="" />
                  <div class="grid-cont-right">
                    <div>离线状态</div>
                    <div class="grid-num">{{ unonline }}</div>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="6" class="">
              <div class="grid-content grid-con-2">
                <div class="colposition">
                  <img src="../../assets/img/wifisbgl1.png" class="w100" alt="" />
                  <div class="grid-cont-right">
                    <div>异常状态</div>
                    <div class="grid-num">{{ abnormal }}</div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div class="container">
      <div class="handle-box">
        <selectoption></selectoption>
        <el-cascader :options="options" size="small" :props="{ checkStrictly: true }"  v-model="searchRoom" @change="checkNode" placeholder="请选择房源" clearable >
        </el-cascader>
        <el-input v-model="search.roomname" size="small" placeholder="房间名称" :clearable="true" @input="changesr($event)"
          class="handle-input mr10 width100">
        </el-input>
        <el-input v-model="search.deviceNum" size="small" placeholder="序列号" :clearable="true" @input="changesr($event)"
          class="handle-input mr10 width100">
        </el-input>
        <el-input v-model="search.imei" size="small" placeholder="IMEI" :clearable="true" @input="changesr($event)"
          class="handle-input mr10 width100">
        </el-input>
        <el-select v-model="search.isOnline" size="small" placeholder="状态" class="handle-select mr10" clearable>
          <el-option key="1" label="离线" value="0"></el-option>
          <el-option key="2" label="在线" value="1"></el-option>
          <el-option key="3" label="异常" value="2"></el-option>
        </el-select>
        <el-select v-model="search.unBind" size="small" placeholder="绑定状态" class="handle-select mr10" :clearable="true">
          <el-option key="0" label="已绑定" value="0"></el-option>
          <el-option key="1" label="未绑定" value="1"></el-option>
        </el-select>
        <div class="quantity">
          电量： <el-input placeholder="" v-model="search.startBattery" @input="InputFun($event,'startBattery')"
            class="w50" size="mini">
            <template slot="append">%</template>
          </el-input> - <el-input placeholder="" v-model="search.endBattery" @input="InputFun($event,'endBattery')"
            class="w50" size="mini">
            <template slot="append">%</template>
          </el-input>
        </div>
        <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" size="small" @click="addequipment" v-show="info.type == 0">添加设备</el-button>
        <el-button type="primary" size="small" @click="BatchAdd" v-show="info.type == 0">批量添加</el-button>
        <el-button type="primary" size="small" @click="restSearch">重置</el-button>
        <el-button type="primary" size="small" @click="refreshFun" v-show="info.type == 0">同步设备信息</el-button>
        <!-- <el-button type="primary" size="small" @click="syncCommands" v-show="info.type == 0">同步有效凭证</el-button> -->
      </div>
      <div class="switchiconfont">
        <i class="iconfont httpicon-liebiao1" :class="activeiconfont ? 'active' : ''" @click="activeiconfun(true)"
          title="切换方块展示"></i>
        <i class="iconfont httpicon-liebiao" :class="activeiconfont ? '' : 'active'" @click="activeiconfun(false)"
          title="切换表格展示"></i>
      </div>
      <div class="roomcontent" v-if="activeiconfont">
        <div class="roomconli" v-for="(item, index) in tableData" :key="index">
          <deviceLi :data="item" :src="deviceImg"></deviceLi>
          <div class="button-list">
            <div @click="unbindsave(index, item)" v-if="item.roomId ? true : false">
              解绑房间
            </div>
            <div @click="bindRoom(index, item)" v-else>绑定房间</div>
            <div @click="detailsFun(index, item)">设备详情</div>
            <div @click="deleteLock(index, item)">删除</div>
          </div>
        </div>
      </div>
      <el-table :data="tableData" border stripe class="table" ref="multipleTable" header-cell-class-name="table-header"
        @selection-change="handleSelectionChange" empty-text="无" v-else>
        <el-table-column prop="deviceNum" label="设备号" width="200"></el-table-column>
        <el-table-column prop="accessPlatformText" label="锁平台"></el-table-column>
        <el-table-column prop="imei" label="IMEI" width="150">
          <template slot-scope="scope">
            <span class="" v-if="scope.row.imei">{{ scope.row.imei }}</span>
            <span class="" v-else>空</span>
          </template>
        </el-table-column>
        <el-table-column prop="imsi" label="IMSI" width="150">
          <template slot-scope="scope">
            <span class="" v-if="scope.row.imsi">{{ scope.row.imsi }}</span>
            <span class="" v-else>空</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="信号强度" width="150">
          <template slot-scope="scope">
            <i class="iconfont httpicon-xinhao38 red" v-if="scope.row.rssi <= 10"></i>
            <i class="iconfont httpicon-xinhao38 orange" v-else-if="10 < scope.row.rssi && scope.row.rssi < 20"></i>
            <i class="iconfont httpicon-xinhao38 green" v-else-if="20 <= scope.row.rssi && scope.row.rssi <= 100"></i>
            <i class="iconfont httpicon-wuxinhao red" v-else></i><span class="spanli dling">
              {{ scope.row.rssi || 0}}</span>
          </template>
        </el-table-column>
        <el-table-column label="电量">
          <template slot-scope="scope">
            <i class="iconfont httpicon-dianchi-didianliang red" v-if="scope.row.battery <= 20"></i>
            <i class="iconfont httpicon-icon-test orange"
              v-else-if="20 < scope.row.battery && scope.row.battery < 60"></i>
            <i class="iconfont httpicon-icon-test green"
              v-else-if="60 <= scope.row.battery && scope.row.battery <= 100"></i>
            <i class="iconfont httpicon-icon-test red" v-else></i><span class="spanli dling"> {{ scope.row.battery || 0
              }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="在线状态" align="center">
          <template #default="scope">
            <el-tag :type="
                scope.row.isOnline == '1'
                  ? 'success'
                  : scope.row.isOnline == '0'
                  ? 'danger'
                  : ''
              "><span v-if="scope.row.isOnline == 1">在线</span>
              <span v-else>离线</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="绑定房间" width="200">
          <template slot-scope="scope">
            <span class="blue" v-if="scope.row.roomName">{{
              scope.row.roomName
              }}</span>
            <span class="" v-else>空</span>
          </template>
        </el-table-column>
        <el-table-column prop="firmwareVersion" label="版本" width="160"></el-table-column>
        <el-table-column prop="createAt" label="创建时间" width="160"></el-table-column>
        <el-table-column label="操作" width="400" align="center" fixed="right">
          <template #default="scope">
            <el-button type="text" @click="unbindsave(scope.$index, scope.row)" v-if="scope.row.roomId" class="red">解绑房间
            </el-button>
            <el-button type="text" v-else @click="bindRoom(scope.$index, scope.row)">绑定房间</el-button>
            <el-button type="text" @click="detailsFun(scope.$index, scope.row)">设备详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
          :current-page="$store.state.currentPage" :page-sizes="[10,20,100]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
        </el-pagination>
      </div>
    </div>
    <!-- 绑定房间 -->
    <el-dialog title="绑定房间" :visible.sync="roomVisible" width="30%">
      <div class="ztree">
        <!-- <zTree :setting="setting" :nodes="zNodes" @onClick="onClick" /> -->
        <el-tree :data="zNodes" show-checkbox node-key="id" ref="tree" @check-change="handleCheckChange"
          :props="defaultProps"></el-tree>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="roomVisible = false">取 消</el-button>
          <el-button type="primary" @click="bindsave">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 远程开锁输入密码 -->
    <el-dialog title="远程开锁密码" :visible.sync="Unlocking" width="30%">
      <div>
        <el-form ref="locking" :model="lockingform" label-width="100px">
          <el-form-item label="管理员密码">
            <el-input v-model="lockingform.password" show-password :clearable="true"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="Unlocking = false">取 消</el-button>
          <el-button type="primary" @click="Unlockingsave">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="型号">
          <el-select v-model="form.manufacturer" placeholder="请选择">
            <el-option v-for="item in manufacturerList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
       <div v-if="form.manufacturer == 799">
         <el-form-item label="设备号">
           <el-input v-model="form.deviceNum" :clearable="true"></el-input>
         </el-form-item>
         <el-form-item label="设备验证码">
           <el-input v-model="form.validateCode" :clearable="true"></el-input>
         </el-form-item>
         <el-form-item label="选择房间">
           <el-cascader :options="options" size="small" :props="{ checkStrictly: true }" @change="checkNodeOne"
             v-model="checkNodeId1" clearable>
           </el-cascader>
         </el-form-item>
       </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="initialization">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-drawer title="设备详情" :visible.sync="drawer" custom-class="operationclass" size="50%" :before-close="handleClose">
      <div class="rltable">
        <el-tabs v-model="activeName" border @tab-click="handleClick">
          <el-tab-pane label="设备详情" name="0">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="设备号:">
                <span class="half">{{ formInline.deviceNum }}</span>
              </el-form-item>
              <el-form-item label="IMEI:">
                <span class="half">{{ formInline.imei }}</span>
              </el-form-item>
              <el-form-item label="IMSI:">
                <span class="half">{{ formInline.imsi }}</span>
              </el-form-item>
              <el-form-item label="信号强度:">
                <span class="half">{{ formInline.rssi }}</span>
              </el-form-item>
              <el-form-item label="电池电量:">
                <span class="half">{{ formInline.battery }}</span>
              </el-form-item>
              <el-form-item label="在线状态:">
                <span class="half" v-if="formInline.isOnline == 1">在线</span>
                <span class="half" v-else>离线</span>
              </el-form-item>
              <el-form-item label="绑定房间:">
                <span class="half">{{ formInline.roomName }}</span>
              </el-form-item>
              <el-form-item label="添加时间:">
                <span class="half">{{ formInline.createAt }}</span>
              </el-form-item>
              <el-form-item label="更新时间:">
                <span class="half">{{ formInline.lastReportAt }}</span>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="子设备" name="1">
            <childDeviceList :deviceNum="senddeviceNum" v-if="sendStatus"></childDeviceList>
          </el-tab-pane>
          </el-tab-pane>
          <el-tab-pane label="警告日志" name="2">
            <warningLog :deviceNum="senddeviceNum" v-if="sendStatus"></warningLog>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <el-dialog title="批量上传" :visible.sync="uploadkj" width="70%">
      <input class="input-file" type="file" @change="exportData"
        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
      <!-- <button @click="btnClick">导入EXCEL</button> -->
      <el-button type="primary" @click="btnClick" size="mini">导入EXCEL</el-button>
      <el-select v-model="batchAccess" placeholder="请选择" size="mini">        
          <el-option  v-for="item in accessPlatform.select" :key="item.code" :label="item.desc" :value="item.code">
          </el-option>
      </el-select>
      <el-form ref="form" :model="form" label-width="70px"> </el-form>
      <el-table :data="userlist2" v-if="userlist1statu" border class="table" ref="multipleTable1" height="200"
        header-cell-class-name="table-header" @selection-change="handleSelectionChange1">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="ID" label="ID" align="center"></el-table-column>
        <el-table-column prop="deviceNum" label="设备号" align="center"></el-table-column>
        <el-table-column prop="imei" label="IMEI" align="center"></el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="uploadkj = false">取 消</el-button>
          <el-button type="primary" @click="batchUploadfun">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog title="紧急密码，每天仅能用一次" :visible.sync="getEmergenceStatus" width="30%">
      <el-form ref="Emergence" :model="Emergence" label-width="80px">
        <el-form-item label="临时密码">
          <el-input v-model="Emergence.password" placeholder="" disabled class="handle-input mr10"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="Emergence.EmerPhone" type="number" maxlength="11" placeholder="请输入手机号" :clearable="true"
            class="handle-input mr10">
          </el-input>
        </el-form-item>
      </el-form>
      <!-- <span>{{getEmergenceNum}}</span> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="getEmergenceStatus = false">取 消</el-button>
        <el-button type="primary" @click="sendEmergence">发 送</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    httpGet,
    httpPost,
    download
  } from "../../api";
  import zTree from "../../components/zTree1.vue";
  import deviceLi from "../../components/deviceLi.vue";
  import UnlockRecord from "../../components/UnlockRecord.vue"
  import DeviceFeedbackLog from "../../components/DeviceFeedbackLog.vue"
  import warningLog from "../log/gatewayLog.vue"
  import childDeviceList from "../../components/childDeviceList.vue"
  import {
    uniqueArray,
    ztreeToElementTree,
    uniqueArray1
  } from "../../utils/index";
  import XLSX from "xlsx";
  import utils from "../../utils/util.js";
  import ICINLocker from "../../utils/equipment.js"
  import moment from 'moment'
  import RequestSet from "../../api/allFun.js"
  export default {
    inject: ['reload'],
    name: "doorLock",
    data() {
      return {
				searchRoom:'',
        deviceImg:require('../../assets/img/kqjc.png'),
        selectoption: [],
        selectoptionValue: '',
        senddeviceNum: '',
        sendroomId: '',
        commpontentStatus: true,
        Emergence: {
          EmerPhone: '',
          password: '',
          device: '',
          name: ''
        },
        defaultProps: {
          children: "children",
          label: "name",
        },
        options: [],
        drawer: false,
        value1: false,
        value2: 0,
        marks: {
          0: "关",
          50: "中",
          100: "高",
        },
        switchtext: "关",
        activeName: "0",
        formInline: {},
        platlist: [{
          label: "电信",
          value: 1
        }, {
          label: "移动",
          value: 2
        }, {
          label: "联通",
          value: 3
        }, ],
        manufacturerList: [],
        setting: {
          edit: {
            enable: true,
            drag: {
              isMove: true,
            },
            showRemoveBtn: false,
            showRenameBtn: false,
          },
          check: {
            enable: false,
          },
          data: {
            simpleData: {
              enable: true,
              pIdKey: "pid",
            },
          },
          view: {
            showIcon: true,
            addHoverDom: this.addHoverDom,
            removeHoverDom: this.removeHoverDom,
          },
        },
        zNodes: [],
        bromm: {},
        query: {
          address: "",
          name: "",
          pageIndex: 1,
          pageSize: 20,
          options: [],
        },
        search: {
          name: "",
          deviceNum: "",
          roomname: '',
          imei: "",
          isOnline: "",
          startBattery: '0',
          endBattery: '100'
        },
        tableData: [],
        multipleSelection: [],
        delList: [],
        editVisible: false,
        roomVisible: false,
        pageTotal: 0,
        sumpageTotal: 0,
        currentPage4: 1,
        form: {
          manufacturer: "",
          validateCode: ''
        },
        idx: -1,
        id: -1,
        abnormal: 0,
        online: 0,
        treedata: [],
        unonline: 0,
        Unlocking: false,
        Unlockingrow: {},
        lockingform: {
          password: ""
        },
        activeiconfont: true,
        info: [],
        uploadkj: false,
        userlist1statu: true,
        userlist2: [],
        multipleSelection1: [],
        batchAccess: "",
        getEmergenceStatus: false,
        getEmergenceNum: '',
        checkNodeId: '',
        pageSize: 10,
        pageNum: 1,
        sendStatus: true,
        userInfo: {
          type: ''
        },
        checkNodeId1: '',
		accessPlatform:{}
      };
    },
    components: {
      zTree,
      deviceLi,
      warningLog,
      childDeviceList
    },
    beforeCreate() {

    },
    created() {
      this.manufacturerList = this.$MANUFACTURER.MANUFACTURER.gateway
	  this.accessPlatform = this.$MANUFACTURER.accessPlatform
      this.userInfo = JSON.parse(localStorage.getItem('info'))
      this.getdevice();
      this.getalllist();
      this.info = JSON.parse(localStorage.getItem("info"));
      this.$store.commit("increment", 1);
      this.getcard()
      this.getallTree()
    },
    methods: {
      InputFun(e, name) {
        if (name == 'startBattery' || name == 'endBattery') {
          if (Number(e) < 0) {
            e = 0
          }
          if (Number(e) > 100) {
            e = 100
          }
        }
        this.search[name] = e
      },
      selectTenantId(e) {
        localStorage.setItem('tenantId', e)
        this.reload()
      },
      // 重置初始化
      resetInitialization(row, callback) {
        if (row.manufactureId == 201) {
          var data3 = {
            code: "zg/deleteAllUsers",
            data: {
              lockerId: row.deviceNum,
              imei: row.imei,
              order: 6501,
            },
          };
          httpPost(data3, this.$api.sendCommand).then((res) => {
            if (res.success) {
              this.$message.success("重置成功");
              callback(true)
            } else {
              callback(false)
            }
          });
        } else if (row.manufactureId == 101) {
          var data2 = {
            code: "isp/restoreSetting",
            data: {
              order: 6501,
              imei: row.imei,
              deviceNum: row.deviceNum,
              managerTelephone: "18270949468",
              managerPassword: "202108",
            },
          };
          httpPost(data2, this.$api.sendCommand).then((res2) => {
            if (res2.success) {
              this.$message.success("重置成功");
              var str = {
                deviceNum: row.deviceNum,
                imei: row.imei,
                order: 6101,
              };
              httpPost(str, this.$api.getDeviceRegisterManager).then((res1) => {
                var str1 = {
                  imei: row.imei, //row.imsi,
                  deviceNum: row.deviceNum, //row.deviceNum,
                  operateMode: 7,
                  is: true,
                  order: 6207,
                  passwordStartTime: "20210813010101",
                  passwordEndTime: "20680813010101",
                };
                httpPost(str1, this.$api.getDeviceOperateUserInfo).then((res2) => {});
                var str2 = {
                  imei: row.imei, //row.imsi,
                  deviceNum: row.deviceNum, //row.deviceNum,
                  operateMode: 4,
                  is: true,
                  order: 6204,
                  passwordStartTime: "20210813010101",
                  passwordEndTime: "20680813010101",
                };
                httpPost(str2, this.$api.getDeviceOperateUserInfo).then((res3) => {
                  if (res3.success) {
                    this.$message.success("初始化成功");
                    callback(true)
                  }
                });
              });
            } else {
              this.$message.error(res2.msg);
              callback(false)
            }
          });
        }
      },
      getPersonCallback(person, alllist, callback) {
        var personlist = []
        person.map(li => {
          var obj = {
            person: li,
            data: alllist.filter((item) => {
              if (item.deviceNum && item.cardId == li.card) {
                return item
              }
            })
          }
          personlist.push(obj)
        })
        callback(personlist)
      },
      // 数据同步
      dataSynchronization(index, row) {
        this.$confirm("是否确认数据同步?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.orderDeviceData(row)
        })
      },
      // 获取指定锁所有非703凭证数据
      orderDeviceData(row) {
        var _this = this
        if (row.roomId) {
          var data1 = {
            pageNum: 0,
            pageSize: 0,
            q: {
              id: row.roomId
            }
          }
          httpGet(data1, this.$api.getSiteTenant).then(res => {
            if (res.success) {
              var person = res.data.list
              var data = {
                imei: row.imei
              }
              httpGet(data, this.$api.orderDeviceData).then(res1 => {
                if (res1.success) {
                  var alllist = res1.data
                  this.getPersonCallback(person, alllist, (callback) => {
                    var personlist = callback
                    _this.resetInitialization(row, (callback) => {
                      if (row.manufactureId == 101) {
                        personlist.map(lt => {
                          var endTime = new Date(lt.person.endTime).getTime()
                          var startTime = new Date(lt.person.startTime).getTime()
                          var passwordEndTime = moment(endTime).format("YYYYMMDDHHmmss");
                          var passwordStartTime = moment(startTime).format("YYYYMMDDHHmmss");
                          var userTelephone = JSON.parse(lt.person.info).userTelephone;
                          var userPassword = JSON.parse(lt.person.info).userPassword;
                          var data = {
                            deviceNum: row.deviceNum,
                            imei: row.imei,
                            userTelephone: userTelephone,
                            userPassword: userPassword,
                            password: userPassword,
                            operateMode: 26,
                            order: 6226,
                            passwordStartTime: passwordStartTime,
                            passwordEndTime: passwordEndTime,
                            cardName: lt.person.name,
                            roomName: row.roomName
                          }
                          ICINLocker.LDAddUser(data.deviceNum, data.imei, data.userTelephone, data
                            .userPassword,
                            data
                            .password, passwordStartTime, passwordEndTime, data.operateMode, data
                            .order,
                            data
                            .cardName,
                            data.roomName, false, (callback) => {
                              lt.data.map(ll => {
                                utils.putCarfidAdd(row, ll)
                              })
                            })
                        })
                      } else if (row.manufactureId == 201) {
                        personlist.map(lt => {
                          var endTime = new Date(lt.person.endTime).getTime()
                          var startTime = new Date(lt.person.startTime).getTime()
                          var passwordEndTime = moment(endTime).format("YYYYMMDDHHmmss");
                          var passwordStartTime = moment(startTime).format("YYYYMMDDHHmmss");
                          var userTelephone = JSON.parse(lt.person.info).userTelephone;
                          var userPassword = JSON.parse(lt.person.info).userPassword;
                          var data = {
                            lockerId: row.deviceNum,
                            imei: row.imei,
                            lockerUserId: userPassword,
                            keyId: userPassword,
                            role: 0,
                            action: 1,
                            order: 6226,
                            cardName: lt.person.name,
                            roomName: row.roomName
                          };
                          ICINLocker.addUserToLock(data.lockerId, data.imei, data
                            .lockerUserId, data.role, data.action, data.order, data.cardName, data
                            .roomName, (
                              callback) => {
                              if (callback.success) {
                                lt.data.map(ll => {
                                  utils.putCarfidzgAdd(row, ll)
                                })
                              }
                            })
                        })
                      }
                    })
                  })
                } else {
                  this.$message.error(res1.msg)
                }
              })

            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          this.$message.error("暂无数据")
        }
      },
      // 从paas同步能对应得上的有效凭证
      syncCommands() {
        httpGet('', this.$api.syncCommands).then(res => {})
      },
      // 同步刷新
      refreshFun() {
        httpGet("", this.$api.lockDeviceInfoList).then((res) => {});
      },
      // 选择房源
      checkNode(e) {
        this.checkNodeId = e
        var options = this.options
        var arr = this.getId(options, e[e.length - 1])
		var listarr=[arr[0]]
        var obj = this.getNodeId(listarr)
        this.checkNodeId = obj
      },
      checkNodeOne(e) {
        this.checkNodeId1 = e[e.length - 1]
        this.checkRoomDevice(e[e.length - 1])
      },
      checkRoomDevice(id) {
        var q = {
          roomIds: [id],
          lockType: 99
        };
        var data = {
          q: JSON.stringify(q),
          pageNum: 1,
          pageSize: this.pageSize,
        };
        httpPost(data, this.$api.getDeviceItems).then((res) => {
          if (res.data.list.length > 0) {
            this.$message.error("该房间已绑定锁，请重新选择")
            this.checkNodeId1 = ''
          }
        });
      },
      getParentId(list, id) {
        for (let i in list) {
          if (list[i].id == id) {
            return [list[i]]
          }
          if (list[i].children) {
            let node = this.getParentId(list[i].children, id);
            if (node !== undefined) {
              return node.concat(list[i])
            }
          }
        }
      },
      getId(list, id) {
        for (let i in list) {
          if (list[i].id == id) {
            return [list[i]]
          }
          if (list[i].children) {
            let node = this.getParentId(list[i].children, id);
            if (node !== undefined) {
              return node;
            }
          }
        }
      },
      getNodeId(list, newNodeId = []) {
        for (let i in list) {
          newNodeId.push(list[i].id)
          if (list[i].children) {
            this.getNodeId(list[i].children, newNodeId);
          }
        }
        return newNodeId;
      },
      getallTree() {
        var data = {};
        httpGet(data, this.$api.getTree).then((res) => {
          var userlist = [];
          var temp = {},
            arr = [];
          res.data.forEach((item, index) => {
            if (!temp[item.id]) {
              arr.push(item);
              temp[item.id] = true;
            }
          });
          arr.map((li) => {
            if (li.expand) {
              if (JSON.parse(li.expand).type == "0") {
                userlist.push(li);
              }
            }
          });
          var arrdata = uniqueArray1(res.data, "id")
          this.options = ztreeToElementTree(arrdata, {});
        });
      },
      // 获取门卡概况
      getcard() {
        RequestSet.getAnalysis("", 11, (callback) => {
          this.sumpageTotal = callback.total
          this.online = callback.onlineTotal
          this.unonline = callback.offlineTotal
          this.abnormal = callback.abnormalTotal
        })
      },
      // 发送离线密码
      sendEmergence() {
        var re = /^1\d{10}$/
        if (re.test(this.Emergence.EmerPhone)) {
          var data = {
            code: this.Emergence.password,
            phone: this.Emergence.EmerPhone,
            device: this.Emergence.device,
            name: this.Emergence.name
          }
          httpPost(data, this.$api.sendEmergence).then(res => {
            if (res.success) {
              this.$message.success('发送成功')
            } else {
              this.$message.error('发送失败')
            }
          })
          this.getEmergenceStatus = false
        } else {
          this.$message.error('请填写正确手机号')
        }
      },
      handleCheckChange(data, checked, node) {
        if (checked) {
          this.treedata = data
        } else {
          if (this.checkedId == data.id) {
            this.$refs.tree.setCheckedKeys([data.id]);
          }
        }
      },
      // 临时密码
      getEmergence(index, row) {
        var data = {
          code: "zg/getEmergence",
          data: {
            lockerId: row.deviceNum
          },
        }
        httpPost(data, this.$api.sendCommand).then(res => {
          if (res.success) {
            this.$message.success("获取成功")
            this.Emergence.password = res.data.data
            this.Emergence.device = row.deviceNum
            this.Emergence.name = row.roomName
            this.getEmergenceStatus = true
          } else {
            this.$message.error("获取失败")
          }
        })
      },
      // input视图刷新
      changesr(e) {
        this.$forceUpdate();
      },
      handleSelectionChange1(val) {
        this.multipleSelection1 = val;
      },
      BatchAdd() {
        this.uploadkj = true;
      },
      //批量添加确认
      async batchUploadfun() {
        if (this.batchAccess == "") {
          this.$message.error("请选择运营商");
        } else if (this.multipleSelection1.length == 0) {
          this.$message.error("请勾选要批量添加的设备");
        } else {
          await this.multipleSelection1.map((li, index) => {
              var str = {
                deviceNum: li.deviceNum,
                imei: li.imei,
                imsi: li.imei, //row.imsi,
                order: 5101,
                platformId: this.batchAccess,
              };
              httpPost(str, this.$api.DeviceRegisterDevice).then((res) => {
                if (res.data.success) {
                  // this.$message.success(res.data.msg);
                  // this.editVisible = false;
                  // this.getdevice();
                  this.AddAdministrator(index, li);
                }
              });
            })
            .then((res) => {
              this.$message.success("添加成功");
              this.editVisible = false;
              this.getdevice();
            });
        }
      },
      //音量设置
      stepFun(val) {
        var operate = "00";
        if (val == 0) {
          operate = "00";
        } else if (val == 50) {
          operate = "01";
        } else if (val == 100) {
          operate = "02";
        }
        var data = {
          code: "isp/volumnSetting",
          data: {
            imei: this.formInline.imei,
            operate: operate,
          },
        };
        httpPost(data, this.$api.sendCommand).then((res2) => {
          if (res2.data.success) {
            this.$message.success("设置成功");
          } else {
            this.$message.error(res.msg);
          }
        });
      },
      // 常开设置
      switchFun(e) {
        var data = {};
        if (e) {
          this.switchtext = "开";
          data = {
            code: "isp/alwaysOpenSetting",
            data: {
              imei: this.formInline.imei,
              operate: 1,
            },
          };
        } else {
          this.switchtext = "关";
          data = {
            code: "isp/alwaysOpenSetting",
            data: {
              imei: this.formInline.imei,
              operate: 0,
            },
          };
        }
        httpPost(data, this.$api.sendCommand).then((res2) => {
          if (res2.data.success) {
            this.$message.success("设置成功");
          } else {
            this.$message.error(res.msg);
          }
        });
      },
      // 关闭侧边栏
      handleClose() {
        this.drawer = false;
      },
      // tabs标签页切换
      handleClick(tab, event) {
        this.commpontentStatus = true
      },
      // 设备详情
      handleClose(done) {
        done();
      },
      //查看门锁详情
      detailsFun(index, row) {
        this.drawer = true;
        this.formInline = row;
        this.sendStatus = false
        this.$nextTick(function() {
          this.sendroomId = row.deviceNum
          this.senddeviceNum = row.deviceNum
          this.sendStatus = true
        })
      },
      Reset1(index, row) {
        var data2 = {
          code: "isp/restoreSetting",
          data: {
            order: 6501,
            imei: row.imei,
            deviceNum: row.deviceNum,
            managerTelephone: "18270949468",
            managerPassword: "202108",
          },
        };
        httpPost(data2, this.$api.sendCommand).then((res2) => {
          // if (res2.data.success) {
          //   this.$message.success("重置成功");
          // } else {
          //   this.$message.error(res.msg);
          // }
        });
      },
      // 重置门锁
      Reset(index, row) {
        this.$confirm("是否确认重置门锁?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          if (row.manufactureId == 201) {
            var data3 = {
              code: "zg/deleteAllUsers",
              data: {
                lockerId: row.deviceNum,
                imei: row.imei,
                order: 6501,
                cardName: this.info.username,
                roomName: row.roomName
              },
            };
            httpPost(data3, this.$api.sendCommand).then((res) => {
              if (res.success) {
                this.$message.success("重置成功");
                var q = {
                  id: row.roomId,
                };
                var tenant = {
                  q: JSON.stringify(q),
                };
                httpGet(tenant, this.$api.getSiteTenant).then((res) => {
                  Promise.all(
                    res.data.list.map((element) => {
                      return new Promise(function(resolve, reject) {
                        resolve(element.card);
                      });
                    })
                  ).then((allId) => {
                    allId.map((li) => {
                      var str = [{
                        siteId: row.roomId,
                        cardId: li,
                      }, ];
                      httpPost(str, this.$api.unbindCard).then((res) => {});
                    });
                  })
                })
              } else {
                this.$message.success(res.msg);
              }
            });
          } else if (row.manufactureId == 101) {
            var data2 = {
              code: "isp/restoreSetting",
              data: {
                order: 6501,
                imei: row.imei,
                deviceNum: row.deviceNum,
                managerTelephone: "18270949468",
                managerPassword: "202108",
                cardName: this.info.username,
                roomName: row.roomName
              },
            };
            httpPost(data2, this.$api.sendCommand).then((res2) => {
              if (res2.success) {
                this.$message.success("重置成功");
                var q = {
                  id: row.roomId,
                };
                var tenant = {
                  q: JSON.stringify(q),
                };
                httpGet(tenant, this.$api.getSiteTenant).then((res) => {
                  Promise.all(
                    res.data.list.map((element) => {
                      return new Promise(function(resolve, reject) {
                        resolve(element.card);
                      });
                    })
                  ).then((allId) => {
                    allId.map((li) => {
                      var str = [{
                        siteId: row.roomId,
                        cardId: li,
                      }, ];
                      httpPost(str, this.$api.unbindCard).then((res) => {});
                    });
                  })
                })
              } else {
                this.$message.error(res2.msg);
              }
            });
          }
        });
      },
      activeiconfun(t) {
        this.activeiconfont = t;
      },
      // 查询设备电量和信号
      getresult() {
        var data = {};
      },
      // 输入远程开锁密码确认
      Unlockingsave() {},
      // 远程开锁
      RemoteUnlocking(index, row) {
        var str2 = {
          imei: row.imei,      
          roomId: row.roomId,
          openLockType: 2,
          is: true,
        };
        httpPost(str2, this.$api.openLock).then((res3) => {
          if (res3.success) {
            this.$message.success("开锁成功！");
            this.Unlocking = false;
          } else {
            this.$message.error("开锁失败！");
          }
        });
      },
      // 重置添加管理员
      AddAdministrator(index, row) {
        var str = {
          deviceNum: row.deviceNum,
          imei: row.imei,
          order: 6101,
        };
        httpPost(str, this.$api.getDeviceRegisterManager).then((res1) => {
          var str1 = {
            imei: row.imei, //row.imsi,
            deviceNum: row.deviceNum, //row.deviceNum,
            operateMode: 7,
            is: true,
            order: 6207,
            passwordStartTime: "20210813010101",
            passwordEndTime: "20680813010101",
          };
          httpPost(str1, this.$api.getDeviceOperateUserInfo).then((res2) => {});
          var str2 = {
            imei: row.imei, //row.imsi,
            deviceNum: row.deviceNum, //row.deviceNum,
            operateMode: 4,
            is: true,
            order: 6204,
            passwordStartTime: "20210813010101",
            passwordEndTime: "20680813010101",
          };
          httpPost(str2, this.$api.getDeviceOperateUserInfo).then((res3) => {
            if (res3.success) {
              this.$message.success("初始化成功");
            }
          });
        });
      },
      // 添加设备
      initialization() {
        if (this.checkNodeId1 == '') {
          this.$message.error("请选择房间");
        } else {
          if (this.form.manufacturer == 799) {
            var data = {
              deviceNum: this.form.deviceNum,
              validateCode: this.form.validateCode,
              manufactureId: this.form.manufacturer,
              enterpriseId: this.userInfo.enterpriseId,
            }
            RequestSet.RegisterDevice(data, (callback) => {
              if (callback.success) {
                var data = [{
                  siteId: this.checkNodeId1,
                  deviceId: callback.data.id,
                }];
                httpPost(data, this.$api.bindDeviceSite)
                  .then((res) => {
                    if (res.success) {
                      this.editVisible = false;
                      this.$message.success("绑定成功");
                    }
                  })
                  .catch((error) => {
                    this.$message.error(`绑定失败`);
                  });
                this.$message.success(callback.data.msg);
                this.editVisible = false;
                this.getdevice();
              } else {
                this.$message.error(callback.message)
              }
            })
          }
        }
      },
      // 选择绑定房间
      onClick: function(evt, treeId, treeNode) {
        // 点击事件
        this.treedata = treeNode;
      },
      // 获取绑定所有房间
      getalllist() {
        var data = {};
        httpGet(data, this.$api.getTree).then((res) => {
          var array = uniqueArray(res.data, "id");
          this.zNodes = ztreeToElementTree(array, {});
        });
      },
      // 获取设备
      getdevice() {
        var data = {
          pageNum: this.$store.state.currentPage,
          pageSize: 10,
          q: JSON.stringify({
            lockType: 99
          })
        };
        httpPost(data, this.$api.getDeviceItems).then((res) => {
          var online = 0,
            unonline = 0,
            devIds = "";
          if (res.data.list.length > 0) {
            res.data.list.map((li) => {
			var accessPlatform=this.accessPlatform.show.filter(item=> item.code==li.accessPlatform)[0]
			if(accessPlatform){
				li['accessPlatformText']=accessPlatform.desc
			}else{
				li['accessPlatformText']=''
			}
              if (li.isOnline == 1) {
                online++;
              } else if (li.isOnline == 0) {
                unonline++;
              }
              li.createAt = this.timestampToTime(li.createAt);
              if(li.lastReportAt){
              li.lastReportAt = moment(li.lastReportAt).format("YYYY-MM-DD HH:mm:ss");
              }else{
                li.lastReportAt = ''
              }
              devIds += li.deviceNum + ",";
            });
            var newArr = uniqueArray(res.data.list, "id");
            this.tableData = newArr;
          }else{
             this.tableData=[]
          }
          this.currentPage4 = 1;
          this.pageTotal = res.data.total;
        });
      },
      timestampToTime(cjsj) {
        var date = new Date(cjsj); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10 ?
            "0" + (date.getMonth() + 1) :
            date.getMonth() + 1) + "-";
        var D = date.getDate() + " ";
        var h = date.getHours() + ":";
        var m = date.getMinutes() + ":";
        var s = date.getSeconds();
        return Y + M + D + h + m + s;
      },
      handleChange(value) {
        console.log(value);
      },
      restSearch() {
        this.search = {
          name: "",
          deviceNum: "",
          roomname: '',
          imei: "",
          isOnline: "",
          unBind:'',
          startBattery:'',
          endBattery:''
        }
        this.checkNodeId = ''
		this.searchRoom=''
        this.handleSearch()
      },
      // 触发搜索按钮
      handleSearch() {
        var deviceNum = this.search.deviceNum.replace(/\s*/g, "");
        var imei = this.search.imei.replace(/\s*/g, "");
        var q = {
          deviceNum: deviceNum,
          imei: imei,
          isOnline: this.search.isOnline,
          roomName: this.search.roomname,
          roomIds: this.checkNodeId,
          startBattery: this.search.startBattery,
          endBattery: this.search.endBattery,
          lockType: 99,
          unBind:this.search.unBind
        };
        var data = {
          q: JSON.stringify(q),
          pageNum: 1,
          pageSize: this.pageSize,
        };

        httpPost(data, this.$api.getDeviceItems).then((res) => {
          if (res.data.list.length > 0) {
            res.data.list.map((li) => {
			var accessPlatform=this.accessPlatform.show.filter(item=> item.code==li.accessPlatform)[0]
			if(accessPlatform){
				li['accessPlatformText']=accessPlatform.desc
			}else{
				li['accessPlatformText']=''
			}
              li.createAt = this.timestampToTime(li.createAt);
              if(li.lastReportAt){
              li.lastReportAt = moment(li.lastReportAt).format("YYYY-MM-DD HH:mm:ss");
              }else{
                li.lastReportAt = ''
              }
            });
            var newArr = uniqueArray(res.data.list, "id");
            this.pageTotal = res.data.total
            this.tableData = newArr;
          } else {
            this.tableData = [];
            this.pageTotal = 0
          }
          this.currentPage4 = 1;
          this.$store.commit("increment", 1);
        });
        // this.$set(this.query, "pageIndex", 1);
      },
      // 删除操作
      handleDelete(index) {
        // 二次确认删除
        this.$confirm("确定要删除吗？", "提示", {
            type: "warning",
          })
          .then(() => {
            this.$message.success("删除成功");
            this.tableData.splice(index, 1);
          })
          .catch(() => {});
      },
      // 多选操作
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      delAllSelection() {
        const length = this.multipleSelection.length;
        let str = "";
        this.delList = this.delList.concat(this.multipleSelection);
        for (let i = 0; i < length; i++) {
          str += this.multipleSelection[i].name + " ";
        }
        this.$message.error(`删除了${str}`);
        this.multipleSelection = [];
      },
      // 删除设备
      deleteLock(index, row) {
        this.$confirm("确定要删除吗？", "提示", {
            type: "warning",
          })
          .then(() => {
            // if (row.manufactureId == 101) {
            if (row.roomId) {
              var data = [{
                siteId: row.roomId,
                deviceId: row.id,
              }, ];
              httpPost(data, this.$api.unbindDeviceSite)
                .then((res) => {
                  if (res.success) {
                    var data = {
                      device: row.deviceNum,
                      imei: row.imei,
                      order: 5102
                    }
                    RequestSet.DeleteDevic(data, row.manufactureId,(callback)=>{
                      if (callback.success) {
                        this.getdevice();
                        this.$message.success('删除成功');
                      } else {
                        this.$message.error(callback.msg);
                      }
                    })
                  }
                })
                .catch((error) => {
                  this.$message.error(`解绑失败`);
                });
            } else {
              var data = {
                deviceNum: row.deviceNum,
                imei: row.imei,
                order: 5102,
              };
              RequestSet.DeleteDevic(data, row.manufactureId,(callback)=>{
                if (callback.success) {
                  this.$message.success("删除成功");
                  this.getdevice();
                } else {
                  this.$message.error(callback.msg);
                }
              })
            }
          }).catch(() => {});
      },
      // 绑定房间
      bindRoom(index, row) {
        this.bromm = row;
        this.roomVisible = true;
        this.$refs.tree.setCheckedKeys([]);
      },
      // 确定绑定
      bindsave() {
        var treedata = this.treedata;
        this.roomVisible = false;
        var data = [{
          siteId: treedata.id,
          deviceId: this.bromm.id,
        }, ];
        httpPost(data, this.$api.bindDeviceSite)
          .then((res) => {
            if (res.success) {
              this.$message.success("绑定成功");
              this.getdevice();
            }
          })
          .catch((error) => {
            this.$message.error(`绑定失败`);
          });
      },
      unbindsave(index, row) {
        var data = [{
          siteId: row.roomId,
          deviceId: row.id,
        }, ];
        var q = {
          id: row.roomId,
        };
        var tenant = {
          q: JSON.stringify(q),
        };
        // 二次确认解绑
        this.$confirm("确定要解绑吗？", "提示", {
            type: "warning",
          })
          .then(() => {
            // this.Reset(index, row)
            httpGet(tenant, this.$api.getSiteTenant).then((res) => {
              Promise.all(
                res.data.list.map((element) => {
                  return new Promise(function(resolve, reject) {
                    resolve(element.card);
                  });
                })
              ).then((allId) => {
                allId.map((li) => {
                  var str = [{
                    siteId: row.roomId,
                    cardId: li,
                  }, ];
                  httpPost(str, this.$api.unbindCard).then((res) => {});
                });
                httpPost(data, this.$api.unbindDeviceSite).then((res) => {
                  if (res.success) {
                    this.$message.success("解绑成功");
                    this.getdevice();
                  } else {
                    this.$message.error(`解绑失败`);
                  }
                });
              });
            });
          })
          .catch(() => {});
      },
      addequipment() {
        this.editVisible = true;
        this.form.customerCode = this.$store.state.customerCode;
      },
      // 编辑操作
      handleEdit(index, row) {
        this.idx = index;
        this.form = row;
        this.editVisible = true;
      },
      // 保存编辑
      saveEdit() {
        this.editVisible = false;
        this.$message.success(`修改第 ${this.idx + 1} 行成功`);
        this.$set(this.tableData, this.idx, this.form);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.$router.replace({
          path: this.$route.path,
          query: {
            page: this.$route.query.page ? this.$route.query.page : 1,
            pageSize: val,
          },
        });
        this.pageSize = val
        this.getlistNum(0, val);
      },
      getlistNum(val, size) {
        var deviceNum = this.search.deviceNum.replace(/\s*/g, "");
        var imei = this.search.imei.replace(/\s*/g, "");
        var q = {
          deviceNum: deviceNum,
          imei: imei,
          isOnline: this.search.isOnline,
          roomName: this.search.roomname,
          roomIds: this.checkNodeId,
          startBattery: this.search.startBattery,
          endBattery: this.search.endBattery,
          lockType: 99,
          unBind:this.search.unBind
        };
        var data = {
          q: JSON.stringify(q),
          pageNum: val,
          pageSize: size,
        };
        httpPost(data, this.$api.getDeviceItems).then((res) => {
          res.data.list.map((li) => {
			var accessPlatform=this.accessPlatform.show.filter(item=> item.code==li.accessPlatform)[0]
			if(accessPlatform){
				li['accessPlatformText']=accessPlatform.desc
			}else{
				li['accessPlatformText']=''
			}
            li.createAt = this.timestampToTime(li.createAt);
              if(li.lastReportAt){
              li.lastReportAt = moment(li.lastReportAt).format("YYYY-MM-DD HH:mm:ss");
              }else{
                li.lastReportAt = ''
              }
          });
          var newArr = uniqueArray(res.data.list, "id");
          this.tableData = newArr;
          this.pageTotal = res.data.total;
        });
      },
      // 分页导航
      handlePageChange(val) {
        // this.$router.replace({
        //   path: this.$route.path,
        //   query: {
        //     page: this.$route.query.page ? this.$route.query.page : 1,
        //     pageSize: val,
        //   },
        // });
        this.pageNum = val
        this.$store.commit("increment", val);
        var q = {
          deviceNum: this.search.deviceNum,
          imei: this.search.imei,
          isOnline: this.search.isOnline,
          roomName: this.search.roomname,
          roomIds: this.checkNodeId,
          startBattery: this.search.startBattery,
          endBattery: this.search.endBattery,
          lockType: 99,
          unBind:this.search.unBind
        };
        var data = {
          q: JSON.stringify(q),
          pageNum: val,
          pageSize: this.pageSize,
        };
        httpPost(data, this.$api.getDeviceItems).then((res) => {
          res.data.list.map((li) => {
			var accessPlatform=this.accessPlatform.show.filter(item=> item.code==li.accessPlatform)[0]
			if(accessPlatform){
				li['accessPlatformText']=accessPlatform.desc
			}else{
				li['accessPlatformText']=''
			}
            li.createAt = this.timestampToTime(li.createAt);
              if(li.lastReportAt){
              li.lastReportAt = moment(li.lastReportAt).format("YYYY-MM-DD HH:mm:ss");
              }else{
                li.lastReportAt = ''
              }
          });
          var newArr = uniqueArray(res.data.list, "id");
          this.tableData = newArr;
          this.pageTotal = res.data.total;
        });
      },
      btnClick() {
        document.querySelector(".input-file").click();
      },
      exportData(event) {
        if (!event.currentTarget.files.length) {
          return;
        }
        const that = this;
        // 拿取文件对象
        var f = event.currentTarget.files[0];
        // 用FileReader来读取
        var reader = new FileReader();
        // 重写FileReader上的readAsBinaryString方法
        FileReader.prototype.readAsBinaryString = function(f) {
          var binary = "";
          var wb; // 读取完成的数据
          var outdata; // 你需要的数据
          var reader = new FileReader();
          reader.onload = function(e) {
            // 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;
            for (var i = 0; i < length; i++) {
              binary += String.fromCharCode(bytes[i]);
            }
            // 接下来就是xlsx了，具体可看api
            wb = XLSX.read(binary, {
              type: "binary",
            });
            outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
            // 自定义方法向父组件传递数据
            let arr1 = [];
            outdata.map((li, index) => {
              var str = {};
              str.deviceNum = li["设备号"];
              str.imei = li["imei"];
              str.ID = li["序号"];
              arr1.push(str);
            });
            //   this.tableData=arr
            that.userlist1statu = false;
            that.$nextTick(() => {
              that.userlist2 = arr1;
              that.userlist1statu = true;
            });
          };
          reader.readAsArrayBuffer(f);
        };
        reader.readAsBinaryString(f);
      },
    },
  };
</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .table {
    width: 100%;
    font-size: 14px;
  }

  .red {
    color: #ff0000;
  }

  .mr10 {
    margin-right: 10px;
  }

  .mright {
    margin-right: 10px;
    display: inline-block;
  }

  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }

  .elrow {
    margin-bottom: 20px;
  }

  .grid-content {
    position: relative;
    z-index: 99;
    display: flex;
    align-items: center;
    overflow: hidden;
    justify-content: space-around;
    -webkit-box-align: center;
  }

  /* 加的 */

  .colposition {
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    border: 2px solid hsla(0, 0%, 100%, 0.2);
    /* width: 100%; */
  }

  .grid-cont-right {
    flex: 1;
    text-align: left;
    padding-left: 20px;
    box-sizing: border-box;
    font-size: 16px;
    color: #666;
    font-size: 14px;
    line-height: 32px;
  }

  .grid-num {
    font-size: 24px;
  }

  .grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
  }

  .grid-con-1 {
    position: relative;
  }

  .grid-con-1::before {
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    width: 1px;
    transform: translateY(-50%);
    height: 70px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-left: 1px dashed #666;
  }

  .grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
  }

  .grid-con-1 .grid-num {
    /* color: rgb(45, 140, 240); */
    color: #333;
  }

  .grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
  }

  .grid-con-2 .grid-num {
    /* color: rgb(45, 140, 240); */
    color: #333;
  }

  .grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
  }

  .grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
  }

  .container {
    position: relative;
  }

  .container .el-table th>.cell {
    text-align: center;
  }

  .container>>>.el-table .cell {
    text-align: center;
  }

  .table .iconfont {
    font-size: 24px;
    vertical-align: middle;
  }

  .red {
    color: red;
  }

  .green {
    color: #49ce6c;
  }

  .orange {
    color: #ff9602;
  }

  .blue {
    color: #4a90e2;
  }

  .dling {
    min-width: 32px;
    display: inline-block;
  }

  .sapnli {
    vertical-align: middle;
  }

  .spanbg {
    padding: 4px 10px;
    background: #4a90e2;
    color: #fff;
    width: 80px;
    display: inline-block;
    font-size: 12px;
    box-sizing: border-box;
    border-radius: 4px;
  }

  .pagelist {
    margin-top: 20px;
    text-align: right;
  }

  .ztree {
    height: 300px;
    overflow-y: auto;
  }

  .roomcontent {
    margin-top: 50px;
  }

  .roomcontent .roomconli {
    display: inline-block;
    cursor: pointer;
    position: relative;
  }

  .taball {
    width: 100%;
    margin-top: 50px;
  }

  .button-list {
    position: absolute;
    width: 300px;
    height: 200px;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    border-radius: 10px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: none;
  }

  .button-list div {
    /* width: 55px; */
    padding: 0 14px;
    height: 25px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 13px;
    margin: 0 5px 10px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 700;
    color: #dedede;
    cursor: pointer;
    text-align: center;
    line-height: 25px;
  }

  .roomcontent .roomconli:hover .button-list {
    display: flex;
  }

  .roomcontentheight {
    height: 640px;
    overflow-y: auto;
  }

  .switchiconfont {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #fff;
    color: #333;
    display: flex;
  }

  .switchiconfont .iconfont {
    font-size: 16px;
    padding: 4px 6px;
    border: 1px solid #dcdfe6;
    cursor: pointer;
  }

  .switchiconfont .active {
    color: #fff;
    cursor: pointer;
    background: #3a8ee6;
    border: 1px solid #3a8ee6;
  }

  .rltable {
    box-sizing: border-box;
    margin: 0 20px;
  }

  .demo-form-inline .el-form-item {
    width: 46%;
  }

  .demo-form-inline>>>.el-form-item .el-form-item__label {
    width: 22%;
  }

  .demo-form-inline>>>.el-form-item .el-form-item__content {
    width: 78%;
  }

  .input-file {
    display: none;
  }

  .width100 {
    width: 8vw;
    margin-bottom: 10px;
  }

  .quantity {
    display: inline-block;
  }

  .quantity .w50 {
    width: 1.5rem;
  }
</style>
