molecularDatabase.git

			@@ -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(';')
			})
			pageData.list = res.datas
			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) => {
			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 {