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/detailsPage/index.vue | 220 +++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 172 insertions(+), 48 deletions(-)
diff --git a/src/views/detailsPage/index.vue b/src/views/detailsPage/index.vue
index c166db0..b6c10d0 100644
--- a/src/views/detailsPage/index.vue
+++ b/src/views/detailsPage/index.vue
@@ -11,11 +11,11 @@
<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 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">{{ item.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>
@@ -23,7 +23,7 @@
</div>
<div class="left-item">
<div class="left-item-title">{{ t('message.Smiles') }}</div>
- <div class="left-item-content">{{ item.Smiles }}</div>
+ <div class="left-item-content">{{ item.SMILES }}</div>
</div>
<div class="left-item">
<div class="left-item-title">{{ t('message.XLogP3') }}</div>
@@ -41,28 +41,28 @@
<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">
<div class="left-item-title">{{ t('message.PubmedID') }}</div>
- <div class="left-item-content">{{ item.PubmedID }}</div>
- </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 class="left-item-content">{{ item.PubmedLink }}</div>
</div>
</div>
<div class="details-box-right">
- <div class="right-img2D">
+ <div class="right-img2D" v-if="item.img2D">
<img :src="item.img2D" alt="">
<div>2D</div>
</div>
- <div class="right-img3D">
- <img :src="item.img3D" alt="">
+ <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, dindex) in item.content" :key="dindex">
+ <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>
@@ -72,13 +72,32 @@
<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>
+ }}</div>
<img src="../../assets/images/details/download.png" alt="">
<div class="content-text">{{ t('message.download') }}</div>
</div>
<div class="content-main">
- <iframe class="message-text-iframe" ref="iframeRef" :src="citem.iframeSrc"
- frameborder="0"></iframe>
+ <!-- 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>
@@ -90,55 +109,131 @@
</template>
<script setup lang="ts">
-import { inject, reactive } from 'vue'
+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: [
- {
- name: 'Aspirin',
- ID: "224456FRET",
- XLogP3: "1.2",
- FormalCharge: "123",
- img2D: img2D,
- img3D: img3D,
- HydrogenBondDonorCount: "1",
- HydrogenBondAcceptorCount: "4",
- PubmedID: "0",
- Pubmedlink: "https://pubchem.ncbi.nlm.nih.gov/compound/#CID#",
- content: [
- {
- name: "Charge Distribution",
- type: "text",
- },
- {
- name: "Herbs Containing This Ingredient",
- type: "text",
- },
- {
- name: "2D Structure",
- type: "Conformer",
- },
- {
- name: "3D Conformer",
- type: "Conformer",
- iframeSrc: "11",
- },
- ]
- },
- ]
+ ],
+ 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 {
@@ -290,11 +385,40 @@
.content-main {
width: 100%;
- height: 282px;
+ 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;
+ }
+
}
+
+
}
--
Gitblit v1.9.1