|
|
@@ -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;
|
|
|
}
|
wdq