|
@@ -1,21 +1,36 @@
|
|
<!-- eslint-disable vue/multi-word-component-names -->
|
|
<!-- eslint-disable vue/multi-word-component-names -->
|
|
<template>
|
|
<template>
|
|
- <VentModal style="position: absolute; width: 100%; height: 100%" />
|
|
|
|
- <div class="scene-box">
|
|
|
|
- <customHeader> 瓦斯抽采综合管控系统 </customHeader>
|
|
|
|
- <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
|
|
|
|
- <GasMonitor v-if="dataSource" :dataSource="dataSource" />
|
|
|
|
|
|
+ <div class="scene-box" style="position: relative">
|
|
|
|
+ <CustomHeader> 瓦斯抽采综合管控系统 </CustomHeader>
|
|
|
|
+ <template v-if="activeKey == 'gasHome'">
|
|
|
|
+ <VentModal />
|
|
|
|
+ <div class="gas-container">
|
|
|
|
+ <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
|
|
|
|
+ <GasMonitor v-if="dataSource" :dataSource="dataSource" />
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ <template v-if="activeKey == 'gasStandard'">
|
|
|
|
+ <GasAssessment />
|
|
|
|
+ </template>
|
|
|
|
+ <BottomMenu :navList="navList" @change="changeActive" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
<script lang="ts" setup>
|
|
- import { ref, onBeforeMount, onBeforeUnmount } from 'vue';
|
|
|
|
|
|
+ import { ref, onBeforeMount, onBeforeUnmount, onMounted } from 'vue';
|
|
import CustomHeader from '/@/components/vent/customHeader.vue';
|
|
import CustomHeader from '/@/components/vent/customHeader.vue';
|
|
import CustomBadges from './components/customHeader.vue';
|
|
import CustomBadges from './components/customHeader.vue';
|
|
import GasMonitor from './components/gasMonitor.vue';
|
|
import GasMonitor from './components/gasMonitor.vue';
|
|
import VentModal from '/@/components/vent/micro/ventModal.vue';
|
|
import VentModal from '/@/components/vent/micro/ventModal.vue';
|
|
|
|
+ import GasAssessment from '../gasAssessment/index.vue';
|
|
import { gasSystem } from './gasHome.api';
|
|
import { gasSystem } from './gasHome.api';
|
|
import { unmountMicroApps } from '/@/qiankun';
|
|
import { unmountMicroApps } from '/@/qiankun';
|
|
|
|
+ import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
|
|
|
|
+ import { navList } from './gasHome.data';
|
|
|
|
+ const activeKey = ref('gasHome');
|
|
const dataSource = ref<any | null>(null);
|
|
const dataSource = ref<any | null>(null);
|
|
|
|
+ function changeActive(activeValue) {
|
|
|
|
+ activeKey.value = activeValue;
|
|
|
|
+ }
|
|
|
|
|
|
const headerBadges = ref([
|
|
const headerBadges = ref([
|
|
{
|
|
{
|
|
@@ -47,17 +62,24 @@
|
|
onBeforeMount(async () => {
|
|
onBeforeMount(async () => {
|
|
dataSource.value = await gasSystem();
|
|
dataSource.value = await gasSystem();
|
|
});
|
|
});
|
|
|
|
+ onMounted(() => {});
|
|
onBeforeUnmount(() => {
|
|
onBeforeUnmount(() => {
|
|
unmountMicroApps(['/micro-vent-3dModal']);
|
|
unmountMicroApps(['/micro-vent-3dModal']);
|
|
});
|
|
});
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
- .main-container {
|
|
|
|
- .left-box {
|
|
|
|
- }
|
|
|
|
- .right-box {
|
|
|
|
- }
|
|
|
|
|
|
+ .gas-container {
|
|
|
|
+ width: 100%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ z-index: 999;
|
|
|
|
+ }
|
|
|
|
+ .modal-box {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: calc(100%);
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 0;
|
|
|
|
+ left: 0;
|
|
}
|
|
}
|
|
:deep(.vent-home-header) {
|
|
:deep(.vent-home-header) {
|
|
background-color: var(--vent-base-color) !important;
|
|
background-color: var(--vent-base-color) !important;
|