|
|
@@ -0,0 +1,186 @@
|
|
|
+<!-- 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> -->
|
|
|
+ <div v-if="!route.query.embed" class="top-bg">
|
|
|
+ <!-- <img style="width: 300px; height: 40px; position: fixed; left: 5px; top: 5px" src="./meeee.png" /> -->
|
|
|
+ <div class="main-title">{{ mainTitle }}</div>
|
|
|
+ </div>
|
|
|
+ <!-- <a-dropdown class="module-dropdown" :class="{ 'module-dropdown-original': isOriginal }" :trigger="['click']" placement="bottomRight">
|
|
|
+ <a class="ant-dropdown-link" @click.prevent>
|
|
|
+ 全矿井通风检测
|
|
|
+ <CaretDownOutlined />
|
|
|
+ </a>
|
|
|
+ <template #overlay>
|
|
|
+ <MonitorCenter />
|
|
|
+ </template>
|
|
|
+ </a-dropdown> -->
|
|
|
+ <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
|
|
|
+
|
|
|
+ <template v-if="isOriginal">
|
|
|
+ <ModuleOriginal
|
|
|
+ v-for="cfg in configs"
|
|
|
+ :key="cfg.deviceType"
|
|
|
+ :show-style="cfg.showStyle"
|
|
|
+ :module-data="cfg.moduleData"
|
|
|
+ :module-name="cfg.moduleName"
|
|
|
+ :device-type="cfg.deviceType"
|
|
|
+ :data="data"
|
|
|
+ :visible="true"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-else-if="isCommon">
|
|
|
+ <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"
|
|
|
+ :data="data"
|
|
|
+ :visible="true"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <!-- 下面是正常展示的各新版模块 -->
|
|
|
+ <ModuleEnhanced
|
|
|
+ v-for="cfg in enhancedConfigs"
|
|
|
+ :key="cfg.deviceType"
|
|
|
+ :visible="cfg.visible"
|
|
|
+ :show-style="cfg.showStyle"
|
|
|
+ :module-data="cfg.moduleData"
|
|
|
+ :module-name="cfg.moduleName"
|
|
|
+ :device-type="cfg.deviceType"
|
|
|
+ :data="data"
|
|
|
+ @close="cfg.visible = false"
|
|
|
+ />
|
|
|
+ <!-- 下面是用于呼出已隐藏的模块的按钮 -->
|
|
|
+ <div class="pos-absolute top-70px left-460px z-3">
|
|
|
+ <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
|
|
|
+ <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script lang="ts" setup>
|
|
|
+ import { onMounted, onUnmounted } from 'vue';
|
|
|
+ // import { CaretDownOutlined } from '@ant-design/icons-vue';
|
|
|
+ // import MonitorCenter from './components/MonitorCenter.vue';
|
|
|
+ import { useInitConfigs, useInitPage } from './hooks/useInit';
|
|
|
+ import ModuleEnhanced from './components/ModuleEnhanced.vue';
|
|
|
+ import ModuleOriginal from './components/ModuleOriginal.vue';
|
|
|
+ import ModuleCommon from './components/ModuleCommon.vue';
|
|
|
+ // import { useRoute } from 'vue-router';
|
|
|
+ // import VentModal from '/@/components/vent/micro/ventModal.vue';
|
|
|
+ import { getHomeData } from './configurable.api';
|
|
|
+ import { useRoute } from 'vue-router';
|
|
|
+ import { testConfigVent } from './configurable.data';
|
|
|
+
|
|
|
+ const { configs, isOriginal, isCommon } = useInitConfigs();
|
|
|
+ const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage('智能通风管控系统');
|
|
|
+ const route = useRoute();
|
|
|
+ let interval: number | undefined;
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ configs.value = testConfigVent;
|
|
|
+ updateEnhancedConfigs(configs.value);
|
|
|
+
|
|
|
+ getHomeData({}).then(updateData);
|
|
|
+ setInterval(() => {
|
|
|
+ getHomeData({}).then(updateData);
|
|
|
+ }, 60000);
|
|
|
+ });
|
|
|
+
|
|
|
+ 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');
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ color: @white;
|
|
|
+ position: relative;
|
|
|
+ background: #000000;
|
|
|
+ // background: url('@/assets/images/home-container/configurable/firehome/bg.png') no-repeat center;
|
|
|
+
|
|
|
+ .top-bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 56px;
|
|
|
+ background: var(--image-modal-top) no-repeat center;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ .main-title {
|
|
|
+ height: 56px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // .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: 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-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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.loading-box) {
|
|
|
+ position: unset;
|
|
|
+ }
|
|
|
+</style>
|
