From 7b95025d8cff7cdd0ff5456d443f1dc46a0b5b21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=B0=8F=E6=9E=97?= <320730042@qq.com>
Date: Thu, 5 Sep 2024 11:13:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=90=88=E5=B9=B6=E5=B7=A5=E5=8D=95?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/advance-query/types.ts                |  26 +
 src/api/fault/types.ts                        |   8 +-
 src/api/resources-equipment/index.ts          |  14 +-
 src/api/service/index.ts                      |   6 +
 src/router/index.ts                           |  13 +
 .../components/AdvancedQueries.vue            | 102 +--
 .../components/basicInfoQuery.vue             |   4 +-
 .../family/operate/fault-management/index.vue |   6 +-
 .../components/RemoteOperateInfo.vue          |   1 -
 src/views/resources/device-type/index.vue     |  28 +-
 .../components/EquipmentAdvanceQuery.vue      | 585 ++++++++++++++++++
 .../equipment/components/EquipmentEdit.vue    |  93 +--
 .../equipment/components/IpAddress.vue        |  36 ++
 src/views/resources/equipment/index.vue       | 102 ++-
 14 files changed, 881 insertions(+), 143 deletions(-)
 create mode 100644 src/api/advance-query/types.ts
 create mode 100644 src/views/resources/equipment/components/EquipmentAdvanceQuery.vue
 create mode 100644 src/views/resources/equipment/components/IpAddress.vue

diff --git a/src/api/advance-query/types.ts b/src/api/advance-query/types.ts
new file mode 100644
index 0000000..ff2aa07
--- /dev/null
+++ b/src/api/advance-query/types.ts
@@ -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;
+}
diff --git a/src/api/fault/types.ts b/src/api/fault/types.ts
index 1cbc9e5..cfcd359 100644
--- a/src/api/fault/types.ts
+++ b/src/api/fault/types.ts
@@ -11,7 +11,7 @@ export interface FaultQueryVO {
 }
 export interface FaultQuery {
   label: string;
-  value: string;
+  value: any;
   ping: string[];
 }
 export interface FaultBasicInfoVO {
@@ -48,10 +48,10 @@ export interface FaultDiagnosisResult {
 }
 export interface AlgForm {
   h323Enable?: string;
-  sIPEnable?: string;
-  rTSPEnable?: string;
+  sipEnable?: string;
+  rtspEnable?: string;
   l2TPEnable?: string;
-  iPSECEnable?: string;
+  ipsecEnable?: string;
 }
 
 export interface CpeForm {
diff --git a/src/api/resources-equipment/index.ts b/src/api/resources-equipment/index.ts
index 318be6f..6358abd 100644
--- a/src/api/resources-equipment/index.ts
+++ b/src/api/resources-equipment/index.ts
@@ -4,10 +4,12 @@ import {
   EquipmentEditForm,
   EquipmentResult,
   EquipmentTableResult,
-  PrivateProfile, RemoteEquipmentTableResult
+  PrivateProfile,
+  RemoteEquipmentTableResult,
 } from "@/api/resources-equipment/types";
 import request from "@/utils/request";
 import { DevOuiSnoPageResult, DevOuiSnoSearchForm } from "@/api/order/types";
+import { EquipmentAdvanceQuery } from "@/api/advance-query/types";
 
 export function getEquipmentPage(
   data: SelectForm
@@ -18,7 +20,15 @@ export function getEquipmentPage(
     data,
   });
 }
-
+export function getEquipmentAdvancePage(
+  data: EquipmentAdvanceQuery
+): AxiosPromise<EquipmentTableResult> {
+  return request({
+    url: "/api/equipment/v1/advance-query-page",
+    method: "POST",
+    data,
+  });
+}
 export function getResourceDeviceDetail(
   devId: number
 ): AxiosPromise<EquipmentResult> {
diff --git a/src/api/service/index.ts b/src/api/service/index.ts
index 717e1ff..fdf98d8 100644
--- a/src/api/service/index.ts
+++ b/src/api/service/index.ts
@@ -121,3 +121,9 @@ export function deviceTabs(devId?: number): AxiosPromise<DeviceBusinessVO[]> {
     method: "GET",
   });
 }
+export function serviceOption(): AxiosPromise<OptionType[]> {
+  return request({
+    url: `/api/service/v1/options`,
+    method: "GET",
+  });
+}
diff --git a/src/router/index.ts b/src/router/index.ts
index b062c1a..ca084cd 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -468,6 +468,19 @@ export const constantRoutes: RouteRecordRaw[] = [
           title: "个人中心",
         },
       },
+      {
+        path: "/resources/equipment/advance-query",
+        name: "EquipmentAdvanceQuery",
+        component: () =>
+          import(
+            "@/views/resources/equipment/components/EquipmentAdvanceQuery.vue"
+          ),
+        meta: {
+          hidden: true,
+          keepAlive: true,
+          title: "设备高级查询",
+        },
+      },
     ],
   },
 ];
diff --git a/src/views/family/operate/fault-management/components/AdvancedQueries.vue b/src/views/family/operate/fault-management/components/AdvancedQueries.vue
index bafd8cc..a482ea4 100644
--- a/src/views/family/operate/fault-management/components/AdvancedQueries.vue
+++ b/src/views/family/operate/fault-management/components/AdvancedQueries.vue
@@ -90,7 +90,7 @@
         </div>
       </el-descriptions-item>
     </el-descriptions>
-    <el-descriptions direction="vertical" border :column="12">
+    <el-descriptions direction="vertical" border :column="10">
       <template #title>
         <el-button
           type="primary"
@@ -321,50 +321,50 @@
           </div>
         </div>
       </el-descriptions-item>
-      <el-descriptions-item
-        label="操作"
-        label-align="center"
-        align="center"
-        label-class-name="my-label"
-        class-name="my-content"
-        width="150px"
-      >
-        <div v-if="wlan['SSID'] != undefined">
-          <div
-            :style="
-              index != wlan['SSID'].split(':').length - 1
-                ? 'border-bottom:  var(--el-descriptions-table-border)'
-                : ''
-            "
-            v-for="(item, index) in wlan['SSID'].split(':')"
-            :key="index"
-          >
-            <el-button type="primary" link :icon="Edit">无线设置</el-button>
-          </div>
-        </div>
-      </el-descriptions-item>
-      <el-descriptions-item
-        label="隐藏广播"
-        label-align="center"
-        align="center"
-        label-class-name="my-label"
-        class-name="my-content"
-        width="150px"
-      >
-        <div v-if="wlan['SSID'] != undefined">
-          <div
-            :style="
-              index != wlan['SSID'].split(':').length - 1
-                ? 'border-bottom:  var(--el-descriptions-table-border)'
-                : ''
-            "
-            v-for="(item, index) in wlan['SSID'].split(':')"
-            :key="index"
-          >
-            <el-button type="primary" link :icon="Edit">隐藏广播</el-button>
-          </div>
-        </div>
-      </el-descriptions-item>
+<!--      <el-descriptions-item-->
+<!--        label="操作"-->
+<!--        label-align="center"-->
+<!--        align="center"-->
+<!--        label-class-name="my-label"-->
+<!--        class-name="my-content"-->
+<!--        width="150px"-->
+<!--      >-->
+<!--        <div v-if="wlan['SSID'] != undefined">-->
+<!--          <div-->
+<!--            :style="-->
+<!--              index != wlan['SSID'].split(':').length - 1-->
+<!--                ? 'border-bottom:  var(&#45;&#45;el-descriptions-table-border)'-->
+<!--                : ''-->
+<!--            "-->
+<!--            v-for="(item, index) in wlan['SSID'].split(':')"-->
+<!--            :key="index"-->
+<!--          >-->
+<!--            <el-button type="primary" link :icon="Edit">无线设置</el-button>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </el-descriptions-item>-->
+<!--      <el-descriptions-item-->
+<!--        label="隐藏广播"-->
+<!--        label-align="center"-->
+<!--        align="center"-->
+<!--        label-class-name="my-label"-->
+<!--        class-name="my-content"-->
+<!--        width="150px"-->
+<!--      >-->
+<!--        <div v-if="wlan['SSID'] != undefined">-->
+<!--          <div-->
+<!--            :style="-->
+<!--              index != wlan['SSID'].split(':').length - 1-->
+<!--                ? 'border-bottom:  var(&#45;&#45;el-descriptions-table-border)'-->
+<!--                : ''-->
+<!--            "-->
+<!--            v-for="(item, index) in wlan['SSID'].split(':')"-->
+<!--            :key="index"-->
+<!--          >-->
+<!--            <el-button type="primary" link :icon="Edit">隐藏广播</el-button>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </el-descriptions-item>-->
       <el-descriptions-item
         label-align="center"
         align="left"
@@ -447,7 +447,7 @@
         </el-col>
         <el-col :span="12">
           <el-form-item label="SIP开关" prop="sIPEnable">
-            <el-select v-model="algForm.sIPEnable">
+            <el-select v-model="algForm.sipEnable">
               <el-option
                 v-for="(item, index) in algOption"
                 :label="item.label"
@@ -461,7 +461,7 @@
       <el-row :gutter="24">
         <el-col :span="12">
           <el-form-item label="RTSP开关" prop="rTSPEnable">
-            <el-select v-model="algForm.rTSPEnable">
+            <el-select v-model="algForm.rtspEnable">
               <el-option
                 v-for="(item, index) in algOption"
                 :label="item.label"
@@ -487,7 +487,7 @@
       <el-row :gutter="24">
         <el-col :span="24">
           <el-form-item label="IPSEC开关" prop="iPSECEnable">
-            <el-select v-model="algForm.iPSECEnable">
+            <el-select v-model="algForm.ipsecEnable">
               <el-option
                 v-for="(item, index) in algOption"
                 :label="item.label"
@@ -558,10 +558,10 @@ const cpeFormLoading = ref<boolean>(false);
 const openAlgForm = () => {
   resetForm(algFormRef.value);
   algForm.value.h323Enable = alg.value["serviceList"];
-  algForm.value.sIPEnable = alg.value["SIPEnable"];
-  algForm.value.rTSPEnable = alg.value["RTSPEnable"];
+  algForm.value.sipEnable = alg.value["SIPEnable"];
+  algForm.value.rtspEnable = alg.value["RTSPEnable"];
   algForm.value.l2TPEnable = alg.value["L2TPEnable"];
-  algForm.value.iPSECEnable = alg.value["IPSECEnable"];
+  algForm.value.ipsecEnable = alg.value["IPSECEnable"];
   algFlag.value = true;
 };
 const openCpe = () => {
diff --git a/src/views/family/operate/fault-management/components/basicInfoQuery.vue b/src/views/family/operate/fault-management/components/basicInfoQuery.vue
index ccaee77..c433641 100644
--- a/src/views/family/operate/fault-management/components/basicInfoQuery.vue
+++ b/src/views/family/operate/fault-management/components/basicInfoQuery.vue
@@ -192,8 +192,8 @@ const vo = ref<FaultBasicInfoVO>({});
 const getBasicInfo = (queryVO: FaultQueryVO) => {
   loading.value = true;
   let searchForm: FaultQuery = {
-    label: "devSno",
-    value: queryVO.devSno,
+    label: "devId",
+    value: queryVO.devId,
     ping: [],
   };
   faultBasicInfoQuery(searchForm)
diff --git a/src/views/family/operate/fault-management/index.vue b/src/views/family/operate/fault-management/index.vue
index 8bfa4e3..c1b315b 100644
--- a/src/views/family/operate/fault-management/index.vue
+++ b/src/views/family/operate/fault-management/index.vue
@@ -52,8 +52,10 @@
               <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 disabled value="identificationNumber"
+                >身份证号</el-radio
+              >
+              <el-radio disabled value="phoneNumber">电话号码</el-radio>
             </el-radio-group>
           </div>
           <div class="ml-5">
diff --git a/src/views/family/operate/remote-operation/components/RemoteOperateInfo.vue b/src/views/family/operate/remote-operation/components/RemoteOperateInfo.vue
index 0f99024..698adf2 100644
--- a/src/views/family/operate/remote-operation/components/RemoteOperateInfo.vue
+++ b/src/views/family/operate/remote-operation/components/RemoteOperateInfo.vue
@@ -234,7 +234,6 @@
                 >设备工单</el-button
               >
 
-
               <el-button
                 type="primary"
                 link
diff --git a/src/views/resources/device-type/index.vue b/src/views/resources/device-type/index.vue
index 75c29cf..73a373a 100644
--- a/src/views/resources/device-type/index.vue
+++ b/src/views/resources/device-type/index.vue
@@ -274,24 +274,24 @@ watch(
     loadHardVerOption();
   }
 );
-const loadVendorNameOption = async () => {
-  await getVendorNameOption().then(({ data }) => {
+const loadVendorNameOption = () => {
+  getVendorNameOption().then(({ data }) => {
     vendorNameOption.value = data;
   });
 };
 
-const loadVendorOuiOption = async () => {
-  await getVendorOuiOption(searchForm.value.devVendorName).then(({ data }) => {
+const loadVendorOuiOption = () => {
+  getVendorOuiOption(searchForm.value.devVendorName).then(({ data }) => {
     vendorOuiOption.value = data;
   });
 };
-const loadTypeNameOption = async () => {
-  await getTypeNameOption(searchForm.value.devVendorOui).then(({ data }) => {
+const loadTypeNameOption = () => {
+  getTypeNameOption(searchForm.value.devVendorOui).then(({ data }) => {
     typeNameOption.value = data;
   });
 };
-const loadHardVerOption = async () => {
-  await getHardVerOption(searchForm.value.devTypeName).then(({ data }) => {
+const loadHardVerOption = () => {
+  getHardVerOption(searchForm.value.devTypeName).then(({ data }) => {
     hardVerOption.value = data;
   });
 };
@@ -316,12 +316,12 @@ const skipAdd = () => {
   router.push({
     path: `/resources/device-type/add`,
   });
-}
-onMounted(() => {
-  loadVendorNameOption();
-  loadVendorOuiOption();
-  loadTypeNameOption();
-  loadHardVerOption();
+};
+onMounted(async () => {
+  await loadVendorNameOption();
+  await loadVendorOuiOption();
+  await loadTypeNameOption();
+  await loadHardVerOption();
 });
 </script>
 
diff --git a/src/views/resources/equipment/components/EquipmentAdvanceQuery.vue b/src/views/resources/equipment/components/EquipmentAdvanceQuery.vue
new file mode 100644
index 0000000..2b8cae6
--- /dev/null
+++ b/src/views/resources/equipment/components/EquipmentAdvanceQuery.vue
@@ -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>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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>&nbsp;<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>
diff --git a/src/views/resources/equipment/components/EquipmentEdit.vue b/src/views/resources/equipment/components/EquipmentEdit.vue
index 5b62db8..6462612 100644
--- a/src/views/resources/equipment/components/EquipmentEdit.vue
+++ b/src/views/resources/equipment/components/EquipmentEdit.vue
@@ -17,7 +17,7 @@
       </template>
       <el-scrollbar height="500">
         <el-form :model="editForm" ref="editFormRef" :rules="rules">
-          <el-descriptions :column="2" border>
+          <el-descriptions :column="3" border>
             <template #title>
               <div style="display: flex; align-items: center; margin-left: 3px">
                 <el-icon size="15"><Grid /></el-icon>&nbsp;<span
@@ -28,7 +28,7 @@
             </template>
             <el-descriptions-item
               label="设备序列号"
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -43,7 +43,7 @@
             </el-descriptions-item>
             <el-descriptions-item
               label="设备AD编号"
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -58,7 +58,7 @@
             </el-descriptions-item>
             <el-descriptions-item
               label="设备Pppoe账号"
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -73,7 +73,7 @@
             </el-descriptions-item>
             <el-descriptions-item
               label="设备MAC地址"
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -88,7 +88,7 @@
             </el-descriptions-item>
             <el-descriptions-item
               label="设备系统管理域"
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -98,7 +98,7 @@
             </el-descriptions-item>
             <el-descriptions-item
               label="设备政企管理域"
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -106,7 +106,7 @@
             />
             <el-descriptions-item
               label="设备在线状态"
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -116,7 +116,7 @@
             </el-descriptions-item>
             <el-descriptions-item
               label="设备离线时间"
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -126,7 +126,7 @@
             </el-descriptions-item>
             <el-descriptions-item
               label="设备当前状态"
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -136,7 +136,7 @@
             </el-descriptions-item>
             <el-descriptions-item
               label="设备创建时间"
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -146,7 +146,7 @@
             </el-descriptions-item>
             <el-descriptions-item
               label="设备IP地址"
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -156,7 +156,7 @@
             </el-descriptions-item>
             <el-descriptions-item
               label="设备IP所属地域名"
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -166,7 +166,7 @@
             </el-descriptions-item>
             <el-descriptions-item
               label="BANDAccess "
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -176,7 +176,7 @@
             </el-descriptions-item>
             <el-descriptions-item
               label="IPTVAccess  "
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -186,7 +186,7 @@
             </el-descriptions-item>
             <el-descriptions-item
               label="逻辑ID"
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -196,7 +196,7 @@
             </el-descriptions-item>
             <el-descriptions-item
               label="设备更新时间"
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -206,7 +206,7 @@
             </el-descriptions-item>
             <el-descriptions-item
               label="电信维护帐号密码"
-              label-align="left"
+              label-align="center"
               align="center"
               label-class-name="my-label"
               class-name="my-content"
@@ -214,9 +214,17 @@
             >
               {{ detail.devRemark1 }}
             </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-form>
-        <el-descriptions style="margin-top: 10px" :column="2" border>
+        <el-descriptions style="margin-top: 10px" :column="3" border>
           <template #title>
             <div style="display: flex; align-items: center; margin-left: 3px">
               <el-icon size="15"><Grid /></el-icon>&nbsp;<span
@@ -227,7 +235,7 @@
           </template>
           <el-descriptions-item
             label="设备供应商"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -237,7 +245,7 @@
           </el-descriptions-item>
           <el-descriptions-item
             label="设备OUI"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -247,7 +255,7 @@
           </el-descriptions-item>
           <el-descriptions-item
             label="设备型号"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -257,7 +265,7 @@
           </el-descriptions-item>
           <el-descriptions-item
             label="设备硬件版本"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -267,7 +275,7 @@
           </el-descriptions-item>
           <el-descriptions-item
             label="设备类型"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -277,7 +285,7 @@
           </el-descriptions-item>
           <el-descriptions-item
             label="设备网络侧接口"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -287,7 +295,7 @@
           </el-descriptions-item>
           <el-descriptions-item
             label="是否机卡分离型"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -297,7 +305,7 @@
           </el-descriptions-item>
           <el-descriptions-item
             label="设备当前软件版本"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -305,8 +313,16 @@
           >
             {{ type.softVer }}
           </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 style="margin-top: 10px" :column="2" border>
+        <el-descriptions style="margin-top: 10px" :column="3" border>
           <template #title>
             <div style="display: flex; align-items: center; margin-left: 3px">
               <el-icon size="15"><Grid /></el-icon>&nbsp;<span
@@ -346,7 +362,7 @@
           </template>
           <el-descriptions-item
             label="客户账号"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -356,7 +372,7 @@
           </el-descriptions-item>
           <el-descriptions-item
             label="客户名称"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -366,7 +382,7 @@
           </el-descriptions-item>
           <el-descriptions-item
             label="客户类型"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -376,7 +392,7 @@
           </el-descriptions-item>
           <el-descriptions-item
             label="客户状态"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -386,7 +402,7 @@
           </el-descriptions-item>
           <el-descriptions-item
             label="系统管理域"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -396,7 +412,7 @@
           </el-descriptions-item>
           <el-descriptions-item
             label="政企管理域"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -404,7 +420,7 @@
           />
           <el-descriptions-item
             label="客户创建时间"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -414,7 +430,7 @@
           </el-descriptions-item>
           <el-descriptions-item
             label="客户修改时间"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -424,7 +440,7 @@
           </el-descriptions-item>
           <el-descriptions-item
             label="客户端口号"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -434,7 +450,7 @@
           </el-descriptions-item>
           <el-descriptions-item
             label="接入电话号码"
-            label-align="left"
+            label-align="center"
             align="center"
             label-class-name="my-label"
             class-name="my-content"
@@ -528,6 +544,7 @@ onMounted(() => {
 
 <style scoped>
 :deep(.my-label) {
+  width: 70px !important;
   background: var(--el-color-white) !important;
 }
 :deep(.el-scrollbar__thumb) {
diff --git a/src/views/resources/equipment/components/IpAddress.vue b/src/views/resources/equipment/components/IpAddress.vue
new file mode 100644
index 0000000..88d83fb
--- /dev/null
+++ b/src/views/resources/equipment/components/IpAddress.vue
@@ -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>
diff --git a/src/views/resources/equipment/index.vue b/src/views/resources/equipment/index.vue
index e1bd17d..849c5d3 100644
--- a/src/views/resources/equipment/index.vue
+++ b/src/views/resources/equipment/index.vue
@@ -29,9 +29,12 @@
           </el-col>
           <el-col :span="buttonColSpan">
             <el-form-item>
-              <el-button type="primary" :icon="Search" @click="getData"
-                >搜索</el-button
-              >
+              <el-button type="primary" :icon="Search" @click="changeSearch"
+                >搜索
+              </el-button>
+              <el-button type="primary" :icon="Search" @click="skipAdvanceQuery"
+                >高级查询
+              </el-button>
             </el-form-item>
           </el-col>
         </el-row>
@@ -47,8 +50,8 @@
               plain
               @click="skipAdd"
               :icon="Plus"
-              >新增</el-button
-            >
+              >新增
+            </el-button>
             <el-popconfirm
               icon-color="#626AEF"
               :icon="InfoFilled"
@@ -63,8 +66,8 @@
                   plain
                   v-hasPerm="['equipment:index:delete']"
                   :icon="Delete"
-                  >删除</el-button
-                >
+                  >删除
+                </el-button>
               </template>
             </el-popconfirm>
           </div>
@@ -87,8 +90,8 @@
           >
             <template #default="scope">
               <el-button type="primary" link @click="skipEdit(scope.row.devId)"
-                >{{ scope.row.devVendorOui }}-{{ scope.row.devSno }}</el-button
-              >
+                >{{ scope.row.devVendorOui }}-{{ scope.row.devSno }}
+              </el-button>
             </template>
           </el-table-column>
           <el-table-column
@@ -197,7 +200,12 @@
 <script setup lang="ts">
 import { Delete, InfoFilled, Plus, Search } from "@element-plus/icons-vue";
 import { EquipmentTableVO } from "@/api/resources-equipment/types";
-import { deleteDevice, getEquipmentPage } from "@/api/resources-equipment";
+import {
+  deleteDevice,
+  getEquipmentAdvancePage,
+  getEquipmentPage,
+} from "@/api/resources-equipment";
+import { EquipmentAdvanceQuery } from "@/api/advance-query/types";
 
 defineOptions({
   name: "Equipment",
@@ -208,6 +216,7 @@ const queryForm = ref<SelectForm>({
   pageSize: 10,
 });
 const loading = ref<boolean>(false);
+const isAdvanceQuery = ref<boolean>(false);
 const options = ref<OptionType[]>([
   { label: "AD编号", value: "devAdNo" },
   { label: "设备序列号", value: "devSno" },
@@ -235,32 +244,56 @@ const changeColumns = (newColumns: TableColumns[]) => {
   columns.value = newColumns;
 };
 const router = useRouter();
+const route = useRoute();
+const advanceQueryForm = ref<EquipmentAdvanceQuery>();
+
 const redirect = (devTypeId: number) => {
   router.push({
     path: `/resources/device_type_to_ver/${devTypeId}`,
   });
 };
+const skipAdvanceQuery = () => {
+  router.push({
+    path: `/resources/equipment/advance-query`,
+  });
+};
+const changeSearch = () => {
+  isAdvanceQuery.value = false;
+  getData();
+};
 const getData = () => {
-  if (
-    queryForm.value.selectName === undefined ||
-    queryForm.value.selectValue === undefined
-  ) {
-    ElMessage({
-      message: "查询条件不能为空",
-      type: "error",
-      duration: 1000,
-    });
-    return;
+  if (isAdvanceQuery.value) {
+    loading.value = true;
+    getEquipmentAdvancePage(advanceQueryForm.value)
+      .then(({ data }) => {
+        tableData.value = data.list;
+        total.value = data.total;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
+  } else {
+    if (
+      queryForm.value.selectName === undefined ||
+      queryForm.value.selectValue === undefined
+    ) {
+      ElMessage({
+        message: "查询条件不能为空",
+        type: "error",
+        duration: 1000,
+      });
+      return;
+    }
+    loading.value = true;
+    getEquipmentPage(queryForm.value)
+      .then(({ data }) => {
+        tableData.value = data.list;
+        total.value = data.total;
+      })
+      .finally(() => {
+        loading.value = false;
+      });
   }
-  loading.value = true;
-  getEquipmentPage(queryForm.value)
-    .then(({ data }) => {
-      tableData.value = data.list;
-      total.value = data.total;
-    })
-    .finally(() => {
-      loading.value = false;
-    });
 };
 const skipEdit = (devId: number) => {
   router.push({
@@ -297,6 +330,17 @@ const handleDelete = () => {
       loading.value = false;
     });
 };
+watch(
+  () => route.query.item,
+  () => {
+    let form = route.query.item;
+    if (form) {
+      advanceQueryForm.value = JSON.parse(<string>form);
+      isAdvanceQuery.value = true;
+      getData();
+    }
+  }
+);
 </script>
 
 <style scoped>