|
@@ -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>
|