控制台部件更新

2023-04-16 15:09:16 +08:00 · 2023-04-16 15:09:16 +08:00 · 4fe8605c2d
parent b67d92def8
commit 4fe8605c2d
7 changed files with 256 additions and 225 deletions
--- a/web/src/views/dashboard/workbench/components/attachment.vue
+++ b/web/src/views/dashboard/workbench/components/attachment.vue
@ -9,7 +9,7 @@
          <el-col :span="12">
            <div class="card-content-label">附件统计</div>
            <div class="card-content">
-              <div class="card-content-value">{{ total || 0 }}</div>
+              <div class="card-content-value">{{ count}}</div>
              <div class="el-icon-document-copy">
                附件数量</div>
            </div>
@ -17,7 +17,7 @@
          <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="attachment-value">{{ occupy_space }}MB</div>
              <div class="el-icon-s-flag">
                附件大小</div>
            </div>
@ -42,18 +42,20 @@
    isResizable: true,
    data() {
      return {
-        total: 0,
+        count:"",
+        occupy_space:"",
      };
    },
    methods: {
-      initGet() {
-        request({
-          url: "",
-        }).then((res) => {
-          const { data } = res;
-          // this.total = data.total;
-        });
-      },
+      initGet () {
+      request({
+        url: '/api/system/homepage_statistics/'
+      }).then((res)=>{
+     this.count=res.data.sum_file.count;
+      this.occupy_space=res.data.sum_file.occupy_space;
+;
+      })
+    },
      // 生成一个随机整数
      randomColor() {
        const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
--- a/web/src/views/dashboard/workbench/components/database.vue
+++ b/web/src/views/dashboard/workbench/components/database.vue
@ -9,7 +9,7 @@
          <el-col :span="12">
            <div class="card-content-label">数据库统计</div>
            <div class="card-content">
-              <div class="card-content-value">{{ total || 0 }}</div>
+              <div class="card-content-value">{{count }}</div>
              <div class="el-icon-coin">
                数据库数量</div>
            </div>
@ -17,7 +17,7 @@
          <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="attachment-value">{{ occupy_space}}MB</div>
              <div class="el-icon-s-flag">
                占用空间</div>
            </div>
@ -41,18 +41,19 @@
    isResizable: true,
    data() {
      return {
-        total: 0,
+        count:"",
+        occupy_space:"",
      };
    },
    methods: {
-      initGet() {
-        request({
-          url: "",
-        }).then((res) => {
-          const { data } = res;
-          // this.total = data.total;
-        });
-      },
+      initGet () {
+      request({
+        url: '/api/system/homepage_statistics/'
+      }).then((res)=>{
+     this.count=res.data.sum_file.count;
+      this.occupy_space=res.data.sum_file.occupy_space;
+      })
+    },
      // 生成一个随机整数
      randomColor() {
        const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
--- a/web/src/views/dashboard/workbench/components/member.vue
+++ b/web/src/views/dashboard/workbench/components/member.vue
@ -5,7 +5,7 @@
          <el-col :span="12">
            <div class="card-content">
              <div class="card-content-label">用户总数</div>
-              <div class="card-content-value">{{total || 0}}</div>
+              <div class="card-content-value">{{sum_register}}</div>
            </div>
          </el-col>
          <el-col :span="6" :offset="6" style="text-align: right;">
@ -31,18 +31,17 @@
    isResizable: true,
    data () {
      return {
-        total: 0
+        sum_register:"",
      }
    },
    methods: {
      initGet () {
-        request({
-          url: ''
-        }).then(res => {
-          const { data } = res
-          // this.total = data.total
-        })
-      },
+      request({
+        url: '/api/system/homepage_statistics/'
+      }).then((res)=>{
+     this.sum_register=res.data.sum_register
+      })
+    },
      // 生成一个随机整数
      randomColor () {
        const color = [
--- a/web/src/views/dashboard/workbench/components/newUsers.vue
+++ b/web/src/views/dashboard/workbench/components/newUsers.vue
@ -9,7 +9,7 @@
            </el-col>
            <el-col :span="20" class="orange-box">
              <div class="enroll-time">
-                  <div class="enroll-number"><h3>{{total || 0}}</h3>
+                  <div class="enroll-number"><h3>{{ newName }}</h3>
                  </div>
                  <div class="enroll-text">今日注册
                  </div>
@ -24,7 +24,7 @@
            </el-col>
            <el-col :span="20" class="orange-box">
              <div class="enroll-time">
-                  <div class="enroll-number"><h3>{{total || 1}}</h3>
+                  <div class="enroll-number"><h3>{{today_login}}</h3>
                  </div>
                  <div class="enroll-text">今日登录
                  </div>
@ -39,7 +39,7 @@
            </el-col>
            <el-col :span="20" class="orange-box">
              <div class="enroll-time">
-                  <div class="enroll-number"><h3>{{total || 7}}</h3>
+                  <div class="enroll-number"><h3>{{Three_days_register}}</h3>
                  </div>
                  <div class="enroll-text">三日新增
                  </div>
@ -54,7 +54,7 @@
            </el-col>
            <el-col :span="20" class="orange-box">
              <div class="enroll-time">
-                  <div class="enroll-number"><h3>{{total || 15}}</h3>
+                  <div class="enroll-number"><h3>{{Seven_days_register}}</h3>
                  </div>
                  <div class="enroll-text">七日新增
                  </div>
@ -69,7 +69,7 @@
            </el-col>
            <el-col :span="20" class="orange-box">
              <div class="enroll-time">
-                  <div class="enroll-number"><h3>{{total || 24}}</h3>
+                  <div class="enroll-number"><h3>{{Seven_days_login}}</h3>
                  </div>
                  <div class="enroll-text">七日活跃
                  </div>
@ -84,7 +84,7 @@
            </el-col>
            <el-col :span="20" class="orange-box">
              <div class="enroll-time">
-                  <div class="enroll-number"><h3>{{total || 89}}</h3>
+                  <div class="enroll-number"><h3>{{month_login}}</h3>
                  </div>
                  <div class="enroll-text">月活跃
                  </div>
@ -96,6 +96,8 @@
  </template>
  
  <script>
+  import { request } from '@/api/service'
+import log from '../init'
  export default {
    title: '用户新增活跃图',
    icon: 'el-icon-user-solid',
@ -107,19 +109,29 @@
    isResizable: true,
    data () {
      return {
-        total: 0
+       newName:"",
+       today_login:"",
+       Three_days_register:"",
+       Seven_days_register:"",
+       Seven_days_login:"",
+       month_login:"",
      }
    },
    mounted () {
        this.initGet()
    },
    methods: {
-        initGet () {
+      initGet () {
      request({
        url: '/api/system/homepage_statistics/'
-      }).then(res => {
-        const { data } = res
-        // this.total = data.total
+      }).then((res)=>{
+       this.newName=res.data.today_register;
+       this. today_login=res.data.today_login;
+       this. Three_days_register=res.data.Three_days_register;
+       this. Seven_days_register=res.data.Seven_days_register;
+       this. Seven_days_login=res.data.Seven_days_login;
+       this. month_login=res.data.month_login;
+;
      })
    },
    // 生成一个随机整数
--- a/web/src/views/dashboard/workbench/components/registeredUser.vue
+++ b/web/src/views/dashboard/workbench/components/registeredUser.vue
@ -1,92 +1,99 @@
 <template>
-    <el-card
-      class="card-view"
-      :style="{
-        backgroundColor: randomColor(),
-      }"
-    >
-      <div id="main" style="width: 530px; height: 300px; left: -18px"></div>
-    </el-card>
-  </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 {};
+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() {
+    this.myChart = null;
+    return {
+      time: [],
+    };
+  },
+  methods: {
+    initGet() {
+      request({
+        url: "/api/system/homepage_statistics/",
+      }).then((res) => {
+        this.time = res.data.sum_days_register_list;
+        this.drawLine(this.time);
+      });
    },
-    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, //强制显示所有刻度
+    // 生成一个随机整数
+    randomColor() {
+      const color = ["#fffff"];
+      const ran = Math.floor(Math.random() * 4);
+      return color[ran];
+    },
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      // 绘制图表
+      this.myChart.setOption({
+        title: { text: "" },
+        tooltip: {},
+        xAxis: {
+          data: this.time.map((item) => item.time),
+          boundaryGap: false,
+          axisLabel: {
+            interval: 0, //强制显示所有刻度
+            rotate: 6,
+          },
+        },
+        yAxis: {},
+        legend: {
+          data: ["注册用户数"],
+        },
+        series: [
+          {
+            name: "注册用户数",
+            type: "line",
+            data: this.time.map((item) => item.count),
+            //折线图的背景色
+            areaStyle: {
+              color: "rgb(98,206,178)",
+            },
+            //折线的颜色
+            itemStyle: {
+              color: "rgb(38,204,164)", // 设置折线图为红色
            },
          },
-          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>
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(document.getElementById("main"));
+    this.initGet();
+    this.drawLine();
+  },
+};
+</script>
    
    <style scoped lang="scss">
-  .card-view {
-    border-radius: 10px;
-    color: #ffffff;
-  }
-  .el-card{
-    height: 100%;
-  }
-  </style>
+.card-view {
+  border-radius: 10px;
+  color: #ffffff;
+}
+.el-card {
+  height: 100%;
+}
+</style>
    
--- a/web/src/views/dashboard/workbench/components/sumTotal.vue
+++ b/web/src/views/dashboard/workbench/components/sumTotal.vue
@ -9,7 +9,7 @@
          <el-col :span="12">
            <div class="card-content-label">附件总数</div>
            <div class="card-content">
-              <div class="card-content-value">{{ total || 0 }}</div>
+              <div class="card-content-value">{{ count }}</div>
              <div class="el-icon-document-copy">
                附件总数量</div>
            </div>
@ -17,7 +17,7 @@
          <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="attachment-value">{{ occupy_space}}MB</div>
              <div class="el-icon-s-flag">
                占用空间</div>
            </div>
@ -42,18 +42,20 @@
    isResizable: true,
    data() {
      return {
-        total: 0,
+        count:"",
+        occupy_space:"",
      };
    },
    methods: {
-      initGet() {
-        request({
-          url: "",
-        }).then((res) => {
-          const { data } = res;
-          // this.total = data.total;
-        });
-      },
+      initGet () {
+      request({
+        url: '/api/system/homepage_statistics/'
+      }).then((res)=>{
+     this.count=res.data.today_file.count;
+      this.occupy_space=res.data.today_file.occupy_space;
+;
+      })
+    },
      // 生成一个随机整数
      randomColor() {
        const color = ["#50A8F4FF", "#FD6165FF", "#E679D8FF", "#F9AB5BFF"];
@ -95,7 +97,7 @@
    }
    .el-icon-s-flag {
      font-size: 12px;
-      margin-right: 132px;
+      margin-right: 130px;
    }
  }
  .real-time {
--- a/web/src/views/dashboard/workbench/components/userIogin.vue
+++ b/web/src/views/dashboard/workbench/components/userIogin.vue
@ -1,98 +1,106 @@
 <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,
+  <el-card
+    class="card-view"
+    :style="{
+      backgroundColor: randomColor(),
+    }"
+  >
+    <!-- shadow="always" -->
+    <div id="myChart" style="width: 530px; height: 300px; left: -15px"></div>
+  </el-card>
+</template>
+  
+  <script>
+import { request } from "@/api/service";
+export default {
+  title: "用户登录折线图",
+  icon: "el-icon-s-data",
+  description: "用户登陆",
+  name: "user",
+  height: 28,
    width: 10,
    minH: 10,
    minW: 4,
-    isResizable: true,
-    name: "eCharts",
-    data() {
-      return {};
+  isResizable: true,
+  name: "eCharts",
+  data() {
+    this.myChart=null
+    return {
+      time:[]
+
+    };
+  },
+  methods: {
+    initGet () {
+    request({
+      url: '/api/system/homepage_statistics/'
+    }).then((res)=>{
+      this.time=res.data.sum_days_login_list
+this.drawLine(this.time)
+    })
+  },
+    // 生成一个随机整数
+    randomColor() {
+      const color = ["#fffff"];
+      const ran = Math.floor(Math.random() * 4);
+      return color[ran];
    },
-    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, //强制显示所有刻度
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      // 绘制图表
+    this. myChart.setOption({
+        title: { text: "" },
+        tooltip: {},
+        xAxis: {
+          data: this.time.map(item=>item.time),
+          boundaryGap: false,
+          axisLabel: {
+            interval: 0, //强制显示所有刻度
+            rotate: 6, 
+          },
+        },
+        yAxis: {},
+        legend: {
+          data: ["用户登陆数"],
+        },
+        series: [
+          {
+            name: "用户登陆数",
+            type: "line",
+            data: this.time.map(item=>item.count),
+            areaStyle: {},
+            areaStyle: {
+              //折线的颜色
+              color: "rgb(116,135,206)",
+            },
+            itemStyle: {
+              color: "rgb(67,89,185)", // 设置折线图为红色
            },
          },
-          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;
+  },
+  mounted() {
+   this. myChart =this.$echarts.init(document.getElementById("myChart"));
+    this.initGet();
+    this.drawLine();
+  },
+};
+</script>
  
-  }
-  </style>
-    
+  <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>
+