From d765d3a8c24d9d22115ab2fe33942bcb08676273 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期四, 07 八月 2025 17:03:07 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/molecularDatabase
---
src/views/searchList/index.vue | 319 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 319 insertions(+), 0 deletions(-)
diff --git a/src/views/searchList/index.vue b/src/views/searchList/index.vue
new file mode 100644
index 0000000..90767f4
--- /dev/null
+++ b/src/views/searchList/index.vue
@@ -0,0 +1,319 @@
+<template>
+ <page>
+ <div class="searchList">
+ <div class="search-input">
+ <div class="searchInputBox">
+ <input v-model="pageData.searchText" type="text" placeholder="" />
+ <el-button color="#16569C" :icon="Search" class="search-btn" round
+ @click="getList(pageData.searchText)" style=""></el-button>
+ </div>
+ </div>
+ <div class="search-list">
+ <div class="search-result">
+ {{ t('message.searchResult') }} ({{ pageData.list.length }})
+ </div>
+ <div class="search-item" v-for="(item, index) in pageData.list" :key="index" @click="goPage(item)">
+ <div class="search-item-name">{{ item.name }}</div>
+ <div class="search-item-synonyms">
+ <span>{{ t('message.synonyms') }}:</span>{{ item.synonyms }}
+ </div>
+ <div class="search-item-box">
+ <div class="box-left">
+ <div class="box-left-item">
+ <span>{{ t('message.ID') }}:</span>{{ item.ID }}
+ </div>
+ <div class="box-left-MolecularFormula">
+ <span>{{ t('message.MolecularFormula') }}:</span>
+ <div v-html="item.MolecularFormula"></div>
+ </div>
+ <div class="box-left-item">
+ <span>{{ t('message.MolecularWeight') }}:</span>{{ item.MolecularWeight }}
+ </div>
+ <div class="box-left-item">
+ <span>{{ t('message.Smiles') }}:</span>{{ item.Smiles }}
+ </div>
+ <div class="box-left-item">
+ <span>{{ t('message.XLogP3') }}:</span>{{ item.XLogP3 }}
+ </div>
+ <div class="box-left-item">
+ <span>{{ t('message.HydrogenBondDonorCount') }}:</span>{{ item.HydrogenBondDonorCount }}
+ </div>
+ <div class="box-left-item">
+ <span>{{ t('message.HydrogenBondAcceptorCount') }}:</span>{{
+ item.HydrogenBondAcceptorCount }}
+ </div>
+ <div class="box-left-item">
+ <span>{{ t('message.FormalCharge') }}:</span>{{ item.FormalCharge }}
+ </div>
+ </div>
+ <div class="box-right">
+ <div>
+ <img :src="item.img2D" alt="" />
+ <div>2D</div>
+ </div>
+ <div>
+ <img :src="item.img3D" alt="" />
+ <div>3D</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </page>
+</template>
+
+<script setup lang="ts">
+import { inject, reactive, onMounted } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+import type { searchList } from '@/types/searchlist'
+import { useI18n } from 'vue-i18n'
+const { locale, t } = useI18n()
+import { pathData } from '@/assets/js/config'
+import router from '@/router'
+import img2D from '../../assets/images/serachList/2D.png'
+import img3D from '../../assets/images/serachList/3D.png'
+import MG from '@/assets/js/middleGround/WebMiddleGroundApi.js'
+const config: any = inject('config')
+const pageData = reactive<searchList>({
+ searchText: '',
+ list: [
+ {
+ name: 'Aspirin',
+ FormalCharge:
+ '9999999999999999999999999999999999999999999999999999999999999999999999989999999999999999999999999999999999999999999',
+ img2D: img2D,
+ img3D: img3D,
+ },
+ ],
+})
+
+onMounted(() => {
+ pageData.searchText = router.currentRoute.value.query.searchText
+ getList(pageData.searchText)
+})
+
+const getList = (txt: any) => {
+ const searchData = {
+ 'Name*': pageData.searchText
+ }
+ console.log(searchData);
+ MG.resource.getItem({
+ path: config.refCodes.BioChargeMap,
+ queryType: '*',
+ paging: { start: 0, size: 999999999 },
+ searchList: [
+ {
+ compareType: '',
+ keywords: txt ?? "",
+ field: 'string',
+ subSearches: ['string'],
+ },
+ ],
+ sort: {
+ LinkOrder: 'Desc',
+ },
+ fields: {
+ ID: '',
+ Synonyms: [],
+ MolecularWeight: [],
+ SMILE: [],
+ XLogP3: [],
+ HydrogenBondDonorCount: [],
+ HydrogenBondAcceptorCount: [],
+ FormalCharge: [],
+ ChargeDistribution: [],
+ PubChemCID: [],
+ PubmedLink: [],
+ '2DStructure': [],
+ '3DConformer': [],
+ MolecularFormula: [],
+ SynonymsLine: [],
+ ...searchData
+ }
+ }).then((res: any) => {
+ if (res.datas.length > 0) {
+ res.datas.forEach((item: any) => {
+ // item.SynonymsLine = item.Synonyms.join(';')
+ })
+ pageData.list = res.datas
+ }
+ })
+}
+
+const goPage = (item: any) => {
+ router.push(pathData.detailsPage)
+}
+</script>
+
+<style lang="less" scoped>
+.searchList {
+ height: 100%;
+ background-color: #ecf9f6;
+}
+
+.search-input {
+ width: 100%;
+ background-image: url('../../assets/images/serachList/list_bg.png');
+ background-size: cover;
+ background-position: center center;
+ padding: 28px 0 51px 0;
+
+ .searchInputBox {
+ width: 60%;
+ height: 57px;
+ margin: 0 auto;
+ color: #dfdfdf;
+ display: flex;
+ align-items: center;
+ border: 1px solid #dfdfdf;
+ border-radius: 500px;
+ overflow: hidden;
+ background-color: white;
+ padding-left: 10px;
+ }
+
+ .searchInputBox input {
+ flex: 1;
+ width: 50%;
+ height: 90%;
+ font-family: STSongti-SC-Regular;
+ font-size: 14px;
+ letter-spacing: 0.5px;
+ border: none;
+ outline: none;
+ }
+
+ .search-btn {
+ height: 100%;
+ width: 7.1%;
+ border-radius: 60px;
+ }
+}
+
+.search-list {
+ width: 64%;
+ margin: 0 auto;
+ padding: 25px 0;
+ overflow-y: auto;
+}
+
+.search-result {
+ padding-bottom: 23px;
+}
+
+.search-item {
+ width: 100%;
+ background: #ffffff;
+ border-radius: 10px 10px 10px 10px;
+ padding: 17px 27px;
+ margin-bottom: 24px;
+
+ &:hover {
+ cursor: pointer;
+ border: 2px solid;
+ border-image: linear-gradient(90deg, rgba(0, 108, 182, 1), rgba(1, 100, 76, 1)) 2 2;
+ border-radius: 10px 10px 10px 10px;
+ }
+
+ .search-item-name {
+ font-weight: normal;
+ font-size: 18px;
+ color: #2d806c;
+ padding-bottom: 12px;
+ }
+
+ .search-item-synonyms {
+ padding-bottom: 12px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ span {
+ padding-right: 5px;
+ font-family: Inter, Inter;
+ font-weight: 400;
+ font-size: 13px;
+ color: #385b53;
+ }
+ }
+
+ .search-item-box {
+ display: flex;
+ }
+
+ .box-left {
+ width: 65%;
+ position: relative;
+
+ .box-left-item {
+ font-family: Inter, Inter;
+ font-weight: 400;
+ font-size: 13px;
+ color: #000;
+ padding-bottom: 12px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .box-left-MolecularFormula {
+ display: flex;
+
+ div {
+ font-size: 13px;
+ }
+ }
+
+ span {
+ padding-right: 5px;
+ font-family: Inter, Inter;
+ font-weight: 400;
+ font-size: 13px;
+ color: #385b53;
+ }
+ }
+
+ .box-left::after {
+ content: '';
+ /* 浼厓绱犲繀椤昏缃� content 灞炴�� */
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 1px;
+ /* 杈规鐨勫搴� */
+ height: 100%;
+ /* 涓庣埗鍏冪礌绛夐珮 */
+
+ /* 鐩存帴璁剧疆鑳屾櫙涓烘笎鍙� */
+ background: linear-gradient(180deg,
+ rgba(255, 255, 255, 0),
+ rgba(184, 184, 184, 1),
+ rgba(255, 255, 255, 0));
+ }
+
+ .box-right {
+ width: 35%;
+ padding: 30px 48px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ img {
+ padding-bottom: 20px;
+ }
+
+ div {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+
+
+ }
+}
+
+.fl {
+ display: flex;
+}
+</style>
--
Gitblit v1.9.1