|
|
@@ -9,32 +9,17 @@
|
|
|
</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"
|
|
|
- />
|
|
|
+ <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="{ '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" @success="initModalAnimate" />
|
|
|
</div>
|
|
|
@@ -45,262 +30,262 @@
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
- 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 { getHomeData } from './configurable.api';
|
|
|
- // import { useRoute } from 'vue-router';
|
|
|
- import { testConfigGasInject, testConfigGasInjectZq, testConfigGasInjectCc, testConfigGasInjectSy } from './configurable.data';
|
|
|
- import { animateCamera } from '/@/utils/threejs/util';
|
|
|
- import { modalAnimate } from './threejs/gasInjection';
|
|
|
- // import * as dat from 'dat.gui';
|
|
|
- // const gui = new dat.GUI();
|
|
|
- // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
|
|
|
+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 { getHomeData, getSystemApi } from './configurable.api';
|
|
|
+// import { useRoute } from 'vue-router';
|
|
|
+import { testConfigGasInject, testConfigGasInjectZq, testConfigGasInjectCc, testConfigGasInjectSy } from './configurable.data';
|
|
|
+import { animateCamera } from '/@/utils/threejs/util';
|
|
|
+// import { modalAnimate } from './threejs/gasInjection';
|
|
|
+// import * as dat from 'dat.gui';
|
|
|
+// const gui = new dat.GUI();
|
|
|
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
|
|
|
|
|
|
- const { configs, fetchConfigs } = useInitConfigs();
|
|
|
- const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
|
|
|
- const three3D = ref(null);
|
|
|
- let interval: number | undefined;
|
|
|
- let menuName = ref('zjm');
|
|
|
+const { configs, fetchConfigs } = useInitConfigs();
|
|
|
+const { mainTitle, data, updateData } = useInitPage('注气驱替智能管控系统');
|
|
|
+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;
|
|
|
- }
|
|
|
+//选项切换
|
|
|
+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(async () => {
|
|
|
- three3D.value?.resizeRenderer();
|
|
|
- const modal = three3D.value.getModal();
|
|
|
- if (modal) {
|
|
|
- const oldCamera = modal.camera;
|
|
|
- const oldCameraPosition = { x: oldCamera.position.x, y: oldCamera.position.y, z: oldCamera.position.z };
|
|
|
- if (param == 'zqxt') {
|
|
|
- const newP = { x: -26.587483577770445, y: -1.885170491810538, z: 39.104309663143255 };
|
|
|
- const newT = { x: 10.919881491980828, y: -4.7228274957026946, z: 38.87645926712004 };
|
|
|
- await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
|
|
|
- } else if (param == 'zjm') {
|
|
|
- const newP = { x: -45.69228602978097, y: 49.59721939545517, z: 2.6454258202266985 };
|
|
|
- const newT = { x: 9.289291846942458, y: -21.608842010051386, z: 2.7675348357947906 };
|
|
|
- await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
|
|
|
- } else {
|
|
|
- const newP = { x: -43.18945276107877, y: 40.44347648044, z: 0.059975838354020664 };
|
|
|
- const newT = { x: 6.431421158296241, y: -23.819993211059913, z: 0.17017939135402457 };
|
|
|
- await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
|
|
|
- }
|
|
|
+ // 刷新/
|
|
|
+ nextTick(async () => {
|
|
|
+ three3D.value?.resizeRenderer();
|
|
|
+ const modal = three3D.value.getModal();
|
|
|
+ if (modal) {
|
|
|
+ const oldCamera = modal.camera;
|
|
|
+ const oldCameraPosition = { x: oldCamera.position.x, y: oldCamera.position.y, z: oldCamera.position.z };
|
|
|
+ if (param == 'zqxt') {
|
|
|
+ const newP = { x: -26.587483577770445, y: -1.885170491810538, z: 39.104309663143255 };
|
|
|
+ const newT = { x: 10.919881491980828, y: -4.7228274957026946, z: 38.87645926712004 };
|
|
|
+ await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
|
|
|
+ } else if (param == 'zjm') {
|
|
|
+ const newP = { x: -45.69228602978097, y: 49.59721939545517, z: 2.6454258202266985 };
|
|
|
+ const newT = { x: 9.289291846942458, y: -21.608842010051386, z: 2.7675348357947906 };
|
|
|
+ await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
|
|
|
+ } else {
|
|
|
+ const newP = { x: -43.18945276107877, y: 40.44347648044, z: 0.059975838354020664 };
|
|
|
+ const newT = { x: 6.431421158296241, y: -23.819993211059913, z: 0.17017939135402457 };
|
|
|
+ await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, newP, newT, modal);
|
|
|
}
|
|
|
- });
|
|
|
- }
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
|
|
|
- function initModalAnimate(modal) {
|
|
|
- console.log('初始化模型', modal);
|
|
|
- modal.isRender = true;
|
|
|
+function initModalAnimate(modal) {
|
|
|
+ console.log('初始化模型', modal);
|
|
|
+ modal.isRender = true;
|
|
|
|
|
|
- modalAnimate(modal);
|
|
|
- }
|
|
|
+ // modalAnimate(modal);
|
|
|
+}
|
|
|
|
|
|
- onMounted(() => {
|
|
|
- // fetchConfigs('vent_new').then(() => {
|
|
|
+onMounted(() => {
|
|
|
+ fetchConfigs('gas_injection').then(() => {
|
|
|
configs.value = testConfigGasInject;
|
|
|
- // updateEnhancedConfigs(configs.value);
|
|
|
-
|
|
|
- getHomeData({}).then(updateData);
|
|
|
- // });
|
|
|
- setInterval(() => {
|
|
|
- getHomeData({}).then(updateData);
|
|
|
- }, 60000);
|
|
|
+ // updateEnhancedConfigs(configs.value);
|
|
|
+ getSystemApi({systemID: "2036323791827165185",}).then(updateData);
|
|
|
});
|
|
|
|
|
|
- onUnmounted(() => {
|
|
|
- clearInterval(interval);
|
|
|
- });
|
|
|
+ setInterval(() => {
|
|
|
+ getSystemApi({systemID: "2036323791827165185",}).then(updateData);
|
|
|
+ }, 60000);
|
|
|
+});
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ clearInterval(interval);
|
|
|
+});
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- @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');
|
|
|
- }
|
|
|
- }
|
|
|
+@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');
|
|
|
- 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;
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
+.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;
|
|
|
|
|
|
- .main-container {
|
|
|
- position: absolute;
|
|
|
- top: 66px;
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 66px);
|
|
|
- padding: 0px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
+ .top-bg {
|
|
|
+ width: 100%;
|
|
|
+ height: 66px;
|
|
|
+ background: var(--image-modal-top) no-repeat center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
|
|
|
- .main-status {
|
|
|
+ .main-title {
|
|
|
+ height: 66px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 20px;
|
|
|
+ letter-spacing: 2px;
|
|
|
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%;
|
|
|
}
|
|
|
|
|
|
- .module-dropdown {
|
|
|
- padding: 10px;
|
|
|
- background-image: @vent-configurable-dropdown;
|
|
|
- border-bottom: 2px solid @vent-configurable-home-light-border;
|
|
|
- color: @vent-font-color;
|
|
|
+ .top-nav {
|
|
|
position: absolute;
|
|
|
- top: 70px;
|
|
|
- right: 460px;
|
|
|
- }
|
|
|
-
|
|
|
- .modal-box {
|
|
|
- width: calc(100% - 20px);
|
|
|
- height: calc(100% - 20px);
|
|
|
- position: relative;
|
|
|
- pointer-events: auto;
|
|
|
- margin: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
+ top: 0;
|
|
|
+ width: 880px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .module-trigger-button {
|
|
|
- color: @vent-font-color;
|
|
|
- background-image: @vent-configurable-dropdown;
|
|
|
- border: none;
|
|
|
- border-bottom: 2px solid @vent-configurable-home-light-border;
|
|
|
- }
|
|
|
+ .main-container {
|
|
|
+ position: absolute;
|
|
|
+ top: 66px;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 66px);
|
|
|
+ padding: 0px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
|
|
|
- .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;
|
|
|
+ .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;
|
|
|
}
|
|
|
|
|
|
.modal-box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ width: calc(100% - 20px);
|
|
|
+ height: calc(100% - 20px);
|
|
|
position: relative;
|
|
|
pointer-events: auto;
|
|
|
+ margin: 10px;
|
|
|
}
|
|
|
|
|
|
- // 试验区模型区域样式
|
|
|
- .syq-modal {
|
|
|
+ .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: 135px;
|
|
|
- right: 20px;
|
|
|
- width: calc(100% - 510px);
|
|
|
- height: 515px;
|
|
|
- background: url('@/assets/images/gasInjection/syq/modal-bg.png') no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
+ top: 70px;
|
|
|
+ right: 460px;
|
|
|
}
|
|
|
|
|
|
- .vent-modal {
|
|
|
- position: absolute;
|
|
|
- top: 70px;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, 0px);
|
|
|
- width: calc(100% - 920px);
|
|
|
- height: 500px;
|
|
|
- background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- pointer-events: auto;
|
|
|
- // padding: 15px;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: hidden;
|
|
|
+ .module-trigger-button {
|
|
|
+ color: @vent-font-color;
|
|
|
+ background-image: @vent-configurable-dropdown;
|
|
|
+ border: none;
|
|
|
+ border-bottom: 2px solid @vent-configurable-home-light-border;
|
|
|
}
|
|
|
|
|
|
- .vent-modal-1 {
|
|
|
+ .nav-cards {
|
|
|
position: absolute;
|
|
|
- top: 70px;
|
|
|
- left: 460px;
|
|
|
- width: calc(100% - 470px);
|
|
|
- height: 500px;
|
|
|
- background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
|
|
|
+ left: 50%;
|
|
|
+ top: 0px;
|
|
|
+ transform: translate(-50%, 0);
|
|
|
+ width: 691px;
|
|
|
+ height: 58px;
|
|
|
+ background: var(--image-modal-center) no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
- pointer-events: auto;
|
|
|
- padding: 10px 15px;
|
|
|
- box-sizing: border-box;
|
|
|
- overflow: hidden;
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- .modal-3d {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+:deep(.loading-box) {
|
|
|
+ position: unset;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ pointer-events: auto;
|
|
|
+}
|
|
|
+
|
|
|
+// 试验区模型区域样式
|
|
|
+.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: 70px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, 0px);
|
|
|
+ width: calc(100% - 920px);
|
|
|
+ height: 500px;
|
|
|
+ background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ pointer-events: auto;
|
|
|
+ // padding: 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.vent-modal-1 {
|
|
|
+ position: absolute;
|
|
|
+ top: 70px;
|
|
|
+ left: 460px;
|
|
|
+ width: calc(100% - 470px);
|
|
|
+ height: 500px;
|
|
|
+ background: url(/src/assets/images/gasInjection/syq/modal-bg.png) no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ pointer-events: auto;
|
|
|
+ padding: 10px 15px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.modal-3d {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
</style>
|
