parent
510bf01362
commit
f50aa032b3
@ -0,0 +1,17 @@ |
||||
import request from "@/utils/request"; |
||||
import { AxiosPromise } from "axios"; |
||||
import { RemoteDevInfoVO, UnBindingForm } from "@/api/remote/types"; |
||||
|
||||
export function remoteDevInfo(devId: number): AxiosPromise<RemoteDevInfoVO> { |
||||
return request({ |
||||
url: `/api/equipment/v1/remote/${devId}`, |
||||
method: "GET", |
||||
}); |
||||
} |
||||
export function remoteUnbindingLogicId(data: UnBindingForm) { |
||||
return request({ |
||||
url: `/api/equipment/v1/remote/unbinding`, |
||||
method: "POST", |
||||
data, |
||||
}); |
||||
} |
||||
@ -0,0 +1,53 @@ |
||||
export interface RemoteDevInfoVO { |
||||
devId?: number; |
||||
|
||||
devAdNo?: string; |
||||
|
||||
devSno?: string; |
||||
|
||||
devPppoe?: string; |
||||
|
||||
devVendorName?: string; |
||||
|
||||
devVendorOui?: string; |
||||
|
||||
devTypeName?: string; |
||||
|
||||
devHardVer?: string; |
||||
|
||||
softVer?: string; |
||||
|
||||
domain?: string; |
||||
|
||||
devRemark1?: string; |
||||
|
||||
userSnNo?: string; |
||||
|
||||
useState?: string; |
||||
|
||||
devIp?: string; |
||||
|
||||
devStatus?: string; |
||||
|
||||
customType?: string; |
||||
|
||||
conType?: string; |
||||
|
||||
devOnlineTime?: string; |
||||
|
||||
devAccessType?: string; |
||||
|
||||
devTypeNameDetail?: string; |
||||
|
||||
blacklist?: string; |
||||
|
||||
devRemark4?: string; |
||||
} |
||||
|
||||
export interface UnBindingForm { |
||||
devId?: number; |
||||
devAdNo?: string; |
||||
devSno?: string; |
||||
devVendorOui?: string; |
||||
devRemark4?: string; |
||||
} |
||||
@ -0,0 +1,386 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-card shadow="never" v-loading="loading"> |
||||
<el-descriptions title="设备信息" :column="2" border> |
||||
<template |
||||
#extra |
||||
v-if=" |
||||
remote.devRemark4 != null && |
||||
remote.devStatus != '预解绑' && |
||||
remote.devStatus != '预拆机' |
||||
" |
||||
> |
||||
<el-popconfirm |
||||
width="220" |
||||
confirm-button-text="确认" |
||||
cancel-button-text="取消" |
||||
:icon="InfoFilled" |
||||
@confirm="unbindingLogicId" |
||||
icon-color="#626AEF" |
||||
title="确定解绑逻辑ID吗?" |
||||
> |
||||
<template #reference> |
||||
<el-button type="primary">解绑逻辑ID</el-button> |
||||
</template> |
||||
</el-popconfirm> |
||||
</template> |
||||
<el-descriptions-item |
||||
label="AD编号" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.devAdNo }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备PPPoE帐号" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.devPppoe }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备序列号" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.devVendorOui }}-{{ remote.devSno }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备类型和软件版本" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.devVendorName }} {{ remote.devTypeName }} {{ |
||||
remote.devHardVer |
||||
}} {{ remote.softVer }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备系统管理域" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.domain }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="黑名单状态" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.blacklist }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="电信维护帐号密码" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.devRemark1 }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="逻辑ID" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.userSnNo }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="安装次数" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.useState }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="IP" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.devIp }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备当前状态" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.devStatus }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="客户类型" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.customType }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="拨号方式" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.conType }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="最近一次开机时间" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.devOnlineTime }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备网络侧接口" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.devAccessType }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备类型" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.devTypeNameDetail }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="远程操作" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<div> |
||||
<el-dropdown split-button placement="right"> |
||||
远程操作列表 |
||||
<template #dropdown> |
||||
<el-dropdown-menu> |
||||
<el-scrollbar height="300"> |
||||
<div v-hasPerm="['family:remote:parameter:tree']"> |
||||
<el-dropdown-item>设备参数树浏览</el-dropdown-item> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:ping:test']"> |
||||
<el-dropdown-item divided>设备Ping测试</el-dropdown-item> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:profiles:upload']"> |
||||
<el-dropdown-item divided |
||||
>设备配置文件上传</el-dropdown-item |
||||
> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:terminal:log_file']"> |
||||
<el-dropdown-item divided |
||||
>获取设备终端日志文件</el-dropdown-item |
||||
> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:dev:change']"> |
||||
<el-dropdown-item divided>设备更换</el-dropdown-item> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:dev:reload']"> |
||||
<el-dropdown-item divided>设备远程重启</el-dropdown-item> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:profiles:issued']"> |
||||
<el-dropdown-item divided |
||||
>设备厂商配置文件下发</el-dropdown-item |
||||
> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:full_service:issued']"> |
||||
<el-dropdown-item divided |
||||
>设备全业务配置下发</el-dropdown-item |
||||
> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:soft_ver:upgrade']"> |
||||
<el-dropdown-item divided |
||||
>设备软件版本升级</el-dropdown-item |
||||
> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:loop_back:diagnosis']"> |
||||
<el-dropdown-item divided |
||||
>ATMF5Loopback诊断</el-dropdown-item |
||||
> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:dsl_loop:diagnosis']"> |
||||
<el-dropdown-item divided>DslLoop诊断</el-dropdown-item> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:dev:monitor']"> |
||||
<el-dropdown-item divided>设备监控</el-dropdown-item> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:ida:diagnosis']"> |
||||
<el-dropdown-item divided>IAD诊断</el-dropdown-item> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:service_port:binding']"> |
||||
<el-dropdown-item divided |
||||
>修改业务端口绑定</el-dropdown-item |
||||
> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:terminal:registration']"> |
||||
<el-dropdown-item divided |
||||
>开启终端注册页面</el-dropdown-item |
||||
> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:speed:operation']"> |
||||
<el-dropdown-item divided>测速操作</el-dropdown-item> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:reset:graphs']"> |
||||
<el-dropdown-item divided>终端重置数图</el-dropdown-item> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:iptv:multicast']"> |
||||
<el-dropdown-item divided>重置IPTV组播</el-dropdown-item> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:node:customize']"> |
||||
<el-dropdown-item divided |
||||
>自定义节点定制</el-dropdown-item |
||||
> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:broadband_1_4:itv_2_3']"> |
||||
<el-dropdown-item divided |
||||
>宽带1、4口;ITV 2、3口</el-dropdown-item |
||||
> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:broadband_3_4:itv_1_2']"> |
||||
<el-dropdown-item divided |
||||
>宽带3、4口;ITV 1、2口</el-dropdown-item |
||||
> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:broadband_1:itv_2_3_4']"> |
||||
<el-dropdown-item divided |
||||
>宽带1口;ITV 2、3、4口</el-dropdown-item |
||||
> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:broadband_1_3_4:itv_2']"> |
||||
<el-dropdown-item divided |
||||
>宽带1、3、4口;ITV 2口</el-dropdown-item |
||||
> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:broadband_1_2_3_4']"> |
||||
<el-dropdown-item divided |
||||
>宽带1、 2、3、4口</el-dropdown-item |
||||
> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:broadband_1_3:itv_2']"> |
||||
<el-dropdown-item divided |
||||
>三合一终端宽带1、3口;ITV 2口</el-dropdown-item |
||||
> |
||||
</div> |
||||
<div v-hasPerm="['family:remote:info:update']"> |
||||
<el-dropdown-item divided>通用信息修改</el-dropdown-item> |
||||
</div> |
||||
</el-scrollbar> |
||||
</el-dropdown-menu> |
||||
</template> |
||||
</el-dropdown> |
||||
</div> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="其他操作" |
||||
label-align="left" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ remote.devTypeNameDetail }} |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { RemoteDevInfoVO, UnBindingForm } from "@/api/remote/types"; |
||||
import { remoteDevInfo, remoteUnbindingLogicId } from "@/api/remote"; |
||||
import { InfoFilled } from "@element-plus/icons-vue"; |
||||
|
||||
const route = useRoute(); |
||||
let devId: number = parseInt(<string>route.params.devId); |
||||
const remote = ref<RemoteDevInfoVO>({}); |
||||
const unbindingForm = ref<UnBindingForm>({}); |
||||
const loading = ref<boolean>(false); |
||||
const getData = () => { |
||||
loading.value = true; |
||||
remoteDevInfo(devId) |
||||
.then(({ data }) => { |
||||
remote.value = data; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
const unbindingLogicId = () => { |
||||
let { devId, devAdNo, devSno, devVendorOui, devRemark4 } = remote.value; |
||||
unbindingForm.value = { |
||||
devId, |
||||
devVendorOui, |
||||
devAdNo, |
||||
devSno, |
||||
devRemark4, |
||||
}; |
||||
loading.value = true; |
||||
remoteUnbindingLogicId(unbindingForm.value) |
||||
.then(() => { |
||||
ElMessage({ |
||||
message: "解绑逻辑ID成功", |
||||
type: "success", |
||||
duration: 1000, |
||||
onClose: () => { |
||||
getData(); |
||||
}, |
||||
}); |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
onMounted(() => { |
||||
getData(); |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped> |
||||
:deep(.my-label) { |
||||
background: var(--el-color-white) !important; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,228 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="search-container"> |
||||
<el-form :model="queryForm" :inline="true"> |
||||
<el-row> |
||||
<el-col :span="6"> |
||||
<el-form-item label="查询条件" prop="selectName"> |
||||
<el-select |
||||
v-model="queryForm.selectName" |
||||
placeholder="请选择" |
||||
style="width: 240px" |
||||
@change="resetSelect" |
||||
clearable |
||||
> |
||||
<el-option |
||||
v-for="item in options" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="6" v-if="queryForm.selectName !== undefined"> |
||||
<el-form-item prop="selectValue"> |
||||
<el-input |
||||
v-model="queryForm.selectValue" |
||||
placeholder="请输入" |
||||
style="width: 300px" |
||||
/> |
||||
</el-form-item> |
||||
</el-col> |
||||
<el-col :span="buttonColSpan"> |
||||
<el-form-item> |
||||
<el-button type="primary" :icon="Search" @click="handleQuery" |
||||
>搜索 |
||||
</el-button> |
||||
</el-form-item> |
||||
</el-col> |
||||
</el-row> |
||||
</el-form> |
||||
</div> |
||||
<el-card shadow="never"> |
||||
<template #header> |
||||
<div class="head-parent-right"> |
||||
<table-bar :columns="columns" @change-columns="changeColumns" /> |
||||
</div> |
||||
</template> |
||||
<div class="any-table"> |
||||
<el-table |
||||
:data="tableData" |
||||
style="width: 100%" |
||||
max-height="380" |
||||
v-loading="loading" |
||||
> |
||||
<el-table-column |
||||
label="设备标识" |
||||
align="center" |
||||
width="240" |
||||
fixed |
||||
show-overflow-tooltip |
||||
v-if="columns[0].show" |
||||
> |
||||
<template #default="scope"> |
||||
<el-button |
||||
type="primary" |
||||
link |
||||
@click="skipRemoteInfo(scope.row.devId)" |
||||
>{{ scope.row.devVendorOui }}-{{ scope.row.devSno }}</el-button |
||||
> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="AD编号" |
||||
align="center" |
||||
width="200" |
||||
prop="devAdNo" |
||||
v-if="columns[1].show" |
||||
/> |
||||
<el-table-column |
||||
label="宽带账号" |
||||
align="center" |
||||
prop="devPppoe" |
||||
width="200" |
||||
v-if="columns[2].show" |
||||
/> |
||||
<el-table-column |
||||
label="设备类型" |
||||
align="center" |
||||
width="200" |
||||
show-overflow-tooltip |
||||
v-if="columns[3].show" |
||||
> |
||||
<template #default="scope"> |
||||
{{ scope.row.devVendorName }} {{ |
||||
scope.row.devTypeName |
||||
}} {{ scope.row.devHardVer }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="软件版本" |
||||
align="center" |
||||
prop="softVer" |
||||
width="200" |
||||
v-if="columns[4].show" |
||||
/> |
||||
<el-table-column |
||||
label="设备上行方式" |
||||
align="center" |
||||
v-if="columns[5].show" |
||||
/> |
||||
<el-table-column |
||||
label="设备在线时间" |
||||
align="center" |
||||
prop="devOnlineTime" |
||||
v-if="columns[6].show" |
||||
/> |
||||
<el-table-column |
||||
label="设备状态" |
||||
align="center" |
||||
prop="devStatus" |
||||
v-if="columns[7].show" |
||||
> |
||||
<template #default="scope"> |
||||
<el-tag>{{ scope.row.devStatus }}</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="是否合法" |
||||
align="center" |
||||
v-if="columns[8].show" |
||||
> |
||||
<template #default="scope"> |
||||
<el-tag v-if="scope.row.devStatus === '未注册'">非法</el-tag> |
||||
<el-tag v-else>正常</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column |
||||
label="在线状态" |
||||
align="center" |
||||
prop="devOnline" |
||||
v-if="columns[9].show" |
||||
> |
||||
<template #default="scope"> |
||||
<el-tag>{{ scope.row.devOnline }}</el-tag> |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" align="center" width="200"> |
||||
<template #default> |
||||
<el-button link type="primary">故障管理</el-button> |
||||
<el-divider direction="vertical" /> |
||||
<el-button link type="primary">网络应用</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<pagination |
||||
v-if="total > 0" |
||||
v-model:total="total" |
||||
v-model:page="queryForm.pageNum" |
||||
v-model:limit="queryForm.pageSize" |
||||
@pagination="handleQuery" |
||||
/> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { Search } from "@element-plus/icons-vue"; |
||||
import { RemoteEquipmentTable } from "@/api/resources-equipment/types"; |
||||
import { remoteTablePage } from "@/api/resources-equipment"; |
||||
defineOptions({ |
||||
name: "RemoteOperation", |
||||
inheritAttrs: false, |
||||
}); |
||||
const queryForm = ref<SelectForm>({ |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
}); |
||||
const total = ref<number>(0); |
||||
const options = ref<OptionType[]>([ |
||||
{ label: "设备序列号", value: "devSno" }, |
||||
{ label: "设备AD编号", value: "devAdNo" }, |
||||
]); |
||||
const loading = ref<boolean>(false); |
||||
const buttonColSpan = computed(() => { |
||||
return queryForm.value.selectName === undefined ? 18 : 12; |
||||
}); |
||||
const router = useRouter(); |
||||
const tableData = ref<RemoteEquipmentTable[]>([]); |
||||
const resetSelect = () => { |
||||
queryForm.value.selectValue = undefined; |
||||
}; |
||||
const columns = ref<TableColumns[]>([ |
||||
{ name: "设备标识", show: true }, |
||||
{ name: "AD编号", show: true }, |
||||
{ name: "PPPOE账号", show: true }, |
||||
{ name: "设备类型", show: true }, |
||||
{ name: "软件版本", show: true }, |
||||
{ name: "设备上行方式", show: false }, |
||||
{ name: "设备在线时间", show: false }, |
||||
{ name: "设备状态", show: true }, |
||||
{ name: "是否合法", show: true }, |
||||
{ name: "在线状态", show: true }, |
||||
]); |
||||
const changeColumns = (newColumns: TableColumns[]) => { |
||||
columns.value = newColumns; |
||||
}; |
||||
const handleQuery = () => { |
||||
if (queryForm.value.selectValue === undefined) { |
||||
return; |
||||
} |
||||
loading.value = true; |
||||
remoteTablePage(queryForm.value) |
||||
.then(({ data }) => { |
||||
tableData.value = data.list; |
||||
total.value = data.total; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
const skipRemoteInfo = (devId: number) => { |
||||
router.push({ path: `/resources/remote-info/${devId}` }); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped></style> |
||||
Loading…
Reference in new issue