搜索

src/api/index.js

@@ -13,6 +13,14 @@ export function getHouseList(communityId) {
     method: "get",
   });
 }
+// 获取所有小区列表
+export function getAllHouseList(params) {
+  return request({
+    url: "/wcwy/house/list",
+    method: "get",
+    params,
+  });
+}
 //获取小区详情
 export function getHouseInfo(id) {
   return request({

src/view/components/communitySelect.vue

@@ -30,6 +30,7 @@ const props = defineProps(["communityList"]);
 const emit = defineEmits(["communityChange"]);
 let showList = ref(false);
 let selectIndex = ref(-1);
+defineExpose({ selectIndex });
 function getAssetImg(imgName) {
   return new URL(`../../assets/imgs/${imgName}.png`, import.meta.url).href;
 }

src/view/components/searchBox.vue

+<template>
+  <div class="search">
+    <el-select
+      v-model="value"
+      filterable
+      placeholder="搜索小区"
+      no-match-text="无匹配数据"
+      no-data-text="无数据"
+      style="width: 160px"
+      popper-class="popper"
+      @change="
+        emit('searchChange', {
+          id: value,
+          communityId: options.find((item) => item.value === value).communityId,
+        })
+      "
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { getAllHouseList } from "@/api/index";
+
+const value = ref("");
+defineExpose({ value });
+const options = ref([]);
+const emit = defineEmits(["searchChange"]);
+
+getAllHouseList({
+  pageNum: 1,
+  pageSize: 1000,
+}).then(({ rows }) => {
+  options.value = rows.map((item) => {
+    return {
+      value: item.id,
+      label: item.name,
+      communityId: item.communityId,
+    };
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.search {
+  position: absolute;
+  top: 42px;
+  left: 450px;
+  z-index: 999;
+
+  ::v-deep .el-input__wrapper {
+    background-color: rgba(9, 25, 39, 0.7) !important;
+    box-shadow: 0 0 0 1px #046da5 !important;
+  }
+}
+</style>
+<style>
+.popper {
+  border: 1px solid #ffffff00 !important;
+  background-color: rgba(9, 25, 39, 0.7) !important;
+  .el-scrollbar__view {
+    .hover {
+      background: url("/src/assets/imgs/sq_hover.png");
+      background-size: 100% 100%;
+    }
+  }
+  .el-select-dropdown__item {
+    color: #fff !important;
+  }
+  .el-popper__arrow {
+    opacity: 0;
+  }
+}
+</style>

src/view/index.vue

 <template>
   <div id="cesiumContainer">
     <screen-header></screen-header>
+
     <screen-left :currentHouseInfo="currentHouseInfo"></screen-left>
     <screen-right :currentHouseInfo="currentHouseInfo"></screen-right>
+    <searchBox
+      v-if="userTypeInfo.type === 6"
+      @searchChange="searchChangeHandle"
+      ref="searchBoxRef"
+    ></searchBox>
     <community-select
       ref="communitySelectRef"
       v-if="userTypeInfo.type === 6"
@@ -20,10 +26,12 @@ import screenHeader from "./components/screenHeader.vue";
 import screenLeft from "./components/screenLeft.vue";
 import screenRight from "./components/screenRight.vue";
 import communitySelect from "./components/communitySelect.vue";
+import searchBox from "./components/searchBox.vue";
 import { drawLabel } from "../utils/cesiumTools";
 import { getCommunityList, getHouseList, getHouseInfo } from "../api/index.js";
 import { getUserType } from "../api/user";
 const communitySelectRef = ref(null);
+const searchBoxRef = ref(null);
 let viewer = null;
 let communityList = ref([]);
 let userTypeInfo = ref({});
@@ -32,12 +40,23 @@ let currentHouseInfo = ref({});
 watch(currentCommunityInfo, (val) => {
   console.log("currentCommunityInfo", val);
   let position = JSON.parse(val.solid);
-
   flyTo({ longitude: position.x, latitude: position.y });
   getHouseListFunc(val.id);
 });
 function communityChangeHandle(index) {
   currentCommunityInfo.value = communityList.value[index];
+  searchBoxRef.value.value = "";
+}
+
+function searchChangeHandle(e) {
+  currentCommunityInfo.value = communityList.value.find(
+    (item) => item.id === e.communityId
+  );
+  getHouseInfoFunc(e.id);
+
+  communitySelectRef.value.selectIndex = communityList.value.findIndex(
+    (item) => item.id === e.communityId
+  );
 }
 // 获取登录用户信息
 function getUserTypeInfo() {