|
@@ -1,40 +1,58 @@
|
|
|
<template>
|
|
|
<div class="monitor-container" style="margin-top: 20px">
|
|
|
- <div class="lr left-box" style="margin-top: 0">
|
|
|
- <ventBox1>
|
|
|
- <template #title>
|
|
|
- <div>矿井概况</div>
|
|
|
- </template>
|
|
|
- <template #container>
|
|
|
- <ListItem v-for="(item, index) in sysInfo" :key="index" class="w-100% mb-5px" :value="get(dataSource, item.code)" :label="item.title" />
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- <ventBox1 class="vent-margin-t-10">
|
|
|
- <template #title>
|
|
|
- <div>瓦斯抽采泵站概况</div>
|
|
|
- </template>
|
|
|
- <template #container>
|
|
|
- <ListItem v-for="(item, index) in gasPump" :key="index" class="w-100% mb-5px" :value="get(dataSource, item.code)" :label="item.title" />
|
|
|
- </template>
|
|
|
- </ventBox1>
|
|
|
- </div>
|
|
|
- <div class="lr right-box" style="margin-top: 0">
|
|
|
- <div class="item-box sensor-container">
|
|
|
+ <transition enter-active-class="animate__animated animate__fadeInLeft" leave-active-class="animate__animated animate__fadeOutLeft">
|
|
|
+ <div class="lr left-box" style="margin-top: 0" v-if="loading">
|
|
|
<ventBox1>
|
|
|
<template #title>
|
|
|
- <div>井下抽采区域</div>
|
|
|
+ <div>矿井概况</div>
|
|
|
</template>
|
|
|
<template #container>
|
|
|
- <ListItem v-for="(item, index) in caikongqu" :key="index" class="w-100% mb-5px" :value="get(dataSource, item.code)" :label="item.title" />
|
|
|
+ <ListItem
|
|
|
+ v-for="(item, index) in sysInfo"
|
|
|
+ :key="index"
|
|
|
+ class="w-100% mb-5px"
|
|
|
+ label-width="180px"
|
|
|
+ :value="get(dataSource, item.code)"
|
|
|
+ :label="item.title"
|
|
|
+ />
|
|
|
</template>
|
|
|
</ventBox1>
|
|
|
+ <ventBox1 class="vent-margin-t-10">
|
|
|
+ <template #title>
|
|
|
+ <div>瓦斯抽采泵站概况</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <ListItem v-for="(item, index) in gasPump" :key="index" class="w-100% mb-5px" :value="get(dataSource, item.code)" :label="item.title" />
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+ <transition enter-active-class="animate__animated animate__fadeInRight" leave-active-class="animate__animated animate__fadeOutRight">
|
|
|
+ <div class="lr right-box" style="margin-top: 0" v-if="loading">
|
|
|
+ <div class="item-box sensor-container">
|
|
|
+ <ventBox1>
|
|
|
+ <template #title>
|
|
|
+ <div>井下抽采区域</div>
|
|
|
+ </template>
|
|
|
+ <template #container>
|
|
|
+ <ListItem
|
|
|
+ v-for="(item, index) in caikongqu"
|
|
|
+ :key="index"
|
|
|
+ class="w-100% mb-5px"
|
|
|
+ :value="get(dataSource, item.code)"
|
|
|
+ :label="item.title"
|
|
|
+ label-width="180px"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </ventBox1>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </transition>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="gas-pump-monitor">
|
|
|
- import { onMounted, defineProps, computed } from 'vue';
|
|
|
+ import { onMounted, defineProps, computed, ref } from 'vue';
|
|
|
import ventBox1 from '/@/components/vent/ventBox1.vue';
|
|
|
import ListItem from '@/views/vent/gas/components/list/listItem.vue';
|
|
|
import { sysInfo, gasPump, caikongqu } from '../gasHome.data';
|
|
@@ -47,6 +65,7 @@
|
|
|
require: true,
|
|
|
},
|
|
|
});
|
|
|
+ const loading = ref(false);
|
|
|
const dataSource = computed(() => props.dataSource);
|
|
|
// 抽放泵相关
|
|
|
// const activedPump = ref<any>({});
|
|
@@ -56,7 +75,9 @@
|
|
|
// activedPump.value = fakePP;
|
|
|
// }
|
|
|
|
|
|
- onMounted(async () => {});
|
|
|
+ onMounted(async () => {
|
|
|
+ loading.value = true;
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|