完成首页统计部分，页面部分

src/api/count.js

@@ -1,19 +1,25 @@
 import {
-    postform
+    postform,get
 } from '../utils/request'
 
 const dmsPath = "http://127.0.0.1:10081/dms"
 
+const oauthPath = "http://127.0.0.1:10096/oauth"
+
 const multiSearch = dmsPath + "/content/multipleFormsOfJointInvestigation"
 
+const oauthCountUser = oauthPath + "/user/countUser"
+
+const preCountDmsId = 1652
 
-export async function countUnitUse(start, end) {
+
+export function countUnitUse(start, end) {
     let data = {
-        "columnId": 1652,
+        "columnId": preCountDmsId,
         "conditionsList": JSON.stringify([
-            ...notNullAndEmptyCheckers("precount","c_path_comment"),
-            ...notNullAndEmptyCheckers("precount","c_application"),
-            ...notNullAndEmptyCheckers("precount","c_unit"),
+            ...notNullAndEmptyCheckers("precount", "c_path_comment"),
+            ...notNullAndEmptyCheckers("precount", "c_application"),
+            ...notNullAndEmptyCheckers("precount", "c_unit"),
             ...timeCheckers(start, end)
         ]),
         "autoSelectItem": false,
@@ -43,12 +49,12 @@ export async function countUnitUse(start, end) {
     return resolveDmsMultiTableResult(postform(multiSearch, data));
 }
 
-export async function countAppUseByUnitName(start, end, unitName) {
+export function countAppUseByUnitName(start, end, unitName) {
     let data = {
-        "columnId": 1652,
+        "columnId": preCountDmsId,
         "conditionsList": JSON.stringify([
-            ...notNullAndEmptyCheckers("precount","c_path_comment"),
-            ...notNullAndEmptyCheckers("precount","c_application"),
+            ...notNullAndEmptyCheckers("precount", "c_path_comment"),
+            ...notNullAndEmptyCheckers("precount", "c_application"),
             ...timeCheckers(start, end),
             {
                 "columnId": "precount",
@@ -85,11 +91,11 @@ export async function countAppUseByUnitName(start, end, unitName) {
     return resolveDmsMultiTableResult(postform(multiSearch, data));
 }
 
-export async function countServiceUseByApp(start, end, app) {
+export function countServiceUseByApp(start, end, app) {
     let data = {
-        "columnId": 1652,
+        "columnId": preCountDmsId,
         "conditionsList": JSON.stringify([
-            ...notNullAndEmptyCheckers("precount","c_path_comment"),
+            ...notNullAndEmptyCheckers("precount", "c_path_comment"),
             ...timeCheckers(start, end),
             {
                 "columnId": "precount",
@@ -126,24 +132,154 @@ export async function countServiceUseByApp(start, end, app) {
     return resolveDmsMultiTableResult(postform(multiSearch, data));
 }
 
+export function topService(num) {
+    let data = {
+        "columnId": preCountDmsId,
+        "autoSelectItem": false,
+        "page": 1,
+        "pageSize": num,
+        "columnAlias": "precount",
+        "orderBy": "_select_list,count,desc",
+        "conditionsList": JSON.stringify([
+            ...notNullAndEmptyCheckers("precount", "c_path_comment")
+        ]),
+        "selectItem": JSON.stringify([
+            {
+                "table": "precount",
+                "column": "c_path_comment",
+                "alias": "name"
+            },
+            {
+                "table": "precount",
+                "column": "c_count",
+                "function": "sum",
+                "alias": "count"
+            }
+        ]),
+        "groupBy": JSON.stringify([
+            {
+                "table": "precount",
+                "column": "c_path_comment"
+            }
+        ])
+    }
+    return resolveDmsMultiTableResult(postform(multiSearch, data));
+}
+
+export function topUnit(num) {
+    let data = {
+        "columnId": preCountDmsId,
+        "autoSelectItem": false,
+        "page": 1,
+        "pageSize": num,
+        "columnAlias": "precount",
+        "orderBy": "_select_list,count,desc",
+        "conditionsList": JSON.stringify([
+            ...notNullAndEmptyCheckers("precount", "c_unit")
+        ]),
+        "selectItem": JSON.stringify([
+            {
+                "table": "precount",
+                "column": "c_unit",
+                "alias": "name"
+            },
+            {
+                "table": "precount",
+                "column": "c_count",
+                "function": "sum",
+                "alias": "count"
+            }
+        ]),
+        "groupBy": JSON.stringify([
+            {
+                "table": "precount",
+                "column": "c_unit"
+            }
+        ])
+    }
+    return resolveDmsMultiTableResult(postform(multiSearch, data));
+}
+
+export function totalCount(start, end) {
+    let data = {
+        "columnId": preCountDmsId,
+        "autoSelectItem": false,
+        "page": 1,
+        "pageSize": 1,
+        "columnAlias": "precount",
+        "selectItem": JSON.stringify([
+            {
+                "table": "precount",
+                "column": "c_count",
+                "function": "sum",
+                "alias": "count"
+            }
+        ]),
+        "conditionsList": JSON.stringify([
+            ...timeCheckers(start, end),
+        ]),
+    }
+
+    return resolveDmsMultiTableResult(postform(multiSearch, data));
+}
+export function totalCountGroupByTime(start, end) {
+    let data = {
+        "columnId": preCountDmsId,
+        "autoSelectItem": false,
+        "page": 1,
+        "pageSize": 10000,
+        "columnAlias": "precount",
+        "selectItem": JSON.stringify([
+            {
+                "table": "precount",
+                "column": "c_count",
+                "function": "sum",
+                "alias": "count"
+            }, {
+                "table": "precount",
+                "column": "c_date",
+                "alias":"time"
+            }
+        ]),
+        "groupBy": JSON.stringify([
+            {
+                "table": "precount",
+                "column": "c_date"
+            }
+        ]),
+        "conditionsList": JSON.stringify([
+            ...timeCheckers(start, end),
+        ]),
+    }
+
+    return resolveDmsMultiTableResult(postform(multiSearch, data));
+}
+export function countUserData(){
+        return resolveoauthResult(get(oauthCountUser))
+}
 function timeCheckers(start, end) {
-    return [
-        {
+    let output = []
+    if (start != null) {
+        output.push({
             "columnId": "precount",
             "columnName": "c_date",
             "condition": ">=",
             "value": start.toLocaleString('zh-CN')
 
-        },
-        {
-            "columnId": "precount",
-            "columnName": "c_date",
-            "condition": "<",
-            "value": end.toLocaleString('zh-CN')
-        }
-    ]
+        })
+    }
+    if (end != null) {
+        output.push(
+            {
+                "columnId": "precount",
+                "columnName": "c_date",
+                "condition": "<",
+                "value": end.toLocaleString('zh-CN')
+            })
+    }
+    return output
 }
-function notNullAndEmptyCheckers(targetTable,target) {
+function notNullAndEmptyCheckers(targetTable, target) {
     return [{
         "columnId": targetTable,
         "columnName": target,
@@ -156,7 +292,6 @@ function notNullAndEmptyCheckers(targetTable,target) {
         "value": ""
     }]
 }
-
 async function resolveDmsMultiTableResult(result) {
     result = await result;
     if (result.code == 200) {
@@ -166,4 +301,12 @@ async function resolveDmsMultiTableResult(result) {
     } else {
         return null;
     }
+}
+async function resolveoauthResult(result) {
+    result = await result;
+    if (result.code == 200) {
+        return result.content
+    } else {
+        return null;
+    }
 }

src/views/HomePage.vue

@@ -22,8 +22,8 @@
           <div class="call-count-container">
             <div class="line"></div>
             <div>
-              <span class="text1">当日调用量</span>
-              <span class="count">{{ todayCall }}</span>
+              <span class="text1">昨日调用量</span>
+              <span class="count">{{ lastDayCall }}</span>
               <span class="text2">次</span>
             </div>
             <div class="line"></div>
@@ -34,17 +34,17 @@
     <div class="darkblue-background">
       <div class="row">
         <div>
-          <div class="strong-data blue ">{{ serveNum }}个</div>
-          <div class="font middle">服务总数</div>
-        </div>
-        <div>
-          <div class="strong-data blue ">{{ userNum }}个</div>
-          <div class="font middle">授权用户数</div>
+          <div class="strong-data blue ">{{ unitNum }}个</div>
+          <div class="font middle">授权委办数</div>
         </div>
         <div>
           <div class="strong-data blue ">{{ appNum }}个</div>
           <div class="font middle">授权应用数</div>
         </div>
+        <div>
+          <div class="strong-data blue ">{{ userNum }}个</div>
+          <div class="font middle">授权用户数</div>
+        </div>
       </div>
       <div class="second-title ">
         服务调用趋势(近30天)
@@ -65,20 +65,20 @@
           </div>
           <div class="grid-2x2">
             <div class="lighter-container middle-container">
-              <div class="strong-data  blue">100</div>
-              <div class="title-sub ">text</div>
+              <div class="strong-data  blue">{{ weekCall }}</div>
+              <div class="title-sub ">近一周总调用</div>
             </div>
             <div class="lighter-container middle-container">
-              <div class="strong-data  blue">200</div>
-              <div class="title-sub ">text</div>
+              <div class="strong-data  blue">{{ monthCall }}</div>
+              <div class="title-sub ">近一月总调用</div>
             </div>
             <div class="lighter-container middle-container">
-              <div class="strong-data  blue">300</div>
-              <div class="title-sub ">text</div>
+              <div class="strong-data  blue">{{ seasonCall }}</div>
+              <div class="title-sub ">近三月总调用</div>
             </div>
             <div class="lighter-container middle-container">
-              <div class="strong-data  blue">400</div>
-              <div class="title-sub ">text</div>
+              <div class="strong-data  blue">{{ yearCall }}</div>
+              <div class="title-sub ">近一年总调用</div>
             </div>
           </div>
         </div>
@@ -166,15 +166,15 @@
 
       <div class="row" style="margin-top: 90px;">
         <div>
-          <div class="strong-data blue ">{{ serveNum }}个</div>
+          <div class="strong-data blue ">365个</div>
           <div class="font middle">地址</div>
         </div>
         <div>
-          <div class="strong-data blue ">{{ userNum }}个</div>
+          <div class="strong-data blue ">366个</div>
           <div class="font middle">应用场景</div>
         </div>
         <div>
-          <div class="strong-data blue ">{{ appNum }}个</div>
+          <div class="strong-data blue ">367个</div>
           <div class="font middle">服务人数</div>
         </div>
       </div>
@@ -232,78 +232,72 @@
       <div class="title-sub ">聚焦政务场景痛点，打造从数据治理到应用落地的全链路创新解决方案</div>
 
       <div class="row" style="margin-top: 36px;">
-        <div class="lightblue-container">
+        <div class="lightblue-container six-router">
           <div class="third-title">
             <el-icon color="white" size="45px">
-              <DataBoard />
+              <Coin />
             </el-icon>
             时空数据管理
           </div>
           <p class="font lightgrey">
-            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
-            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持
+            覆盖数据质量检查、加工、管理、服务发布全流程，支持矢量/栅格数据标准化处理，实现多格式转换与瓦片定制，保障数据规范可用。
           </p>
         </div>
-        <div class="lightblue-container">
+        <div class="lightblue-container six-router">
           <div class="third-title">
             <el-icon color="white" size="45px">
-              <Coin />
+              <Orange />
             </el-icon>
-            时空数据管理
+            二三维一体化引擎
           </div>
           <p class="font lightgrey">
-            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
-            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持
+            嵌入式SDK支撑地图交互、空间分析、数据可视化，涵盖热力图/聚合图/迁徙图等多维呈现，实现精准定位与场景切换。
           </p>
         </div>
-        <div class="lightblue-container">
+        <div class="lightblue-container six-router">
           <div class="third-title">
             <el-icon color="white" size="45px">
-              <Coin />
+              <Guide />
             </el-icon>
-            时空数据管理
+            时空门户
           </div>
           <p class="font lightgrey">
-            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
-            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持
+            整合平台访问统计、功能演示、服务导航，提供视频教程与业务场景展示，快速上手平台核心能力，支撑政务场景应用。
           </p>
         </div>
       </div>
       <div class="row">
-        <div class="lightblue-container">
+        <div class="lightblue-container six-router">
           <div class="third-title">
             <el-icon color="white" size="45px">
-              <Coin />
+              <Tickets />
             </el-icon>
-            时空数据管理
+            微功能
           </div>
           <p class="font lightgrey">
-            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
-            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持
+            支持拓扑计算、空间量算、几何运算与数据转换，批量处理海量时空数据，适配规划、管理多场景计算需求。
           </p>
         </div>
-        <div class="lightblue-container">
+        <div class="lightblue-container six-router">
           <div class="third-title">
             <el-icon color="white" size="45px">
-              <Coin />
+              <Open />
             </el-icon>
-            时空数据管理
+            应用管理
           </div>
           <p class="font lightgrey">
-            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
-            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持
+            统一接入各类时空业务应用，管控访问权限与应用信息，实现“接入-访问-管理”全流程闭环，支撑区级特色应用建设。
           </p>
         </div>
-        <div class="lightblue-container">
+        <div class="lightblue-container six-router">
           <div class="third-title">
             <el-icon color="white" size="45px">
-              <Coin />
+              <Help />
             </el-icon>
-            时空数据管理
+            运行管理
           </div>
           <p class="font lightgrey">
-            空间数据查询是从空间数据集中检索特定信息的操作。它可在关系型数据库如MySQL和SQL
-            Server中进行，也能在NoSQL数据库如MongoDB里实现。通过特定函数和方法，能快速找到符合条件的数据，为地理信息等领域提供重要支持
+            实时监控平台运行数据，负责数据全生命周期管理与权限管控，建立四级管理架构，保障系统合规安全运行。
           </p>
         </div>
       </div>
@@ -361,72 +355,72 @@
             构建“检查-加工-发布”全流程数据治理体系，实现矢量/栅格数据标准化处理、多格式转换与瓦片定制，解决区级时空数据格式不统一、质量参差不齐的通电，为全场景应用构牢数据基础
           </p>
           <div class="row" style="margin-top: auto;">
-            <div class="font" style="margin-left: auto;">
+            <div class="font" style="margin-left: auto;" @click="goto('/sksjgl')">
               了解更多→
             </div>
           </div>
         </div>
         <div class="block-page-router">
           <div class="title">
-            时空数据治理标准化实践
+            二三维一体化引擎创新应用
           </div>
           <p class="font grey">
-            构建“检查-加工-发布”全流程数据治理体系，实现矢量/栅格数据标准化处理、多格式转换与瓦片定制，解决区级时空数据格式不统一、质量参差不齐的通电，为全场景应用构牢数据基础
+            自研嵌入式 GIS SDK，融合二维地图交互、三维场景渲染能力，创新落地热力图 / 聚合图 / 迁徙图等多维可视化形式，实现区级地理信息 “全景式” 呈现与精准定位。
           </p>
           <div class="row" style="margin-top: auto;">
-            <div class="font" style="margin-left: auto;">
+            <div class="font" style="margin-left: auto;"  @click="goto('/skmh/scene')">
               了解更多→
             </div>
           </div>
         </div>
         <div class="block-page-router">
           <div class="title">
-            时空数据治理标准化实践
+            政务时空门户一体化探索
           </div>
           <p class="font grey">
-            构建“检查-加工-发布”全流程数据治理体系，实现矢量/栅格数据标准化处理、多格式转换与瓦片定制，解决区级时空数据格式不统一、质量参差不齐的通电，为全场景应用构牢数据基础
+            整合平台访问统计、功能演示、视频教程等能力，打造适配青浦区政务场景的时空门户总入口，打通 “一网通办”“一网统管” 数据链路，降低政务人员使用门槛。
           </p>
           <div class="row" style="margin-top: auto;">
-            <div class="font" style="margin-left: auto;">
+            <div class="font" style="margin-left: auto;"  @click="goto('/skmh')">
               了解更多→
             </div>
           </div>
         </div>
         <div class="block-page-router">
           <div class="title">
-            时空数据治理标准化实践
+            空间计算微功能场景化落地
           </div>
           <p class="font grey">
-            构建“检查-加工-发布”全流程数据治理体系，实现矢量/栅格数据标准化处理、多格式转换与瓦片定制，解决区级时空数据格式不统一、质量参差不齐的通电，为全场景应用构牢数据基础
+            聚焦区级规划、管理等实际需求，落地拓扑计算、空间量算、几何运算等轻量化微功能，支持海量时空数据批量处理，让专业空间分析能力下沉至街镇级应用场景。
           </p>
           <div class="row" style="margin-top: auto;">
-            <div class="font" style="margin-left: auto;">
+            <div class="font" style="margin-left: auto;"  @click="goto('/wgn')">
               了解更多→
             </div>
           </div>
         </div>
         <div class="block-page-router">
           <div class="title">
-            时空数据治理标准化实践
+            政务应用标准化接入管理
           </div>
           <p class="font grey">
-            构建“检查-加工-发布”全流程数据治理体系，实现矢量/栅格数据标准化处理、多格式转换与瓦片定制，解决区级时空数据格式不统一、质量参差不齐的通电，为全场景应用构牢数据基础
+            建立区级时空业务应用 “接入 - 授权 - 管控” 全闭环体系，统一规范应用接入流程与权限管理，适配青浦区特色政务应用的快速接入与安全运行。
           </p>
           <div class="row" style="margin-top: auto;">
-            <div class="font" style="margin-left: auto;">
+            <div class="font" style="margin-left: auto;"  @click="goto('/yygl')">
               了解更多→
             </div>
           </div>
         </div>
         <div class="block-page-router">
           <div class="title">
-            时空数据治理标准化实践
+            四级架构运行管理体系构建
           </div>
           <p class="font grey">
-            构建“检查-加工-发布”全流程数据治理体系，实现矢量/栅格数据标准化处理、多格式转换与瓦片定制，解决区级时空数据格式不统一、质量参差不齐的通电，为全场景应用构牢数据基础
+            创新构建 “区 — 街镇 — 综合网格 — 村居” 四级运行管理架构，实现平台数据全生命周期管控、运行状态实时监控，保障区级 “一张图” 系统合规、安全、稳定运行。
           </p>
           <div class="row" style="margin-top: auto;">
-            <div class="font" style="margin-left: auto;">
+            <div class="font" style="margin-left: auto;"  @click="goto('/yxgl')">
               了解更多→
             </div>
           </div>
@@ -459,7 +453,7 @@
 </template>
 
 <script>
-import { countAppUseByUnitName, countServiceUseByApp, countUnitUse } from "@/api/count";
+import { countAppUseByUnitName, countServiceUseByApp, countUnitUse, countUserData, topService, topUnit, totalCount, totalCountGroupByTime } from "@/api/count";
 import * as echarts from "echarts";
 
 let chart1 = null;
@@ -469,13 +463,16 @@ export default {
   name: "Home",
   data() {
     return {
-      todayCall: "857,605",
-      totalCall: [],
-
-      serveNum: 456,
-      userNum: 17,
-      appNum: 43,
-
+      lastDayCall: "0",
+      totalCall: ["0", "0", "0", ",", "0", "0", "0"],
+
+      serveNum: 0,
+      userNum: 0,
+      appNum: 0,
+      weekCall: 0,
+      monthCall: 0,
+      seasonCall: 0,
+      yearCall: 0,
       currentTab: "data-governance", // 初始选中项
       tabs: [
         { key: "data-governance", icon: "", title: "数据治理" },
@@ -483,55 +480,8 @@ export default {
         { key: "comprehensive-decision", icon: "", title: "综合决策" }
       ],
       resourceTop: [
-        {
-          name: "常规色地图",
-          value: 12311
-        }, {
-          name: "常规色地图",
-          value: 12311
-        }, {
-          name: "常规色地图",
-          value: 12311
-        }, {
-          name: "常规色地图",
-          value: 12311
-        }, {
-          name: "常规色地图",
-          value: 12311
-        }, {
-          name: "常规色地图",
-          value: 12311
-        }, {
-          name: "常规色地图",
-          value: 12311
-        }, {
-          name: "常规色地图",
-          value: 12311
-        }, {
-          name: "常规色地图",
-          value: 12311
-        }, {
-          name: "常规色地图",
-          value: 12311
-        },
       ],
       userTop: [
-        {
-          name: "区数据局",
-          value: 6014480
-        }, {
-          name: "区数据局",
-          value: 6014480
-        }, {
-          name: "区数据局",
-          value: 6014480
-        }, {
-          name: "区数据局",
-          value: 6014480
-        }, {
-          name: "区数据局",
-          value: 6014480
-        },
       ],
       useCase: {
         dataProcass: [{
@@ -609,19 +559,26 @@ export default {
 
     };
   },
+  async beforeMount() {
+    await this.pullTotalCount()
+    await this.pullLastDayCount()
+  },
   mounted() {
-    this.handleTotalCallNumber(667507060);
     this.initChart1();
     this.initchartMultiLevelUse();
     const nowDate = new Date();
     nowDate.setHours(0, 0, 0, 0);
     this.chartMluTimeRange = [new Date(new Date(nowDate).setDate(nowDate.getDate() - 7)), new Date(nowDate)];
     this.chartMluFocusRoot()
+    this.pullTopUnit()
+    this.pullTopService()
+    this.pullMultiTimeRangeCall()
+    this.pullUserCount()
   },
   methods: {
-    gotoDetail() {
+    goto(src) {
       this.$router.push({
-        path: "/sksjgl",
+        path: src,
       });
     },
     // 处理调用总数数字
@@ -638,7 +595,29 @@ export default {
         }
       }
     },
-    initChart1() {
+    async initChart1() {
+
+      const nowDate = new Date();
+      nowDate.setHours(0, 0, 0, 0);
+      let end = new Date(nowDate)
+      let start = new Date(nowDate.setDate(nowDate.getDate() - 30))
+      let data = await totalCountGroupByTime(start, end)
+      let dataMap = {}
+      for (let i = 0; i < data.length; i++) {
+        const e = data[i];
+        dataMap[e.time] = e.count
+      }
+
+      let times = []
+      let values = []
+
+      for (let i = 0; i < 30; i++) {
+        let date = new Date(start);
+        date.setDate(start.getDate() + i)
+        times.push(this.formatDateMMDD(date))
+        values.push(dataMap[date.getTime()] ?? 0)
+      }
+
       // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById("echart1"));
 
@@ -647,32 +626,15 @@ export default {
           trigger: "axis", // 坐标轴触发提示
           axisPointer: { type: "shadow" },
         },
-        legend: {
-          data: ["tokyo", "london"],
-          textStyle: { color: "#fff" }, // 图例文字颜色
-        },
         xAxis: {
           type: "category",
-          data: [
-            "Jan",
-            "Feb",
-            "Mar",
-            "Apr",
-            "May",
-            "Jun",
-            "Jul",
-            "Aug",
-            "Sep",
-            "Oct",
-            "Nov",
-          ],
+          data: times,
           axisLine: { lineStyle: { color: "#fff" } }, // 坐标轴颜色
           axisTick: { show: false }, // 隐藏刻度
           splitLine: { show: false }, // 隐藏分割线
         },
         yAxis: {
           type: "value",
-          max: 30,
           axisLine: { lineStyle: { color: "#fff" } },
           splitLine: {
             lineStyle: {
@@ -683,23 +645,14 @@ export default {
         },
         series: [
           {
-            name: "tokyo",
+            name: "调用总数",
             type: "line",
-            data: [7, 7, 15, 19, 21, 22, 25, 26, 23, 19, 12], // 模拟数据
+            data: values, // 模拟数据
             lineStyle: { color: "#42a5f5" }, // 蓝色线条
             itemStyle: { color: "#42a5f5" }, // 节点颜色
             symbol: "circle", // 节点形状
             symbolSize: 6, // 节点大小
           },
-          {
-            name: "london",
-            type: "line",
-            data: [3, 3, 6, 12, 15, 17, 18, 17, 14, 10, 6], // 模拟数据
-            lineStyle: { color: "#4caf50" }, // 绿色线条
-            itemStyle: { color: "#4caf50" },
-            symbol: "circle",
-            symbolSize: 6,
-          },
         ],
       };
       // 绘制图表
@@ -780,27 +733,27 @@ export default {
 
       chartMultiLevelUse = myChart
     },
-    chartMluFocus(level, farther) {
+    async chartMluFocus(level, farther) {
       if (level == null) {
         level = this.chartMluLevel
       }
       switch (level) {
         case "unit":
         default: {
-          this.chartMluFocusRoot();
+          await this.chartMluFocusRoot();
           this.chartMluUpdateTitle("所有委办")
           break;
         }
         case "app": {
           let unit = farther ?? this.chartMluUnitName ?? ""
-          this.chartMluFocusApp(unit);
-          this.chartMluUpdateTitle("委办："+unit)
+          await this.chartMluFocusApp(unit);
+          this.chartMluUpdateTitle("委办：" + unit)
           break;
         }
         case "service": {
           let app = farther ?? this.chartMluAppName ?? ""
-          this.chartMluFocusService(app);
-          this.chartMluUpdateTitle("应用："+app)
+          await this.chartMluFocusService(app);
+          this.chartMluUpdateTitle("应用：" + app)
           break;
         }
       }
@@ -870,6 +823,56 @@ export default {
         values.push(e.count);
       }
       this.chartMluUpdateData(names, values)
+    },
+    async pullTopUnit() {
+      let data = await topUnit(5)
+      for (let i = 0; i < data.length; i++) {
+        const e = data[i];
+        e.value = this.numberFormatter(e.count);
+      }
+      this.userTop = data
+    },
+    async pullTopService() {
+      let data = await topService(10)
+      for (let i = 0; i < data.length; i++) {
+        const e = data[i];
+
+        e.value = this.numberFormatter(e.count);
+      }
+      this.resourceTop = data
+    },
+    async pullTotalCount() {
+      this.handleTotalCallNumber((await totalCount())[0].count)
+    },
+    async pullLastDayCount() {
+      const nowDate = new Date();
+      nowDate.setHours(0, 0, 0, 0);
+      let end = new Date(nowDate)
+      let start = new Date(nowDate.setDate(nowDate.getDate() - 1))
+      let data = (await totalCount(start, end))[0]
+      this.lastDayCall = data == null ? 0 : data.count
+    },
+    async pullMultiTimeRangeCall() {
+      this.weekCall = await this.pullTotalCountByDays(7)
+      this.monthCall = await this.pullTotalCountByDays(30)
+      this.seasonCall = await this.pullTotalCountByDays(91)
+      this.yearCall = await this.pullTotalCountByDays(365)
+    },
+    async pullTotalCountByDays(days) {
+      const nowDate = new Date();
+      nowDate.setHours(0, 0, 0, 0);
+      let end = new Date(nowDate)
+      let start = new Date(nowDate.setDate(nowDate.getDate() - days))
+      let data = (await totalCount(start, end))[0]
+      return data == null ? 0 : data.count
+    },
+    async pullUserCount() {
+      let data = await countUserData();
+      this.appNum = data.application;
+      this.unitNum = data.unit;
+      this.userNum = data.username;
+
+
     },
     chartMluUpdateData(names, values) {
       chartMultiLevelUse.setOption({
@@ -905,11 +908,7 @@ export default {
 
               axisLine: { lineStyle: { color: "#fff" } },
               axisLabel: {
-                formatter: function (value) {
-                  // 格式化显示
-                  if (value >= 1000) return value / 1000 + 'k';
-                  return value;
-                }
+                formatter: this.numberFormatter
               },
             }]
           }
@@ -933,7 +932,29 @@ export default {
           text: newTitle,
         }
       })
+    },
+    numberFormatter(num, decimals = 1) {
+      if (num >= 1000000000000) {
+
+        return parseFloat((num / 1000000000000).toFixed(decimals)).toString() + '亿万';
+      }
+      if (num >= 100000000) {
+        return parseFloat((num / 100000000).toFixed(decimals)).toString() + '亿';
+      }
+      if (num >= 10000) {
+        return parseFloat((num / 10000).toFixed(decimals)).toString() + '万';
+      }
+      return num.toString();
+    },
+    formatDateMMDD(date) {
+      // 月份从0开始，所以要 +1
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const day = String(date.getDate()).padStart(2, '0');
+
+      return `${month}/${day}`;
     }
+
+
   }
 }
 </script>
@@ -1185,6 +1206,16 @@ export default {
   }
 }
 
+.six-router {
+  width: 30%;
+  height: 300px;
+  font-size: 28px;
+
+  .third-title {
+    font-size: 32px;
+  }
+}
+
 .circle-number {
   display: block;
   background-color: #eeeeee1d;