Merge branch 'main' of http://114.55.171.231:3000/Euni4U/vue3
This commit is contained in:
commit
3e58485d2f
185
src/views/devices/Device_Data_Components/ECG_datas.vue
Normal file
185
src/views/devices/Device_Data_Components/ECG_datas.vue
Normal file
@ -0,0 +1,185 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="currentDeviceName"
|
||||
width="80%"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="true"
|
||||
class="ecg-dialog"
|
||||
top="5vh"
|
||||
>
|
||||
<div class="ecg-container">
|
||||
<!-- 左侧人员列表 -->
|
||||
<div class="person-list">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>人员列表</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-input
|
||||
v-model="searchQuery"
|
||||
placeholder="搜索人员"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
/>
|
||||
<el-scrollbar height="calc(100vh - 400px)">
|
||||
<el-menu
|
||||
:default-active="activePerson"
|
||||
@select="handlePersonSelect"
|
||||
>
|
||||
<el-menu-item
|
||||
v-for="person in filteredPersonList"
|
||||
:key="person.id"
|
||||
:index="person.id"
|
||||
>
|
||||
<span>{{ person.name }}</span>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 右侧数据展示区域 -->
|
||||
<div class="data-display">
|
||||
<el-card class="box-card">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>心电数据</span>
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="selectedPerson" class="ecg-data-content">
|
||||
<!-- 这里将展示选中人员的心电数据 -->
|
||||
<div class="no-data" v-if="!hasData">
|
||||
暂无数据
|
||||
</div>
|
||||
<div v-else>
|
||||
<!-- 心电数据展示区域 -->
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-selection">
|
||||
请从左侧选择人员查看数据
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ECGDatas',
|
||||
data() {
|
||||
return {
|
||||
searchQuery: '',
|
||||
activePerson: '',
|
||||
selectedPerson: null,
|
||||
personList: [], // 这里需要从后端获取人员列表
|
||||
hasData: false,
|
||||
dialogVisible: false,
|
||||
currentDeviceId: '',
|
||||
currentDeviceName: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filteredPersonList() {
|
||||
if (!this.searchQuery) return this.personList
|
||||
return this.personList.filter(person =>
|
||||
person.name.toLowerCase().includes(this.searchQuery.toLowerCase())
|
||||
)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 打开组件
|
||||
open(deviceId, deviceName) {
|
||||
this.dialogVisible = true
|
||||
this.currentDeviceId = deviceId
|
||||
this.currentDeviceName = deviceName
|
||||
this.loadPersonList()
|
||||
},
|
||||
// 加载人员列表
|
||||
async loadPersonList() {
|
||||
try {
|
||||
// TODO: 实现从后端获取人员列表
|
||||
// const response = await this.$api.getPersonList(this.currentDeviceId)
|
||||
// this.personList = response.data
|
||||
} catch (error) {
|
||||
console.error('获取人员列表失败:', error)
|
||||
this.$message.error('获取人员列表失败')
|
||||
}
|
||||
},
|
||||
handlePersonSelect(index) {
|
||||
this.activePerson = index
|
||||
this.selectedPerson = this.personList.find(person => person.id === index)
|
||||
this.loadPersonData()
|
||||
},
|
||||
async loadPersonData() {
|
||||
try {
|
||||
// TODO: 实现从后端获取心电数据
|
||||
// const response = await this.$api.getECGData(this.selectedPerson.id)
|
||||
// this.hasData = response.data.length > 0
|
||||
} catch (error) {
|
||||
console.error('获取心电数据失败:', error)
|
||||
this.$message.error('获取数据失败')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ecg-dialog :deep(.el-dialog) {
|
||||
margin-top: 5vh !important;
|
||||
}
|
||||
|
||||
.ecg-dialog :deep(.el-dialog__body) {
|
||||
padding: 0;
|
||||
height: calc(85vh - 100px);
|
||||
}
|
||||
|
||||
.ecg-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
gap: 20px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.person-list {
|
||||
width: 280px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.data-display {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.no-selection,
|
||||
.no-data {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
color: #909399;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.ecg-data-content {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.el-scrollbar {
|
||||
height: calc(100vh - 400px) !important;
|
||||
}
|
||||
</style>
|
||||
@ -161,10 +161,19 @@ const getStatusClass = (status) => {
|
||||
* @param {string} action - 操作类型
|
||||
*/
|
||||
const handleAction = (action) => {
|
||||
emit('action', {
|
||||
action,
|
||||
deviceId: props.deviceInfo.devicecode
|
||||
})
|
||||
if (action === 'data') {
|
||||
// 打开心电数据组件
|
||||
emit('action', {
|
||||
action: 'openECGData',
|
||||
deviceId: props.deviceInfo.id,
|
||||
deviceName: props.deviceInfo.name
|
||||
})
|
||||
} else {
|
||||
emit('action', {
|
||||
action,
|
||||
deviceId: props.deviceInfo.devicecode
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 设备类型映射
|
||||
|
||||
@ -84,6 +84,8 @@
|
||||
<!-- 设备表单 -->
|
||||
<DeviceForm ref="deviceFormRef" @success="handleQuery" />
|
||||
<DetailsForm ref="detailsFormRef" @success="handleQuery" />
|
||||
<!-- 心电数据组件 -->
|
||||
<ECG_datas ref="ecgDataRef" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -96,6 +98,8 @@ import DeviceForm from './DevFrom.vue'
|
||||
import DetailsForm from './DetailsForm.vue'
|
||||
import { DeviceApi } from '@/api/device'
|
||||
import { getUserProfile } from '@/api/system/user/profile'
|
||||
import ECG_datas from './Device_Data_Components/ECG_datas.vue'
|
||||
|
||||
// 查询参数
|
||||
interface QueryParams {
|
||||
devicename: string
|
||||
@ -128,6 +132,8 @@ const queryFormRef = ref()
|
||||
const deviceFormRef = ref()
|
||||
// 设备详情表单引用
|
||||
const detailsFormRef = ref()
|
||||
// 心电数据组件引用
|
||||
const ecgDataRef = ref()
|
||||
|
||||
// 查询方法
|
||||
const handleQuery = async () => {
|
||||
@ -163,6 +169,9 @@ const handleDeviceAction = (action: any) => {
|
||||
if (action.action === 'details') {
|
||||
// 打开表单并加载设备数据
|
||||
detailsFormRef.value?.open(action.deviceId)
|
||||
} else if (action.action === 'openECGData') {
|
||||
// 打开心电数据组件
|
||||
ecgDataRef.value?.open(action.deviceId, action.deviceName)
|
||||
} else {
|
||||
console.log('设备操作：', action)
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user