|
|
|
@ -9,14 +9,13 @@ |
|
|
|
</h3> |
|
|
|
<!--表格渲染--> |
|
|
|
<el-table ref="table" style="min-width: 100%;" :width="width" :height="height" :data="tableData" class="warehose-el-table" :row-class-name="rowBgColor"> |
|
|
|
<el-table-column prop="time" label="时间" align="center" min-width="60" /> |
|
|
|
<el-table-column prop="warehouse" label="库房" align="center" min-width="60" /> |
|
|
|
<el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" /> |
|
|
|
<el-table-column prop="alarm_time" label="时间" align="center" min-width="70" /> |
|
|
|
<el-table-column prop="area_name" label="库房" align="center" min-width="35" /> |
|
|
|
<el-table-column prop="event_name" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" /> |
|
|
|
</el-table> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import data1 from './data1.json' |
|
|
|
export default { |
|
|
|
name: 'WarehouseWarning', |
|
|
|
props: { |
|
|
|
@ -31,57 +30,41 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
tableData: [], |
|
|
|
socket: null, |
|
|
|
lockReconnect: false, // 避免重复连接 |
|
|
|
heartCheck: { |
|
|
|
timeout: 3000, |
|
|
|
timeoutobj: null, |
|
|
|
serverTimeoutObj: null, |
|
|
|
start: function() { |
|
|
|
const that = this |
|
|
|
clearTimeout(this.timeoutObj) |
|
|
|
clearTimeout(this.serverTimeoutObj) |
|
|
|
this.timeObj = setTimeout(function() { |
|
|
|
// 这里发送一个心跳，后端收到后，返回一个心跳，这里用的ping-pong |
|
|
|
this.socket.send('ping') |
|
|
|
that.serverTimeoutObj = setTimeout(function() { |
|
|
|
this.socket.close() |
|
|
|
}, that.timeout) |
|
|
|
}, this.timeout) |
|
|
|
} |
|
|
|
} |
|
|
|
tableData: [], // 正在展示的警情数据 |
|
|
|
// receivedData: [], // 接收到的最新警情数据 |
|
|
|
// displayNum: 0, |
|
|
|
// lockReconnect: false, // 避免重复连接 |
|
|
|
// heartCheck: { |
|
|
|
// timeout: 3000, |
|
|
|
// timeoutobj: null, |
|
|
|
// // serverTimeoutObj: null, |
|
|
|
// start: () => { |
|
|
|
// // const that = this |
|
|
|
// clearTimeout(this.timeoutObj) |
|
|
|
// // clearTimeout(this.serverTimeoutObj) |
|
|
|
// this.timeoutobj = setTimeout(() => { |
|
|
|
// // 这里发送一个心跳，后端收到后，返回一个心跳，这里用的ping-pong |
|
|
|
// this.socket.send('ping') |
|
|
|
// // that.serverTimeoutObj = setTimeout(() => { |
|
|
|
// // this.socket.close() |
|
|
|
// // }, that.timeout) |
|
|
|
// }, this.timeout) |
|
|
|
// } |
|
|
|
// } |
|
|
|
socket: null |
|
|
|
} |
|
|
|
}, |
|
|
|
// created() { |
|
|
|
// this.openSocket() |
|
|
|
// }, |
|
|
|
mounted() { |
|
|
|
this.openSocket() |
|
|
|
this.getData() |
|
|
|
console.log(11333) |
|
|
|
this.$nextTick(() => { |
|
|
|
watch: { |
|
|
|
// 如果 `tableData` 发生改变，这个函数就会运行 |
|
|
|
tableData: function(newData, oldData) { |
|
|
|
this.tableRefScroll() |
|
|
|
}) |
|
|
|
// this.$nextTick(() => { |
|
|
|
// this.scroll = new Bscroll('.warehose-el-table .el-table__body-wrapper', { |
|
|
|
// scrollY: true |
|
|
|
// ,startY: 10 |
|
|
|
// }) |
|
|
|
// this.scroll.on('scrollEnd', () => { |
|
|
|
// // let pageIndex = this.scroll.getCurrentPage().pageX; |
|
|
|
// // this.currentPageIndex = pageIndex; |
|
|
|
// // if(vm.autoPlay) { |
|
|
|
// // vm.play(); |
|
|
|
// // } |
|
|
|
// console.log('scrollEnd') |
|
|
|
// }) |
|
|
|
// }) |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.openSocket() |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
getData() { |
|
|
|
this.tableData = data1.rows |
|
|
|
}, |
|
|
|
// 表格隔行变色 |
|
|
|
rowBgColor({ row, rowIndex }) { |
|
|
|
if (rowIndex % 2 === 1) { |
|
|
|
@ -95,35 +78,45 @@ export default { |
|
|
|
clearInterval(this.timer) // 清除定时器 |
|
|
|
const table = this.$refs.table // 获取DOM元素 |
|
|
|
const wrapperHeight = table.$el.offsetHeight - 30 |
|
|
|
this.scollNum = Math.floor(wrapperHeight / 40) |
|
|
|
const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素 |
|
|
|
this.addTableRefScroll(bodyWrapper) |
|
|
|
// 鼠标移入 |
|
|
|
bodyWrapper.onmouseover = () => { |
|
|
|
clearInterval(this.timer) |
|
|
|
} |
|
|
|
// 鼠标移出 |
|
|
|
bodyWrapper.onmouseout = () => { |
|
|
|
// 组件一页能展示的数据条数 |
|
|
|
this.displayNum = Math.floor(wrapperHeight / 40) |
|
|
|
if (this.tableData.length > this.displayNum) { |
|
|
|
const bodyWrapper = table.bodyWrapper // 获取表格中承载数据的div元素 |
|
|
|
this.addTableRefScroll(bodyWrapper) |
|
|
|
// 鼠标移入 |
|
|
|
bodyWrapper.onmouseover = () => { |
|
|
|
clearInterval(this.timer) |
|
|
|
} |
|
|
|
// 鼠标移出 |
|
|
|
bodyWrapper.onmouseout = () => { |
|
|
|
this.addTableRefScroll(bodyWrapper) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
addTableRefScroll(bodyWrapper) { |
|
|
|
let scrollTop = bodyWrapper.scrollTop |
|
|
|
this.timer = setInterval(() => { |
|
|
|
scrollTop = bodyWrapper.scrollTop |
|
|
|
bodyWrapper.scrollTop += this.scollNum * 40 |
|
|
|
if (scrollTop === bodyWrapper.scrollTop) { |
|
|
|
if (this.isScroll) { |
|
|
|
scrollTop = 0 |
|
|
|
// let scrollTop = bodyWrapper.scrollTop |
|
|
|
if (this.displayNum && this.displayNum > 0) { |
|
|
|
this.timer = setInterval(() => { |
|
|
|
// scrollTop = bodyWrapper.scrollTop |
|
|
|
if (Math.round(bodyWrapper.scrollTop / 40) >= this.tableData.length - this.displayNum) { |
|
|
|
bodyWrapper.scrollTop = 0 |
|
|
|
} else { |
|
|
|
if (this.flag === 1) { |
|
|
|
this.currentPage++ |
|
|
|
this.handleSearch() // 函数中需要清楚定时器 |
|
|
|
} |
|
|
|
console.log(3333, this.displayNum) |
|
|
|
bodyWrapper.scrollTop += this.displayNum * 40 |
|
|
|
} |
|
|
|
} |
|
|
|
}, 1000 * 3 * this.scollNum) |
|
|
|
// if (scrollTop === bodyWrapper.scrollTop) { |
|
|
|
// if (this.isScroll) { |
|
|
|
// scrollTop = 0 |
|
|
|
// bodyWrapper.scrollTop = 0 |
|
|
|
// } else { |
|
|
|
// if (this.flag === 1) { |
|
|
|
// this.currentPage++ |
|
|
|
// this.handleSearch() // 函数中需要清楚定时器 |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
}, 1000 * 3 * this.displayNum) |
|
|
|
} |
|
|
|
}, |
|
|
|
openSocket() { |
|
|
|
if (!('WebSocket' in window)) { |
|
|
|
@ -140,13 +133,14 @@ export default { |
|
|
|
this.socket.onopen = () => { |
|
|
|
console.log('websocket已经打开') |
|
|
|
// 心跳检测重置 |
|
|
|
this.heartCheck.start() |
|
|
|
// this.heartCheck.start() |
|
|
|
} |
|
|
|
// 获得消息 |
|
|
|
this.socket.onmessage = (msg) => { |
|
|
|
console.log(msg) |
|
|
|
this.tableData.splice(0, this.tableData.length, ...JSON.parse(msg.data.slice(6, msg.data.length - 1)).Data) |
|
|
|
// 对返回数据进行处理 |
|
|
|
this.heartCheck.start() |
|
|
|
// this.heartCheck.start() |
|
|
|
} |
|
|
|
// 关闭事件 |
|
|
|
this.socket.onclose = function() { |
|
|
|
|
