|
|
@@ -38,6 +38,7 @@
|
|
|
:title="item.name"
|
|
|
:value="item.value"
|
|
|
:growth="item.growth"
|
|
|
+ :iconName="item.iconName"
|
|
|
:iconColor="item.iconColor"
|
|
|
:upStatus="item.upStatus"
|
|
|
/>
|
|
|
@@ -46,13 +47,17 @@
|
|
|
<div class="bigCard">
|
|
|
<div class="bigCard_title">服务类信息统计</div>
|
|
|
<div class="tools">
|
|
|
- <el-button @click="downFileAllServiceDatas">
|
|
|
+ <el-button @click="downFileAllServiceDatas" :disabled="exportLoading">
|
|
|
<!-- 这个要查询查询时间范围内的所有服务数据 -->
|
|
|
- <el-icon><Upload /></el-icon> 导出数据
|
|
|
+ <el-icon v-if="!exportLoading"><Upload /></el-icon>
|
|
|
+ <el-icon v-else><Loading class="loading-icon" /></el-icon>
|
|
|
+ 导出数据
|
|
|
</el-button>
|
|
|
- <el-button type="primary" @click="showDetailReport">
|
|
|
+ <el-button :disabled="dialogLoading" type="primary" @click="showDetailReport">
|
|
|
<!-- 这个直接弹窗展示所有的服务调用数据，而不是下载 -->
|
|
|
- <el-icon><TrendCharts /></el-icon>
|
|
|
+ <el-icon v-if="!dialogLoading"><TrendCharts /></el-icon>
|
|
|
+ <!-- 让图标旋转 -->
|
|
|
+ <el-icon v-else><Loading class="loading-icon" /></el-icon>
|
|
|
详细报告
|
|
|
</el-button>
|
|
|
</div>
|
|
|
@@ -77,9 +82,38 @@
|
|
|
:show-close="true"
|
|
|
title="服务调用详情"
|
|
|
>
|
|
|
- <div style="width: 100%; position: relative; padding-bottom: 30px">
|
|
|
+ <div
|
|
|
+ style="width: 100%; position: relative; padding-bottom: 30px"
|
|
|
+ v-loading="dialogLoading"
|
|
|
+ >
|
|
|
<!-- 过滤条件，全字段（除了调用时间）下拉框选择 -->
|
|
|
- <div style="width: 100%; margin-bottom: 10px">
|
|
|
+ <div style="width: 100%; margin-bottom: 10px; z-index: 1000">
|
|
|
+ <!-- 再添加一个调用次数筛选 -->
|
|
|
+ <div style="display: flex; align-items: center; margin-bottom: 10px">
|
|
|
+ <span style="margin-right: 10px">调用次数:</span>
|
|
|
+ <el-slider
|
|
|
+ v-model="selectedModel['count']"
|
|
|
+ :min="countMin"
|
|
|
+ :max="countMax"
|
|
|
+ range
|
|
|
+ @change="changeSelectModel"
|
|
|
+ style="width: calc(60%); margin: 0 20px"
|
|
|
+ />
|
|
|
+ 最小值：
|
|
|
+ <el-input-number
|
|
|
+ v-model="selectedModel.count[0]"
|
|
|
+ :min="countMin"
|
|
|
+ :max="selectedModel.count[1]"
|
|
|
+ @change="changeSelectModel"
|
|
|
+ />
|
|
|
+ 最大值：
|
|
|
+ <el-input-number
|
|
|
+ v-model="selectedModel.count[1]"
|
|
|
+ :min="selectedModel.count[0]"
|
|
|
+ :max="countMax"
|
|
|
+ @change="changeSelectModel"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
<!-- 支持筛选条件清空 -->
|
|
|
<el-select
|
|
|
style="width: 200px; margin-right: 10px"
|
|
|
@@ -101,10 +135,10 @@
|
|
|
clearable
|
|
|
unlink-panels
|
|
|
@change="changeSelectModel"
|
|
|
+ :disabled-date="disabledDate"
|
|
|
range-separator="到"
|
|
|
start-placeholder="开始时间"
|
|
|
end-placeholder="结束时间"
|
|
|
- :shortcuts="shortcutsFun"
|
|
|
/>
|
|
|
<!-- 重置按钮 -->
|
|
|
<el-button type="primary" @click="resetSelectModel">重置</el-button>
|
|
|
@@ -121,13 +155,14 @@
|
|
|
<el-table-column prop="path_comment" label="服务名称" />
|
|
|
<el-table-column prop="unit" label="委办单位" width="200" />
|
|
|
<el-table-column prop="type" label="服务类别" width="120" />
|
|
|
+ <el-table-column prop="count" label="调用次数" width="100" />
|
|
|
<el-table-column prop="date" label="调用时间" width="120" />
|
|
|
</el-table>
|
|
|
<div style="float: right; padding-top: 10px">
|
|
|
<el-pagination
|
|
|
v-model:current-page="currentPage"
|
|
|
v-model:page-size="pageSize"
|
|
|
- :page-sizes="[100, 200, 300, 400]"
|
|
|
+ :page-sizes="[50, 100, 200, 500]"
|
|
|
background
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
:total="tableDataTotal"
|
|
|
@@ -235,6 +270,10 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ // 导出Loading状态
|
|
|
+ exportLoading: false,
|
|
|
+ // 弹窗加载状态
|
|
|
+ dialogLoading: false,
|
|
|
// 获取数据状态
|
|
|
getDataStatus: false,
|
|
|
// 比较的时间范围(默认60天到30天前，主要跟nowTimes有关系)
|
|
|
@@ -258,6 +297,7 @@ export default {
|
|
|
application: "应用名称",
|
|
|
path_comment: "服务名称",
|
|
|
unit: "委办单位",
|
|
|
+ count: "调用次数",
|
|
|
type: "服务类型",
|
|
|
},
|
|
|
// 筛选条件下拉框选中的值
|
|
|
@@ -266,11 +306,15 @@ export default {
|
|
|
path_comment: "",
|
|
|
unit: "",
|
|
|
type: "",
|
|
|
+ count: "",
|
|
|
date: "",
|
|
|
},
|
|
|
- tableColumns: ["application", "path_comment", "unit", "type", "date"],
|
|
|
+ // 调用次数范围的最小值和最大值
|
|
|
+ countMin: 0,
|
|
|
+ countMax: 0,
|
|
|
+ tableColumns: ["application", "path_comment", "unit", "count", "type", "date"],
|
|
|
// 分页大小
|
|
|
- pageSize: 100,
|
|
|
+ pageSize: 50,
|
|
|
// 当前页码
|
|
|
currentPage: 1,
|
|
|
// 表格数据总条数
|
|
|
@@ -297,7 +341,7 @@ export default {
|
|
|
value: "-",
|
|
|
growth: "--",
|
|
|
iconColor: "#9333ea",
|
|
|
- iconName: "TrendCharts",
|
|
|
+ iconName: "CollectionTag",
|
|
|
upStatus: 0,
|
|
|
},
|
|
|
{
|
|
|
@@ -305,7 +349,7 @@ export default {
|
|
|
value: "-",
|
|
|
growth: "--",
|
|
|
iconColor: "#ca8a04",
|
|
|
- iconName: "TrendCharts",
|
|
|
+ iconName: "Paperclip",
|
|
|
upStatus: 0,
|
|
|
},
|
|
|
],
|
|
|
@@ -347,7 +391,16 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 禁用日期选择器中未来的日期(不能选择nowTimes以外的时间)
|
|
|
+ disabledDate(time) {
|
|
|
+ return (
|
|
|
+ time.getTime() > this.nowTimes[1].getTime() ||
|
|
|
+ time.getTime() < this.nowTimes[0].getTime() - 24 * 60 * 60 * 1000
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 分页大小改变时，更新展示数据
|
|
|
handleSizeChange() {
|
|
|
+ this.dialogLoading = true;
|
|
|
let searchDatas = this.serverData.filter((item) => {
|
|
|
return (
|
|
|
(!this.selectedModel.application ||
|
|
|
@@ -378,6 +431,16 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
+ // 添加调用次数范围搜索逻辑
|
|
|
+ if (this.selectedModel.count) {
|
|
|
+ searchDatas = searchDatas.filter((item) => {
|
|
|
+ return (
|
|
|
+ item.count >= this.selectedModel.count[0] &&
|
|
|
+ item.count <= this.selectedModel.count[1]
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
// 格式化日期为YYYY-MM-DD格式
|
|
|
searchDatas.forEach((item) => {
|
|
|
item.date = this.$moment(new Date(item.date)).format("YYYY-MM-DD");
|
|
|
@@ -398,12 +461,14 @@ export default {
|
|
|
// 更新分页组件数据
|
|
|
this.tableDataTotal = searchDatas.length;
|
|
|
this.showServerDetailReport = true;
|
|
|
+ this.dialogLoading = false;
|
|
|
},
|
|
|
handleCurrentChange() {
|
|
|
this.handleSizeChange();
|
|
|
},
|
|
|
// 筛选条件下拉框选中值改变时，触发的事件
|
|
|
changeSelectModel() {
|
|
|
+ console.log(this.selectedModel);
|
|
|
// 重置当前页码为第一页
|
|
|
this.currentPage = 1;
|
|
|
// 处理分页数据
|
|
|
@@ -414,10 +479,12 @@ export default {
|
|
|
for (let key in this.selectedModel) {
|
|
|
this.selectedModel[key] = "";
|
|
|
}
|
|
|
+ this.selectedModel.count = [this.countMin, this.countMax];
|
|
|
this.handleSizeChange();
|
|
|
},
|
|
|
// 打开弹窗，渲染table列表，展示查询时间的所有数据详情
|
|
|
showDetailReport() {
|
|
|
+ this.dialogLoading = true;
|
|
|
// 要先请求，然后时间排序一下。
|
|
|
appCenter
|
|
|
.getServiceDataByDate({
|
|
|
@@ -437,6 +504,10 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
this.serverData = res.content;
|
|
|
+ // 得到count的最大值和最小值
|
|
|
+ this.countMax = Math.max(...this.serverData.map((item) => item.count));
|
|
|
+ this.countMin = Math.min(...this.serverData.map((item) => item.count));
|
|
|
+ this.resetSelectModel();
|
|
|
this.handleSizeChange();
|
|
|
} else {
|
|
|
this.$message({
|
|
|
@@ -445,6 +516,15 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ this.$message({
|
|
|
+ message: e,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.dialogLoading = false;
|
|
|
});
|
|
|
},
|
|
|
initChart() {
|
|
|
@@ -464,7 +544,16 @@ export default {
|
|
|
res.content.TopCardDatas &&
|
|
|
typeof res.content.TopCardDatas === "object"
|
|
|
) {
|
|
|
- this.TopCardDatas = res.content.TopCardDatas;
|
|
|
+ // 不能覆盖iconName
|
|
|
+ this.TopCardDatas.forEach((cardItem) => {
|
|
|
+ res.content.TopCardDatas.forEach((cardData) => {
|
|
|
+ if (cardItem.name == cardData.name) {
|
|
|
+ cardItem.value = cardData.value;
|
|
|
+ cardItem.growth = cardData.growth;
|
|
|
+ cardItem.upStatus = cardData.upStatus;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
this.dataToOption(
|
|
|
@@ -503,6 +592,9 @@ export default {
|
|
|
this.dataToOption("服务类别分布", "pie", serviceCountType, {
|
|
|
pieKey: { value: "count", name: "type" },
|
|
|
pieData: [],
|
|
|
+ padAngle: 0,
|
|
|
+ borderRadius: 0,
|
|
|
+ label: {},
|
|
|
});
|
|
|
|
|
|
// 服务调用TOP10
|
|
|
@@ -658,27 +750,39 @@ export default {
|
|
|
},
|
|
|
// 导出所选时间范围内的所有服务数据
|
|
|
downFileAllServiceDatas() {
|
|
|
- appCenter.downFileAllServiceDatas({ nowTimes: this.nowTimes }).then((res) => {
|
|
|
- const blob = res; // 响应体是 Blob 类型
|
|
|
- if (!blob) {
|
|
|
- that.$message.error("下载失败：文件流为空");
|
|
|
- reject("文件流为空");
|
|
|
- return;
|
|
|
- }
|
|
|
- if (!(blob instanceof Blob) || blob.size === 0) {
|
|
|
- this.$message.error("文件流解析失败，无法生成下载链接");
|
|
|
- return;
|
|
|
- }
|
|
|
- const url = window.URL.createObjectURL(blob); // 将 Blob 转为临时 URL
|
|
|
- const link = document.createElement("a");
|
|
|
- link.href = url;
|
|
|
- link.download = "服务信息统计.xlsx"; // 设置下载文件名
|
|
|
- link.style.display = "none";
|
|
|
- document.body.appendChild(link);
|
|
|
- link.click(); // 触发点击下载
|
|
|
- document.body.removeChild(link);
|
|
|
- window.URL.revokeObjectURL(url); // 销毁临时 URL，避免内存泄漏
|
|
|
- });
|
|
|
+ this.exportLoading = true;
|
|
|
+ appCenter
|
|
|
+ .downFileAllServiceDatas({ nowTimes: this.nowTimes })
|
|
|
+ .then((res) => {
|
|
|
+ const blob = res; // 响应体是 Blob 类型
|
|
|
+ if (!blob) {
|
|
|
+ that.$message.error("下载失败：文件流为空");
|
|
|
+ reject("文件流为空");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!(blob instanceof Blob) || blob.size === 0) {
|
|
|
+ this.$message.error("文件流解析失败，无法生成下载链接");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const url = window.URL.createObjectURL(blob); // 将 Blob 转为临时 URL
|
|
|
+ const link = document.createElement("a");
|
|
|
+ link.href = url;
|
|
|
+ link.download = "服务信息统计.xlsx"; // 设置下载文件名
|
|
|
+ link.style.display = "none";
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click(); // 触发点击下载
|
|
|
+ document.body.removeChild(link);
|
|
|
+ window.URL.revokeObjectURL(url); // 销毁临时 URL，避免内存泄漏
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ this.$message({
|
|
|
+ message: "导出数据失败",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.exportLoading = false;
|
|
|
+ });
|
|
|
},
|
|
|
/**
|
|
|
* 数据转换为图表选项
|
|
|
@@ -1092,8 +1196,19 @@ export default {
|
|
|
.demo-date-picker .block:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
- .table_pagination {
|
|
|
- float: right !important;
|
|
|
+}
|
|
|
+
|
|
|
+// 弹窗加载状态图标
|
|
|
+.loading-icon {
|
|
|
+ // 图标顺时针旋转动画
|
|
|
+ animation: loading-icon-spin 2s linear infinite;
|
|
|
+}
|
|
|
+@keyframes loading-icon-spin {
|
|
|
+ 0% {
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+ 100% {
|
|
|
+ transform: rotate(360deg);
|
|
|
}
|
|
|
}
|
|
|
</style>
|
DESKTOP-6LTVLN7\Liumouren