ibms/src/views/point/dynamicdata/addRelation/equipRela/index.vue

<template>
  <div id="addRelation">
    <!-- 数据字典设备类型 -->
    <el-row>
      <el-col :span="12">
        <el-button size="small" type="default" icon="el-icon-back" @click="goback"></el-button>
        <div style="display:inline-block;width:317px;margin-left:10px;">
          <dictionary-device @change="changeDictionary" :Related="false"></dictionary-device>
        </div>
      </el-col>
      <el-col :span="12" class="text-right">
        <el-switch @change="changeType" v-model="isSwitch"></el-switch>
        <span style="padding:0 5px;">AI辅助</span>
        <el-button size="medium" @click="showHistory" class="ani-his-plus">
          本次对应记录 {{num}}
          <span v-if="showPlus" :class="{'plusOne':true,'startAni':showPlus}">+1</span>
        </el-button>
      </el-col>
    </el-row>
    <!-- 列表及查询条件区域 -->
    <div class="table-container clearfix">
      <div class="left-table">
        <h5>未对应的设备标识</h5>
        <!-- 查询条件 -->
        <div class="query-box clearfix">
          <div class="query-item">
            <label>设备标识关键字</label>
            <el-input placeholder="请输入设备标识关键字" v-model="form.EquipmentMark" @keyup.enter.native="queryLeftTable">
              <i slot="suffix" class="el-input__icon el-icon-search" @click="queryLeftTable"></i>
            </el-input>
          </div>
          <div class="query-item">
            <label>数据源</label>
            <dataSource :Related="false" @change="changeDataSource" :typeName="typeName"></dataSource>
          </div>
          <div class="query-item">
            <label>位置标签</label>
            <locationFlag :Related="false" @change="changeLocationFlag" :typeName="typeName"></locationFlag>
          </div>
        </div>
        <!-- 左侧列表 -->
        <div class="table-box">
          <div class="l-custom-table custom-table" v-loading="lTableLoading">
            <el-table ref="lTableBody" :data="LtableData" tooltip-effect="dark" style="width: 100%" height="100%" @row-click="clickLeftRow"
              @selection-change="leftSelectionChange">
              <el-table-column label="数据源" align="right" show-overflow-tooltip>
                <template slot-scope="scope">{{ scope.row.Datasource }}</template>
              </el-table-column>
              <el-table-column label="位置标签" align="right">
                <template slot-scope="scope">
                  <el-tooltip :content="scope.row.LocationFlag.toString()" placement="top">
                    <div class="tool-tip">{{scope.row.LocationFlag.toString()}}</div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="SubTypeName" label="设备类型关键字" align="right" show-overflow-tooltip></el-table-column>
              <el-table-column prop="EquipmentMark" label="设备标识" show-overflow-tooltip align="right" width="200" class-name="bgf5"></el-table-column>
              <el-table-column type="selection" width="35" class-name="bgf5"></el-table-column>
            </el-table>
          </div>
          <!-- 智能推荐 -->
          <transition name="el-zoom-in-top">
            <div class="AIRecom" v-show="leftRecoList.length&&leftAI&&rArray.length">
              <div class="l-title">
                可能对应的设备标识
                <i class="el-icon-close" @click="leftRecoList=[]"></i>
              </div>
              <div v-for="(t,i) in leftRecoList" :key="t.id" class="l-ai-recom-item ai-recom-item" @click="selectAI(i,'l')">
                <p>
                  <el-checkbox v-model="t.checked"></el-checkbox>
                  <span>{{t.Proximity}}%</span>
                </p>
                <p>{{t.EquipmentMark&&t.EquipmentMark!='null'?t.EquipmentMark:''}}</p>
                <p>{{t.LocationFlag.toString()}}</p>
                <!-- <p>{{t.address}}</p> -->
              </div>
            </div>
          </transition>
        </div>
      </div>
      <div class="right-table" style="float: right;">
        <h5>未对应的设备实例</h5>
        <!-- 查询条件 -->
        <div class="query-box clearfix">
          <div class="query-item">
            <label>设备实例关键字</label>
            <el-input placeholder="请输入设备实例关键字" v-model="form.EquipLocalName" @keyup.enter.native="queryRightTable">
              <i slot="suffix" class="el-input__icon el-icon-search" @click="queryRightTable"></i>
            </el-input>
          </div>
          <div class="query-item">
            <label>所在位置</label>
            <location-cas @change="changeLocation" :Related="false" :typeName="typeName"></location-cas>
          </div>
        </div>
        <!-- 右侧列表 -->
        <div class="table-box">
          <div class="r-custom-table custom-table" v-loading="rTableLoading">
            <el-table ref="rTableBody" :data="RtableData" tooltip-effect="dark" style="width: 100%" height="100%" @row-click="clickRightRow"
              @selection-change="rightSelectionChange">
              <el-table-column type="selection" width="35" class-name="bgf5"></el-table-column>
              <el-table-column label="设备实例名称" width="200" class-name="bgf5" show-overflow-tooltip>
                <template slot-scope="scope">{{ scope.row.EquipLocalName }}</template>
              </el-table-column>
              <el-table-column prop="ObjectID" label="设备实例编码" show-overflow-tooltip></el-table-column>
              <el-table-column prop="SubTypeName" label="设备类型" show-overflow-tooltip></el-table-column>
              <el-table-column label="所在建筑楼层">
                <template slot-scope="scope">
                  <el-tooltip :content="scope.row.BuildLocalName&&scope.row.FloorLocalName?scope.row.BuildLocalName+'-'+scope.row.FloorLocalName:''"
                    placement="top">
                    <div class="tool-tip">
                      {{scope.row.BuildLocalName&&scope.row.FloorLocalName?scope.row.BuildLocalName+'-'+scope.row.FloorLocalName:''}}</div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="RoomLocalName" label="所在业务空间" show-overflow-tooltip></el-table-column>
            </el-table>
          </div>
          <!-- 智能推荐 -->
          <transition name="el-zoom-in-top">
            <div class="AIRecom" v-show="rightRecoList.length&&!leftAI&&lArray.length">
              <div class="r-title">
                可能对应的设备实例
                <i class="el-icon-close" @click="rightRecoList=[]"></i>
              </div>
              <div v-for="(t,i) in rightRecoList" :key="t.id" class="r-ai-recom-item ai-recom-item" @click="selectAI(i,'r')">
                <p>
                  <el-checkbox v-model="t.checked"></el-checkbox>
                  <span>{{t.Proximity}}%</span>
                </p>
                <p>{{t.EquipLocalName}}</p>
                <p>{{BuildLocalName&&BuildLocalName!='null'?t.BuildLocalName:''}}-{{t.FloorLocalName&&t.FloorLocalName!='null'?t.FloorLocalName:''}}
                </p>
                <p>{{t.RoomLocalName&&t.RoomLocalName!='null'?t.RoomLocalName:''}}</p>
                <p>{{t.InstallLocation&&t.InstallLocation!='null'?t.InstallLocation:''}}</p>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <!-- 历史记录弹窗 -->
    <history-dialog ref="history" @delSuc="deleteSuc"></history-dialog>
  </div>
</template>
<script>
import tools from "@/utils/tools";
import historyDialog from "@/components/point/dynamicdata/historyDialog";
import locationCas from "@/components/point/dynamicdata/locationCascader";
import dictionaryDevice from "@/components/point/dynamicdata/dictionaryDevice";
import dataSource from "@/components/point/dynamicdata/dataSource";
import locationFlag from "@/components/point/dynamicdata/locationFlag";
import { mapGetters, mapActions } from "vuex";
import {
  dynamicPendingobjs,
  dynamicPendingPoint,
  dynamicCreateRelation,
  dynamicDeleteRelation,
  dynamicPointTypeList,
  dynamicQueryAI
} from "@/api/scan/request";
export default {
  components: {
    historyDialog,
    locationCas,
    dictionaryDevice,
    dataSource,
    locationFlag
  },
  data() {
    return {
      isSwitch: true, //AI辅助
      typeName: "", //当前类型
      LtableData: [], //列表数据
      RtableData: [], //列表数据
      form: {
        EquipmentMark: "", //设备标识关键字
        SubTypeName: [], //数据字典设备类型
        LocationFlag: [], //位置标签
        Datasource: [], //数据源
        EquipLocalName: "", //设备实例关键字
        locationVal: [] //所在位置下拉
      }, //查询条件
      leftRecoList: [], //左推荐
      rightRecoList: [], //右推荐
      leftAI: true, //左右推荐公用-互斥
      lArray: [], //左侧选中数据
      rArray: [], //右侧选中数据
      hasRequestedFlag: false, //用于标识是否关联过数据,若是则重新请求第一页数据,
      showPlus: false, //+1记录动画
      num: 0, //记录条数
      timer: null, //函数节流 延时器
      historyList: [], //操作历史
      lTableLoading: false, //loading
      rTableLoading: false,
      lPage: {
        pageNumber: 1,
        pageSize: 50,
        total: 0
      },
      rPage: {
        pageNumber: 1,
        pageSize: 50,
        total: 0
      }
    };
  },
  created() {
    this.typeName = this.$route.query.typeName;
    this.init();
  },
  mounted() {
    this.lTableBody = this.$refs.lTableBody.bodyWrapper;
    this.rTableBody = this.$refs.rTableBody.bodyWrapper;

    this.lTableBody.addEventListener("scroll", () => {
      // 滚动距离
      let scrollTop = this.lTableBody.scrollTop;
      // 变量windowHeight是可视区的高度
      let windowHeight =
        this.lTableBody.clientHeight || this.lTableBody.clientHeight;
      // 变量scrollHeight是滚动条的总高度
      let scrollHeight =
        this.lTableBody.scrollHeight || this.lTableBody.scrollHeight;
      if (scrollTop + windowHeight === scrollHeight) {
        if (this.lPage.pageNumber * this.lPage.pageSize < this.lPage.total) {
          this.lPage.pageNumber++;
          if (this.LtableData.length < 50) {
            this.lPage.pageNumber = 1
          }
          this.getLeftData();
        }
      }
    });
    this.rTableBody.addEventListener("scroll", () => {
      // 滚动距离
      let scrollTop = this.rTableBody.scrollTop;
      // 变量windowHeight是可视区的高度
      let windowHeight =
        this.rTableBody.clientHeight || this.rTableBody.clientHeight;
      // 变量scrollHeight是滚动条的总高度
      let scrollHeight =
        this.rTableBody.scrollHeight || this.rTableBody.scrollHeight;
      if (scrollTop + windowHeight === scrollHeight) {
        // 获取到的不是全部数据 当滚动到底部 继续获取新的数据
        if (this.rPage.pageNumber * this.rPage.pageSize < this.rPage.total) {
          this.rPage.pageNumber++;
          if (this.RtableData.length < 50) {
            this.rPage.pageNumber = 1
          }
          this.getRightData();
        }
      }
    });
  },
  computed: {
    ...mapGetters("layout", ["projectId"]),
    requestFlag() {
      return this.lArray.length > 0 && this.rArray.length > 0;
    }
  },
  methods: {
    init() {
      this.queryLeftTable();
      this.queryRightTable();
    },
    //切换AI辅助
    changeType() { },
    //推荐中的选择事件
    selectAI(i, l) {
      //i 索引 l 左侧AI or 右侧AI
      if (l == "l") {
        this.leftRecoList[i].checked = true;
        this.lArray = [];
        this.lArray.push(this.leftRecoList[i]);
      } else {
        this.rightRecoList[i].checked = true;
        this.rArray = [];
        this.rArray.push(this.rightRecoList[i]);
      }
    },
    //查看本次历史记录
    showHistory() {
      this.$refs.history.showDialog(this.historyList);
    },
    //重新获取数据
    reGetData() {
      //删除选中项
      this.delSelectedRows(this.lArray, this.rArray);
      let history = { leftList: this.lArray, rightList: this.rArray };
      this.historyList.push(history); //保存本次操作记录
      this.lArray = []; //清空选中list
      this.rArray = [];
      this.num++; //右上角操作记录
      this.showPlus = true;
      setTimeout(() => {
        this.showPlus = false;
      }, 800);
    },
    //少于20条请求数据-否则删除选中项
    delSelectedRows(lArray, rArray) {
      for (let i = this.LtableData.length - 1; i >= 0; i--) {
        for (let j = 0; j < lArray.length; j++) {
          if (this.LtableData[i].EquipmentMark == lArray[j].EquipmentMark && this.LtableData[i].SubTypeCode == lArray[j].SubTypeCode) {
            this.LtableData.splice(i, 1)
            continue; //结束当前本轮循环，开始新的一轮循环
          }
        }
      }
      for (let i = this.RtableData.length - 1; i >= 0; i--) {
        for (let j = 0; j < rArray.length; j++) {
          if (this.RtableData[i].ObjectID == rArray[j].ObjectID && this.RtableData[i].SubTypeCode == rArray[j].SubTypeCode) {
            this.RtableData.splice(i, 1)
            continue; //结束当前本轮循环，开始新的一轮循环
          }
        }
      }
      if (this.LtableData.length < 20) {
        this.queryLeftTable()
      }
      if (this.RtableData.length < 20) {
        this.queryRightTable()
      }
    },
    //表格中的选中事件
    leftSelectionChange(selection) {
      this.lArray = selection;
    },
    rightSelectionChange(selection) {
      this.rArray = selection;
    },
    //查询左侧列表
    queryLeftTable() {
      this.lPage.pageNumber = 1;
      if (this.$refs.lTableBody && this.$refs.lTableBody.bodyWrapper) {
        this.$refs.lTableBody.bodyWrapper.scrollTop = 0
      }
      this.getLeftData();
    },
    //查询右侧列表
    queryRightTable() {
      this.rPage.pageNumber = 1;
      if (this.$refs.rTableBody && this.$refs.rTableBody.bodyWrapper) {
        this.$refs.rTableBody.bodyWrapper.scrollTop = 0
      }
      this.getRightData();
    },
    //获取待关联点位-左侧
    getLeftData() {
      let param = {
        PageNumber: this.lPage.pageNumber,
        PageSize: this.lPage.pageSize,
        TypeNameList: [this.typeName]
      };
      //处理查询条件(目前只是单个查,需后台支持)
      if (this.form.EquipmentMark && this.form.EquipmentMark.length) {
        param.EquipmentMark = this.form.EquipmentMark;
      }
      if (this.form.SubTypeName.length) {
        param.SubTypeNameList = this.form.SubTypeName;
      }
      if (this.form.LocationFlag.length) {
        param.LocationFlagList = this.form.LocationFlag;
      }
      if (this.form.Datasource.length) {
        param.DatasourceList = this.form.Datasource;
      }
      this.lTableLoading = true;
      dynamicPendingPoint(param, res => {
        this.lPage.total = res.Total;
        if (this.lPage.pageNumber == 1) {
          this.LtableData = res.Content;
        } else {
          this.LtableData = this.LtableData.concat(res.Content);
        }
        this.lTableLoading = false;
      });
    },
    //获取待关联实例-右侧
    getRightData() {
      let param = {
        PageNumber: this.rPage.pageNumber,
        PageSize: this.rPage.pageSize,
        TypeNameList: [this.typeName]
      };
      //处理查询条件
      if (this.form.EquipLocalName && this.form.EquipLocalName.length) {
        param.EquipLocalName = this.form.EquipLocalName;
      }
      if (this.form.SubTypeName.length) {
        param.SubTypeNameList = this.form.SubTypeName;
      }
      if (this.form.locationVal.length > 0) {
        param.BuildLocalName = this.form.locationVal[0];
      }
      if (this.form.locationVal.length > 1) {
        param.FloorLocalName = this.form.locationVal[1];
      }
      if (this.form.locationVal.length > 2) {
        param.SpaceType = this.form.locationVal[2];
      }
      if (this.form.locationVal.length > 3) {
        param.RoomLocalName = this.form.locationVal[3];
      }
      if (!this.form.locationVal.length) {
        delete param.BuildLocalName
        delete param.FloorLocalName
        delete param.SpaceType
        delete param.RoomLocalName
      }
      this.rTableLoading = true;
      dynamicPendingobjs(param, res => {
        this.rPage.total = res.Total;
        if (this.rPage.pageNumber == 1) {
          this.RtableData = res.Content;
        } else {
          this.RtableData = this.RtableData.concat(res.Content);
        }
        this.rTableLoading = false;
      });
    },
    //清除对应关系成功
    deleteSuc() {
      this.num--;
      this.queryLeftTable();
      this.queryRightTable();
    },
    //所在位置修改
    changeLocation(val) {
      this.form.locationVal = val;
      this.queryRightTable();
    },
    //数据字典设备类型修改
    changeDictionary(val) {
      this.form.SubTypeName = val;
      this.queryLeftTable();
      this.queryRightTable();
    },
    //数据源修改
    changeDataSource(val) {
      this.form.Datasource = val;
      this.queryLeftTable();
    },
    //修改位置标签
    changeLocationFlag(val) {
      this.form.LocationFlag = val;
      this.queryLeftTable();
    },
    //返回
    goback() {
      this.$router.push({ path: '/point/dynamicdata', query: { typeName: this.typeName } })
    },
    //点击行
    clickLeftRow(row, column, event) {
      this.$refs.lTableBody.toggleRowSelection(row);
    },
    //点击行
    clickRightRow(row, column, event) {
      this.$refs.rTableBody.toggleRowSelection(row);
    },
  },
  watch: {
    projectId(n, o) {
      this.init();
    },
    //判断两边是否均有选中值-创建关联
    requestFlag(n, o) {
      if (n) {
        this.rightRecoList = [];
        this.leftRecoList = [];
        let object = {
          Objs: this.rArray,
          Points: this.lArray
        };
        let param = [];
        param.push(object);
        dynamicCreateRelation(param, res => {
          if (res.Result == "success") {
            this.$message.success("关联成功");
            this.reGetData();
          }
        });
      }
    },
    //AI辅助-左侧
    lArray(n, o) {
      //先清空,返回结果后赋值
      this.rightRecoList = [];
      clearTimeout(this.timer);
      if (this.isSwitch && n.length) {
        this.timer = setTimeout(() => {
          let param = []
          n.map(item => {
            param.push({ Points: [item] })
          })
          dynamicQueryAI(param, res => {
            this.rightRecoList = res.Content[0].Objs;
            this.leftAI = !this.rightRecoList.length
          })
        }, 800)
      } else {
        this.rightRecoList = []
        this.leftAI = true;
      }
    },
    //AI辅助-右侧
    rArray(n, o) {
      this.leftRecoList = [];
      clearTimeout(this.timer);
      if (this.isSwitch && n.length) {
        this.timer = setTimeout(() => {
          let param = []
          n.map(item => {
            param.push({ Objs: [item] })
          })
          dynamicQueryAI(param, res => {
            this.leftRecoList = res.Content[0].Points;
            this.leftAI = !!this.leftRecoList.length
          })
        }, 800)
      } else {
        this.leftRecoList = []
        this.leftAI = false
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#addRelation {
  height: 100%;
  background-color: #fff;
  padding: 10px 20px 10px 10px;
  .text-right {
    text-align: right;
  }
  /deep/ .table-container {
    height: calc(100% - 160px);
    & > div {
      width: 49.5%;
      float: left;
    }
    .left-table,
    .right-table {
      height: 100%;
      h5 {
        line-height: 44px;
        padding-left: 5px;
        background-color: #dfe6ec;
      }
      .query-box {
        margin-bottom: 20px;
        .query-item {
          float: left;
          width: 30%;
          margin: 5px;
          label {
            display: block;
            margin-bottom: 5px;
          }
          .el-select {
            width: 100%;
          }
        }
      }
      .table-box {
        height: calc(100% - 50px);
        position: relative;
        .AIRecom {
          position: absolute;
          width: 96%;
          height: 160px;
          bottom: 5px;
          left: 1%;
          background-color: rgba(255, 255, 255, 0.9);
          z-index: 3;
          font-size: 12px;
          .r-title {
            padding-left: 10px;
            i {
              float: right;
            }
          }
          .l-title {
            text-align: right;
            padding-right: 10px;
            i {
              float: left;
            }
          }
          .ai-recom-item {
            width: 30%;
            height: 126px;
            float: left;
            border: 1px solid #ebeef5;
            overflow: hidden;
            padding-top: 5px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            p {
              position: relative;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              padding: 0 8px;
              z-index: -1;
              span {
                float: right;
              }
              .el-checkbox {
                margin-right: 0;
              }
            }
          }
          .ai-recom-item.r-ai-recom-item + .ai-recom-item {
            margin-left: 3%;
          }
          .l-ai-recom-item {
            float: right;
            p {
              text-align: right;
              padding-right: 10px;
              span {
                float: left;
              }
            }
          }
          .ai-recom-item.l-ai-recom-item + .ai-recom-item {
            margin-right: 3%;
          }
        }
      }
      ::-webkit-scrollbar {
        display: none;
      }
      //列表
      .custom-table {
        height: 100%;
        .bgf5 {
          background-color: #f5f7fa;
        }
        thead label.el-checkbox {
          display: none;
        }
      }
      .l-custom-table {
        td {
          text-align: right;
        }
      }
      .tool-tip {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .fr {
    padding-top: 10px;
    float: right;
  }
  .clearfix:before,
  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }
  .clearfix {
    zoom: 1;
  }
  .ani-his-plus {
    position: relative;
    .plusOne {
      position: absolute;
      color: red;
      left: 50%;
      bottom: 50%;
      font-size: 20px;
      font-weight: 800;
    }
    .startAni {
      animation: fadeToTop 1s;
    }
  }
  @keyframes fadeToTop {
    0% {
      left: 50%;
      bottom: 50%;
      opacity: 1;
    }
    100% {
      bottom: 100%;
      opacity: 0;
    }
  }
}
</style>
<style>
body{
  overflow-y: hidden;
}
</style>