| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 |
- <script setup lang="ts">
- import { message, type SelectProps } from "ant-design-vue";
- import { ref, watch, onMounted, h } from "vue";
- import { routeToSearch } from "@/router";
- import * as searchHistoryService from "@/services/searchHistory.service"
- import * as searchService from "@/services/search.service"
- import { LoadingOutlined } from '@ant-design/icons-vue';
- import SearchResultItem from "./components/SearchResultItem.vue";
- const keyword = ref("");
- const field = ref("TP");
- const placeholder = ref("请输入文献主题")
- const hotWords = ref(['建筑工程','工程设计','BIM',])
- const recommendWords = ref(['建筑工程', '施工技术', 'BIM', '工程造价', '质量控制'])
- const spinning = ref(true);
- const searchResult: any = ref([])
- const onSearch = () => {
- const kwd = keyword.value.trim();
- if (kwd.length == 0) {
- message.warning("请输入查询关键词");
- return;
- }
- routeToSearch({ type: 'simple', kw: kwd, field: field.value });
- }
- const fieldOptions = ref<SelectProps['options']>([
- { value: 'TP', label: '主题' },
- { value: 'TI', label: '标题' },
- { value: 'AU', label: '作者' },
- { value: 'KW', label: '关键词' },
- { value: 'AB', label: '摘要' },
- { value: 'UN', label: '机构' },
- ]);
- watch(field, (newValue) => {
- if (newValue == 'TI') {
- placeholder.value = "请输入文献标题"
- } else if (newValue == 'AU') {
- placeholder.value = "请输入文献作者"
- } else if (newValue == 'KW') {
- placeholder.value = "请输入文献关键词"
- } else if (newValue == 'AB') {
- placeholder.value = "请输入文献摘要"
- } else if (newValue == 'UN') {
- placeholder.value = "请输入文献机构"
- } else {
- placeholder.value = "请输入文献主题"
- }
- });
- onMounted(() => {
- getHoyKeyword(10);
- recommendsearch();
- })
- function getHoyKeyword(size: number){
- searchHistoryService.getHoyKeyword(size).then((resp) => {
- const words: any = resp;
- for (let item of words) {
- var expression = item.expression;
- var _expression = expression.match(/\((.+)\)/g);
- var $1 = RegExp.$1
- var index = hotWords.value.indexOf($1);
- if (hotWords.value.length == 5) {
- break;
- }
- if (index == -1) {
- if ($1.length > 1) {
- hotWords.value.push($1)
- }
- }
- }
- })
- }
- function recommendsearch() {
- spinning.value = true;
- let request = {
- from: 0,
- size: 2,
- sort: {PY: "desc"},
- query: ''
- }
- for (let item of recommendWords.value) {
- request.query = 'TP=('+item+')' ;
- searchService.search(request).then((resp) => {
- for (let doc of resp.docs) {
- searchResult.value.push(doc)
- }
- })
- }
- spinning.value = false;
- }
- function search(kwd: string){
- routeToSearch({ type: 'simple', kw: kwd, field: 'TP' });
- }
- </script>
- <template>
- <div class="search-wrap">
- <h1>智能搜索</h1>
- <!-- <a-divider></a-divider> -->
- <a-row type="flex">
- <a-col>
- <a-select
- ref="select"
- v-model:value="field"
- style="width: 120px"
- :options="fieldOptions"
- size="large"
- ></a-select>
- </a-col>
- <a-col flex="1">
- <a-input-search
- v-model:value="keyword"
- :placeholder="placeholder"
- enter-button
- size="large"
- @search="onSearch"
- />
- </a-col>
- </a-row>
- <a-row class="search-hotword">
- 热门关键词:
- <span v-for="(item, index) in hotWords" @click="search(item)" :key="index">
- {{item}}
- </span>
- </a-row>
- <a-row type="flex" class="search-result">
- <a-spin :spinning="spinning" :indicator="h(LoadingOutlined, { style: { fontSize: '24px', }, spin: true, })">
- <div>最新文献推荐</div>
- <div v-if="searchResult">
- <div v-for="(doc, index) in searchResult" :key="index" class="search-result-content">
- <SearchResultItem :data="doc"/>
- </div>
- </div>
- </a-spin>
- </a-row>
- </div>
- </template>
- <style scoped lang="scss">
- .search-wrap {
- width: 80%;
- margin: 0 auto;
- margin-top: 20px;
- h1 {
- font-size: 2rem;
- text-align: center;
- }
- .search-hotword {
- margin-top: 30px;
- span {
- cursor: pointer;
- margin-left: 20px;
- &:hover {
- text-decoration: underline;
- }
- }
- }
- .search-result{
- margin-top: 30px;
- }
- .search-result-content {
- > div {
- border: 1px gray solid;
- margin-bottom: 8px;
- }
- }
- }
- </style>
|