设备数据

src/views/devices/Device_Data_Components/ECG_datas.vue

@@ -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>

src/views/devices/devices_cards.vue

@@ -101,10 +101,19 @@ const props = defineProps({
 const emit = defineEmits(['action'])
 
 const handleAction = (action) => {
-  emit('action', {
-    action,
-    deviceId: props.deviceInfo.id
-  })
+  if (action === 'data') {
+    // 打开心电数据组件
+    emit('action', {
+      action: 'openECGData',
+      deviceId: props.deviceInfo.id,
+      deviceName: props.deviceInfo.name
+    })
+  } else {
+    emit('action', {
+      action,
+      deviceId: props.deviceInfo.id
+    })
+  }
 }
 </script>
 

src/views/devices/index.vue

@@ -77,6 +77,8 @@
   <!-- 设备表单 -->
   <DeviceForm ref="deviceFormRef" @success="handleQuery" />
   <DetailsForm ref="detailsFormRef" @success="handleQuery" />
+  <!-- 心电数据组件 -->
+  <ECG_datas ref="ecgDataRef" />
 </template>
 
 <script setup lang="ts">
@@ -87,6 +89,7 @@ import { DICT_TYPE } from '@/utils/dict'
 import DeviceCard from '../devices/devices_cards.vue'
 import DeviceForm from './DevFrom.vue'
 import DetailsForm from './DetailsForm.vue'
+import ECG_datas from './Device_Data_Components/ECG_datas.vue'
 
 // 查询参数
 interface QueryParams {
@@ -143,6 +146,8 @@ const queryFormRef = ref()
 const deviceFormRef = ref()
 // 设备详情表单引用
 const detailsFormRef = ref()
+// 心电数据组件引用
+const ecgDataRef = ref()
 
 // 查询方法
 const handleQuery = () => {
@@ -166,6 +171,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)
   }