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

<template>
  <div id="addRelation">
    <!-- 按钮区域 -->
    <div class="text-right">
      <el-switch @change="changeType" v-model="isSwitch"></el-switch>AI辅助
      <el-button size="medium" @click="showHistory" class="ani-his-plus">
        本次对应记录{{num}}
        <span v-if="showPlus" :class="{'plusOne':true,'startAni':showPlus}">+1</span>
      </el-button>
    </div>
    <!-- tab页区域 -->
    <el-tabs v-model="curType">
      <el-tab-pane
        v-for="(item) in typeList"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      ></el-tab-pane>
    </el-tabs>
    <!-- 数据字典设备类型 -->
    <el-form>
      <el-form-item label="数据字典设备类型">
        <el-select v-model="form.source" multiple collapse-tags placeholder="全部" filterable>
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 列表及查询条件区域 -->
    <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.keywords" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
          <div class="query-item">
            <label>数据源</label>
            <el-select v-model="form.source" multiple collapse-tags placeholder="全部" filterable>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="query-item">
            <label>位置标签</label>
            <el-select v-model="form.position" multiple collapse-tags placeholder="全部" filterable>
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <!-- 左侧列表 -->
        <div class="table-box">
          <div class="l-custom-table custom-table" v-loading="lTableLoading">
            <div>
              <table>
                <thead>
                  <tr>
                    <td style="width:20%;">数据源</td>
                    <td style="width:30%;">位置标签</td>
                    <td class="bgf5" style="width:200px;min-width:200px;">设备标识</td>
                    <td class="bgf5 special" style="width:30px;min-width:30px;"></td>
                  </tr>
                </thead>
              </table>
            </div>
            <div ref="lTableBody" class="custom-table-body">
              <table>
                <tbody is="transition-group" name="el-zoom-in-top">
                  <tr v-for="t in LtableData" :key="t.id">
                    <td style="width:20%;">
                      <el-tooltip :content="t.address" placement="top">
                        <span>{{t.address}}</span>
                      </el-tooltip>
                    </td>
                    <td style="width:30%;">
                      <el-tooltip :content="t.address" placement="top">
                        <span>{{t.address}}</span>
                      </el-tooltip>
                    </td>
                    <td class="bgf5" style="width:200px;min-width:200px;">
                      <el-tooltip :content="t.address" placement="top">
                        <span>{{t.address}}</span>
                      </el-tooltip>
                    </td>
                    <td class="bgf5 special" style="width:30px;min-width:30px;">
                      <el-checkbox v-model="t.checked" @change="changeCheck(t.id,'l')"></el-checkbox>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <!-- 智能推荐 -->
          <transition name="el-zoom-in-top">
            <div class="AIRecom" v-show="leftRecoList.length>0&&leftAI">
              <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.name2}}</span>
                </p>
                <p>{{t.name}}</p>
                <p>{{t.date}}</p>
                <p>{{t.address}}</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.keywords" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
          <div class="query-item">
            <label>所在位置</label>
            <el-cascader placeholder="请选择所在位置" :options="options" filterable change-on-select></el-cascader>
          </div>
        </div>
        <!-- 右侧列表 -->
        <div class="table-box">
          <div class="r-custom-table custom-table" v-loading="rTableLoading">
            <div>
              <table>
                <thead>
                  <tr>
                    <td class="bgf5 special" style="width:30px;min-width:30px;"></td>
                    <td class="bgf5" style="width:200px;min-width:200px;">设备实例名称</td>
                    <td style="width:20%;">设备实例编码</td>
                    <td style="width:20%;">所在业务空间</td>
                    <td style="width:30%;">所在建筑楼层</td>
                  </tr>
                </thead>
              </table>
            </div>
            <div ref="rTableBody" class="custom-table-body">
              <table>
                <tbody is="transition-group" name="el-zoom-in-top">
                  <tr v-for="t in RtableData" :key="t.id" :data-id="t.id">
                    <td class="bgf5 special" style="width:30px;min-width:30px;">
                      <el-checkbox v-model="t.checked" @change="changeCheck(t.id,'r')"></el-checkbox>
                    </td>
                    <td class="bgf5" style="width:200px;min-width:200px;">
                      <el-tooltip :content="t.date" placement="top">
                        <span>{{t.date}}</span>
                      </el-tooltip>
                    </td>
                    <td style="width:20%;">
                      <el-tooltip :content="t.address" placement="top">
                        <span>{{t.address}}</span>
                      </el-tooltip>
                    </td>
                    <td style="width:20%;">
                      <el-tooltip :content="t.address" placement="top">
                        <span>{{t.address}}</span>
                      </el-tooltip>
                    </td>
                    <td style="width:30%;">
                      <el-tooltip :content="t.address" placement="top">
                        <span>{{t.address}}</span>
                      </el-tooltip>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <!-- 智能推荐 -->
          <transition name="el-zoom-in-top">
            <div class="AIRecom" v-show="rightRecoList.length>0&&!leftAI">
              <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.name2}}</span>
                </p>
                <p>{{t.name}}</p>
                <p>{{t.date}}</p>
                <p>{{t.address}}</p>
                <p>{{t.address}}</p>
              </div>
            </div>
          </transition>
        </div>
      </div>
    </div>
    <!-- 历史记录弹窗 -->
    <history-dialog ref="history"></history-dialog>
  </div>
</template>
<script>
import tools from "@/utils/tools";
import historyDialog from "@/components/point/dynamicdata/historyDialog";
import { mapGetters, mapActions } from "vuex";
export default {
  components: {
    historyDialog
  },
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  data() {
    return {
      isSwitch: true, //AI辅助
      curType: "1", //当前所在tab页
      typeList: [
        {
          title: "设备类",
          name: "1"
        },
        {
          title: "2类",
          name: "2"
        }
      ], //tab页list
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ], //
      LtableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 4,
          date: "2016-05-02",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 5,
          date: "2016-05-04",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 6,
          date: "2016-05-01",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 7,
          date: "2016-05-08",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 8,
          date: "2016-05-06",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 9,
          date: "2016-05-07",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ], //列表数据
      RtableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 4,
          date: "2016-05-02",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 5,
          date: "2016-05-04",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 6,
          date: "2016-05-01",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 7,
          date: "2016-05-08",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 8,
          date: "2016-05-06",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          id: 9,
          date: "2016-05-07",
          name: "王小虎",
          checked: false,
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ], //列表数据
      page: {
        pageSize: 50,
        pageNumber: 1,
        total: 0
      }, //分页
      form: {}, //查询条件
      leftRecoList: [], //左推荐
      rightRecoList: [], //右推荐
      leftAI: true, //左右推荐公用-互斥
      lArray: [], //左侧选中数据索引
      rArray: [], //右侧选中数据索引
      hasRequestedFlag: false, //用于标识是否关联过数据,若是则重新请求第一页数据,
      showPlus: false, //+1记录动画
      num: 0, //记录条数
      timer: null, //函数节流 延时器
      historyList: [], //操作历史
      lTableLoading: false,
      rTableLoading: false
    };
  },
  created() {},
  mounted() {
    let that = this;
    let lTableBody = this.$refs.lTableBody;
    lTableBody.addEventListener("scroll", () => {
      let scrollTop = lTableBody.scrollTop;
      let scrollHeight = lTableBody.scrollHeight;
      let offsetHeight = lTableBody.offsetHeight;
      if (scrollTop + offsetHeight >= scrollHeight) {
        console.log("request");
        this.lTableLoading = true;
        setTimeout(() => {
          this.lTableLoading = false;
          this.LtableData.push({
            date: "2016-05-02",
            name: "王小虎",
            id: new Date().getTime(),
            checked: false,
            address: "上海市普陀区金沙江路 1518 弄"
          });
        }, 1000);
      }
    });
    let rTableBody = this.$refs.rTableBody;
    rTableBody.addEventListener("scroll", () => {
      let scrollTop = rTableBody.scrollTop;
      let scrollHeight = rTableBody.scrollHeight;
      let offsetHeight = rTableBody.offsetHeight;
      if (scrollTop + offsetHeight >= scrollHeight) {
        console.log("request");
        this.rTableLoading = true;
        setTimeout(() => {
          this.rTableLoading = false;
          this.RtableData.push({
            date: "2016-05-02",
            name: "王小虎",
            id: new Date().getTime(),
            checked: false,
            address: "上海市普陀区金沙江路 1518 弄"
          });
        }, 1000);
      }
    });
  },
  computed: {
    requestFlag() {
      return this.lArray.length > 0 && this.rArray.length > 0;
    }
  },
  methods: {
    //切换AI辅助
    changeType() {},
    //推荐中的选择事件
    selectAI(i, l) {
      //i 索引 l 左侧AI or 右侧AI
      if (l == "l") {
        this.leftRecoList[i].checked = !this.leftRecoList[i].checked;
        this.changeCheck(this.leftRecoList[i].id, "l");
        this.LtableData.map((t, index) => {
          if (t.id == this.leftRecoList[i].id) {
            t.checked = true;
          }
        });
      } else {
        this.rightRecoList[i].checked = !this.rightRecoList[i].checked;
        this.changeCheck(this.rightRecoList[i].id, "r");
        this.RtableData.map((t, index) => {
          if (t.id == this.rightRecoList[i].id) {
            t.checked = true;
          }
        });
      }
    },
    //查看本次历史记录
    showHistory() {
      this.$refs.history.showDialog(this.historyList);
    },
    //隐藏 动画
    animate() {
      //前端真删,但是要将数据存到historyList中,弹窗中使用
      //两侧
      let history = { leftList: [], rightList: [] };
      for (let j = 0; j < this.LtableData.length; j++) {
        if (this.LtableData[j].checked) {
          let temp = this.LtableData.splice(j, 1);
          history.leftList.push(temp[0]);
          j--;
        }
      }
      for (let i = 0; i < this.RtableData.length; i++) {
        if (this.RtableData[i].checked) {
          let temp = this.RtableData.splice(i, 1);
          history.rightList.push(temp[0]);
          i--;
        }
      }
      this.historyList.push(history);
      this.lArray = [];
      this.rArray = [];
      this.num++;
      this.showPlus = true;
      setTimeout(() => {
        this.showPlus = false;
      }, 800);
    },
    //表格中的选择事件
    changeCheck(i, l) {
      // i ->数据id,l->左侧or右侧
      let key = l == "l" ? "lArray" : "rArray";
      if (!this[key].includes(i)) {
        this[key].push(i);
      } else {
        let index = this[key].indexOf(i);
        this[key].splice(index, 1);
      }
    },
    getData() {}
  },
  watch: {
    //判断两边是否均有选中值
    requestFlag(n, o) {
      if (n) {
        this.rightRecoList = [];
        this.leftRecoList = [];
        this.animate();
      }
    },
    //AI辅助-左侧
    lArray(n, o) {
      //先清空,返回结果后赋值
      this.rightRecoList = [];
      //上->此赋值操作与 后台返回的值 异步问题
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        console.log("函数节流");
        if (n.length > 0) {
          this.leftAI = false;
          this.rightRecoList = [
            {
              id: 1,
              date: "2016-05-03",
              name: "王小虎",
              checked: false,
              name2: "99%",
              address: "上海市普陀区金沙江路 1518 弄"
            },
            {
              id: 2,
              date: "2016-05-03",
              name: "王小虎",
              checked: false,
              name2: "99%",
              address: "上海市普陀区金沙江路 1518 弄"
            },
            {
              id: 3,
              date: "2016-05-03",
              name: "王小虎",
              checked: false,
              name2: "99%",
              address: "上海市普陀区金沙江路 1518 弄"
            }
          ];
        } else {
          this.rightRecoList = [];
          this.leftAI = true;
        }
      }, 800);
    },
    //AI辅助-右侧
    rArray(n, o) {
      this.leftRecoList = [];
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        console.log("函数节流");
        if (n.length > 0) {
          this.leftAI = true;
          this.leftRecoList = [
            {
              id: 1,
              date: "2016-05-03",
              name: "王小虎",
              checked: false,
              name2: "99%",
              address: "上海市普陀区金沙江路 1518 弄"
            },
            {
              id: 2,
              date: "2016-05-03",
              name: "王小虎",
              checked: false,
              name2: "99%",
              address: "上海市普陀区金沙江路 1518 弄"
            },
            {
              id: 3,
              date: "2016-05-03",
              name: "王小虎",
              checked: false,
              name2: "99%",
              address: "上海市普陀区金沙江路 1518 弄"
            }
          ];
        } else {
          this.leftRecoList = [];
          this.leftAI = false;
        }
      }, 800);
    }
  }
};
</script>
<style lang="scss" scoped>
#addRelation {
  height: 100%;
  background-color: #fff;
  padding: 10px 20px 10px 10px;
  .text-right {
    text-align: right;
  }
  .table-container {
    height: calc(100% - 250px);
    & > 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: 0 5px;
          label {
            display: block;
          }
          .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%;
        table {
          table-layout: fixed;
          width: 100%;
          overflow: hidden;
        }
        .custom-table-body {
          height: calc(100% - 30px);
          overflow-x: hidden;
          overflow-y: auto;
        }
        tr {
          line-height: 38px;
        }
        td {
          border-bottom: 1px solid #ebeef5;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
        .bgf5 {
          background-color: #f5f7fa;
        }
        td.special {
          box-sizing: border-box;
        }
      }
      .l-custom-table {
        td {
          text-align: right;
          padding-right: 10px;
        }
      }
      .r-custom-table {
        td {
          padding-left: 10px;
        }
      }
    }
  }
  .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>