|
|
@@ -3,9 +3,18 @@
|
|
|
<customHeader>统计监测</customHeader>
|
|
|
<div class="content">
|
|
|
<div class="box-content">
|
|
|
- <a-table size="small" :columns="outerColumns" :data-source="deviceList" :pagination="true"> </a-table>
|
|
|
+ <a-table size="small" :columns="outerColumns" :data-source="deviceList" :pagination="true">
|
|
|
+ <template #bodyCell="{ column, record }">
|
|
|
+ <template v-if="column.dataIndex === 'action'">
|
|
|
+ <a class="action-link" @click="openNestedTable(record)">详情</a>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <a-modal width="80%" :footer="null" title="统计详情" centered v-model:visible="showDetail">
|
|
|
+ <a-table size="small" :columns="innerColumns" :data-source="monitorList" :pagination="true"></a-table>
|
|
|
+ </a-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -15,6 +24,7 @@ import { getInvokeList, getInvokeDetailList } from './stats.api.ts';
|
|
|
import customHeader from '/@/components/vent/customHeader.vue';
|
|
|
const deviceList = ref<any[]>([]); // 列表数据
|
|
|
const monitorList = ref<any[]>([]); // 详情数据
|
|
|
+const showDetail = ref(false);
|
|
|
// 分页参数
|
|
|
const paginationState = ref({
|
|
|
current: 1,
|
|
|
@@ -105,6 +115,12 @@ const outerColumns = [
|
|
|
key: 'lastTime',
|
|
|
align: 'center',
|
|
|
},
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ width: 80,
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
];
|
|
|
|
|
|
// 内层表格列配置
|
|
|
@@ -140,6 +156,10 @@ const innerColumns = [
|
|
|
align: 'center',
|
|
|
},
|
|
|
];
|
|
|
+const openNestedTable = (record) => {
|
|
|
+ showDetail.value = !showDetail.value;
|
|
|
+ refreshData(record.userid);
|
|
|
+};
|
|
|
|
|
|
async function getTableData(params?) {
|
|
|
if (!params) {
|
|
|
@@ -155,6 +175,16 @@ async function getTableData(params?) {
|
|
|
deviceList.value = result.records;
|
|
|
}
|
|
|
}
|
|
|
+async function refreshData(userid: string) {
|
|
|
+ // 这里实现具体的请求逻辑
|
|
|
+ const params = {
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ userid: userid,
|
|
|
+ };
|
|
|
+ const result = await getInvokeDetailList(params);
|
|
|
+ monitorList.value = Object.values(result.records);
|
|
|
+}
|
|
|
onMounted(() => {
|
|
|
getTableData();
|
|
|
});
|