全局搜索

src/views/globalMap/LeftMenu.vue

@@ -2,11 +2,72 @@
   <div class="menu-container">
     <div class="search-box">
       <input v-model="searchState.searchText" class="input" @input="changeSearchText" @keyup.enter="changeSearchText" />
-      <div v-show="searchState.showList" class="search-list">
-        <div v-for="(item, index) in searchState.resultList" :key="index" class="list-item"
-             @click="selectSearchMarker(item)">{{ item.name }}
+      <div v-show="searchState.showList" class="search-content">
+        <div class="search-title">全局搜索</div>
+        <div class="search-sub-content">
+          <div class="search-header">
+            <div class="header-left">
+              <i class="icon-position1" />
+            </div>
+          </div>
+          <div class="search-list">
+            <div class="scroll">
+              <div v-for="(item, index) in searchState.resultList" :key="index" class="list-item" @click="selectSearchMarker(item)">
+                <i class="icon1" />
+                <div class="text1" :title="item.name">{{ item.name }}</div>
+                <!--              <div class="text2">{{ item.address }}</div>-->
+              </div>
+              <div v-show="searchState.showList && searchState.resultList.length === 0" style="text-align: center">无数据</div>
+            </div>
+          </div>
         </div>
-        <div v-show="searchState.showList && searchState.resultList.length === 0" style="text-align: center">无数据
+        <div class="search-sub-content">
+          <div class="search-header">
+            <div class="header-left">
+              <i class="icon-layer" />
+              <div class="text1">图层</div>
+            </div>
+          </div>
+          <div class="search-list">
+            <div class="scroll">
+              <div
+                v-for="(item, index) in searchState.layerList"
+                :key="index"
+                class="list-item"
+                style="margin-top: 5px"
+                @click="selectSearchMarker(item)"
+              >
+                <div class="tag">{{ item.tag }}</div>
+                <div class="text1" :title="item.name">{{ item.name }}</div>
+              </div>
+              <div v-show="searchState.showList && searchState.layerList.length === 0" style="text-align: center">无数据</div>
+            </div>
+          </div>
+        </div>
+        <div class="search-sub-content">
+          <div class="search-header">
+            <div class="header-left">
+              <i class="icon-video" />
+              <div class="text1">视频</div>
+            </div>
+          </div>
+          <div class="search-list">
+            <div class="scroll">
+              <div
+                v-for="(item, index) in searchState.videoList"
+                :key="index"
+                class="list-item2"
+                style="margin-top: 5px"
+                @click="selectSearchMarker(item)"
+              >
+                <div class="text1" :title="item.name" @click="handleShowDialog(item)">{{ item.name }}</div>
+                <div class="tags">
+                  <div v-for="(item2, index2) in item.tags" :key="index2" class="tag">{{ item2 }}</div>
+                </div>
+              </div>
+              <div v-show="searchState.showList && searchState.videoList.length === 0" style="text-align: center">无数据</div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -30,15 +91,13 @@
           <div class="menu-content">
             <div v-for="(item, index) in menuData[menuState.activeIndex]?.children" :key="index" class="content-box">
               <div class="box-header">
-                <div v-if="item.name === '防风防汛'" class="icon1" style="width: 79px; height: 87px"></div>
-                <div v-if="item.name === '危化品安全监测' || item.name === '危险化工品'" class="icon2"
-                     style="width: 71px; height: 80px"></div>
-                <div v-if="item.name === '其他'" class="icon3" style="width: 71px; height: 80px"></div>
-                <div v-if="item.name === '水情监测'" class="icon4" style="width: 71px; height: 80px"></div>
-                <div v-if="item.name === '自然灾害监测'" class="icon5" style="width: 71px; height: 80px"></div>
+                <div v-if="item.name === '防风防汛'" class="icon1" style="width: 24px; height: 26px"></div>
+                <div v-if="item.name === '危化品安全监测' || item.name === '危险化工品'" class="icon2" style="width: 23px; height: 26px"></div>
+                <div v-if="item.name === '其他'" class="icon3" style="width: 26px; height: 26px"></div>
+                <div v-if="item.name === '水情监测'" class="icon4" style="width: 29px; height: 26px"></div>
+                <div v-if="item.name === '自然灾害监测'" class="icon5" style="width: 25px; height: 26px"></div>
                 <div>{{ item.name }}</div>
-                <div :class="item.show ? 'expand-icon down-icon' : 'expand-icon up-icon'"
-                     @click="changeBoxShow(item)"></div>
+                <div :class="item.show ? 'expand-icon down-icon' : 'expand-icon up-icon'" @click="changeBoxShow(item)"></div>
               </div>
               <Transition>
                 <div v-show="item.show" class="box-content">
@@ -58,6 +117,11 @@
         </div>
       </Transition>
     </div>
+    <Dialog v-if="showDialog" v-model="showDialog" type="md" title="视频" hide-footer>
+      <div style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center">
+        <HKVideo :dot_data="videoMonitorData" />
+      </div>
+    </Dialog>
   </div>
 </template>
 
@@ -72,9 +136,12 @@ let menuData = ref([]);
 const searchState = reactive({
   searchText: '',
   showList: false,
-  resultList: []
+  resultList: [],
+  layerList: [],
+  videoList: []
 });
-
+let showDialog = ref(false);
+let videoMonitorData = ref([]);
 const changeSearchText = () => {
   if (!searchState.searchText) {
     searchState.showList = false;
@@ -88,6 +155,39 @@ const changeSearchText = () => {
     }).then((res) => {
       searchState.showList = true;
       searchState.resultList = res.data.list;
+      searchState.layerList = [
+        {
+          'name': '茂名市石化医院',
+          'id': '3',
+          'dataType': 6,
+          'longitude': '110.820184',
+          'latitude': '21.60546',
+          'type': '2',
+          tag: '医院'
+        },
+        {
+          'name': '茂名市人民医院',
+          'id': '1',
+          'dataType': 6,
+          'longitude': '110.838689',
+          'latitude': '21.56834',
+          'type': '2',
+          tag: '医院'
+        }
+      ];
+      searchState.videoList = [
+        {
+          'name': '01083.159乡道石鳌塘村交汇路口.X320',
+          'address': '44092251001320000110',
+          'area': '茂名市视频数据共享管理平台/茂名市公安局/1市局直属/官渡派出所',
+          'area_name': '市辖区',
+          'longitude': 110.92495,
+          'latitude': 21.67629167,
+          'status': '在线',
+          'video_code': '44092251001320000110',
+          tags: ['路网视频', '森林防火']
+        }
+      ];
     });
   }
 };
@@ -174,6 +274,13 @@ const setChild = (data, item, flag) => {
   }
   return res;
 };
+const handleShowDialog = (row) => {
+  showDialog.value = false;
+  nextTick(() => {
+    videoMonitorData.value = row;
+    showDialog.value = true;
+  });
+};
 onMounted(() => {
   initData();
 });
@@ -200,26 +307,119 @@ defineExpose({ setMenuChange });
     background-color: transparent;
   }
 
-  .search-list {
+  .search-content {
     position: absolute;
-    top: 100px;
+    top: 110px;
     left: 0;
-    background-color: #0d1d4e;
-    border: 1px solid #2c81ff;
-    width: 815px;
-    color: #00e8ff;
-    font-size: 46px;
+    width: 827px;
+    height: 1847px;
+    background: url('@/assets/images/map/box1.png') no-repeat;
+    background-size: 100% 100%;
+    color: #ffffff;
     z-index: 9;
-
-    .list-item {
-      display: block;
-      font-size: 38px;
-      min-height: 80px;
-      cursor: pointer;
-      padding: 10px;
-      color: #ffffff;
-      &:hover {
-        background-color: #0a6ebd;
+    padding: 35px 15px;
+    .search-title {
+      font-size: 44px;
+      line-height: 36px;
+      padding: 0 27px;
+    }
+    .search-sub-content {
+      width: 100%;
+      .search-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 805px;
+        height: 76px;
+        background: url('@/assets/images/map/titleBox3.png') no-repeat;
+        background-size: 100% 100%;
+        padding-left: 20px;
+        padding-bottom: 16px;
+        .header-left {
+          display: flex;
+          align-items: center;
+          .icon-position1 {
+            display: inline-block;
+            width: 81px;
+            height: 88px;
+            background: url('@/assets/images/map/position.png') no-repeat;
+            background-size: 100% 100%;
+          }
+          .icon-layer {
+            display: inline-block;
+            width: 85px;
+            height: 77px;
+            background: url('@/assets/images/map/layer.png') no-repeat;
+            background-size: 100% 100%;
+          }
+          .icon-video {
+            display: inline-block;
+            width: 79px;
+            height: 77px;
+            background: url('@/assets/images/map/video.png') no-repeat;
+            background-size: 100% 100%;
+          }
+          .text1 {
+            margin-left: -12px;
+            font-size: 38px;
+          }
+        }
+      }
+    }
+    .search-list {
+      width: 780px;
+      height: 500px;
+      padding-bottom: 10px;
+      background: url('@/assets/images/map/base.png') no-repeat center bottom;
+      background-size: 780px 198px;
+      .scroll {
+        height: 490px;
+        overflow-y: auto;
+      }
+      .list-item,
+      .list-item2 {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        margin-top: -11px;
+        .icon1 {
+          display: inline-block;
+          width: 90px;
+          height: 91px;
+          background: url('@/assets/images/map/position2.png') no-repeat;
+          background-size: 100% 100%;
+          flex-shrink: 0;
+        }
+        .tag {
+          width: 345px;
+          height: 71px;
+          background: url('@/assets/images/map/tag.png') no-repeat;
+          background-size: 100% 100%;
+          flex-shrink: 0;
+          color: #ffffff;
+          font-size: 38px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+        .text1 {
+          margin-left: 5px;
+          font-size: 38px;
+          //overflow: hidden;
+          //text-overflow: ellipsis;
+          //white-space: nowrap;
+        }
+      }
+      .list-item2 {
+        flex-direction: column;
+        align-items: unset;
+        .tags {
+          display: flex;
+          flex-wrap: wrap;
+          .tag {
+            margin-top: 5px;
+          }
+        }
       }
     }
   }