|
|
@@ -19,7 +19,7 @@
|
|
|
<div class="flex">
|
|
|
<card
|
|
|
class="card flex"
|
|
|
- :title="'服务机构总数'"
|
|
|
+ :title="'委办总数'"
|
|
|
:value="8"
|
|
|
:growth="'较上个月增长了12%'"
|
|
|
iconColor="#2563db"
|
|
|
@@ -27,7 +27,7 @@
|
|
|
/>
|
|
|
<card
|
|
|
class="card flex"
|
|
|
- :title="'服务总数'"
|
|
|
+ :title="'系统总数'"
|
|
|
:value="100"
|
|
|
:growth="'较上个月下降了12%'"
|
|
|
iconColor="#16a34a"
|
|
|
@@ -35,7 +35,7 @@
|
|
|
/>
|
|
|
<card
|
|
|
class="card flex"
|
|
|
- :title="'服务调用总次数'"
|
|
|
+ :title="'服务总数'"
|
|
|
:value="1000"
|
|
|
:growth="'较上个月增长了12%'"
|
|
|
iconColor="#9333ea"
|
|
|
@@ -43,7 +43,7 @@
|
|
|
/>
|
|
|
<card
|
|
|
class="card flex"
|
|
|
- :title="'服务类别数量'"
|
|
|
+ :title="'服务调用总数'"
|
|
|
:value="10"
|
|
|
:growth="'与上月持平'"
|
|
|
iconColor="#ca8a04"
|
|
|
@@ -74,26 +74,26 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="width: 100%; height: 400px">
|
|
|
- <Table title="服务调用" :tableData="tableDatas" />
|
|
|
+ <Table title="服务调用TOP10" :tableData="tableDatas" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 用户信息统计 -->
|
|
|
+ <!-- 委办信息统计 -->
|
|
|
<div class="bigCard">
|
|
|
- <div class="bigCard_title">用户信息统计</div>
|
|
|
+ <div class="bigCard_title">委办信息统计</div>
|
|
|
<div class="flex">
|
|
|
<div style="width: 28%; height: 400px">
|
|
|
- <EchartsDome :chartOption="chartOptions['用户角色分布']" title="用户角色分布" />
|
|
|
+ <EchartsDome :chartOption="chartOptions['委办分布']" title="委办分布" />
|
|
|
</div>
|
|
|
<div style="width: 68%; height: 400px">
|
|
|
<EchartsDome
|
|
|
- :chartOption="chartOptions['用户活跃度趋势']"
|
|
|
- title="用户活跃度趋势"
|
|
|
+ :chartOption="chartOptions['服务调用趋势（近30天）']"
|
|
|
+ title="委办活跃度趋势"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div style="width: 100%; height: 400px">
|
|
|
+ <!-- <div style="width: 100%; height: 400px">
|
|
|
<EchartsDome :chartOption="chartOptions['用户部门分布']" title="用户部门分布" />
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
<!-- 应用类信息统计 -->
|
|
|
<div class="bigCard">
|
|
|
@@ -167,6 +167,7 @@
|
|
|
import card from "@/components/yxgl/card.vue";
|
|
|
import EchartsDome from "@/components/yxgl/EchartsDome.vue";
|
|
|
import Table from "@/components/yxgl/table.vue";
|
|
|
+import { totalCountGroupByTime } from "@/api/count";
|
|
|
export default {
|
|
|
name: "",
|
|
|
components: {
|
|
|
@@ -176,151 +177,140 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- dateValue: "",
|
|
|
+ // 比较的时间范围(默认60天到30天前，主要跟dateValue有关系)
|
|
|
+ compareTimes: [
|
|
|
+ new Date(new Date().setTime(new Date() - 3600 * 1000 * 24 * 60)),
|
|
|
+ new Date(new Date().setTime(new Date() - 3600 * 1000 * 24 * 30)),
|
|
|
+ ],
|
|
|
+ // 当前选中的时间范围
|
|
|
+ dateValue: [
|
|
|
+ new Date(new Date().setTime(new Date() - 3600 * 1000 * 24 * 30)),
|
|
|
+ new Date(),
|
|
|
+ ],
|
|
|
shortcuts: this.shortcuts(),
|
|
|
chartOptions: {},
|
|
|
tableDatas: [],
|
|
|
};
|
|
|
},
|
|
|
- mounted() {
|
|
|
- let datas = [
|
|
|
- { value: 1048, name: "调用次数", value2: 3, date: "12/17" },
|
|
|
- { value: 735, name: "平均响应时间", value2: 3, date: "12/18" },
|
|
|
- ];
|
|
|
-
|
|
|
- let datas2 = [
|
|
|
- {
|
|
|
- value: 20,
|
|
|
- name: "业务数据",
|
|
|
- children: [
|
|
|
- { value: 7, name: "交通数据" },
|
|
|
- { value: 5, name: "环保数据" },
|
|
|
- { value: 5, name: "水务数据" },
|
|
|
- { value: 3, name: "教育数据" },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- value: 13,
|
|
|
- name: "基础数据",
|
|
|
- children: [
|
|
|
- { value: 5, name: "人口数据" },
|
|
|
- { value: 5, name: "地理数据" },
|
|
|
- { value: 3, name: "企业数据" },
|
|
|
- ],
|
|
|
- },
|
|
|
- {
|
|
|
- value: 9,
|
|
|
- name: "专题数据",
|
|
|
- children: [
|
|
|
- { value: 4, name: "规划数据" },
|
|
|
- { value: 3, name: "医疗数据" },
|
|
|
- { value: 2, name: "文旅数据" },
|
|
|
- ],
|
|
|
+ watch: {
|
|
|
+ dateValue: {
|
|
|
+ handler(newVal, oldVal) {
|
|
|
+ if (newVal !== oldVal && newVal.length > 0) {
|
|
|
+ this.initChart();
|
|
|
+ // 要先算出来dateValue的开始时间，和范围天数。然后根据范围天数，计算出比较的时间。其中dateValue的开始时间是比较时间的结束时间，比较的开始时间是比较时间的结束时间减去范围天数。
|
|
|
+ // 计算出比较的时间范围
|
|
|
+ this.compareTimes = [
|
|
|
+ new Date(
|
|
|
+ new Date(newVal[0]).setTime(
|
|
|
+ new Date(newVal[0]).getTime() - 3600 * 1000 * 24 * (newVal[1] - newVal[0])
|
|
|
+ )
|
|
|
+ ),
|
|
|
+ new Date(newVal[0]),
|
|
|
+ ];
|
|
|
+ }
|
|
|
},
|
|
|
- ];
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ initChart() {
|
|
|
+ let datas = [
|
|
|
+ { value: 1048, name: "调用次数", value2: 3, date: "12/17" },
|
|
|
+ { value: 735, name: "平均响应时间", value2: 3, date: "12/18" },
|
|
|
+ ];
|
|
|
|
|
|
- this.dataToOption("数据类别分布", "sunburst", datas2, null);
|
|
|
- this.dataToOption("数据质量评分", "radar", datas2, null);
|
|
|
- this.dataToOption("服务调用趋势（近30天）", "line", datas, {
|
|
|
- xData: [],
|
|
|
- xKey: "date",
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- name: "调用次数",
|
|
|
- axisLine: { lineStyle: { color: "#42a5f5" } }, // 区分样式
|
|
|
- },
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- name: "响应时间（ms）",
|
|
|
- axisLine: { lineStyle: { color: "#4caf50" } }, // 区分样式
|
|
|
- position: "right",
|
|
|
- },
|
|
|
- ],
|
|
|
- yData: [
|
|
|
- {
|
|
|
- key: "value",
|
|
|
- name: "调用次数",
|
|
|
- color: "#42a5f5",
|
|
|
- data: [],
|
|
|
- yAxisIndex: 0,
|
|
|
- },
|
|
|
- {
|
|
|
- key: "value2",
|
|
|
- name: "响应时间（ms）",
|
|
|
- color: "#4caf50",
|
|
|
- data: [],
|
|
|
- ifDashed: true,
|
|
|
- yAxisIndex: 1,
|
|
|
- },
|
|
|
- ],
|
|
|
- });
|
|
|
- this.dataToOption("用户活跃度趋势", "line", datas, {
|
|
|
- xData: [],
|
|
|
- xKey: "date",
|
|
|
- yData: [
|
|
|
- {
|
|
|
- key: "value",
|
|
|
- name: "调用次数",
|
|
|
- color: "#42a5f5",
|
|
|
- data: [],
|
|
|
- },
|
|
|
- {
|
|
|
- key: "value2",
|
|
|
- name: "响应时间（ms）",
|
|
|
- color: "#4caf50",
|
|
|
- data: [],
|
|
|
- },
|
|
|
- ],
|
|
|
- });
|
|
|
+ // 根据时间返回服务调用趋势（近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,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- this.dataToOption("服务类别分布", "pie", datas, {
|
|
|
- pieKey: { value: "value", name: "name" },
|
|
|
- pieData: [],
|
|
|
- });
|
|
|
+ // timeCheckers拼接时间参数，topUnit添加一个，然后修改查询字段：c_unit，修改成c_path
|
|
|
+ this.dataToOption("服务类别分布", "pie", datas, {
|
|
|
+ pieKey: { value: "value", name: "name" },
|
|
|
+ pieData: [],
|
|
|
+ });
|
|
|
|
|
|
- this.dataToOption("用户角色分布", "pie", datas, {
|
|
|
- pieKey: { value: "value", name: "name" },
|
|
|
- pieData: [],
|
|
|
- legend: {
|
|
|
- bottom: 10,
|
|
|
- },
|
|
|
- radius: "60%",
|
|
|
- padAngle: 0,
|
|
|
- borderRadius: 0,
|
|
|
- label: {},
|
|
|
- });
|
|
|
- this.dataToOption("用户部门分布", "bar", datas, {
|
|
|
- showLegend: false,
|
|
|
- xData: [],
|
|
|
- xKey: "date",
|
|
|
- yData: [
|
|
|
- {
|
|
|
+ this.dataToOption("委办分布", "pie", datas, {
|
|
|
+ pieKey: { value: "value", name: "name" },
|
|
|
+ pieData: [],
|
|
|
+ legend: {
|
|
|
+ bottom: 10,
|
|
|
+ },
|
|
|
+ radius: "60%",
|
|
|
+ padAngle: 0,
|
|
|
+ borderRadius: 0,
|
|
|
+ label: {},
|
|
|
+ });
|
|
|
+ this.dataToOption("用户部门分布", "bar", datas, {
|
|
|
+ showLegend: false,
|
|
|
+ xData: [],
|
|
|
+ xKey: "date",
|
|
|
+ yData: {
|
|
|
key: "value",
|
|
|
name: "调用次数",
|
|
|
color: "#42a5f5",
|
|
|
data: [],
|
|
|
},
|
|
|
- ],
|
|
|
- });
|
|
|
- // 表格数据初始化
|
|
|
- this.initTableDatas();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- dataToOption(title, type, datas, keyRule) {
|
|
|
+ });
|
|
|
+ this.dataToOption("数据类别分布", "pie", datas, {
|
|
|
+ pieKey: { value: "value", name: "name" },
|
|
|
+ pieData: [],
|
|
|
+ legend: {
|
|
|
+ bottom: 10,
|
|
|
+ },
|
|
|
+ radius: "60%",
|
|
|
+ padAngle: 0,
|
|
|
+ borderRadius: 0,
|
|
|
+ label: {},
|
|
|
+ });
|
|
|
+ this.dataToOption("数据质量评分", "radar", null, null);
|
|
|
+ // 表格数据初始化
|
|
|
+ this.initTableDatas();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 数据转换为图表选项
|
|
|
+ * @param title 图表标题
|
|
|
+ * @param type 图表类型
|
|
|
+ * @param datas 原始数据
|
|
|
+ * @param keyRule 解析规则
|
|
|
+ */
|
|
|
+ async dataToOption(title, type, datas, keyRule) {
|
|
|
// 根据规则解析数据
|
|
|
if (keyRule) {
|
|
|
datas.forEach((item) => {
|
|
|
// 有的图表没有X轴
|
|
|
if (keyRule.xKey) {
|
|
|
+ if (keyRule.xFormart) {
|
|
|
+ item[keyRule.xKey] = this.$moment(item[keyRule.xKey]).format(
|
|
|
+ keyRule.xFormart
|
|
|
+ );
|
|
|
+ }
|
|
|
keyRule.xData.push(item[keyRule.xKey]);
|
|
|
}
|
|
|
if (keyRule.yData) {
|
|
|
- keyRule.legend = [];
|
|
|
- keyRule.yData.forEach((dataItem) => {
|
|
|
- dataItem.data.push(item[dataItem.key]);
|
|
|
- keyRule.legend.push(dataItem.name);
|
|
|
- });
|
|
|
+ keyRule.yData.data.push(item[keyRule.yData.key]);
|
|
|
}
|
|
|
if (keyRule.pieKey) {
|
|
|
keyRule.pieData.push({
|
|
|
@@ -336,7 +326,7 @@ export default {
|
|
|
// 折线图基础
|
|
|
_option = {
|
|
|
legend: {
|
|
|
- data: keyRule.legend,
|
|
|
+ data: keyRule.legend.data,
|
|
|
},
|
|
|
tooltip: {
|
|
|
show: true,
|
|
|
@@ -351,26 +341,22 @@ export default {
|
|
|
splitLine: { show: false }, // 隐藏分割线
|
|
|
},
|
|
|
yAxis: keyRule.yAxis ? keyRule.yAxis : { type: "value" },
|
|
|
- series: [],
|
|
|
+ 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, // 节点大小
|
|
|
+ },
|
|
|
+ ],
|
|
|
};
|
|
|
- // 补充数据
|
|
|
- keyRule.yData.forEach((item) => {
|
|
|
- // 补充server
|
|
|
- _option.series.push({
|
|
|
- name: item.name,
|
|
|
- type: "line",
|
|
|
- smooth: true,
|
|
|
- data: item.data, // 模拟数据
|
|
|
- lineStyle: {
|
|
|
- color: item.color ? item.color : "",
|
|
|
- type: item.ifDashed ? "dashed" : "",
|
|
|
- }, // 蓝色线条
|
|
|
- itemStyle: item.color ? { color: item.color } : {}, // 节点颜色
|
|
|
- symbol: "circle", // 节点形状
|
|
|
- symbolSize: 6, // 节点大小
|
|
|
- yAxisIndex: item.yAxisIndex != undefined ? item.yAxisIndex : 0, // 绑定Y轴
|
|
|
- });
|
|
|
- });
|
|
|
break;
|
|
|
case "pie":
|
|
|
// 饼状图
|
|
|
@@ -438,36 +424,19 @@ export default {
|
|
|
type: "category",
|
|
|
data: keyRule.xData,
|
|
|
},
|
|
|
- series: [],
|
|
|
- };
|
|
|
- keyRule.yData.forEach((item) => {
|
|
|
- _option.series.push({
|
|
|
- name: item.name,
|
|
|
- type: "bar",
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- },
|
|
|
- emphasis: {
|
|
|
- focus: "series",
|
|
|
- },
|
|
|
- data: item.data,
|
|
|
- });
|
|
|
- });
|
|
|
- break;
|
|
|
- case "sunburst":
|
|
|
- // 旭日图
|
|
|
- _option = {
|
|
|
- series: {
|
|
|
- type: "sunburst",
|
|
|
- emphasis: {
|
|
|
- focus: "ancestor",
|
|
|
- },
|
|
|
- data: datas,
|
|
|
- radius: [0, "90%"],
|
|
|
- label: {
|
|
|
- rotate: "radial",
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: keyRule.yData.name,
|
|
|
+ type: "bar",
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ data: keyRule.yData.data,
|
|
|
},
|
|
|
- },
|
|
|
+ ],
|
|
|
};
|
|
|
break;
|
|
|
default:
|
|
|
@@ -483,8 +452,8 @@ export default {
|
|
|
radar: [
|
|
|
{
|
|
|
indicator: [
|
|
|
+ { text: "健壮性", max: 100 },
|
|
|
{ text: "完整性", max: 100 },
|
|
|
- { text: "可用性", max: 100 },
|
|
|
{ text: "一致性", max: 100 },
|
|
|
{ text: "及时性", max: 100 },
|
|
|
{ text: "准确性", max: 100 },
|
|
|
@@ -497,12 +466,8 @@ export default {
|
|
|
areaStyle: {},
|
|
|
data: [
|
|
|
{
|
|
|
- value: [85, 90, 90, 95, 95],
|
|
|
- name: "A Phone",
|
|
|
- },
|
|
|
- {
|
|
|
- value: [95, 80, 95, 90, 93],
|
|
|
- name: "Another Phone",
|
|
|
+ value: [93, 85, 92, 95, 93],
|
|
|
+ name: "",
|
|
|
},
|
|
|
],
|
|
|
},
|
|
|
@@ -519,22 +484,16 @@ export default {
|
|
|
serviceName: "服务A",
|
|
|
serviceType: "类别A",
|
|
|
callCount: 100,
|
|
|
- successRate: "90%",
|
|
|
- avgResponseTime: "100ms",
|
|
|
},
|
|
|
{
|
|
|
serviceName: "服务B",
|
|
|
serviceType: "类别B",
|
|
|
callCount: 200,
|
|
|
- successRate: "80%",
|
|
|
- avgResponseTime: "150ms",
|
|
|
},
|
|
|
{
|
|
|
serviceName: "服务C",
|
|
|
serviceType: "类别C",
|
|
|
callCount: 300,
|
|
|
- successRate: "70%",
|
|
|
- avgResponseTime: "200ms",
|
|
|
},
|
|
|
];
|
|
|
},
|
DESKTOP-6LTVLN7\Liumouren