mky-vent-base/src/views/vent/home/configurable/vent-Green.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="company-home">
    <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
      <VentModal />
    </div>
    <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
    <template v-if="!route.query.deviceType">
      <div v-if="!route.query.embed" class="top-bg">
        <greenNav :Title="mainTitle"></greenNav>
      </div>

      <div class="main-container">
        <div class="left-area">
          <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
          <template v-if="isOriginal">
            <ModuleOriginal
              v-for="cfg in configsLeft"
              :key="cfg.deviceType"
              :show-style="cfg.showStyle"
              :module-data="cfg.moduleData"
              :module-name="cfg.moduleName"
              :device-type="cfg.deviceType"
              :data="data"
              :visible="true"
            />
          </template>
        </div>
        <div class="bottom-area">
          <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
          <template v-if="isOriginal">
            <ModuleOriginal
              v-for="cfg in configsBottom"
              :key="cfg.deviceType"
              :show-style="cfg.showStyle"
              :module-data="cfg.moduleData"
              :module-name="cfg.moduleName"
              :device-type="cfg.deviceType"
              :data="data"
              :visible="true"
            />
          </template>
        </div>
        <div class="right-area">
          <greenRightTag></greenRightTag>
        </div>

        <!-- <div
        v-if="sysDataType === 'all'"
        :class="{ 'realtime-mode': isDataRealTime }"
        alt="切换数据模式"
        class="switch-button report-mode right-525px"
        @click="switchDataMode"
      ></div> -->
        <!-- <div class="switch-button icon-goto right-475px" @click="goMicroApp()"></div> -->
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
// import { CaretDownOutlined } from '@ant-design/icons-vue';
// import MonitorBar from './components/MonitorBar.vue';
import { useInitConfigs, useInitPage } from './hooks/useInit';
import ModuleOriginal from './components/ModuleOriginal-green.vue';
import greenNav from './components/green-nav.vue';
import greenRightTag from './components/green-right-tag.vue';
// import { useRoute } from 'vue-router';
import VentModal from '/@/components/vent/micro/ventModal.vue';
import { list } from './configurable.api';
import { useRoute, useRouter } from 'vue-router';
import { useGlobSetting } from '/@/hooks/setting';
import { testConfigVent, testConfigVentRealtime } from './configurable.data';

const { sysDataType = 'monitor', title = '智能通风管控系统' } = useGlobSetting();
//   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
const { isOriginal, isCommon, fetchConfigs } = useInitConfigs();
const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage(title);
const route = useRoute();
const router = useRouter();
const isDataRealTime = ref(sysDataType === 'monitor');
// const showBar = ref(true);
let interval: number | undefined;
let configs = ref<any[]>([]);
// function switchDataMode() {
//   isDataRealTime.value = !isDataRealTime.value;
//   refresh();
// }
let configsLeft = computed(() => {
  return configs.value.filter((v) => v.showStyle.position.includes('top'));
});
let configsBottom = computed(() => {
  return configs.value.filter((v) => v.showStyle.position.includes('bottom'));
});
function refresh() {
  fetchConfigs(isDataRealTime.value ? 'vent_realtime' : 'vent').then(() => {
    configs.value = isDataRealTime.value ? testConfigVentRealtime : testConfigVent;
    updateEnhancedConfigs(configs.value);

    // 测风装置	windrect
    // 自动风窗	window
    // 自动风门	gate
    // 传感器	modelsensor
    // 局部通风机	fanlocal
    // 主通风机	fanmain
    // 密闭	obfurage
    // 安全监控	safetymonitor
    // 光纤测温	fiber
    // 束管监测	bundletube
    // 制氮	nitrogen
    // 制浆	pulping
    // 喷淋	spray
    // 喷粉	dustdev
    // 喷雾设备	atomizing
    // 除尘风机	dedustefan
    // 粉尘传感器	dustsensor
    // 转载点	transferpoint
    // 瓦斯抽采泵	pump
    // 粉尘	dusting
    // 瓦斯监测	gasmonitor
    // 球阀	ballvalve
    // 压风机	forcFan
    // 瓦斯巡检	gaspatrol
    // 防火门	firedoor
    // 隔爆设施	explosionProof
    // 瓦斯管道阀门	gasvalve
    list({
      types: configs.value
        .filter((e) => e.deviceType)
        .map((e) => e.deviceType)
        .join(','),
    }).then(updateData);
  });
}

function initInterval() {
  setInterval(() => {
    list({
      types: configs.value
        .filter((e) => e.deviceType)
        .map((e) => e.deviceType)
        .join(','),
    }).then(updateData);
  }, 60000);
}

function goMicroApp() {
  router.push({
    path: route.path,
    query: {
      ...route.query,
      type: 'model3D',
      deviceType: 'model3D',
    },
  });
}

watch(
  () => route.query,
  () => {
    if (route.query.deviceType) {
      // 仅需要展示子应用，模拟 unmounted
      clearInterval(interval);
    } else {
      // 模拟 mounted
      refresh();
      initInterval();
    }
  }
);

onMounted(() => {
  refresh();
  initInterval();
});

onUnmounted(() => {
  clearInterval(interval);
});
</script>
<style lang="less" scoped>
@import '/@/design/theme.less';

@font-face {
  font-family: 'douyuFont';
  src: url('/@/assets/font/douyuFont.otf');
}

@{theme-deepblue} {
  .company-home {
    --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
  }
}

.company-home {
  --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
  --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
  --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
  --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');

  width: 100%;
  height: 100%;
  color: @white;
  position: relative;
  background: #181b24;

  .top-bg {
    width: 100%;
    height: 96px;
    // background: var(--image-modal-top) no-repeat center;
    position: absolute;
    z-index: 1;
  }

  .main-container {
    position: absolute;
    top: 96px;
    width: calc(100% - 30px);
    height: calc(100% - 96px);
    margin: 0px 15px;
    box-sizing: border-box;

    .left-area {
      position: absolute;
      left: 0;
      top: 0;
      width: 420px;
      height: 100%;
      padding: 15px;
      background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      overflow-y: auto;
    }

    .bottom-area {
      position: absolute;
      left: 435px;
      bottom: 0;
      width: calc(100% - 435px);
      height: 290px;
      padding: 15px;
      background: url('../../../../assets/images/home-green/green-bd-bottom.png') no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
    }
    .right-area {
      position: absolute;
      right: 0px;
      top: 0px;
      width: 120px;
      height: calc(100% - 305px);
    }
  }

  // .module-left {
  //   position: absolute;
  //   width: 450px;
  //   height: 280px;
  //   left: 0;
  // }
  // .module-right {
  //   position: absolute;
  //   width: 450px;
  //   height: 280px;
  //   right: 0;
  // }
  // .module-bottom {
  //   position: absolute;
  //   width: 1000px;
  //   height: 280px;
  // }
  .module-dropdown {
    padding: 5px;
    background-image: @vent-configurable-dropdown;
    border-bottom: 2px solid @vent-configurable-home-light-border;
    color: @vent-font-color;
    position: absolute;
    top: 60px;
    right: 480px;
  }

  .module-dropdown-original {
    padding: 10px;
    background-image: @vent-configurable-dropdown;
    border-bottom: 2px solid @vent-configurable-home-light-border;
    color: @vent-font-color;
    position: absolute;
    top: 70px;
    right: 460px;
  }

  .module-trigger-button {
    color: @vent-font-color;
    background-image: @vent-configurable-dropdown;
    border: none;
    border-bottom: 2px solid @vent-configurable-home-light-border;
  }

  .switch-button {
    width: 34px;
    height: 34px;
    position: absolute;
    // right: 5px;
    bottom: 300px;
    z-index: 5;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .report-mode {
    background-image: var(--image-monitor-doc);
  }

  .realtime-mode {
    background-image: var(--image-monitor-realtime);
  }

  .icon-goto {
    background-image: var(--image-monitor-goto);
  }

  .module-monitor-bar {
    position: absolute;
    top: 100px;
    width: 1000px;
    height: 200px;
    left: calc(50% - 500px);
  }
}

:deep(.loading-box) {
  position: unset;
}
</style>