Merge pull request #30 from LingMuQingYu/master

upd: 新增应用实例列表在线人数和版本显示，实例控制台5小时内增加在线人数报表
2025-02-23 18:49:12 +08:00 · 2022-02-27 12:24:42 +08:00 · 2022-02-27 12:24:42 +08:00 · 422e29d456
commit 422e29d456
parent dd2de083fd 58aef60282
6 changed files with 163 additions and 11 deletions
--- a/src/app/service/chart_option.js
+++ b/src/app/service/chart_option.js
@ -92,3 +92,26 @@ export function getStatusChartOption2() {
    ]
  };
 }
+
+export function getPlayersOption() {
+  return {
+    grid: {
+      show: false,
+      borderWidth: 0,
+      top: 8,
+      bottom: 30,
+      left: 30,
+      right: 8
+    },
+    xAxis: { type: "category", show: true },
+    yAxis: { type: "value", alignTicks: true, min: 0, show: true, minInterval: 1 },
+    series: [
+      {
+        type: "line",
+        areaStyle: {},
+        smooth: true,
+        symbol: "none"
+      }
+    ]
+  };
+}
--- a/src/app/service/instance_type.js
+++ b/src/app/service/instance_type.js
@ -27,6 +27,7 @@ export const TYPE_MINECRAFT_BUKKIT = "minecraft/java/bukkit";
 export const TYPE_MINECRAFT_SPIGOT = "minecraft/java/spigot";
 export const TYPE_MINECRAFT_PAPER = "minecraft/java/paper";
 export const TYPE_MINECRAFT_FORGE = "minecraft/java/forge";
+export const TYPE_MINECRAFT_FABRIC = "minecraft/java/fabric";
 export const TYPE_MINECRAFT_BUNGEECORD = "minecraft/java/bungeecord";
 export const TYPE_MINECRAFT_GEYSER = "minecraft/java/geyser";
 export const TYPE_MINECRAFT_SPONGE = "minecraft/java/sponge";
@ -48,6 +49,7 @@ INSTANCE_TYPE_TRANSLATION[TYPE_MINECRAFT_BUNGEECORD] = "MC BungeeCord";
 INSTANCE_TYPE_TRANSLATION[TYPE_MINECRAFT_BDS] = "MC Bedrock";
 INSTANCE_TYPE_TRANSLATION[TYPE_MINECRAFT_SPONGE] = "MC Sponge";
 INSTANCE_TYPE_TRANSLATION[TYPE_MINECRAFT_FORGE] = "MC Forge";
+INSTANCE_TYPE_TRANSLATION[TYPE_MINECRAFT_FABRIC] = "MC Fabric";
 INSTANCE_TYPE_TRANSLATION[TYPE_MINECRAFT_BUKKIT] = "MC Bukkit";
 INSTANCE_TYPE_TRANSLATION[TYPE_MINECRAFT_GEYSER] = "MC Geyser";

@ -83,6 +85,9 @@ const INSTANCE_TYPE_DEF_CONFIG = {
  [TYPE_MINECRAFT_FORGE]: {
    stopCommand: "stop"
  },
+  [TYPE_MINECRAFT_FABRIC]: {
+    stopCommand: "stop"
+  },
  [TYPE_MINECRAFT_BUKKIT]: {
    stopCommand: "stop"
  },
--- a/src/app/service/process_config.js
+++ b/src/app/service/process_config.js
@ -29,6 +29,7 @@ import {
  TYPE_MINECRAFT_SPIGOT,
  TYPE_MINECRAFT_BEDROCK,
  TYPE_MINECRAFT_FORGE,
+  TYPE_MINECRAFT_FABRIC,
  TYPE_MINECRAFT_MOHIST
 } from "./instance_type";

@ -64,7 +65,8 @@ export const INSTANCE_CONFIGS = [
      TYPE_MINECRAFT_PAPER,
      TYPE_MINECRAFT_JAVA,
      TYPE_MINECRAFT_BUKKIT,
-      TYPE_MINECRAFT_FORGE
+      TYPE_MINECRAFT_FORGE,
+      TYPE_MINECRAFT_FABRIC
    ]
  },
  {
@ -149,7 +151,8 @@ export const INSTANCE_CONFIGS = [
      TYPE_MINECRAFT_SPIGOT,
      TYPE_MINECRAFT_PAPER,
      TYPE_MINECRAFT_JAVA,
-      TYPE_MINECRAFT_BUKKIT
+      TYPE_MINECRAFT_BUKKIT,
+      TYPE_MINECRAFT_FABRIC
    ]
  },
  {
--- a/src/app/views/InstanceDetail.vue
+++ b/src/app/views/InstanceDetail.vue
@ -108,16 +108,44 @@
              <el-col :md="8" class="row-mt">
                <div class="sub-title">
                  <div class="sub-title-title">终端输入编码</div>
-                  <div class="sub-title-info">如 GBK/UTF-8/big5 等</div>
+                  <div class="sub-title-info">其他编码可以输入编码按回车生成</div>
                </div>
-                <el-input v-model="instanceInfo.config.ie" type="text"></el-input>
+                <el-select
+                  v-model="instanceInfo.config.ie"
+                  filterable
+                  allow-create
+                  default-first-option
+                  placeholder="请选择终端输入编码"
+                >
+                  <el-option
+                    v-for="item in characters"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
              </el-col>
              <el-col :md="8" class="row-mt">
                <div class="sub-title">
                  <div class="sub-title-title">终端输出编码</div>
-                  <div class="sub-title-info">如 GBK/UTF-8/big5 等</div>
+                  <div class="sub-title-info">其他编码可以输入编码按回车生成</div>
                </div>
-                <el-input v-model="instanceInfo.config.oe" type="text"></el-input>
+                <el-select
+                  v-model="instanceInfo.config.oe"
+                  filterable
+                  allow-create
+                  default-first-option
+                  placeholder="请选择终端输出编码"
+                >
+                  <el-option
+                    v-for="item in characters"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
              </el-col>
              <el-col :md="8" class="row-mt">
                <div class="sub-title">
@ -131,7 +159,21 @@
                  <div class="sub-title-title">文件管理编码</div>
                  <div class="sub-title-info">文件管理功能的解压缩，编辑等编码</div>
                </div>
-                <el-input v-model="instanceInfo.config.fileCode" type="text"></el-input>
+                <el-select
+                  v-model="instanceInfo.config.fileCode"
+                  filterable
+                  allow-create
+                  default-first-option
+                  placeholder="请选择文件管理编码"
+                >
+                  <el-option
+                    v-for="item in characters"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
              </el-col>

              <el-col :md="8" class="row-mt" :offset="0">
@ -356,7 +398,15 @@ export default {
      networkModeListLoading: false,
      commandAssistPanel: false,

-      dockerImages: []
+      dockerImages: [],
+      characters: [
+        { label: "GBK(国标)", value: "GBK" },
+        { label: "UTF-8", value: "UTF-8" },
+        { label: "GB2312(简中)", value: "GB2312" },
+        { label: "BIG5(繁中)", value: "BIG5" },
+        { label: "GB18030", value: "GB18030" },
+        { label: "UTF-16", value: "UTF-16" }
+      ]
    };
  },
  methods: {
@ -487,7 +537,14 @@ export default {
      this.instanceInfo.config.docker.extraVolumes =
        this.instanceInfo.config.docker.extraVolumes.join(" ");
    }
-
+    this.instanceInfo.config = {
+      ...this.instanceInfo.config,
+      ie: this.instanceInfo.config.ie ? this.instanceInfo.config.ie.toUpperCase() : "GBK",
+      oe: this.instanceInfo.config.oe ? this.instanceInfo.config.oe.toUpperCase() : "GBK",
+      fileCode: this.instanceInfo.config.fileCode
+        ? this.instanceInfo.config.fileCode.toUpperCase()
+        : "GBK"
+    };
    this.loading = false;
  }
 };
--- a/src/app/views/Instances.vue
+++ b/src/app/views/Instances.vue
@ -162,6 +162,16 @@
              <span class="color-red" v-else>忙碌</span>
            </template>
          </el-table-column>
+          <el-table-column prop="currentPlayers" label="在线人数" width="120">
+            <template #default="scope">
+              <div class="color-green">
+                <span v-if="scope.row.info && scope.row.info.currentPlayers >= 0"
+                  >{{ scope.row.info.currentPlayers }}/{{ scope.row.info.maxPlayers }}</span
+                >
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="version" label="版本" width="120"></el-table-column>
          <el-table-column prop="type" label="实例类型" width="140"></el-table-column>
          <el-table-column label="操作" style="text-align: center" width="180">
            <template #default="scope">
@ -275,7 +285,11 @@ export default {
        });
      } else {
        this.remoteList.forEach((v) => {
-          if (v.available) this.currentRemoteUuid = v.value;
+          if (v.available) {
+            // 默认取第一个开启的实例
+            this.currentRemoteUuid = v.value;
+            return;
+          }
        });
        this.remoteSelectHandle();
      }
@ -311,10 +325,14 @@ export default {
            instanceUuid: instance.instanceUuid,
            serviceUuid: this.currentRemoteUuid,
            nickname: instance.config.nickname,
+            info: instance.info,
+            currentPlayers: instance.info ? instance.info.currentPlayers : "0",
+            version: instance.info ? instance.info.version : "",
            type,
            status
          });
        });
+        console.log(this.instances);
        this.loading = false;
        // 记录当前选择的守护进程，方便下次直接加载
        localStorage.setItem("pageSelectedRemoteUuid", this.currentRemoteUuid);
--- a/src/app/views/Terminal.vue
+++ b/src/app/views/Terminal.vue
@ -288,6 +288,15 @@
          </div>
        </template>
      </Panel>
+      <Panel v-if="isShowPlayersChart">
+        <template #title>面板端在线人数</template>
+        <template #default>
+          <p>每10分钟统计间隔，总10小时的在线人数趋势</p>
+          <div class="echart-wrapper">
+            <div id="echart-wrapper-players" style="width: 100%; height: 200px"></div>
+          </div>
+        </template>
+      </Panel>
    </el-col>
  </el-row>

@ -414,6 +423,7 @@
 </template>

 <script>
+import * as echarts from "echarts";
 import Dialog from "../../components/Dialog";
 import Panel from "../../components/Panel";
 import "../../assets/xterm/xterm.css";
@ -436,6 +446,7 @@ import { encodeConsoleColor } from "../service/terminal_color";
 import { ElNotification } from "element-plus";
 import { statusCodeToText, typeTextToReadableText } from "../service/instance_tools";
 import { initTerminalWindow, textToTermText } from "../service/term";
+import { getPlayersOption } from "../service/chart_option";

 export default {
  data: function () {
@ -476,7 +487,10 @@ export default {
      },

      unavailableTerminal: false,
-      unavailableIp: null
+      unavailableIp: null,
+
+      playersChart: null,
+      isShowPlayersChart: false
    };
  },
  computed: {
@ -560,6 +574,7 @@ export default {
      // 监听实例详细信息
      this.socket.on("stream/detail", (packet) => {
        this.instanceInfo = packet.data;
+        this.initChart();
      });
      // 断开事件
      this.socket.on("disconnect", () => {
@ -781,6 +796,37 @@ export default {
    },
    toInstanceDetail() {
      this.$router.push({ path: `/instance_detail/${this.serviceUuid}/${this.instanceUuid}/` });
+    },
+    initChart() {
+      if (!this.instanceInfo.info.playersChart || !this.instanceInfo.info.playersChart.length) {
+        this.isShowPlayersChart = false;
+        return;
+      }
+      if (!this.isShowPlayersChart) {
+        this.isShowPlayersChart = true;
+        setTimeout(() => {
+          // 基于准备好的dom，初始化echarts实例
+          this.playersChart = echarts.init(document.getElementById("echart-wrapper-players"));
+          this.playersChart.setOption(getPlayersOption());
+          this.setPlayersChart();
+        }, 200);
+      } else {
+        this.setPlayersChart();
+      }
+    },
+    setPlayersChart() {
+      if (!this.playersChart) return;
+      const MAX_TIME = this.instanceInfo.info.playersChart.length - 1;
+      const source = this.instanceInfo.info.playersChart;
+      for (const key in source) {
+        source[key]["time"] = `${(MAX_TIME - key) * 10} 分前`;
+      }
+      this.playersChart.setOption({
+        dataset: {
+          dimensions: ["time", "value"],
+          source
+        }
+      });
    }
  },
  // 装载事件