|
|
@@ -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>
|
|
|
@@ -71,15 +76,44 @@
|
|
|
<!-- 服务调用详情弹窗 -->
|
|
|
<el-dialog
|
|
|
v-model="showServerDetailReport"
|
|
|
- width="60%"
|
|
|
+ width="80%"
|
|
|
:close-on-click-modal="false"
|
|
|
:close-on-press-escape="false"
|
|
|
:show-close="true"
|
|
|
title="服务调用详情"
|
|
|
>
|
|
|
- <div style="width: 100%; position: relative; padding-bottom: 20px">
|
|
|
+ <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"
|
|
|
@@ -93,6 +127,19 @@
|
|
|
>
|
|
|
<el-option v-for="item in value" :key="item" :label="item" :value="item" />
|
|
|
</el-select>
|
|
|
+ <!-- 再添加一个时间搜索范围，字段是date, 格式是YYYY-MM-DD -->
|
|
|
+ <el-date-picker
|
|
|
+ style="margin-right: 10px"
|
|
|
+ v-model="selectedModel['date']"
|
|
|
+ type="daterange"
|
|
|
+ clearable
|
|
|
+ unlink-panels
|
|
|
+ @change="changeSelectModel"
|
|
|
+ :disabled-date="disabledDate"
|
|
|
+ range-separator="到"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ />
|
|
|
<!-- 重置按钮 -->
|
|
|
<el-button type="primary" @click="resetSelectModel">重置</el-button>
|
|
|
</div>
|
|
|
@@ -108,16 +155,17 @@
|
|
|
<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 class="table_pagination">
|
|
|
+ <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="serverData.length"
|
|
|
+ :total="tableDataTotal"
|
|
|
@size-change="handleSizeChange"
|
|
|
@current-change="handleCurrentChange"
|
|
|
/>
|
|
|
@@ -222,6 +270,10 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ // 导出Loading状态
|
|
|
+ exportLoading: false,
|
|
|
+ // 弹窗加载状态
|
|
|
+ dialogLoading: false,
|
|
|
// 获取数据状态
|
|
|
getDataStatus: false,
|
|
|
// 比较的时间范围(默认60天到30天前，主要跟nowTimes有关系)
|
|
|
@@ -243,9 +295,10 @@ export default {
|
|
|
},
|
|
|
selectKeyName: {
|
|
|
application: "应用名称",
|
|
|
- path_comment: "接口注释",
|
|
|
- unit: "单位",
|
|
|
- type: "数据类型",
|
|
|
+ path_comment: "服务名称",
|
|
|
+ unit: "委办单位",
|
|
|
+ count: "调用次数",
|
|
|
+ type: "服务类型",
|
|
|
},
|
|
|
// 筛选条件下拉框选中的值
|
|
|
selectedModel: {
|
|
|
@@ -253,11 +306,19 @@ export default {
|
|
|
path_comment: "",
|
|
|
unit: "",
|
|
|
type: "",
|
|
|
+ count: "",
|
|
|
+ date: "",
|
|
|
},
|
|
|
+ // 调用次数范围的最小值和最大值
|
|
|
+ countMin: 0,
|
|
|
+ countMax: 0,
|
|
|
+ tableColumns: ["application", "path_comment", "unit", "count", "type", "date"],
|
|
|
// 分页大小
|
|
|
- pageSize: 100,
|
|
|
+ pageSize: 50,
|
|
|
// 当前页码
|
|
|
currentPage: 1,
|
|
|
+ // 表格数据总条数
|
|
|
+ tableDataTotal: 0,
|
|
|
TopCardDatas: [
|
|
|
{
|
|
|
name: "委办总数",
|
|
|
@@ -280,7 +341,7 @@ export default {
|
|
|
value: "0",
|
|
|
growth: "--",
|
|
|
iconColor: "#9333ea",
|
|
|
- iconName: "TrendCharts",
|
|
|
+ iconName: "CollectionTag",
|
|
|
upStatus: 0,
|
|
|
},
|
|
|
{
|
|
|
@@ -288,7 +349,7 @@ export default {
|
|
|
value: "0",
|
|
|
growth: "--",
|
|
|
iconColor: "#ca8a04",
|
|
|
- iconName: "TrendCharts",
|
|
|
+ iconName: "Paperclip",
|
|
|
upStatus: 0,
|
|
|
},
|
|
|
],
|
|
|
@@ -330,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 ||
|
|
|
@@ -341,25 +411,64 @@ export default {
|
|
|
(!this.selectedModel.type || item.type === this.selectedModel.type)
|
|
|
);
|
|
|
});
|
|
|
+ // 添加时间范围搜索逻辑
|
|
|
+ if (this.selectedModel.date) {
|
|
|
+ searchDatas = searchDatas.filter((item) => {
|
|
|
+ return (
|
|
|
+ new Date(item.date).getTime() >=
|
|
|
+ new Date(
|
|
|
+ this.$moment(new Date(this.selectedModel.date[0])).format(
|
|
|
+ "YYYY-MM-DD 00:00:00"
|
|
|
+ )
|
|
|
+ ).getTime() &&
|
|
|
+ new Date(item.date).getTime() <=
|
|
|
+ new Date(
|
|
|
+ this.$moment(new Date(this.selectedModel.date[1])).format(
|
|
|
+ "YYYY-MM-DD 23:59:59"
|
|
|
+ )
|
|
|
+ ).getTime()
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加调用次数范围搜索逻辑
|
|
|
+ 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");
|
|
|
+ });
|
|
|
+
|
|
|
+ // 分页展示数据
|
|
|
this.showServerData = searchDatas.slice(
|
|
|
(this.currentPage - 1) * this.pageSize,
|
|
|
this.currentPage * this.pageSize
|
|
|
);
|
|
|
+
|
|
|
// 遍历筛选条件下拉框选项，更新每个选项的数组
|
|
|
for (let key in this.selectOptions) {
|
|
|
this.selectOptions[key] = [
|
|
|
- ...new Set(this.serverData.map((item) => (item[key] ? item[key] : "未知"))),
|
|
|
+ ...new Set(searchDatas.map((item) => (item[key] ? item[key] : "未知"))),
|
|
|
];
|
|
|
}
|
|
|
// 更新分页组件数据
|
|
|
- this.total = searchDatas.length;
|
|
|
+ this.tableDataTotal = searchDatas.length;
|
|
|
this.showServerDetailReport = true;
|
|
|
+ this.dialogLoading = false;
|
|
|
},
|
|
|
handleCurrentChange() {
|
|
|
this.handleSizeChange();
|
|
|
},
|
|
|
// 筛选条件下拉框选中值改变时，触发的事件
|
|
|
changeSelectModel() {
|
|
|
+ console.log(this.selectedModel);
|
|
|
// 重置当前页码为第一页
|
|
|
this.currentPage = 1;
|
|
|
// 处理分页数据
|
|
|
@@ -370,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({
|
|
|
@@ -385,7 +496,18 @@ export default {
|
|
|
.then((res) => {
|
|
|
if (res && res.code == 200) {
|
|
|
if (res.content && res.content.length > 0) {
|
|
|
+ res.content.forEach((item) => {
|
|
|
+ this.tableColumns.forEach((key) => {
|
|
|
+ if (item[key] == undefined) {
|
|
|
+ item[key] = "未知";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
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({
|
|
|
@@ -394,6 +516,15 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
+ })
|
|
|
+ .catch((e) => {
|
|
|
+ this.$message({
|
|
|
+ message: e,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.dialogLoading = false;
|
|
|
});
|
|
|
},
|
|
|
initChart() {
|
|
|
@@ -413,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(
|
|
|
@@ -452,6 +592,9 @@ export default {
|
|
|
this.dataToOption("服务类别分布", "pie", serviceCountType, {
|
|
|
pieKey: { value: "count", name: "type" },
|
|
|
pieData: [],
|
|
|
+ padAngle: 0,
|
|
|
+ borderRadius: 0,
|
|
|
+ label: {},
|
|
|
});
|
|
|
|
|
|
// 服务调用TOP10
|
|
|
@@ -551,7 +694,7 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- console.log("getAllYxglDatas", res);
|
|
|
+ // console.log("getAllYxglDatas", res);
|
|
|
}
|
|
|
this.getDataStatus = false;
|
|
|
})
|
|
|
@@ -584,7 +727,6 @@ export default {
|
|
|
});
|
|
|
// 转换为数组
|
|
|
for (let key in statusMap) {
|
|
|
- console.log(key, statusMap[key]);
|
|
|
if (statusMap[key] && key) {
|
|
|
tableDatas.push({
|
|
|
name: this.$getDmsTypes("appstatus", key),
|
|
|
@@ -608,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;
|
|
|
+ });
|
|
|
},
|
|
|
/**
|
|
|
* 数据转换为图表选项
|
|
|
@@ -1042,10 +1196,19 @@ export default {
|
|
|
.demo-date-picker .block:last-child {
|
|
|
border-bottom: none;
|
|
|
}
|
|
|
- .table_pagination {
|
|
|
- position: absolute;
|
|
|
- bottom: 20px;
|
|
|
- right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+// 弹窗加载状态图标
|
|
|
+.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