|
|
@@ -1,70 +1,132 @@
|
|
|
<template>
|
|
|
<div class="fire-green">
|
|
|
- <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
|
|
|
- <template v-if="!route.query.deviceType">
|
|
|
- <div v-if="!route.query.embed" class="top-bg">
|
|
|
- <greenNav :activeIndex="activeIndex" />
|
|
|
+ <div class="top-bg">
|
|
|
+ <greenNav :activeIndex="activeIndex" />
|
|
|
+ </div>
|
|
|
+ <div class="main-container">
|
|
|
+ <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
|
|
|
+ <div class="left-t">
|
|
|
+ <div class="tcontent-area">
|
|
|
+ <div class="tcontent-l">
|
|
|
+ <div>监测</div>
|
|
|
+ <div>区域</div>
|
|
|
+ </div>
|
|
|
+ <div class="tcontent-c">
|
|
|
+ <div style="margin-bottom: -4px; color: #3afde7; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
|
|
|
+ {{ data.fireAllMineWarn }}
|
|
|
+ </div>
|
|
|
+ <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 自燃</div>
|
|
|
+ </div>
|
|
|
+ <div class="tcontent-r">
|
|
|
+ <div>火灾</div>
|
|
|
+ <div>风险</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="main-container">
|
|
|
- <ModuleOriginal v-for="(cfg, index) in configs" :key="cfg.deviceType + index" :show-style="cfg.showStyle"
|
|
|
- :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
|
|
|
- :visible="true" />
|
|
|
+ </div>
|
|
|
+ <div class="right-t">
|
|
|
+ <div class="tcontent-l" @click="redirectTo('/grout-home?mock-login=1')">
|
|
|
+ <div>智能注浆系统</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <div style="width: calc(100% - 928px); height: 544px; position: absolute; left: 464px; top: 96px">
|
|
|
+ <div class="tcontent-r" @click="redirectTo('/nitrogen-home?mock-login=1')">
|
|
|
+ <div>智能注氮系统</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ModuleGreen v-for="cfg in cfgs" :key="cfg.deviceType" :show-style="cfg.showStyle" :module-data="cfg.moduleData"
|
|
|
+ :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data" :visible="true" />
|
|
|
+ <ModuleDual v-if="cfgA && cfgB" :show-style="cfgA.showStyle" :module-data-a="cfgA.moduleData"
|
|
|
+ :module-name-a="cfgA.moduleName" :device-type-a="cfgA.deviceType" :module-data-b="cfgB.moduleData"
|
|
|
+ :module-name-b="cfgB.moduleName" :device-type-b="cfgB.deviceType" :data="data" :visible="true" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div style="width: 998px; height: 550px; position: absolute; left: calc(50% - 500px); top: 60px">
|
|
|
<VentModal />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
-import { onMounted, onUnmounted, ref } from 'vue';
|
|
|
-import greenNav from './components/green-nav.vue';
|
|
|
+import { ref, computed, onMounted, onUnmounted } from 'vue';
|
|
|
import { useInitConfigs, useInitPage } from '../hooks/useInit';
|
|
|
-import ModuleOriginal from './components/ModuleOriginal-green.vue';
|
|
|
+import greenNav from './components/green-nav.vue';
|
|
|
+import ModuleGreen from './components/module-green.vue';
|
|
|
+import ModuleDual from './components/moduleDual-green.vue';
|
|
|
import VentModal from '/@/components/vent/micro/ventModal.vue';
|
|
|
-import { useRoute } from 'vue-router';
|
|
|
-import { useGlobSetting } from '/@/hooks/setting';
|
|
|
-import { testConfigFireGreen } from '../configurable.data';
|
|
|
-import { BDFireMock } from '../mock';
|
|
|
-const { title = '智能通风管控系统' } = useGlobSetting();
|
|
|
-const { configs, fetchConfigs } = useInitConfigs();
|
|
|
-const { data, updateData } = useInitPage(title);
|
|
|
-const route = useRoute();
|
|
|
+import { getDisHome } from '../configurable.api';
|
|
|
+import { testConfigBDFire } from '../configurable.data';
|
|
|
+// import { getToken } from '/@/utils/auth';
|
|
|
let activeIndex = ref(2)
|
|
|
+
|
|
|
+const cfgs = computed(() =>
|
|
|
+ configs.value.filter((_, index) => {
|
|
|
+ return index !== 4 && index !== 3;
|
|
|
+ })
|
|
|
+);
|
|
|
+const cfgA = computed<any>(() =>
|
|
|
+ configs.value.find((_, index) => {
|
|
|
+ return index === 3;
|
|
|
+ })
|
|
|
+);
|
|
|
+const cfgB = computed<any>(() =>
|
|
|
+ configs.value.find((_, index) => {
|
|
|
+ return index === 4;
|
|
|
+ })
|
|
|
+);
|
|
|
+const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
|
|
|
+const { mainTitle, data, updateData } = useInitPage('');
|
|
|
let interval: number | undefined;
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
- fetchConfigs('fire-green').then(() => {
|
|
|
- configs.value = testConfigFireGreen;
|
|
|
-
|
|
|
- Promise.resolve(BDFireMock).then(updateData);
|
|
|
- // getHomeData({}).then(updateData);
|
|
|
- });
|
|
|
- // setInterval(() => {
|
|
|
- // getHomeData({}).then(updateData);
|
|
|
- // }, 60000);
|
|
|
+ fetchConfigs('BD_fire').then(() => {
|
|
|
+ configs.value = testConfigBDFire;
|
|
|
+ getDisHome({
|
|
|
+ dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
|
|
|
+ }).then(updateData);
|
|
|
+ });
|
|
|
+ setInterval(() => {
|
|
|
+ getDisHome({
|
|
|
+ dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
|
|
|
+ }).then(updateData);
|
|
|
+ }, 2000);
|
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
|
clearInterval(interval);
|
|
|
});
|
|
|
+
|
|
|
+function redirectTo(url) {
|
|
|
+ window.open(url);
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
@import '/@/design/theme.less';
|
|
|
|
|
|
+@font-face {
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ src: url('../../../../assets/font/douyuFont.otf');
|
|
|
+}
|
|
|
+
|
|
|
@{theme-deepblue} {
|
|
|
.fire-green {
|
|
|
- --image-model_left-area: url('@/assets/images/themify/deepblue/home-container/configurable/green-bd-left.png');
|
|
|
- --image-model_bottom-area: url('@/assets/images/themify/deepblue/home-container/configurable/green-bd-bottom.png');
|
|
|
+ --image-bg: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/bg.png');
|
|
|
+ --image-fire-title: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/fire-title.png);
|
|
|
+ --image-qkjaq: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-2.png');
|
|
|
+ --image-common-border2: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/green-bd-bottom.png');
|
|
|
+ --image-znzjxt: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-7.png);
|
|
|
+ --image-znzdxt: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-8.png);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.fire-green {
|
|
|
- --image-model_left-area: url('@/assets/images/home-green/green-bd-left.png');
|
|
|
- --image-model_bottom-area: url('@/assets/images/home-green/green-bd-bottom.png');
|
|
|
+ --image-bg: url('@/assets/images/home-container/configurable/firehome/bg.png');
|
|
|
+ --image-fire-title: url(/@/assets/images/home-container/configurable/firehome/fire-title.png);
|
|
|
+ --image-qkjaq: url('/@/assets/images/home-container/configurable/firehome/1-2.png');
|
|
|
+ --image-common-border2: url('@/assets/images/home-container/configurable/firehome/green-bd-bottom.png');
|
|
|
+ --image-znzjxt: url(/@/assets/images/home-container/configurable/firehome/1-7.png);
|
|
|
+ --image-znzdxt: url(/@/assets/images/home-container/configurable/firehome/1-8.png);
|
|
|
+ position: relative;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- position: relative;
|
|
|
+ background-color: #181b24;
|
|
|
+
|
|
|
|
|
|
.top-bg {
|
|
|
width: 100%;
|
|
|
@@ -72,7 +134,6 @@ onUnmounted(() => {
|
|
|
position: absolute;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
-
|
|
|
.main-container {
|
|
|
position: absolute;
|
|
|
top: 96px;
|
|
|
@@ -81,6 +142,136 @@ onUnmounted(() => {
|
|
|
margin: 0px 15px;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
+
|
|
|
+ .module-dropdown {
|
|
|
+ padding: 10px;
|
|
|
+ background-image: linear-gradient(to bottom, #036886, #072a40);
|
|
|
+ border-bottom: 2px solid #3df6ff;
|
|
|
+ color: @vent-font-color;
|
|
|
+ position: absolute;
|
|
|
+ top: 70px;
|
|
|
+ right: 460px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .module-dropdown-original {
|
|
|
+ padding: 10px;
|
|
|
+ background-image: linear-gradient(to bottom, #036886, #072a40);
|
|
|
+ border-bottom: 2px solid #3df6ff;
|
|
|
+ color: @vent-font-color;
|
|
|
+ position: absolute;
|
|
|
+ top: 70px;
|
|
|
+ right: 460px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .module-trigger-button {
|
|
|
+ color: @vent-font-color;
|
|
|
+ background-image: linear-gradient(to bottom, #036886, #072a40);
|
|
|
+ border: none;
|
|
|
+ border-bottom: 2px solid #3df6ff;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.left-t {
|
|
|
+ position: absolute;
|
|
|
+ height: 90px;
|
|
|
+ top: 0px;
|
|
|
+ left: 10px;
|
|
|
+ width: 420px;
|
|
|
+ background-image: var(--image-qkjaq);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .tcontent-area {
|
|
|
+ display: flex;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ padding: 0 15px;
|
|
|
+ transform: translate(0, -40%);
|
|
|
+
|
|
|
+ .tcontent-l {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ color: #9da5aa;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tcontent-c {
|
|
|
+ display: flex;
|
|
|
+ flex: 3;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tcontent-r {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 100%;
|
|
|
+ color: #9da5aa;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.right-t {
|
|
|
+ position: absolute;
|
|
|
+ height: 90px;
|
|
|
+ right: 10px;
|
|
|
+ top: 0px;
|
|
|
+ width: 420px;
|
|
|
+ background-image: var(--image-common-border2);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ color: #fff;
|
|
|
+ .tcontent-l {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ background-image: var(--image-znzjxt);
|
|
|
+ background-size: 75% 80%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 70px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tcontent-r {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ background-image: var(--image-znzdxt);
|
|
|
+ background-size: 75% 80%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 70px;
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
:deep(.loading-box) {
|
