molecularDatabase.git

			@@ -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;
			}

			}


			}