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

<template>
  <div class="wind-control-page">
    <div class="content-layout">
      <!-- 左侧面板：短路风门管控 -->
      <div class="left-panel">
        <div class="panel-title">短路风门管控详情</div>

        <!-- 风门数据列表 -->
        <div class="door-list">
          <div class="door-card" v-for="item in doorList" :key="item.id">
            <div class="door-header">
              <div class="header-row">
                <span class="col">位置</span>
                <span class="col">前门状态</span>
                <span class="col">后门状态</span>
                <span class="col">网络状态</span>
                <a-button type="primary" class="one-key-btn">一键双开</a-button>
              </div>
              <div class="status-row">
                <span class="col">{{ item.position }}</span>
                <span class="col" :class="item.frontStatus === '打开' ? 'status-open' : 'status-close'">
                  {{ item.frontStatus }}
                </span>
                <span class="col" :class="item.backStatus === '打开' ? 'status-open' : 'status-close'">
                  {{ item.backStatus }}
                </span>
                <span class="col status-online">{{ item.networkStatus }}</span>
              </div>
            </div>
            <!-- 模型展示占位div -->
            <div class="model-placeholder">
              <img :src="item.modelImg" alt="风门模型" class="model-img" />
            </div>
          </div>
        </div>
      </div>
      <div class="center-panel">
        <Nav></Nav>
      </div>
      <!-- 右侧面板：摄像头视频信号 -->
      <div class="right-panel">
        <div class="video-card">
          <h3 class="video-title">摄像头视频信号</h3>
          <div class="video-placeholder" v-for="i in 3" :key="i">
            <div class="video-frame"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Nav from '../components/nav.vue';
const doorList = ref([
  {
    id: 1,
    position: '16联巷短路风门',
    frontStatus: '关闭',
    backStatus: '关闭',
    networkStatus: '在线',
    modelImg: '',
  },
  {
    id: 2,
    position: '18联巷短路风门',
    frontStatus: '打开',
    backStatus: '打开',
    networkStatus: '在线',
    modelImg: '',
  },
  {
    id: 3,
    position: '23联巷短路风门',
    frontStatus: '关闭',
    backStatus: '关闭',
    networkStatus: '在线',
    modelImg: '',
  },
]);
</script>

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

.content-layout {
  display: flex;
  height: calc(100% - 54px);
  padding: 10px;
  gap: 10px;
}

.center-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 左侧面板 */
.left-panel {
  border: 1px solid #2a52be;
  width: 22%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.panel-title {
  background: #1890ff;
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
  width: fit-content;
  text-align: center;
}

.door-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.door-card {
  background: rgba(15, 36, 87, 0.6);
  border: 1px solid #2a52be;
  border-radius: 4px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.door-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.header-row {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}

.status-row {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.col {
  flex: 1;
  padding: 0 4px;
}

.one-key-btn {
  padding: 2px 8px;
  font-size: 12px;
  background: #1890ff;
  border-color: #1890ff;
}

.status-open {
  color: #52c41a;
  font-weight: bold;
}

.status-close {
  color: #f5222d;
  font-weight: bold;
}

.status-online {
  color: #1890ff;
  font-weight: bold;
}

/* 模型展示占位div */
.model-placeholder {
  width: 100%;
  height: 120px;
  background: rgba(10, 20, 53, 0.8);
  border: 1px solid #2a52be;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.model-img {
  width: 22%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 10px;
  object-fit: cover;
}

/* 右侧面板 */
.right-panel {
  width: 22%;
  display: flex;
  flex-direction: column;
}

.video-card {
  background: rgba(15, 36, 87, 0.6);
  border: 1px solid #2a52be;
  border-radius: 4px;
  padding: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.video-title {
  margin: 0;
  font-size: 18px;
  color: #fff;
  text-align: center;
}

.video-placeholder {
  flex: 1;
}

.video-frame {
  width: 100%;
  height: 100%;
  border: 2px solid #2a52be;
  border-radius: 4px;
  background: transparent;
  position: relative;
}
</style>