|
|
@@ -50,15 +50,8 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <div ref="alarmCounts" style="height: 225px" id="alarmCounts"></div> -->
|
|
|
- <BarSingle
|
|
|
- :xAxisData="xAxisData"
|
|
|
- :dataSource="windData.levels"
|
|
|
- height="225px"
|
|
|
- :chartsColumns="chartsColumns"
|
|
|
- :option="option"
|
|
|
- :color="colors"
|
|
|
- :fontColor="fontColor"
|
|
|
- />
|
|
|
+ <BarSingle :xAxisData="xAxisData" :dataSource="windData.levels" height="225px" :chartsColumns="chartsColumns"
|
|
|
+ :option="option" :color="colors" :fontColor="fontColor" />
|
|
|
</template>
|
|
|
</ventBox1>
|
|
|
<ventBox1 class="vent-margin-t-10">
|
|
|
@@ -73,33 +66,29 @@
|
|
|
</div>
|
|
|
<div></div>
|
|
|
<img :src="item.url" :alt="item.text" />
|
|
|
- <div
|
|
|
- class="level-text"
|
|
|
- :class="{
|
|
|
- 'level-text-0': item.level==0,
|
|
|
- 'level-text-1': item.level == 101,
|
|
|
- 'level-text-2': item.level == 102,
|
|
|
- 'level-text-3': item.level == 103,
|
|
|
- 'level-text-4': item.level == 104,
|
|
|
- 'level-text-5': item.level == 201,
|
|
|
- 'level-text-6': item.level != 0 && item.level!=101 && item.level!=102 && item.level!=103 && item.level!=104 && item.level!=201,
|
|
|
- }"
|
|
|
- >{{
|
|
|
- item.level == 0
|
|
|
- ? '正常'
|
|
|
- :item.level==101
|
|
|
- ? '较低风险'
|
|
|
- : item.level == 102
|
|
|
- ? '低风险'
|
|
|
- : item.level == 103
|
|
|
- ? '中风险'
|
|
|
- : item.level == 104
|
|
|
- ? '高风险'
|
|
|
- : item.level == 201
|
|
|
- ? '报警'
|
|
|
- : '未连接设备'
|
|
|
- }}</div
|
|
|
- >
|
|
|
+ <div class="level-text" :class="{
|
|
|
+ 'level-text-0': item.level == 0,
|
|
|
+ 'level-text-1': item.level == 101,
|
|
|
+ 'level-text-2': item.level == 102,
|
|
|
+ 'level-text-3': item.level == 103,
|
|
|
+ 'level-text-4': item.level == 104,
|
|
|
+ 'level-text-5': item.level == 201,
|
|
|
+ 'level-text-6': item.level != 0 && item.level != 101 && item.level != 102 && item.level != 103 && item.level != 104 && item.level != 201,
|
|
|
+ }">{{
|
|
|
+ item.level == 0
|
|
|
+ ? '正常'
|
|
|
+ : item.level == 101
|
|
|
+ ? '较低风险'
|
|
|
+ : item.level == 102
|
|
|
+ ? '低风险'
|
|
|
+ : item.level == 103
|
|
|
+ ? '中风险'
|
|
|
+ : item.level == 104
|
|
|
+ ? '高风险'
|
|
|
+ : item.level == 201
|
|
|
+ ? '报警'
|
|
|
+ : '未连接'
|
|
|
+}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -108,28 +97,21 @@
|
|
|
<div class="center-box">
|
|
|
<div class="animation-box">
|
|
|
<canvas class="rain"></canvas>
|
|
|
- <div
|
|
|
- class="bottom"
|
|
|
- :class="{
|
|
|
- bottom1: centerData.levels == 101,
|
|
|
- bottom2: centerData.levels == 102,
|
|
|
- bottom3: centerData.levels == 103,
|
|
|
- bottom4: centerData.levels == 104,
|
|
|
- bottom5: centerData.levels == 201,
|
|
|
- }"
|
|
|
- >
|
|
|
+ <div class="bottom" :class="{
|
|
|
+ bottom1: centerData.levels == 101 || centerData.levels == 0,
|
|
|
+ bottom2: centerData.levels == 102,
|
|
|
+ bottom3: centerData.levels == 103,
|
|
|
+ bottom4: centerData.levels == 104,
|
|
|
+ bottom5: centerData.levels == 201,
|
|
|
+ }">
|
|
|
<div class="animation1">
|
|
|
<div class="ball"></div>
|
|
|
- <svg xmlns="http://www.w3.org/2000/svg" width="375.334" height="77.559" viewBox="0 0 375.334 77.559" style="opacity: 0.5">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" width="375.334" height="77.559" viewBox="0 0 375.334 77.559"
|
|
|
+ style="opacity: 0.5">
|
|
|
<g id="组_14135" data-name="组 14135" transform="translate(-755.058 -139.886)">
|
|
|
- <path
|
|
|
- id="椭圆_2595"
|
|
|
- data-name="椭圆 2595"
|
|
|
+ <path id="椭圆_2595" data-name="椭圆 2595"
|
|
|
d="M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z"
|
|
|
- transform="translate(755.808 140.636)"
|
|
|
- fill="#28a6ff"
|
|
|
- opacity="0.7"
|
|
|
- />
|
|
|
+ transform="translate(755.808 140.636)" fill="#28a6ff" opacity="0.7" />
|
|
|
</g>
|
|
|
</svg>
|
|
|
</div>
|
|
|
@@ -137,30 +119,25 @@
|
|
|
<div class="ball1"></div>
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="414.878" height="91.7" viewBox="0 0 414.878 91.7">
|
|
|
<g id="组_14136" data-name="组 14136" transform="translate(-721.822 -158.273)">
|
|
|
- <path
|
|
|
- id="椭圆_2595"
|
|
|
- data-name="椭圆 2595"
|
|
|
+ <path id="椭圆_2595" data-name="椭圆 2595"
|
|
|
d="M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z"
|
|
|
- transform="translate(722.572 159.023)"
|
|
|
- fill="#3dd8ff"
|
|
|
- opacity="0.5"
|
|
|
- />
|
|
|
+ transform="translate(722.572 159.023)" fill="#3dd8ff" opacity="0.5" />
|
|
|
</g>
|
|
|
</svg>
|
|
|
</div>
|
|
|
<div class="text-box">
|
|
|
<div class="text1">{{
|
|
|
centerData.levels == 101
|
|
|
- ? '正常'
|
|
|
- : centerData.levels == 102
|
|
|
+ ? '较低风险'
|
|
|
+ : centerData.levels == 102
|
|
|
? '低风险'
|
|
|
: centerData.levels == 103
|
|
|
- ? '中风险'
|
|
|
- : centerData.levels == 104
|
|
|
- ? '高风险'
|
|
|
- : centerData.levels == 201
|
|
|
- ? '报警'
|
|
|
- : '--'
|
|
|
+ ? '中风险'
|
|
|
+ : centerData.levels == 104
|
|
|
+ ? '高风险'
|
|
|
+ : centerData.levels == 201
|
|
|
+ ? '报警'
|
|
|
+ : centerData.levels == 0 ? '正常' : '--'
|
|
|
}}</div>
|
|
|
<div class="text2">风险分析</div>
|
|
|
</div>
|
|
|
@@ -174,7 +151,7 @@
|
|
|
</div>
|
|
|
<div class="item-monitor-box">
|
|
|
<span class="title">火灾监测</span>
|
|
|
- <span :class="centerData.fire=='正常' ? 'value' : 'value1'">{{ centerData.fire }}</span>
|
|
|
+ <span :class="centerData.fire == '正常' ? 'value' : 'value1'">{{ centerData.fire }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item item2">
|
|
|
@@ -183,7 +160,7 @@
|
|
|
</div>
|
|
|
<div class="item-monitor-box">
|
|
|
<span class="title">设备监测</span>
|
|
|
- <span :class="centerData.sb=='正常' ? 'value' : 'value1'">{{ centerData.sb }}</span>
|
|
|
+ <span :class="centerData.sb == '正常' ? 'value' : 'value1'">{{ centerData.sb }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item item3">
|
|
|
@@ -192,7 +169,7 @@
|
|
|
</div>
|
|
|
<div class="item-monitor-box">
|
|
|
<span class="title">瓦斯监测</span>
|
|
|
- <span :class="centerData.ws=='正常' ? 'value' : 'value1'">{{ centerData.ws }}</span>
|
|
|
+ <span :class="centerData.ws == '正常' ? 'value' : 'value1'">{{ centerData.ws }}</span>
|
|
|
<div class="">
|
|
|
<span class="title">矿井瓦斯鉴定等级监测</span>
|
|
|
<span class="value">低瓦斯</span>
|
|
|
@@ -205,7 +182,7 @@
|
|
|
</div>
|
|
|
<div class="item-monitor-box">
|
|
|
<span class="title">粉尘监测</span>
|
|
|
- <span :class="centerData.fc=='正常' ? 'value' : 'value1'">{{ centerData.fc }}</span>
|
|
|
+ <span :class="centerData.fc == '正常' ? 'value' : 'value1'">{{ centerData.fc }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="item item5">
|
|
|
@@ -214,7 +191,7 @@
|
|
|
</div>
|
|
|
<div class="item-monitor-box">
|
|
|
<span class="title">通风监测</span>
|
|
|
- <span :class="centerData.tf=='正常' ? 'value' : 'value1'">{{ centerData.tf }}</span>
|
|
|
+ <span :class="centerData.tf == '正常' ? 'value' : 'value1'">{{ centerData.tf }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -227,13 +204,13 @@
|
|
|
<div class="icon"></div>
|
|
|
<div class="data-box" v-for="(item, index) in fireMonitor1" :key="index">
|
|
|
<div :class="{
|
|
|
- 'value1': item.level==0 ,
|
|
|
- 'value2': item.level==101 ,
|
|
|
- 'value3': item.level==102 ,
|
|
|
- 'value4': item.level==103,
|
|
|
- 'value5': item.level==104,
|
|
|
- 'value6': item.level==201,
|
|
|
- 'value': item.level!=0 && item.level!=101 && item.level!=102 && item.level!=103 && item.level!=104 && item.level!=201,
|
|
|
+ 'value1': item.level == 0,
|
|
|
+ 'value2': item.level == 101,
|
|
|
+ 'value3': item.level == 102,
|
|
|
+ 'value4': item.level == 103,
|
|
|
+ 'value5': item.level == 104,
|
|
|
+ 'value6': item.level == 201,
|
|
|
+ 'value': item.level != 0 && item.level != 101 && item.level != 102 && item.level != 103 && item.level != 104 && item.level != 201,
|
|
|
}">{{ item.value }} </div>
|
|
|
<div class="title">{{ item.title }}</div>
|
|
|
</div>
|
|
|
@@ -242,13 +219,13 @@
|
|
|
<div class="icon"></div>
|
|
|
<div class="data-box" v-for="(item, index) in fireMonitor" :key="index">
|
|
|
<div :class="{
|
|
|
- 'value1': item.level==0 ,
|
|
|
- 'value2': item.level==101 ,
|
|
|
- 'value3': item.level==102 ,
|
|
|
- 'value4': item.level==103,
|
|
|
- 'value5': item.level==104,
|
|
|
- 'value6': item.level==201,
|
|
|
- 'value': item.level!=0 && item.level!=101 && item.level!=102 && item.level!=103 && item.level!=104 && item.level!=201,
|
|
|
+ 'value1': item.level == 0,
|
|
|
+ 'value2': item.level == 101,
|
|
|
+ 'value3': item.level == 102,
|
|
|
+ 'value4': item.level == 103,
|
|
|
+ 'value5': item.level == 104,
|
|
|
+ 'value6': item.level == 201,
|
|
|
+ 'value': item.level != 0 && item.level != 101 && item.level != 102 && item.level != 103 && item.level != 104 && item.level != 201,
|
|
|
}"> {{ item.value }} </div>
|
|
|
<div class="title">{{ item.title }}</div>
|
|
|
</div>
|
|
|
@@ -271,15 +248,8 @@
|
|
|
</div>
|
|
|
</div> -->
|
|
|
|
|
|
- <BarSingle
|
|
|
- :xAxisData="xAxisData"
|
|
|
- :dataSource="dustData.levels"
|
|
|
- height="332px"
|
|
|
- :chartsColumns="chartsColumns"
|
|
|
- :option="option"
|
|
|
- :color="colors"
|
|
|
- :fontColor="fontColor"
|
|
|
- />
|
|
|
+ <BarSingle :xAxisData="xAxisData" :dataSource="dustData.levels" height="332px" :chartsColumns="chartsColumns"
|
|
|
+ :option="option" :color="colors" :fontColor="fontColor" />
|
|
|
</template>
|
|
|
</ventBox1>
|
|
|
|
|
|
@@ -318,1036 +288,1165 @@
|
|
|
</ventBox1>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <DetailModal v-if="isShowDialog" v-model:visible="modalVisible" :monitor-data="dataSource" @register="register" @close="hideModal" />
|
|
|
+ <DetailModal v-if="isShowDialog" v-model:visible="modalVisible" :monitor-data="dataSource" @register="register"
|
|
|
+ @close="hideModal" />
|
|
|
<!-- 火灾监测弹框 -->
|
|
|
- <DetailModalFire v-else v-model:visible="modalVisible" @register="register" :moduleName="moduleName" @close="hideModal" />
|
|
|
+ <DetailModalFire v-else v-model:visible="modalVisible" @register="register" :moduleName="moduleName"
|
|
|
+ @close="hideModal" />
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { ref, onMounted, onUnmounted, reactive } from 'vue';
|
|
|
- import customHeader from '/@/views/vent/comment/components/customHeader.vue';
|
|
|
- import DetailModal from './DetailModal.vue';
|
|
|
- import DetailModalFire from './DetailModalFire.vue'; //火灾监测弹窗
|
|
|
- import { warningList, getTotalList } from './alarm.api';
|
|
|
- import {
|
|
|
- iconsMonitor,
|
|
|
- chartsColumns,
|
|
|
- xAxisData,
|
|
|
- option,
|
|
|
- colors,
|
|
|
- fontColor,
|
|
|
- fireMonitor,
|
|
|
- fireMonitor1,
|
|
|
- } from './alarm.data';
|
|
|
- import ventBox1 from '/@/components/vent/ventBox1.vue';
|
|
|
- import BarSingle from '../../../../components/chart/BarSingle.vue';
|
|
|
- import { rainBg } from '/@/utils/ui.js';
|
|
|
- import { useModal } from '/@/components/Modal';
|
|
|
-
|
|
|
- let isShowDialog = ref(true); //切换弹窗显示
|
|
|
- let moduleName = ref<any>(''); //火灾、粉尘、瓦斯模块名
|
|
|
- const alarmCounts = ref();
|
|
|
- const dataSource = ref([]);
|
|
|
- const modalVisible = ref(false);
|
|
|
-
|
|
|
- const resetScroll = (e: Event) => {
|
|
|
- if (e.target && e.target) (e.target as Element).scrollTop = 0;
|
|
|
- };
|
|
|
- let windData = reactive({
|
|
|
- levels: {},
|
|
|
- jf: 0,
|
|
|
- hf: 0,
|
|
|
- xf: 0,
|
|
|
- }); //通风监测数据
|
|
|
- let dustData = reactive({
|
|
|
- //粉尘监测数据
|
|
|
- levels: {},
|
|
|
- });
|
|
|
- let centerData = reactive({
|
|
|
- fire: '',
|
|
|
- tf: '',
|
|
|
- ws: '',
|
|
|
- sb: '',
|
|
|
- fc: '',
|
|
|
- levels: 0,
|
|
|
- });
|
|
|
-//瓦斯
|
|
|
- let gasMonitor = reactive<any[]>([]);
|
|
|
- let gasData={
|
|
|
- sums:0,
|
|
|
- sums1:0,
|
|
|
- }
|
|
|
- const [register, { openModal }] = useModal();
|
|
|
+import { ref, onMounted, onUnmounted, reactive } from 'vue';
|
|
|
+import customHeader from '/@/views/vent/comment/components/customHeader.vue';
|
|
|
+import DetailModal from './DetailModal.vue';
|
|
|
+import DetailModalFire from './DetailModalFire.vue'; //火灾监测弹窗
|
|
|
+import { warningList, getTotalList } from './alarm.api';
|
|
|
+import {
|
|
|
+ iconsMonitor,
|
|
|
+ chartsColumns,
|
|
|
+ xAxisData,
|
|
|
+ option,
|
|
|
+ colors,
|
|
|
+ fontColor,
|
|
|
+ fireMonitor,
|
|
|
+ fireMonitor1,
|
|
|
+} from './alarm.data';
|
|
|
+import ventBox1 from '/@/components/vent/ventBox1.vue';
|
|
|
+import BarSingle from '../../../../components/chart/BarSingle.vue';
|
|
|
+import { rainBg } from '/@/utils/ui.js';
|
|
|
+import { useModal } from '/@/components/Modal';
|
|
|
|
|
|
- function showModal(data) {
|
|
|
- isShowDialog.value =data == 'sbyj' ? true : false;
|
|
|
- moduleName.value = data;
|
|
|
- modalVisible.value = true;
|
|
|
- openModal();
|
|
|
- }
|
|
|
+let isShowDialog = ref(true); //切换弹窗显示
|
|
|
+let moduleName = ref<any>(''); //火灾、粉尘、瓦斯模块名
|
|
|
+const alarmCounts = ref();
|
|
|
+const dataSource = ref([]);
|
|
|
+const modalVisible = ref(false);
|
|
|
|
|
|
- function hideModal() {
|
|
|
- modalVisible.value = false;
|
|
|
- }
|
|
|
+const resetScroll = (e: Event) => {
|
|
|
+ if (e.target && e.target) (e.target as Element).scrollTop = 0;
|
|
|
+};
|
|
|
+let windData = reactive({
|
|
|
+ levels: {},
|
|
|
+ jf: 0,
|
|
|
+ hf: 0,
|
|
|
+ xf: 0,
|
|
|
+}); //通风监测数据
|
|
|
+let dustData = reactive({
|
|
|
+ //粉尘监测数据
|
|
|
+ levels: {},
|
|
|
+});
|
|
|
+let centerData = reactive({
|
|
|
+ fire: '',
|
|
|
+ tf: '',
|
|
|
+ ws: '',
|
|
|
+ sb: '',
|
|
|
+ fc: '',
|
|
|
+ levels: 0,
|
|
|
+});
|
|
|
+//瓦斯
|
|
|
+let gasMonitor = reactive<any[]>([]);
|
|
|
+let gasData = {
|
|
|
+ sums: 0,
|
|
|
+ sums1: 0,
|
|
|
+}
|
|
|
+const [register, { openModal }] = useModal();
|
|
|
|
|
|
- // https获取监测数据
|
|
|
- let timer: null | NodeJS.Timeout = null;
|
|
|
- function getMonitor(flag = false) {
|
|
|
- if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
- timer = setTimeout(
|
|
|
- async () => {
|
|
|
- await getDataSource();
|
|
|
- await getList();
|
|
|
- if (timer) {
|
|
|
- timer = null;
|
|
|
- }
|
|
|
- getMonitor();
|
|
|
- },
|
|
|
- flag ? 0 : 1000
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
+function showModal(data) {
|
|
|
+ isShowDialog.value = data == 'sbyj' ? true : false;
|
|
|
+ moduleName.value = data;
|
|
|
+ modalVisible.value = true;
|
|
|
+ openModal();
|
|
|
+}
|
|
|
|
|
|
- async function getDataSource() {
|
|
|
- const res = await warningList({ isok: 0 });
|
|
|
- dataSource.value = res.list || [];
|
|
|
- // if(dataSource.value.length > 0){
|
|
|
- // dataSource.value.map((data: any) => {
|
|
|
- // const readData = data.readData;
|
|
|
- // data = Object.assign(data, readData);
|
|
|
- // return data;
|
|
|
- // });
|
|
|
- // }
|
|
|
- }
|
|
|
+function hideModal() {
|
|
|
+ modalVisible.value = false;
|
|
|
+}
|
|
|
|
|
|
- // 获取预警数据
|
|
|
- async function getList() {
|
|
|
- const res = await getTotalList({});
|
|
|
- console.log(res, '预警数据--------------');
|
|
|
- let data = [];
|
|
|
- windData.levels = res.info.sysInfo.ventS.levels;
|
|
|
- windData.jf = res.ventInfo.zongfengliang;
|
|
|
- windData.hf = res.ventInfo.zonghuifeng;
|
|
|
- windData.xf = res.ventInfo.xufengliang;
|
|
|
- dustData.levels = res.info.sysInfo.dustS.levels;
|
|
|
- centerData.fire = res.info.sysInfo.fireS.status;
|
|
|
- centerData.tf = res.info.sysInfo.ventS.status;
|
|
|
- centerData.ws = res.info.sysInfo.gasS.status;
|
|
|
- centerData.sb = res.info.sysInfo.synthesizeS.status;
|
|
|
- centerData.fc = res.info.sysInfo.dustS.status;
|
|
|
- Object.keys(res.info.sysInfo).forEach((v) => {
|
|
|
- if(res.info.sysInfo[v].maxLevel){
|
|
|
- data.push(res.info.sysInfo[v].maxLevel);
|
|
|
- }else {
|
|
|
- data.push(0);
|
|
|
- }
|
|
|
- });
|
|
|
- data = data.sort((a, b) => b - a);
|
|
|
- centerData.levels = data[0];
|
|
|
- Object.keys(iconsMonitor).forEach((el) => {
|
|
|
- if(res.info.devicekindInfo[el]){
|
|
|
- iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel ;
|
|
|
- }
|
|
|
- });
|
|
|
- fireMonitor[0].value = res.info.sysInfo.fireS.summaryInfo.external.temperature.value;
|
|
|
- fireMonitor[0].level = res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel;
|
|
|
- fireMonitor[1].value = res.info.sysInfo.fireS.summaryInfo.external.coval.value;
|
|
|
- fireMonitor[1].level = res.info.sysInfo.fireS.summaryInfo.external.coval.maxlevel;
|
|
|
- fireMonitor[2].value = res.info.sysInfo.fireS.summaryInfo.external.chval.value;
|
|
|
- fireMonitor[2].level = res.info.sysInfo.fireS.summaryInfo.external.chval.maxlevel;
|
|
|
- fireMonitor[3].value = res.info.sysInfo.fireS.summaryInfo.external.ch2val.value;
|
|
|
- fireMonitor[3].level = res.info.sysInfo.fireS.summaryInfo.external.ch2val.maxlevel;
|
|
|
- fireMonitor[4].value = res.info.sysInfo.fireS.summaryInfo.external.co2val.value;
|
|
|
- fireMonitor[4].level = res.info.sysInfo.fireS.summaryInfo.external.co2val.maxlevel;
|
|
|
- fireMonitor[5].value = res.info.sysInfo.fireS.summaryInfo.external.o2val.value;
|
|
|
- fireMonitor[5].level = res.info.sysInfo.fireS.summaryInfo.external.o2val.maxlevel;
|
|
|
- console.log(fireMonitor,'fireMonitor---------------')
|
|
|
-
|
|
|
- fireMonitor1[0].value = res.info.sysInfo.fireS.summaryInfo.internal.coval.value;
|
|
|
- fireMonitor1[0].level = res.info.sysInfo.fireS.summaryInfo.internal.coval.maxlevel;
|
|
|
- fireMonitor1[1].value = res.info.sysInfo.fireS.summaryInfo.internal.chval.value;
|
|
|
- fireMonitor1[1].level = res.info.sysInfo.fireS.summaryInfo.internal.chval.maxlevel;
|
|
|
- fireMonitor1[2].value = res.info.sysInfo.fireS.summaryInfo.internal.ch2val.value;
|
|
|
- fireMonitor1[2].level = res.info.sysInfo.fireS.summaryInfo.internal.ch2val.maxlevel;
|
|
|
- fireMonitor1[3].value = res.info.sysInfo.fireS.summaryInfo.internal.co2val.value;
|
|
|
- fireMonitor1[3].level = res.info.sysInfo.fireS.summaryInfo.internal.co2val.maxlevel;
|
|
|
- fireMonitor1[4].value = res.info.sysInfo.fireS.summaryInfo.internal.o2val.value;
|
|
|
- fireMonitor1[4].level = res.info.sysInfo.fireS.summaryInfo.internal.o2val.maxlevel;
|
|
|
- console.log(fireMonitor1,'fireMonitor1------')
|
|
|
- gasMonitor.length=0
|
|
|
- gasData.sums=0
|
|
|
- gasData.sums1=0
|
|
|
- res.info.sysInfo.gasS.devices.forEach(el=>{
|
|
|
- gasData.sums+=el.gasNumber
|
|
|
- gasData.sums1+=el.pumpNumber
|
|
|
- gasMonitor.push({label:el.systemname,value:el.gasNumber,value1:el.pumpNumber})
|
|
|
- })
|
|
|
+// https获取监测数据
|
|
|
+let timer: null | NodeJS.Timeout = null;
|
|
|
+function getMonitor(flag = false) {
|
|
|
+ if (Object.prototype.toString.call(timer) === '[object Null]') {
|
|
|
+ timer = setTimeout(
|
|
|
+ async () => {
|
|
|
+ await getDataSource();
|
|
|
+ await getList();
|
|
|
+ if (timer) {
|
|
|
+ timer = null;
|
|
|
+ }
|
|
|
+ getMonitor();
|
|
|
+ },
|
|
|
+ flag ? 0 : 1000
|
|
|
+ );
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
- onMounted(async () => {
|
|
|
- getMonitor(true);
|
|
|
- rainBg('rain', 'animation-box');
|
|
|
- });
|
|
|
+async function getDataSource() {
|
|
|
+ const res = await warningList({ isok: 0 });
|
|
|
+ dataSource.value = res.list || [];
|
|
|
+ // if(dataSource.value.length > 0){
|
|
|
+ // dataSource.value.map((data: any) => {
|
|
|
+ // const readData = data.readData;
|
|
|
+ // data = Object.assign(data, readData);
|
|
|
+ // return data;
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+}
|
|
|
|
|
|
- onUnmounted(() => {
|
|
|
- if (timer) {
|
|
|
- clearTimeout(timer);
|
|
|
- timer = undefined;
|
|
|
+// 获取预警数据
|
|
|
+async function getList() {
|
|
|
+ const res = await getTotalList({});
|
|
|
+ console.log(res, '预警数据--------------');
|
|
|
+ let data = [];
|
|
|
+ windData.levels = res.info.sysInfo.ventS.levels;
|
|
|
+ windData.jf = res.ventInfo.zongfengliang;
|
|
|
+ windData.hf = res.ventInfo.zonghuifeng;
|
|
|
+ windData.xf = res.ventInfo.xufengliang;
|
|
|
+ dustData.levels = res.info.sysInfo.dustS.levels;
|
|
|
+ centerData.fire = res.info.sysInfo.fireS.status;
|
|
|
+ centerData.tf = res.info.sysInfo.ventS.status;
|
|
|
+ centerData.ws = res.info.sysInfo.gasS.status;
|
|
|
+ centerData.sb = res.info.sysInfo.synthesizeS.status;
|
|
|
+ centerData.fc = res.info.sysInfo.dustS.status;
|
|
|
+ Object.keys(res.info.sysInfo).forEach((v) => {
|
|
|
+ if (res.info.sysInfo[v].maxLevel) {
|
|
|
+ data.push(res.info.sysInfo[v].maxLevel);
|
|
|
+ } else {
|
|
|
+ data.push(0);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ data = data.sort((a, b) => b - a);
|
|
|
+ centerData.levels = data[0];
|
|
|
+ Object.keys(iconsMonitor).forEach((el) => {
|
|
|
+ if (res.info.devicekindInfo[el]) {
|
|
|
+ iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel;
|
|
|
}
|
|
|
});
|
|
|
+ fireMonitor[0].value = res.info.sysInfo.fireS.summaryInfo.external.temperature.value;
|
|
|
+ fireMonitor[0].level = res.info.sysInfo.fireS.summaryInfo.external.temperature.maxlevel;
|
|
|
+ fireMonitor[1].value = res.info.sysInfo.fireS.summaryInfo.external.coval.value;
|
|
|
+ fireMonitor[1].level = res.info.sysInfo.fireS.summaryInfo.external.coval.maxlevel;
|
|
|
+ fireMonitor[2].value = res.info.sysInfo.fireS.summaryInfo.external.chval.value;
|
|
|
+ fireMonitor[2].level = res.info.sysInfo.fireS.summaryInfo.external.chval.maxlevel;
|
|
|
+ fireMonitor[3].value = res.info.sysInfo.fireS.summaryInfo.external.ch2val.value;
|
|
|
+ fireMonitor[3].level = res.info.sysInfo.fireS.summaryInfo.external.ch2val.maxlevel;
|
|
|
+ fireMonitor[4].value = res.info.sysInfo.fireS.summaryInfo.external.co2val.value;
|
|
|
+ fireMonitor[4].level = res.info.sysInfo.fireS.summaryInfo.external.co2val.maxlevel;
|
|
|
+ fireMonitor[5].value = res.info.sysInfo.fireS.summaryInfo.external.o2val.value;
|
|
|
+ fireMonitor[5].level = res.info.sysInfo.fireS.summaryInfo.external.o2val.maxlevel;
|
|
|
+ console.log(fireMonitor, 'fireMonitor---------------')
|
|
|
+
|
|
|
+ fireMonitor1[0].value = res.info.sysInfo.fireS.summaryInfo.internal.coval.value;
|
|
|
+ fireMonitor1[0].level = res.info.sysInfo.fireS.summaryInfo.internal.coval.maxlevel;
|
|
|
+ fireMonitor1[1].value = res.info.sysInfo.fireS.summaryInfo.internal.chval.value;
|
|
|
+ fireMonitor1[1].level = res.info.sysInfo.fireS.summaryInfo.internal.chval.maxlevel;
|
|
|
+ fireMonitor1[2].value = res.info.sysInfo.fireS.summaryInfo.internal.ch2val.value;
|
|
|
+ fireMonitor1[2].level = res.info.sysInfo.fireS.summaryInfo.internal.ch2val.maxlevel;
|
|
|
+ fireMonitor1[3].value = res.info.sysInfo.fireS.summaryInfo.internal.co2val.value;
|
|
|
+ fireMonitor1[3].level = res.info.sysInfo.fireS.summaryInfo.internal.co2val.maxlevel;
|
|
|
+ fireMonitor1[4].value = res.info.sysInfo.fireS.summaryInfo.internal.o2val.value;
|
|
|
+ fireMonitor1[4].level = res.info.sysInfo.fireS.summaryInfo.internal.o2val.maxlevel;
|
|
|
+ console.log(fireMonitor1, 'fireMonitor1------')
|
|
|
+ gasMonitor.length = 0
|
|
|
+ gasData.sums = 0
|
|
|
+ gasData.sums1 = 0
|
|
|
+ res.info.sysInfo.gasS.devices.forEach(el => {
|
|
|
+ gasData.sums += el.gasNumber
|
|
|
+ gasData.sums1 += el.pumpNumber
|
|
|
+ gasMonitor.push({ label: el.systemname, value: el.gasNumber, value1: el.pumpNumber })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ getMonitor(true);
|
|
|
+ rainBg('rain', 'animation-box');
|
|
|
+});
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ if (timer) {
|
|
|
+ clearTimeout(timer);
|
|
|
+ timer = undefined;
|
|
|
+ }
|
|
|
+});
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
- @import '/@/design/vent/color.less';
|
|
|
- @a : 370px; // 椭圆x轴半径(长半径)
|
|
|
- @b : 107px; // 椭圆y轴半径(短半径)
|
|
|
- @s : 40; // 坐标点的数目(数目越大，动画越精细)
|
|
|
+@import '/@/design/vent/color.less';
|
|
|
+@a : 370px; // 椭圆x轴半径(长半径)
|
|
|
+@b : 107px; // 椭圆y轴半径(短半径)
|
|
|
+@s : 40; // 坐标点的数目(数目越大，动画越精细)
|
|
|
+
|
|
|
+@bg: #e6e2df;
|
|
|
|
|
|
- @bg: #e6e2df;
|
|
|
+.loop(@index) when (@index < @s + 1) {
|
|
|
+ .loop((@index + 1));
|
|
|
+ @keyframeSel: @index * 100% ./ @s;
|
|
|
|
|
|
- .loop(@index) when (@index < @s + 1) {
|
|
|
- .loop((@index + 1));
|
|
|
- @keyframeSel: @index * 100% ./ @s;
|
|
|
- @{keyframeSel}{ transform: translate(@a * (cos(360deg ./ @s * @index)), @b * (sin(360deg ./ @s * @index)));}
|
|
|
+ @{keyframeSel} {
|
|
|
+ transform: translate(@a * (cos(360deg ./ @s * @index)), @b * (sin(360deg ./ @s * @index)));
|
|
|
}
|
|
|
- .sensor-container {
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 86px);
|
|
|
- display: flex;
|
|
|
- position: relative;
|
|
|
- top: 78px;
|
|
|
+}
|
|
|
|
|
|
- .lr{
|
|
|
- width: 650px;
|
|
|
- height: 100%;
|
|
|
+.sensor-container {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 86px);
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ top: 78px;
|
|
|
|
|
|
- // background-color: #ffffff10;
|
|
|
- }
|
|
|
- .left-box{
|
|
|
- .vent-param {
|
|
|
- width: 100%;
|
|
|
- margin-top: 10px;
|
|
|
- .light-group {
|
|
|
+ .lr {
|
|
|
+ width: 650px;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ // background-color: #ffffff10;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left-box {
|
|
|
+ .vent-param {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .light-group {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .param-item {
|
|
|
+ width: 150px;
|
|
|
display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- position: relative;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: reactive;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: -5px;
|
|
|
+ }
|
|
|
|
|
|
- .param-item {
|
|
|
- width: 150px;
|
|
|
+ .param {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- position: reactive;
|
|
|
|
|
|
- .icon {
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- top: -5px;
|
|
|
+ .param-icon {
|
|
|
+ width: 121px;
|
|
|
+ height: 69px;
|
|
|
+ background: url('/@/assets/images/vent/vent-param-bg.png');
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ top: -20px;
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .param-title {
|
|
|
+ position: relative;
|
|
|
+ top: -4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .param-unit {
|
|
|
+ position: relative;
|
|
|
+ top: -2px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .param {
|
|
|
+ .param-val-box {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
+ position: relative;
|
|
|
+ top: -20px;
|
|
|
|
|
|
- .param-icon {
|
|
|
- width: 121px;
|
|
|
- height: 69px;
|
|
|
- background: url('/@/assets/images/vent/vent-param-bg.png');
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ .param-val-icon {
|
|
|
+ width: 2px;
|
|
|
+ height: 15px;
|
|
|
+ background: #00d8ff;
|
|
|
position: relative;
|
|
|
- top: -20px;
|
|
|
- margin-top: 10px;
|
|
|
|
|
|
- .param-title {
|
|
|
- position: relative;
|
|
|
- top: -4px;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 3px;
|
|
|
+ background: #00d8ff;
|
|
|
+ bottom: -2px;
|
|
|
+ left: -2px;
|
|
|
}
|
|
|
|
|
|
- .param-unit {
|
|
|
- position: relative;
|
|
|
- top: -2px;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
- .param-val-box {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+ .param-val {
|
|
|
position: relative;
|
|
|
- top: -20px;
|
|
|
-
|
|
|
- .param-val-icon {
|
|
|
- width: 2px;
|
|
|
- height: 15px;
|
|
|
- background: #00d8ff;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
- border-radius: 3px;
|
|
|
- background: #00d8ff;
|
|
|
- bottom: -2px;
|
|
|
- left: -2px;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ // color: #20dbfd;
|
|
|
+ text-shadow: 0 0 25px #00d8ff;
|
|
|
+ font-size: 13px;
|
|
|
+ border: 1px solid #40B7F3;
|
|
|
+ padding: 5px 30px 2px 30px;
|
|
|
+ top: 2px;
|
|
|
|
|
|
- .param-val {
|
|
|
- position: relative;
|
|
|
- font-family: 'douyuFont';
|
|
|
- // color: #20dbfd;
|
|
|
- text-shadow: 0 0 25px #00d8ff;
|
|
|
- font-size: 13px;
|
|
|
- border: 1px solid #40B7F3;
|
|
|
- padding: 5px 30px 2px 30px;
|
|
|
+ &::after {
|
|
|
+ width: calc(100% - 4px);
|
|
|
+ height: calc(100% - 4px);
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
top: 2px;
|
|
|
-
|
|
|
- &::after {
|
|
|
- width: calc(100% - 4px);
|
|
|
- height: calc(100% - 4px);
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 2px;
|
|
|
- left: 2px;
|
|
|
- display: block;
|
|
|
- border: 1px solid #006EA6;
|
|
|
- }
|
|
|
+ left: 2px;
|
|
|
+ display: block;
|
|
|
+ border: 1px solid #006EA6;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .icons-box{
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- max-height: 365px;
|
|
|
- overflow-y: hidden;
|
|
|
- // align-items: start ;
|
|
|
- &:hover {
|
|
|
- overflow-y: auto;
|
|
|
- overflow-x: auto;
|
|
|
- & > .icon-item{
|
|
|
- animation-play-state: paused;
|
|
|
- animation: move1 2s linear;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icons-box {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ max-height: 365px;
|
|
|
+ overflow-y: hidden;
|
|
|
+
|
|
|
+ // align-items: start ;
|
|
|
+ &:hover {
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: auto;
|
|
|
+
|
|
|
+ &>.icon-item {
|
|
|
+ animation-play-state: paused;
|
|
|
+ animation: move1 2s linear;
|
|
|
}
|
|
|
- .icon-item{
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- padding: 3px;
|
|
|
- animation: move 10s linear infinite;
|
|
|
- &:nth-child(even){
|
|
|
- padding-right: 0px;
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- .level-text{
|
|
|
- position: absolute;
|
|
|
- top: 51px;
|
|
|
- right: 25px;
|
|
|
- color: #fff;
|
|
|
- font-family: 'douyuFont';
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- .level-text-0{
|
|
|
- color: rgb(145, 230, 9);
|
|
|
- text-shadow: 2px 2px 4px #001c22;
|
|
|
- }
|
|
|
- .level-text-1{
|
|
|
- color: rgb(0, 242, 255);
|
|
|
- text-shadow: 2px 2px 4px #001c22;
|
|
|
- }
|
|
|
- .level-text-2{
|
|
|
- color: #ffff35;
|
|
|
- text-shadow: 2px 2px 4px #313100;
|
|
|
- }
|
|
|
- .level-text-3{
|
|
|
- color: #ffbe69;
|
|
|
- text-shadow: 2px 2px 4px #271600;
|
|
|
- }
|
|
|
- .level-text-4{
|
|
|
- color: #ff6f00;
|
|
|
- // color: #09caff;
|
|
|
- text-shadow: 2px 2px 4px #060200;
|
|
|
- }
|
|
|
- .level-text-5{
|
|
|
- color: #ff0000;
|
|
|
- text-shadow: 2px 2px 4px #200000;
|
|
|
- }
|
|
|
- .level-text-6{
|
|
|
- color: #bbb;
|
|
|
- text-shadow: 2px 2px 4px #001c22;
|
|
|
- }
|
|
|
- img{
|
|
|
- width: 225px;
|
|
|
- height: 79px;
|
|
|
- }
|
|
|
+ .icon-item {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 3px;
|
|
|
+ animation: move 10s linear infinite;
|
|
|
+
|
|
|
+ &:nth-child(even) {
|
|
|
+ padding-right: 0px;
|
|
|
}
|
|
|
- .wrapper {
|
|
|
+
|
|
|
+ .level-text {
|
|
|
position: absolute;
|
|
|
- top: 48px;
|
|
|
- left: 82px;
|
|
|
- color: #ffffffe0;
|
|
|
- font-size: 13px;
|
|
|
- text-align: center;
|
|
|
- letter-spacing: 1px;
|
|
|
+ top: 51px;
|
|
|
+ right: 25px;
|
|
|
+ color: #fff;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
- }
|
|
|
- @keyframes move {
|
|
|
- 0% {
|
|
|
- transform: translateY(0px);
|
|
|
+
|
|
|
+ .level-text-0 {
|
|
|
+ color: rgb(145, 230, 9);
|
|
|
+ text-shadow: 2px 2px 4px #001c22;
|
|
|
}
|
|
|
- 100% {
|
|
|
- transform: translateY(-269px);
|
|
|
+
|
|
|
+ .level-text-1 {
|
|
|
+ color: rgb(0, 242, 255);
|
|
|
+ text-shadow: 2px 2px 4px #001c22;
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- @keyframes move1 {
|
|
|
- 0% {
|
|
|
- transform: translateY(0px);
|
|
|
+ .level-text-2 {
|
|
|
+ color: #ffff35;
|
|
|
+ text-shadow: 2px 2px 4px #313100;
|
|
|
+ }
|
|
|
+
|
|
|
+ .level-text-3 {
|
|
|
+ color: #ffbe69;
|
|
|
+ text-shadow: 2px 2px 4px #271600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .level-text-4 {
|
|
|
+ color: #ff6f00;
|
|
|
+ // color: #09caff;
|
|
|
+ text-shadow: 2px 2px 4px #060200;
|
|
|
}
|
|
|
+
|
|
|
+ .level-text-5 {
|
|
|
+ color: #ff0000;
|
|
|
+ text-shadow: 2px 2px 4px #200000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .level-text-6 {
|
|
|
+ color: #bbb;
|
|
|
+ text-shadow: 2px 2px 4px #001c22;
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 225px;
|
|
|
+ height: 79px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrapper {
|
|
|
+ position: absolute;
|
|
|
+ top: 48px;
|
|
|
+ left: 82px;
|
|
|
+ color: #ffffffe0;
|
|
|
+ font-size: 13px;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes move {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0px);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateY(-269px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes move1 {
|
|
|
+ 0% {
|
|
|
+ transform: translateY(0px);
|
|
|
}
|
|
|
}
|
|
|
- .center-box{
|
|
|
- width: calc(100% - 710px);
|
|
|
- // background-color: #ffffff10;
|
|
|
- margin: 0 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-box {
|
|
|
+ width: calc(100% - 710px);
|
|
|
+ // background-color: #ffffff10;
|
|
|
+ margin: 0 8px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .fire-monitor {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- justify-content: flex-end;
|
|
|
- .fire-monitor{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .top {
|
|
|
width: 100%;
|
|
|
- position: relative;
|
|
|
- .top{
|
|
|
- width: 100%;
|
|
|
- height: 35px;
|
|
|
- background: url('/@/assets/images/vent/box-top-bg.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- text-align: center;
|
|
|
- color: #fff;
|
|
|
- padding-top: 6px;
|
|
|
+ height: 35px;
|
|
|
+ background: url('/@/assets/images/vent/box-top-bg.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ padding-top: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ width: calc(100% - 2px);
|
|
|
+ min-height: 50px;
|
|
|
+ padding: 0 10px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #00213236;
|
|
|
+ backdrop-filter: blur(5px);
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: 5px;
|
|
|
+ left: 0;
|
|
|
+ width: 1px;
|
|
|
+ height: calc(100% - 10px);
|
|
|
+ background-image: linear-gradient(#3DF6FF00, #3DF6FF, #3DF6FF00);
|
|
|
}
|
|
|
- .container{
|
|
|
- width: calc(100% - 2px);
|
|
|
- min-height: 50px;
|
|
|
- padding: 0 10px;
|
|
|
- color: #fff;
|
|
|
- background-color: #00213236;
|
|
|
- backdrop-filter: blur(5px);
|
|
|
|
|
|
- &::before{
|
|
|
- content: '';
|
|
|
- display: block;
|
|
|
- position: absolute;
|
|
|
- top: 5px;
|
|
|
- left: 0;
|
|
|
- width: 1px;
|
|
|
- height: calc(100% - 10px);
|
|
|
- background-image: linear-gradient(#3DF6FF00, #3DF6FF, #3DF6FF00);
|
|
|
- }
|
|
|
- &::after{
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 5px;
|
|
|
+ width: 1px;
|
|
|
+ height: calc(100% - 10px);
|
|
|
+ background: linear-gradient(#3DF6FF00, #3DF6FF, #3DF6FF00);
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ height: 130px;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ top: -10px;
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ align-content: center;
|
|
|
+ padding-top: 50px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
content: '';
|
|
|
- display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 150px;
|
|
|
position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 5px;
|
|
|
- width: 1px;
|
|
|
- height: calc(100% - 10px);
|
|
|
- background: linear-gradient(#3DF6FF00, #3DF6FF, #3DF6FF00);
|
|
|
+ top: 0px;
|
|
|
+ background: url('/@/assets/images/vent/fire-bg-top.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
- .item{
|
|
|
- height: 130px;
|
|
|
- width: 100%;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 82px;
|
|
|
+ height: 36px;
|
|
|
+ margin: 0 20px 0 50px;
|
|
|
+ background: url('/@/assets/images/vent/icon-bottom-bg.png');
|
|
|
position: relative;
|
|
|
- top: -10px;
|
|
|
- display: flex;
|
|
|
- // justify-content: space-between;
|
|
|
- align-content: center;
|
|
|
- padding-top: 50px;
|
|
|
- &::before{
|
|
|
- content: '';
|
|
|
- width: 100%;
|
|
|
- height: 150px;
|
|
|
+ top: 30px;
|
|
|
+
|
|
|
+ &::after {
|
|
|
position: absolute;
|
|
|
- top: 0px;
|
|
|
- background: url('/@/assets/images/vent/fire-bg-top.png');
|
|
|
- background-size: 100% 100%;
|
|
|
+ content: '';
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ top: -25px;
|
|
|
+ left: 20px;
|
|
|
+ background: url('/@/assets/images/vent/outer-icon.svg') no-repeat;
|
|
|
}
|
|
|
- .icon{
|
|
|
- width: 82px;
|
|
|
- height: 36px;
|
|
|
- margin: 0 20px 0 50px;
|
|
|
- background: url('/@/assets/images/vent/icon-bottom-bg.png');
|
|
|
- position: relative;
|
|
|
- top: 30px;
|
|
|
- &::after{
|
|
|
- position: absolute;
|
|
|
- content: '';
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- top: -25px;
|
|
|
- left: 20px;
|
|
|
- background: url('/@/assets/images/vent/outer-icon.svg') no-repeat;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-box {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ // margin: 0 10px;
|
|
|
+ width: 118px;
|
|
|
+
|
|
|
+ .value {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #2bdcff;
|
|
|
+ margin-bottom: 5px;
|
|
|
}
|
|
|
- .data-box{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- // margin: 0 10px;
|
|
|
- width: 118px;
|
|
|
- .value{
|
|
|
- font-size: 16px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: #2bdcff;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
- .value1{
|
|
|
- font-size: 16px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- margin-bottom: 5px;
|
|
|
- color: rgb(145, 230, 9);
|
|
|
- }
|
|
|
- .value2{
|
|
|
- font-size: 16px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- margin-bottom: 5px;
|
|
|
- color: rgb(0, 242, 255);
|
|
|
- }
|
|
|
-
|
|
|
- .value3{
|
|
|
- font-size: 16px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- margin-bottom: 5px;
|
|
|
- color: #ffff35;
|
|
|
- }
|
|
|
- .value4{
|
|
|
- font-size: 16px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- margin-bottom: 5px;
|
|
|
- color: #ffbe69;
|
|
|
- }
|
|
|
- .value5{
|
|
|
- font-size: 16px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- margin-bottom: 5px;
|
|
|
- color: #ff6f00;
|
|
|
- }
|
|
|
- .value6{
|
|
|
- font-size: 16px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- margin-bottom: 5px;
|
|
|
- color: #ff0000;
|
|
|
- }
|
|
|
- .title{
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
+
|
|
|
+ .value1 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: rgb(145, 230, 9);
|
|
|
}
|
|
|
- }
|
|
|
- .item1{
|
|
|
- top: -10px;
|
|
|
- &::before{
|
|
|
- transform:matrix(1,0,0,-1,0,0);
|
|
|
+
|
|
|
+ .value2 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: rgb(0, 242, 255);
|
|
|
}
|
|
|
- .icon{
|
|
|
- &::after{
|
|
|
- background: url('/@/assets/images/vent/inner-icon.svg') no-repeat;
|
|
|
- }
|
|
|
+
|
|
|
+ .value3 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #ffff35;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value4 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #ffbe69;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value5 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #ff6f00;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value6 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ margin-bottom: 5px;
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 13px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .bottom{
|
|
|
- width: 100%;
|
|
|
- height: 35px;
|
|
|
- background: url('/@/assets/images/vent/box-bottom-bg.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
+
|
|
|
+ .item1 {
|
|
|
+ top: -10px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ transform: matrix(1, 0, 0, -1, 0, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ &::after {
|
|
|
+ background: url('/@/assets/images/vent/inner-icon.svg') no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- .animation-box{
|
|
|
- height: fit-content;
|
|
|
- flex: 1;
|
|
|
- margin-bottom: 10px;
|
|
|
- background: url('/@/assets/images/vent/alarm/center-bg.png');
|
|
|
- background-size: contain;
|
|
|
- background-position: center;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- top: 45px;
|
|
|
- .rain{
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 35px;
|
|
|
+ background: url('/@/assets/images/vent/box-bottom-bg.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .animation-box {
|
|
|
+ height: fit-content;
|
|
|
+ flex: 1;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background: url('/@/assets/images/vent/alarm/center-bg.png');
|
|
|
+ background-size: contain;
|
|
|
+ background-position: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ top: 45px;
|
|
|
+
|
|
|
+ .rain {
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ width: 528px;
|
|
|
+ height: 395px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ width: 325px;
|
|
|
+ height: 379px;
|
|
|
position: absolute;
|
|
|
+ left: 105px;
|
|
|
+ top: -60px;
|
|
|
+ background: url('/@/assets/images/vent/alarm/warning-bg.png') no-repeat;
|
|
|
}
|
|
|
- .bottom{
|
|
|
- width: 528px;
|
|
|
- height: 395px;
|
|
|
- background-repeat: no-repeat;
|
|
|
+
|
|
|
+ .animation1 {
|
|
|
+ width: 390px;
|
|
|
+ height: 78px;
|
|
|
position: absolute;
|
|
|
+ top: -30px;
|
|
|
+ left: 80px;
|
|
|
z-index: 999;
|
|
|
- &::before{
|
|
|
- content: '';
|
|
|
- width: 325px;
|
|
|
- height: 379px;
|
|
|
- position: absolute;
|
|
|
- left: 105px;
|
|
|
- top: -60px;
|
|
|
- background: url('/@/assets/images/vent/alarm/warning-bg.png') no-repeat;
|
|
|
- }
|
|
|
- .animation1{
|
|
|
- width: 390px;
|
|
|
- height: 78px;
|
|
|
+
|
|
|
+ // animation: rotate3 3s linear infinite;
|
|
|
+ .ball {
|
|
|
position: absolute;
|
|
|
- top: -30px;
|
|
|
- left: 80px;
|
|
|
- z-index: 999;
|
|
|
- // animation: rotate3 3s linear infinite;
|
|
|
- .ball{
|
|
|
- position: absolute;
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);;
|
|
|
- border-radius: 6px;
|
|
|
- background-size: cover;
|
|
|
- offset-path: path('M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z');
|
|
|
- animation: 10s linear 0s infinite alternate ball;
|
|
|
- }
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
|
|
|
+ ;
|
|
|
+ border-radius: 6px;
|
|
|
+ background-size: cover;
|
|
|
+ offset-path: path('M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z');
|
|
|
+ animation: 10s linear 0s infinite alternate ball;
|
|
|
}
|
|
|
- .animation2{
|
|
|
- width: 430px;
|
|
|
- height: 92px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .animation2 {
|
|
|
+ width: 430px;
|
|
|
+ height: 92px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0px;
|
|
|
+ left: 60px;
|
|
|
+ z-index: 999;
|
|
|
+
|
|
|
+ // animation: rotate4 3s linear infinite;
|
|
|
+ .ball1 {
|
|
|
position: absolute;
|
|
|
- top: 0px;
|
|
|
- left: 60px;
|
|
|
- z-index: 999;
|
|
|
- // animation: rotate4 3s linear infinite;
|
|
|
- .ball1{
|
|
|
- position: absolute;
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
- background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);;
|
|
|
- border-radius: 6px;
|
|
|
- background-size: cover;
|
|
|
- offset-path: path('M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z');
|
|
|
- animation: 10s linear 0s infinite alternate ball1;
|
|
|
- }
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
|
|
|
+ ;
|
|
|
+ border-radius: 6px;
|
|
|
+ background-size: cover;
|
|
|
+ offset-path: path('M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z');
|
|
|
+ animation: 10s linear 0s infinite alternate ball1;
|
|
|
}
|
|
|
- .text-box{
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- color: #fff;
|
|
|
- align-items: center;
|
|
|
- margin-top: 90px;
|
|
|
- .text1{
|
|
|
- font-size: 26px;
|
|
|
- font-weight: 600;
|
|
|
- letter-spacing: 2px;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- .text2{
|
|
|
- font-size: 18px;
|
|
|
- color: #ffffffdd;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ color: #fff;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 90px;
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
- .icon-animation{
|
|
|
- width: 178px;
|
|
|
- height: 208px;
|
|
|
- margin: 0 auto;
|
|
|
- top: -130px;
|
|
|
- left: 4px;
|
|
|
- position: relative;
|
|
|
- animation: .5s linear 0s infinite alternate iconMove;
|
|
|
+ .text2 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #ffffffdd;
|
|
|
}
|
|
|
}
|
|
|
- .bottom1{
|
|
|
- background-image: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
|
|
|
- .icon-animation{
|
|
|
- background: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
|
|
|
- }
|
|
|
- .text-box{
|
|
|
- .text1{
|
|
|
- color: #00d8ff;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ width: 178px;
|
|
|
+ height: 208px;
|
|
|
+ margin: 0 auto;
|
|
|
+ top: -130px;
|
|
|
+ left: 4px;
|
|
|
+ position: relative;
|
|
|
+ animation: .5s linear 0s infinite alternate iconMove;
|
|
|
}
|
|
|
- .bottom2{
|
|
|
- background-image: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
|
|
|
- .icon-animation{
|
|
|
- background: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
|
|
|
- }
|
|
|
- .text-box{
|
|
|
- .text1{
|
|
|
- color: #FCFC22;
|
|
|
- }
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom1 {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ background: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
|
|
|
}
|
|
|
- .bottom3{
|
|
|
- background-image: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
|
|
|
- .icon-animation{
|
|
|
- background: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
|
|
|
- }
|
|
|
- .text-box{
|
|
|
- .text1{
|
|
|
- color: #ff7010;
|
|
|
- }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ .text1 {
|
|
|
+ color: #00d8ff;
|
|
|
}
|
|
|
}
|
|
|
- .bottom4{
|
|
|
- background-image: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
|
|
|
- .icon-animation{
|
|
|
- background: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
|
|
|
- }
|
|
|
- .text-box{
|
|
|
- .text1{
|
|
|
- color: #DF4E43;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom2 {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ background: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ .text1 {
|
|
|
+ color: #FCFC22;
|
|
|
}
|
|
|
}
|
|
|
- .bottom5{
|
|
|
- background-image: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
|
|
|
- .icon-animation{
|
|
|
- background: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom3 {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ background: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ .text1 {
|
|
|
+ color: #ff7010;
|
|
|
}
|
|
|
- .text-box{
|
|
|
- .text1{
|
|
|
- color: #ff2313;
|
|
|
- // animation: color-blink 1s infinite;
|
|
|
- }
|
|
|
- // @keyframes color-blink {
|
|
|
- // 0% { color: red; }
|
|
|
- // 50% { color: blue; }
|
|
|
- // 100% { color: red; }
|
|
|
- // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom4 {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
|
|
|
+
|
|
|
+ .icon-animation {
|
|
|
+ background: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ .text1 {
|
|
|
+ color: #DF4E43;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .total-item-monitor-box{
|
|
|
- width: 100%;
|
|
|
- height: 237px;
|
|
|
- position: relative;
|
|
|
- top: 180px;
|
|
|
- left: 265px;
|
|
|
- background: url('/@/assets/images/vent/alarm/bottom1.png') no-repeat;
|
|
|
- background-size: contain;
|
|
|
+ .bottom5 {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
|
|
|
|
|
|
- &::after{
|
|
|
- content: '';
|
|
|
- width: 750px;
|
|
|
- height: 750px;
|
|
|
- position: absolute;
|
|
|
- transform-style: preserve-3d;
|
|
|
- transform: translateX(0%) translateY(0%) rotateX(72deg);
|
|
|
- background: url('/@/assets/images/vent/alarm/bottom.png');
|
|
|
- animation: rotate1 3s linear infinite;
|
|
|
- top: -200px;
|
|
|
- left: -180px;
|
|
|
+ .icon-animation {
|
|
|
+ background: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ .text1 {
|
|
|
+ color: #ff2313;
|
|
|
+ // animation: color-blink 1s infinite;
|
|
|
}
|
|
|
- .item{
|
|
|
- position: absolute;
|
|
|
- // width: 107px;
|
|
|
- // height: 107px;
|
|
|
- // left: 120px;
|
|
|
- // top: 115px;
|
|
|
- // animation: red-ball 10s linear infinite;
|
|
|
- .icon-box{
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
|
|
|
- position: relative;
|
|
|
- z-index: 0;
|
|
|
-
|
|
|
- &::before{
|
|
|
- position: absolute;
|
|
|
- content: '';
|
|
|
- width: 105px;
|
|
|
- height: 68px;
|
|
|
- top: 15px;
|
|
|
- z-index: -1;
|
|
|
- background: url('/@/assets/images/vent/alarm/icon-bg.png') no-repeat;
|
|
|
- }
|
|
|
- &::after{
|
|
|
- position: absolute;
|
|
|
- content: '';
|
|
|
- width: 71px;
|
|
|
- height: 71px;
|
|
|
- top: 26px;
|
|
|
- left: 14px;
|
|
|
- z-index: 1;
|
|
|
- background: url(/src/assets/images/vent/alarm/icon-animation.png) no-repeat;
|
|
|
- transform: translateX(0%) rotateX(70deg);
|
|
|
- animation: rotate2 2s linear infinite;
|
|
|
- }
|
|
|
- .icon{
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: top center;
|
|
|
- position: relative;
|
|
|
- top: 5px;
|
|
|
- }
|
|
|
+ // @keyframes color-blink {
|
|
|
+ // 0% { color: red; }
|
|
|
+ // 50% { color: blue; }
|
|
|
+ // 100% { color: red; }
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .total-item-monitor-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 237px;
|
|
|
+ position: relative;
|
|
|
+ top: 180px;
|
|
|
+ left: 265px;
|
|
|
+ background: url('/@/assets/images/vent/alarm/bottom1.png') no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ width: 750px;
|
|
|
+ height: 750px;
|
|
|
+ position: absolute;
|
|
|
+ transform-style: preserve-3d;
|
|
|
+ transform: translateX(0%) translateY(0%) rotateX(72deg);
|
|
|
+ background: url('/@/assets/images/vent/alarm/bottom.png');
|
|
|
+ animation: rotate1 3s linear infinite;
|
|
|
+ top: -200px;
|
|
|
+ left: -180px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ // width: 107px;
|
|
|
+ // height: 107px;
|
|
|
+ // left: 120px;
|
|
|
+ // top: 115px;
|
|
|
+ // animation: red-ball 10s linear infinite;
|
|
|
+ .icon-box {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 105px;
|
|
|
+ height: 68px;
|
|
|
+ top: 15px;
|
|
|
+ z-index: -1;
|
|
|
+ background: url('/@/assets/images/vent/alarm/icon-bg.png') no-repeat;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 71px;
|
|
|
+ height: 71px;
|
|
|
+ top: 26px;
|
|
|
+ left: 14px;
|
|
|
+ z-index: 1;
|
|
|
+ background: url(/src/assets/images/vent/alarm/icon-animation.png) no-repeat;
|
|
|
+ transform: translateX(0%) rotateX(70deg);
|
|
|
+ animation: rotate2 2s linear infinite;
|
|
|
}
|
|
|
- .item-monitor-box{
|
|
|
- color: #fff;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: top center;
|
|
|
position: relative;
|
|
|
- top: -135px;
|
|
|
- left: -20px;
|
|
|
- font-weight: 600;
|
|
|
- // background: #06020066;
|
|
|
- padding: 5px 20px 8px 20px;
|
|
|
- &::before{
|
|
|
- position: absolute;
|
|
|
- content: '';
|
|
|
- width: 196px;
|
|
|
- height: 48px;
|
|
|
- left: -20px;
|
|
|
- top: -10px;
|
|
|
- background: url('/@/assets/images/vent/alarm/data-bg.png');
|
|
|
- }
|
|
|
- .value{
|
|
|
- color: #2bdcff;
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
- .value1{
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 800;
|
|
|
- margin-top: 6px;
|
|
|
- margin-left: 10px;
|
|
|
- color: #ff0000;
|
|
|
- animation: color-blink 1s infinite;
|
|
|
- }
|
|
|
- @keyframes color-blink {
|
|
|
- 0% { color: red; }
|
|
|
- 50% { color: rgb(198, 0, 0); }
|
|
|
- 100% { color: rgb(255, 18, 18); }
|
|
|
- }
|
|
|
+ top: 5px;
|
|
|
}
|
|
|
}
|
|
|
- .item1{
|
|
|
- top: 230px;
|
|
|
- left: 150px;
|
|
|
- .icon{
|
|
|
- background-image: url('/@/assets/images/vent/alarm/icon-fire.svg');
|
|
|
+
|
|
|
+ .item-monitor-box {
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ top: -135px;
|
|
|
+ left: -20px;
|
|
|
+ font-weight: 600;
|
|
|
+ // background: #06020066;
|
|
|
+ padding: 5px 20px 8px 20px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 196px;
|
|
|
+ height: 48px;
|
|
|
+ left: -20px;
|
|
|
+ top: -10px;
|
|
|
+ background: url('/@/assets/images/vent/alarm/data-bg.png');
|
|
|
}
|
|
|
- }
|
|
|
- .item2{
|
|
|
- top: 185px;
|
|
|
- left: -120px;
|
|
|
- .icon{
|
|
|
- background-image: url('/@/assets/images/vent/alarm/icon-device.svg');
|
|
|
+
|
|
|
+ .value {
|
|
|
+ color: #2bdcff;
|
|
|
+ margin-left: 20px;
|
|
|
}
|
|
|
- }
|
|
|
- .item3{
|
|
|
- top: 185px;
|
|
|
- left: 420px;
|
|
|
- .icon{
|
|
|
- background-image: url('/@/assets/images/vent/alarm/icon-gas.svg') ;
|
|
|
+
|
|
|
+ .value1 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 800;
|
|
|
+ margin-top: 6px;
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #ff0000;
|
|
|
+ animation: color-blink 1s infinite;
|
|
|
}
|
|
|
- .item-monitor-box{
|
|
|
- top: -155px;
|
|
|
- &::before{
|
|
|
- top: 10px;
|
|
|
+
|
|
|
+ @keyframes color-blink {
|
|
|
+ 0% {
|
|
|
+ color: red;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .item4{
|
|
|
- top: 20px;
|
|
|
- left: 390px;
|
|
|
- .icon{
|
|
|
- background-image: url('/@/assets/images/vent/alarm/icon-dust.svg');
|
|
|
- }
|
|
|
|
|
|
- }
|
|
|
- .item5{
|
|
|
- top: 25px;
|
|
|
- left: -110px;
|
|
|
- .icon{
|
|
|
- background-image: url('/@/assets/images/vent/alarm/icon-vent.svg');
|
|
|
+ 50% {
|
|
|
+ color: rgb(198, 0, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ color: rgb(255, 18, 18);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
|
|
|
- @keyframes iconMove {
|
|
|
- 100% {
|
|
|
- opacity: 0;
|
|
|
+ .item1 {
|
|
|
+ top: 230px;
|
|
|
+ left: 150px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/icon-fire.svg');
|
|
|
}
|
|
|
}
|
|
|
- @keyframes rotate1 {
|
|
|
- 0% {
|
|
|
- transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translateX(0%) rotateX(72deg) rotateZ(0);
|
|
|
+
|
|
|
+ .item2 {
|
|
|
+ top: 185px;
|
|
|
+ left: -120px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/icon-device.svg');
|
|
|
}
|
|
|
}
|
|
|
- @keyframes rotate2 {
|
|
|
- 0% {
|
|
|
- transform: translateX(0%) rotateX(70deg) rotateZ(0);
|
|
|
+
|
|
|
+ .item3 {
|
|
|
+ top: 185px;
|
|
|
+ left: 420px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/icon-gas.svg');
|
|
|
}
|
|
|
- 100% {
|
|
|
- transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
|
|
|
+
|
|
|
+ .item-monitor-box {
|
|
|
+ top: -155px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ top: 10px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- @keyframes rotate3 {
|
|
|
- 0% {
|
|
|
- transform: translateX(0%) rotateX(80deg) rotateZ(0);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
|
|
|
+
|
|
|
+ .item4 {
|
|
|
+ top: 20px;
|
|
|
+ left: 390px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/icon-dust.svg');
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
- @keyframes rotate4 {
|
|
|
- 100% {
|
|
|
- transform: translateX(0%) rotateX(80deg) rotateZ(0);
|
|
|
- }
|
|
|
- 0% {
|
|
|
- transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
|
|
|
+
|
|
|
+ .item5 {
|
|
|
+ top: 25px;
|
|
|
+ left: -110px;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ background-image: url('/@/assets/images/vent/alarm/icon-vent.svg');
|
|
|
}
|
|
|
}
|
|
|
- @keyframes ball {
|
|
|
- 100% {
|
|
|
- offset-distance: 100%;
|
|
|
- }
|
|
|
- 0% {
|
|
|
- offset-distance: 0%;
|
|
|
- }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes iconMove {
|
|
|
+ 100% {
|
|
|
+ opacity: 0;
|
|
|
}
|
|
|
- @keyframes ball1 {
|
|
|
- 0% {
|
|
|
- offset-distance: 100%;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- offset-distance: 0%;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rotate1 {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateX(0%) rotateX(72deg) rotateZ(0);
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .right-box{
|
|
|
- .dust-monitor{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- margin-top: 15px;
|
|
|
- .value{
|
|
|
- width: 131px;
|
|
|
- height: 44px;
|
|
|
- background: url('/@/assets/images/vent/value-bg.png');
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
+
|
|
|
+ @keyframes rotate2 {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0%) rotateX(70deg) rotateZ(0);
|
|
|
}
|
|
|
- .title{
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 5px;
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rotate3 {
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0%) rotateX(80deg) rotateZ(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes rotate4 {
|
|
|
+ 100% {
|
|
|
+ transform: translateX(0%) rotateX(80deg) rotateZ(0);
|
|
|
}
|
|
|
- .value{
|
|
|
- font-size: 16px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: #3DF5FF;
|
|
|
|
|
|
+ 0% {
|
|
|
+ transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
|
|
|
}
|
|
|
}
|
|
|
- .gas-box{
|
|
|
- height: 390px;
|
|
|
+
|
|
|
+ @keyframes ball {
|
|
|
+ 100% {
|
|
|
+ offset-distance: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ 0% {
|
|
|
+ offset-distance: 0%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes ball1 {
|
|
|
+ 0% {
|
|
|
+ offset-distance: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ offset-distance: 0%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-box {
|
|
|
+ .dust-monitor {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-top: 15px;
|
|
|
+
|
|
|
+ .value {
|
|
|
+ width: 131px;
|
|
|
+ height: 44px;
|
|
|
+ background: url('/@/assets/images/vent/value-bg.png');
|
|
|
display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 10px;
|
|
|
- .gas-item{
|
|
|
- position: relative;
|
|
|
- .top{
|
|
|
- height: 100px;
|
|
|
- padding-top: 30px;
|
|
|
- .value{
|
|
|
- font-size: 26px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: #3DF5FF;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 5px;
|
|
|
- }
|
|
|
- .title{
|
|
|
- width: 205px;
|
|
|
- height: 48px;
|
|
|
- text-align: center;
|
|
|
- background: url('/@/assets/images/vent/plane.png') no-repeat;
|
|
|
- background-size: contain;
|
|
|
- background-position: bottom;
|
|
|
- }
|
|
|
- &::before{
|
|
|
- position: absolute;
|
|
|
- content: '';
|
|
|
- width: 136px;
|
|
|
- height: 101px;
|
|
|
- left: 35px;
|
|
|
- top: 15px;
|
|
|
- background: url('/@/assets/images/vent/small-bg1.png') no-repeat;
|
|
|
- background-size: cover;
|
|
|
- }
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #3DF5FF;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .gas-box {
|
|
|
+ height: 390px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ .gas-item {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ height: 100px;
|
|
|
+ padding-top: 30px;
|
|
|
+
|
|
|
+ .value {
|
|
|
+ font-size: 26px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #3DF5FF;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 5px;
|
|
|
}
|
|
|
- .detail-box{
|
|
|
- position: relative;
|
|
|
- margin: 0 auto;
|
|
|
- width: 184px;
|
|
|
- height: 270px;
|
|
|
- background: linear-gradient(to bottom, transparent, #00679b77) no-repeat;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ width: 205px;
|
|
|
+ height: 48px;
|
|
|
+ text-align: center;
|
|
|
+ background: url('/@/assets/images/vent/plane.png') no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ background-position: bottom;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ width: 136px;
|
|
|
+ height: 101px;
|
|
|
+ left: 35px;
|
|
|
+ top: 15px;
|
|
|
+ background: url('/@/assets/images/vent/small-bg1.png') no-repeat;
|
|
|
background-size: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-box {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 184px;
|
|
|
+ height: 270px;
|
|
|
+ background: linear-gradient(to bottom, transparent, #00679b77) no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 50px 0 20px 0;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ content: '';
|
|
|
+ left: -10px;
|
|
|
+ bottom: -8px;
|
|
|
+ width: 205px;
|
|
|
+ height: 31px;
|
|
|
+ background: url('/@/assets/images/vent/plane1.png') no-repeat;
|
|
|
+ background-position: bottom;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-item {
|
|
|
+ width: 147px;
|
|
|
+ height: 40px;
|
|
|
+ background-image: linear-gradient(to right, #39a3ff66, #39a3ff00);
|
|
|
+ // margin: 5px 0;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ padding: 0 10px;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
- padding: 50px 0 20px 0;
|
|
|
- &::after{
|
|
|
- position: absolute;
|
|
|
- content: '';
|
|
|
- left: -10px;
|
|
|
- bottom: -8px;
|
|
|
- width: 205px;
|
|
|
- height: 31px;
|
|
|
- background: url('/@/assets/images/vent/plane1.png') no-repeat;
|
|
|
- background-position: bottom;
|
|
|
- }
|
|
|
- .detail-item{
|
|
|
- width: 147px;
|
|
|
- height: 40px;
|
|
|
- background-image: linear-gradient(to right, #39a3ff66, #39a3ff00);
|
|
|
- // margin: 5px 0;
|
|
|
- display: flex;
|
|
|
- padding: 0 10px;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .value{
|
|
|
- font-size: 16px;
|
|
|
- font-family: 'douyuFont';
|
|
|
- color: #2bdcff;
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
+
|
|
|
+ .value {
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: 'douyuFont';
|
|
|
+ color: #2bdcff;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .monitor-title{
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ .monitor-title {
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
+}
|
|
|
</style>
|
