haojianlong 5 anni fa
parent
commit
6361c8583d
1 ha cambiato i file con 221 aggiunte e 227 eliminazioni
  1. 221 227
      src/views/point/dynamicdata/addRelation/index.vue

+ 221 - 227
src/views/point/dynamicdata/addRelation/index.vue

@@ -3,7 +3,10 @@
     <!-- 按钮区域 -->
     <div class="text-right">
       <el-switch @change="changeType" v-model="isSwitch"></el-switch>AI辅助
-      <el-button size="medium" @click="showHistory">本次对应记录 0</el-button>
+      <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">
@@ -65,41 +68,37 @@
         <!-- 左侧列表 -->
         <div class="table-box">
           <div class="l-custom-table custom-table">
-            <div class="t-head">
-              <tr>
-                <td style="width:20%;">设备实例名称</td>
-                <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>
+            <div>
+              <table>
+                <thead>
+                  <tr>
+                    <td style="width:20%;">设备实例名称</td>
+                    <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 class="t-body" ref="lTableBody">
-              <div>
-                <div v-for="(t,i) in LtableData" :key="t.id">
-                  <transition name="el-zoom-in-top">
-                    <tr v-show="t.show">
-                      <td style="width:20%;">
-                        <p>{{t.name}}</p>
-                      </td>
-                      <td style="width:20%;">
-                        <p>{{t.name}}</p>
-                      </td>
-                      <td style="width:30%;">
-                        <p>{{t.address}}</p>
-                      </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>
-                  </transition>
-                </div>
-              </div>
+            <div ref="lTableBody" class="custom-table-body">
+              <table class="t-body">
+                <tbody is="transition-group" name="el-zoom-in-top">
+                  <tr v-for="t in LtableData" :key="t.id">
+                    <td style="width:20%;">{{t.name}}</td>
+                    <td style="width:20%;">{{t.name}}</td>
+                    <td style="width:30%;">{{t.address}}</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>
           <!-- 智能推荐 -->
@@ -145,71 +144,39 @@
         </div>
         <!-- 右侧列表 -->
         <div class="table-box">
-          <!-- <div class="r-custom-table custom-table">
-            <div class="t-head">
-              <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>
+          <div class="r-custom-table custom-table">
+            <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 class="t-body" ref="rTableBody">
-              <div>
-                <div v-for="(t,i) in RtableData" :key="t.id">
-                  <transition name="el-zoom-in-top">
-                    <tr v-show="t.show">
-                      <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%;">
-                        <p>{{t.address}}</p>
-                      </td>
-                      <td style="width:20%;">
-                        <p>{{t.address}}</p>
-                      </td>
-                      <td style="width:30%;">
-                        <p>{{t.address}}</p>
-                      </td>
-                    </tr>
-                  </transition>
-                </div>
-              </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%;">{{t.address}}</td>
+                    <td style="width:20%;">{{t.address}}</td>
+                    <td style="width:30%;">{{t.address}}</td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
-          </div>-->
-          <div class="r-custom-table custom-table">
-            <table style="table-layout: fixed;width:100%;">
-              <thead>
-                <tr>
-                  <td class="bgf5" 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>
-              <tbody is="transition-group">
-                <tr v-for="t in RtableData" :key="t.id">
-                  <td class="bgf5">
-                    <el-checkbox v-model="t.checked" @change="changeCheck(t.id,'r')"></el-checkbox>
-                  </td>
-                  <td class="bgf5">
-                    <el-tooltip :content="t.date" placement="top">
-                      <span>{{t.date}}</span>
-                    </el-tooltip>
-                  </td>
-                  <td>{{t.address}}</td>
-                  <td>{{t.address}}</td>
-                  <td>{{t.address}}</td>
-                </tr>
-              </tbody>
-            </table>
           </div>
           <!-- 智能推荐 -->
           <transition name="el-zoom-in-top">
@@ -294,7 +261,6 @@ export default {
           id: 1,
           date: "2016-05-02",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
@@ -302,7 +268,6 @@ export default {
           id: 2,
           date: "2016-05-04",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
@@ -310,7 +275,6 @@ export default {
           id: 3,
           date: "2016-05-01",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
@@ -318,7 +282,6 @@ export default {
           id: 4,
           date: "2016-05-02",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
@@ -326,7 +289,6 @@ export default {
           id: 5,
           date: "2016-05-04",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
@@ -334,7 +296,6 @@ export default {
           id: 6,
           date: "2016-05-01",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
@@ -342,7 +303,6 @@ export default {
           id: 7,
           date: "2016-05-08",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
@@ -350,7 +310,6 @@ export default {
           id: 8,
           date: "2016-05-06",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
@@ -358,7 +317,6 @@ export default {
           id: 9,
           date: "2016-05-07",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         }
@@ -368,7 +326,6 @@ export default {
           id: 1,
           date: "2016-05-02",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
@@ -376,7 +333,6 @@ export default {
           id: 2,
           date: "2016-05-04",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
@@ -384,7 +340,6 @@ export default {
           id: 3,
           date: "2016-05-01",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
@@ -392,7 +347,6 @@ export default {
           id: 4,
           date: "2016-05-02",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
@@ -400,7 +354,6 @@ export default {
           id: 5,
           date: "2016-05-04",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
@@ -408,7 +361,6 @@ export default {
           id: 6,
           date: "2016-05-01",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
@@ -416,7 +368,6 @@ export default {
           id: 7,
           date: "2016-05-08",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
@@ -424,7 +375,6 @@ export default {
           id: 8,
           date: "2016-05-06",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
@@ -432,14 +382,12 @@ export default {
           id: 9,
           date: "2016-05-07",
           name: "王小虎",
-          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         }
       ], //列表数据
       page: {
         pageSize: 50,
-        pageSizes: [10, 20, 50, 100],
         pageNumber: 1,
         total: 0
       }, //分页
@@ -449,15 +397,47 @@ export default {
       leftAI: true, //左右推荐公用-互斥
       lArray: [], //左侧选中数据索引
       rArray: [], //右侧选中数据索引
-      hasRequestedFlag: false //用于标识是否关联过数据,若是则重新请求第一页数据,
+      hasRequestedFlag: false, //用于标识是否关联过数据,若是则重新请求第一页数据,
+      showPlus: false, //+1记录动画
+      num: 0, //记录条数
+      timer: null,
     };
   },
   created() {},
   mounted() {
+    let that = this;
     let lTableBody = this.$refs.lTableBody;
-    lTableBody.addEventListener("scroll", this.Scroll("lTableBody"), false);
+    lTableBody.addEventListener("scroll", () => {
+      let scrollTop = lTableBody.scrollTop;
+      let scrollHeight = lTableBody.scrollHeight;
+      let offsetHeight = lTableBody.offsetHeight;
+      if (scrollTop + offsetHeight >= scrollHeight) {
+        console.log("request");
+        this.LtableData.push({
+          date: "2016-05-02",
+          name: "王小虎",
+          id: new Date().getTime(),
+          checked: false,
+          address: "上海市普陀区金沙江路 1518 弄"
+        });
+      }
+    });
     let rTableBody = this.$refs.rTableBody;
-    rTableBody.addEventListener("scroll", this.Scroll("rTableBody"), false);
+    rTableBody.addEventListener("scroll", () => {
+      let scrollTop = rTableBody.scrollTop;
+      let scrollHeight = rTableBody.scrollHeight;
+      let offsetHeight = rTableBody.offsetHeight;
+      if (scrollTop + offsetHeight >= scrollHeight) {
+        console.log("request");
+        this.RtableData.push({
+          date: "2016-05-02",
+          name: "王小虎",
+          id: new Date().getTime(),
+          checked: false,
+          address: "上海市普陀区金沙江路 1518 弄"
+        });
+      }
+    });
   },
   computed: {
     requestFlag() {
@@ -481,7 +461,7 @@ export default {
       } else {
         this.rightRecoList[i].checked = !this.rightRecoList[i].checked;
         this.changeCheck(this.rightRecoList[i].id, "r");
-        this.RtableData.map((t, i) => {
+        this.RtableData.map((t, index) => {
           if (t.id == this.rightRecoList[i].id) {
             t.checked = true;
           }
@@ -494,23 +474,31 @@ export default {
     },
     //隐藏 动画
     animate() {
-      //前端假删->隐藏已经关联的数据,若真删有bug
+      //前端真删
       //两侧
       for (let j = 0; j < this.LtableData.length; j++) {
         if (this.LtableData[j].checked) {
-          this.LtableData[j].show = false;
+          this.LtableData.splice(j, 1);
+          j--;
         }
       }
       for (let i = 0; i < this.RtableData.length; i++) {
         if (this.RtableData[i].checked) {
-          this.RtableData[i].show = false;
+          this.RtableData.splice(i, 1);
+          i--;
         }
       }
       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);
@@ -519,36 +507,7 @@ export default {
         this[key].splice(index, 1);
       }
     },
-    //滚动到底部方法
-    Scroll(body) {
-      // this.$refs[body].scrollTop 滚动距离
-      // this.$refs[body].scrollHeight 滚动高度
-      // this.$refs[body].offsetHeight 元素高度
-      let scrollTop = this.$refs[body].scrollTop;
-      let scrollHeight = this.$refs[body].scrollHeight;
-      let offsetHeight = this.$refs[body].offsetHeight;
-      console.log(body);
-      console.log(scrollTop, offsetHeight, scrollHeight);
-      if (scrollTop + offsetHeight >= scrollHeight) {
-        console.log("request");
-        this.RtableData.push(
-          {
-            date: "2016-05-02",
-            name: "王小虎",
-            show: true,
-            checked: false,
-            address: "上海市普陀区金沙江路 1518 弄"
-          },
-          {
-            date: "2016-05-04",
-            name: "王小虎",
-            show: true,
-            checked: false,
-            address: "上海市普陀区金沙江路 1518 弄"
-          }
-        );
-      }
-    }
+    getData() {}
   },
   watch: {
     //判断两边是否均有选中值
@@ -564,74 +523,82 @@ export default {
       //先清空,返回结果后赋值
       this.rightRecoList = [];
       //上->此赋值操作与 后台返回的值 异步问题
-      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;
-      }
+      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 = [];
-      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;
-      }
+      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)
     }
   }
 };
@@ -744,22 +711,24 @@ export default {
       //列表
       .custom-table {
         height: 100%;
-        .t-body {
+        table {
+          table-layout: fixed;
+          width: 100%;
+          overflow: hidden;
+        }
+        .custom-table-body {
+          height: calc(100% - 30px);
+          overflow-x: hidden;
           overflow-y: auto;
-          height: calc(100% - 39px);
         }
         tr {
           line-height: 38px;
         }
         td {
           border-bottom: 1px solid #ebeef5;
-          p {
-            // width: 70px;
-            // white-space: nowrap;
-            // text-overflow: ellipsis;
-            overflow: hidden;
-            height: 38px;
-          }
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
         }
         .bgf5 {
           background-color: #f5f7fa;
@@ -794,5 +763,30 @@ export default {
   .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>