parent
78fb8d2a78
commit
542e863193
@ -0,0 +1,20 @@ |
||||
import request from "@/utils/request"; |
||||
import { FaultBasicInfoVO, FaultQuery, FaultQueryVO } from "@/api/fault/types"; |
||||
import { AxiosPromise } from "axios"; |
||||
|
||||
export function faultQueryList(data: FaultQuery): AxiosPromise<FaultQueryVO[]> { |
||||
return request({ |
||||
url: "/api/fault/v1/query", |
||||
method: "POST", |
||||
data, |
||||
}); |
||||
} |
||||
export function faultBasicInfoQuery( |
||||
data: FaultQuery |
||||
): AxiosPromise<FaultBasicInfoVO> { |
||||
return request({ |
||||
url: "/api/fault/v1/basic_info", |
||||
method: "POST", |
||||
data, |
||||
}); |
||||
} |
||||
@ -0,0 +1,41 @@ |
||||
export interface FaultQueryVO { |
||||
devId?: number; |
||||
|
||||
devSno?: string; |
||||
|
||||
devPppoe?: string; |
||||
|
||||
devVendorOui?: string; |
||||
|
||||
devAdNo?: string; |
||||
} |
||||
export interface FaultQuery { |
||||
label: string; |
||||
value: string; |
||||
ping: string[]; |
||||
} |
||||
export interface FaultBasicInfoVO { |
||||
devId?: number; |
||||
|
||||
devPppoe?: string; |
||||
|
||||
devVendorName?: string; |
||||
|
||||
devTypeName?: string; |
||||
|
||||
devHardVer?: string; |
||||
|
||||
userSnNo?: string; |
||||
|
||||
customType?: string; |
||||
|
||||
devIp?: string; |
||||
|
||||
devStatus?: string; |
||||
|
||||
devAccessType?: string; |
||||
|
||||
devSno?: string; |
||||
|
||||
softVer?: string; |
||||
} |
||||
@ -0,0 +1,252 @@ |
||||
<template> |
||||
<el-scrollbar height="450" v-loading="loading"> |
||||
<el-descriptions :column="3" border> |
||||
<template #title> |
||||
<div style="display: flex; align-items: center"> |
||||
<el-icon size="15"> <Grid /> </el-icon> <span |
||||
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>用户信息</span |
||||
> |
||||
</div> |
||||
</template> |
||||
<el-descriptions-item |
||||
label="宽带账号" |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ vo.devPppoe }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="公客/商客" |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ vo.customType }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label=" 逻辑ID" |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ vo.userSnNo }} |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
<el-descriptions :column="3" border class="mt-3"> |
||||
<template #title> |
||||
<div style="display: flex; align-items: center"> |
||||
<el-icon size="15"> <Grid /> </el-icon> <span |
||||
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>终端信息</span |
||||
> |
||||
</div> |
||||
</template> |
||||
<el-descriptions-item |
||||
label="终端厂家" |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ vo.devVendorName }} </el-descriptions-item |
||||
>> |
||||
<el-descriptions-item |
||||
label="终端型号" |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ vo.devTypeName }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label=" 终端序列号" |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ vo.devSno }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label=" 终端注册状态" |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ vo.devStatus }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label=" 终端硬件版本" |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ vo.devHardVer }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label=" 软件版本" |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ vo.softVer }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label=" 网管IP" |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ vo.devIp }} |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label=" 设备网络接口" |
||||
label-align="center" |
||||
align="left" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
{{ vo.devAccessType }} |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
<div class="tags-container mt-2"> |
||||
<div |
||||
@click="changTab(1)" |
||||
:class="'tags-item ' + (isActive(1) ? 'active' : '')" |
||||
> |
||||
有线无法上网 |
||||
</div> |
||||
<div |
||||
@click="changTab(2)" |
||||
:class="'tags-item ' + (isActive(2) ? 'active' : '')" |
||||
class="tags-item" |
||||
> |
||||
上网速度慢 |
||||
</div> |
||||
<div |
||||
@click="changTab(3)" |
||||
:class="'tags-item ' + (isActive(3) ? 'active' : '')" |
||||
class="tags-item" |
||||
> |
||||
用户异常掉线 |
||||
</div> |
||||
</div> |
||||
<div> |
||||
<div v-show="currentTab === 1"> |
||||
<el-card shadow="never"> |
||||
<template #header> |
||||
<div class="flex justify-between"> |
||||
<div style="display: flex; align-items: center"> |
||||
<el-icon size="15"> <Grid /> </el-icon> <span |
||||
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>有线无法上网</span |
||||
> |
||||
</div> |
||||
<div> |
||||
<el-button type="primary">开始诊断</el-button> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<el-empty description="暂无任何信息" /> |
||||
</el-card> |
||||
</div> |
||||
<div v-show="currentTab === 2">上网速度慢</div> |
||||
<div v-show="currentTab === 3">用户异常掉线</div> |
||||
</div> |
||||
</el-scrollbar> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { Grid } from "@element-plus/icons-vue"; |
||||
import { faultBasicInfoQuery } from "@/api/fault"; |
||||
import { FaultBasicInfoVO, FaultQuery, FaultQueryVO } from "@/api/fault/types"; |
||||
|
||||
const loading = ref<boolean>(false); |
||||
const currentTab = ref<number>(1); |
||||
|
||||
function isActive(tab: number) { |
||||
return currentTab.value === tab; |
||||
} |
||||
|
||||
const changTab = (tab: number) => { |
||||
currentTab.value = tab; |
||||
}; |
||||
const vo = ref<FaultBasicInfoVO>({}); |
||||
const getBasicInfo = (queryVO: FaultQueryVO) => { |
||||
loading.value = true; |
||||
let searchForm: FaultQuery = { |
||||
label: "devSno", |
||||
value: queryVO.devSno, |
||||
}; |
||||
faultBasicInfoQuery(searchForm) |
||||
.then(({ data }) => { |
||||
vo.value = data; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
defineExpose({ getBasicInfo }); |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.tags-container { |
||||
width: 100%; |
||||
height: 50px; |
||||
color: #68758e; |
||||
background-color: var(--el-bg-color); |
||||
border: 1px solid var(--el-border-color-light); |
||||
box-shadow: 0 1px 1px var(--el-box-shadow-light); |
||||
|
||||
.tags-item { |
||||
display: inline-block; |
||||
padding: 3px 8px; |
||||
margin: 8px 0 0 5px; |
||||
font-size: 14px; |
||||
line-height: 25px; |
||||
min-width: 100px; |
||||
cursor: pointer; |
||||
text-align: center; |
||||
background-color: #fff; |
||||
border: 1px solid var(--el-border-color-light); |
||||
border-radius: 6px; |
||||
|
||||
&:hover { |
||||
color: var(--el-color-primary); |
||||
} |
||||
|
||||
&:first-of-type { |
||||
margin-left: 5px; |
||||
} |
||||
|
||||
&:last-of-type { |
||||
margin-right: 15px; |
||||
} |
||||
|
||||
&.active { |
||||
color: var(--el-color-primary); |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,242 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-card shadow="never"> |
||||
<el-row> |
||||
<el-col |
||||
:span="24" |
||||
style="display: flex; justify-content: center; align-items: center" |
||||
> |
||||
<div class="w-160"> |
||||
<el-input |
||||
style="position: relative" |
||||
v-model="searchForm.value" |
||||
@focus="flag = true" |
||||
placeholder="ITMS3.0 搜索" |
||||
/> |
||||
<div class="dropdown" v-if="flag" v-loading="loading"> |
||||
<div class="close" @click="flag = false"> |
||||
<el-icon size="18"><Close /></el-icon> |
||||
</div> |
||||
<el-scrollbar max-height="200"> |
||||
<div> |
||||
<ul> |
||||
<li v-if="faultOptions.length === 0">暂无数据</li> |
||||
<li |
||||
v-for="(item, index) in faultOptions" |
||||
@click="loadBasicInfo(item)" |
||||
:key="index" |
||||
> |
||||
设备标识:{{ item.devVendorOui }}-{{ |
||||
item.devSno |
||||
}} |
||||
宽带账号: {{ item.devPppoe }} AD编号: {{ item.devAdNo }} |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
</el-scrollbar> |
||||
</div> |
||||
</div> |
||||
<div class="ml-3"> |
||||
<el-button type="primary" @click="getData">搜索</el-button> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
<el-row> |
||||
<el-col |
||||
class="mt-4" |
||||
:span="24" |
||||
style="display: flex; justify-content: center; align-items: center" |
||||
> |
||||
<div> |
||||
<el-radio-group v-model="searchForm.label"> |
||||
<el-radio value="devSno">设备序列号</el-radio> |
||||
<el-radio value="adNo">AD编号</el-radio> |
||||
<el-radio value="pppoeAccount">上网账号</el-radio> |
||||
<el-radio value="identificationNumber">身份证号</el-radio> |
||||
<el-radio value="phoneNumber">电话号码</el-radio> |
||||
</el-radio-group> |
||||
</div> |
||||
<div class="ml-5"> |
||||
<el-checkbox-group v-model="searchForm.ping" class="mr-2"> |
||||
<el-checkbox label="PING" value="ping" /> |
||||
</el-checkbox-group> |
||||
</div> |
||||
</el-col> |
||||
</el-row> |
||||
<div class="w-full"> |
||||
<div class="tags-container"> |
||||
<div |
||||
@click="changTab(0)" |
||||
:class="'tags-item ' + (isActive(0) ? 'active' : '')" |
||||
> |
||||
基本信息查询 |
||||
</div> |
||||
<div |
||||
@click="changTab(1)" |
||||
:class="'tags-item ' + (isActive(1) ? 'active' : '')" |
||||
> |
||||
业务终端状态 |
||||
</div> |
||||
<div |
||||
@click="changTab(2)" |
||||
:class="'tags-item ' + (isActive(2) ? 'active' : '')" |
||||
> |
||||
故障诊断应用 |
||||
</div> |
||||
<div |
||||
@click="changTab(3)" |
||||
:class="'tags-item ' + (isActive(3) ? 'active' : '')" |
||||
> |
||||
高级查询 |
||||
</div> |
||||
<div |
||||
@click="changTab(4)" |
||||
:class="'tags-item ' + (isActive(4) ? 'active' : '')" |
||||
> |
||||
健康库 |
||||
</div> |
||||
<div |
||||
@click="changTab(5)" |
||||
:class="'tags-item ' + (isActive(5) ? 'active' : '')" |
||||
> |
||||
专家库 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="w-full mt-3"> |
||||
<div v-show="currentTab === 0"> |
||||
<basic-info-query ref="basicInfoQueryRef" /> |
||||
</div> |
||||
<div v-show="currentTab === 1">业务终端状态</div> |
||||
<div v-show="currentTab === 2">故障诊断应用</div> |
||||
<div v-show="currentTab === 3">高级查询</div> |
||||
<div v-show="currentTab === 4">健康库</div> |
||||
<div v-show="currentTab === 5">专家库</div> |
||||
</div> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import BasicInfoQuery from "@/views/family/operate/fault-management/components/basicInfoQuery.vue"; |
||||
import { FaultQuery, FaultQueryVO } from "@/api/fault/types"; |
||||
import { faultQueryList } from "@/api/fault"; |
||||
import { Close } from "@element-plus/icons-vue"; |
||||
|
||||
defineOptions({ |
||||
name: "FaultManagement", |
||||
inheritAttrs: false, |
||||
}); |
||||
const loading = ref<string>(); |
||||
const searchForm = ref<FaultQuery>({ |
||||
label: "devSno", |
||||
value: "", |
||||
ping: [], |
||||
}); |
||||
const basicInfoQueryRef = ref(); |
||||
const flag = ref<boolean>(false); |
||||
const faultOptions = ref<FaultQueryVO[]>([]); |
||||
const currentTab = ref<number>(0); |
||||
function isActive(tab: number) { |
||||
return currentTab.value === tab; |
||||
} |
||||
const changTab = (tab: number) => { |
||||
currentTab.value = tab; |
||||
}; |
||||
const getData = () => { |
||||
loading.value = true; |
||||
faultQueryList(searchForm.value) |
||||
.then(({ data }) => { |
||||
faultOptions.value = data; |
||||
}) |
||||
.finally(() => { |
||||
loading.value = false; |
||||
}); |
||||
}; |
||||
const loadBasicInfo = (vo: FaultQueryVO) => { |
||||
flag.value = false; |
||||
basicInfoQueryRef.value.getBasicInfo(vo); |
||||
}; |
||||
</script> |
||||
|
||||
<style scoped> |
||||
:deep(.el-card__body) { |
||||
padding: 5px; |
||||
} |
||||
.tags-container { |
||||
width: 100%; |
||||
height: 50px; |
||||
color: #68758e; |
||||
background-color: var(--el-bg-color); |
||||
border: 1px solid var(--el-border-color-light); |
||||
box-shadow: 0 1px 1px var(--el-box-shadow-light); |
||||
|
||||
.tags-item { |
||||
display: inline-block; |
||||
padding: 3px 8px; |
||||
margin: 8px 0 0 5px; |
||||
font-size: 14px; |
||||
line-height: 25px; |
||||
min-width: 100px; |
||||
cursor: pointer; |
||||
text-align: center; |
||||
background-color: #fff; |
||||
border: 1px solid var(--el-border-color-light); |
||||
border-radius: 6px; |
||||
&:hover { |
||||
color: var(--el-color-primary); |
||||
} |
||||
|
||||
&:first-of-type { |
||||
margin-left: 5px; |
||||
} |
||||
|
||||
&:last-of-type { |
||||
margin-right: 15px; |
||||
} |
||||
|
||||
&.active { |
||||
color: var(--el-color-primary); |
||||
} |
||||
} |
||||
} |
||||
:deep(.my-label) { |
||||
width: 60px !important; |
||||
background: var(--el-color-white) !important; |
||||
} |
||||
.dropdown { |
||||
border: 1px solid #ccc; |
||||
width: inherit; |
||||
background-color: var(--el-color-white); |
||||
position: absolute; |
||||
z-index: 999; |
||||
overflow-y: auto; |
||||
line-height: 32px; |
||||
font-size: 14px; |
||||
text-align: center; |
||||
color: var(--el-input-text-color, var(--el-text-color-regular)); |
||||
} |
||||
.dropdown .close { |
||||
height: 20px; |
||||
position: absolute; |
||||
top: -3px; |
||||
z-index: 999; |
||||
cursor: pointer; |
||||
right: 0; |
||||
} |
||||
|
||||
.dropdown ul { |
||||
list-style: none; |
||||
padding: 0; |
||||
margin: 0; |
||||
} |
||||
|
||||
.dropdown li { |
||||
padding: 5px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.dropdown li:hover { |
||||
background-color: var(--el-color-info-light-9); |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue