mky-vent-base/src/views/vent/home/configurable/belt/belt-new.vue

<!-- belt-new.vue -->
<template>
  <div class="company-home">
    <!-- 顶部标题栏 + 下拉选择 -->
    <!-- <div class="header-container">
      <customHeader> 皮带巷智能管控 </customHeader>
    </div> -->
    <!-- 主体区域 -->
    <div class="border">
      <!-- 配置模块区 -->
      <ModuleCommon
        v-for="cfg in configs"
        :key="cfg.deviceType"
        :show-style="cfg.showStyle"
        :module-data="cfg.moduleData"
        :module-name="cfg.moduleName"
        :device-type="cfg.deviceType"
        :page-type="cfg.pageType"
        :data="data"
        :visible="true"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  // import customHeader from './components/customHeader-belt.vue';
  import { useInitConfigs, useInitPage } from '../hooks/useInit';
  import { testBeltNew } from './configurable.data';
  import ModuleCommon from '@/views/vent/home/configurable/components/ModuleCommon.vue';

  // 初始化配置
  const { configs, fetchConfigs } = useInitConfigs();
  const { data, updateData } = useInitPage('皮带巷智能管控');

  // 下拉框选项
  const beltOptions = [
    { id: '1', beltName: '主运巷皮带 1' },
    { id: '2', beltName: '主运巷皮带 2' },
  ];

  const selectedBeltId = ref('1');

  // 模拟数据
  const readData = {
    fmhjcInfo: [
      {
        beltName: '主运巷皮带1',
        wz: { strtype: 'wz', avg: '111', max: '222', min: '333', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
        hcl: { strtype: 'HCl', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
        gx: { strtype: 'gx', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
        co: { strtype: 'CO', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: true, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
        wd: { strtype: 'wd', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
      },
    ],
    pdhzfxInfo: [
      {
        beltName: '主运巷皮带1',
        warningLevel: '一般风险',
        sysList: [
          {
            time: '2026-03-21 13:23:34',
            area: '3#皮带区域',
            type: 'CO浓度异常',
            status: '三级预警',
            advice: '立即检查该区域设备，启动应急预案',
            action: '启动喷淋',
          },
          {
            time: '2026-03-21 13:23:34',
            area: '3#皮带区域',
            type: 'CO浓度异常',
            status: '三级预警',
            advice: '立即检查该区域设备，启动应急预案',
            action: '启动喷淋',
          },
          {
            time: '2026-03-21 13:23:34',
            area: '3#皮带区域',
            type: 'CO浓度异常',
            status: '三级预警',
            advice: '立即检查该区域设备，启动应急预案',
            action: '启动喷淋',
          },
        ],
      },
    ],
    sensorAnalysis: {
      hy: { name: '火焰传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
      wd: { name: '温度传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
      yw: { name: '烟雾传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
    },
    vehicleCOAnalysis: {
      isRisk: true,
      activityList: [
        {
          pos: '1#皮带区域',
          vehicle: '车辆23425',
          status: '0',
        },
        {
          pos: '2#皮带区域',
          vehicle: '车辆53456',
          status: '1',
        },
        {
          pos: '3#皮带区域',
          vehicle: '未通过车辆',
          status: '0',
        },
      ],
      analysisList: [
        {
          pos: '1#皮带区域',
          analysisText: 'CO浓度异常升高，已确认为车辆干扰',
        },
        {
          pos: '1#皮带区域',
          analysisText: 'CO浓度异常升高，已确认为车辆干扰',
        },
      ],
      possibleCause: '皮带摩擦过热或电器设备故障',
      recommendation: '立即检查3#皮带区域设备',
    },
  };

  // 下拉框切换处理
  function handleBeltChange(id: string) {
    selectedBeltId.value = id;
    refresh();
  }

  // 风险等级样式映射
  function getLevelClass(level: string) {
    switch (level) {
      case '重大风险':
        return 'level-critical';
      case '高风险':
        return 'level-high';
      case '一般风险':
        return 'level-normal';
      default:
        return '';
    }
  }

  // 刷新数据
  function refresh() {
    fetchConfigs('belt').then(() => {
      configs.value = testBeltNew;
      Promise.resolve(readData).then(updateData);
      // updateEnhancedConfigs(configs.value);
    });
  }

  // 定时刷新
  function initInterval() {
    setInterval(() => {
      refresh();
    }, 60000);
  }

  onMounted(() => {
    refresh();
    initInterval();
  });
</script>

<style lang="less" scoped>
  .company-home {
    background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
    width: 100%;
    height: 100%;
    color: @white;
    position: relative;
    font-family: 'Microsoft YaHei', sans-serif;

    .header-container {
      position: absolute;
      top: 20px;
      left: 20px;
      z-index: 10;
    }

    .border {
      width: 100%;
      height: 94%;
      background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
      background-size: 100% 100%;
      margin-top: 55px;
      position: relative;
      overflow: hidden;

      .box-container {
        position: relative;
        width: 100%;
        height: 100%;
      }
    }

    // 中间预警结果区
    .center-warning-container {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 50%;
      width: 600px;
      height: 200px;
      background-color: rgba(0, 0, 0, 0.7);
      border-radius: 10px;
      padding: 15px;
      box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
      z-index: 5;
      color: #fff;

      .warning-header {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
        color: #ff6b6b;
      }

      .warning-list {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .warning-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        border-left: 4px solid #ff6b6b;

        .warning-time {
          font-size: 14px;
          color: #ccc;
        }

        .warning-level {
          font-size: 14px;
          font-weight: bold;
          padding: 4px 8px;
          border-radius: 4px;
          &.level-critical {
            background-color: #ff6b6b;
            color: white;
          }
          &.level-high {
            background-color: #ffcc00;
            color: black;
          }
          &.level-normal {
            background-color: #66cc66;
            color: white;
          }
        }

        .warning-action {
          .btn-start-spray {
            background-color: #00e1ff;
            color: #000;
            border: none;
            padding: 4px 10px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            transition: all 0.3s;
            &:hover {
              background-color: #00c3e6;
            }
          }
        }
      }
    }

    // 巷道示意图
    .belt-diagram {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 50px;
      width: 800px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
</style>