bindDev.vue

<!-- 绑定/解绑监控点 -->
<template>
  <el-dialog :title="$t('table.deviceBind')" class="manage-dialog bind-dialog bind-middle-dialog"
    :visible.sync="bindVisible" v-if="bindVisible" :close-on-click-modal="false" @close="closeBindDialog">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="gate-list-wrapper">
          <div style="text-align: right;">
            <el-button type="primary" @click="addGateHandle" class="search-btn" icon="el-icon-circle-plus-outline">
              {{$t('button.addSite')}}</el-button>
          </div>
          <div class="origin-input-box">
            <input type="value" :placeholder="$t('pholder.Site')" @keyup="filterGateList" v-model="bindVal"
              class="origin-input__inner" />
            <i class="el-icon-search bind-search"></i>
          </div>
          <el-scrollbar wrap-class="list-scrollbar" :native="false" style="height:100%;max-height: 370px">
            <ul class="gate-list-left">
              <li class="gate-item" @mouseover="selectStyle (item) " @click="checkGate(item)" @mouseout="outStyle(item)"
                v-for="(item, index) in gateList" :key="item.value">
                <span class="gate-item-text" :title="item.label"><span
                    class="type">({{formatType(item.type)}})</span>{{ item.label }}</span>
                <!-- <span class="configBtn" v-show="item.isHover"
                  >{{$t('button.choose')}}</span> -->
              </li>
              <li v-if="gateList.length == 0">{{ noDataText }}</li>
            </ul>
          </el-scrollbar>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="gate-list-wrapper">
          <el-scrollbar wrap-class="list-scrollbar" :native="false" style="height:100%;max-height: 345px;">
            <ul class="gate-list-left">
              <li class="gate-item dev-item" v-if="curGateId">
                <el-button type="primary" @click="bindRow" class="search-btn addDev" icon="el-icon-circle-plus-outline">{{$t('button.deviceBind')}}</el-button>
              </li>
              <li class="gate-item dev-item" v-for="(item, index) in bindDevList" :key="item.value">
                <el-row>
                  <el-col :span="6">
                    <span class="item-text">
                      <a :href="item.device ? (item.device.localIp ? 'http://' + item.device.localIp + ':8080' : 'javascript:void(0);') : 'javascript:void(0);'"
                        class="iplink-column"
                        target="_blank">{{ item.device ? (item.device.localIp ? item.device.localIp : '--') : '--' }}</a></span>
                  </el-col>
                  <el-col :span="7">
                    <span class="item-text">{{item.deviceSerialnum}}</span>
                  </el-col>
                  <el-col :span="8">
                    <span class="item-text">{{item.serialnum}}</span>
                  </el-col>
                  <el-col :span="3">
                    <span class="item-btn" @click="unBind(item,index)">{{$t('button.ubind')}}</span>
                  </el-col>
                </el-row>
              </li>
              <li v-if="bindDevList.length == 0">{{ noDataText }}</li>
            </ul>
          </el-scrollbar>
        </div>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" class="dialog-btn dialog-confirm-btn" @click="bindVisible = false">
        {{$t('button.closed')}}
      </el-button>
    </div>
    <add-gate-dialog ref="addgateModel" @updateGateList='updateGateList'></add-gate-dialog>
    <add-dev-dialog ref="addDevModel" @refreshDevList='refreshDevList'></add-dev-dialog>
  </el-dialog>
</template>


<script>
  import addGate from "../GateManage/addGate.vue";
  import addDevDialog from '../GateManage/bindDev.vue'
  export default {
    components: {
      "add-gate-dialog": addGate,
      'add-dev-dialog':addDevDialog
    },
    data() {
      return {
        bindVisible: false,
        bindZoneId: '',
        bindVal: '',
        noDataText: this.$t('echartsTitle.noData'),
        gateList: [],
        bindBtnDisabled: false,
        cancelBtnDisabled: false,
        mallId: '',
        isOut: false,
        types: [],
        isMallGate: 1,
        curGateId:'',
        bindDevList: [],
        isAdd:false,
        gateObj:''
      }
    },
    methods: {
      addGateHandle() {
        this.$refs.addgateModel.dialogInit(this.mallId, true);
      },
      dialogInit(data, isMallGate, type) {
        this.isMallGate = isMallGate;
        this.getTypes()
        // 判断是否是店外客流绑定
        this.isOut = type ? true : false;
        this.mallId = data.id
        this.getZoneAllGate();
        this.bindDevList = []
        this.curGateId = ''
        this.bindVisible = true;
      },
      updateGateList() {
        this.getZoneAllGate();
      },
      getTypes() {
        this.$api.base.dataDic({
          type: 'gateType'
        }).then(res => {
          this.types = res.data.data;
        })
      },
      formatType(type) {
        let result = ''
        this.types.forEach(item => {
          if (item.key == type) {
            result = item.value
          }
        })
        return result
      },
      getZoneAllGate() {
        this.$api.base.gate({
          mallId: this.mallId,
          status: 1,
        }).then(res => {
          let obj = {};
          let result = res.data;
          result.data.forEach(item => {
            item['label'] = item.name;
            item['value'] = item.id;
          })
          this.gateList = result.data
          window.sessionStorage.setItem('bindlist', JSON.stringify(this.gateList));
        })
      },
      selectStyle(item) {
        this.$set(item, 'isHover', true);
      },
      outStyle(item) {
        this.$set(item, 'isHover', false);
      },
      // 搜索监控点
      filterGateList() {
        let sVal = this.bindVal.replace(/\s+/g, '').toLocaleLowerCase();
        let localList = JSON.parse(window.sessionStorage.getItem('bindlist'));
        if (sVal == '') {
          this.gateList = localList;
          return;
        }
        let filterArr = [];
        this.gateList.forEach(item => {
          if (((item.label).toLocaleLowerCase()).indexOf(sVal) !== -1) {
            filterArr.push(item);
          }
        })
        if (filterArr.length == 0) {
          localList.forEach(item => {
            if (((item.label).toLocaleLowerCase()).indexOf(sVal) !== -1) {
              filterArr.push(item);
            }
          })
        }
        if (filterArr.length == 0) {
          this.noDataText = this.$t('echartsTitle.noData');
        }
        this.gateList = filterArr;
      },
      checkGate(item) {
        this.gateObj = item;
        this.curGateId = item.id;
        this.bindDevList = []
        this.$api.base.channel({
          gateId: item.id
        }).then(res => {
          if (res.data.code == 200) {
            this.bindDevList = res.data.data
          }
        })
      },
      bindRow(){
        this.$refs.addDevModel.dialogInit(this.gateObj,true)
      },
      refreshDevList(){
        this.checkGate(this.gateObj)
      },
      unBind(row, childIndex) {
        this.$confirm(
            this.$t("message.confirmUnbind"),
            this.$t("message.prompt"), {
              confirmButtonText: this.$t("message.confirm"),
              cancelButtonText: this.$t("message.cancel"),
              type: "warning"
            }
          ).then(() => {
            this.$api.management.unbindChannel(row.id, {}).then(res => {
                if (res.data.code == 200) {
                  this.checkGate(this.gateObj)
                  this.$message({
                    showClose: true,
                    type: "success",
                    message: res.data.msg
                  });
                }
              }).catch(err => {
                console.log("err", err.message);
              });
          }).catch(err => {
            console.log(err.message);
          });
      },
      closeBindDialog() {
        this.bindVal = '';
        this.bindVisible = false;
      },
    },
    beforeDestroy() {
      window.sessionStorage.removeItem('bindlist');
    }
  }
</script>
<style lang="less" scoped="scoped">
  .gate-list-wrapper,
  .gate-list-right {
    height: 425px;

    .title1 {
      color: #000;
      font-weight: 900;
      border-bottom: 1px solid #dedede;
      padding-bottom: 10px;
    }
  }

  .type {
    color: #000 !important;
    margin-right: 8px;
  }

  .configBtn {
    color: #409EFF;
    display: inline-block;
    width: 18%;
    text-align: right;
  }

  .bind-gate-item {
    min-width: 360px;

    .name {
      display: inline-block;
      color: #666;
      font-size: 14px;
      max-width: 90%;
      min-width: 120px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .delBtn {
      padding: 0;
      vertical-align: top;
    }
  }

  .gate-item {
    .gate-item-text {
      width: 95% !important;
      font-size: 14px;
    }

  }

  .dev-item {
    padding-left: 12px;
    height: 32px;
    line-height: 32px;

    .item-text {
      display: inline-block;
    }

    .item-btn {
      color: #409EFF;
      display: inline-block;
      text-align: right;
    }
  }
  .addDev{
    float: right;
  }
</style>