添加访问量,下载量的数据统计

components.d.ts

@@ -9,6 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
@@ -19,7 +20,9 @@ declare module 'vue' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ElUpload: typeof import('element-plus/es')['ElUpload']
+    ElWatermark: typeof import('element-plus/es')['ElWatermark']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     VanButton: typeof import('vant/es')['Button']

src/views/AppPC.vue

@@ -92,6 +92,34 @@
             </template>
           </el-upload>
         </div>
+        <!-- 访问 -->
+        <div class="access">
+          <el-row :gutter="24">
+            <el-col :span="12">
+              <el-card class="card" shadow="never" style="margin:10px 0 5px 5px">
+                <template #header>
+                  <span>访问量</span>
+                </template>
+                <div class="trafficData">12,584</div>
+                <div class="trafficDataTag">同昨日增长
+                  <el-tag type="success">+5%</el-tag>
+                </div>
+              </el-card>
+            </el-col>
+            <el-col :span="12">
+              <el-card class="card" shadow="never" style="margin: 10px 5px 5px 0">
+                <template #header>
+                  <span>访问量</span>
+                </template>
+                <div class="trafficData">584</div>
+                <div class="trafficDataTag">
+                  同昨日减少
+                  <el-tag type="danger">-15%</el-tag>
+                </div>
+              </el-card>
+            </el-col>
+          </el-row>
+        </div>
       </el-col>
     </el-row>
   </div>
@@ -382,7 +410,7 @@ img {
 
 /* 左侧Div边框 */
 .Left {
-  margin: 5px 5px 0 5px;
+  margin: 5px 5px 0 15px;
   font-size: smaller;
 }
 
@@ -401,4 +429,21 @@ img {
 .LeftFileListData {
   height: 100%;
 }
+
+.card {
+  border-radius: 10px;
+}
+
+.trafficData {
+  font-size: 40px;
+  font-weight: bold;
+  line-height: 1.5;
+}
+
+.trafficDataTag {
+  display: flex;
+  font-size: 15px;
+  font-weight: bold;
+  line-height: 1.3;
+}
 </style>

vite.config.ts

@@ -16,5 +16,18 @@ export default defineConfig({
             cert: readFileSync("keys/agent2-cert.pem"),
         }
     },
-    plugins: [AutoImport({resolvers: [ElementPlusResolver()],}), Components({resolvers: [ElementPlusResolver(), VantResolver()],}), vue()],
+    plugins: [
+        AutoImport({
+            resolvers: [
+                ElementPlusResolver()
+            ],
+        }),
+        Components({
+            resolvers: [
+                ElementPlusResolver(),
+                VantResolver(),
+            ],
+        }),
+        vue()
+    ],
 })