From dd511658a80514fef129800129ba24a5ceb9c878 Mon Sep 17 00:00:00 2001 From: 杨磊 <505174330@qq.com> Date: 星期三, 30 四月 2025 11:02:25 +0800 Subject: [PATCH] 首页搜索 --- src/views/achievements/index.vue | 369 +++++++++++++++++++++++++++++++++++++++------------- 1 files changed, 278 insertions(+), 91 deletions(-) diff --git a/src/views/achievements/index.vue b/src/views/achievements/index.vue index b147315..9a81e8e 100644 --- a/src/views/achievements/index.vue +++ b/src/views/achievements/index.vue @@ -19,12 +19,17 @@ </ul> <!-- 楂樼骇鎼滅储 --> <div v-if="isDisplay" class="page-search"> - <MyForm class="myfrom" @submit=" - (data) => { - CurrentPage = 1; - onSubmit(data); - } - " @reset="resetForm" :from="from" /> + <MyForm + class="myfrom" + @submit=" + (data) => { + CurrentPage = 1; + onSubmit(data); + } + " + @reset="resetForm" + :from="from" + /> </div> <!-- 鎼滅储缁撴灉 --> <div class="page-content"> @@ -34,15 +39,31 @@ <li class="left-title"> <span>{{ category.title }}</span> <p @click="category.isDisplay = !category.isDisplay"> - <img :src="[category.isDisplay ? topIcon : bottomIcon]" alt="" /> + <img + :src="[category.isDisplay ? topIcon : bottomIcon]" + alt="" + /> </p> </li> <li class="left-main" v-if="category.isDisplay"> - <div class="category-main" v-for="(item, index) in category.list" :key="index"> - <el-checkbox class="el-checkbox" v-model="item.checked" :title="item.name" - @change="categoryChange(item)" style="display: inline-block; vertical-align: middle">{{ item.name - }}</el-checkbox> - <span class="" style="display: inline-block; vertical-align: middle">{{ item.num }}</span> + <div + class="category-main" + v-for="(item, index) in category.list" + :key="index" + > + <el-checkbox + class="el-checkbox" + v-model="item.checked" + :title="item.name" + @change="categoryChange(item)" + style="display: inline-block; vertical-align: middle" + >{{ item.name }}</el-checkbox + > + <span + class="" + style="display: inline-block; vertical-align: middle" + >{{ item.num }}</span + > </div> </li> </ul> @@ -53,25 +74,50 @@ <span>{{ annual.title }}</span> <span> 鏃堕棿 - <img class="sort-Icon" :src="[isDisplay ? sortTop : sortBottom]" alt="" /> + <img + class="sort-Icon" + :src="[isDisplay ? sortTop : sortBottom]" + alt="" + /> </span> - <span>鏂囩尞閲� - <img class="sort-Icon" :src="[isDisplay ? sortBottom : sortTop]" alt="" /> + <span + >鏂囩尞閲� + <img + class="sort-Icon" + :src="[isDisplay ? sortBottom : sortTop]" + alt="" + /> </span> </div> <p @click="annual.isDisplay = !annual.isDisplay"> - <img :src="[annual.isDisplay ? topIcon : bottomIcon]" alt="" /> + <img + :src="[annual.isDisplay ? topIcon : bottomIcon]" + alt="" + /> </p> </li> <li class="left-main" v-if="annual.isDisplay"> - <div class="annual-main" :style="{ - display: index + 1 > professionIndex ? 'none' : '', - }" v-for="(item, index) in annual.list" :key="index"> - <el-checkbox class="el-checkbox" v-model="item.checked" :title="item.years">{{ item.years - }}</el-checkbox> + <div + class="annual-main" + :style="{ + display: index + 1 > professionIndex ? 'none' : '', + }" + v-for="(item, index) in annual.list" + :key="index" + > + <el-checkbox + class="el-checkbox" + v-model="item.checked" + :title="item.years" + >{{ item.years }}</el-checkbox + > <span class="">{{ item.num }}</span> </div> - <p class="annual-footer" v-if="annual.list && annual.list.length > 5" @click="shrinkClick('a', '骞村害')"> + <p + class="annual-footer" + v-if="annual.list && annual.list.length > 5" + @click="shrinkClick('a', '骞村害')" + > {{ activeBox !== "a" ? "鏇村 鈭�" : "鏀惰捣 鈭�" }} </p> </li> @@ -83,23 +129,42 @@ <span>{{ sources.title }}</span> <span> 鏂囩尞閲� - <img class="sort-Icon" :src="[isDisplay ? sortBottom : sortTop]" alt="" /> + <img + class="sort-Icon" + :src="[isDisplay ? sortBottom : sortTop]" + alt="" + /> </span> </div> <p @click="sources.isDisplay = !sources.isDisplay"> - <img :src="[sources.isDisplay ? topIcon : bottomIcon]" alt="" /> + <img + :src="[sources.isDisplay ? topIcon : bottomIcon]" + alt="" + /> </p> </li> <li class="left-main" v-if="sources.isDisplay"> - <div class="sources-main" v-for="(item, index) in sources.list" :key="index" :style="{ - display: index + 1 > dynastyIndex ? 'none' : '', - }"> - <el-checkbox class="el-checkbox" :title="item.name" v-model="item.checked">{{ item.name - }}</el-checkbox> + <div + class="sources-main" + v-for="(item, index) in sources.list" + :key="index" + :style="{ + display: index + 1 > dynastyIndex ? 'none' : '', + }" + > + <el-checkbox + class="el-checkbox" + :title="item.name" + v-model="item.checked" + >{{ item.name }}</el-checkbox + > <span class="">{{ item.num }}</span> </div> - <p class="sources-footer" v-if="sources.list && sources.list.length > 5" - @click="shrinkClick('b', '鏂囩尞鏉ユ簮')"> + <p + class="sources-footer" + v-if="sources.list && sources.list.length > 5" + @click="shrinkClick('b', '鏂囩尞鏉ユ簮')" + > {{ activeBox !== "b" ? "鏇村 鈭�" : "鏀惰捣 鈭�" }} </p> </li> @@ -121,36 +186,56 @@ </li> </ul> --> </div> - <div class="content-right" v-loading="loading" element-loading-text="妫�绱㈢粨鏋滃姞杞戒腑" - element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)"> + <div + class="content-right" + v-loading="loading" + element-loading-text="妫�绱㈢粨鏋滃姞杞戒腑" + element-loading-spinner="el-icon-loading" + element-loading-background="rgba(0, 0, 0, 0)" + > <!-- title閮ㄥ垎 --> <ul class="right-header"> <li v-for="(item, index) in associationList" :key="index"> <p>{{ item.type }} : {{ item.content }}</p> - <img @click="removeAssociationList(item.content)" :src="errorIcon" alt="" /> + <img + @click="removeAssociationList(item.content)" + :src="errorIcon" + alt="" + /> </li> </ul> <!-- 鍏眡x鏉� --> <ul class="right-number"> <ul class="number-number"> - 鍏辨壘鍒�<span>{{ this.total }}</span>鏉$粨鏋� + 鍏辨壘鍒�<span>{{ this.total }}</span + >鏉$粨鏋� </ul> <ul class="number-time"> 鍙戣〃鏃堕棿 - <span @click="sortChange()"><img :src="!postedSortInfo ? sortBottom : sortTop" alt="" /></span> + <span @click="sortChange()" + ><img :src="!postedSortInfo ? sortBottom : sortTop" alt="" + /></span> </ul> </ul> <!-- 缁撴灉灞曠ず --> - <ul class="right-main" v-for="(item, index) in resultList" :key="index"> + <ul + class="right-main" + v-for="(item, index) in resultList" + :key="index" + > <li class="main-name"> <p>{{ item.name }}</p> <p> <el-button @click="goPage(item.id)">璇︽儏</el-button> - <el-button>AI鏅鸿兘闃呰</el-button> + <el-button @click="openAiReading(item.AIReading, item.name)" + >AI鏅鸿兘闃呰</el-button + > </p> </li> <li class="main-sources"> - <span :class="getResourceTypeClass(item.cmsItemType)">{{ item.resourceTypeName }}</span> + <span :class="getResourceTypeClass(item.cmsItemType)">{{ + item.resourceTypeName + }}</span> <span>{{ item.source }}</span> <span>{{ item.year }}</span> <span v-if="item.DOI">doi锛歿{ item.DOI }}</span> @@ -158,33 +243,75 @@ <li class="main-author"> {{ item.author }} </li> - <li class="main-title" :title="item.cleanAbstract" v-if="item.abstract"> + <li + class="main-title" + :title="item.cleanAbstract" + v-if="item.abstract" + > <span>鎽樿: </span> <span class="page-main-abstract" v-html="item.cleanAbstract" ></span> </li> - <li class="main-keyword" v-if="item.keyWords && item.keyWords.length > 0"> + <li + class="main-keyword" + v-if="item.keyWords && item.keyWords.length > 0" + > <span>鍏抽敭璇嶏細</span> - <span class="keyWord" v-for="(citem, cindex) in item.keyWords" :key="cindex" @click=" - () => - handleSearch({ - text: citem, - type: 'keyWords', - label: '鍏抽敭璇�', - }) - "> + <span + class="keyWord" + v-for="(citem, cindex) in item.keyWords" + :key="cindex" + @click=" + () => + handleSearch({ + text: citem, + type: 'keyWords', + label: '鍏抽敭璇�', + }) + " + > {{ citem }} </span> </li> </ul> <!-- 鍒嗛〉 --> <div class="pagination" v-if="total > 6"> - <el-pagination @current-change="handleCurrentChange" class="msg-pagination-container" - :background="isBackground" layout="prev, pager, next" :total="total" :page-size="10"> + <el-pagination + @current-change="handleCurrentChange" + class="msg-pagination-container" + :background="isBackground" + layout="prev, pager, next" + :total="total" + :page-size="10" + > </el-pagination> </div> + <el-dialog + v-model="dialogVisible" + :title="aIName" + width="60vw" + top="3vh" + bottom="2vh" + :visible.sync="dialogVisible" + class="custom-dialog" + > + <div + class="AIReadingBox" + element-loading-spinner="el-icon-loading" + element-loading-background="rgba(0, 0, 0, 0)" + > + <div + class="richTextInitBox" + v-if="AIReading" + v-html="AIReading" + ></div> + <div class="richTextInitError" v-else> + 缃戠粶绻佸繖锛岃绋嶅悗鍐嶈瘯銆� + </div> + </div> + </el-dialog> <el-empty v-if="!loading && !resultList.length"></el-empty> </div> </div> @@ -207,6 +334,9 @@ }, data() { return { + dialogVisible: false, + aIName: "", + AIReading: "", relatedList: [], // 杈撳叆妗嗙殑鍐呭 inputValue: "", @@ -280,7 +410,7 @@ { type: "input", label: "鍏抽敭璇�", - name: "keyword", + name: "keyWords", value: "", }, { @@ -367,7 +497,6 @@ num: 24, check: false, }, - ], }, // 鏂囩尞鏉ユ簮 @@ -402,7 +531,6 @@ num: 25, check: false, }, - ], }, // 瀛︾ @@ -455,7 +583,7 @@ labelList: { abstract: "鎽樿", author: "浣滆��", - keyword: "鍏抽敭璇�", + keyWords: "鍏抽敭璇�", source: "鏉ユ簮", Name: "鏍囬", year: "骞翠唤", @@ -463,6 +591,9 @@ }; }, mounted() { + console.log(this.$route.query, "query"); + this.inputType = this.$route.query.type; + this.inputValue = this.$route.query.value; this.getSelectData(); }, @@ -513,8 +644,8 @@ content: val[key], value: key, }); - }else { - hasKey.content = val[key] + } else { + hasKey.content = val[key]; } } } @@ -614,7 +745,10 @@ // 璇锋眰鏁版嵁 getItemList() { this.loading = true; + console.log(this.inputValue, " inputValue"); + console.log(this.inputType, " inputType"); let searchData = {}; // 鍒濆鍖栦竴涓┖瀵硅薄鏉ュ瓨鍌ㄦ悳绱㈡暟鎹� + debugger; if (this.inputValue) { // 濡傛灉杈撳叆鍊煎瓨鍦� if (this.inputType != "all") { @@ -626,6 +760,8 @@ // 閬嶅巻杈撳叆閫夐」 for (let index = 0; index < this.inputOptions.length; index++) { const item = this.inputOptions[index]; // 鑾峰彇褰撳墠閫夐」 + + debugger; if (item.value !== "all") { // 濡傛灉褰撳墠閫夐」鐨勫�间笉鏄�"all" if (!Object.keys(searchData).length) { @@ -642,18 +778,26 @@ } } } - // if (this.associationList && this.associationList.length) { - // this.associationList.forEach((item) => { - // if (item.value == "year") { - // const endDate = item.content.split("/")[0] + "/12/31 23:59:59"; - // const startDate = item.content.split("/")[0] + "/01/01 00:00:00"; - // searchData[item.value + ">="] = startDate; - // searchData[item.value + "<="] = endDate; - // } else { - // searchData["||" + item.value + "*"] = item.content; - // } - // }); - // } + + console.log(this.associationList, "searchData11111"); + + if (this.associationList && this.associationList.length) { + this.associationList.forEach((item) => { + if (item.value !== "all") { + if (item.value == "year") { + const endDate = item.content.split("/")[0] + "/12/31 23:59:59"; + const startDate = item.content.split("/")[0] + "/01/01 00:00:00"; + searchData[item.value + ">="] = startDate; + searchData[item.value + "<="] = endDate; + } else if (item.value) { + searchData[item.value + "*"] = item.content; + } else { + searchData["||" + item.value + "*"] = item.content; + } + } + }); + } + console.log(searchData, "searchData"); MG.resource .getItem({ @@ -747,20 +891,26 @@ }, getResourceTypeClass(typeName) { switch (typeName) { - case 'journal': - return 'journal-color'; - case 'books': - return 'books-color'; - case 'video': - return 'video-color'; - case 'audio': - return 'audio-color'; - case 'newspaper': - return 'newspaper-color'; + case "journal": + return "journal-color"; + case "books": + return "books-color"; + case "video": + return "video-color"; + case "audio": + return "audio-color"; + case "newspaper": + return "newspaper-color"; default: - return 'other-color'; + return "other-color"; } - } + }, + + openAiReading(text, name) { + this.AIReading = text; + this.aIName = name; + this.dialogVisible = true; + }, }, }; </script> @@ -1048,12 +1198,15 @@ border-color: #d1d1d1; } - ::v-deep .el-checkbox .el-checkbox__input.is-checked+.el-checkbox__label { + ::v-deep .el-checkbox .el-checkbox__input.is-checked + .el-checkbox__label { color: #2c2c2c; } ::v-deep .el-checkbox .el-checkbox__input.is-checked .el-checkbox__inner, - ::v-deep .el-checkbox .el-checkbox__input.is-indeterminate .el-checkbox__inner { + ::v-deep + .el-checkbox + .el-checkbox__input.is-indeterminate + .el-checkbox__inner { border-color: #8f7a5a; background-color: #8f7a5a; } @@ -1183,23 +1336,26 @@ .journal-color { background-color: #87a8b9; } + .books-color { - background-color: #C48787; + background-color: #c48787; } + .video-color { - background-color: #6F8F5A; + background-color: #6f8f5a; } + .audio-color { background-color: #937950; } + .newspaper-color { - background-color: #8D77B3; + background-color: #8d77b3; } + .other-color { - background-color: #009F9F; + background-color: #009f9f; } - - .main-sources { span:nth-child(1) { @@ -1297,6 +1453,23 @@ } } +.AIReadingBox { + height: 85vh; + min-height: 600px; + padding: 20px 10px; +} + +.richTextInitBox { + height: 100%; + overflow: auto; +} +.richTextInitError { + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + .pagination { display: flex; justify-content: center; @@ -1331,7 +1504,9 @@ border: 1px solid #cccccc; } -:deep.msg-pagination-container.is-background .el-pager li:not(.disabled).active { +:deep.msg-pagination-container.is-background + .el-pager + li:not(.disabled).active { /*褰撳墠閫変腑椤垫暟鐨勬牱寮忚繘琛屼慨鏀�*/ background-color: #937950; color: #fff; @@ -1340,7 +1515,19 @@ } :deep.el-pagination.is-background .el-pager li:not(.disabled):hover { - color: #937950 + color: #937950; +} + +:deep.el-button--primary { + background-color: #937950; + color: #937950; + border: 1px solid #937950; + cursor: pointer; + + &:hover { + background-color: #937950; + color: #fffdf8; + } } </style> -- Gitblit v1.9.1