<template>
|
<page>
|
<div class="detailsPage">
|
<div class="detailsPage-box">
|
<div class="details-result">
|
{{ t('message.compoundSummary') }}
|
</div>
|
<div class="details-main" v-for="(item, index) in pageData.list" :key="index">
|
<div class="details-name">{{ item.name }}</div>
|
<div class="details-box">
|
<div class="details-box-left">
|
<div class="left-item">
|
<div class="left-item-title">{{ t('message.ID') }}</div>
|
<div class="left-item-content">{{ item.id }}</div>
|
</div>
|
<div class="left-item">
|
<div class="left-item-title">{{ t('message.MolecularFormula') }}</div>
|
<div class="left-item-content" v-html="item.MolecularFormula"></div>
|
</div>
|
<div class="left-item">
|
<div class="left-item-title">{{ t('message.MolecularWeight') }}</div>
|
<div class="left-item-content">{{ item.MolecularWeight }}</div>
|
</div>
|
<div class="left-item">
|
<div class="left-item-title">{{ t('message.Smiles') }}</div>
|
<div class="left-item-content">{{ item.SMILES }}</div>
|
</div>
|
<div class="left-item">
|
<div class="left-item-title">{{ t('message.XLogP3') }}</div>
|
<div class="left-item-content">{{ item.XLogP3 }}</div>
|
</div>
|
<div class="left-item">
|
<div class="left-item-title">{{ t('message.HydrogenBondDonorCount') }}</div>
|
<div class="left-item-content">{{ item.HydrogenBondDonorCount }}</div>
|
</div>
|
<div class="left-item">
|
<div class="left-item-title">{{ t('message.HydrogenBondAcceptorCount') }}</div>
|
<div class="left-item-content">{{ item.HydrogenBondAcceptorCount }}</div>
|
</div>
|
<div class="left-item">
|
<div class="left-item-title">{{ t('message.FormalCharge') }}</div>
|
<div class="left-item-content">{{ item.FormalCharge }}</div>
|
</div>
|
<!-- <div class="left-item">
|
<div class="left-item-title">{{ t('message.PubmedID') }}</div>
|
<div class="left-item-content">{{ item.PubChemCID }}</div>
|
</div> -->
|
<div class="left-item">
|
<div class="left-item-title">{{ t('message.Pubmedlink') }}</div>
|
<div class="left-item-content">{{ item.PubmedLink }}</div>
|
</div>
|
</div>
|
<div class="details-box-right">
|
<div class="right-img2D" v-if="item.img2D">
|
<img :src="item.img2D" alt="">
|
<div>2D</div>
|
</div>
|
<div class="right-img3D" v-if="item.img2D">
|
<iframe class="iframe" :src="item.iframeSrc" frameborder="0"></iframe>
|
<div>3D</div>
|
</div>
|
</div>
|
</div>
|
<div class="details-others">
|
<div v-for="(citem, cindex) in item.content" :key="cindex">
|
<div class="others-box-title">
|
<div class="title-icon"></div>
|
<div class="title-text">{{ citem.name }}</div>
|
</div>
|
<div class="others-box-content">
|
<div class="content-download">
|
<img v-if="citem.type == 'Conformer'" src="../../assets/images/details/getImage.png"
|
alt="">
|
<div v-if="citem.type == 'Conformer'" class="content-text">{{ t('message.GetImage')
|
}}</div>
|
<img src="../../assets/images/details/download.png" alt="">
|
<div class="content-text">{{ t('message.download') }}</div>
|
</div>
|
<div class="content-main">
|
<!-- 3D模型 -->
|
<iframe v-if="citem.name == '3D Conformer'" class="message-text-iframe"
|
ref="iframeRef" :src="citem.content" frameborder="0"></iframe>
|
<!-- 2D模型 -->
|
<div v-if="citem.name == '2D Structure'" class="message-text-img">
|
<div>Chemical Structure Depiction</div>
|
<iframe class="message-img-iframe" ref="iframeRef" :src="citem.content"
|
frameborder="0"></iframe>
|
</div>
|
<!-- Charge Distribution -->
|
<div v-if="citem.name == 'Charge Distribution'"
|
v-for="(ditem, dindex) in displayContent" :key="dindex">
|
<div>{{ ditem }}</div>
|
</div>
|
<!-- Charge Distribution -->
|
<div class="ViewMore"
|
v-if="citem.name == 'Charge Distribution' && citem.content.length > 7"
|
@click="toggleExpand">
|
{{ isExpanded ? 'Collapse' : 'View More...' }}
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</page>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, inject, reactive, onMounted, computed } from 'vue'
|
import { useI18n } from 'vue-i18n';
|
const { locale, t } = useI18n();
|
import type { details } from '@/types/details'
|
import img4D from '../../assets/images/details/img-2D.png'
|
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 router from '@/router'
|
const pageData = reactive<details>({
|
list: [
|
],
|
loading: false,
|
})
|
|
onMounted(() => {
|
const id = router.currentRoute.value.query.id
|
getList(id)
|
})
|
|
const getList = (id: any) => {
|
pageData.list = []
|
pageData.loading = true
|
MG.resource.getItem({
|
path: "*",
|
itemId: id,
|
queryType: '*',
|
paging: { start: 0, size: 999999999 },
|
searchList: [
|
{
|
compareType: '',
|
keywords: "",
|
field: 'string',
|
subSearches: ['string'],
|
},
|
],
|
sort: {
|
LinkOrder: 'Desc',
|
},
|
fields: {
|
Synonyms: [],
|
MolecularWeight: [],
|
SMILES: [],
|
XLogP3: [],
|
HydrogenBondDonorCount: [],
|
HydrogenBondAcceptorCount: [],
|
FormalCharge: [],
|
ChargeDistribution: [],
|
PubChemCID: [],
|
PubmedLink: [],
|
'2DStructure': [],
|
'3DConformer': [],
|
MolecularFormula: [],
|
SynonymsLine: [],
|
"3DStructureSDF": [],
|
HerbsContainingThisIngredient: []
|
}
|
}).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'
|
}
|
item.content = [
|
{
|
name: "Charge Distribution",
|
content: item.ChargeDistribution ? item.ChargeDistribution.split('\n') : [],
|
type: "text",
|
},
|
// {
|
// name: "Herbs Containing This Ingredient",
|
// content: item.HerbsContainingThisIngredient,
|
// type: "text",
|
// },
|
{
|
name: "2D Structure",
|
content: img4D,
|
type: "Conformer",
|
},
|
{
|
name: "3D Conformer",
|
content: "http://182.92.203.7:3007/showModel/?name=" + 'Conformer3D_COMPOUND_CID_2244',
|
type: "Conformer",
|
}
|
]
|
})
|
pageData.list = res.datas
|
}
|
pageData.loading = false
|
})
|
}
|
|
const isExpanded = ref(false);
|
|
const displayContent = computed(() => {
|
// 假设你只对第一个数据项做展开/收起控制
|
const item = pageData.list[0];
|
if (!item) return [];
|
|
const chargeDistItem = item.content.find((c: any) => c.name === 'Charge Distribution');
|
if (!chargeDistItem) return [];
|
|
return isExpanded.value
|
? chargeDistItem.content
|
: chargeDistItem.content.slice(0, 8);
|
});
|
|
const toggleExpand = () => {
|
isExpanded.value = !isExpanded.value;
|
};
|
|
|
|
</script>
|
|
<style lang="less" scoped>
|
.detailsPage {
|
height: 100%;
|
border-top: 1px solid #D9D9D9;
|
background-color: #ecf9f6;
|
}
|
|
.iframe {
|
margin-bottom: 10px;
|
}
|
|
.detailsPage-box {
|
width: 63%;
|
margin: 0 auto;
|
padding: 0 0 25px 0;
|
|
.details-result {
|
padding: 23px 0;
|
}
|
|
.details-name {
|
font-family: Inter, Inter;
|
font-weight: 500;
|
font-size: 48px;
|
}
|
|
.details-box {
|
width: 100%;
|
background: #FFFFFF;
|
border-radius: 10px 10px 10px 10px;
|
padding: 19px 27px 45px 27px;
|
margin-top: 20px;
|
margin-bottom: 24px;
|
display: flex;
|
}
|
|
.details-box-left {
|
width: 70%;
|
position: relative;
|
|
.left-item {
|
width: 100%;
|
display: flex;
|
margin-bottom: 22px;
|
|
}
|
|
|
.left-item-title {
|
width: 35%;
|
font-family: Inter, Inter;
|
font-weight: 400;
|
font-size: 13px;
|
color: #385B53;
|
}
|
|
.left-item-content {
|
font-family: Inter, Inter;
|
font-weight: 400;
|
font-size: 13px;
|
color: #000;
|
}
|
}
|
|
.details-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));
|
}
|
|
.details-box-right {
|
width: 30%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-around;
|
|
.right-img2D {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
}
|
|
.right-img3D {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
}
|
|
.details-others {
|
width: 100%;
|
background: #FFFFFF;
|
border-radius: 10px 10px 10px 10px;
|
padding: 19px 27px 45px 27px;
|
margin-top: 20px;
|
margin-bottom: 24px;
|
|
|
.others-box-title {
|
display: flex;
|
align-items: center;
|
|
.title-icon {
|
display: block;
|
width: 5px;
|
height: 33px;
|
background: linear-gradient(180deg, #5AB546 0%, #01644C 100%);
|
border-radius: 0px 0px 0px 0px;
|
margin-right: 10px;
|
|
}
|
|
.title-text {
|
font-family: Inter, Inter;
|
font-weight: normal;
|
font-size: 20px;
|
color: #333;
|
}
|
}
|
|
.others-box-content {
|
margin-top: 37px;
|
width: 100%;
|
|
.content-download {
|
width: 100%;
|
display: flex;
|
justify-content: end;
|
align-items: center;
|
background-color: #F0F0F0;
|
border-radius: 5px 5px 0px 0px;
|
padding: 7px 21px;
|
cursor: pointer;
|
|
img {
|
height: 24px;
|
}
|
|
.content-text {
|
margin-right: 10px
|
}
|
|
}
|
|
.content-main {
|
width: 100%;
|
min-height: 282px;
|
border: 1px solid #EBEBEB;
|
border-radius: 0px 0px 5px 5px;
|
margin-bottom: 20px;
|
padding: 22px 36px;
|
overflow: auto;
|
line-height: 2em;
|
|
.message-text-iframe {
|
height: 250px;
|
width: 100%;
|
}
|
|
.message-text-img {
|
height: 300px;
|
display: flex;
|
justify-content: space-around;
|
|
|
}
|
|
.message-img-iframe {}
|
|
.ViewMore {
|
font-weight: 400;
|
font-size: 12px;
|
color: #006CB6;
|
|
cursor: pointer;
|
}
|
|
}
|
|
|
}
|
|
|
|
|
}
|
|
|
|
}
|
</style>
|
