|
|
@@ -5,7 +5,7 @@
|
|
|
<div>
|
|
|
对比时间：
|
|
|
<el-date-picker
|
|
|
- v-model="compareTimes"
|
|
|
+ v-model="lastTimes"
|
|
|
type="daterange"
|
|
|
unlink-panels
|
|
|
range-separator="到"
|
|
|
@@ -17,7 +17,7 @@
|
|
|
/>
|
|
|
搜索时间：
|
|
|
<el-date-picker
|
|
|
- v-model="dateValue"
|
|
|
+ v-model="nowTimes"
|
|
|
type="daterange"
|
|
|
unlink-panels
|
|
|
range-separator="到"
|
|
|
@@ -31,36 +31,14 @@
|
|
|
<!-- 服务调用card -->
|
|
|
<div class="flex">
|
|
|
<card
|
|
|
+ v-for="item in TopCardDatas"
|
|
|
+ :key="item.name"
|
|
|
class="card flex"
|
|
|
- :title="'委办总数'"
|
|
|
- :value="8"
|
|
|
- :growth="'较上个月增长了12%'"
|
|
|
- iconColor="#2563db"
|
|
|
- :upStatus="1"
|
|
|
- />
|
|
|
- <card
|
|
|
- class="card flex"
|
|
|
- :title="'系统总数'"
|
|
|
- :value="100"
|
|
|
- :growth="'较上个月下降了12%'"
|
|
|
- iconColor="#16a34a"
|
|
|
- :upStatus="-1"
|
|
|
- />
|
|
|
- <card
|
|
|
- class="card flex"
|
|
|
- :title="'服务总数'"
|
|
|
- :value="1000"
|
|
|
- :growth="'较上个月增长了12%'"
|
|
|
- iconColor="#9333ea"
|
|
|
- :upStatus="1"
|
|
|
- />
|
|
|
- <card
|
|
|
- class="card flex"
|
|
|
- :title="'服务调用总数'"
|
|
|
- :value="10"
|
|
|
- :growth="'与上月持平'"
|
|
|
- iconColor="#ca8a04"
|
|
|
- :upStatus="0"
|
|
|
+ :title="item.name"
|
|
|
+ :value="item.value"
|
|
|
+ :growth="item.growth"
|
|
|
+ :iconColor="item.iconColor"
|
|
|
+ :upStatus="item.upStatus"
|
|
|
/>
|
|
|
</div>
|
|
|
<!-- 服务类信息统计 -->
|
|
|
@@ -77,10 +55,7 @@
|
|
|
</div>
|
|
|
<div class="flex">
|
|
|
<div style="width: 48%; height: 400px">
|
|
|
- <EchartsDome
|
|
|
- :chartOption="chartOptions['服务调用趋势（近30天）']"
|
|
|
- title="服务调用趋势（近30天）"
|
|
|
- />
|
|
|
+ <EchartsDome :chartOption="chartOptions['服务调用趋势']" title="服务调用趋势" />
|
|
|
</div>
|
|
|
<div style="width: 48%; height: 400px">
|
|
|
<EchartsDome title="服务类别分布" :chartOption="chartOptions['服务类别分布']" />
|
|
|
@@ -99,7 +74,7 @@
|
|
|
</div>
|
|
|
<div style="width: 68%; height: 400px">
|
|
|
<EchartsDome
|
|
|
- :chartOption="chartOptions['服务调用趋势（近30天）']"
|
|
|
+ :chartOption="chartOptions['委办活跃度趋势']"
|
|
|
title="委办活跃度趋势"
|
|
|
/>
|
|
|
</div>
|
|
|
@@ -114,7 +89,7 @@
|
|
|
<div class="flex">
|
|
|
<div style="width: 58%; height: 400px">
|
|
|
<EchartsDome
|
|
|
- :chartOption="chartOptions['用户部门分布']"
|
|
|
+ :chartOption="chartOptions['热点应用TOP10排名']"
|
|
|
title="热点应用TOP10排名"
|
|
|
/>
|
|
|
</div>
|
|
|
@@ -143,7 +118,7 @@
|
|
|
<card
|
|
|
class="card2 flex"
|
|
|
:title="'服务机构总数'"
|
|
|
- :value="8"
|
|
|
+ value="8"
|
|
|
:growth="'较上个月增长了12%'"
|
|
|
iconColor="#2563db"
|
|
|
:upStatus="1"
|
|
|
@@ -151,7 +126,7 @@
|
|
|
<card
|
|
|
class="card2 flex"
|
|
|
:title="'服务总数'"
|
|
|
- :value="100"
|
|
|
+ value="100"
|
|
|
:growth="'较上个月下降了12%'"
|
|
|
iconColor="#16a34a"
|
|
|
:upStatus="-1"
|
|
|
@@ -159,17 +134,14 @@
|
|
|
<card
|
|
|
class="card2 flex"
|
|
|
:title="'服务调用总次数'"
|
|
|
- :value="1000"
|
|
|
+ value="1000"
|
|
|
:growth="'较上个月增长了12%'"
|
|
|
iconColor="#9333ea"
|
|
|
:upStatus="1"
|
|
|
/>
|
|
|
</div>
|
|
|
<div style="width: 68%; height: 420px">
|
|
|
- <EchartsDome
|
|
|
- :chartOption="chartOptions['服务调用趋势（近30天）']"
|
|
|
- title="服务调用趋势（近30天）"
|
|
|
- />
|
|
|
+ <EchartsDome :chartOption="chartOptions['服务调用趋势']" title="服务调用趋势" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -180,7 +152,6 @@
|
|
|
import card from "@/components/yxgl/card.vue";
|
|
|
import EchartsDome from "@/components/yxgl/EchartsDome.vue";
|
|
|
import Table from "@/components/yxgl/table.vue";
|
|
|
-import { totalCountGroupByTime, serviceInfo } from "@/api/count";
|
|
|
import appCenter from "@/api/appCenter";
|
|
|
export default {
|
|
|
name: "",
|
|
|
@@ -191,31 +162,67 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- // 比较的时间范围(默认60天到30天前，主要跟dateValue有关系)
|
|
|
- compareTimes: [],
|
|
|
+ // 比较的时间范围(默认60天到30天前，主要跟nowTimes有关系)
|
|
|
+ lastTimes: [],
|
|
|
// 当前选中的时间范围
|
|
|
- dateValue: [],
|
|
|
+ nowTimes: [],
|
|
|
+ TopCardDatas: [
|
|
|
+ {
|
|
|
+ name: "委办总数",
|
|
|
+ value: "-",
|
|
|
+ growth: "--",
|
|
|
+ iconColor: "#2563db",
|
|
|
+ iconName: "OfficeBuilding",
|
|
|
+ upStatus: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "系统总数",
|
|
|
+ value: "-",
|
|
|
+ growth: "--",
|
|
|
+ iconColor: "#16a34a",
|
|
|
+ iconName: "WalletFilled",
|
|
|
+ upStatus: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "服务总数",
|
|
|
+ value: "-",
|
|
|
+ growth: "--",
|
|
|
+ iconColor: "#9333ea",
|
|
|
+ iconName: "TrendCharts",
|
|
|
+ upStatus: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "服务调用总数",
|
|
|
+ value: "-",
|
|
|
+ growth: "--",
|
|
|
+ iconColor: "#ca8a04",
|
|
|
+ iconName: "TrendCharts",
|
|
|
+ upStatus: 0,
|
|
|
+ },
|
|
|
+ ],
|
|
|
shortcutsFun: this.shortcuts(),
|
|
|
chartOptions: {},
|
|
|
tableDatas: [],
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
- dateValue: {
|
|
|
+ nowTimes: {
|
|
|
handler(newVal, oldVal) {
|
|
|
if (newVal !== oldVal && newVal.length > 0) {
|
|
|
// 计算出比较的时间范围
|
|
|
- this.compareTimes = [
|
|
|
+ this.lastTimes = [
|
|
|
this.$moment(
|
|
|
new Date(
|
|
|
new Date(newVal[0]).setTime(
|
|
|
new Date(newVal[0]).getTime() - (newVal[1] - newVal[0])
|
|
|
)
|
|
|
)
|
|
|
- ).format("YYYY-MM-DD"),
|
|
|
- this.$moment(new Date(newVal[0])).format("YYYY-MM-DD"),
|
|
|
+ ).format("YYYY-MM-DD 00:00:00"),
|
|
|
+ this.$moment(new Date(newVal[0])).format("YYYY-MM-DD 00:00:00"),
|
|
|
];
|
|
|
this.initChart();
|
|
|
+ // 头部的服务调用总数等信息
|
|
|
+ this.initUserInfo();
|
|
|
}
|
|
|
},
|
|
|
deep: true,
|
|
|
@@ -224,113 +231,136 @@ export default {
|
|
|
},
|
|
|
mounted() {
|
|
|
this.$nextTick(() => {
|
|
|
- this.dateValue = [
|
|
|
+ this.nowTimes = [
|
|
|
new Date(new Date().setTime(new Date() - 3600 * 1000 * 24 * 30)),
|
|
|
new Date(),
|
|
|
];
|
|
|
});
|
|
|
},
|
|
|
methods: {
|
|
|
+ initUserInfo() {
|
|
|
+ if (this.lastTimes.length === 0) {
|
|
|
+ this.lastTimes = [
|
|
|
+ this.$moment(
|
|
|
+ new Date(
|
|
|
+ new Date(this.nowTimes[0]).setTime(
|
|
|
+ new Date(this.nowTimes[0]).getTime() -
|
|
|
+ (this.nowTimes[1] - this.nowTimes[0])
|
|
|
+ )
|
|
|
+ )
|
|
|
+ ).format("YYYY-MM-DD 00:00:00"),
|
|
|
+ this.$moment(new Date(this.nowTimes[0])).format("YYYY-MM-DD 00:00:00"),
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
initChart() {
|
|
|
- let datas = [
|
|
|
- { value: 1048, name: "调用次数", value2: 3, date: "12/17" },
|
|
|
- { value: 735, name: "平均响应时间", value2: 3, date: "12/18" },
|
|
|
- ];
|
|
|
+ // 获取运行管理页面数据
|
|
|
+ appCenter
|
|
|
+ .getAllYxglDatas({
|
|
|
+ nowTimes: [
|
|
|
+ this.$moment(new Date(this.nowTimes[0])).format("YYYY-MM-DD 00:00:00"),
|
|
|
+ this.$moment(new Date(this.nowTimes[1])).format("YYYY-MM-DD 00:00:00"),
|
|
|
+ ],
|
|
|
+ lastTimes: this.lastTimes,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res && res.code == 200) {
|
|
|
+ this.TopCardDatas = res.content.TopCardDatas;
|
|
|
+ this.dataToOption(
|
|
|
+ "服务调用趋势",
|
|
|
+ "line",
|
|
|
+ [...res.content.serviceCountTrend],
|
|
|
+ {
|
|
|
+ legend: { data: ["调用次数"] },
|
|
|
+ xData: [],
|
|
|
+ xKey: "key",
|
|
|
+ xFormart: "YYYY-MM-DD",
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ name: "调用次数",
|
|
|
+ axisLine: { lineStyle: { color: "#42a5f5" } }, // 区分样式
|
|
|
+ },
|
|
|
+ yData: {
|
|
|
+ key: "value",
|
|
|
+ name: "调用次数",
|
|
|
+ color: "#42a5f5",
|
|
|
+ data: [],
|
|
|
+ yAxisIndex: 0,
|
|
|
+ },
|
|
|
+ }
|
|
|
+ );
|
|
|
+ // 初始化服务类别分布,这个地方需要先根据serviceType进行groupBy统计调用次数
|
|
|
+ this.dataToOption("服务类别分布", "pie", [...res.content.serviceCountType], {
|
|
|
+ pieKey: { value: "value", name: "key" },
|
|
|
+ pieData: [],
|
|
|
+ });
|
|
|
|
|
|
- // 根据时间返回服务调用趋势（近30天）
|
|
|
- totalCountGroupByTime(this.dateValue[0], this.dateValue[1]).then((res) => {
|
|
|
- if (res) {
|
|
|
- const sortAsc = [...res].sort((a, b) => a.time - b.time);
|
|
|
- this.dataToOption("服务调用趋势（近30天）", "line", [...sortAsc], {
|
|
|
- legend: { data: ["调用次数"] },
|
|
|
- xData: [],
|
|
|
- xKey: "time",
|
|
|
- xFormart: "YYYY-MM-DD",
|
|
|
- yAxis: {
|
|
|
- type: "value",
|
|
|
- name: "调用次数",
|
|
|
- axisLine: { lineStyle: { color: "#42a5f5" } }, // 区分样式
|
|
|
- },
|
|
|
- yData: {
|
|
|
- key: "count",
|
|
|
- name: "调用次数",
|
|
|
- color: "#42a5f5",
|
|
|
- data: [],
|
|
|
- yAxisIndex: 0,
|
|
|
- },
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- serviceInfo(this.dateValue[0], this.dateValue[1]).then((res) => {
|
|
|
- if (res) {
|
|
|
- // 得到服务类别分布，map中key是cUnit，value是count，可以写一个公共方法，专门用来统计服务类别分布
|
|
|
- let serviceTypeMap = {};
|
|
|
- res.forEach((item) => {
|
|
|
- if (serviceTypeMap[item.cUnit]) {
|
|
|
- serviceTypeMap[item.cUnit] += item.count;
|
|
|
- } else {
|
|
|
- serviceTypeMap[item.cUnit] = item.count;
|
|
|
- }
|
|
|
- });
|
|
|
- // 转换为数组
|
|
|
- let serviceTypeDatas = [];
|
|
|
- for (let key in serviceTypeMap) {
|
|
|
- if (serviceTypeMap[key] && key) {
|
|
|
- serviceTypeDatas.push({
|
|
|
- name: key,
|
|
|
- value: serviceTypeMap[key],
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- this.dataToOption("服务类别分布", "pie", [...serviceTypeDatas], {
|
|
|
- pieKey: { value: "value", name: "name" },
|
|
|
- pieData: [],
|
|
|
- });
|
|
|
+ // 服务调用TOP10《cPathComment+cUnit，调用次数》
|
|
|
+ let serviceDatas = [];
|
|
|
+ serviceDatas = res.content.serviceCountTop;
|
|
|
+ // 排序
|
|
|
+ serviceDatas.sort((a, b) => b.c_count - a.c_count);
|
|
|
+ this.initTableDatas(serviceDatas.slice(0, 10));
|
|
|
|
|
|
- this.dataToOption("委办分布", "pie", [...serviceTypeDatas], {
|
|
|
- pieKey: { value: "value", name: "name" },
|
|
|
- pieData: [],
|
|
|
- legend: {
|
|
|
- bottom: 10,
|
|
|
- },
|
|
|
- radius: "60%",
|
|
|
- padAngle: 0,
|
|
|
- borderRadius: 0,
|
|
|
- label: {},
|
|
|
- });
|
|
|
- // 服务调用TOP10《cPathComment+cUnit，调用次数》
|
|
|
- let serviceTypeMap2 = {};
|
|
|
- res.forEach((item) => {
|
|
|
- if (serviceTypeMap2[item.cPathComment + item.cUnit]) {
|
|
|
- serviceTypeMap2[item.cPathComment + item.cUnit].push(item);
|
|
|
- } else {
|
|
|
- serviceTypeMap2[item.cPathComment + item.cUnit] = [item];
|
|
|
- }
|
|
|
- });
|
|
|
- // 转换为数组
|
|
|
- let serviceTypeDatas2 = [];
|
|
|
- for (let key in serviceTypeMap2) {
|
|
|
- if (serviceTypeMap2[key] && key) {
|
|
|
- let item = serviceTypeMap2[key];
|
|
|
- let tableDataItem = {
|
|
|
- serviceName: "",
|
|
|
- serviceType: "",
|
|
|
- callCount: 0,
|
|
|
- };
|
|
|
- item.forEach((item2) => {
|
|
|
- tableDataItem.serviceName = item2.cPathComment;
|
|
|
- tableDataItem.serviceType = item2.cUnit;
|
|
|
- tableDataItem.callCount += item2.count;
|
|
|
- });
|
|
|
- serviceTypeDatas2.push(tableDataItem);
|
|
|
+ // 委办分布
|
|
|
+ this.dataToOption("委办分布", "pie", [...res.content.serviceCountUnit], {
|
|
|
+ pieKey: { value: "value", name: "key" },
|
|
|
+ pieData: [],
|
|
|
+ legend: {
|
|
|
+ bottom: 10,
|
|
|
+ },
|
|
|
+ radius: "60%",
|
|
|
+ padAngle: 0,
|
|
|
+ borderRadius: 0,
|
|
|
+ label: {},
|
|
|
+ });
|
|
|
+
|
|
|
+ // 先清洗一下res.content.serviceCountUnitTrend
|
|
|
+ let serviceCountUnitTrend = [];
|
|
|
+ serviceCountUnitTrend = res.content.serviceCountUnitTrend;
|
|
|
+ let serviceCountUnitTrendLegend = [];
|
|
|
+ let itemData = serviceCountUnitTrend[0];
|
|
|
+ for (let key in itemData) {
|
|
|
+ if (key !== "key") {
|
|
|
+ serviceCountUnitTrendLegend.push(key);
|
|
|
+ }
|
|
|
}
|
|
|
+ this.dataToOption(
|
|
|
+ "委办活跃度趋势",
|
|
|
+ "line",
|
|
|
+ [...res.content.serviceCountUnitTrend],
|
|
|
+ {
|
|
|
+ legend: { data: serviceCountUnitTrendLegend },
|
|
|
+ xData: [],
|
|
|
+ xKey: "key",
|
|
|
+ xFormart: "YYYY-MM-DD",
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisLine: { lineStyle: { color: "#42a5f5" } }, // 区分样式
|
|
|
+ },
|
|
|
+ yDatas: { auto: true },
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ let serviceDatas2 = [];
|
|
|
+ serviceDatas2 = res.content.serviceCountApplicationTop;
|
|
|
+ // 排序
|
|
|
+ serviceDatas2.sort((a, b) => a.c_count - b.c_count);
|
|
|
+ // 用户部门分布
|
|
|
+ this.dataToOption("热点应用TOP10排名", "bar", serviceDatas2.slice(0, 10), {
|
|
|
+ showLegend: false,
|
|
|
+ xData: [],
|
|
|
+ xKey: "c_application",
|
|
|
+ yData: {
|
|
|
+ key: "c_count",
|
|
|
+ name: "调用次数",
|
|
|
+ color: "#42a5f5",
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ });
|
|
|
+ // console.log("getAllYxglDatas", res);
|
|
|
}
|
|
|
- // 根据callCount进行降序排序并截取前10条
|
|
|
- serviceTypeDatas2.sort((a, b) => b.callCount - a.callCount);
|
|
|
- serviceTypeDatas2 = serviceTypeDatas2.slice(0, 10);
|
|
|
- this.initTableDatas(serviceTypeDatas2);
|
|
|
- }
|
|
|
- });
|
|
|
+ });
|
|
|
// 应用状态分布，cloumnId:1659
|
|
|
appCenter
|
|
|
.getDmsDataList({
|
|
|
@@ -372,19 +402,7 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
|
|
|
- // 用户部门分布
|
|
|
- this.dataToOption("用户部门分布", "bar", datas, {
|
|
|
- showLegend: false,
|
|
|
- xData: [],
|
|
|
- xKey: "date",
|
|
|
- yData: {
|
|
|
- key: "value",
|
|
|
- name: "调用次数",
|
|
|
- color: "#42a5f5",
|
|
|
- data: [],
|
|
|
- },
|
|
|
- });
|
|
|
- this.dataToOption("数据类别分布", "pie", datas, {
|
|
|
+ this.dataToOption("数据类别分布", "pie", [{ name: "test", value: 10 }], {
|
|
|
pieKey: { value: "value", name: "name" },
|
|
|
pieData: [],
|
|
|
legend: {
|
|
|
@@ -419,6 +437,34 @@ export default {
|
|
|
}
|
|
|
if (keyRule.yData) {
|
|
|
keyRule.yData.data.push(item[keyRule.yData.key]);
|
|
|
+ keyRule.series = [
|
|
|
+ {
|
|
|
+ name: keyRule.yData.name,
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ data: keyRule.yData.data,
|
|
|
+ lineStyle: {
|
|
|
+ color: keyRule.yData.color ? keyRule.yData.color : "",
|
|
|
+ type: keyRule.yData.ifDashed ? "dashed" : "",
|
|
|
+ }, // 蓝色线条
|
|
|
+ itemStyle: keyRule.yData.color,
|
|
|
+ symbol: "circle", // 节点形状
|
|
|
+ symbolSize: 6, // 节点大小
|
|
|
+ },
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ if (keyRule.yDatas) {
|
|
|
+ // 先根据lenged得到data集合
|
|
|
+ for (let name of keyRule.legend.data) {
|
|
|
+ if (keyRule.yDatas[name]) {
|
|
|
+ keyRule.yDatas[name].data.push(item[name]);
|
|
|
+ } else {
|
|
|
+ keyRule.yDatas[name] = {
|
|
|
+ name: name,
|
|
|
+ data: [item[name]],
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
if (keyRule.pieKey) {
|
|
|
keyRule.pieData.push({
|
|
|
@@ -427,6 +473,20 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
+ // 专门用来处理多y数据的series
|
|
|
+ if (keyRule.yDatas) {
|
|
|
+ keyRule.series = [];
|
|
|
+ for (let name of keyRule.legend.data) {
|
|
|
+ keyRule.series.push({
|
|
|
+ name: name,
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ data: keyRule.yDatas[name].data,
|
|
|
+ symbol: "circle", // 节点形状
|
|
|
+ symbolSize: 6, // 节点大小
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
let _option = {};
|
|
|
switch (type) {
|
|
|
@@ -449,21 +509,7 @@ export default {
|
|
|
splitLine: { show: false }, // 隐藏分割线
|
|
|
},
|
|
|
yAxis: keyRule.yAxis ? keyRule.yAxis : { type: "value" },
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: keyRule.yData.name,
|
|
|
- type: "line",
|
|
|
- smooth: true,
|
|
|
- data: keyRule.yData.data,
|
|
|
- lineStyle: {
|
|
|
- color: keyRule.yData.color ? keyRule.yData.color : "",
|
|
|
- type: keyRule.yData.ifDashed ? "dashed" : "",
|
|
|
- }, // 蓝色线条
|
|
|
- itemStyle: keyRule.yData.color,
|
|
|
- symbol: "circle", // 节点形状
|
|
|
- symbolSize: 6, // 节点大小
|
|
|
- },
|
|
|
- ],
|
|
|
+ series: keyRule.series,
|
|
|
};
|
|
|
break;
|
|
|
case "pie":
|
DESKTOP-6LTVLN7\Liumouren