|
|
@@ -1,11 +1,5 @@
|
|
|
<template>
|
|
|
<div class="company-home">
|
|
|
- <div v-if="menuName !== 'syq'" :class="menuName == 'zjm' ? 'vent-modal' : 'vent-modal-1'">
|
|
|
- <!-- <VentModal /> -->
|
|
|
- </div>
|
|
|
- <div v-if="menuName === 'syq'" class="syq-modal">
|
|
|
- <!-- <VentModal /> -->
|
|
|
- </div>
|
|
|
<div class="top-bg">
|
|
|
<div class="main-title">{{ mainTitle }}</div>
|
|
|
</div>
|
|
|
@@ -14,215 +8,253 @@
|
|
|
<navMenu @toggleMenu="toggleMenu"></navMenu>
|
|
|
</div>
|
|
|
<template v-if="menuName == 'zjm'">
|
|
|
- <div class="main-status">
|
|
|
- 运行中
|
|
|
- </div>
|
|
|
- <ModuleGasInject 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" :visible-detail="cfg.showDetail" />
|
|
|
+ <div class="main-status"> 运行中 </div>
|
|
|
+ <ModuleGasInject
|
|
|
+ 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"
|
|
|
+ :visible-detail="cfg.showDetail"
|
|
|
+ />
|
|
|
</template>
|
|
|
<template v-else>
|
|
|
- <ModuleGasInject 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" :visible-detail="cfg.showDetail" />
|
|
|
+ <ModuleGasInject
|
|
|
+ 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"
|
|
|
+ :visible-detail="cfg.showDetail"
|
|
|
+ />
|
|
|
</template>
|
|
|
-
|
|
|
+ <div :class="{ 'vent-modal': menuName == 'zjm', 'vent-modal-1': menuName == 'syq' || menuName == 'zqxt' || menuName == 'ccxt' }">
|
|
|
+ <div class="modal-box">
|
|
|
+ <Three3D ref="three3D" :modalName="'zhuqi'" class="modal-3d" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div v-if="menuName === 'syq'" class="syq-modal">
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
-import { onMounted, onUnmounted, ref, computed } from 'vue';
|
|
|
-import { useInitConfigs, useInitPage } from './hooks/useInit';
|
|
|
-import ModuleGasInject from './components/ModuleGasInject.vue';
|
|
|
-import navMenu from './components/gasInject/navMenu.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 { testConfigGasInject, testConfigGasInjectZq, testConfigGasInjectCc, testConfigGasInjectSy } from './configurable.data';
|
|
|
-const { configs, fetchConfigs } = useInitConfigs();
|
|
|
-const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
|
|
|
-// const route = useRoute();
|
|
|
-let interval: number | undefined;
|
|
|
-let menuName = ref('zjm')
|
|
|
-
|
|
|
-//选项切换
|
|
|
-function toggleMenu(param) {
|
|
|
- menuName.value = param
|
|
|
- switch (menuName.value) {
|
|
|
- case 'zjm':
|
|
|
- configs.value = testConfigGasInject;
|
|
|
- break;
|
|
|
- case 'syq':
|
|
|
- configs.value = testConfigGasInjectSy;
|
|
|
- break;
|
|
|
- case 'zqxt':
|
|
|
- configs.value = testConfigGasInjectZq;
|
|
|
- break;
|
|
|
- case 'ccxt':
|
|
|
- configs.value = testConfigGasInjectCc
|
|
|
- break;
|
|
|
+ import { onMounted, onUnmounted, ref, computed, nextTick } from 'vue';
|
|
|
+ import { useInitConfigs, useInitPage } from './hooks/useInit';
|
|
|
+ import ModuleGasInject from './components/ModuleGasInject.vue';
|
|
|
+ import navMenu from './components/gasInject/navMenu.vue';
|
|
|
+ import Three3D from './components/three3D.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 { testConfigGasInject, testConfigGasInjectZq, testConfigGasInjectCc, testConfigGasInjectSy } from './configurable.data';
|
|
|
+ const { configs, fetchConfigs } = useInitConfigs();
|
|
|
+ const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
|
|
|
+ // const route = useRoute();
|
|
|
+ const three3D = ref(null);
|
|
|
+ let interval: number | undefined;
|
|
|
+ let menuName = ref('zjm');
|
|
|
+
|
|
|
+ //选项切换
|
|
|
+ function toggleMenu(param) {
|
|
|
+ menuName.value = param;
|
|
|
+ switch (menuName.value) {
|
|
|
+ case 'zjm':
|
|
|
+ configs.value = testConfigGasInject;
|
|
|
+ break;
|
|
|
+ case 'syq':
|
|
|
+ configs.value = testConfigGasInjectSy;
|
|
|
+ break;
|
|
|
+ case 'zqxt':
|
|
|
+ configs.value = testConfigGasInjectZq;
|
|
|
+ break;
|
|
|
+ case 'ccxt':
|
|
|
+ configs.value = testConfigGasInjectCc;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 刷新/
|
|
|
+ nextTick(() => {
|
|
|
+ three3D.value?.resizeRenderer();
|
|
|
+ });
|
|
|
}
|
|
|
-}
|
|
|
-onMounted(() => {
|
|
|
- // fetchConfigs('vent_new').then(() => {
|
|
|
- configs.value = testConfigGasInject;
|
|
|
- // updateEnhancedConfigs(configs.value);
|
|
|
-
|
|
|
- getHomeData({}).then(updateData);
|
|
|
- // });
|
|
|
- setInterval(() => {
|
|
|
+ onMounted(() => {
|
|
|
+ // fetchConfigs('vent_new').then(() => {
|
|
|
+ configs.value = testConfigGasInject;
|
|
|
+ // updateEnhancedConfigs(configs.value);
|
|
|
+
|
|
|
getHomeData({}).then(updateData);
|
|
|
- }, 60000);
|
|
|
-});
|
|
|
+ // });
|
|
|
+ setInterval(() => {
|
|
|
+ getHomeData({}).then(updateData);
|
|
|
+ }, 60000);
|
|
|
+ });
|
|
|
|
|
|
-onUnmounted(() => {
|
|
|
- clearInterval(interval);
|
|
|
-});
|
|
|
+ onUnmounted(() => {
|
|
|
+ clearInterval(interval);
|
|
|
+ });
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-@import '/@/design/theme.less';
|
|
|
+ @import '/@/design/theme.less';
|
|
|
+
|
|
|
+ @{theme-deepblue} {
|
|
|
+ .company-home {
|
|
|
+ --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
|
|
|
+ --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
|
|
|
+ --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-@{theme-deepblue} {
|
|
|
.company-home {
|
|
|
--image-modal-top: url('@/assets/images/gasInjection/1-1.png');
|
|
|
--image-modal-status: url('@/assets/images/gasInjection/3-1.png');
|
|
|
--image-modal-center: url('@/assets/images/gasInjection/1-2.png');
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.company-home {
|
|
|
- --image-modal-top: url('@/assets/images/gasInjection/1-1.png');
|
|
|
- --image-modal-status: url('@/assets/images/gasInjection/3-1.png');
|
|
|
- --image-modal-center: url('@/assets/images/gasInjection/1-2.png');
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- color: @white;
|
|
|
- position: relative;
|
|
|
- background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
|
|
|
-
|
|
|
- .top-bg {
|
|
|
width: 100%;
|
|
|
- height: 66px;
|
|
|
- background: var(--image-modal-top) no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- position: absolute;
|
|
|
- z-index: 1;
|
|
|
+ height: 100%;
|
|
|
+ color: @white;
|
|
|
+ position: relative;
|
|
|
+ background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
|
|
|
|
|
|
- .main-title {
|
|
|
+ .top-bg {
|
|
|
+ width: 100%;
|
|
|
height: 66px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 20px;
|
|
|
- letter-spacing: 2px;
|
|
|
+ background: var(--image-modal-top) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ .main-title {
|
|
|
+ height: 66px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top-nav {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 880px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-container {
|
|
|
+ position: absolute;
|
|
|
+ top: 66px;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 66px);
|
|
|
+ padding: 0px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-status {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
+ width: 440px;
|
|
|
+ height: 80px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin: 10px 0px;
|
|
|
+ background: var(--image-modal-status);
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
|
- .top-nav {
|
|
|
+ .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: 0;
|
|
|
- width: 880px;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
+ top: 70px;
|
|
|
+ right: 460px;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .main-container {
|
|
|
- position: absolute;
|
|
|
- top: 66px;
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 66px);
|
|
|
- padding: 0px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-cards {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 0px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ width: 691px;
|
|
|
+ height: 58px;
|
|
|
+ background: var(--image-modal-center) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .main-status {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 440px;
|
|
|
- height: 80px;
|
|
|
- font-size: 18px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- margin: 10px 0px;
|
|
|
- background: var(--image-modal-status);
|
|
|
- background-size: 100% 100%;
|
|
|
+ :deep(.loading-box) {
|
|
|
+ position: unset;
|
|
|
}
|
|
|
|
|
|
+ .modal-box {
|
|
|
+ width: 100%; height: 100%; position: relative; pointer-events: auto, padding: 20px;
|
|
|
+ }
|
|
|
|
|
|
- .module-dropdown {
|
|
|
- padding: 10px;
|
|
|
- background-image: @vent-configurable-dropdown;
|
|
|
- border-bottom: 2px solid @vent-configurable-home-light-border;
|
|
|
- color: @vent-font-color;
|
|
|
+ // 试验区模型区域样式
|
|
|
+ .syq-modal {
|
|
|
position: absolute;
|
|
|
- top: 70px;
|
|
|
- right: 460px;
|
|
|
+ top: 135px;
|
|
|
+ right: 20px;
|
|
|
+ width: calc(100% - 510px);
|
|
|
+ height: 515px;
|
|
|
+ background: url('@/assets/images/gasInjection/syq/modal-bg.png') no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
|
|
|
- .module-dropdown-original {
|
|
|
- padding: 10px;
|
|
|
- background-image: @vent-configurable-dropdown;
|
|
|
- border-bottom: 2px solid @vent-configurable-home-light-border;
|
|
|
- color: @vent-font-color;
|
|
|
+ .vent-modal {
|
|
|
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;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0px);
|
|
|
+ width: calc(100% - 920px);
|
|
|
+ height: 505px;
|
|
|
+ background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ pointer-events: auto;
|
|
|
+ background-color: transparent !important;
|
|
|
}
|
|
|
-
|
|
|
- .nav-cards {
|
|
|
+ .vent-modal-1 {
|
|
|
position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 0px;
|
|
|
- transform: translate(-50%, 0);
|
|
|
- width: 691px;
|
|
|
- height: 58px;
|
|
|
- background: var(--image-modal-center) no-repeat;
|
|
|
+ top: 70px;
|
|
|
+ left: 460px;
|
|
|
+ width: calc(100% - 470px);
|
|
|
+ height: 505px;
|
|
|
+ background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
+ pointer-events: auto;
|
|
|
+ background-color: transparent !important;
|
|
|
+ }
|
|
|
+ .modal-3d {
|
|
|
+ padding: 10px;
|
|
|
+ width: calc(100% - 20px) !important;
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-:deep(.loading-box) {
|
|
|
- position: unset;
|
|
|
-}
|
|
|
-
|
|
|
-// 试验区模型区域样式
|
|
|
-.syq-modal {
|
|
|
- position: absolute;
|
|
|
- top: 135px;
|
|
|
- right: 20px;
|
|
|
- width: calc(100% - 510px);
|
|
|
- height: 515px;
|
|
|
- background: url('@/assets/images/gasInjection/syq/modal-bg.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.vent-modal {
|
|
|
- position: absolute;
|
|
|
- top: 134px;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, 0px);
|
|
|
- width: calc(100% - 920px);
|
|
|
- height: 505px;
|
|
|
- background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
-}
|
|
|
-.vent-modal-1 {
|
|
|
- position: absolute;
|
|
|
- top: 134px;
|
|
|
- left: 460px;
|
|
|
- width: calc(100% - 470px);
|
|
|
- height: 505px;
|
|
|
- background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
-}
|
|
|
</style>
|
hongrunxia
