手术记录
This commit is contained in:
parent
625bd9e19b
commit
c0ca40c1f3
@ -26,6 +26,7 @@ const btnCut = () => {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -9,7 +9,9 @@ const props = defineProps<{
|
||||
<h3>
|
||||
<slot name="header"></slot>
|
||||
</h3>
|
||||
<div class="main">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div class="page">
|
||||
<el-pagination background :total="props.total" />
|
||||
</div>
|
||||
@ -23,12 +25,17 @@ const props = defineProps<{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-weight: 100;
|
||||
padding: 20px 15px;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.main {
|
||||
padding: 0 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.page {
|
||||
padding: 20px 15px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -24,8 +24,8 @@ for (let index = 0; index < 10; index++) {
|
||||
const pieDom = ref<HTMLDivElement | null>(null)
|
||||
const barDom = ref<HTMLDivElement | null>(null)
|
||||
|
||||
const { globalProperties } = useCurrentInstance()
|
||||
const rederPie = () => {
|
||||
const { globalProperties } = useCurrentInstance()
|
||||
const chart = globalProperties.$echarts.init(pieDom.value)
|
||||
const option = {
|
||||
title: [
|
||||
@ -104,7 +104,6 @@ const rederPie = () => {
|
||||
chart.setOption(option)
|
||||
}
|
||||
const rederBar = () => {
|
||||
const { globalProperties } = useCurrentInstance()
|
||||
const chart = globalProperties.$echarts.init(barDom.value)
|
||||
const option = {
|
||||
tooltip: {
|
||||
@ -178,13 +177,14 @@ onMounted(() => {
|
||||
最近手术记录 <el-button size="small" type="primary">查看全部</el-button>
|
||||
</template>
|
||||
<el-table stripe :data="tableData" height="480">
|
||||
<el-table-column prop="date" label="日期" width="180" />
|
||||
<el-table-column prop="name" label="姓名" width="180" />
|
||||
<el-table-column prop="name" label="手术医生" width="180" />
|
||||
<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="180" />
|
||||
<el-table-column prop="name" label="当前阀门压力" width="180" />
|
||||
<el-table-column fixed="right" label="操作" align="center" width="180">
|
||||
<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 fixed="right" label="操作" align="center" width="150">
|
||||
<template #default>
|
||||
<el-button link type="primary" size="small">
|
||||
查看详情
|
||||
@ -200,7 +200,7 @@ onMounted(() => {
|
||||
.data {
|
||||
h3 {
|
||||
font-weight: 100;
|
||||
padding: 20px 15px;
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,301 @@
|
||||
<script setup lang='ts'></script>
|
||||
<script setup lang='ts'>
|
||||
import { nextTick, onMounted, ref } from 'vue';
|
||||
import useCurrentInstance from "@/hooks/useCurrentInstance";
|
||||
const { globalProperties } = useCurrentInstance()
|
||||
|
||||
const form = ref({
|
||||
name: "",
|
||||
date: "",
|
||||
id: "",
|
||||
departments: ""
|
||||
})
|
||||
const options = ref([
|
||||
{ value: 1, label: "1" },
|
||||
{ value: 2, label: "2" }
|
||||
])
|
||||
const tableData = ref([{
|
||||
date: '2016-05-03',
|
||||
name: '张三',
|
||||
address: '啊啊啊啊',
|
||||
}])
|
||||
|
||||
const activeName = ref("info")
|
||||
const dialogVisible = ref(false)
|
||||
const lineDom = ref(null)
|
||||
const rederLine = () => {
|
||||
const chart = globalProperties.$echarts.init(lineDom.value)
|
||||
// return
|
||||
const option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%"
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['2026/07/08', '2026/07/08', '2026/07/08', '2026/07/08']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934],
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}
|
||||
]
|
||||
};
|
||||
chart.setOption(option)
|
||||
}
|
||||
onMounted(() => {
|
||||
})
|
||||
const openDialog = () => {
|
||||
nextTick(() => {
|
||||
rederLine()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="surgery">
|
||||
<h1>手术记录</h1>
|
||||
<el-card>
|
||||
<el-form class="form" :inline="true" :model="form" label-width="90px">
|
||||
<el-form-item label="病人姓名">
|
||||
<el-input v-model="form.name" />
|
||||
</el-form-item>
|
||||
<el-form-item label="住院ID">
|
||||
<el-input v-model="form.id" />
|
||||
</el-form-item>
|
||||
<el-form-item label="科室">
|
||||
<el-select v-model="form.departments" placeholder="选择科室">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="原发病">
|
||||
<el-select v-model="form.departments" placeholder="选择科室">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="脑积水类型">
|
||||
<el-select v-model="form.departments" placeholder="选择科室">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="手术医生">
|
||||
<el-select v-model="form.departments" placeholder="选择科室">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="分流方式">
|
||||
<el-select v-model="form.departments" placeholder="选择科室">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="分流品牌">
|
||||
<el-select v-model="form.departments" placeholder="选择科室">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="脑压类型">
|
||||
<el-select v-model="form.departments" placeholder="选择科室">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="阀门类型">
|
||||
<el-select v-model="form.departments" placeholder="选择科室">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="调压次数">
|
||||
<el-select v-model="form.departments" placeholder="选择科室">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期" style="width: 430px;">
|
||||
<el-date-picker v-model="form.date" type="daterange" start-placeholder="选择开始日期"
|
||||
end-placeholder="选择结束日期" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary">搜索</el-button>
|
||||
<el-button>重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<TableBox :total="100">
|
||||
<template #header>
|
||||
手术记录列表
|
||||
<div>
|
||||
<el-button type="primary">导出数据</el-button>
|
||||
<el-button>刷新</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<el-table stripe :data="tableData" height="480">
|
||||
<el-table-column fixed="left" prop="date" label="手术日期" width="120" />
|
||||
<el-table-column fixed="left" prop="name" label="患者姓名" width="100" />
|
||||
<el-table-column prop="name" label="住院ID" width="100" />
|
||||
<el-table-column prop="name" label="原发病" width="180" />
|
||||
<el-table-column prop="name" label="脑积水类型" width="100" />
|
||||
<el-table-column prop="name" label="脑压类型" width="180" />
|
||||
<el-table-column prop="name" label="分流方式" width="180" />
|
||||
<el-table-column prop="name" label="分流品牌" width="180" />
|
||||
<el-table-column prop="name" label="阀门型号" width="180" />
|
||||
<el-table-column prop="name" label="是否抗磁" width="180" />
|
||||
<el-table-column prop="name" label="术前腰穿压力" width="180" />
|
||||
<el-table-column prop="name" label="初始压力" width="180" />
|
||||
<el-table-column prop="name" label="当前阀门压力" width="180" />
|
||||
<el-table-column prop="name" label="调压次数" width="180" />
|
||||
<el-table-column prop="name" label="手术医生" width="180" />
|
||||
<el-table-column prop="name" label="手术次数" width="180" />
|
||||
<el-table-column fixed="right" label="手术详情" align="center" width="80">
|
||||
<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"
|
||||
@opened="openDialog">
|
||||
<el-tabs v-model="activeName">
|
||||
<el-tab-pane label="基本信息" name="info">
|
||||
<div class="basic_info">
|
||||
<ul>
|
||||
<li>
|
||||
<div>患者姓名</div>
|
||||
<p>张镇烔</p>
|
||||
<div>住院ID</div>
|
||||
<p>20014268</p>
|
||||
</li>
|
||||
<li>
|
||||
<div>身份证号</div>
|
||||
<p>张镇烔</p>
|
||||
<div>手机号</div>
|
||||
<p>20014268</p>
|
||||
</li>
|
||||
<li>
|
||||
<div>身份证号</div>
|
||||
<p>张镇烔</p>
|
||||
<div>手机号</div>
|
||||
<p>20014268</p>
|
||||
</li>
|
||||
<li>
|
||||
<div>最后调压时间</div>
|
||||
<p></p>
|
||||
</li>
|
||||
</ul>
|
||||
<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="设备名称" />
|
||||
<el-table-column prop="address" label="分流方式" width="180" />
|
||||
<el-table-column prop="address" label="初始压力" width="180" />
|
||||
</el-table>
|
||||
</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 class="charts" ref="lineDom"></div>
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column prop="date" label="调压时间" width="180" />
|
||||
<el-table-column prop="name" label="调整压力" width="130">
|
||||
<template #default="scope">
|
||||
<el-tag>{{ scope.row.name }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>>
|
||||
<el-table-column prop="address" label="调压原因" />
|
||||
</el-table>
|
||||
</div>
|
||||
<el-empty v-else description="暂无调压记录" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="手术影响" name="affect">
|
||||
<div class="affect" v-if="true">
|
||||
<div v-for="value in 5">
|
||||
<video controls preload="auto"
|
||||
src="https://bestshuxing.com/upload/2025/07/14/6874f78e-0145-d040-0013-c2e021c0998f.mp4">你的浏览器暂不支持播放该视频
|
||||
</video>
|
||||
<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-empty v-else description="暂无术前影像" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
<style scoped>
|
||||
:deep(.el-form-item__content) {
|
||||
width: 190px;
|
||||
}
|
||||
|
||||
.surgery {
|
||||
|
||||
/* .form {
|
||||
padding-top: 20px;
|
||||
} */
|
||||
.basic_info {
|
||||
ul {
|
||||
border: 1px solid #ebeef5;
|
||||
border-bottom: none;
|
||||
|
||||
li {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.charts {
|
||||
margin: 20px 0;
|
||||
width: 960px;
|
||||
height: 300px;
|
||||
background-color: antiquewhite;
|
||||
}
|
||||
|
||||
.affect {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
|
||||
>div {
|
||||
width: 23%;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
video {
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 0 10px 8px;
|
||||
line-height: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user