btl143/project_main
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 添加新遠程頁面

Browse Source
This commit is contained in:
bmy
2024-07-16 17:36:48 +08:00
parent de8012a590
commit 211b4767c1
4 changed files with 173 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
templates/index.html
View File

@@ -109,7 +109,7 @@
</el-col>
<el-col :xs="24" :sm="8">
<el-button @click="skipTask" type="success" style="width: 100%">
强制跳转
关闭
</el-button>
</el-col>
</el-row>
@@ -128,12 +128,16 @@
</el-button> -->
<el-form v-if="showConfigForm && config" class="config-form">
<el-button @click="saveConfig" type="primary" style="margin-top: 20px;">保存配置</el-button>
<el-button v-if="showConfigForm" @click="toggleConfigForm" type="primary" style="margin-bottom: 20px;">
{{ showConfigForm ? '关闭' : '打开' }} 配置
</el-button>
<div v-for="(section, sectionName) in config" :key="sectionName">
<h3>{{ sectionName }}</h3>
<el-row :gutter="20">
<el-col v-for="(value, key) in section" :key="key" :xs="24" :sm="12" :md="8" :lg="6">
<el-form-item :label="key">
<el-select v-if="sectionName === 'kick_ass'" v-model="config[sectionName][key]">
<el-select v-if="sectionName === 'lane_mode'" v-model="config[sectionName][key]">
<el-option
v-for="item in target_person_options"
:key="item.value"
@@ -162,10 +166,7 @@
</el-col>
</el-row>
</div>
<el-button @click="saveConfig" type="primary" style="margin-top: 20px;">保存配置</el-button>
<el-button v-if="showConfigForm" @click="toggleConfigForm" type="primary" style="margin-bottom: 20px;">
{{ showConfigForm ? '关闭' : '打开' }} 配置
</el-button>
</el-form>
<h2 class="section-title">Log Display</h2>
@@ -197,16 +198,16 @@
timer: null,
target_person_options: [{
value: 1,
label: '模式 1'
label: '6_9'
}, {
value: 2,
label: '模式 2'
label: '7_10_2'
}, {
value: 3,
label: '模式 3'
label: '7_14_2'
}, {
value: 4,
label: '模式 4'
label: '7_15_4'
}],
},
methods: {

139
templates/index1.html Normal file
View File

@@ -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>