485收到消息自动跳转

src/views/ncs-485/index.vue

@@ -19,6 +19,12 @@
         <el-button :disabled="multipleSelection.length === 0" type="success" @click="sendAll">
           批量发送
         </el-button>
+        <el-button v-if="multipleSelection.length === 0" type="primary" @click="recoverList">
+          恢复勾选
+        </el-button>
+        <el-button v-else type="primary" @click="saveList">
+          保存勾选
+        </el-button>
         <el-switch v-model="boolOpen" active-text="打印具体消息" inactive-text="不打印具体消息" style="margin-left: 10px"></el-switch>
       </div>
       <div>
@@ -31,7 +37,7 @@
           <el-button slot="append" size="mini" icon="el-icon-search" @click="clickSearch"></el-button>
         </el-input>
       </div>
-      <el-table :data="deviceList" stripe border style="width: 100%" @selection-change="selectFun" height="520">
+      <el-table :data="deviceList" id="myTableId" stripe border style="width: 100%" ref="refTable" @selection-change="selectFun" height="520">
         <el-table-column type="selection" width="55"></el-table-column>
         <el-table-column prop="full_name" min-width="100" label="位置" align="center" />
         <el-table-column prop="name" label="设备名" min-width="130" align="center" />
@@ -148,8 +154,8 @@
 import { listByType } from '@/api/ncs_partInfo'
 import {get485DeviceAndFrame, getDeviceByType, update485s} from '@/api/ncs_device'
 import { unix2Date } from '@/utils/Foundation'
-import {changeRs485Debug} from "@/api/initialize";
-import * as API_Customer from "@/api/ncs_customer";
+import {changeRs485Debug} from "@/api/initialize"
+import Storage from '@/utils/storage'
 const DeviceUrl = domain.DeviceUrl
 export default {
   name: "index",
@@ -214,6 +220,11 @@ export default {
       }
       const time = (new Date()).valueOf()
       const item = this.deviceList[index]
+      //当点击"定位"按钮之后,实现屏幕滚动到这个id的位置,并且在屏幕的中间
+      let element = document.getElementById("table_td_bg_"+ item.id);
+      if (element) {
+        element.scrollIntoView({block:"center"})
+      }
       let active = {
         content: '设备:' + data.rs485mac  + '----' + data.rs485msg,
         timestamp: time,
@@ -283,6 +294,25 @@ export default {
         })
         _this.deviceList = res
         _this.allList = _this.MixinClone(res)
+        setTimeout(()=>{
+          //获取到存在 "userNameId"这个属性的对象下标
+          let refTabInsideData =  _this.$refs.refTable.data
+          //获取到表格的节点,获取到表格的所有子节点
+          let myTableId = document.getElementById("myTableId").childNodes
+          //拿到第3个表格内容结构的所有子节点  class = "el-table__body-wrapper is-scrolling-none"
+          let myTableIdChildNo3 =  myTableId[2].childNodes
+          //在拿到所有子节点中的第一个
+          let myTableIdChildNo3ChildNo1 = myTableIdChildNo3[0].childNodes
+          //再拿到结构为<tboby></tboby>的节点
+          let tbobyChildNo2 = myTableIdChildNo3ChildNo1[1]
+          //获取到结构为<tboby></tboby>的子节点
+          let kk = tbobyChildNo2.childNodes
+          kk.forEach((t, i) => {
+            if (i !== refTabInsideData.length) {
+              t.setAttribute('id','table_td_bg_' + refTabInsideData[i].id)
+            }
+          })
+        },1000)
       })
     },
     changeShop() {
@@ -398,6 +428,34 @@ export default {
           return false
         }
       })
+    },
+    recoverList() {
+      const data = Storage.getItem('rs485DeviceList')
+      if (data) {
+        let list = []
+        JSON.parse(data).forEach(row => {
+          const item = this.deviceList.find( t => row.id === t.id)
+          if (item) {
+            list.push(item)
+            this.$refs.refTable.toggleRowSelection(item)
+          }
+        })
+        this.multipleSelection = list
+        this.$message.success('已恢复')
+      } else {
+        this.$message.error('没有设备！')
+      }
+    },
+    saveList() {
+      if (this.multipleSelection.length === 0) {
+        this.$message.error('没有勾选的设备！')
+        return
+      }
+      const _this = this
+      setTimeout(()=>{
+        Storage.setItem('rs485DeviceList', JSON.stringify(_this.MixinClone(_this.multipleSelection)))
+      },700)
+      this.$message.success('已保存')
     }
   }
 }