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

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="company-home">
    <div class="border">
      <customHeader :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }">皮带巷智能管控</customHeader>
      <div class="top-bg">
        <BeltNav />
      </div>
      <div class="box-container">
        <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>
  </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 { testYjkf } from './configurable.data';
import ModuleCommon from './components/ModuleCommonBelt.vue';
import { getSystem } from './configurable.api';
import { message, Modal } from 'ant-design-vue';
import BeltNav from './components/BeltNav.vue';
import { doorMock } from './mock.ts';
// import { BDFireMock } from './mock';
const { configs, fetchConfigs } = useInitConfigs();
const { updateEnhancedConfigs, data, updateData } = useInitPage('皮带巷智能管控');
const readData = ref([
  {
    id: 1,
    position: '16联巷短路风门',
    frontStatus: '关闭',
    backStatus: '关闭',
    networkStatus: '在线',
    modelImg: '',
    open: true,
  },
  {
    id: 2,
    position: '18联巷短路风门',
    frontStatus: '打开',
    backStatus: '打开',
    networkStatus: '在线',
    modelImg: '',
    open: true,
  },
  {
    id: 3,
    position: '23联巷短路风门',
    frontStatus: '关闭',
    backStatus: '关闭',
    networkStatus: '在线',
    modelImg: '',
    open: false,
  },
]);
function refresh() {
  fetchConfigs('belt').then(() => {
    configs.value = testYjkf;
    getSystem({}).then(updateData);
    // getDataSource();
  });
}
function initInterval() {
  setInterval(() => {
    getSystem({}).then(updateData);
  }, 60000);
}
onMounted(async () => {
  refresh();
  initInterval();
});
</script>

<style lang="less" scoped>
.spray-wrapper {
  width: 100%;
  height: 100%;
  background-image: url('/@/assets/images/beltFire/baseMap.png');
  background-size: cover;
}

#spray3D {
  pointer-events: all;
}

.spray-wrapper :deep(.list-item_L .list-item__icon_L) {
  background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
}
.spray-wrapper :deep(.list-item_N:nth-child(1)) {
  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
}
.spray-wrapper :deep(.list-item_N:nth-child(2)) {
  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
}
.company-home {
  background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
  width: 100%;
  height: 100%;
  color: @white;
  position: relative;
  .border {
    width: 100%;
    height: 94%;
    background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
    background-size: 100% 100%;
    margin-top: 55px;
  }
  .top-bg {
    width: 100%;
    height: 56px;
    position: absolute;
    margin-top: -20px;
    z-index: 1;
  }
}
</style>