设备管理页面
This commit is contained in:
parent
73229626cf
commit
3552e29a98
@ -1,8 +1,12 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 5110769 */
|
||||
src: url('iconfont.woff2?t=1768459731102') format('woff2'),
|
||||
url('iconfont.woff?t=1768459731102') format('woff'),
|
||||
url('iconfont.ttf?t=1768459731102') format('truetype');
|
||||
src:
|
||||
url("//at.alicdn.com/t/c/font_5110769_ml1r3nz6si.woff2?t=1769419532686")
|
||||
format("woff2"),
|
||||
url("//at.alicdn.com/t/c/font_5110769_ml1r3nz6si.woff?t=1769419532686")
|
||||
format("woff"),
|
||||
url("//at.alicdn.com/t/c/font_5110769_ml1r3nz6si.ttf?t=1769419532686")
|
||||
format("truetype");
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -13,6 +17,22 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-shiyongcishu:before {
|
||||
content: "\e6e8";
|
||||
}
|
||||
|
||||
.icon-zuishouhuanyingdeyingyongchengxu:before {
|
||||
content: "\e6e5";
|
||||
}
|
||||
|
||||
.icon-zuishouhuanying:before {
|
||||
content: "\e602";
|
||||
}
|
||||
|
||||
.icon-yisheng1:before {
|
||||
content: "\e813";
|
||||
}
|
||||
|
||||
.icon-zongshu:before {
|
||||
content: "\e71e";
|
||||
}
|
||||
@ -56,4 +76,3 @@
|
||||
.icon-shebeipinpai1:before {
|
||||
content: "\e684";
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,284 @@
|
||||
<script setup lang='ts'></script>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import useCurrentInstance from "@/hooks/useCurrentInstance";
|
||||
const titleList = ref([
|
||||
{ icon: 'icon-shebeipinpai1', count: 93, title: "设备品牌数" },
|
||||
{ icon: 'icon-shebeigailan', count: 93, title: "设备型号数" },
|
||||
{ icon: 'icon-shiyongcishu', count: 3, title: "设备使用次数" },
|
||||
{ icon: 'icon-zuishouhuanyingdeyingyongchengxu', count: 'Codman', title: "最受欢迎品牌" },
|
||||
])
|
||||
const dialogVisible = ref(false)
|
||||
const tableData = ref([{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
}])
|
||||
|
||||
for (let index = 0; index < 10; index++) {
|
||||
tableData.value.push({
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},)
|
||||
|
||||
}
|
||||
const brandDom = ref<HTMLDivElement | null>(null)
|
||||
const typeDom = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const { globalProperties } = useCurrentInstance()
|
||||
const rederBrand = () => {
|
||||
const chart = globalProperties.$echarts.init(brandDom.value)
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{b} : {c} 台手术',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
shadowStyle: {
|
||||
color: "rgba(200, 200, 200, .1)"
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
color: {
|
||||
type: 'linear',
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: '0', color: '#3063b0' // 0% 处的颜色
|
||||
}, {
|
||||
offset: '1', color: '#519ef8' // 100% 处的颜色
|
||||
}],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['美敦力', '贝朗蛇牌', '索菲萨', 'Codman']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 80, 70],
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.setOption(option)
|
||||
}
|
||||
const rederType = () => {
|
||||
const chart = globalProperties.$echarts.init(typeDom.value)
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{b} : {c} 台手术',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
shadowStyle: {
|
||||
color: "rgba(200, 200, 200, .1)"
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '5%',
|
||||
bottom: '5%',
|
||||
containLabel: true
|
||||
},
|
||||
color: '#17a2b8',
|
||||
xAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['FV434-T', 'SPVA', 'LPS50', 'SMB', 'FX434-T', 'SPVA-2010', '823832', '823114', '42866']
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
data: [20, 50, 100, 10, 120, 200, 150, 80, 70],
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.setOption(option)
|
||||
}
|
||||
onMounted(() => {
|
||||
rederBrand()
|
||||
rederType()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="equipment">
|
||||
<h1>设备管理</h1>
|
||||
<div class="data">
|
||||
<ul>
|
||||
<li class="box_shadow" v-for="item in titleList">
|
||||
<i :class="['iconfont', item.icon]"></i>
|
||||
<div>
|
||||
<h2>{{ item.count }}</h2>
|
||||
<text>{{ item.title }}</text>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="chart">
|
||||
<div class="box_shadow">
|
||||
<h3>设备品牌使用统计</h3>
|
||||
<div ref="brandDom"></div>
|
||||
</div>
|
||||
<div class="box_shadow">
|
||||
<h3>设备型号分布</h3>
|
||||
<div ref="typeDom"></div>
|
||||
</div>
|
||||
</div>
|
||||
<TableBox :total="100">
|
||||
<template #header>
|
||||
最近手术记录 <el-button size="small" type="primary">查看全部</el-button>
|
||||
</template>
|
||||
<el-table stripe :data="tableData" height="480">
|
||||
<el-table-column prop="date" label="品牌" width="120" />
|
||||
<el-table-column prop="name" label="型号" width="150" />
|
||||
<el-table-column prop="name" label="设备名称" width="150" />
|
||||
<el-table-column prop="name" label="设备类型" />
|
||||
<el-table-column prop="name" label="使用次数" width="150" />
|
||||
<el-table-column prop="name" label="最近使用" width="150" />
|
||||
<el-table-column prop="name" label="平均初始压力" width="150" />
|
||||
<el-table-column label="name" width="180">
|
||||
<template #default="scope">
|
||||
<el-tag>{{ scope.row.name }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column fixed="right" label="操作" align="center" width="150">
|
||||
<template #default>
|
||||
<el-button link type="primary" size="small" @click="dialogVisible = true">
|
||||
查看详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</TableBox>
|
||||
<el-dialog v-model="dialogVisible" title="手术详情" width="1000px" @close="dialogVisible = false">
|
||||
<div class="basic_info">
|
||||
<div class="list">
|
||||
<div>
|
||||
<div>品牌</div>
|
||||
<p>Codman</p>
|
||||
<div>型号</div>
|
||||
<p>823832</p>
|
||||
</div>
|
||||
<div>
|
||||
<div>设备名称</div>
|
||||
<p>强生</p>
|
||||
<div>设备类型</div>
|
||||
<p>阀门</p>
|
||||
</div>
|
||||
<div>
|
||||
<div>使用次数</div>
|
||||
<p>61</p>
|
||||
<div>最近使用</div>
|
||||
<p>2025-07-25</p>
|
||||
</div>
|
||||
<div>
|
||||
<div>平均初始压力</div>
|
||||
<p>119</p>
|
||||
</div>
|
||||
</div>
|
||||
<h3>植入设备信息</h3>
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column prop="date" label="手术日期" width="150" />
|
||||
<el-table-column prop="name" label="患者姓名" width="150" />
|
||||
<el-table-column prop="address" label="手术医生" width="150" />
|
||||
<el-table-column prop="address" label="分流方式" />
|
||||
<el-table-column prop="address" label="初始压力" />
|
||||
</el-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
.data {
|
||||
h3 {
|
||||
font-weight: 100;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 120px;
|
||||
padding: 20px;
|
||||
align-self: center;
|
||||
gap: 15px;
|
||||
|
||||
i {
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 30px;
|
||||
|
||||
}
|
||||
|
||||
text {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
|
||||
>div {
|
||||
flex: 1;
|
||||
height: 400px;
|
||||
|
||||
|
||||
>div {
|
||||
width: 100%;
|
||||
height: 330px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.basic_info {
|
||||
.list {
|
||||
border: 1px solid #ebeef5;
|
||||
border-bottom: none;
|
||||
|
||||
>div {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
|
||||
>div {
|
||||
width: 200px;
|
||||
padding: 10px;
|
||||
background-color: #f5f7fa;
|
||||
border-right: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
p {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
|
||||
&:first-of-type {
|
||||
border-right: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 15px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -32,7 +32,10 @@ const rederLine = () => {
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2026/07/08', '2026/07/08', '2026/07/08', '2026/07/08']
|
||||
data: ['2026/07/08', '2026/07/08', '2026/07/08', '2026/07/08'],
|
||||
axisLabel: {
|
||||
rotate: 50
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
@ -194,8 +197,8 @@ const openDialog = () => {
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="调压记录" name="record">
|
||||
<div v-if="false">
|
||||
<el-alert title="Customized close text" type="info" :closable="false" />
|
||||
<div v-if="true">
|
||||
<el-alert title="共调压 4 次，当前阀门压力 80mmH2O，设备型号 Codman 823832" type="info" :closable="false" />
|
||||
<div class="charts" ref="lineDom"></div>
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column prop="date" label="调压时间" width="180" />
|
||||
@ -271,7 +274,6 @@ const openDialog = () => {
|
||||
margin: 20px 0;
|
||||
width: 960px;
|
||||
height: 300px;
|
||||
background-color: antiquewhite;
|
||||
}
|
||||
|
||||
.affect {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user