1
|
1
|
<script setup lang="ts">
|
|
2
|
+ import { ref } from 'vue';
|
2
|
3
|
import LineChart from './components/LineChart.vue';
|
3
|
4
|
import PieChart from './components/PieChart.vue';
|
4
|
5
|
import Table from './components/Table.vue';
|
...
|
...
|
@@ -27,6 +28,7 @@ |
27
|
28
|
pieChartData: Recordable[];
|
28
|
29
|
timeLineChartData: Recordable[];
|
29
|
30
|
totalData: Recordable[];
|
|
31
|
+ timeLineXAxisData?: string[];
|
30
|
32
|
}
|
31
|
33
|
|
32
|
34
|
const chartData = reactive<ChartData>({
|
...
|
...
|
@@ -34,6 +36,7 @@ |
34
|
36
|
pieChartData: [],
|
35
|
37
|
timeLineChartData: [],
|
36
|
38
|
totalData: [],
|
|
39
|
+ timeLineXAxisData: [],
|
37
|
40
|
});
|
38
|
41
|
|
39
|
42
|
// API统计
|
...
|
...
|
@@ -155,10 +158,13 @@ |
155
|
158
|
];
|
156
|
159
|
//代码保留
|
157
|
160
|
|
|
161
|
+ const timeType = ref('');
|
|
162
|
+
|
158
|
163
|
// 接口调用历史
|
159
|
164
|
const getClassify = async (type?: string) => {
|
|
165
|
+ timeType.value = type as string;
|
160
|
166
|
const findValue = configTime.find((configItem) => configItem.name === type)?.value;
|
161
|
|
- timeFormat(type, findValue);
|
|
167
|
+ chartData.timeLineXAxisData = timeFormat(type, findValue);
|
162
|
168
|
const res = (await getApplicationRecordClassify(type)) as any as ClassifyItemType[];
|
163
|
169
|
chartData.timeLineChartData = res?.map((classifyItem: ClassifyItemType) => ({
|
164
|
170
|
type: 'line',
|
...
|
...
|
@@ -201,6 +207,8 @@ |
201
|
207
|
<TimeLineChart
|
202
|
208
|
@emitTimeRange="handleReceiveTimeRange"
|
203
|
209
|
:seriesData="chartData.timeLineChartData"
|
|
210
|
+ :timeLineXAxisData="chartData.timeLineXAxisData"
|
|
211
|
+ :timeType="timeType"
|
204
|
212
|
/>
|
205
|
213
|
</div>
|
206
|
214
|
<div>
|
...
|
...
|
|