From a030cd7ebede3762fda4dcb6511f43712a417a58 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期五, 20 六月 2025 13:25:45 +0800
Subject: [PATCH] 2025.6.20
---
src/views/inspection/WorkStream.vue | 131 +++++++++++++++++++++++++++++++++++++------
1 files changed, 111 insertions(+), 20 deletions(-)
diff --git a/src/views/inspection/WorkStream.vue b/src/views/inspection/WorkStream.vue
index 0fbe9be..50aa1dd 100644
--- a/src/views/inspection/WorkStream.vue
+++ b/src/views/inspection/WorkStream.vue
@@ -1,22 +1,30 @@
<template>
- <div class="border-r-small m-h-2 p-h-4">
- <el-scrollbar ref="scrollbarRef" height="calc(var(--fy-body-height) / 3 * 1 - 30px)">
+ <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="primary">[{{ item.time }}]: </el-text>
+ <el-text type="warning">[{{ item.time }}]: </el-text>
<el-text>鐢ㄦ埛</el-text>
- <el-text type="warning">{{ item.user }}</el-text>
- <el-text>鍦�</el-text>
- <el-text type="success">{{ item.obj }}</el-text>
+ <el-text type="warning">{{ item.userName }}</el-text>
<el-text>{{ item.event }}</el-text>
</div>
</div>
</el-scrollbar>
- </div>
+ </BaseCard>
+ <!-- </div> -->
</template>
<script setup>
-import { reactive, ref, onMounted } from 'vue'
+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()
@@ -52,18 +60,101 @@
}, 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: ')
+ }
+ // 鏀跺埌鏈嶅姟鍣ㄥ彂閫佺殑娑堟伅锛歟vent澶勭悊鏈嶅姟鍣ㄨ繑鍥炵殑鏁版嵁
+ 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(() => {
- // var index = 0
- setInterval(() => {
- streams.push({
- // index: index,
- time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
- user: users[parseInt(Math.random() * users.length)],
- obj: objs[parseInt(Math.random() * objs.length)],
- event: events[parseInt(Math.random() * events.length)]
- })
- scrollToBottom()
- // index++
- }, 10000)
+ 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>
--
Gitblit v1.9.3