<template>
|
<page>
|
<div class="searchList">
|
<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" 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 }}
|
</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-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 }}
|
</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 v-if="item.img2D">
|
<img :src="item.img2D" alt="" />
|
<div>2D</div>
|
</div>
|
<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>
|
</div>
|
</div>
|
</page>
|
</template>
|
|
<script setup lang="ts">
|
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'
|
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'
|
import type { id } from 'element-plus/es/locales.mjs'
|
const config: any = inject('config')
|
const pageData = reactive<searchList>({
|
searchText: '',
|
list: [],
|
loading: false
|
})
|
|
const isInitialized = ref(false);
|
|
onMounted(() => {
|
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
|
}
|
pageData.loading = true
|
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: {
|
Synonyms: [],
|
MolecularWeight: [],
|
SMILES: [],
|
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) => {
|
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.reverse()
|
}
|
pageData.loading = false
|
})
|
}
|
|
const goPage = (item: any) => {
|
const query = { id: item.id }
|
router.push({ path: pathData.detailsPage, query })
|
}
|
</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;
|
}
|
|
.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;
|
}
|
}
|
|
.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;
|
border: 1px solid #ebebeb;
|
|
&:hover {
|
cursor: pointer;
|
border: 1px solid rgba(1, 100, 76, 1);
|
}
|
|
.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;
|
padding-bottom: 12px;
|
|
div {
|
color: #000;
|
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 10px;
|
display: flex;
|
align-items: end;
|
justify-content: space-between;
|
|
img {
|
padding-bottom: 20px;
|
}
|
|
div {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
|
|
}
|
|
.empty {
|
width: 30%;
|
margin: 0 auto;
|
--el-empty-padding: 0px 0 !important;
|
}
|
}
|
|
.iframe {
|
width: 220px;
|
margin-bottom: 20px;
|
}
|
|
.fl {
|
display: flex;
|
}
|
</style>
|
