2025.7.8

riku

2025-07-08 91513e171078ed6b0887f87b9fced33895d6d3fb

 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: ')
  }
  // 收到服务器发送的消息：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(() => {
  //   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>