<template>
|
<BaseCard>
|
<template #content>
|
<div>
|
<el-input type="text" v-model="inputVal" />
|
<button @click="handleSend">send</button>
|
<button @click="handleLink">link</button>
|
</div>
|
<div>业务状态中控</div>
|
<el-scrollbar ref="scrollbarRef" :height="height">
|
<div ref="scrollContentRef">
|
<div v-for="(item, index) in streams" :key="index">
|
<el-text type="primary">[{{ item }}]: </el-text>
|
</div>
|
</div>
|
</el-scrollbar>
|
</template>
|
</BaseCard>
|
</template>
|
<script setup>
|
/**
|
* 动态溯源信息管理
|
* 通过websocket方式接收后端推送的异常信息并展示
|
*/
|
import { reactive, ref, onMounted, onUnmounted, inject } from 'vue';
|
import websocket from '@/api/websocket';
|
|
const height = `60vh`;
|
|
const scrollContentRef = ref();
|
const scrollbarRef = ref();
|
|
function scrollToBottom() {
|
const h1 = scrollContentRef.value.clientHeight + 100;
|
setTimeout(() => {
|
scrollbarRef.value.setScrollTop(h1);
|
}, 100);
|
}
|
|
const streams = reactive([]);
|
|
const inputVal = ref('');
|
const handleSend = () => {
|
websocket.send(inputVal.value);
|
};
|
|
/**
|
* 添加一条工作流信息
|
* @param {*} data
|
*/
|
const putWorkStream = (data) => {
|
const obj = JSON.parse(data);
|
streams.push(obj);
|
scrollToBottom();
|
};
|
|
onMounted(() => {
|
websocket.registerReceiveEvent(putWorkStream);
|
});
|
onUnmounted(() => {
|
websocket.removeReceiveEvent(putWorkStream);
|
});
|
</script>
|
