From 401ed176c9f1bdd97ccdf827d9454b11a3891f79 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期五, 08 八月 2025 23:10:50 +0800
Subject: [PATCH] 8.8 初始版本
---
src/views/searchList/index.vue | 97 +++++++++++++++++++++++++++++++++---------------
1 files changed, 67 insertions(+), 30 deletions(-)
diff --git a/src/views/searchList/index.vue b/src/views/searchList/index.vue
index 90767f4..d68f8fc 100644
--- a/src/views/searchList/index.vue
+++ b/src/views/searchList/index.vue
@@ -4,23 +4,26 @@
<div class="search-input">
<div class="searchInputBox">
<input v-model="pageData.searchText" type="text" placeholder="" />
+ <el-icon v-if="pageData.searchText != ''" class="clear-icon" @click="clearInput">
+ <CloseBold />
+ </el-icon>
<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-list" v-loading="pageData.loading">
<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 }}
+ <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 }}
+ <span>{{ t('message.ID') }}:</span>{{ item.id }}
</div>
<div class="box-left-MolecularFormula">
<span>{{ t('message.MolecularFormula') }}:</span>
@@ -29,8 +32,9 @@
<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 class="box-left-MolecularFormula">
+ <span>{{ t('message.Smiles') }}:</span>
+ <div v-html="item.SMILES"></div>
</div>
<div class="box-left-item">
<span>{{ t('message.XLogP3') }}:</span>{{ item.XLogP3 }}
@@ -47,14 +51,15 @@
</div>
</div>
<div class="box-right">
- <div>
+ <div v-if="item.img2D">
<img :src="item.img2D" alt="" />
<div>2D</div>
</div>
- <div>
- <img :src="item.img3D" alt="" />
+ <div v-if="item.iframeSrc">
+ <iframe class="iframe" :src="item.iframeSrc" frameborder="0"></iframe>
<div>3D</div>
</div>
+ <el-empty class="empty" image-size="100" v-if="!item.img2D || !item.iframeSrc"></el-empty>
</div>
</div>
</div>
@@ -64,7 +69,7 @@
</template>
<script setup lang="ts">
-import { inject, reactive, onMounted } from 'vue'
+import { ref, inject, reactive, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import type { searchList } from '@/types/searchlist'
import { useI18n } from 'vue-i18n'
@@ -74,30 +79,34 @@
import img2D from '../../assets/images/serachList/2D.png'
import img3D from '../../assets/images/serachList/3D.png'
import MG from '@/assets/js/middleGround/WebMiddleGroundApi.js'
+import type { id } from 'element-plus/es/locales.mjs'
const config: any = inject('config')
const pageData = reactive<searchList>({
searchText: '',
- list: [
- {
- name: 'Aspirin',
- FormalCharge:
- '9999999999999999999999999999999999999999999999999999999999999999999999989999999999999999999999999999999999999999999',
- img2D: img2D,
- img3D: img3D,
- },
- ],
+ list: [],
+ loading: false
})
+const isInitialized = ref(false);
+
onMounted(() => {
- pageData.searchText = router.currentRoute.value.query.searchText
+ if (!isInitialized.value && router.currentRoute.value.query.searchText) {
+ pageData.searchText = router.currentRoute.value.query.searchText;
+ isInitialized.value = true;
+ }
getList(pageData.searchText)
})
+const clearInput = () => {
+ pageData.searchText = ''
+}
+
const getList = (txt: any) => {
+ pageData.list = []
const searchData = {
'Name*': pageData.searchText
}
- console.log(searchData);
+ pageData.loading = true
MG.resource.getItem({
path: config.refCodes.BioChargeMap,
queryType: '*',
@@ -114,10 +123,9 @@
LinkOrder: 'Desc',
},
fields: {
- ID: '',
Synonyms: [],
MolecularWeight: [],
- SMILE: [],
+ SMILES: [],
XLogP3: [],
HydrogenBondDonorCount: [],
HydrogenBondAcceptorCount: [],
@@ -133,16 +141,25 @@
}
}).then((res: any) => {
if (res.datas.length > 0) {
+
res.datas.forEach((item: any) => {
- // item.SynonymsLine = item.Synonyms.join(';')
+ if (item.id == 874053) {
+ item.img2D = img2D
+ item.iframeSrc = "http://182.92.203.7:3007/showModel/?name=" + 'Conformer3D_COMPOUND_CID_2244'
+ }
+
})
- pageData.list = res.datas
+
+
+ pageData.list = res.datas.reverse()
}
+ pageData.loading = false
})
}
const goPage = (item: any) => {
- router.push(pathData.detailsPage)
+ const query = { id: item.id }
+ router.push({ path: pathData.detailsPage, query })
}
</script>
@@ -184,10 +201,18 @@
outline: none;
}
+ .clear-icon {
+ color: #212121;
+ font-size: 18px !important;
+ margin-right: 5px;
+ cursor: pointer;
+ }
+
.search-btn {
height: 100%;
width: 7.1%;
border-radius: 60px;
+ font-size: 28px !important;
}
}
@@ -208,12 +233,11 @@
border-radius: 10px 10px 10px 10px;
padding: 17px 27px;
margin-bottom: 24px;
+ border: 1px solid #ebebeb;
&: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;
+ border: 1px solid rgba(1, 100, 76, 1);
}
.search-item-name {
@@ -259,8 +283,10 @@
.box-left-MolecularFormula {
display: flex;
+ padding-bottom: 12px;
div {
+ color: #000;
font-size: 13px;
}
}
@@ -294,9 +320,9 @@
.box-right {
width: 35%;
- padding: 30px 48px;
+ padding: 30px 10px;
display: flex;
- align-items: center;
+ align-items: end;
justify-content: space-between;
img {
@@ -311,6 +337,17 @@
}
+
+ .empty {
+ width: 30%;
+ margin: 0 auto;
+ --el-empty-padding: 0px 0 !important;
+ }
+}
+
+.iframe {
+ width: 220px;
+ margin-bottom: 20px;
}
.fl {
--
Gitblit v1.9.1