gengxin
This commit is contained in:
@@ -63,3 +63,11 @@ export function getCursorEquipmentExtractRecords(params) {
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
export function getCursorEquipmentIpLogs(params) {
|
||||
return request({
|
||||
url: `${baseUrl}/ipLogs`,
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -88,3 +88,11 @@ export function getCursorEquipmentExtractRecords(params: Record<string, any>) {
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
export function getCursorEquipmentIpLogs(params: Record<string, any>) {
|
||||
return request({
|
||||
url: `${baseUrl}/ipLogs`,
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -42,6 +42,12 @@ function copyText(text: unknown, label = '内容') {
|
||||
ElMessage.success(`${label}已复制`);
|
||||
});
|
||||
}
|
||||
|
||||
function sourceLabel(source: string) {
|
||||
if (source === 'report') return '心跳上报';
|
||||
if (source === 'activateByCode') return '激活码激活';
|
||||
return source || '-';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -111,6 +117,59 @@ function copyText(text: unknown, label = '内容') {
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<!-- IP 信息区块 -->
|
||||
<template v-if="row.raw?.lastLoginIpInfo || row.lastLoginIpInfo">
|
||||
<el-divider content-position="left">最后登录 IP 详情</el-divider>
|
||||
<el-descriptions :column="2" border size="small">
|
||||
<el-descriptions-item label="出口 IP">
|
||||
<span class="ip-text">{{ display((row.raw?.lastLoginIpInfo || row.lastLoginIpInfo)?.query) }}</span>
|
||||
<el-button
|
||||
v-if="(row.raw?.lastLoginIpInfo || row.lastLoginIpInfo)?.query"
|
||||
link type="primary"
|
||||
@click="copyText((row.raw?.lastLoginIpInfo || row.lastLoginIpInfo)?.query, 'IP 地址')"
|
||||
>复制</el-button>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="来源">
|
||||
{{ sourceLabel((row.raw?.lastLoginIpInfo || row.lastLoginIpInfo)?.source) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="国家">
|
||||
{{ display((row.raw?.lastLoginIpInfo || row.lastLoginIpInfo)?.country) }}
|
||||
<span v-if="(row.raw?.lastLoginIpInfo || row.lastLoginIpInfo)?.countryCode" class="country-code">
|
||||
({{ (row.raw?.lastLoginIpInfo || row.lastLoginIpInfo)?.countryCode }})
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="省/州">
|
||||
{{ display((row.raw?.lastLoginIpInfo || row.lastLoginIpInfo)?.regionName) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="城市">
|
||||
{{ display((row.raw?.lastLoginIpInfo || row.lastLoginIpInfo)?.city) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="时区">
|
||||
{{ display((row.raw?.lastLoginIpInfo || row.lastLoginIpInfo)?.timezone) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="ISP 运营商" :span="2">
|
||||
{{ display((row.raw?.lastLoginIpInfo || row.lastLoginIpInfo)?.isp) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="组织" :span="2">
|
||||
{{ display((row.raw?.lastLoginIpInfo || row.lastLoginIpInfo)?.org) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="AS 信息" :span="2">
|
||||
{{ display((row.raw?.lastLoginIpInfo || row.lastLoginIpInfo)?.asInfo) }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="经纬度">
|
||||
{{ (row.raw?.lastLoginIpInfo || row.lastLoginIpInfo)?.lat }},
|
||||
{{ (row.raw?.lastLoginIpInfo || row.lastLoginIpInfo)?.lon }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="上报时间">
|
||||
{{ display((row.raw?.lastLoginIpInfo || row.lastLoginIpInfo)?.createTime) }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-divider content-position="left">最后登录 IP 详情</el-divider>
|
||||
<div class="no-ip-tip">暂无 IP 记录(客户端未上报 ipInfo)</div>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="emit('update:modelValue', false)">关闭</el-button>
|
||||
</template>
|
||||
@@ -132,6 +191,24 @@ function copyText(text: unknown, label = '内容') {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.ip-text {
|
||||
font-family: monospace;
|
||||
font-weight: 600;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.country-code {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.no-ip-tip {
|
||||
color: #909399;
|
||||
font-size: 13px;
|
||||
padding: 12px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:deep(.equipment-detail-dialog) {
|
||||
max-width: calc(100vw - 24px);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,151 @@
|
||||
<script lang="ts" setup>
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: { type: Boolean, default: false },
|
||||
row: { type: Object, default: null },
|
||||
loading: { type: Boolean, default: false },
|
||||
records: { type: Array as () => Record<string, any>[], default: () => [] },
|
||||
total: { type: Number, default: 0 },
|
||||
page: { type: Number, default: 1 },
|
||||
pageSize: { type: Number, default: 20 },
|
||||
});
|
||||
|
||||
const emit = defineEmits([
|
||||
'update:modelValue',
|
||||
'update:page',
|
||||
'update:page-size',
|
||||
'refresh',
|
||||
]);
|
||||
|
||||
function handleOpen() {
|
||||
emit('refresh');
|
||||
}
|
||||
|
||||
function formatTime(value: any) {
|
||||
if (!value) return '-';
|
||||
const d = new Date(value);
|
||||
if (Number.isNaN(d.getTime())) return String(value);
|
||||
const p = (v: number) => String(v).padStart(2, '0');
|
||||
return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
|
||||
}
|
||||
|
||||
function sourceLabel(source: string) {
|
||||
if (source === 'report') return '心跳上报';
|
||||
if (source === 'activateByCode') return '激活码激活';
|
||||
return source || '-';
|
||||
}
|
||||
|
||||
function copyText(text: unknown, label = '内容') {
|
||||
const value = String(text || '').trim();
|
||||
if (!value) {
|
||||
ElMessage.warning(`暂无${label}可复制`);
|
||||
return;
|
||||
}
|
||||
navigator.clipboard.writeText(value).then(() => {
|
||||
ElMessage.success(`${label}已复制`);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
class="ip-logs-dialog"
|
||||
:model-value="modelValue"
|
||||
title="IP 登录日志"
|
||||
width="900px"
|
||||
@update:model-value="(v: boolean) => emit('update:modelValue', v)"
|
||||
@open="handleOpen"
|
||||
>
|
||||
<div class="dialog-desc" v-if="row">
|
||||
<span>设备:{{ row.machineCode || row.id || '-' }}</span>
|
||||
</div>
|
||||
|
||||
<el-table v-loading="loading" :data="records" border stripe size="small" style="width: 100%">
|
||||
<el-table-column label="IP 地址" width="140" prop="query">
|
||||
<template #default="{ row: r }">
|
||||
<span class="ip-text">{{ r.query || '-' }}</span>
|
||||
<el-button v-if="r.query" link size="small" type="primary" @click="copyText(r.query, 'IP')">复制</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="来源" width="110" align="center">
|
||||
<template #default="{ row: r }">
|
||||
<el-tag size="small" :type="r.source === 'activateByCode' ? 'warning' : 'info'">
|
||||
{{ sourceLabel(r.source) }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="国家 / 地区" min-width="140">
|
||||
<template #default="{ row: r }">
|
||||
<span>{{ r.country || '-' }}</span>
|
||||
<span v-if="r.countryCode" class="country-code">({{ r.countryCode }})</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="城市" width="110" prop="city">
|
||||
<template #default="{ row: r }">{{ r.city || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="ISP 运营商" min-width="200" show-overflow-tooltip prop="isp">
|
||||
<template #default="{ row: r }">{{ r.isp || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="时区" width="140" show-overflow-tooltip prop="timezone">
|
||||
<template #default="{ row: r }">{{ r.timezone || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="上报时间" width="170">
|
||||
<template #default="{ row: r }">{{ formatTime(r.createTime) }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-pagination
|
||||
class="pager"
|
||||
:current-page="page"
|
||||
:page-size="pageSize"
|
||||
background
|
||||
layout="total, sizes, prev, pager, next"
|
||||
:page-sizes="[20, 50, 100]"
|
||||
:total="total"
|
||||
@current-change="(v: number) => emit('update:page', v)"
|
||||
@size-change="(v: number) => emit('update:page-size', v)"
|
||||
/>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="emit('update:modelValue', false)">关闭</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="emit('refresh')">刷新</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.dialog-desc {
|
||||
margin-bottom: 12px;
|
||||
color: #606266;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.ip-text {
|
||||
font-family: monospace;
|
||||
font-weight: 600;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.country-code {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
:deep(.ip-logs-dialog) {
|
||||
max-width: calc(100vw - 24px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:deep(.ip-logs-dialog) {
|
||||
width: calc(100vw - 24px) !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -6,6 +6,7 @@ import EditDialog from './components/edit.vue';
|
||||
import DeleteDialog from './components/delete.vue';
|
||||
import ActivationRecords from './components/activationRecords.vue';
|
||||
import ExtractRecords from './components/extractRecords.vue';
|
||||
import IpLogs from './components/ipLogs.vue';
|
||||
import {
|
||||
activateCursorEquipment,
|
||||
addCursorEquipment,
|
||||
@@ -13,6 +14,7 @@ import {
|
||||
getCursorEquipmentActivationRecords,
|
||||
getCursorEquipmentDetail,
|
||||
getCursorEquipmentExtractRecords,
|
||||
getCursorEquipmentIpLogs,
|
||||
getCursorEquipmentList,
|
||||
updateCursorEquipment,
|
||||
} from '../../../api/cursorEquipment';
|
||||
@@ -59,6 +61,16 @@ const extractState = reactive({
|
||||
pageSize: 20,
|
||||
});
|
||||
|
||||
const ipLogsState = reactive({
|
||||
loading: false,
|
||||
records: [] as EquipmentRow[],
|
||||
total: 0,
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
});
|
||||
|
||||
const ipLogsVisible = ref(false);
|
||||
|
||||
const statusOptions = [
|
||||
{ label: '未激活', value: 0 },
|
||||
{ label: '已激活', value: 1 },
|
||||
@@ -122,6 +134,13 @@ watch(
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => [ipLogsState.page, ipLogsState.pageSize],
|
||||
() => {
|
||||
if (ipLogsVisible.value) fetchIpLogs();
|
||||
},
|
||||
);
|
||||
|
||||
function pick(raw: any, ...keys: string[]) {
|
||||
for (const key of keys) {
|
||||
if (raw?.[key] !== undefined && raw?.[key] !== null) return raw[key];
|
||||
@@ -167,6 +186,8 @@ function normalizeRow(raw: any): EquipmentRow {
|
||||
lastExtractedAt: formatTime(pick(raw, 'last_extracted_at', 'lastExtractedAt', 'extracted_at')),
|
||||
expiredAt: formatTime(pick(raw, 'expiredAt', 'expired_at', 'expireTime', 'expire_time')),
|
||||
createdAt: formatTime(pick(raw, 'create_time', 'created_at', 'createdAt', 'CreatedAt')),
|
||||
lastLoginIp: pick(raw, 'lastLoginIp', 'last_login_ip') || '',
|
||||
lastLoginIpInfo: raw?.lastLoginIpInfo ?? null,
|
||||
remark: pick(raw, 'remark', 'Remark'),
|
||||
raw,
|
||||
};
|
||||
@@ -343,6 +364,14 @@ function openExtractRecords(row: EquipmentRow) {
|
||||
extractVisible.value = true;
|
||||
}
|
||||
|
||||
function openIpLogs(row: EquipmentRow) {
|
||||
currentRow.value = row;
|
||||
ipLogsState.page = 1;
|
||||
ipLogsState.records = [];
|
||||
ipLogsState.total = 0;
|
||||
ipLogsVisible.value = true;
|
||||
}
|
||||
|
||||
async function fetchActivationRecords() {
|
||||
if (!currentRow.value?.id) return;
|
||||
activationState.loading = true;
|
||||
@@ -385,6 +414,27 @@ async function fetchExtractRecords() {
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchIpLogs() {
|
||||
if (!currentRow.value?.id) return;
|
||||
ipLogsState.loading = true;
|
||||
try {
|
||||
const res = await getCursorEquipmentIpLogs({
|
||||
equipmentId: currentRow.value.id,
|
||||
page: ipLogsState.page,
|
||||
pageSize: ipLogsState.pageSize,
|
||||
});
|
||||
if (res?.code !== 200) {
|
||||
ElMessage.error(res?.msg || '获取 IP 日志失败');
|
||||
return;
|
||||
}
|
||||
const list = Array.isArray(res?.data?.list) ? res.data.list : Array.isArray(res?.data) ? res.data : [];
|
||||
ipLogsState.records = list;
|
||||
ipLogsState.total = Number(res?.data?.total || list.length || 0);
|
||||
} finally {
|
||||
ipLogsState.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function updateDeviceType() {
|
||||
isMobile.value = window.innerWidth <= 768;
|
||||
}
|
||||
@@ -483,6 +533,11 @@ onUnmounted(() => {
|
||||
<el-table-column prop="lastActivatedAt" label="最后激活" width="180">
|
||||
<template #default="{ row }">{{ row.lastActivatedAt || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="最后登录 IP" width="140" align="center">
|
||||
<template #default="{ row }">
|
||||
<span class="ip-col-text">{{ row.lastLoginIp || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="expiredAt" label="过期时间" width="180">
|
||||
<template #default="{ row }">{{ row.expiredAt || '-' }}</template>
|
||||
</el-table-column>
|
||||
@@ -494,6 +549,7 @@ onUnmounted(() => {
|
||||
<el-button v-if="row.status !== 'active'" link type="success" @click="handleActivate(row)">激活</el-button>
|
||||
<el-button link type="info" @click="openActivationRecords(row)">激活记录</el-button>
|
||||
<el-button link type="info" @click="openExtractRecords(row)">提取记录</el-button>
|
||||
<el-button link type="primary" @click="openIpLogs(row)">IP日志</el-button>
|
||||
<el-button link type="danger" @click="openDelete(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -549,6 +605,17 @@ onUnmounted(() => {
|
||||
:total="extractState.total"
|
||||
@refresh="fetchExtractRecords"
|
||||
/>
|
||||
|
||||
<IpLogs
|
||||
v-model="ipLogsVisible"
|
||||
v-model:page="ipLogsState.page"
|
||||
v-model:page-size="ipLogsState.pageSize"
|
||||
:row="currentRow || undefined"
|
||||
:loading="ipLogsState.loading"
|
||||
:records="ipLogsState.records"
|
||||
:total="ipLogsState.total"
|
||||
@refresh="fetchIpLogs"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -657,6 +724,12 @@ onUnmounted(() => {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ip-col-text {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
Reference in New Issue
Block a user