You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
242 lines
7.0 KiB
242 lines
7.0 KiB
<template>
|
|
<div class="warehouse-right container-wrap">
|
|
<span class="right-top-line" />
|
|
<span class="left-bottom-line" />
|
|
<h3 class=" table-title">
|
|
<p class="title-arrow">
|
|
<svg-icon icon-class="alerm" class-name="warehouse-svg" />报警记录
|
|
</p>
|
|
</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>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import data1 from './data1.json'
|
|
export default {
|
|
name: 'WarehouseWarning',
|
|
props: {
|
|
width: {
|
|
type: String,
|
|
default: '100%'
|
|
},
|
|
height: {
|
|
type: String,
|
|
default: '100%'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
tableData: [],
|
|
timeout: 1000
|
|
}
|
|
},
|
|
created() {
|
|
this.initWebSocket()
|
|
},
|
|
mounted() {
|
|
this.getData()
|
|
console.log(11333)
|
|
this.$nextTick(() => {
|
|
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')
|
|
// })
|
|
// })
|
|
},
|
|
destroyed() {
|
|
clearInterval(this.timer)
|
|
},
|
|
methods: {
|
|
getData() {
|
|
this.tableData = data1.rows
|
|
},
|
|
// 表格隔行变色
|
|
rowBgColor({ row, rowIndex }) {
|
|
if (rowIndex % 2 === 1) {
|
|
return 'light-blue'
|
|
} else {
|
|
return ''
|
|
}
|
|
},
|
|
// table滚动
|
|
tableRefScroll() {
|
|
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.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
|
|
bodyWrapper.scrollTop = 0
|
|
} else {
|
|
if (this.flag === 1) {
|
|
this.currentPage++
|
|
this.handleSearch() // 函数中需要清楚定时器
|
|
}
|
|
}
|
|
}
|
|
}, 1000 * 3 * this.scollNum)
|
|
},
|
|
initWebSocket() {
|
|
const wsUri = process.env.VUE_APP_WS_API + '/webSocket'
|
|
this.websock = new WebSocket(wsUri)
|
|
this.websock.onerror = this.webSocketOnError
|
|
this.websock.onmessage = this.webSocketOnMessage
|
|
},
|
|
webSocketOnError(e) {
|
|
this.$notify({
|
|
title: 'WebSocket连接发生错误',
|
|
type: 'error',
|
|
duration: 0
|
|
})
|
|
},
|
|
webSocketOnMessage(e) {
|
|
const data = JSON.parse(e.data)
|
|
console.log(data)
|
|
if (data.msgType === 'INFO') {
|
|
this.$notify({
|
|
title: '',
|
|
message: data.msg,
|
|
type: 'success',
|
|
dangerouslyUseHTMLString: true,
|
|
duration: 5500
|
|
})
|
|
} else if (data.msgType === 'ERROR') {
|
|
this.$notify({
|
|
title: '',
|
|
message: data.msg,
|
|
dangerouslyUseHTMLString: true,
|
|
type: 'error',
|
|
duration: 0
|
|
})
|
|
}
|
|
},
|
|
webSocketSend(agentData) {
|
|
this.websock.send(agentData)
|
|
}
|
|
// initWebSocket() {
|
|
// // if (WebSocket in window) {
|
|
// // 初始化weosocket
|
|
// const wsUri = process.env.VUE_APP_WS_API + '/webSocket'
|
|
// this.websocket = null
|
|
// this.websocket = new WebSocket(wsUri)
|
|
// this.websocket.onopen = this.websocketonopen
|
|
// this.websocket.onerror = this.websocketonerror
|
|
// this.websocket.onmessage = this.websocketonmessage
|
|
// this.websocket.onclose = this.websocketclose
|
|
// // } else {
|
|
// // // 浏览器不支持 WebSocket
|
|
// // console.log('您的浏览器不支持 WebSocket!')
|
|
// // }
|
|
// },
|
|
// websocketonopen() {
|
|
// this.start()
|
|
// },
|
|
// start() {
|
|
// // 开启心跳
|
|
// const that = this
|
|
// that.timeoutObj && clearTimeout(that.timeoutObj)
|
|
// that.timeoutObj = setTimeout(function() {
|
|
// // 这里发送一个心跳，后端收到后，返回一个心跳消息，
|
|
// if (that.websocket && that.websocket.readyState === 1) {
|
|
// // 如果连接正常
|
|
// console.log('WebSocket连接成功')
|
|
// that.websocket.send('----timingHeart---')
|
|
// } else { // 否则重连
|
|
// that.reconnect()
|
|
// }
|
|
// }, that.timeout)
|
|
// },
|
|
// reconnect() { // 重新连接
|
|
// console.log('重新连接')
|
|
// const that = this
|
|
// if (that.websocket && that.websocket.readyState === 1) {
|
|
// clearInterval(that.timeoutnum)
|
|
// that.timeoutnum = null
|
|
// that.timeNum = 0
|
|
// return
|
|
// }
|
|
// if (!that.timeoutnum) {
|
|
// that.timeoutnum = setInterval(function() {
|
|
// if (that.websocket && that.websocket.readyState === 1) {
|
|
// clearInterval(that.timeoutnum)
|
|
// that.timeoutnum = null
|
|
// that.timeNum = 0
|
|
// return
|
|
// }
|
|
// // 新连接
|
|
// that.initWebSocket()
|
|
// that.timeNum++
|
|
// if (that.timeNum >= 3) {
|
|
// clearInterval(that.timeoutnum)
|
|
// that.timeoutnum = null
|
|
// that.timeNum = 0
|
|
// }
|
|
// }, 1000)
|
|
// }
|
|
// },
|
|
// websocketonerror(e) {
|
|
// // 错误
|
|
// // this.initWebSocket()
|
|
// console.log('WebSocket连接发生错误')
|
|
// },
|
|
// websocketonmessage(e) {
|
|
// // 数据接收
|
|
// var data = JSON.parse(e.data)
|
|
// // this.$store.commit('SET_ws', data)
|
|
// console.log('接收数据', data)
|
|
// // 操作处理...
|
|
// },
|
|
// websocketclose(e) {
|
|
// // 关闭
|
|
// this.websocket && this.websocket.close && this.websocket.close()
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@import "~@/assets/styles/lend-manage.scss";
|
|
.warehouse-left {
|
|
position: relative;
|
|
h2 {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
transform: translateX(-50%);
|
|
color: #fff;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
</style>
|