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

<!-- belt-new.vue -->
<template>
  <div class="company-home">
    <!-- 顶部标题栏 + 下拉选择 -->
    <customHeader> 皮带巷智能管控 </customHeader>
    <div class="modal-box" id="modalBox" v-if="pageType !== 'history'">
      <Three3D ref="three3D" :modalName="'pidai'" class="modal-3d" @success="initModalAnimate" />
      <div class="modal-css3d" id="css3dContainer"> </div>
    </div>
    <div class="top-bg">
      <BeltNav @change-page="changePage" :pageType="pageType" />
    </div>
    <!-- 主体区域 -->
    <div class="border">
      <!-- 配置模块区 -->
      <template v-if="pageType == 'fireMonitor'">
        <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"
        />
      </template>
      <template v-if="pageType == 'emergencyControl'">
        <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"
        />
      </template>
      <template v-if="pageType == 'sprayControl'">
        <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"
        />
      </template>
      <template v-if="pageType == 'history'">
        <History />
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, computed } from 'vue';
import customHeader from './components/customHeader-belt.vue';
import { useInitConfigs, useInitPage } from '../hooks/useInit';
import { testBeltNew, testYjkf, testSpary } from './configurable.data';
import ModuleCommon from './components/ModuleCommon.vue';
import Three3D from '/@/views/vent/home/configurable/components/three3D.vue';
import BeltNav from './components/BeltNav.vue';
import { useRouter, useRoute } from 'vue-router';
import { getSystem } from './configurable.api';
import { modalAnimate } from './threejs/belt.threejs';
import History from './components/detail/history.vue';
// 初始化配置
const { configs, fetchConfigs } = useInitConfigs();
const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷智能管控');
// const pageType = computed(() => {
//   const currentType = route.params.type as string;
//   return currentType;
// });
const pageType = ref('');
const route = useRoute();
// 下拉框选项
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: '启动喷淋',
        },
        {
          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',
        // vehicle2: '车辆53456',
        // vehicle3: '未通过车辆',
        // coReason1: 'CO浓度异常升高，已确认为车辆干扰',
        // coReason3: 'CO浓度异常升高，已确认非车辆干扰',
        // possibleCause: '皮带摩擦过热或电器设备故障',
        // recommendation: '立即检查3#皮带区域设备',
      },
      {
        pos: '2#皮带区域',
        vehicle: '车辆53456',
        status: '1',
      },
      {
        pos: '3#皮带区域',
        vehicle: '未通过车辆',
        status: '0',
      },
    ],
    analysisList: [
      {
        pos: '1#皮带区域',
        analysisText: 'CO浓度异常升高，已确认为车辆干扰',
      },
      {
        pos: '1#皮带区域',
        analysisText: 'CO浓度异常升高，已确认为车辆干扰',
      },
    ],
    possibleCause: '皮带摩擦过热或电器设备故障',
    recommendation: '立即检查3#皮带区域设备',
  },
  sprayData: [
    {
      beltArea: '1#皮带区域',
      devicePosition: '1#皮带-50m处',
      netStatus: '0', // 网络状态：0=断开，1=连接
      runStatus: '1', // 运行状态：0=异常，1=正常
      waterVolume: 86,
      waterPressure: 1.4,
    },
    {
      beltArea: '2#皮带区域',
      devicePosition: '2#皮带-120m处',
      netStatus: '1',
      runStatus: '1',
      waterVolume: 72,
      waterPressure: 0.8,
    },
    {
      beltArea: '3#皮带区域',
      devicePosition: '3#皮带-200m处',
      netStatus: '1',
      runStatus: '0',
      waterVolume: 45,
      waterPressure: 1.6,
    },
  ],
};

// 下拉框切换处理
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(() => {
    if (pageType.value == 'fireMonitor') {
      configs.value = testBeltNew;
      Promise.resolve(readData).then(updateData);
    } else if (pageType.value == 'emergencyControl') {
      const params = {
        devicetype: 'sys',
        systemID: '1637983899775242242',
        type: 'ventS',
      };
      Promise.resolve(getSystem(params)).then(updateData);
      configs.value = testYjkf;
    } else if (pageType.value == 'sprayControl') {
      configs.value = testSpary;
      Promise.resolve(readData).then(updateData);
    } else {
      configs.value = testBeltNew;
    }
    updateEnhancedConfigs(configs.value);
  });
}

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

async function changePage(pageTypeStr: string) {
  const finalPageType = pageTypeStr || (route.query.pageType as string) || '';
  pageType.value = finalPageType;
  await refresh();
}

// watch(
//   // 监听动态路由参数 :type
//   () => route.params.type,
//   (newVal) => {
//     if (newVal) {
//       console.log('切换页面类型：', newVal);
//       refresh(); // 切换路由自动刷新
//     }
//   }
// );

function initModalAnimate(modal) {
  console.log('初始化模型', modal);
  modal.isRender = true;

  modalAnimate(modal);
}

watch(
  () => route.query.pageType,
  (newQueryType) => {
    if (newQueryType) {
      changePage(newQueryType as string);
    }
  },
  { immediate: true } // 初始化立刻执行
);

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;
  .top-bg {
    width: 100%;
    height: 56px;
    position: absolute;
    margin-top: 10px;
    z-index: 1;
  }
  .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%;
    position: relative;
    overflow: hidden;
    margin-top: 50px;
    .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;
    }
  }
}
.modal-box {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}
</style>