Compare commits
No commits in common. "3552e29a98a68403a61887708f0ac31b26dacc7b" and "625bd9e19bc80569c0a48e703f270427a3c67ab5" have entirely different histories.
3552e29a98
...
625bd9e19b
@ -26,7 +26,6 @@ const btnCut = () => {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 85%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,12 +1,8 @@
|
|||||||
@font-face {
|
@font-face {
|
||||||
font-family: "iconfont"; /* Project id 5110769 */
|
font-family: "iconfont"; /* Project id 5110769 */
|
||||||
src:
|
src: url('iconfont.woff2?t=1768459731102') format('woff2'),
|
||||||
url("//at.alicdn.com/t/c/font_5110769_ml1r3nz6si.woff2?t=1769419532686")
|
url('iconfont.woff?t=1768459731102') format('woff'),
|
||||||
format("woff2"),
|
url('iconfont.ttf?t=1768459731102') format('truetype');
|
||||||
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 {
|
.iconfont {
|
||||||
@ -17,22 +13,6 @@
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-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 {
|
.icon-zongshu:before {
|
||||||
content: "\e71e";
|
content: "\e71e";
|
||||||
}
|
}
|
||||||
@ -76,3 +56,4 @@
|
|||||||
.icon-shebeipinpai1:before {
|
.icon-shebeipinpai1:before {
|
||||||
content: "\e684";
|
content: "\e684";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -9,9 +9,7 @@ const props = defineProps<{
|
|||||||
<h3>
|
<h3>
|
||||||
<slot name="header"></slot>
|
<slot name="header"></slot>
|
||||||
</h3>
|
</h3>
|
||||||
<div class="main">
|
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
|
||||||
<div class="page">
|
<div class="page">
|
||||||
<el-pagination background :total="props.total" />
|
<el-pagination background :total="props.total" />
|
||||||
</div>
|
</div>
|
||||||
@ -25,17 +23,12 @@ const props = defineProps<{
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
padding: 20px;
|
padding: 20px 15px;
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
|
||||||
padding: 0 10px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
padding: 20px;
|
padding: 20px 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,8 +1,4 @@
|
|||||||
import {
|
import { createMemoryHistory, createRouter } from "vue-router";
|
||||||
createRouter,
|
|
||||||
createWebHashHistory,
|
|
||||||
createWebHistory,
|
|
||||||
} from "vue-router";
|
|
||||||
import Layout from "@/Layout/index.vue";
|
import Layout from "@/Layout/index.vue";
|
||||||
import Login from "@/views/login/index.vue";
|
import Login from "@/views/login/index.vue";
|
||||||
|
|
||||||
@ -42,7 +38,7 @@ const routes = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHashHistory(),
|
history: createMemoryHistory(),
|
||||||
routes,
|
routes,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -1,284 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang='ts'></script>
|
||||||
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>
|
<template>
|
||||||
<div class="data">
|
<div class="equipment">
|
||||||
<ul>
|
<h1>设备管理</h1>
|
||||||
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<style scoped></style>
|
||||||
.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>
|
|
||||||
@ -1,83 +1,5 @@
|
|||||||
<script setup lang='ts'>
|
<script setup lang='ts'></script>
|
||||||
import { ref } from 'vue';
|
|
||||||
import { User, Lock } from '@element-plus/icons-vue'
|
|
||||||
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
|
|
||||||
interface RuleForm {
|
|
||||||
username: string
|
|
||||||
password: string
|
|
||||||
}
|
|
||||||
const ruleFormRef = ref<FormInstance>()
|
|
||||||
const form = ref<RuleForm>({
|
|
||||||
username: "",
|
|
||||||
password: ""
|
|
||||||
})
|
|
||||||
const rules = ref<FormRules<RuleForm>>({
|
|
||||||
username: [{
|
|
||||||
required: true,
|
|
||||||
message: '请输入账号',
|
|
||||||
trigger: 'blur'
|
|
||||||
}],
|
|
||||||
password: [{
|
|
||||||
required: true,
|
|
||||||
message: '请输入密码',
|
|
||||||
trigger: 'blur'
|
|
||||||
}]
|
|
||||||
})
|
|
||||||
const loginBtn = async (formEl: FormInstance | undefined) => {
|
|
||||||
if (!formEl) return
|
|
||||||
await formEl.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
ElMessage({
|
|
||||||
message: '登录成功',
|
|
||||||
type: 'success',
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
ElMessage({
|
|
||||||
message: '请输入账号密码',
|
|
||||||
type: 'warning',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<div class="login">
|
<h1>登录页</h1>
|
||||||
<div class="form">
|
|
||||||
<el-card>
|
|
||||||
<h2>调压通后台管理系统</h2>
|
|
||||||
<el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="auto" size="large">
|
|
||||||
<el-form-item prop="username">
|
|
||||||
<el-input v-model="form.username" :prefix-icon="User" placeholder="用户名" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item prop="password">
|
|
||||||
<el-input v-model="form.password" type="password" :prefix-icon="Lock" placeholder="密码" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button style="width: 100%;" type="primary" @click="loginBtn(ruleFormRef)">登录</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</el-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<style lang='scss' scoped></style>
|
||||||
.login {
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.form {
|
|
||||||
text-align: center;
|
|
||||||
width: 380px;
|
|
||||||
margin: calc(25% - 150px) auto;
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 400;
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -24,8 +24,8 @@ for (let index = 0; index < 10; index++) {
|
|||||||
const pieDom = ref<HTMLDivElement | null>(null)
|
const pieDom = ref<HTMLDivElement | null>(null)
|
||||||
const barDom = ref<HTMLDivElement | null>(null)
|
const barDom = ref<HTMLDivElement | null>(null)
|
||||||
|
|
||||||
const { globalProperties } = useCurrentInstance()
|
|
||||||
const rederPie = () => {
|
const rederPie = () => {
|
||||||
|
const { globalProperties } = useCurrentInstance()
|
||||||
const chart = globalProperties.$echarts.init(pieDom.value)
|
const chart = globalProperties.$echarts.init(pieDom.value)
|
||||||
const option = {
|
const option = {
|
||||||
title: [
|
title: [
|
||||||
@ -104,6 +104,7 @@ const rederPie = () => {
|
|||||||
chart.setOption(option)
|
chart.setOption(option)
|
||||||
}
|
}
|
||||||
const rederBar = () => {
|
const rederBar = () => {
|
||||||
|
const { globalProperties } = useCurrentInstance()
|
||||||
const chart = globalProperties.$echarts.init(barDom.value)
|
const chart = globalProperties.$echarts.init(barDom.value)
|
||||||
const option = {
|
const option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
@ -177,14 +178,13 @@ onMounted(() => {
|
|||||||
最近手术记录 <el-button size="small" type="primary">查看全部</el-button>
|
最近手术记录 <el-button size="small" type="primary">查看全部</el-button>
|
||||||
</template>
|
</template>
|
||||||
<el-table stripe :data="tableData" height="480">
|
<el-table stripe :data="tableData" height="480">
|
||||||
<el-table-column prop="date" label="手术日期" width="120" />
|
<el-table-column prop="date" label="日期" width="180" />
|
||||||
<el-table-column prop="name" label="患者姓名" width="150" />
|
<el-table-column prop="name" label="姓名" width="180" />
|
||||||
<el-table-column prop="name" label="手术医生" width="150" />
|
<el-table-column prop="name" label="手术医生" width="180" />
|
||||||
<el-table-column prop="name" label="手术名称" />
|
<el-table-column prop="name" label="手术名称" />
|
||||||
<el-table-column prop="name" label="脑积水类型" width="150" />
|
<el-table-column prop="name" label="脑积水类型" width="180" />
|
||||||
<el-table-column prop="name" label="初始压力" width="150" />
|
<el-table-column prop="name" label="当前阀门压力" width="180" />
|
||||||
<el-table-column prop="name" label="当前阀门压力" width="150" />
|
<el-table-column fixed="right" label="操作" align="center" width="180">
|
||||||
<el-table-column fixed="right" label="操作" align="center" width="150">
|
|
||||||
<template #default>
|
<template #default>
|
||||||
<el-button link type="primary" size="small">
|
<el-button link type="primary" size="small">
|
||||||
查看详情
|
查看详情
|
||||||
@ -200,7 +200,7 @@ onMounted(() => {
|
|||||||
.data {
|
.data {
|
||||||
h3 {
|
h3 {
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
padding: 20px;
|
padding: 20px 15px;
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,303 +1,7 @@
|
|||||||
<script setup lang='ts'>
|
<script setup lang='ts'></script>
|
||||||
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'],
|
|
||||||
axisLabel: {
|
|
||||||
rotate: 50
|
|
||||||
}
|
|
||||||
},
|
|
||||||
yAxis: {
|
|
||||||
type: 'value'
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: [820, 932, 901, 934],
|
|
||||||
type: 'line',
|
|
||||||
smooth: true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
chart.setOption(option)
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
})
|
|
||||||
const openDialog = () => {
|
|
||||||
nextTick(() => {
|
|
||||||
rederLine()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<template>
|
<template>
|
||||||
<div class="surgery">
|
<div class="surgery">
|
||||||
<el-card>
|
<h1>手术记录</h1>
|
||||||
<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="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" />
|
|
||||||
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style scoped>
|
<style scoped></style>
|
||||||
: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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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