parent
b43a99e711
commit
7b95025d8c
@ -0,0 +1,26 @@ |
||||
export interface EquipmentAdvanceQuery { |
||||
devSno?: string; |
||||
devMac?: string; |
||||
devAdNo?: string; |
||||
devPppoe?: string; |
||||
logicId?: string; |
||||
startTime?: string; |
||||
endTime?: string; |
||||
regionAreaId?: number; |
||||
|
||||
devVendorName?: string; |
||||
devTypeName?: string; |
||||
devHardVer?: string; |
||||
softVer?: string; |
||||
devAccessType?: string; |
||||
devType?: string; |
||||
|
||||
devOnline?: string; |
||||
devStatus?: string; |
||||
devIp?: string; |
||||
|
||||
service?: string; |
||||
voipPhone?: string; |
||||
sortColumn?: string; |
||||
sortRules?: string; |
||||
} |
||||
@ -0,0 +1,585 @@ |
||||
<template> |
||||
<div class="app-container"> |
||||
<el-form :model="formData"> |
||||
<el-descriptions :column="3" border> |
||||
<template #title> |
||||
<div |
||||
style=" |
||||
display: flex; |
||||
align-items: center; |
||||
margin-left: 3px; |
||||
margin-top: 5px; |
||||
" |
||||
> |
||||
<el-icon size="15"> <Grid /> </el-icon> <span |
||||
style="font-weight: 700; font-size: 14px; line-height: 16px" |
||||
>设备基本信息</span |
||||
> |
||||
</div> |
||||
</template> |
||||
<template #extra> |
||||
<el-button |
||||
type="primary" |
||||
style="margin-top: 5px; margin-right: 10px" |
||||
:icon="Search" |
||||
@click="skipIndex" |
||||
>搜索</el-button |
||||
> |
||||
</template> |
||||
<el-descriptions-item |
||||
label="设备序列号" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="devSno"> |
||||
<el-input |
||||
v-model="formData.devSno" |
||||
placeholder="请输入设备序列号" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备MAC地址" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="devMac"> |
||||
<el-input |
||||
v-model="formData.devMac" |
||||
placeholder="请输入设备MAC地址" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="逻辑ID" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="logicId"> |
||||
<el-input v-model="formData.logicId" placeholder="请输入逻辑ID" /> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备PPPOE" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="devPppoe"> |
||||
<el-input |
||||
v-model="formData.devPppoe" |
||||
placeholder="请输入PPPOE账号" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="AD编号" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="devAdNo"> |
||||
<el-input v-model="formData.devAdNo" placeholder="请输入AD编号" /> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备系统管理域" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="regionAreaId"> |
||||
<el-tree-select |
||||
v-model="formData.regionAreaId" |
||||
placeholder="请选择所属管理域" |
||||
:data="domainOptions" |
||||
filterable |
||||
check-strictly |
||||
:render-after-expand="false" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="开始时间" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="startTime"> |
||||
<el-date-picker |
||||
v-model="formData.startTime" |
||||
type="datetime" |
||||
style="width: 100%" |
||||
value-format="YYYY-MM-DD HH:mm:ss" |
||||
placeholder="请选择开始时间" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="结束时间" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="endTime"> |
||||
<el-date-picker |
||||
v-model="formData.endTime" |
||||
type="datetime" |
||||
style="width: 100%" |
||||
value-format="YYYY-MM-DD HH:mm:ss" |
||||
placeholder="请选择结束时间" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
/> |
||||
</el-descriptions> |
||||
<el-descriptions :column="3" border> |
||||
<template #title> |
||||
<div |
||||
style=" |
||||
display: flex; |
||||
align-items: center; |
||||
margin-left: 3px; |
||||
margin-top: 5px; |
||||
" |
||||
> |
||||
<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="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="devVendorName"> |
||||
<el-select |
||||
v-model="formData.devVendorName" |
||||
clearable |
||||
placeholder="请选择设备供应商" |
||||
> |
||||
<el-option |
||||
v-for="item in vendorNameOption" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备型号" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="devTypeName"> |
||||
<el-select |
||||
v-model="formData.devTypeName" |
||||
clearable |
||||
placeholder="请选择设备型号" |
||||
> |
||||
<el-option |
||||
v-for="item in typeNameOption" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备硬件版本" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="devHardVer"> |
||||
<el-select |
||||
v-model="formData.devHardVer" |
||||
clearable |
||||
placeholder="设备硬件版本" |
||||
> |
||||
<el-option |
||||
v-for="item in hardVerOption" |
||||
:key="item.value" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备软件版本" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="softVer"> |
||||
<el-select |
||||
v-model="formData.softVer" |
||||
filterable |
||||
placeholder="请选择软件版本" |
||||
> |
||||
<el-option |
||||
v-for="item in softVerOption" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
:key="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备网络侧接口" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="180px" |
||||
> |
||||
<el-form-item style="margin-bottom: 0" prop="devAccessType"> |
||||
<dictionary |
||||
v-model="formData.devAccessType" |
||||
type-code="dev_access_type" |
||||
placeholder="请选择设备网络侧接口" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备类型" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="180px" |
||||
> |
||||
<el-form-item style="margin-bottom: 0" prop="devType"> |
||||
<dictionary |
||||
v-model="formData.devType" |
||||
placeholder="请选择设备类型" |
||||
type-code="dev_type_name" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
<el-descriptions :column="3" border> |
||||
<template #title> |
||||
<div |
||||
style=" |
||||
display: flex; |
||||
align-items: center; |
||||
margin-left: 3px; |
||||
margin-top: 5px; |
||||
" |
||||
> |
||||
<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="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="devOnline"> |
||||
<dictionary |
||||
type-code="dev_online" |
||||
v-model="formData.devOnline" |
||||
placeholder="请选择设备在线状态" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="IP地址" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="180px" |
||||
> |
||||
<el-form-item prop="devIp"> |
||||
<ip-address v-model="formData.devIp" /> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="设备状态" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="devIp"> |
||||
<dictionary |
||||
placeholder="请选择设备状态" |
||||
type-code="dev_status" |
||||
v-model="formData.devStatus" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
<el-descriptions :column="3" border> |
||||
<template #title> |
||||
<div |
||||
style=" |
||||
display: flex; |
||||
align-items: center; |
||||
margin-left: 3px; |
||||
margin-top: 5px; |
||||
" |
||||
> |
||||
<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="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="service"> |
||||
<el-select |
||||
v-model="formData.service" |
||||
placeholder="请选择已开通的业务" |
||||
> |
||||
<el-option |
||||
v-for="item in serviceList" |
||||
:label="item.label" |
||||
:value="item.value" |
||||
:key="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="VOIP电话号码" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<el-form-item prop="voipPhone"> |
||||
<el-input |
||||
v-model="formData.voipPhone" |
||||
placeholder="请输入VOIP电话号码" |
||||
/> |
||||
</el-form-item> |
||||
</el-descriptions-item> |
||||
<el-descriptions-item |
||||
label="" |
||||
label-align="center" |
||||
align="center" |
||||
label-class-name="my-label" |
||||
class-name="my-content" |
||||
width="150px" |
||||
/> |
||||
</el-descriptions> |
||||
<el-descriptions :column="1" border> |
||||
<template #title> |
||||
<div |
||||
style=" |
||||
display: flex; |
||||
align-items: center; |
||||
margin-left: 3px; |
||||
margin-top: 5px; |
||||
" |
||||
> |
||||
<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-align="center" |
||||
align="center" |
||||
label-class-name="my-label2" |
||||
class-name="my-content" |
||||
width="150px" |
||||
> |
||||
<div class="flex justify-center"> |
||||
<span style="text-align: center; line-height: 32px">依照</span> |
||||
<el-form-item prop="sortColumn" ml-2> |
||||
<el-select |
||||
style="width: 200px" |
||||
v-model="formData.sortColumn" |
||||
placeholder="请选择排序字段" |
||||
> |
||||
<el-option |
||||
v-for="item in sortColumn" |
||||
:value="item.value" |
||||
:label="item.label" |
||||
:key="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<el-form-item prop="sortRules" class="ml-2 mr-2"> |
||||
<el-select |
||||
style="width: 150px" |
||||
v-model="formData.sortRules" |
||||
placeholder="请选择排序规则" |
||||
> |
||||
<el-option |
||||
v-for="item in sortRules" |
||||
:value="item.value" |
||||
:label="item.label" |
||||
:key="item.value" |
||||
/> |
||||
</el-select> |
||||
</el-form-item> |
||||
<span style="text-align: center; line-height: 32px">排序</span> |
||||
</div> |
||||
</el-descriptions-item> |
||||
</el-descriptions> |
||||
</el-form> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
import { EquipmentAdvanceQuery } from "@/api/advance-query/types"; |
||||
import { Grid, Search } from "@element-plus/icons-vue"; |
||||
import { getDomainOptions } from "@/api/domain"; |
||||
import { |
||||
getHardVerOption, |
||||
getTypeNameOption, |
||||
getVendorNameOption, |
||||
} from "@/api/device-type"; |
||||
import { getMergeSoftVerOption } from "@/api/device-type-ver"; |
||||
import IpAddress from "@/views/resources/equipment/components/IpAddress.vue"; |
||||
import { serviceOption } from "@/api/service"; |
||||
|
||||
const formData = ref<EquipmentAdvanceQuery>({}); |
||||
const router = useRouter(); |
||||
const domainOptions = ref<OptionType[]>([]); |
||||
const vendorNameOption = ref<OptionType[]>([]); |
||||
const typeNameOption = ref<OptionType[]>([]); |
||||
const hardVerOption = ref<OptionType[]>([]); |
||||
const softVerOption = ref<OptionType[]>([]); |
||||
const sortColumn = ref<OptionType[]>([ |
||||
{ label: "AD编号", value: "DEV_AD_NO" }, |
||||
{ label: "设备在线时间", value: "DEV_ONLINE_TIME" }, |
||||
{ label: "设备标识", value: "DEV_SNO" }, |
||||
{ label: "系统管理域", value: "REGION_AREA_ID" }, |
||||
]); |
||||
const sortRules = ref<OptionType[]>([ |
||||
{ label: "升序", value: "ASC" }, |
||||
{ label: "降序", value: "DESC" }, |
||||
]); |
||||
const serviceList = ref<OptionType[]>([]); |
||||
function loadDomainOptions() { |
||||
getDomainOptions().then(({ data }) => { |
||||
domainOptions.value = data; |
||||
}); |
||||
} |
||||
|
||||
const loadVendorNameOption = () => { |
||||
getVendorNameOption().then(({ data }) => { |
||||
vendorNameOption.value = data; |
||||
}); |
||||
}; |
||||
const loadTypeNameOption = () => { |
||||
getTypeNameOption("").then(({ data }) => { |
||||
typeNameOption.value = data; |
||||
}); |
||||
}; |
||||
const loadHardVerOption = () => { |
||||
getHardVerOption("").then(({ data }) => { |
||||
hardVerOption.value = data; |
||||
}); |
||||
}; |
||||
const loadSoftVerOption = () => { |
||||
getMergeSoftVerOption().then(({ data }) => { |
||||
softVerOption.value = data; |
||||
}); |
||||
}; |
||||
const loadServiceOptionOption = () => { |
||||
serviceOption().then(({ data }) => { |
||||
serviceList.value = data; |
||||
}); |
||||
}; |
||||
const skipIndex = () => { |
||||
let obj = JSON.stringify(formData.value); |
||||
let values = Object.values(formData.value); |
||||
if (values.length === 0) { |
||||
ElMessage.error({ message: "请至少选择一个参数", duration: 2000 }); |
||||
return; |
||||
} |
||||
router.push({ |
||||
path: `/resources/equipment`, |
||||
query: { item: obj }, |
||||
}); |
||||
}; |
||||
onMounted(async () => { |
||||
await loadDomainOptions(); |
||||
await loadVendorNameOption(); |
||||
await loadTypeNameOption(); |
||||
await loadHardVerOption(); |
||||
await loadSoftVerOption(); |
||||
await loadServiceOptionOption(); |
||||
}); |
||||
</script> |
||||
|
||||
<style scoped> |
||||
:deep(.my-label) { |
||||
background: var(--el-color-white) !important; |
||||
} |
||||
|
||||
:deep(.el-form-item--default) { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
:deep(.my-label2) { |
||||
width: 0 !important; |
||||
display: none !important; |
||||
background: var(--el-color-white) !important; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,36 @@ |
||||
<template> |
||||
<div class="my_ip_address_input"> |
||||
<template v-for="index in indexes" :key="index"> |
||||
<el-input |
||||
v-model="ipAddress[index]" |
||||
@keyup="handleChange" |
||||
oninput="value=value.replace(/[^\d]/g,'')&&value>255?255:value" |
||||
/> |
||||
<span v-if="index !== 3">.</span> |
||||
</template> |
||||
</div> |
||||
</template> |
||||
|
||||
<script setup lang="ts"> |
||||
const indexes = [0, 1, 2, 3]; |
||||
const ipAddress = ref<string[]>([]); |
||||
const emits = defineEmits(["update:modelValue"]); |
||||
function handleChange() { |
||||
emits("update:modelValue", ipAddress.value.join(".")); |
||||
} |
||||
</script> |
||||
<style scoped lang="scss"> |
||||
.my_ip_address_input { |
||||
border-radius: 4px; |
||||
width: 100%; |
||||
display: block; |
||||
|
||||
.el-input { |
||||
width: 22%; |
||||
} |
||||
} |
||||
:deep(.el-input__inner) { |
||||
border: none !important; |
||||
text-align: center; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue