feat: 添加新遠程頁面

2024-07-16 17:36:48 +08:00
parent de8012a590
commit 211b4767c1
4 changed files with 173 additions and 10 deletions
--- a/templates/index1.html
+++ b/templates/index1.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>btl143</title>
+    <link rel="stylesheet" href="static/index.css">
+    <script src="static/vue.js"></script>
+    <script src="static/index.js"></script>
+    <script src="static/socket.io.js"></script>
+    
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f5f7fa;
+        }
+        .app-container {
+            padding: 20px;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+       
+        .button-group {
+            margin-bottom: 20px;
+        }
+        .full-screen-background {
+          background-color: #f0f0f0;
+          position: fixed;
+          top: 60px; /* Adjust based on button height and margin */
+          left: 0;
+          right: 0;
+          bottom: 0;
+          z-index: -1;
+        }
+
+        .counter-display {
+          padding: 20px;
+          text-align: center;
+          position: fixed;
+          top: 80px; /* Adjust based on your requirements */
+          left: 50%;
+          transform: translateX(-50%);
+          z-index: 1;
+        }
+    </style>
+</head>
+<body>
+    <div id="app">
+        <el-container class="app-container">
+            <el-main>
+                <h1 class="section-title">btl143 upper</h1>
+                
+                
+                <el-row :gutter="20" class="button-group">
+                    <el-col :xs="24" :sm="8">
+                        <el-button 
+                        @click="toggleTask" 
+                        :type="taskActive ? 'success' : 'danger'" 
+                        style="width: 100%">
+                        {{ taskActive ? `开启 task ${counter}` : `关闭 task ${counter}` }}
+                      </el-button>
+                    </el-col>
+                </el-row>
+                <div class="full-screen-background" @click="incrementCounter">
+                  <div class="counter-display">
+                  </div>
+                </div>
+
+            </el-main>
+        </el-container>
+    </div>
+
+    <script>
+        new Vue({
+            el: '#app',
+            data: {
+                taskActive: true,
+                counter: 1
+            },
+            methods: {
+                toggleTask() {
+                    if (this.taskActive) {
+                        this.socket.emit('operate', {type: 'operate_task', content: 'run'});
+                    }
+                    else {
+                        this.socket.emit('operate', {type: 'operate_task', content: 'stop'});
+                    }
+                    this.taskActive = !this.taskActive;
+                },
+                incrementCounter() {
+                  this.counter += 1;
+                  if (this.counter == 5) {
+                    this.counter = 1;
+                  }
+                  this.socket.emit('operate', {type: 'save_target_person', content: this.counter});
+                },
+                startServer() {
+                    this.socket.emit('operate', {type: 'operate_server', content: 'run'});
+                },
+                stopServer() {
+                    this.socket.emit('operate', {type: 'operate_server', content: 'stop'});
+                },
+                restartServer() {
+                    this.socket.emit('operate', {type: 'operate_server', content: 'restart'});
+                },
+                startTask() {
+                    this.socket.emit('operate', {type: 'operate_task', content: 'run'});
+                },
+                stopTask() {
+                    this.socket.emit('operate', {type: 'operate_task', content: 'stop'});
+                },
+                restartTask() {
+                    this.socket.emit('operate', {type: 'operate_task', content: 'restart'});
+                },
+                skipTask() {
+                    this.socket.emit('operate', { type: 'skip_task', content: '' });
+                }
+            },
+            mounted() {
+                this.socket = io('http://' + document.domain + ':5001');
+                this.socket.on('connect', () => {
+                    console.log('Connected to server');
+                });
+                this.socket.on('task_status', (data) => {
+                    if (data.content == 0) {
+                      this.taskActive = true
+                    } else {
+                      this.taskActive = false
+                    }
+
+                });
+                
+            }
+        });
+    </script>
+</body>
+</html>