fix: 添加联系人

hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/linkPeople/index.vue

@@ -1,15 +1,58 @@
 <template>
   <a-modal
     v-model:visible="show"
-    width="1000px"
+    width="1100px"
     style="top: 50%; transform: translateY(-50%)"
     title="添加联系人"
     @ok="handleOk"
     @cancel="handleCancel">
-    <div style="width: 100%; height: 100%">
-      <p>Some contents...</p>
-      <p>Some contents...</p>
-      <p>Some contents...</p>
+    <div style="width: 100%; height: 480px; display: flex">
+      <div style="width: 300px; height: 100%; overflow-y: auto; padding: 0px, 12px">
+        <div style="width: 100%; display: flex; position: relative">
+          <div
+            style="
+              border-width: 0px;
+              position: absolute;
+              left: 0px;
+              top: 5px;
+              width: 5px;
+              height: 15px;
+              background: inherit;
+              background-color: rgba(251, 156, 67, 1);
+              border: none;
+              border-radius: 5px;
+              -moz-box-shadow: none;
+              -webkit-box-shadow: none;
+              box-shadow: none;
+            "></div>
+          <span style="margin-left: 24px; color: #333333">联系人名单</span>
+        </div>
+        <img
+          style="width: 100%; margin-top: -10px"
+          src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
+        <a-input-search
+          v-model:value="searchValue"
+          style="margin-bottom: 8px"
+          placeholder="请输入关键字" />
+        <img
+          style="width: 100%; margin-top: -10px"
+          src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
+        <a-tree
+          :expanded-keys="expandedKeys"
+          :auto-expand-parent="autoExpandParent"
+          :tree-data="gData"
+          @expand="onExpand">
+          <template #title="{ title }">
+            <span v-if="title.indexOf(searchValue) > -1">
+              {{ title.substr(0, title.indexOf(searchValue)) }}
+              <span style="color: #f50">{{ searchValue }}</span>
+              {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
+            </span>
+            <span v-else>{{ title }}</span>
+          </template>
+        </a-tree>
+      </div>
+      <div style="width: calc(100% - 200px); height: 100%; padding: 12px"> 2</div>
     </div>
   </a-modal>
 </template>
@@ -24,6 +67,7 @@
         // 处理确定按钮的逻辑
         console.log('点击了确定按钮');
       };
+      const searchValue = ref<string>('');
       const getData = () => {
         show.value = true;
       };
@@ -38,6 +82,7 @@
         handleOk,
         show,
         getData,
+        searchValue,
         handleCancel,
       };
     },