Parcourir la source

modify animate table

haojianlong il y a 5 ans
Parent
commit
4acdd01a0d
1 fichiers modifiés avec 313 ajouts et 105 suppressions
  1. 313 105
      src/views/point/dynamicdata/addRelation/index.vue

+ 313 - 105
src/views/point/dynamicdata/addRelation/index.vue

@@ -5,7 +5,6 @@
       <el-switch @change="changeType" v-model="isSwitch"></el-switch>AI辅助
       <el-button size="medium" @click="showHistory">本次对应记录 0</el-button>
     </div>
-    <el-button @click="animate">咚咚咚上</el-button>
     <!-- tab页区域 -->
     <el-tabs v-model="curType">
       <el-tab-pane
@@ -65,36 +64,79 @@
         </div>
         <!-- 左侧列表 -->
         <div class="table-box">
-          <el-table
-            v-show="aaaaaa"
-            ref="multipleTable1"
-            :data="tableData"
-            tooltip-effect="dark"
-            style="width: 100%"
-            height="100%"
-            @selection-change="handleSelectionChange"
-            :row-class-name="'transition-box'"
-          >
-            <el-table-column label="数据源" align="right">
-              <template slot-scope="scope">{{ scope.row.date }}</template>
-            </el-table-column>
-            <el-table-column prop="name" label="位置标签" align="right"></el-table-column>
-            <el-table-column
-              prop="address"
-              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 style="height:100%">
+            <div class="t-head">
+              <tr style="line-height:38px;">
+                <td
+                  class="tr"
+                  style="width:20%;padding-right:10px;border-bottom: 1px solid #EBEEF5;"
+                >设备实例名称</td>
+                <td
+                  class="tr"
+                  style="width:20%;padding-right:10px;border-bottom: 1px solid #EBEEF5;"
+                >设备实例编码</td>
+                <td
+                  class="tr"
+                  style="width:30%;padding-right:10px;border-bottom: 1px solid #EBEEF5;"
+                >所在业务空间</td>
+                <td
+                  class="tr"
+                  style="width:200px;min-width:200px;background-color:#f5f7fa;padding-right:10px;border-bottom: 1px solid #EBEEF5;"
+                >所在建筑楼层</td>
+                <td
+                  class="tr"
+                  style="width:30px;min-width:30px;box-sizing:border-box;background-color:#f5f7fa;padding-right:10px;border-bottom: 1px solid #EBEEF5;"
+                ></td>
+              </tr>
+            </div>
+            <div class="t-body" style="overflow-y:auto;height:calc(100% - 39px);">
+              <div>
+                <div v-for="(t,i) in LtableData" :key="t.id">
+                  <transition name="el-zoom-in-top">
+                    <tr v-show="t.show" style="line-height:38px;">
+                      <td
+                        class="tr"
+                        style="width:20%;padding-right:10px;border-bottom: 1px solid #EBEEF5;"
+                      >{{t.name}}</td>
+                      <td
+                        class="tr"
+                        style="width:20%;padding-right:10px;border-bottom: 1px solid #EBEEF5;"
+                      >{{t.name}}</td>
+                      <td
+                        class="tr"
+                        style="width:30%;padding-right:10px;border-bottom: 1px solid #EBEEF5;"
+                      >{{t.address}}</td>
+                      <td
+                        class="tr"
+                        style="width:200px;min-width:200px;background-color:#f5f7fa;padding-right:10px;border-bottom: 1px solid #EBEEF5;"
+                      >
+                        <el-tooltip
+                          class="item"
+                          effect="dark"
+                          :content="t.date"
+                          placement="top-start"
+                        >
+                          <span>{{t.date}}</span>
+                        </el-tooltip>
+                      </td>
+                      <td
+                        class="tr"
+                        style="width:30px;min-width:30px;box-sizing:border-box;background-color:#f5f7fa;padding-right:10px;border-bottom: 1px solid #EBEEF5;"
+                      >
+                        <el-checkbox v-model="t.checked" @change="changeCheck(i,'r')"></el-checkbox>
+                      </td>
+                    </tr>
+                  </transition>
+                </div>
+              </div>
+            </div>
+          </div>
           <!-- 智能推荐 -->
-          <transition name="el-fade-in-linear">
-            <div class="AIRecom" v-show="leftAI">
+          <transition name="el-zoom-in-top">
+            <div class="AIRecom" v-show="leftRecoList.length>0&&leftAI">
               <div class="l-title">
                 可能对应的设备标识
-                <i class="el-icon-close"></i>
+                <i class="el-icon-close" @click="leftRecoList=[]"></i>
               </div>
               <div
                 v-for="(t,i) in leftRecoList"
@@ -104,7 +146,7 @@
               >
                 <p>
                   <el-checkbox v-model="t.checked"></el-checkbox>
-                  <span>{{t.name2}}</span>
+                  <span @click="clearData">{{t.name2}}</span>
                 </p>
                 <p>{{t.name}}</p>
                 <p>{{t.date}}</p>
@@ -132,48 +174,79 @@
         </div>
         <!-- 右侧列表 -->
         <div class="table-box">
-          <!-- <el-table
-            ref="multipleTable2"
-            :data="tableData"
-            tooltip-effect="dark"
-            style="width: 100%"
-            height="100%"
-            @selection-change="handleSelectionChange"
-          >
-            <el-table-column type="selection" width="35" class-name="bgf5"></el-table-column>
-            <el-table-column label="设备实例名称" width="200" class-name="bgf5">
-              <template slot-scope="scope">{{ scope.row.date }}</template>
-            </el-table-column>
-            <el-table-column prop="name" label="设备实例编码"></el-table-column>
-            <el-table-column prop="name" label="所在业务空间"></el-table-column>
-            <el-table-column prop="address" label="所在建筑楼层" show-overflow-tooltip></el-table-column>
-          </el-table>-->
-          <div>
+          <div style="height:100%">
             <div class="t-head">
-              <div class="tr1" style="width:10%;min-width:35px;"></div>
-              <div class="tr2" style="width:20%;min-width:200px;">设备实例名称</div>
-              <div class="tr3" style="width:20%">设备实例编码</div>
-              <div class="tr4" style="width:20%">所在业务空间</div>
-              <div class="tr5" style="width:30%">所在建筑楼层</div>
+              <tr style="line-height:38px;">
+                <td
+                  class="tl"
+                  style="width:30px;min-width:30px;box-sizing:border-box;background-color:#f5f7fa;padding-left:10px;border-bottom: 1px solid #EBEEF5;"
+                ></td>
+                <td
+                  class="tl"
+                  style="width:200px;min-width:200px;background-color:#f5f7fa;padding-left:10px;border-bottom: 1px solid #EBEEF5;"
+                >设备实例名称</td>
+                <td
+                  class="tl"
+                  style="width:20%;padding-left:10px;border-bottom: 1px solid #EBEEF5;"
+                >设备实例编码</td>
+                <td
+                  class="tl"
+                  style="width:20%;padding-left:10px;border-bottom: 1px solid #EBEEF5;"
+                >所在业务空间</td>
+                <td
+                  class="tl"
+                  style="width:30%;padding-left:10px;border-bottom: 1px solid #EBEEF5;"
+                >所在建筑楼层</td>
+              </tr>
             </div>
-            <div class="t-body">
-              <div v-for="t in tableData" :key="t.id">
-                <div class="tr1" style="width:10%;min-width:35px;">
-                  <el-checkbox v-model="t.checked"></el-checkbox>
+            <div class="t-body" style="overflow-y:auto;height:calc(100% - 39px);">
+              <div>
+                <div v-for="(t,i) in RtableData" :key="t.id">
+                  <transition name="el-zoom-in-top">
+                    <tr v-show="t.show" style="line-height:38px;">
+                      <td
+                        class="tl"
+                        style="width:30px;min-width:30px;box-sizing:border-box;background-color:#f5f7fa;padding-left:10px;border-bottom: 1px solid #EBEEF5;"
+                      >
+                        <el-checkbox v-model="t.checked" @change="changeCheck(i,'r')"></el-checkbox>
+                      </td>
+                      <td
+                        class="tl"
+                        style="width:200px;min-width:200px;background-color:#f5f7fa;padding-left:10px;border-bottom: 1px solid #EBEEF5;"
+                      >
+                        <el-tooltip
+                          class="item"
+                          effect="dark"
+                          :content="t.date"
+                          placement="top-start"
+                        >
+                          <span>{{t.date}}</span>
+                        </el-tooltip>
+                      </td>
+                      <td
+                        class="tl"
+                        style="width:20%;padding-left:10px;border-bottom: 1px solid #EBEEF5;"
+                      >{{t.name}}</td>
+                      <td
+                        class="tl"
+                        style="width:20%;padding-left:10px;border-bottom: 1px solid #EBEEF5;"
+                      >{{t.name}}</td>
+                      <td
+                        class="tl"
+                        style="width:30%;padding-left:10px;border-bottom: 1px solid #EBEEF5;"
+                      >{{t.address}}</td>
+                    </tr>
+                  </transition>
                 </div>
-                <div class="tr2" style="width:20%;min-width:200px;">{{t.date}}</div>
-                <div class="tr3" style="width:20%">{{t.name}}</div>
-                <div class="tr4" style="width:20%">{{t.name}}</div>
-                <div class="tr5" style="width:30%">{{t.address}}</div>
               </div>
             </div>
           </div>
           <!-- 智能推荐 -->
-          <transition name="el-fade-in-linear">
-            <div class="AIRecom" v-show="!leftAI">
+          <transition name="el-zoom-in-top">
+            <div class="AIRecom" v-show="rightRecoList.length>0&&!leftAI">
               <div class="r-title">
                 可能对应的设备实例
-                <i class="el-icon-close"></i>
+                <i class="el-icon-close" @click="rightRecoList=[]"></i>
               </div>
               <div
                 v-for="(t,i) in rightRecoList"
@@ -212,7 +285,6 @@ export default {
   },
   data() {
     return {
-      aaaaaa: true,
       isSwitch: true, //AI辅助
       curType: "1", //当前所在tab页
       typeList: [
@@ -247,122 +319,159 @@ export default {
           label: "北京烤鸭"
         }
       ], //
-      tableData: [
+      LtableData: [
         {
           date: "2016-05-02",
           name: "王小虎",
+          show: true,
+          checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
         {
           date: "2016-05-04",
           name: "王小虎",
+          show: true,
+          checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
         {
           date: "2016-05-01",
           name: "王小虎",
+          show: true,
+          checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
         {
           date: "2016-05-02",
           name: "王小虎",
+          show: true,
+          checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
         {
           date: "2016-05-04",
           name: "王小虎",
+          show: true,
+          checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
         {
           date: "2016-05-01",
           name: "王小虎",
+          show: true,
+          checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
         {
           date: "2016-05-08",
           name: "王小虎",
+          show: true,
+          checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
         {
           date: "2016-05-06",
           name: "王小虎",
+          show: true,
+          checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
         {
           date: "2016-05-07",
           name: "王小虎",
+          show: true,
+          checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         }
-      ],
-      multipleSelection: [], //列表数据
-      page: {
-        pageSize: 50,
-        pageSizes: [10, 20, 50, 100],
-        pageNumber: 1,
-        total: 0
-      },
-      leftRecoList: [
+      ], //列表数据
+      RtableData: [
         {
-          id: 1,
-          date: "2016-05-03",
+          date: "2016-05-02",
           name: "王小虎",
+          show: true,
           checked: false,
-          name2: "99%",
           address: "上海市普陀区金沙江路 1518 弄"
         },
         {
-          id: 2,
-          date: "2016-05-03",
+          date: "2016-05-04",
           name: "王小虎",
+          show: true,
           checked: false,
-          name2: "99%",
           address: "上海市普陀区金沙江路 1518 弄"
         },
         {
-          id: 3,
-          date: "2016-05-03",
+          date: "2016-05-01",
           name: "王小虎",
+          show: true,
           checked: false,
-          name2: "99%",
           address: "上海市普陀区金沙江路 1518 弄"
-        }
-      ], //左推荐
-      rightRecoList: [
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          show: true,
+          checked: false,
+          address: "上海市普陀区金沙江路 1518 弄"
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          show: true,
+          checked: false,
+          address: "上海市普陀区金沙江路 1518 弄"
+        },
         {
-          id: 1,
-          date: "2016-05-03",
+          date: "2016-05-01",
           name: "王小虎",
-          name2: "99%",
+          show: true,
           checked: false,
-          address:
-            "上海市普陀区金沙江路 1518 上海市普陀区金沙江路 1518 上海市普陀区金沙江路 1518 弄"
+          address: "上海市普陀区金沙江路 1518 弄"
         },
         {
-          id: 2,
-          date: "2016-05-03",
+          date: "2016-05-08",
           name: "王小虎",
-          name2: "99%",
+          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         },
         {
-          id: 3,
-          date: "2016-05-03",
+          date: "2016-05-06",
           name: "王小虎",
-          name2: "99%",
+          show: true,
+          checked: false,
+          address: "上海市普陀区金沙江路 1518 弄"
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          show: true,
           checked: false,
           address: "上海市普陀区金沙江路 1518 弄"
         }
-      ], //右推荐
+      ], //列表数据
+      page: {
+        pageSize: 50,
+        pageSizes: [10, 20, 50, 100],
+        pageNumber: 1,
+        total: 0
+      }, //分页
+      leftRecoList: [], //左推荐
+      rightRecoList: [], //右推荐
       leftAI: true, //左右推荐公用-互斥
-      form: {} //查询条件
+      form: {}, //查询条件
+      lArray: [], //左侧选中数据索引
+      rArray: [], //右侧选中数据索引
+      hasRequestedFlag: false //用于标识是否关联过数据,若是则重新请求第一页数据,
     };
   },
   created() {},
   mounted() {},
+  computed: {
+    requestFlag() {
+      return this.lArray.length > 0 && this.rArray.length > 0;
+    }
+  },
   methods: {
-    //表格选中事件
-    handleSelectionChange() {},
     //切换AI辅助
     changeType() {},
     //选择推荐
@@ -379,7 +488,108 @@ export default {
       this.$refs.history.showDialog();
     },
     animate() {
-      this.leftAI = !this.leftAI;
+      //前端假删->隐藏已经关联的数据,若真删有bug
+      //两侧
+      for (let j = 0; j < this.LtableData.length; j++) {
+        if (this.LtableData[j].checked) {
+          this.LtableData[j].show = false;
+        }
+      }
+      for (let i = 0; i < this.RtableData.length; i++) {
+        if (this.RtableData[i].checked) {
+          this.RtableData[i].show = false;
+        }
+      }
+      this.lArray = [];
+      this.rArray = [];
+    },
+    //表格中的选择事件
+    changeCheck(i, l) {
+      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);
+      }
+    }
+  },
+  watch: {
+    //判断两边是否均有选中值
+    requestFlag(n, o) {
+      if (n) {
+        this.animate();
+      }
+    },
+    //AI辅助-左侧
+    lArray(n, o) {
+      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;
+      }
+    },
+    //AI辅助-右侧
+    rArray(n, o) {
+      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;
+      }
     }
   }
 };
@@ -455,16 +665,17 @@ export default {
             width: 30%;
             height: 126px;
             float: left;
-            background-color: #fff;
             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;
               }
@@ -490,9 +701,6 @@ export default {
             margin-right: 3%;
           }
         }
-        .alert {
-          transition: all 2s;
-        }
       }
       ::-webkit-scrollbar {
         display: none;