histortdialog

src/components/point/dynamicdata/historyDialog.vue

@@ -11,15 +11,88 @@
     <div>
       <el-table
         :data="tableData"
-        :span-method="objectSpanMethod"
-        border
-        style="width: 100%; margin-top: 20px"
+        style="width: 100%;"
+        :show-header="showheader"
+        :row-class-name="'bt2'"
+        height="400px"
       >
-        <el-table-column prop="id" label="ID" width="180"></el-table-column>
-        <el-table-column prop="name" label="姓名"></el-table-column>
-        <el-table-column prop="amount1" label="数值 1（元）"></el-table-column>
-        <el-table-column prop="amount2" label="数值 2（元）"></el-table-column>
-        <el-table-column prop="amount3" label="数值 3（元）"></el-table-column>
+        <el-table-column>
+          <el-table-column label="数据源" align="right">
+            <template slot-scope="scope">
+              <div v-for="t in scope.row.leftList" :key="t.id">
+                <el-tooltip :content="t.address" placement="top">
+                  <span>{{t.address}}</span>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="位置标签" align="right">
+            <template slot-scope="scope">
+              <div v-for="t in scope.row.leftList" :key="t.id">
+                <el-tooltip :content="t.address" placement="top">
+                  <span>{{t.address}}</span>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="设备标识" width="200px" class-name="bgf5" align="right">
+            <template slot-scope="scope">
+              <div v-for="t in scope.row.leftList" :key="t.id">
+                <el-tooltip :content="t.address" placement="top">
+                  <span>{{t.address}}</span>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table-column>
+        <el-table-column>
+          <el-table-column label="设备实例名称" width="200px" class-name="bgf5 border-l">
+            <template slot-scope="scope">
+              <div v-for="t in scope.row.rightList" :key="t.id">
+                <el-tooltip :content="t.address" placement="top">
+                  <span>{{t.address}}</span>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="设备实例编码">
+            <template slot-scope="scope">
+              <div v-for="t in scope.row.rightList" :key="t.id">
+                <el-tooltip :content="t.address" placement="top">
+                  <span>{{t.address}}</span>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="所在建筑楼层">
+            <template slot-scope="scope">
+              <div v-for="t in scope.row.rightList" :key="t.id">
+                <el-tooltip :content="t.address" placement="top">
+                  <span>{{t.address}}</span>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="所在业务空间">
+            <template slot-scope="scope">
+              <div v-for="t in scope.row.rightList" :key="t.id">
+                <el-tooltip :content="t.address" placement="top">
+                  <span>{{t.address}}</span>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table-column>
+        <el-table-column label="操作" width="100px">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleDelete(scope.$index, scope.row)"
+              type="danger"
+              plain
+            >清除对应</el-button>
+          </template>
+        </el-table-column>
       </el-table>
     </div>
   </el-dialog>
@@ -29,87 +102,48 @@ export default {
   data() {
     return {
       dialogVisible: false, //弹窗显示与隐藏
-      tableData: [
-        {
-          id: "12987122",
-          name: "王小虎",
-          amount1: "234",
-          amount2: "3.2",
-          amount3: 10
-        },
-        {
-          id: "12987123",
-          name: "王小虎",
-          amount1: "165",
-          amount2: "4.43",
-          amount3: 12
-        },
-        {
-          id: "12987124",
-          name: "王小虎",
-          amount1: "324",
-          amount2: "1.9",
-          amount3: 9
-        },
-        {
-          id: "12987125",
-          name: "王小虎",
-          amount1: "621",
-          amount2: "2.2",
-          amount3: 17
-        },
-        {
-          id: "12987126",
-          name: "王小虎",
-          amount1: "539",
-          amount2: "4.1",
-          amount3: 15
-        }
-      ] //数据list
+      showheader: false,
+      tableData: [], //数据list
+      repeatList: {
+        l: [],
+        r: []
+      }
     };
   },
   methods: {
-    showDialog() {
+    showDialog(data) {
+      this.tableData = data;
       this.dialogVisible = true;
     },
     handleClose(done) {},
-    objectSpanMethod() {},
-    transform(){
-
-    }
-  }
+    handleDelete(i, t) {}
+  },
+  mounted() {},
+  created() {}
 };
 </script>
 <style lang="scss" scoped>
 #historyAction {
-  .act-history.el-dialog {
-    max-height: 70%;
+  /deep/ .act-history.el-dialog {
+    max-height: 60%;
     overflow-y: auto;
     overflow-x: hidden;
-    .action-item {
-      line-height: 34px;
-      background-color: #f2f2f2;
-      .action-item-left {
-        background-color: #fff;
-        width: 44%;
-        float: left;
-      }
-      .action-item-middle {
-        background-color: #fff;
-        width: 44%;
-        float: left;
-        margin-left: 1%;
-        border-right: 1px solid #ccc;
-      }
-      .action-item-right {
-        background-color: #fff;
-        width: 10%;
-        float: left;
-      }
-      .h-100 {
-        height: calc(100% - 0);
+    td.bgf5 {
+      background-color: #f5f7fa;
+    }
+    td {
+      border-bottom: 1px solid #ccc;
+      border-top: 1px solid #ccc;
+      div {
+        line-height: 34px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
       }
     }
+    .border-l {
+      border-left: 2px solid #ccc;
+    }
   }
 }
 </style>

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

@@ -85,9 +85,21 @@
               <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 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>
                     <td class="bgf5" style="width:200px;min-width:200px;">
                       <el-tooltip :content="t.address" placement="top">
                         <span>{{t.address}}</span>
@@ -170,9 +182,21 @@
                         <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>
+                    <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>
@@ -400,7 +424,8 @@ export default {
       hasRequestedFlag: false, //用于标识是否关联过数据,若是则重新请求第一页数据,
       showPlus: false, //+1记录动画
       num: 0, //记录条数
-      timer: null,
+      timer: null, //函数节流 延时器
+      historyList: [] //操作历史
     };
   },
   created() {},
@@ -470,24 +495,28 @@ export default {
     },
     //查看本次历史记录
     showHistory() {
-      this.$refs.history.showDialog();
+      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) {
-          this.LtableData.splice(j, 1);
+          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) {
-          this.RtableData.splice(i, 1);
+          let temp = this.RtableData.splice(i, 1);
+          history.rightList.push(temp[0]);
           i--;
         }
       }
+      this.historyList.push(history);
       this.lArray = [];
       this.rArray = [];
       this.num++;
@@ -525,7 +554,7 @@ export default {
       //上->此赋值操作与 后台返回的值 异步问题
       clearTimeout(this.timer);
       this.timer = setTimeout(() => {
-        console.log('函数节流')
+        console.log("函数节流");
         if (n.length > 0) {
           this.leftAI = false;
           this.rightRecoList = [
@@ -565,7 +594,7 @@ export default {
       this.leftRecoList = [];
       clearTimeout(this.timer);
       this.timer = setTimeout(() => {
-        console.log('函数节流')
+        console.log("函数节流");
         if (n.length > 0) {
           this.leftAI = true;
           this.leftRecoList = [
@@ -598,7 +627,7 @@ export default {
           this.leftRecoList = [];
           this.leftAI = false;
         }
-      },800)
+      }, 800);
     }
   }
 };