1

2025-10-10 10:06:56 +08:00
parent 4fbe51d625
commit 6f22c9bffd
37 changed files with 2176 additions and 1183 deletions
--- a/ruoyi-ui/src/api/monitor/account.js
+++ b/ruoyi-ui/src/api/monitor/account.js
@@ -59,4 +59,13 @@ export function checkUsername(username) {
    method: 'get',
    params: { username }
  })
+}
+
+// 续费客户端账号
+export function renewAccount(data) {
+  return request({
+    url: '/monitor/account/renew',
+    method: 'post',
+    data: data
+  })
 } 
--- a/ruoyi-ui/src/views/index.vue
+++ b/ruoyi-ui/src/views/index.vue
@@ -12,13 +12,13 @@
          <template v-slot:header>
            <div class="card-header">
              <i class="el-icon-user"></i>
-              <span>当前在线客户端</span>
+              <span>当前在线设备</span>
            </div>
          </template>
          <div class="card-body">
            <count-to :start-val="0" :end-val="statisticsData.onlineCount" :duration="2500" class="card-value" />
            <div class="card-footer">
-              <span>总注册客户端: {{ statisticsData.totalCount }}</span>
+              <span>总设备数: {{ statisticsData.totalCount }}</span>
            </div>
          </div>
        </el-card>
@@ -60,13 +60,13 @@
          <template v-slot:header>
            <div class="card-header">
              <i class="el-icon-s-data"></i>
-              <span>离线客户端</span>
+              <span>离线设备</span>
            </div>
          </template>
          <div class="card-body">
            <count-to :start-val="0" :end-val="statisticsData.totalCount - statisticsData.onlineCount" :duration="2500" class="card-value" />
            <div class="card-footer">
-              <span>离线时长: {{ statisticsData.avgOfflineTime || '未知' }}</span>
+              <span>离线设备数</span>
            </div>
          </div>
        </el-card>
@@ -80,7 +80,7 @@
          <template v-slot:header>
            <div class="card-header">
            <i class="el-icon-data-analysis"></i>
-            <span>近7天新增客户端趋势</span>
+            <span>近7天新增设备趋势</span>
          </div>
          </template>
          <div class="chart-container">
@@ -109,25 +109,25 @@
          <template v-slot:header>
            <div class="card-header">
            <i class="el-icon-s-grid"></i>
-            <span>活跃客户端列表</span>
+            <span>活跃设备列表</span>
            <el-button style="float: right; padding: 3px 0;" type="text" @click="refreshClients">
              <i class="el-icon-refresh"></i> 刷新
            </el-button>
            </div>
          </template>
          <el-table :data="clientList" style="width: 100%" v-loading="loading">
-            <el-table-column prop="clientId" label="客户端ID" width="240"></el-table-column>
-            <el-table-column prop="username" label="用户名" width="120"></el-table-column>
+            <el-table-column prop="clientId" label="设备ID" width="240" show-overflow-tooltip></el-table-column>
+            <el-table-column prop="username" label="账号" width="120"></el-table-column>
+            <el-table-column prop="hostname" label="设备名称" width="150" show-overflow-tooltip></el-table-column>
            <el-table-column prop="osName" label="操作系统" width="120"></el-table-column>
-            <el-table-column prop="appVersion" label="应用版本" width="100"></el-table-column>
            <el-table-column prop="ipAddress" label="IP地址" width="150"></el-table-column>
            <el-table-column prop="lastActiveTime" label="最后活跃时间" width="180"></el-table-column>
-            <el-table-column prop="online" label="状态">
+            <el-table-column prop="online" label="状态" width="100">
              <template v-slot="scope">
                <el-tag :type="scope.row.online === '1' ? 'success' : 'info'">{{ scope.row.online === '1' ? '在线' : '离线' }}</el-tag>
              </template>
            </el-table-column>
-            <el-table-column label="操作" width="180">
+            <el-table-column label="操作" width="120">
              <template v-slot="scope">
                <el-button size="mini" type="text" @click="viewClientData(scope.row)">详情</el-button>
          </template>
@@ -150,19 +150,17 @@
    </el-row>

    <!-- 客户端详情弹窗 -->
-    <el-dialog :title="'客户端详情: ' + currentClient.clientId" v-model="detailDialogVisible" width="50%">
+    <el-dialog :title="'设备详情: ' + currentClient.hostname" v-model="detailDialogVisible" width="50%">
      <el-descriptions :column="2" border>
-        <el-descriptions-item label="用户名">{{ currentClient.username }}</el-descriptions-item>
+        <el-descriptions-item label="设备ID">{{ currentClient.clientId }}</el-descriptions-item>
+        <el-descriptions-item label="账号名">{{ currentClient.username }}</el-descriptions-item>
+        <el-descriptions-item label="设备名称">{{ currentClient.hostname }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="currentClient.online === '1' ? 'success' : 'info'">{{ currentClient.online === '1' ? '在线' : '离线' }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="操作系统">{{ currentClient.osName }}</el-descriptions-item>
-        <el-descriptions-item label="系统版本">{{ currentClient.osVersion }}</el-descriptions-item>
-        <el-descriptions-item label="Java版本">{{ currentClient.javaVersion }}</el-descriptions-item>
-        <el-descriptions-item label="应用版本">{{ currentClient.appVersion }}</el-descriptions-item>
        <el-descriptions-item label="IP地址">{{ currentClient.ipAddress }}</el-descriptions-item>
-        <el-descriptions-item label="主机名">{{ currentClient.hostname }}</el-descriptions-item>
-        <el-descriptions-item label="认证时间">{{ currentClient.authTime }}</el-descriptions-item>
+        <el-descriptions-item label="注册时间">{{ currentClient.authTime }}</el-descriptions-item>
        <el-descriptions-item label="最后活跃">{{ currentClient.lastActiveTime }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
@@ -273,12 +271,12 @@ export default {
        errorRate: 0,
        avgOfflineTime: '未知'
      },
-      // 近7天新增客户端趋势数据
+      // 近7天新增设备趋势数据
      onlineClientData: {
        labels: [],
        datasets: [
          {
-            label: '新增客户端数',
+            label: '新增设备数',
            data: [],
            backgroundColor: 'rgba(103, 194, 58, 0.2)',
            borderColor: 'rgb(103, 194, 58)',
--- a/ruoyi-ui/src/views/monitor/account/index.vue
+++ b/ruoyi-ui/src/views/monitor/account/index.vue
@@ -89,13 +89,22 @@
      </el-table-column>
      <el-table-column label="过期时间" align="center" prop="expireTime" width="180">
        <template slot-scope="scope">
-          <span>{{ scope.row.expireTime }}</span>
-          <el-tag v-if="isExpired(scope.row)" type="danger" size="mini">已过期</el-tag>
+          <el-tag 
+            :type="getRemainingDays(scope.row).type" 
+            size="small"
+            style="margin-top: 5px;"
+          >
+            {{ getRemainingDays(scope.row).text }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="设备限制" align="center" prop="deviceLimit" width="100">
+        <template slot-scope="scope">
+          <span>{{ scope.row.deviceLimit || 3 }}台</span>
        </template>
      </el-table-column>
-      <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
@@ -153,16 +162,37 @@
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
+        <el-form-item label="快速续费" v-if="form.id">
+          <el-select v-model="form.renewDays" placeholder="选择续费套餐（可选）" style="width: 100%;" clearable>
+            <el-option label="月付（30天）" :value="30"></el-option>
+            <el-option label="季付（90天）" :value="90"></el-option>
+            <el-option label="半年付（180天）" :value="180"></el-option>
+            <el-option label="年付（365天）" :value="365"></el-option>
+          </el-select>
+          <div v-if="form.renewDays" style="margin-top: 8px; color: #409EFF; font-size: 12px;">
+            <i class="el-icon-info"></i> 续费后到期时间：{{ calculateNewExpireTime() }}
+          </div>
+        </el-form-item>
+        <el-form-item label="设备数量限制" prop="deviceLimit">
+          <el-input-number 
+            v-model="form.deviceLimit" 
+            :min="1" 
+            :max="20" 
+            placeholder="请输入设备数量限制"
+            style="width: 100%;"
+          ></el-input-number>
+          <span style="color: #909399; font-size: 12px;">允许同时登录的设备数量，默认3台</span>
+        </el-form-item>
        <el-form-item label="功能权限" prop="permissions">
          <div class="permission-config">
            <el-checkbox-group v-model="selectedPermissions" @change="onPermissionChange">
-              <el-checkbox label="rakuten">日本乐天平台</el-checkbox>
-              <el-checkbox label="amazon">亚马逊平台</el-checkbox>
-              <el-checkbox label="zebra">斑马平台</el-checkbox>
-              <el-checkbox label="shopee">虾皮购物平台</el-checkbox>
-              <el-checkbox label="toolbox">工具箱功能</el-checkbox>
-              <el-checkbox label="dataCollection">数据采集功能</el-checkbox>
-              <el-checkbox label="priceCompare">1688比价功能</el-checkbox>
+              <el-checkbox label="rakuten"><i class="el-icon-goods"></i> 日本乐天平台</el-checkbox>
+              <el-checkbox label="amazon"><i class="el-icon-shopping-cart-2"></i> 亚马逊平台</el-checkbox>
+              <el-checkbox label="zebra"><i class="el-icon-postcard"></i> 斑马平台</el-checkbox>
+              <el-checkbox label="shopee"><i class="el-icon-shopping-bag-2"></i> 虾皮购物平台</el-checkbox>
+              <el-checkbox label="toolbox"><i class="el-icon-box"></i> 工具箱功能</el-checkbox>
+              <el-checkbox label="dataCollection"><i class="el-icon-document-copy"></i> 数据采集功能</el-checkbox>
+              <el-checkbox label="priceCompare"><i class="el-icon-price-tag"></i> 1688比价功能</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
@@ -201,7 +231,7 @@
 </template>

 <script>
-import { listAccount, getAccount, delAccount, addAccount, updateAccount, registerAccount, checkUsername } from "@/api/monitor/account";
+import { listAccount, getAccount, delAccount, addAccount, updateAccount, registerAccount, checkUsername, renewAccount } from "@/api/monitor/account";

 export default {
  name: "Account",
@@ -309,6 +339,8 @@ export default {
        password: null,
        status: "0",
        expireTime: null,
+        renewDays: null,
+        deviceLimit: 3,
        remark: null,
        permissions: null
      };
@@ -353,10 +385,24 @@ export default {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
-            updateAccount(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
+            // 如果选择了续费，先执行续费
+            const promises = [];
+            if (this.form.renewDays) {
+              promises.push(renewAccount({
+                accountId: this.form.id,
+                days: this.form.renewDays
+              }));
+            }
+            // 执行更新
+            promises.push(updateAccount(this.form));
+            
+            Promise.all(promises).then(() => {
+              const msg = this.form.renewDays ? "修改并续费成功" : "修改成功";
+              this.$modal.msgSuccess(msg);
              this.open = false;
              this.getList();
+            }).catch(error => {
+              this.$modal.msgError('操作失败: ' + (error.message || '未知错误'));
            });
          } else {
            addAccount(this.form).then(response => {
@@ -471,6 +517,48 @@ export default {
    cancelRegister() {
      this.registerOpen = false;
      this.resetRegisterForm();
+    },
+    /** 计算续费后的新到期时间 */
+    calculateNewExpireTime() {
+      if (!this.form.renewDays) return '';
+      
+      let baseDate;
+      if (this.form.expireTime && new Date(this.form.expireTime) > new Date()) {
+        // 未过期，从到期时间延长
+        baseDate = new Date(this.form.expireTime);
+      } else {
+        // 已过期或无到期时间，从当前时间开始
+        baseDate = new Date();
+      }
+      
+      baseDate.setDate(baseDate.getDate() + this.form.renewDays);
+      return baseDate.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+      });
+    },
+    /** 获取剩余天数 */
+    getRemainingDays(row) {
+      if (!row.expireTime) {
+        return { text: '已过期', type: 'danger' };
+      }
+      
+      const now = new Date();
+      const expireDate = new Date(row.expireTime);
+      const diffTime = expireDate - now;
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+      
+      if (diffDays < 0) {
+        return { text: '已过期', type: 'danger' };
+      } else if (diffDays <= 3) {
+        return { text: `剩余 ${diffDays} 天`, type: 'warning' };
+      } else {
+        return { text: `剩余 ${diffDays} 天`, type: 'success' };
+      }
    }
  }
 };
@@ -478,25 +566,34 @@ export default {

 <style scoped>
 .permission-config {
-  padding: 10px;
-  border: 1px solid #e6e6e6;
+  padding: 15px;
+  border: 1px solid #DCDFE6;
  border-radius: 4px;
-  background-color: #fafafa;
-}
-
-.permission-config .el-checkbox {
-  display: block;
-  margin: 8px 0;
-  margin-left: 0;
+  background: linear-gradient(135deg, #f5f7fa 0%, #fafbfc 100%);
 }

 .permission-config .el-checkbox-group {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px 20px;
 }

-.permission-config .el-checkbox + .el-checkbox {
-  margin-left: 0;
+.permission-config .el-checkbox {
+  margin: 0;
+  padding: 8px 12px;
+  border-radius: 4px;
+  transition: all 0.3s;
+  background-color: white;
+}
+
+.permission-config .el-checkbox:hover {
+  background-color: #ecf5ff;
+  transform: translateX(2px);
+}
+
+.permission-config .el-checkbox i {
+  margin-right: 6px;
+  color: #409EFF;
 }

 .checking {