vue2-client 1.16.32 → 1.16.34

package/src/base-client/components/common/XWebSocketProgress/index.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="websocket-progress">
+    <a-progress
+      :percent="progressValue"
+      status="active"
+      style="padding-right: 20px;" />
+
+    <!-- 连接状态指示 -->
+    <div class="connection-status">
+      <a-tooltip :title="connectionStatusText">
+        <a-badge
+          :status="connectionBadgeStatus"
+          :text="connectionStatusText"
+        />
+      </a-tooltip>
+    </div>
+  </div>
+</template>
+
+<script>
+import { useWebSocket } from '@vue2-client/utils/websocket/websocket'
+
+export default {
+  name: 'XWebSocketProgress',
+  components: {
+  },
+  props: {
+    // WebSocket 唯一标识
+    websocketId: {
+      type: String,
+      required: true,
+    },
+    // 初始进度值
+    initialValue: {
+      type: Number,
+      default: 0
+    },
+    // 自动重连
+    autoReconnect: {
+      type: Boolean,
+      default: true
+    },
+    // 重连间隔（毫秒）
+    reconnectInterval: {
+      type: Number,
+      default: 3000
+    },
+    // 最大重连次数
+    maxReconnectAttempts: {
+      type: Number,
+      default: 1
+    },
+  },
+  data () {
+    return {
+      progressValue: this.initialValue,
+      connectionState: {
+        isConnected: false,
+        reconnectAttempts: 0
+      },
+      websocketUrl: '',
+    }
+  },
+  computed: {
+    // 连接状态文本
+    connectionStatusText () {
+      if (this.connectionState.isConnected) {
+        return '已连接'
+      } else if (this.connectionState.reconnectAttempts > 0) {
+        return `重连中 (${this.connectionState.reconnectAttempts})`
+      } else {
+        return '未连接'
+      }
+    },
+
+    // 连接状态徽章状态
+    connectionBadgeStatus () {
+      if (this.connectionState.isConnected) {
+        return 'success'
+      } else if (this.connectionState.reconnectAttempts > 0) {
+        return 'processing'
+      } else {
+        return 'default'
+      }
+    }
+  },
+  mounted () {
+    this.initWebSocket()
+  },
+  beforeDestroy () {
+    this.cleanup()
+  },
+  watch: {
+    // 初始值变更时重置当前进度显示
+    initialValue (val) {
+      const num = parseFloat(val)
+      this.progressValue = isNaN(num) ? 0 : Math.max(0, Math.min(100, num))
+    },
+    // 标识变更时，断开旧连接并按新标识重连
+    websocketId (newId, oldId) {
+      if (newId === oldId) return
+      this.cleanup()
+      // 重置进度为新的初始值，确保界面先渲染初始值
+      const num = parseFloat(this.initialValue)
+      this.progressValue = isNaN(num) ? 0 : Math.max(0, Math.min(100, num))
+      // 重新建立连接
+      this.$nextTick(() => {
+        this.initWebSocket()
+      })
+    }
+  },
+  methods: {
+    /**
+     * 初始化 WebSocket
+     */
+    initWebSocket () {
+      if (!this.websocketId) {
+        return
+      }
+
+      this.websocketUrl = `ws:${window.location.host}/socket/af-system/sendMessage?userId=${this.websocketId}`
+
+      const wsOptions = {
+        autoReconnect: this.autoReconnect,
+        reconnectInterval: this.reconnectInterval,
+        maxReconnectAttempts: this.maxReconnectAttempts
+      }
+
+      // 使用 WebSocket 工具
+      const wsManager = useWebSocket(wsOptions)
+
+      // 保存方法引用
+      this.wsConnect = wsManager.connect
+      this.wsDisconnect = wsManager.disconnect
+      this.wsOn = wsManager.on
+      // 绑定事件监听器
+      this.setupEventListeners()
+
+      // 开始连接
+      this.wsConnect(this.websocketUrl, wsOptions)
+    },
+    /**
+     * 手动重置为初始值（供父组件可选调用）
+     */
+    resetToInitial () {
+      const num = parseFloat(this.initialValue)
+      this.progressValue = isNaN(num) ? 0 : Math.max(0, Math.min(100, num))
+    },
+
+    /**
+     * 设置事件监听器
+     */
+    setupEventListeners () {
+      // 连接成功
+      this.wsOn('connected', (data) => {
+        this.connectionState.isConnected = true
+        this.connectionState.reconnectAttempts = 0
+        this.$emit('websocket-connected', data)
+      })
+
+      // 连接中
+      this.wsOn('connecting', (data) => {
+        this.$emit('websocket-connecting', data)
+      })
+
+      // 消息接收
+      this.wsOn('message', (data) => {
+        this.handleWebSocketMessage(data)
+        this.$emit('websocket-message', data)
+      })
+
+      // 连接关闭
+      this.wsOn('closed', (data) => {
+        this.connectionState.isConnected = false
+        this.$emit('websocket-closed', data)
+      })
+
+      // 连接错误
+      this.wsOn('error', (data) => {
+        this.connectionState.isConnected = false
+        this.$emit('websocket-error', data)
+      })
+
+      // 重连中
+      this.wsOn('reconnecting', (data) => {
+        this.connectionState.reconnectAttempts = data.attempts
+        this.$emit('websocket-reconnecting', data)
+      })
+
+      // 重连失败
+      this.wsOn('reconnect-failed', (data) => {
+        this.connectionState.reconnectAttempts = data.attempts
+        this.$emit('websocket-reconnect-failed', data)
+      })
+
+      // 断开连接
+      this.wsOn('disconnected', (data) => {
+        this.connectionState.isConnected = false
+        this.connectionState.reconnectAttempts = 0
+        this.$emit('websocket-disconnected', data)
+      })
+    },
+
+    /**
+     * 处理 WebSocket 消息
+     * @param {Object} data 消息数据
+     */
+    handleWebSocketMessage (data) {
+      const messageData = data.data
+
+      // 更新进度值
+      this.updateProgress(parseFloat(messageData))
+    },
+
+    /**
+     * 更新进度值
+     * @param {number} value 进度值
+     */
+    updateProgress (value) {
+      const numValue = parseFloat(value)
+      if (!isNaN(numValue)) {
+        this.progressValue = Math.max(0, Math.min(100, numValue))
+        this.$emit('progress-updated', {
+          value: this.progressValue,
+          originalValue: value
+        })
+      }
+    },
+
+    /**
+     * 清理资源
+     */
+    cleanup () {
+      if (this.wsDisconnect) {
+        this.wsDisconnect()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.websocket-progress {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  .connection-status {
+    flex-shrink: 0;
+  }
+}
+</style>