vue3/src/views/devices/Device_Data_Components/ECG_datas.vue

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