一、首先：需求就是：vue tab数据是查询接口 + websocket 里面的 （socket数据是实时更新）
先效果图：（状态和时间,是实时更新的）
1.左边是树结构
2.右边是tab'列表 ：
①：tab列表是2部分组成，
②：一部分是自己调查询的接口获取到的，另一部分是socket里面拿到的，并且是实时更新的。
③：注意有坑： tab数据时需要 ， 自己先调的查询的出来的 id 和 socket里面的 id 匹配，
如果值相等了，才把socket的数据 赋值给tab
详细树结构 和socket：
请查看我的 笔记个人总结里面的问题15 和问题16；
注意事项：
socket里面 返回message后需要做处理，
①：先截取你需要的那部分
②：在把你需要的部分转为json格式
③：时间格式需要转换为：需要的格式
④ 怎么把socket数据放到列表上：
// 如果之间拿查询列表里面的id 和 socke里面的 id进行判断是否相等，那么tab数据只有 查询的数据，打印的时候也有 time 和type就是不显示在tab上，原因是因为，socket里面的数据你塞给 tab的。
//所以需要 定义一个 变量数组 匹配前先清空一下数组。 在 再查询的数组里面 定义一个变量对象 把tab需要的值用新的变量 赋值拿过来 ，再进行匹配，在赋值。
//然后在 push
// 在把tab的数组 赋给新定义的数组
// tab 数组的值 是 2个地方拿来的 需要拼接在一起
// 定义一个新的数组去接收
// 循环套循环 - 定义新的对象存需要的值，- 在匹配id 相等了 就赋值
// 把赋值放进数组里面
// 把tab 数组 赋给定义的新数组
全部代码如下：
<template>
<!-- 设备状态 -->
<div>
<Row>
<Col span="6">
<Tree :data="data1" @on-select-change="select_change"></Tree>
</Col>
<Col span="18">
<div class="listfile">
<Row>
<Col span="24">已选设备</Col>
</Row>
<Table border ref="selection" :columns="historyColumns" :data="historyData"></Table>
<div style="margin: 10px;overflow: hidden">
<div style="float: right;">
<Page :total="dataCount" :page-size="pageSize" show-total :current="currentPage" @on-change="changepage"></Page>
</div>
</div>
</div>
</Col>
</Row>
</div>
</template>
<script>
import Cookies from 'js-cookie';
export default {
data () {
return {
webstock:null,
// 列表全部数据 Alldata = 之前接口的 historyData + websocket的数组 list_arry
Alldata:[],
// list_arry:[],
// list_arry:[{deviceid:"00000",ip:"192.168.0",type:"未开启",time:"2019-04-16 00:00:00"}],
// 定义全局变量
send_variable:'',
station_Id:'',
data1: [
{
title: '1号线',
expand: true,
children: [
{
title: '预留01站'
},
{
title: '预留02站'
},
{
title: '预留03站'
},
{
title: '预留04站'
},
{
title: '预留05站'
}
]
},
{
title: '2号线',
expand: true,
children: [
{
title: '西直门站'
},
{
title: '车公庄站'
},
{
title: '阜成门站'
},
{
title: '复兴门站'
}
]
},
],
ajaxHistoryData:[],
dataCount:1,// 初始化信息总条数
currentPage:1, //当前页
pageSize:10,// 每页显示多少条
below: 0, //下一页或者上一页的第一项索引值
historyColumns: [
{title: '设备名称',key: 'deviceName',width: 150,align: 'center'},
{title: '设备IP',key: 'ip',width: 150,align: 'center'},
// {title: '设备id',key: 'deviceId',width: 150,align: 'center'},
{title: '设备状态',key: 'type',width: 120,align: 'center'},
{title: '时间',key: 'time',align: 'center'},
],
historyData:[],
testData:[{ "deviceId":"00000","ip":"192.168.001","type":"未开启","time":"2019-04-11 00:00:00"}],
}
},
methods: {
// 拿服务节点去调接口
get_serverNodeId(){
this.$axios({
method: 'get',
url: this.baseURL + '/device/DeviceInfo/get_LineAndStation',
params: {
// 0101ZZ00100000001 tcc 既有线路又有车站
// 01010100100000001 occ 只有车站
// 01010103100000000 sc 空
manageNodeid: this.$store.state.user.serverNodeId,
}
}).then(res => {
console.log("服务调接口:", res.data)
this.data1 = [];
if (!res.data) return false;
let tree = [];
res.data.map(v=>{
// console.log("vvvvvvv", v.stationInfo);
let _tempTree = {};
_tempTree.title = v.line.lineName;
// _tempTree.expand = true; // 线路里面的车站会展开
_tempTree.children = [];
// console.log("vvvvvvv111111111111", v.stationInfo);
if (!v.stationInfo) return false; //如果v.stationInfo为 null 直接return
v.stationInfo.map(station=>{
let _tempStation = {'title':station.stationSname,'tccStationId':station.tccStationId,'linId':v.line.lineId};
// let _tempStation = {'title':station.stationSname, 'linId':v.line.lineName};
_tempTree.children.push(_tempStation)
})
tree.push(_tempTree)
})
this.data1 = tree;
}).catch();
},
// 获取历史记录信息
handleListApproveHistory(){
// 保存取到的所有数据
this.ajaxHistoryData = this.testData;
this.dataCount = this.testData.length;
// 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
if(this.testData.length < this.pageSize){
this.historyData = this.ajaxHistoryData;
}else{
this.historyData = this.ajaxHistoryData.slice(0,this.pageSize);
}
},
//index当前页码
changepage(index){
this.currentPage = index;
let sessionId = Cookies.get('status');
},
select_change(data) {
console.log("radio单选：",data);
// console.log("radio单选：",data[0].tccStationId);
// console.log("radio单选：",data[0].linId);
let _lineId = data[0].linId;
var station_Id = data[0].tccStationId;
this.station_Id = data[0].tccStationId.substring(2,4) // 截掉前2位，保留后2位
// console.log("打印station_Id:",this.station_Id);
this.$axios({
method: 'post',
data: this.$qs.stringify({
manageNodeid:'01010100100000001',
lineId: _lineId,
stationId: this.station_Id,
}),
headers: { 'Content-Type': 'application/x-www-form-urlencoded'},
url: this.baseURL + '/device/DeviceInfo/list_Records',
})
.then((res)=> {
if(res.status == "200"){
console.log("列表数据",res.data.list)
this.historyData = res.data.list; //把结果拿到的数据赋给table
this.dataCount = res.data.total; //所有的条数
this.initWebSocket(); // 开启WebSocket长连接
}
})
.catch((error) =>{})
},
/**
* webstocket 开启长连接
*/
initWebSocket() {
var this1 = this;
//页面刚进入时开启长连接
const webstock = new WebSocket("ws://192.168.25.51:9999");
/**
* webstock连接成功
*/
var this2 = this;
webstock.onopen = function (onopen) {
console.log("websocket open 连接成功", onopen);
// setInterval(function(){
// 定义全局变量
this2.send_variable = '0x01000101' + "/" + this2.station_Id,
console.log("请求车站id:", this2.station_Id);
console.log("请求id:", this2.send_variable);
webstock.send(JSON.stringify(this2.send_variable));
// },1000)
}
/**
* webstock出错
*/
webstock.onerror = function (event) {
webstock.close(event);
console.log("websocket error");
}
/**
* webstock接收消息
*/
webstock.onmessage = function (message) {
console.log( '返回的message', message);
// console.log( '返回2', message.data);
let one; // 第一个 ","后内容
let two; // 第二个 ","后内容
let first = message.data.indexOf(",") + 1; // 从第一个 "," 算起（ +1表示不包括该 ","）
let knew_list = message.data.indexOf(" ", first); // 第一个 "," 后的第一个空格
let _comma = message.data.indexOf(",", first); // 第一个","后的第一个","（即第二个 ","）
if (_comma == -1) {
one = message.data.substring(0, knew_list);
two = message.data.substring(knew_list).substring(1, message.data.length);
} else {
one = message.data.substring(0, _comma);
two = message.data.substring(_comma).substring(1, message.data.length);
}
// console.log("one:",one);
// console.log("two",two);
let list_arry = JSON.parse(two);
// console.log( 'list_arry', JSON.parse(two));
console.log( 'list_arry', list_arry);
let arr = list_arry;
console.log("arr",arr);
// 如果之间拿查询列表里面的id 和 socke里面的 id进行判断是否相等，那么tab数据只有 查询的数据，打印的时候也有 time 和type就是不显示在tab上，原因是因为，socket里面的数据你塞给 tab的。
//所以需要 定义一个 变量数组 匹配前先清空一下数组。 在 再查询的数组里面 定义一个变量对象 把tab需要的值用新的变量 赋值拿过来 ，再进行匹配，在赋值。
//然后在 push
// 在把tab的数组 赋给新定义的数组
// tab 数组的值 是 2个地方拿来的 需要拼接在一起
// 定义一个新的数组去接收
// 循环套循环 - 定义新的对象存需要的值，- 在匹配id 相等了 就赋值
// 把赋值放进数组里面
// 把tab 数组 赋给定义的新数组
let new_arr = [];
this2.historyData.map(v=>{
console.log("vvvvv",v);
let new_list = {}
new_list.deviceId = v.deviceId;
new_list.ip = v.ip;
new_list.deviceName = v.deviceName;
arr.map(item=>{
let new_time = item.time;
new_time = item.time.slice(0, 4) + "-" + item.time.slice(4, 6) + "-" + item.time.slice(6, 8) + " " + item.time.slice(8, 10) + ":" + item.time.slice(10, 12) + ":" + item.time.slice(12, 14);
console.log("item", item);
console.log( '时间格式', new_time);
if(v.deviceId === item.deviceid){
new_list.type = item.type;
new_list.time = new_time;
}
})
new_arr.push(new_list)
})
this2.historyData = new_arr
}
},
/**
* webstock关闭
*/
websocketclose(e) {
console.log("WebSocket连接关闭");
setTimeout(() => {
this.initWebSocket();
console.log("socket正在重连...");
}, 5000);
},
},
created(){
// console.log("线路和车站：",this.$store.state.parameter.lineStation);
this.handleListApproveHistory();
console.log("服务节点", this.$store.state.user.serverNodeId);
this.get_serverNodeId(); //拿服务节点去调接口
},
mounted(){
// this.initWebSocket(); // 开启WebSocket长连接
},
destroyed() {
//页面销毁时关闭长连接
this.websocketclose();
},
}
</script>
<style type="text/css">
</style>
二：新需求
要求初始化进来页面时， 树的 第一个节点 展开， 第一个节点下的第一个 值默认选中， 并且会去请求后台，加载右边的列表数据。
先上效果图：
在树循环 后 操作如下：
默认的操作：
//默认展开第一个节点，默认选中第一个节点下的第一个值
if(tree.length>0){
tree[0].expand = true;
if(tree[0].children.length>0){
tree[0].children[0].selected = true;
console.log("tree[0].children[0]",tree[0].children[0]);
}
}用默认去加载列表：
//默认展开第一个节点，默认选中第一个节点下的第一个值
if(tree.length>0){
tree[0].expand = true;
if(tree[0].children.length>0){
tree[0].children[0].selected = true;
console.log("tree[0].children[0]",tree[0].children[0]);
let _lineId = tree[0].children[0].linId;
let station1 = tree[0].children[0].tccStationId;
this.station_Id = station1.substring(2,4) // 截掉前2位，保留后2位
this.$axios({
method: 'post',
data: this.$qs.stringify({
manageNodeid: this.$store.state.user.NodeId,
lineId: _lineId,
stationId: this.station_Id,
}),
headers: { 'Content-Type': 'application/x-www-form-urlencoded'},
url: this.baseURL + '/device/DeviceInfo/list_Records',
})
.then((res)=> {
console.log("列表数据11111",res)
if(res.status == "200"){
console.log("列表数据",res.data.list)
this.historyData = res.data.list; //把结果拿到的数据赋给table
this.dataCount = res.data.total; //所有的条数
this.initWebSocket(); // 开启WebSocket长连接
}
})
.catch((error) =>{})
}
}2个bug：
如果后台给你返回的数据是空时你怎么处理；
如果后台给你返回的数据是空操作：
在socket 接收消息的时候 判断一下：
let arr = list_arry;
if（ arr.length >0 ) {
这里写：let arr = list_arry; 后面的一大堆东西
}
-
后台第一次给你返回是有数据的，第2次是空.....都是空[] 怎么处理？ 办法：
let arr = list_arry;
if（ arr.length >0 ) {
}
-
后台第一次给你返回是有数据的情况，第2次是空， 第3次是有，第4次有.....
办法：
if(arr.length >0 ) {
这里写：let arr = list_arry; 后面的一大堆东西
}
}else{
new_list.type = v.type;
new_list.time = v.time;
}