Wulaer/src/components/DeviceInfoPanel.vue

<!-- 设备信息面板组件 -->
<template>
  <div class="data-card device-info-card">
    <div class="card-header">
      <h3 class="card-title">设备基础信息</h3>
    </div>
    <div class="card-body">
      <div class="device-info-header">
        <h4 class="device-name">{{ device.name }}</h4>
        <span class="device-status-tag" :class="statusClass">{{ statusLabel }}</span>
      </div>
      <div class="device-info-grid">
        <div class="info-row">
          <span class="info-label">设备类型</span>
          <span class="info-tag">{{ device.type || '振弦式应变计/位移计' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">安装日期</span>
          <span class="info-value">{{ device.installDate || '2023-06-15' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">出厂编号</span>
          <span class="info-value">{{ device.serialNumber || 'BK20230615001' }}</span>
        </div>
        <div class="info-row">
          <span class="info-label">监测项</span>
          <span class="info-value">{{ device.monitorType || '水平位移' }}</span>
        </div>
      </div>
      <div class="device-image-row">
        <div class="device-image-wrapper">
          <img src="/src/assets/images/Heilin/image.png" class="device-image" alt="设备图片" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DeviceInfoPanel",
  props: {
    device: { type: Object, default: () => ({ name: '坝顶水平位移仪 - R201YL1' }) },
  },
  computed: {
    statusLabel() {
      const map = { normal: '正常', warning: '预警', fault: '故障' };
      return map[this.device.status] || '正常';
    },
    statusClass() {
      return 'status-' + (this.device.status || 'normal');
    },
  },
};
</script>

<style scoped>
.device-info-card { 
  position: relative;
  overflow: visible;
}
.card-header { height: 42px; background-image: url("/src/assets/images/数据小标题.png"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; display: flex; align-items: flex-start; justify-content: space-between; padding: 4px 16px 0; }
.card-title { font-size: var(--fs-card-title); font-weight: bold; color: #e0fcff; margin: 0; text-shadow: 0 0 5px rgba(0,212,255,0.5); padding-left: 20px; }
.card-body { 
  padding: 10px 12px 8px;
  background: rgba(0,20,40,0.7);
  border-radius: 0 0 4px 4px;
}
.device-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.device-name {
  color: #e0fcff;
  font-size: 15px;
  font-weight: bold;
  margin: 0;
  text-shadow: 0 0 5px rgba(0,212,255,0.4);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.device-status-tag {
  font-size: 10px;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 10px;
  flex-shrink: 0;
  margin-left: 8px;
}
.status-normal {
  color: #22c55e;
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.3);
}
.status-warning {
  color: #ffd93d;
  background: rgba(255,217,61,0.15);
  border: 1px solid rgba(255,217,61,0.3);
}
.status-fault {
  color: #ef4444;
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
}
.device-image-row {
  margin-top: 8px;
  display: flex;
  justify-content: center;
}
.device-image-wrapper {
  width: 350px;
  height: 150px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(0,212,255,0.2);
  background: rgba(0,20,40,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.device-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.device-info-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
}
.info-label {
  color: #7bbef6;
  font-size: 11px;
  flex-shrink: 0;
}
.info-value {
  color: #e0fcff;
  font-size: 11px;
  font-weight: bold;
}
.info-tag {
  color: #62f6fb;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 8px;
  background: rgba(98,246,251,0.1);
  border-radius: 2px;
  border: 1px solid rgba(98,246,251,0.2);
}
</style>