src/api/count.js

@@ -0,0 +1,312 @@
+import {
+    postform,get
+} from '../utils/request'
+
+const dmsPath = systemConfig.dmsDataProxy 
+
+const oauthPath = systemConfig.oauthServiceUrl
+
+const multiSearch = dmsPath + "/content/multipleFormsOfJointInvestigation"
+
+const oauthCountUser = oauthPath + "/user/countUser"
+
+const preCountDmsId = 1652
+
+
+export function countUnitUse(start, end) {
+    let data = {
+        "columnId": preCountDmsId,
+        "conditionsList": JSON.stringify([
+            ...notNullAndEmptyCheckers("precount", "c_path_comment"),
+            ...notNullAndEmptyCheckers("precount", "c_application"),
+            ...notNullAndEmptyCheckers("precount", "c_unit"),
+            ...timeCheckers(start, end)
+        ]),
+        "autoSelectItem": false,
+        "page": 1,
+        "pageSize": 2000,
+        "columnAlias": "precount",
+        "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 countAppUseByUnitName(start, end, unitName) {
+    let data = {
+        "columnId": preCountDmsId,
+        "conditionsList": JSON.stringify([
+            ...notNullAndEmptyCheckers("precount", "c_path_comment"),
+            ...notNullAndEmptyCheckers("precount", "c_application"),
+            ...timeCheckers(start, end),
+            {
+                "columnId": "precount",
+                "columnName": "c_unit",
+                "condition": "=",
+                "value": unitName
+            },
+        ]),
+        "autoSelectItem": false,
+        "page": 1,
+        "pageSize": 2000,
+        "columnAlias": "precount",
+        "selectItem": JSON.stringify([
+            {
+                "table": "precount",
+                "column": "c_application",
+                "alias": "name"
+            },
+            {
+                "table": "precount",
+                "column": "c_count",
+                "function": "sum",
+                "alias": "count"
+            }
+        ]),
+        "groupBy": JSON.stringify([
+            {
+                "table": "precount",
+                "column": "c_application"
+            }
+        ])
+    }
+
+    return resolveDmsMultiTableResult(postform(multiSearch, data));
+}
+
+export function countServiceUseByApp(start, end, app) {
+    let data = {
+        "columnId": preCountDmsId,
+        "conditionsList": JSON.stringify([
+            ...notNullAndEmptyCheckers("precount", "c_path_comment"),
+            ...timeCheckers(start, end),
+            {
+                "columnId": "precount",
+                "columnName": "c_application",
+                "condition": "=",
+                "value": app
+            },
+        ]),
+        "autoSelectItem": false,
+        "page": 1,
+        "pageSize": 2000,
+        "columnAlias": "precount",
+        "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 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) {
+    let output = []
+    if (start != null) {
+        output.push({
+            "columnId": "precount",
+            "columnName": "c_date",
+            "condition": ">=",
+            "value": start.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) {
+    return [{
+        "columnId": targetTable,
+        "columnName": target,
+        "condition": "is not null"
+    },
+    {
+        "columnId": targetTable,
+        "columnName": target,
+        "condition": "!=",
+        "value": ""
+    }]
+}
+async function resolveDmsMultiTableResult(result) {
+    result = await result;
+    if (result.code == 200) {
+        return result.content.data
+    } else if (result.code == 202) {
+        return [];
+    } 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,32 +65,43 @@
           </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>
         <div class="lighter-container" style="flex: 3;">
+          <div class="between-row">
+            <div class="third-title">
+              <el-icon color="#0071e3" size="30px">
+                <Histogram />
+              </el-icon>
+              <div>委办调用情况</div>
 
-          <div class="third-title ">
-            <el-icon color="#0071e3" size="30px">
-              <Histogram />
-            </el-icon>
-            <div>委办调用情况(近7天)</div>
+            </div>
+            <span>
+              <el-button v-show="this.chartMluLevel != 'unit'" text size="large" circle @click="chartMluBack()">
+                <el-icon color="#0071e3" size="30px">
+                  <Back />
+                </el-icon>
+              </el-button>
+              <el-date-picker v-model="chartMluTimeRange" type="daterange" range-separator="到" start-placeholder="开始日期"
+                end-placeholder="结束日期" @change="chartMluFocus()" />
+            </span>
           </div>
-          <div id="echart2"></div>
+          <div id="echartMultiLevelUse"></div>
 
         </div>
       </div>
@@ -155,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>
@@ -221,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>
@@ -350,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>
@@ -448,18 +453,26 @@
 </template>
 
 <script>
+import { countAppUseByUnitName, countServiceUseByApp, countUnitUse, countUserData, topService, topUnit, totalCount, totalCountGroupByTime } from "@/api/count";
 import * as echarts from "echarts";
+
+let chart1 = null;
+let chartMultiLevelUse = null;
+
 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: "数据治理" },
@@ -467,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: [{
@@ -586,19 +552,33 @@ export default {
         ],
       },
       activeUseCase: "dataProcass",
-      chart1: null,
-      chart2: null
+      chartMluLevel: "unit",
+      chartMluUnitName: null,
+      chartMluAppName: null,
+      chartMluTimeRange: null,
+
     };
   },
+  async beforeMount() {
+    await this.pullTotalCount()
+    await this.pullLastDayCount()
+  },
   mounted() {
-    this.handleTotalCallNumber(667507060);
     this.initChart1();
-    this.initChart2();
+    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,
       });
     },
     // 处理调用总数数字
@@ -615,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"));
 
@@ -624,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: {
@@ -660,38 +645,46 @@ 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,
-          },
         ],
       };
       // 绘制图表
       myChart.setOption(option);
-      this.chart1 = myChart
+      chart1 = myChart
     },
-    initChart2() {
-      var myChart = echarts.init(document.getElementById("echart2"));
+    initchartMultiLevelUse() {
+      var myChart = echarts.init(document.getElementById("echartMultiLevelUse"));
       let option = {
         tooltip: {
           trigger: 'axis',
-          axisPointer: {
-            type: 'shadow'
+          show: true,
+          formatter: '{b}: {c}',
+          backgroundColor: 'rgba(50, 50, 50, 0.7)',
+          borderColor: '#333',
+          textStyle: {
+            color: '#fff'
           }
         },
+        title: {
+          text: '所有委办',
+          left: 'center',
+          top: 20,
+          textStyle: {
+            color: '#fff',
+            fontSize: 18,
+            fontWeight: 'bold'
+          },
+        },
+        axisPointer: {
+          type: 'shadow'
+        },
         grid: {
           left: '3%',
           right: '4%',
@@ -701,7 +694,7 @@ export default {
         xAxis: [
           {
             type: 'value',
-            axisLine: { lineStyle: { color: "#fff" } },
+            axisLine: { lineStyle: { color: "#fff" } }
           }
         ],
         yAxis: [
@@ -709,29 +702,16 @@ export default {
             type: 'category',
             axisLine: { lineStyle: { color: "#fff" } },
             inverse: true,
-            data: [
-              "temperature", "humidity", "score", "age", "price",
-              "quantity", "speed", "distance", "weight", "height",
-              "population", "rating", "level", "voltage", "current",
-              "pressure", "frequency", "duration", "count", "percentage",
-              "altitude", "depth", "width", "length", "area",
-              "volume", "density", "intensity", "efficiency", "accuracy"
-            ],
+            data: [""]
           }
         ],
         series: [
           {
+            cursorSize: 20,
             name: 'Direct',
             type: 'bar',
             barWidth: '60%',
-            data: [
-              25.5, 65, 88.3, 28, 299.99,
-              150, 120.7, 350, 75.2, 180.5,
-              125, 4.7, 3, 220, 15.2,
-              101.3, 50, 3600, 42, 85.5,
-              1500, 300, 45, 120, 2500,
-              600, 1.2, 150, 92.8, 99.1
-            ]
+            data: [0]
           }
         ],
         dataZoom: [
@@ -748,10 +728,235 @@ export default {
       };
 
       myChart.setOption(option);
-      this.chart2 = myChart
+
+      myChart.on("click", this.chartMluClick)
+
+      chartMultiLevelUse = myChart
+    },
+    async chartMluFocus(level, farther) {
+      if (level == null) {
+        level = this.chartMluLevel
+      }
+      switch (level) {
+        case "unit":
+        default: {
+          await this.chartMluFocusRoot();
+          this.chartMluUpdateTitle("所有委办")
+          break;
+        }
+        case "app": {
+          let unit = farther ?? this.chartMluUnitName ?? ""
+          await this.chartMluFocusApp(unit);
+          this.chartMluUpdateTitle("委办：" + unit)
+          break;
+        }
+        case "service": {
+          let app = farther ?? this.chartMluAppName ?? ""
+          await this.chartMluFocusService(app);
+          this.chartMluUpdateTitle("应用：" + app)
+          break;
+        }
+      }
+
+    },
+    chartMluClick(event) {
+      switch (this.chartMluLevel) {
+        case "unit": {
+          this.chartMluLevel = "app";
+          this.chartMluUnitName = event.name
+          break;
+        }
+        case "app": {
+          this.chartMluLevel = "service";
+          this.chartMluAppName = event.name
+          break;
+        }
+        case "service":
+        default: {
+          // do nothing
+        }
+      }
+      this.chartMluFocus();
+    },
+    chartMluBack(level) {
+      //自动回退
+      if (level == null) {
+        switch (this.chartMluLevel) {
+          default:
+          case "unit": level = "unit"; break;
+          case "app": level = "unit"; break;
+          case "service": level = "app"; break;
+        }
+      }
+      this.chartMluLevel = level;
+      this.chartMluFocus()
+    },
+    async chartMluFocusRoot() {
+      const data = await countUnitUse(...this.chartMluTimeRange);
+      const names = [];
+      const values = [];
+      for (let index = 0; index < data.length; index++) {
+        const e = data[index];
+        names.push(e.name);
+        values.push(e.count);
+      }
+      this.chartMluUpdateData(names, values)
+    },
+    async chartMluFocusApp(father) {
+      const data = await countAppUseByUnitName(...this.chartMluTimeRange, father);
+      const names = [];
+      const values = [];
+      for (let index = 0; index < data.length; index++) {
+        const e = data[index];
+        names.push(e.name);
+        values.push(e.count);
+      }
+      this.chartMluUpdateData(names, values)
+    },
+    async chartMluFocusService(father) {
+      const data = await countServiceUseByApp(...this.chartMluTimeRange, father);
+      const names = [];
+      const values = [];
+      for (let index = 0; index < data.length; index++) {
+        const e = data[index];
+        names.push(e.name);
+        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({
+        yAxis: [
+          {
+            data: names,
+          }
+        ],
+        series: [
+          {
+            data: values
+          }
+        ]
+      })
+      this.chartMluCheckChangeToLog(values)
+    },
+    chartMluCheckChangeToLog(values) {
+      let toLog = false;
+      values.sort((a, b) => a - b);
+      let min = values[0];
+      let max = values[values.length - 1]
+      if (max / min > 3000) {
+        toLog = true
+      }
+
+      if (toLog) {
+        chartMultiLevelUse.setOption(
+          {
+            xAxis: [{
+              type: 'log',
+              logBase: 10,
+              min: 1,
+
+              axisLine: { lineStyle: { color: "#fff" } },
+              axisLabel: {
+                formatter: this.numberFormatter
+              },
+            }]
+          }
+        )
+      } else {
+        chartMultiLevelUse.setOption(
+          {
+            xAxis: [{
+              type: 'value',
+              min: 0,
+
+              axisLine: { lineStyle: { color: "#fff" } },
+            }]
+          }
+        )
+      }
+    },
+    chartMluUpdateTitle(newTitle) {
+      chartMultiLevelUse.setOption({
+        title: {
+          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>
 
 <style lang="less" scoped>
@@ -848,7 +1053,8 @@ export default {
 }
 
 .row,
-.warp-row {
+.warp-row,
+.between-row {
   display: flex !important;
   justify-content: space-around;
   padding: 0;
@@ -859,6 +1065,10 @@ export default {
   flex-wrap: wrap;
 }
 
+.between-row {
+  justify-content: space-between;
+}
+
 .col {
   display: flex !important;
   justify-content: space-around;
@@ -996,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;
@@ -1033,7 +1253,7 @@ export default {
   height: 450px;
 }
 
-#echart2 {
+#echartMultiLevelUse {
   width: 100%;
   height: 450px;
 }