From fb53e8b6cb46272e7ffca353aeb0c327483dc5e6 Mon Sep 17 00:00:00 2001
From: sanfengpeng <sanfengpeng@sanfengpengdeMacBook-Air.local>
Date: Fri, 14 Apr 2023 18:43:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=8E=A7=E5=88=B6=E5=8F=B0?=
 =?UTF-8?q?=E9=83=A8=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .DS_Store                                     | Bin 0 -> 6148 bytes
 package-lock.json                             |   6 +
 web/.env.development                          |   2 +-
 web/package.json                              |   2 +-
 web/src/main.js                               |   4 +-
 .../dashboard/workbench/components/ aac.vue   |   0
 .../workbench/components/attachment.vue       | 109 ++++++++++++
 .../workbench/components/database.vue         | 108 ++++++++++++
 .../dashboard/workbench/components/member.vue |  85 +++++++++
 .../workbench/components/newUsers.vue         | 162 ++++++++++++++++++
 .../workbench/components/registeredUser.vue   |  92 ++++++++++
 .../workbench/components/sumTotal.vue         | 109 ++++++++++++
 .../workbench/components/userIogin.vue        |  98 +++++++++++
 13 files changed, 774 insertions(+), 3 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 package-lock.json
 delete mode 100644 web/src/views/dashboard/workbench/components/ aac.vue
 create mode 100644 web/src/views/dashboard/workbench/components/attachment.vue
 create mode 100644 web/src/views/dashboard/workbench/components/database.vue
 create mode 100644 web/src/views/dashboard/workbench/components/member.vue
 create mode 100644 web/src/views/dashboard/workbench/components/newUsers.vue
 create mode 100644 web/src/views/dashboard/workbench/components/registeredUser.vue
 create mode 100644 web/src/views/dashboard/workbench/components/sumTotal.vue
 create mode 100644 web/src/views/dashboard/workbench/components/userIogin.vue

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..a7f0f6b0c032283e13bd77ecd8ad2b5acf6f9d11
GIT binary patch
literal 6148
zcmeHKO>5gg5S_K%SWa3nrG;Dyf?gfhsf(fXqB!;;&<}`0duWTRjZ7<|XpLn@6l2i2
z{VRoD`%C&?dTM88R}jhRwFzYhX5W6yo7Fy{T`d5J;WFF@Xaj(QPT1JS;tHd2@(rt*
z9^whkF@*%eqgb8Fcq7_&SOu&CH%$ThcAFp}fKxbwOW&`OI6~XP0ebg08`c2sLI}!4
z&tVU13eI7MWs3YRe8yI+_kbdYcu>i)UCJ@xc`wQw_+H^O;W-?^A&lWA_%JR<i?5aF
zEsS~vCz?@-{Z)y*4ab=E07mcvvCB`>#Z{P{tXM_uV};kM@HQB%-M35H)gi;|viv-}
z(kr55md<3%v;UB@I7%12-cM1hH*Re;ou;$ny!St;%wGhHWjYMzZ>e>nR4j{nAYVt*
zY|_4WsFFnxCDS<*qHu~K@7_d7sIsA2CSl54Uk^Afr!{Hsu2y^d{f^ro4AvcY_4IMC
z<38yR*6WsY|KX!&$CI=8JW*dz5j26jKieIH1<+eDYrgR3Nvsmmu!t_AEMAWS<~=w&
z*E7AH)hb{WxWNk0{@|h$dIociymer~R{+EYcC%rfej1458uSe28gT?oXey$n3UkE}
znvVUhiSrER8Z{k+xqJvSvoJRl!Lwt2m%~AL8f|G6unLqFsOx5%&j0b>@Bd|zZCM4Z
z0{@i)qA~JELtK(MTQ?R*XRV9=0iBHEa*a&E!W_q3p`&;goejrasvvp>bB)-8W`6`&
M23uGK{;2|g0Cat_f&c&j

literal 0
HcmV?d00001

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..ebaca02
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "django-vue-admin",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}
diff --git a/web/.env.development b/web/.env.development
index 2b35a9a..65fcb3a 100644
--- a/web/.env.development
+++ b/web/.env.development
@@ -5,5 +5,5 @@ VUE_APP_TITLE=企业级后台管理系统
 # 启用权限管理
 VUE_APP_PM_ENABLED = true
 # 后端接口地址及端口(域名)
-VUE_APP_API = "http://127.0.0.1:8000"
+VUE_APP_API = "https://demo.django-vue-admin.com/api"
 
diff --git a/web/package.json b/web/package.json
index 086e51b..f487fce 100644
--- a/web/package.json
+++ b/web/package.json
@@ -23,7 +23,7 @@
     "d2-crud-x": "^2.17.9",
     "d2p-extends": "^2.17.9",
     "dayjs": "^1.8.17",
-    "echarts": "^5.1.2",
+    "echarts": "^5.4.2",
     "el-phone-number-input": "^1.1.5",
     "element-ui": "^2.15.5",
     "faker": "^4.1.0",
diff --git a/web/src/main.js b/web/src/main.js
index c5a81e0..3adfccd 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -36,13 +36,15 @@ import md5 from 'js-md5'
 import websocket from '@/api/websocket'
 import util from '@/libs/util'
 
+//引入echarts
+import * as echarts from "echarts" 
 // 核心插件
 Vue.use(d2Admin)
 Vue.use(VXETable)
 Vue.prototype.$md5 = md5
 Vue.prototype.$util = util
 Vue.prototype.$websocket = websocket
-
+Vue.prototype.$echarts = echarts //注册echarts组件
 new Vue({
   router,
   store,
diff --git a/web/src/views/dashboard/workbench/components/ aac.vue b/web/src/views/dashboard/workbench/components/ aac.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/web/src/views/dashboard/workbench/components/attachment.vue b/web/src/views/dashboard/workbench/components/attachment.vue
new file mode 100644
index 0000000..fcf3584
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/attachment.vue
@@ -0,0 +1,109 @@
+<template>
+    <el-card
+      class="card-view"
+      :style="{ backgroundColor: randomColor() }"
+      shadow="always"
+    >
+      <div>
+        <el-row type="flex" justify="space-around">
+          <el-col :span="12">
+            <div class="card-content-label">附件统计</div>
+            <div class="card-content">
+              <div class="card-content-value">{{ total || 0 }}</div>
+              <div class="el-icon-document-copy">
+                附件数量</div>
+            </div>
+          </el-col>
+          <el-col :span="12" :offset="6" style="text-align: right">
+            <i class="real-time">实时</i>
+            <div class="card-content-time">
+              <div class="attachment-value">{{ total || 0 }}MB</div>
+              <div class="el-icon-s-flag">
+                附件大小</div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+  </template>
+  
+  <script>
+  import { request } from "@/api/service";
+  
+  export default {
+    title: "附件统计图",
+    icon: "el-icon-s-order",
+    description: "总附件数",
+    name: "attachment",
+    height: 14,
+    width: 8,
+    minH: 14,
+    minW: 8,
+    isResizable: true,
+    data() {
+      return {
+        total: 0,
+      };
+    },
+    methods: {
+      initGet() {
+        request({
+          url: "",
+        }).then((res) => {
+          const { data } = res;
+          // this.total = data.total;
+        });
+      },
+      // 生成一个随机整数
+      randomColor() {
+        const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
+        const ran = Math.floor(Math.random() * 4);
+        return color[ran];
+      },
+    },
+    mounted() {
+      this.initGet();
+    },
+  };
+  </script>
+  
+  <style scoped lang="scss">
+  .card-view {
+    border-radius: 10px;
+    color: #ffffff;
+    .card-content {
+      .card-content-label {
+        font-size: 0.8em;
+        color: #ffffff;
+      }
+      .card-content-value {
+        color: #ffffff;
+        margin-top: 5px;
+        font-size: 1.5em;
+        font-weight: bold;
+      }
+    }
+    .attachment-value {
+      color: #ffffff;
+      margin-top: 5px;
+      font-size: 1.5em;
+      font-weight: bold;
+      margin-right: 180px;
+    }
+    .el-icon-document-copy {
+      font-size: 12px;
+    }
+    .el-icon-s-flag {
+      font-size: 12px;
+      margin-right: 130px;
+    }
+  }
+  .real-time {
+    background: rgb(53, 59, 86);
+    font-size: 14px;
+    font-style: normal;
+    padding: 0 7px 0 7px;
+    border-radius: 4px;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/web/src/views/dashboard/workbench/components/database.vue b/web/src/views/dashboard/workbench/components/database.vue
new file mode 100644
index 0000000..e545bab
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/database.vue
@@ -0,0 +1,108 @@
+<template>
+    <el-card
+      class="card-view"
+      :style="{ backgroundColor: randomColor() }"
+      shadow="always"
+    >
+      <div>
+        <el-row type="flex" justify="space-around">
+          <el-col :span="12">
+            <div class="card-content-label">数据库统计</div>
+            <div class="card-content">
+              <div class="card-content-value">{{ total || 0 }}</div>
+              <div class="el-icon-coin">
+                数据库数量</div>
+            </div>
+          </el-col>
+          <el-col :span="12" :offset="6" style="text-align: right">
+            <i class="real-time">实时</i>
+            <div class="card-content-time">
+              <div class="attachment-value">{{ total || 0 }}MB</div>
+              <div class="el-icon-s-flag">
+                占用空间</div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+  </template>
+  
+  <script>
+  import { request } from "@/api/service";
+  export default {
+    title: "数据库统计图",
+    icon: "el-icon-coin",
+    description: "数据库统计",
+    name: "database",
+    height: 14,
+    width: 8,
+    minH: 14,
+    minW: 8,
+    isResizable: true,
+    data() {
+      return {
+        total: 0,
+      };
+    },
+    methods: {
+      initGet() {
+        request({
+          url: "",
+        }).then((res) => {
+          const { data } = res;
+          // this.total = data.total;
+        });
+      },
+      // 生成一个随机整数
+      randomColor() {
+        const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
+        const ran = Math.floor(Math.random() * 4);
+        return color[ran];
+      },
+    },
+    mounted() {
+      this.initGet();
+    },
+  };
+  </script>
+  
+  <style scoped lang="scss">
+  .card-view {
+    border-radius: 10px;
+    color: #ffffff;
+    .card-content {
+      .card-content-label {
+        font-size: 0.8em;
+        color: #ffffff;
+      }
+      .card-content-value {
+        color: #ffffff;
+        margin-top: 5px;
+        font-size: 1.5em;
+        font-weight: bold;
+      }
+    }
+    .attachment-value {
+      color: #ffffff;
+      margin-top: 5px;
+      font-size: 1.5em;
+      font-weight: bold;
+      margin-right: 180px;
+    }
+    .el-icon-coin{
+      font-size: 12px;
+    }
+    .el-icon-s-flag {
+      font-size: 12px;
+      margin-right: 132px;
+    }
+  }
+  .real-time {
+    background: rgb(53, 59, 86);
+    font-size: 14px;
+    font-style: normal;
+    padding: 0 7px 0 7px;
+    border-radius: 4px;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/web/src/views/dashboard/workbench/components/member.vue b/web/src/views/dashboard/workbench/components/member.vue
new file mode 100644
index 0000000..c27b658
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/member.vue
@@ -0,0 +1,85 @@
+<template>
+    <el-card class="card-view" :style= "{backgroundColor:randomColor()}" shadow="always">
+      <div>
+        <el-row type="flex" justify="space-around" style="padding:10px">
+          <el-col :span="12">
+            <div class="card-content">
+              <div class="card-content-label">用户总数</div>
+              <div class="card-content-value">{{total || 0}}</div>
+            </div>
+          </el-col>
+          <el-col :span="6" :offset="6" style="text-align: right;">
+            <i class="el-icon-user-solid" size="48px"></i>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+  </template>
+  
+  <script>
+  import { request } from '@/api/service'
+  
+  export default {
+    title: '用户总数',
+    icon: 'el-icon-user-solid',
+    description: '总会员数',
+    name: 'summarizing',
+    height: 14,
+    width: 8,
+    minH: 14,
+    minW: 8,
+    isResizable: true,
+    data () {
+      return {
+        total: 0
+      }
+    },
+    methods: {
+      initGet () {
+        request({
+          url: ''
+        }).then(res => {
+          const { data } = res
+          // this.total = data.total
+        })
+      },
+      // 生成一个随机整数
+      randomColor () {
+        const color = [
+          '#50A8F4FF',
+          '#FD6165FF',
+          '#E679D8FF',
+          '#F9AB5BFF'
+        ]
+        const ran = Math.floor(Math.random() * 4)
+        return color[ran]
+      }
+    },
+    mounted () {
+      this.initGet()
+    }
+  }
+  </script>
+  
+  <style scoped lang="scss">
+  .card-view{
+    border-radius: 10px;
+    color: #FFFFFF;
+    .card-content{ 
+      .card-content-label{
+        font-size: 1em;
+        color: #FFFFFF;
+      }
+      .card-content-value{
+        color: #FFFFFF;
+        margin-top: 10px;
+        font-size: 1.5em;
+        font-weight: bold;
+      }
+    }
+  }
+  .el-icon-user-solid{
+     font-size: 30px; 
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/web/src/views/dashboard/workbench/components/newUsers.vue b/web/src/views/dashboard/workbench/components/newUsers.vue
new file mode 100644
index 0000000..62b00ed
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/newUsers.vue
@@ -0,0 +1,162 @@
+<template>
+     <el-card class="card-view" :style= "{backgroundColor:randomColor()}" shadow="always"  >
+      <div style="display:flex;flex: 1; flex-wrap: wrap;justify-content: space-between; margin-top: 10px;">
+        <div style="flex: 1; min-width: 180px;max-width:180px;height: 80px; display: flex;">
+            <el-col :span="4" class="lightgreen-box">
+              <div class="underline">
+              <i class="el-icon-s-promotion"></i>
+            </div>
+            </el-col>
+            <el-col :span="20" class="orange-box">
+              <div class="enroll-time">
+                  <div class="enroll-number"><h3>{{total || 0}}</h3>
+                  </div>
+                  <div class="enroll-text">今日注册
+                  </div>
+                </div>
+            </el-col>
+          </div>
+          <div style="flex: 1;min-width: 180px;max-width:180px;height: 80px; display: flex;">
+            <el-col :span="4" class="lightgreen-box">
+              <div class="underline">
+              <i class="el-icon-chat-line-square"></i>
+            </div>
+            </el-col>
+            <el-col :span="20" class="orange-box">
+              <div class="enroll-time">
+                  <div class="enroll-number"><h3>{{total || 1}}</h3>
+                  </div>
+                  <div class="enroll-text">今日登录
+                  </div>
+                </div>
+            </el-col>
+          </div>
+          <div style="flex: 1;min-width: 180px;max-width:180px;height: 80px; display: flex;">
+            <el-col :span="4" class="lightgreen-box">
+              <div class="underline">
+              <i class="el-icon-date"></i>
+            </div>
+            </el-col>
+            <el-col :span="20" class="orange-box">
+              <div class="enroll-time">
+                  <div class="enroll-number"><h3>{{total || 7}}</h3>
+                  </div>
+                  <div class="enroll-text">三日新增
+                  </div>
+                </div>
+            </el-col>
+          </div>
+          <div style="flex: 1;min-width: 180px;max-width:180px;height: 80px;display: flex;">
+            <el-col :span="4" class="lightgreen-box">
+              <div class="underline">
+              <i class="el-icon-folder-add"></i>
+            </div>
+            </el-col>
+            <el-col :span="20" class="orange-box">
+              <div class="enroll-time">
+                  <div class="enroll-number"><h3>{{total || 15}}</h3>
+                  </div>
+                  <div class="enroll-text">七日新增
+                  </div>
+                </div>
+            </el-col>
+          </div>
+          <div style="flex: 1;min-width: 180px;max-width:180px;height: 80px; display: flex;">
+            <el-col :span="4" class="lightgreen-box">
+              <div class="underline">
+              <i class="el-icon-user-solid"></i>
+            </div>
+            </el-col>
+            <el-col :span="20" class="orange-box">
+              <div class="enroll-time">
+                  <div class="enroll-number"><h3>{{total || 24}}</h3>
+                  </div>
+                  <div class="enroll-text">七日活跃
+                  </div>
+                </div>
+            </el-col>
+          </div>
+          <div style="flex: 1;min-width: 180px;max-width:180px;height: 80px; display: flex;">
+            <el-col :span="4" class="lightgreen-box">
+              <div class="underline">
+              <i class="el-icon-user"></i>
+            </div>
+            </el-col>
+            <el-col :span="20" class="orange-box">
+              <div class="enroll-time">
+                  <div class="enroll-number"><h3>{{total || 89}}</h3>
+                  </div>
+                  <div class="enroll-text">月活跃
+                  </div>
+                </div>
+            </el-col>
+          </div>  
+        </div>
+  </el-card>
+  </template>
+  
+  <script>
+  export default {
+    title: '用户新增活跃图',
+    icon: 'el-icon-user-solid',
+    description: '用户新增',
+    height: 28,
+    minH: 8,
+    width: 10,
+    minW: 5,
+    isResizable: true,
+    data () {
+      return {
+        total: 0
+      }
+    },
+    mounted () {
+        this.initGet()
+    },
+    methods: {
+        initGet () {
+      request({
+        url: ''
+      }).then(res => {
+        const { data } = res
+        // this.total = data.total
+      })
+    },
+    // 生成一个随机整数
+    randomColor () {
+      const color = [
+        '#fffff',
+      ]
+      const ran = Math.floor(Math.random() * 4)
+      return color[ran]
+    }
+  }
+}
+  </script>
+  
+  <style scoped>
+  .card-view{
+  border-radius: 10px;
+  color: rgb(37,176,138);
+}
+.lightgreen-box {
+   border-bottom: 2px solid  rgb(37,176,138);
+      height:60px;
+      margin-bottom: 10px;
+    }
+    .underline i{
+        font-size: 30px;
+      }
+    .orange-box {
+      height:60px;
+      color: black;
+      border-bottom:2px solid rgb(242,242,242);
+    }
+    .enroll-time{
+      margin-left: 10px;
+     }
+    .enroll-text{
+      color: rgb(138,138,138);
+    }
+  </style>
+  
\ No newline at end of file
diff --git a/web/src/views/dashboard/workbench/components/registeredUser.vue b/web/src/views/dashboard/workbench/components/registeredUser.vue
new file mode 100644
index 0000000..3f1da6e
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/registeredUser.vue
@@ -0,0 +1,92 @@
+<template>
+    <el-card
+      class="card-view"
+      :style="{
+        backgroundColor: randomColor(),
+      }"
+    >
+      <div id="main" style="width: 530px; height: 300px; left: -18px"></div>
+    </el-card>
+  </template>
+    
+    <script>
+  import { request } from "@/api/service";
+  export default {
+    title: "注册用户数折线图",
+    icon: "el-icon-s-data",
+    description: "用户注册",
+    name: "registeredUser",
+    height: 28,
+    width: 10,
+    minH: 10,
+    minW: 4,
+    isResizable: true,
+    name: "eCharts",
+    data() {
+      return {};
+    },
+    methods: {
+      initGet() {
+        request({
+          url: "",
+        });
+      },
+      // 生成一个随机整数
+      randomColor() {
+        const color = ["#fffff"];
+        const ran = Math.floor(Math.random() * 4);
+        return color[ran];
+      },
+      drawLine() {
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(document.getElementById("main"));
+        // 绘制图表
+        myChart.setOption({
+          title: { text: "" },
+          tooltip: {},
+          xAxis: {
+            data: ["2023-4-8", "2023-4-9", "2023-4-10", "2023-4-11", "2023-4-12"],
+            boundaryGap: false,
+            axisLabel: {
+              interval: 0, //强制显示所有刻度
+            },
+          },
+          yAxis: {},
+          legend: {
+            data: ["注册用户数"],
+          },
+          series: [
+            {
+              name: "注册用户数",
+              type: "line",
+              data: [5, 20, 36, 10, 10, 20],
+              //折线图的背景色
+              areaStyle: {
+                color: "rgb(98,206,178)",
+              },
+              //折线的颜色
+              itemStyle: {
+                color: "rgb(38,204,164)", // 设置折线图为红色
+              },
+            },
+          ],
+        });
+      },
+    },
+    mounted() {
+      this.initGet();
+      this.drawLine();
+    },
+  };
+  </script>
+    
+    <style scoped lang="scss">
+  .card-view {
+    border-radius: 10px;
+    color: #ffffff;
+  }
+  .el-card{
+    height: 100%;
+  }
+  </style>
+    
\ No newline at end of file
diff --git a/web/src/views/dashboard/workbench/components/sumTotal.vue b/web/src/views/dashboard/workbench/components/sumTotal.vue
new file mode 100644
index 0000000..8bdb321
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/sumTotal.vue
@@ -0,0 +1,109 @@
+<template>
+    <el-card
+      class="card-view"
+      :style="{ backgroundColor: randomColor() }"
+      shadow="always"
+    >
+      <div>
+        <el-row type="flex" justify="space-around">
+          <el-col :span="12">
+            <div class="card-content-label">附件总数</div>
+            <div class="card-content">
+              <div class="card-content-value">{{ total || 0 }}</div>
+              <div class="el-icon-document-copy">
+                附件总数量</div>
+            </div>
+          </el-col>
+          <el-col :span="12" :offset="6" style="text-align: right">
+            <i class="real-time">实时</i>
+            <div class="card-content-time">
+              <div class="attachment-value">{{ total || 0 }}MB</div>
+              <div class="el-icon-s-flag">
+                占用空间</div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+  </template>
+  
+  <script>
+  import { request } from "@/api/service";
+  
+  export default {
+    title: "附件总数统计图",
+    icon: "el-icon-s-order",
+    description: "附件总数量",
+    name: "sumTotal",
+    height: 14,
+    width: 8,
+    minH: 14,
+    minW: 8,
+    isResizable: true,
+    data() {
+      return {
+        total: 0,
+      };
+    },
+    methods: {
+      initGet() {
+        request({
+          url: "",
+        }).then((res) => {
+          const { data } = res;
+          // this.total = data.total;
+        });
+      },
+      // 生成一个随机整数
+      randomColor() {
+        const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
+        const ran = Math.floor(Math.random() * 4);
+        return color[ran];
+      },
+    },
+    mounted() {
+      this.initGet();
+    },
+  };
+  </script>
+  
+  <style scoped lang="scss">
+  .card-view {
+    border-radius: 10px;
+    color: #ffffff;
+    .card-content {
+      .card-content-label {
+        font-size: 0.8em;
+        color: #ffffff;
+      }
+      .card-content-value {
+        color: #ffffff;
+        margin-top: 5px;
+        font-size: 1.5em;
+        font-weight: bold;
+      }
+    }
+    .attachment-value {
+      color: #ffffff;
+      margin-top: 5px;
+      font-size: 1.5em;
+      font-weight: bold;
+      margin-right: 180px;
+    }
+    .el-icon-document-copy {
+      font-size: 12px;
+    }
+    .el-icon-s-flag {
+      font-size: 12px;
+      margin-right: 132px;
+    }
+  }
+  .real-time {
+    background: rgb(53, 59, 86);
+    font-size: 14px;
+    font-style: normal;
+    padding: 0 7px 0 7px;
+    border-radius: 4px;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/web/src/views/dashboard/workbench/components/userIogin.vue b/web/src/views/dashboard/workbench/components/userIogin.vue
new file mode 100644
index 0000000..b00fe46
--- /dev/null
+++ b/web/src/views/dashboard/workbench/components/userIogin.vue
@@ -0,0 +1,98 @@
+<template>
+    <el-card
+      class="card-view"
+      :style="{
+        backgroundColor: randomColor(),
+      }"
+    >
+      <!-- shadow="always" -->
+      <div id="myChart" style="width: 530px; height: 300px; left: -18px"></div>
+    </el-card>
+  </template>
+    
+    <script>
+  import { request } from "@/api/service";
+  export default {
+    title: "用户登录折线图",
+    icon: "el-icon-s-data",
+    description: "用户登陆",
+    name: "userIogin",
+    height: 28,
+    width: 10,
+    minH: 10,
+    minW: 4,
+    isResizable: true,
+    name: "eCharts",
+    data() {
+      return {};
+    },
+    methods: {
+      initGet() {
+        request({
+          url: "",
+        });
+      },
+      // 生成一个随机整数
+      randomColor() {
+        const color = ["#fffff"];
+        const ran = Math.floor(Math.random() * 4);
+        return color[ran];
+      },
+      drawLine() {
+        // 基于准备好的dom，初始化echarts实例
+        let myChart = this.$echarts.init(document.getElementById("myChart"));
+        // 绘制图表
+        myChart.setOption({
+          title: { text: "" },
+          tooltip: {},
+          xAxis: {
+            data: ["2023-4-8", "2023-4-9", "2023-4-10", "2023-4-11", "2023-4-12"],
+            boundaryGap: false,
+            axisLabel: {
+              interval: 0, //强制显示所有刻度
+            },
+          },
+          yAxis: {},
+          legend: {
+            data: ["用户登陆数"],
+          },
+          series: [
+            {
+              name: "用户登陆数",
+              type: "line",
+              data: [5, 20, 36, 10, 10, 20],
+              areaStyle: {},
+              areaStyle: {
+                //折线的颜色
+                color: "rgb(116,135,206)",
+              },
+              itemStyle: {
+                color: "rgb(67,89,185)", // 设置折线图为红色
+              },
+            },
+          ],
+        });
+      },
+    },
+    mounted() {
+      this.initGet();
+      this.drawLine();
+    },
+  };
+  </script>
+    
+    <style scoped lang="scss">
+  .card-view {
+    border-radius: 10px;
+    color: #ffffff;
+  }
+  .el-card{
+    height: 100%;
+  }
+  ::v-deep .el-card__body {
+    width: 470px;
+    height: 300px;
+  
+  }
+  </style>
+    
\ No newline at end of file