mky-vent-base/src/views/vent/BeltLaneThreeLevelFire/BeltMonitorWarn/index.vue

<template>
  <div class="belt-control-page">
    <div class="content-layout">
      <!-- 左侧面板：3个模块 -->
      <div class="left-panel">
        <!-- 光纤测温模块 -->
        <div class="panel-card">
          <h3 class="panel-title">光纤测温监测与分析</h3>
          <div class="data-row">
            <div class="data-item">
              <div class="data-icon"><i class="iconfont icon-temperature"></i></div>
              <div class="data-label">平均温度</div>
              <div class="data-value">56.99</div>
            </div>
            <div class="data-item">
              <div class="data-icon"><i class="iconfont icon-temperature"></i></div>
              <div class="data-label">最高温度</div>
              <div class="data-value">56.99</div>
            </div>
            <div class="data-item">
              <div class="data-icon"><i class="iconfont icon-temperature"></i></div>
              <div class="data-label">最低温度</div>
              <div class="data-value">56.99</div>
            </div>
          </div>
          <div class="alarm-info">
            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
            <div class="alarm-detail">
              <span>● 最大值产生于 2013-05-24 15:52:42 时刻 15212胶运顺槽 600m 处</span>
            </div>
          </div>
        </div>

        <!-- CO传感器模块 -->
        <div class="panel-card">
          <h3 class="panel-title">CO传感器监测与分析</h3>
          <div class="data-row">
            <div class="data-item">
              <div class="data-icon"><i class="iconfont icon-co"></i>CO₂</div>
              <div class="data-label">平均(%)</div>
              <div class="data-value">56.99</div>
            </div>
            <div class="data-item">
              <div class="data-icon"><i class="iconfont icon-co"></i>CO₂</div>
              <div class="data-label">最大(%)</div>
              <div class="data-value">56.99</div>
            </div>
            <div class="data-item">
              <div class="data-icon"><i class="iconfont icon-co"></i>CO⁴</div>
              <div class="data-label">最小(%)</div>
              <div class="data-value">56.99</div>
            </div>
          </div>
          <div class="alarm-info">
            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
            <div class="alarm-detail">
              <span>● 最大值产生于 2013-05-24 15:52:42 时刻 CO传感器1</span>
            </div>
          </div>
        </div>

        <!-- 微震测声模块 -->
        <div class="panel-card">
          <h3 class="panel-title">微震测声传感器监测与分析</h3>
          <div class="data-row">
            <div class="data-item">
              <div class="data-label">平均值</div>
              <div class="data-value">--</div>
            </div>
            <div class="data-item">
              <div class="data-label">最大值</div>
              <div class="data-value">--</div>
            </div>
            <div class="data-item">
              <div class="data-label">最小值</div>
              <div class="data-value">--</div>
            </div>
          </div>
          <div class="alarm-info">
            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
            <div class="alarm-detail">
              <span>● 最大值产生于 2013-05-24 15:52:42 时刻 15212胶运顺槽 600m 处</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间区域：顶部Tab -->
      <div class="center-panel">
        <Nav></Nav>
      </div>

      <!-- 右侧面板：3个模块 -->
      <div class="right-panel">
        <!-- 火焰传感器模块 -->
        <div class="panel-card">
          <h3 class="panel-title">火焰传感器监测与分析</h3>
          <div class="alarm-info">
            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
            <div class="alarm-detail">
              <span>● 报警产生于 2013-05-24 15:52:42 时刻 火焰传感器1</span>
            </div>
          </div>
        </div>

        <!-- 温度传感器模块 -->
        <div class="panel-card">
          <h3 class="panel-title">温度传感器监测与分析</h3>
          <div class="alarm-info">
            <span class="alarm-status"><span class="status-dot red"></span>是否报警：正常</span>
            <div class="alarm-detail">
              <span>● 报警产生于 2013-05-24 15:52:42 时刻 温度传感器1</span>
            </div>
          </div>
        </div>

        <!-- 烟雾传感器模块 -->
        <div class="panel-card">
          <h3 class="panel-title">烟雾传感器监测与分析</h3>
          <div class="alarm-info">
            <span class="alarm-status"><span class="status-dot red"></span>是否报警：正常</span>
            <div class="alarm-detail">
              <span>● 报警产生于 2013-05-24 15:52:42 时刻 烟雾传感器1</span>
            </div>
          </div>
        </div>

        <!-- HCl传感器模块 -->
        <div class="panel-card">
          <h3 class="panel-title">HCl传感器监测与分析</h3>
          <div class="data-row">
            <div class="data-item">
              <div class="data-label">平均值</div>
              <div class="data-value">--</div>
            </div>
            <div class="data-item">
              <div class="data-label">最大值</div>
              <div class="data-value">--</div>
            </div>
            <div class="data-item">
              <div class="data-label">最小值</div>
              <div class="data-value">--</div>
            </div>
          </div>
          <div class="alarm-info">
            <span class="alarm-status"><span class="status-dot green"></span>是否报警：正常</span>
            <div class="alarm-detail">
              <span>● 最大值产生于 2013-05-24 15:52:42 时刻 15212胶运顺槽 600m 处</span>
            </div>
          </div>
        </div>

        <!-- 多参数传感器模块 -->
        <div class="panel-card">
          <h3 class="panel-title">火灾多参数传感器监测与分析</h3>
          <div class="alarm-info">
            <span>具体需根据接入数据调整数据展示</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Nav from '../components/nav.vue';
const selectedBelt = ref('belt1');
const activeTab = ref('1');
</script>

<style scoped>
.belt-control-page {
  width: 100%;
  height: 100%;
  background: #0a1435;
  color: #d0e8ff;
  font-family: 'Microsoft YaHei', sans-serif;
  overflow: hidden;
}

.left-header,
.right-header {
  display: flex;
  align-items: center;
  gap: 20px;
}

.center-title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.belt-select {
  color: #d0e8ff;
  font-size: 16px;
}

.view-mode label {
  margin-left: 10px;
  cursor: pointer;
}

.pressure {
  font-size: 14px;
}

.icons {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
}

.admin {
  font-size: 14px;
  margin-left: 8px;
}

/* 内容布局 */
.content-layout {
  display: flex;
  height: calc(100% - 54px);
  padding: 10px;
  gap: 10px;
}

.left-panel,
.right-panel {
  width: 22%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 10px;
}

.center-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 卡片样式 */
.panel-card {
  background: rgba(15, 36, 87, 0.6);
  border: 1px solid #3b8ad4;
  border-radius: 4px;
  padding: 12px;
  flex: 1;
}

.panel-title {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: #fff;
  text-align: center;
}

.data-row {
  display: flex;
  justify-content: space-around;
  margin-bottom: 12px;
}

.data-item {
  text-align: center;
}

.data-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.data-label {
  font-size: 12px;
  color: #a0c8ff;
  margin-bottom: 4px;
}

.data-value {
  font-size: 18px;
  font-weight: bold;
  color: #1890ff;
}

.alarm-info {
  font-size: 12px;
  border-top: 1px dashed #2a52be;
  padding-top: 8px;
}

.alarm-status {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.status-dot.green {
  background: #52c41a;
}

.status-dot.red {
  background: #f5222d;
}

.alarm-detail {
  color: #a0c8ff;
}
</style>