2025.6.9 功能编写中

riku

2025-06-09 38ff09bd2a638bc43a365efe0390cc3510d62e68

 src/views/inspection/WorkStream.vue

@@ -1,20 +1,14 @@
<template>
  <!-- <div class="border-r-small m-h-2 p-h-4"> -->
  <BaseCard>
    <!-- <div>
      <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">
  <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.userName }}</el-text>
          <!-- <el-text>在</el-text>
          <el-text type="success">{{ item.obj }}</el-text> -->
          <el-text>{{ item.event }}</el-text>
        </div>
      </div>
@@ -66,13 +60,12 @@
  }, 100)
}

const inputVal = ref('')

const handleSend = () => {
  if (socket) {
    socket.send(inputVal.value)
  }
}
// const inputVal = ref('')
// const handleSend = () => {
//   if (socket) {
//     socket.send(inputVal.value)
//   }
// }

let socket
const handleLink = () => {
@@ -112,18 +105,56 @@
}

onMounted(() => {
  // handleLink()
  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)]
    })
    scrollToBottom()
  }, 5000)
  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>