全局搜索

2022-08-15 14:48:53 +08:00 · 2022-08-15 14:48:53 +08:00 · 5f3c8d3556
parent 91d3622d77
commit 5f3c8d3556
4 changed files with 244 additions and 87 deletions
--- a/front/src/api/home.js
+++ b/front/src/api/home.js
@ -2,7 +2,7 @@
 * @Author: hisense.wuhongjian
 * @Date: 2022-04-01 19:19:40
 * @LastEditors: hisense.liangjunhua
- * @LastEditTime: 2022-08-09 10:37:31
+ * @LastEditTime: 2022-08-13 14:54:04
 * @Description: 告诉大家这是什么
 */
 import request from '@/utils/request'
@ -353,6 +353,14 @@ export function getIntegrationServicesList(params) {
    params,
  })
 }
+// 全局搜索
+export function getCountByFuzzyQuery(params) {
+  return request({
+    url: '/resource/getCountByFuzzyQuery?keyWorld=' + params,
+    method: 'get',
+    params,
+  })
+}

 // 融合服务--详情
 export function getIntegrationDetail(id) {
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@ -9,6 +9,37 @@
      <detailsPageInfrastructureTree v-show="flag != '6'" />
    </div>
    <div class="top" v-if="Cardsname != '知识库' && Cardsname != '基础设施'">
+      <div class="resultListSearchInput-father">
+        <div class="resultListSearchInput-son">
+          模糊搜索
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources2"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
+          <button class="button-reset" @click="chongzhi()">重置</button>
+          <button
+            class="button-reset"
+            style="margin-left: 0.1rem"
+            @click="globalSearch()"
+          >
+            全局搜索
+          </button>
+          <button
+            v-if="Cardsname == '应用资源'"
+            class="button-reset"
+            @click="applyAll()"
+            style="margin-left: 0.1rem"
+          >
+            全部申请
+          </button>
+          <div class="hengxian" style="background: transparent"></div>
+        </div>
+      </div>
      <div class="top-title">
        <div
          v-for="item in titleName"
@ -23,31 +54,18 @@
              backgroundSize: 'cover',
            }"
          ></span>
-          <span>{{ item.name }}</span>
-        </div>
-      </div>
-      <div class="resultListSearchInput-father">
-        <div class="resultListSearchInput-son">
-          模糊搜索
-          <a-input-search
-            v-model:value="searchValue"
-            placeholder="请输入关键词"
-            enter-button="搜索"
-            size="large"
-            @search="getAppResources"
-            @change="onSearch"
-            class="resultListSearchInput"
-          />
-          <button class="button-reset" @click="chongzhi()">重置</button>
-          <button
-            v-if="Cardsname == '应用资源'"
-            class="button-reset"
-            @click="applyAll()"
-            style="margin-left: 0.1rem"
-          >
-            全部申请
-          </button>
-          <div class="hengxian"></div>
+          <span v-if="globalData.data.length > 0">
+            {{
+              item.name +
+              '(' +
+              (globalData.data.filter((val) => val.type === item.name)[0]
+                .count || '0') +
+              ')'
+            }}
+          </span>
+          <span v-else>
+            {{ item.name }}
+          </span>
        </div>
      </div>
      <div class="top-content-father" :key="listKey">
@ -160,46 +178,7 @@
      </div>
    </div>
    <div class="top" v-else-if="Cardsname === '基础设施'">
-      <div class="top-title">
-        <div
-          v-for="item in titleName"
-          :key="item.name"
-          :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)"
-        >
-          <span
-            class="photo"
-            :style="{
-              backgroundImage: `url(${item.photo}) `,
-              backgroundSize: 'cover',
-            }"
-          ></span>
-          <span>{{ item.name }}</span>
-        </div>
-      </div>
-      <div class="top-content-father">
-        <infrastructurePage @add="handleAdd" />
-      </div>
-    </div>
-    <div class="top" v-else>
-      <div class="top-title">
-        <div
-          v-for="item in titleName"
-          :key="item.name"
-          :class="item.name === Cardsname ? 'sel' : ''"
-          @click="changeCards(item.name)"
-        >
-          <span
-            class="photo"
-            :style="{
-              backgroundImage: `url(${item.photo}) `,
-              backgroundSize: 'cover',
-            }"
-          ></span>
-          <span>{{ item.name }}</span>
-        </div>
-      </div>
-      <div class="resultListSearchInput-father" style="background: unset">
+      <div class="resultListSearchInput-father">
        <div class="resultListSearchInput-son">
          模糊搜索
          <a-input-search
@ -207,11 +186,107 @@
            placeholder="请输入关键词"
            enter-button="搜索"
            size="large"
-            @search="getAppResources"
+            @search="getAppResources2"
            @change="onSearch"
            class="resultListSearchInput"
          />
          <button class="button-reset" @click="chongzhi()">重置</button>
+          <button
+            class="button-reset"
+            style="margin-left: 0.1rem"
+            @click="globalSearch()"
+          >
+            全局搜索
+          </button>
+          <div class="hengxian" style="background: transparent"></div>
+        </div>
+      </div>
+      <div class="top-title">
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
+          <span v-if="globalData.data.length > 0">
+            {{
+              item.name +
+              '(' +
+              (globalData.data.filter((val) => val.type === item.name)[0]
+                .count || '0') +
+              ')'
+            }}
+          </span>
+          <span v-else>
+            {{ item.name }}
+          </span>
+        </div>
+      </div>
+      <div class="top-content-father">
+        <infrastructurePage
+          ref="camera"
+          @add="handleAdd"
+          :searchValue="searchValue"
+        />
+      </div>
+    </div>
+    <div class="top" v-else>
+      <div class="resultListSearchInput-father">
+        <div class="resultListSearchInput-son">
+          模糊搜索
+          <a-input-search
+            v-model:value="searchValue"
+            placeholder="请输入关键词"
+            enter-button="搜索"
+            size="large"
+            @search="getAppResources2"
+            @change="onSearch"
+            class="resultListSearchInput"
+          />
+          <button class="button-reset" @click="chongzhi()">重置</button>
+          <button
+            class="button-reset"
+            style="margin-left: 0.1rem"
+            @click="globalSearch()"
+          >
+            全局搜索
+          </button>
+          <div class="hengxian" style="background: transparent"></div>
+        </div>
+      </div>
+      <div class="top-title">
+        <div
+          v-for="item in titleName"
+          :key="item.name"
+          :class="item.name === Cardsname ? 'sel' : ''"
+          @click="changeCards(item.name)"
+        >
+          <span
+            class="photo"
+            :style="{
+              backgroundImage: `url(${item.photo}) `,
+              backgroundSize: 'cover',
+            }"
+          ></span>
+          <span v-if="globalData.data.length > 0">
+            {{
+              item.name +
+              '(' +
+              (globalData.data.filter((val) => val.type === item.name)[0]
+                .count || '0') +
+              ')'
+            }}
+          </span>
+          <span v-else>
+            {{ item.name }}
+          </span>
        </div>
      </div>
      <KnowledgeBase
@ -421,7 +496,7 @@
        </div>
      </div>
      <div class="top-content-father">
-        <infrastructurePage />
+        <infrastructurePage ref="camera" :searchValue="searchValue" />
      </div>
    </div>
    <div class="top" v-else>
@ -721,6 +796,7 @@
    pageWithAttrs,
    getDataResource,
    getIntegrationServicesList,
+    getCountByFuzzyQuery,
  } from '@/api/home.js'
  import { getSgcList } from '@/api/personalCenter'
  import { useRouter } from 'vue-router'
@ -866,10 +942,14 @@
      }

      // 重置数据
-      const chongzhi = () => {
+      const chongzhi = (flag) => {
        loading.value = true
        // 重置模糊查字段
-        searchValue.value = ''
+        if (!flag) {
+          searchValue.value = ''
+          globalFlag.value = false
+          globalData.data = []
+        }
        paramsGetResources.name = searchValue.value
        // 重置筛选条件
        ListContent.records.forEach((val) => {
@ -1009,9 +1089,45 @@
      const resourceList = reactive({ data: [] })
      const videoList = reactive({ data: [] })
      const resourceTotal = ref('')
+      // 全局搜索
+      const camera = ref(null)
+      const globalData = reactive({ data: [] })
+      const globalFlag = ref(false)
+      const globalSearch = () => {
+        if (searchValue.value) {
+          globalFlag.value = true
+          getCountByFuzzyQuery(searchValue.value || '').then((res) => {
+            console.log('全局搜索==========》', res.data.data)
+            globalData.data = res.data.data
+            if (paramsGetResources.type == '基础设施') {
+              console.log('camera1', camera.value)
+              camera.value.getCamera(true, searchValue.value)
+            } else {
+              getAppResources()
+            }
+          })
+        } else {
+          message.warning('全局搜索必须输入关键词！')
+        }
+      }
      // 校验
      const re = /^[0-9\u4E00-\u9FA5]*$/
+      const getAppResources2 = () => {
+        globalFlag.value = false
+        if (
+          whoShow1.value.itShowQingDao &&
+          paramsGetResources.type == '基础设施'
+        ) {
+          console.log('camera2', camera)
+          camera.value.getCamera(true, searchValue.value)
+        } else {
+          getAppResources()
+        }
+      }
      const getAppResources = (switchIndex) => {
+        if (!globalFlag.value) {
+          globalData.data = []
+        }
        if (searchValue.value) {
          let str = ''
          let r = null
@ -1308,7 +1424,11 @@
        getNewList()

        if (!tecHnosphere && !appLiCation) {
-          getAppResources()
+          if (searchValue.value) {
+            globalSearch()
+          } else {
+            getAppResources2()
+          }
        }
      })
      // 全部申请
@ -1369,7 +1489,7 @@
            )
            // router.currentRoute.value.query.select
            tagFlag.value = false
-            chongzhi()
+            chongzhi(true)
            getNewList()
          })
      }
@ -1428,6 +1548,7 @@
        Cardsname,
        getNewList,
        getAppResources,
+        getAppResources2,
        chongzhi,
        onSearch,
        onShowSizeChange,
@ -1460,6 +1581,9 @@
        abilitySquareFunction,
        abilitySquareFunctionData,
        showAbilitySquareNum,
+        globalData,
+        globalSearch,
+        camera,
      }
    },
    components: {
@ -1761,13 +1885,13 @@

      .top-title {
        display: flex;
-        justify-content: space-between;
+        justify-content: space-around;
        align-items: center;
        font-size: 0.2rem;
        font-family: 'Alibaba PuHuiTi';
        color: #000000;
        line-height: 0.34rem;
-
+        margin-bottom: 0.2rem;
        .photo {
          display: inline-block;
          height: 0.44rem;
@ -1776,7 +1900,7 @@
        }

        div {
-          margin: 0 0.2rem;
+          // margin: 0 0.2rem;
          padding: 0 0.1rem;
          cursor: pointer;
          display: flex;
--- a/front/src/views/home/infrastructurePage.vue
+++ b/front/src/views/home/infrastructurePage.vue
@ -408,7 +408,7 @@
        <!-- 右侧 -->
        <div class="contentRight">
          <!-- 搜索@search="onSearch" -->
-          <div class="searchInput">
+          <div class="searchInput" v-if="isXiHaiAn">
            <a-input-search
              v-model:value="mapSearchParam.cameraName"
              placeholder="请输入关键词"
@ -619,9 +619,11 @@
    ref,
    reactive,
    onMounted,
+    defineProps,
    watch,
    defineComponent,
    nextTick,
+    defineExpose,
  } from 'vue'
  import {
    getCameraByParentId,
@ -639,6 +641,10 @@
  import mybus from '@/myplugins/mybus'
  import dayjs from 'dayjs'
  import { Form } from 'ant-design-vue'
+  const props = defineProps({
+    // 模糊查
+    searchValue: { type: String, default: '' },
+  })
  const current = ref(1)
  const videoTotal = ref(0)
  const router = useRouter()
@ -789,6 +795,13 @@
  const roomModalCreateTime = ref('')
  const roomModalEndTime = ref('')
  const lookData = ref({})
+
+  // console.log('模糊查传递', props.searchValue)
+  if (props.searchValue) {
+    // console.log('模糊查传递')
+    // eslint-disable-next-line vue/no-setup-props-destructure
+    mapSearchParam.value.cameraName = props.searchValue
+  }
  //===========================
  onMounted(() => {
    if (jcssType.value) {
@ -1369,7 +1382,11 @@
  //   console.log('添加至购物车')
  // }
  const wrjFlag = ref(false)
-  const getCamera = () => {
+  const getCamera = (flag, str) => {
+    if (flag) {
+      mapSearchParam.value.cameraName = str
+      console.log('赋值===============》', str, mapSearchParam.value)
+    }
    console.log('初始化调用')
    console.log('不选左侧树的时候不调用接口', mapSearchParam.value)
    if (!whoShow1.value.itShowXiHaiAn) {
@ -1419,6 +1436,9 @@
      })
    }
  }
+  defineExpose({
+    getCamera,
+  })
  //加入申购车
  const addShoppingCart = () => {
    if (selectedList.value.length > 0) {
--- a/front/src/views/newHome/components/Navigation.vue
+++ b/front/src/views/newHome/components/Navigation.vue
@ -2,14 +2,14 @@
  <div class="navigation">
    <div class="main" v-if="qeihuan">
      <div class="top">
-        <span
+        <!-- <span
          v-for="name in topList"
          :key="name"
          :class="name == select ? 'select' : ''"
          @click="changeCard(name)"
        >
          {{ name }}
-        </span>
+        </span> -->
      </div>
      <div class="bottom">
        <a-input-search
@ -154,6 +154,7 @@
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { useStore } from 'vuex'
+  import { message } from 'ant-design-vue'
  const store = useStore()
  const router = useRouter()
  const topList = ref([
@ -279,13 +280,17 @@
  }
  const mohuchaxun = ref('组件服务')
  function onSearch() {
-    snum.value.str = text.value
-    console.log('===================>', text.value)
-    store.commit('home/selectCardsData', snum.value)
-    router.push({
-      path: '/DetailsPageconetent',
-      query: snum.value,
-    })
+    if (text.value) {
+      snum.value.str = text.value
+      console.log('===================>', text.value)
+      store.commit('home/selectCardsData', snum.value)
+      router.push({
+        path: '/DetailsPageconetent',
+        query: snum.value,
+      })
+    } else {
+      message.warning('请输入查询内容！')
+    }
    // router.push({ path: '/DetailsPageconetent' })
  }
 </script>
@ -303,7 +308,7 @@
    .main {
      width: 8.8rem;
      height: 1.48rem;
-      background: rgba(255, 255, 255, 0.18);
+      // background: rgba(255, 255, 255, 0.18);
      padding: 0.2rem 0.4rem;
      border-radius: 0.02rem;
      .top {