duan
2 years ago
parent
1364bf1d28
commit
51c9af63b7
@ -1,13 +1,194 @@
|
||||
<template>
|
||||
<h1>化学品数据库</h1>
|
||||
<div>
|
||||
<div v-if="show" class="main-container">
|
||||
<div class="title">{{ $route.fullPath.indexOf('msds') !== -1 ? 'MSDS数据库' : '危化品数据库' }}</div>
|
||||
<div class="header">
|
||||
<el-input v-model="value" placeholder="请输入内容" />
|
||||
<el-button type="primary" icon="el-icon-search">搜索</el-button>
|
||||
</div>
|
||||
<div class="kws-title">最近搜索</div>
|
||||
<el-divider />
|
||||
<div class="kws">
|
||||
<span v-for="(item,index) in searchKWs" :key="index" class="kw">{{ item }}</span>
|
||||
</div>
|
||||
<div class="kws-title">搜索结果</div>
|
||||
<el-divider />
|
||||
<div class="search-item-container">
|
||||
<div v-for="item in searchItem" :key="item.code" class="search-item" @click="handleInfo(item)">
|
||||
<div class="search-img">
|
||||
<img src="@/assets/3-主概览/今日入库.png">
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="code">{{ item.code }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="main-container">
|
||||
<div class="title">{{ $route.fullPath.indexOf('msds') !== -1 ? 'MSDS数据库' : '危化品数据库' }}</div>
|
||||
<div class="header">
|
||||
<el-button @click="handleBack">返回上级</el-button>
|
||||
<div class="title-sub">{{ currentItem.name }}</div>
|
||||
</div>
|
||||
<el-descriptions :column="1" border size="small">
|
||||
<el-descriptions-item label="英文名称">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="CAS码">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="分子式">苏州市</el-descriptions-item>
|
||||
<el-descriptions-item label="分子量">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||
<el-descriptions-item label="物理数据">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="毒理数据">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="用途">苏州市</el-descriptions-item>
|
||||
<el-descriptions-item label="稳定性">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="生态性">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="注意事项">苏州市</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-descriptions :column="1" border size="small">
|
||||
<el-descriptions-item label="试剂属性">kooriookami</el-descriptions-item>
|
||||
<el-descriptions-item label="储存禁忌">18100000000</el-descriptions-item>
|
||||
<el-descriptions-item label="储存方法">苏州市</el-descriptions-item>
|
||||
<el-descriptions-item label="柜体储存要求">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||
<el-descriptions-item label="领用归还规定">kooriookami</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Database'
|
||||
name: 'Database',
|
||||
data() {
|
||||
return {
|
||||
searchItem: [
|
||||
{
|
||||
name: '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐',
|
||||
code: '226883-66-5'
|
||||
},
|
||||
{
|
||||
name: '4,6-二氯-2-丙基硫代嘧啶-5-胺',
|
||||
code: '145783-15-9'
|
||||
},
|
||||
{
|
||||
name: '3-辛酰基硫代丙基三乙氧基硅烷',
|
||||
code: '220727-26-4'
|
||||
},
|
||||
{
|
||||
name: '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐',
|
||||
code: '226883-66-15'
|
||||
},
|
||||
{
|
||||
name: '4,6-二氯-2-丙基硫代嘧啶-5-胺',
|
||||
code: '145783-15-19'
|
||||
},
|
||||
{
|
||||
name: '3-辛酰基硫代丙基三乙氧基硅烷',
|
||||
code: '220727-26-14'
|
||||
},
|
||||
{
|
||||
name: '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐',
|
||||
code: '226883-66-25'
|
||||
},
|
||||
{
|
||||
name: '4,6-二氯-2-丙基硫代嘧啶-5-胺',
|
||||
code: '145783-15-29'
|
||||
},
|
||||
{
|
||||
name: '3-辛酰基硫代丙基三乙氧基硅烷',
|
||||
code: '220727-26-24'
|
||||
}
|
||||
],
|
||||
searchKWs: [
|
||||
'氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐',
|
||||
'甲醛', '乙醇'
|
||||
// , '三氯甲烷',
|
||||
// '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐',
|
||||
// '氢氧化1-(3-硫代丙基)-2-13-(3-硫代丙基)-2(3H)-苯并噻唑亚基]甲基}萘并[1.2-d]噻唑内盐,三乙基铵盐'
|
||||
],
|
||||
value: '',
|
||||
currentItem: {},
|
||||
show: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleInfo(item) {
|
||||
this.currentItem = item
|
||||
this.show = false
|
||||
},
|
||||
handleBack() {
|
||||
this.show = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.main-container{
|
||||
height:calc(100vh - 12rem) ;
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
background: white;
|
||||
.title{
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
}
|
||||
.header{
|
||||
.title-sub{
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
color: #303133;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
margin: 1rem 0 1rem 0;
|
||||
.el-input{
|
||||
width: 18.75rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
.kws{
|
||||
margin-bottom: 2rem;
|
||||
.kw{
|
||||
line-height: 3rem;
|
||||
width: 670px;
|
||||
height: 48px;
|
||||
background: #F0F0F0;
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
opacity: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #303133;
|
||||
margin-right: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
.search-item-container{
|
||||
overflow-y: scroll;
|
||||
max-height: 24rem;
|
||||
.search-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
.search-img img{
|
||||
width: 56px;
|
||||
}
|
||||
.content{
|
||||
margin-left: 1rem;
|
||||
.name{
|
||||
font-size: 1.125rem;
|
||||
font-weight: bold;
|
||||
color: #303133;
|
||||
}
|
||||
.code{
|
||||
margin-top: 1rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in new issue