|
|
@@ -15,96 +15,106 @@
|
|
|
</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"
|
|
|
- :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"
|
|
|
- :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"
|
|
|
- @close="cfg.visible = false"
|
|
|
- />
|
|
|
- <!-- 下面是用于呼出已隐藏的模块的按钮 -->
|
|
|
- <div class="pos-absolute top-70px left-460px">
|
|
|
- <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
|
|
|
- <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
|
|
|
+ <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: 15px; color: #009bff; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
|
|
|
+ {{ homedata.allMineWarn }}
|
|
|
+ </div>
|
|
|
+ <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 自燃</div>
|
|
|
+ </div>
|
|
|
+ <div class="tcontent-r">
|
|
|
+ <div>火灾</div>
|
|
|
+ <div>风险</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right-t">
|
|
|
+ <div class="tcontent-l" @click="redirectTo('/grout-home')">
|
|
|
+ <div>智能</div>
|
|
|
+ <div>注浆系统</div>
|
|
|
+ </div>
|
|
|
+ <div class="tcontent-r" @click="redirectTo('/nitrogen-home')">
|
|
|
+ <div>智能</div>
|
|
|
+ <div>注氮系统</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
+ <ModuleBD
|
|
|
+ v-for="cfg in configs"
|
|
|
+ :key="cfg.deviceType"
|
|
|
+ :show-style="cfg.showStyle"
|
|
|
+ :module-data="cfg.moduleData"
|
|
|
+ :module-name="cfg.moduleName"
|
|
|
+ :device-type="cfg.deviceType"
|
|
|
+ :visible="true"
|
|
|
+ :page-type="pageType"
|
|
|
+ />
|
|
|
+ <ModuleBDDual
|
|
|
+ :show-style="configA.showStyle"
|
|
|
+ :module-data-a="configA.moduleData"
|
|
|
+ :module-name-a="configA.moduleName"
|
|
|
+ :device-type-a="configA.deviceType"
|
|
|
+ :module-data-b="configB.moduleData"
|
|
|
+ :module-name-b="configB.moduleName"
|
|
|
+ :device-type-b="configB.deviceType"
|
|
|
+ :visible="true"
|
|
|
+ :page-type="pageType"
|
|
|
+ />
|
|
|
+ <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
|
|
|
+ <VentModal />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script lang="ts" setup>
|
|
|
- import { computed, onMounted, ref } from 'vue';
|
|
|
+ import { onMounted, ref } from 'vue';
|
|
|
// import { CaretDownOutlined } from '@ant-design/icons-vue';
|
|
|
// import MonitorCenter from './components/MonitorCenter.vue';
|
|
|
- import { useInitConfigs } from './hooks/useInit';
|
|
|
- import { Config } from '../../deviceManager/configurationTable/types';
|
|
|
- import ModuleEnhanced from './components/ModuleEnhanced.vue';
|
|
|
- import ModuleOriginal from './components/ModuleOriginal.vue';
|
|
|
- import ModuleCommon from './components/ModuleCommon.vue';
|
|
|
- import { testConfigBDNew } from './configurable.data';
|
|
|
- import { useRoute } from 'vue-router';
|
|
|
-
|
|
|
- interface EnhancedConfig extends Config {
|
|
|
- visible: boolean;
|
|
|
- }
|
|
|
+ // import { useInitConfigs } from './hooks/useInit';
|
|
|
+ import ModuleBD from './components/ModuleBD.vue';
|
|
|
+ import ModuleBDDual from './components/ModuleBDDual.vue';
|
|
|
+ import { testConfigBDFire } from './configurable.data';
|
|
|
+ import VentModal from '/@/components/vent/micro/ventModal.vue';
|
|
|
+ import { getBDFireData } from './configurable.api';
|
|
|
|
|
|
- const mainTitle = ref('智能通风管控系统');
|
|
|
+ const mainTitle = ref('保德煤矿火灾预警系统');
|
|
|
+ const pageType = 'BD_fire';
|
|
|
|
|
|
// const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
|
|
|
|
|
|
- const enhancedConfigs = ref<EnhancedConfig[]>([]);
|
|
|
+ const configs = ref(
|
|
|
+ testConfigBDFire.filter(({ moduleName }) => {
|
|
|
+ return moduleName !== '工作面光纤监测' && moduleName !== '工作面束管监测';
|
|
|
+ })
|
|
|
+ );
|
|
|
+ const configA = ref<any>(
|
|
|
+ testConfigBDFire.find(({ moduleName }) => {
|
|
|
+ return moduleName === '工作面束管监测';
|
|
|
+ })
|
|
|
+ );
|
|
|
+ const configB = ref<any>(
|
|
|
+ testConfigBDFire.find(({ moduleName }) => {
|
|
|
+ return moduleName === '工作面光纤监测';
|
|
|
+ })
|
|
|
+ );
|
|
|
+ // const { configs, fetchConfigs } = useInitConfigs();
|
|
|
|
|
|
- const hiddenList = computed(() => {
|
|
|
- return enhancedConfigs.value.filter((e) => e.visible === false);
|
|
|
- });
|
|
|
- const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
|
|
|
+ const homedata = ref<any>({});
|
|
|
|
|
|
onMounted(() => {
|
|
|
- const query = useRoute().query;
|
|
|
- if (query.fire) {
|
|
|
- mainTitle.value = '智能火灾管控系统';
|
|
|
- }
|
|
|
- if (query.gas) {
|
|
|
- mainTitle.value = '智能瓦斯管控系统';
|
|
|
- }
|
|
|
// configs.value = testConfigB;
|
|
|
- fetchConfigs('configurable_home').then(() => {
|
|
|
- configs.value = testConfigBDNew;
|
|
|
- // configs.value.push(...testConfigBDNew);
|
|
|
- enhancedConfigs.value = configs.value.map((c) => {
|
|
|
- return {
|
|
|
- visible: true,
|
|
|
- ...c,
|
|
|
- };
|
|
|
- });
|
|
|
+ getBDFireData({}).then((r) => {
|
|
|
+ homedata.value = r;
|
|
|
});
|
|
|
+ // fetchConfigs(pageType);
|
|
|
});
|
|
|
+
|
|
|
+ function redirectTo(url) {
|
|
|
+ window.open(url);
|
|
|
+ }
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
@font-face {
|
|
|
@@ -121,14 +131,14 @@
|
|
|
|
|
|
.top-bg {
|
|
|
width: 100%;
|
|
|
- height: 56px;
|
|
|
+ height: 86px;
|
|
|
background: url(/@/assets/images/home-container/configurable/firehome/fire-title.png) no-repeat center;
|
|
|
position: absolute;
|
|
|
z-index: 1;
|
|
|
.main-title {
|
|
|
- height: 56px;
|
|
|
+ height: 86px;
|
|
|
font-family: 'douyuFont';
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 26px;
|
|
|
letter-spacing: 2px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
@@ -178,4 +188,123 @@
|
|
|
border-bottom: 2px solid #3df6ff;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .left-t {
|
|
|
+ position: absolute;
|
|
|
+ height: 115px;
|
|
|
+ top: 30px;
|
|
|
+ width: 450px;
|
|
|
+ background-image: url('/@/assets/images/home-container/configurable/firehome/qkjaq.png');
|
|
|
+ background-color: #000723;
|
|
|
+ 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: 160px;
|
|
|
+ height: 115px;
|
|
|
+ right: 0;
|
|
|
+ top: 40px;
|
|
|
+ width: 450px;
|
|
|
+ background-image: url('/@/assets/images/home-container/configurable/firehome/common-border2.png');
|
|
|
+ background-color: #000723;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ .tcontent-l {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
|
|
|
+ url(/@/assets/images/home-container/configurable/firehome/ggxt.png);
|
|
|
+ background-size:
|
|
|
+ auto 100%,
|
|
|
+ auto auto;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position:
|
|
|
+ center,
|
|
|
+ center top;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 35px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ .tcontent-r {
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ background-image: url(/@/assets/images/home-container/configurable/firehome/img-5.png),
|
|
|
+ url(/@/assets/images/home-container/configurable/firehome/zjxt.png);
|
|
|
+ background-size:
|
|
|
+ auto 100%,
|
|
|
+ auto auto;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position:
|
|
|
+ center,
|
|
|
+ center top;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 35px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.loading-box) {
|
|
|
+ position: unset;
|
|
|
+ }
|
|
|
</style>
|
