From 551afe9c3fc013cbe0fcf45c4388754607e50b43 Mon Sep 17 00:00:00 2001
From: ping <1017253325@qq.com>
Date: Fri, 26 Sep 2025 10:31:54 +0800
Subject: [PATCH] update

---
 f/web-kboss/src/router/index.js               |  10 +-
 .../envDeployment/index.vue                   | 414 ++++++++++++++++++
 2 files changed, 423 insertions(+), 1 deletion(-)
 create mode 100644 f/web-kboss/src/views/operationAndMaintenance/envDeployment/index.vue

diff --git a/f/web-kboss/src/router/index.js b/f/web-kboss/src/router/index.js
index 98a685a..321f2ae 100644
--- a/f/web-kboss/src/router/index.js
+++ b/f/web-kboss/src/router/index.js
@@ -1624,7 +1624,15 @@ export const asyncRoutes = [
       meta: {
         title: "产品供应", fullPath: "/operationAndMaintenance/productSupply", noCache: true
       },
-    },],
+    },{
+      path: "envDeployment",
+      component: () => import("@/views/operationAndMaintenance/envDeployment"),
+      name: "envDeployment",
+      meta: {
+        title: "环境部署", fullPath: "/operationAndMaintenance/envDeployment", noCache: true
+      },
+    },
+  ],
   },
 
   {
diff --git a/f/web-kboss/src/views/operationAndMaintenance/envDeployment/index.vue b/f/web-kboss/src/views/operationAndMaintenance/envDeployment/index.vue
new file mode 100644
index 0000000..bd89352
--- /dev/null
+++ b/f/web-kboss/src/views/operationAndMaintenance/envDeployment/index.vue
@@ -0,0 +1,414 @@
+<template>
+  <div class="deploy-container">
+    <h2>部署管理</h2>
+    
+    <!-- WebSocket连接配置 -->
+    <div class="connection-config">
+      <h3>WebSocket连接配置</h3>
+      <div class="input-group">
+        <label>服务器地址:</label>
+        <input 
+          v-model="socketUrl" 
+          type="text" 
+          placeholder="请输入WebSocket服务器地址，如: ws://localhost:56789"
+          class="url-input"
+        />
+      </div>
+      <div class="button-group">
+        <button 
+          @click="connectSocket" 
+          :disabled="isConnecting || isConnected"
+          class="connect-btn"
+        >
+          {{ isConnecting ? '连接中...' : (isConnected ? '已连接' : '连接') }}
+        </button>
+        <button 
+          @click="disconnectSocket" 
+          :disabled="!isConnected"
+          class="disconnect-btn"
+        >
+          断开连接
+        </button>
+      </div>
+    </div>
+
+    <!-- 部署控制 -->
+    <div class="deploy-control" v-if="isConnected">
+      <h3>部署控制</h3>
+      <div class="status-display">
+        <div class="status-item" :class="connectionStatusClass">
+          <span class="status-label">连接状态:</span>
+          <span class="status-value">{{ connectionStatus }}</span>
+        </div>
+        <div class="status-item" :class="deployStatusClass" v-if="deployStatus">
+          <span class="status-label">部署状态:</span>
+          <span class="status-value">{{ deployStatus }}</span>
+        </div>
+      </div>
+      
+      <div class="deploy-actions">
+        <button 
+          @click="startDeployment" 
+          :disabled="isDeploying || deployFailed"
+          class="deploy-btn"
+        >
+        <!-- 部署中：带旋转图标 -->
+          <span v-if="isDeploying" class="spin-box">
+            <svg class="spin" viewBox="0 0 24 24">
+              <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/>
+              <path d="M12 4a8 8 0 0 1 8 8h-2a6 6 0 0 0-6-6V4z" opacity=".3"/>
+            </svg>
+            <!-- 部署中... -->
+          </span>
+          <!-- 非部署中：原文案 -->
+          <!-- {{ isDeploying ? '部署中...' : '开始部署' }} -->
+          {{ deployFailed ? '部署失败' : (isDeploying ? '部署中...' : '开始部署') }}
+        </button>
+      </div>
+
+      <div class="log-section" v-if="showLogs">
+        <h4>部署日志</h4>
+        <div class="log-output" ref="logOutput">
+          <div v-for="(log, index) in logs" :key="index" class="log-line">
+            {{ log }}
+          </div>
+        </div>
+        <button @click="clearLogs" class="clear-btn">清空日志</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DeployView',
+  data() {
+    return {
+      socket: null,
+      socketUrl: '',
+      isConnecting: false,
+      isConnected: false,
+      isDeploying: false,
+      deployFailed: false,   // 新增：标记是否失败
+      connectionStatus: '未连接',
+      deployStatus: '',
+      logs: [],
+      showLogs: false
+    }
+  },
+  computed: {
+    connectionStatusClass() {
+      if (this.isConnected) return 'status-success'
+      if (this.isConnecting) return 'status-warning'
+      return 'status-error'
+    },
+    deployStatusClass() {
+      if (this.deployStatus.includes('完成') || this.deployStatus.includes('成功')) return 'status-success'
+      if (this.deployStatus.includes('错误') || this.deployStatus.includes('失败')) return 'status-error'
+      if (this.deployStatus.includes('中') || this.deployStatus.includes('启动')) return 'status-info'
+      return 'status-info'
+    }
+  },
+     methods: {
+    connectSocket() {
+      if (!this.socketUrl) {
+        alert('请输入服务器地址')
+        return
+      }
+
+      this.isConnecting = true
+      this.connectionStatus = '正在连接...'
+
+      try {
+        // 直接使用原生WebSocket连接，不需要转换URL
+        this.socket = new WebSocket(this.socketUrl)
+        
+        this.socket.onopen = () => {
+          this.isConnected = true
+          this.isConnecting = false
+          this.connectionStatus = '已连接到服务器'
+          this.setupSocketListeners()
+        }
+
+        this.socket.onclose = () => {
+          this.isConnected = false
+          this.connectionStatus = '与服务器断开连接'
+          this.isDeploying = false
+        }
+
+        this.socket.onerror = (error) => {
+          this.handleConnectionError(error)
+        }
+      } catch (error) {
+        this.handleConnectionError(error)
+      }
+    },
+
+    setupSocketListeners() {
+      this.socket.onmessage = (event) => {
+        try {
+          console.log('接收到消息:', event.data);
+          console.log('接收到消息:', typeof event.data);
+          const data = JSON.parse(event.data)
+          
+          switch (data.type) {
+            case 'connection_status':
+              this.connectionStatus = data.message
+              break
+            case 'deploy_status':
+              this.deployStatus = data.message
+              this.showLogs = true
+              break
+            case 'deploy_update':
+              this.logs.push(data.message)
+              this.$nextTick(() => {
+                this.scrollToBottom()
+              })
+              break
+            case 'deploy_complete':
+              this.deployStatus = data.message
+              this.isDeploying = false
+              this.logs.push('=== 部署结束 ===')
+              break
+            case 'deploy_error':
+              this.deployStatus = data.message
+              this.isDeploying = false
+              this.deployFailed = true   // 标记失败
+              this.logs.push(`错误: ${data.message}`)
+              break
+            case 'error':
+              this.logs.push(`错误: ${data.message}`)
+              break
+          }
+        } catch (error) {
+          console.error('解析消息失败:', error)
+          this.logs.push(`解析消息失败: ${event.data}`)
+        }
+      }
+    },
+
+    disconnectSocket() {
+      if (this.socket) {
+        this.socket.close()
+        this.socket = null
+      }
+      this.isConnected = false
+      this.isConnecting = false
+      this.isDeploying = false
+      this.connectionStatus = '未连接'
+      this.deployStatus = ''
+    },
+
+    startDeployment() {
+      if (!this.isConnected) {
+        alert('请先连接到服务器')
+        return
+      }
+
+      this.isDeploying = true
+      this.deployFailed = false   // 重置失败标志
+      this.deployStatus = '部署已启动'
+      this.logs = []
+      this.showLogs = true
+      
+      // 发送JSON消息到服务器
+      this.socket.send(JSON.stringify({
+        action: 'start_deployment'
+      }))
+    },
+
+    clearLogs() {
+      this.logs = []
+    },
+
+    scrollToBottom() {
+      const logOutput = this.$refs.logOutput
+      if (logOutput) {
+        logOutput.scrollTop = logOutput.scrollHeight
+      }
+    },
+
+    handleConnectionError(error) {
+      this.isConnecting = false
+      this.isConnected = false
+      this.connectionStatus = `连接失败: ${error.message || '未知错误'}`
+      console.error('连接错误:', error)
+    }
+  },
+}
+</script>
+
+<style scoped>
+.deploy-container {
+  padding: 20px;
+}
+
+.connection-config, .deploy-control {
+  margin-bottom: 30px;
+  background-color: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+
+.connection-config h3, .deploy-control h3 {
+  color: #333;
+  margin-bottom: 15px;
+  font-size: 18px;
+}
+
+.input-group {
+  margin-bottom: 15px;
+}
+
+.input-group label {
+  display: inline-block;
+  width: 100px;
+  font-weight: bold;
+  color: #555;
+}
+
+.url-input {
+  width: 300px;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.url-input:focus {
+  outline: none;
+  border-color: #2196F3;
+}
+
+.button-group {
+  margin-top: 15px;
+}
+
+.connect-btn, .disconnect-btn, .deploy-btn, .clear-btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  margin-right: 10px;
+  transition: background-color 0.3s;
+}
+
+.connect-btn {
+  background-color: #4CAF50;
+  color: white;
+}
+
+.connect-btn:hover:not(:disabled) {
+  background-color: #45a049;
+}
+
+.disconnect-btn {
+  background-color: #f44336;
+  color: white;
+}
+
+.disconnect-btn:hover:not(:disabled) {
+  background-color: #da190b;
+}
+
+.deploy-btn {
+  background-color: #2196F3;
+  color: white;
+}
+
+.deploy-btn:hover:not(:disabled) {
+  background-color: #1976D2;
+}
+
+.clear-btn {
+  background-color: #9E9E9E;
+  color: white;
+  margin-top: 10px;
+}
+
+.clear-btn:hover {
+  background-color: #757575;
+}
+
+button:disabled {
+  background-color: #ccc;
+  cursor: not-allowed;
+}
+
+.status-display {
+  margin: 20px 0;
+}
+
+.status-item {
+  padding: 10px;
+  margin: 10px 0;
+  border-radius: 4px;
+  border-left: 4px solid;
+}
+
+.status-success {
+  background-color: #e8f5e8;
+  border-left-color: #4caf50;
+  color: #2e7d32;
+}
+
+.status-error {
+  background-color: #ffebee;
+  border-left-color: #f44336;
+  color: #c62828;
+}
+
+.status-warning {
+  background-color: #fff3e0;
+  border-left-color: #ff9800;
+  color: #e65100;
+}
+
+.status-info {
+  background-color: #e8f4f8;
+  border-left-color: #2196F3;
+  color: #1565c0;
+}
+
+.status-label {
+  font-weight: bold;
+  margin-right: 10px;
+}
+
+.deploy-actions {
+  margin: 20px 0;
+}
+
+.log-section {
+  margin-top: 30px;
+}
+
+.log-section h4 {
+  color: #333;
+  margin-bottom: 10px;
+}
+
+.log-output {
+  background-color: #f8f8f8;
+  border: 1px solid #ddd;
+  padding: 15px;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
+  font-size: 13px;
+  max-height: 300px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  line-height: 1.4;
+}
+
+.log-line {
+  margin-bottom: 4px;
+  word-break: break-all;
+}
+/* 旋转动画 */
+.spin-box { display: inline-flex; align-items: center; gap: 6px; }
+.spin { width: 16px; height: 16px; fill: currentColor; animation: spin 1s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+</style>
\ No newline at end of file