<template>
|
<BaseCard title="业务状态中控">
|
<el-scrollbar ref="scrollbarRef" class="scrollbar">
|
<div ref="scrollContentRef">
|
<el-row justify="center" class="m-t-16">
|
<el-text v-if="streams.length == 0">暂无新消息</el-text>
|
</el-row>
|
<div v-for="item in streams" :key="item.index">
|
<el-text type="warning">[{{ item.time }}]: </el-text>
|
<el-text>用户</el-text>
|
<el-text type="warning">{{ item.userName }}</el-text>
|
<el-text>{{ item.event }}</el-text>
|
</div>
|
</div>
|
</el-scrollbar>
|
</BaseCard>
|
<!-- </div> -->
|
</template>
|
<script setup>
|
import { reactive, ref, onMounted, onUnmounted, inject } from 'vue'
|
import dayjs from 'dayjs'
|
|
import { unCalc } from '@/utils/css-util'
|
import { ws } from '@/api/index'
|
|
const excludeMapHeight = inject('excludeMapHeight')
|
const height = `calc(${unCalc(excludeMapHeight)} - 36px)`
|
|
const streams = reactive([])
|
const scrollContentRef = ref()
|
const scrollbarRef = ref()
|
|
const users = ['pcheck', 'zzq', 'xzq']
|
const events = [
|
'新增一个问题',
|
'新增一项现场整改',
|
'审核了一个问题',
|
'审核了一个整改',
|
'开始巡查',
|
'结束巡查'
|
]
|
const objs = [
|
'大宁国际学校(小学部)新建工程',
|
'新建472街坊公共绿地和地下空间开发项目',
|
'黄浦江延伸段WS3单元xH130E街坊030406070911地块',
|
'徐汇区龙华街道188N-F-04地块（桩基工程）',
|
'网易上海西岸研发中心项目',
|
'徐汇区黄浦江南延伸段WS3单元xh130D街坊03、04、06、08、09、11和12地块项目桩基工程',
|
'太保家园·上海静安国际康养社区项目装修工程',
|
'彭浦西系统雨调蓄池工程',
|
'徐汇区长桥街道395街坊xh311B-07B地块新建幼儿园',
|
'彭一住宅小区旧住房拆除重建工程',
|
'阿里巴巴上海徐汇项目二期'
|
]
|
|
function scrollToBottom() {
|
const h1 = scrollContentRef.value.clientHeight + 100
|
setTimeout(() => {
|
scrollbarRef.value.setScrollTop(h1)
|
}, 100)
|
}
|
|
// const inputVal = ref('')
|
// const handleSend = () => {
|
// if (socket) {
|
// socket.send(inputVal.value)
|
// }
|
// }
|
|
let socket
|
const handleLink = () => {
|
if (socket) {
|
socket.close()
|
}
|
const url = 'ws://' + ws + '/workstream'
|
// socket = new WebSocket(`ws://192.168.0.138:8080/workstream`)
|
socket = new WebSocket(url)
|
// 与服务器建立连接：发送消息到服务器
|
socket.onopen = () => {
|
console.log('connect: ')
|
}
|
// 收到服务器发送的消息：event处理服务器返回的数据
|
socket.onmessage = (event) => {
|
console.log('receive: ', event.data)
|
putWorkStream(event.data)
|
}
|
// 连接或通信过程中发生错误
|
socket.onerror = (event) => {
|
console.log('errror: ', event.error)
|
}
|
// 与服务器断开连接
|
socket.onclose = (event) => {
|
console.log('close: ', event.code)
|
}
|
}
|
|
/**
|
* 添加一条工作流信息
|
* @param {*} data
|
*/
|
function putWorkStream(data) {
|
const obj = JSON.parse(data)
|
streams.push(obj)
|
scrollToBottom()
|
}
|
|
onMounted(() => {
|
handleLink()
|
if (import.meta.env.DEV) {
|
// setInterval(() => {
|
// streams.push({
|
// time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
// userName: users[parseInt(Math.random() * users.length)],
|
// obj: objs[parseInt(Math.random() * objs.length)],
|
// event: events[parseInt(Math.random() * events.length)]
|
// })
|
// streams.push({
|
// time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
// userName: users[parseInt(Math.random() * users.length)],
|
// obj: objs[parseInt(Math.random() * objs.length)],
|
// event: events[parseInt(Math.random() * events.length)]
|
// })
|
// streams.push({
|
// time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
// userName: users[parseInt(Math.random() * users.length)],
|
// obj: objs[parseInt(Math.random() * objs.length)],
|
// event: events[parseInt(Math.random() * events.length)]
|
// })
|
// streams.push({
|
// time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
// userName: users[parseInt(Math.random() * users.length)],
|
// obj: objs[parseInt(Math.random() * objs.length)],
|
// event: events[parseInt(Math.random() * events.length)]
|
// })
|
// streams.push({
|
// time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
// userName: users[parseInt(Math.random() * users.length)],
|
// obj: objs[parseInt(Math.random() * objs.length)],
|
// event: events[parseInt(Math.random() * events.length)]
|
// })
|
// streams.push({
|
// time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
// userName: users[parseInt(Math.random() * users.length)],
|
// obj: objs[parseInt(Math.random() * objs.length)],
|
// event: events[parseInt(Math.random() * events.length)]
|
// })
|
// scrollToBottom()
|
// }, 60000)
|
}
|
})
|
onUnmounted(() => {
|
socket.close()
|
})
|
</script>
|
<style scoped>
|
.scrollbar {
|
height: 80px;
|
width: 600px;
|
}
|
</style>
|
