|
@@ -8,10 +8,19 @@
|
|
|
>
|
|
|
</u-navbar>
|
|
|
<view class="main">
|
|
|
- <view class="flcard">
|
|
|
- <text class="text-style">通风监测预警</text>
|
|
|
+ <view class="flcard" v-if="isShow1">
|
|
|
+ <view class="typeBar">
|
|
|
+ <text class="text-style">通风监测预警</text>
|
|
|
+ <u-icon @click="toggleIsShow1" name="arrow-up"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flcard" v-else>
|
|
|
+ <view class="typeBar">
|
|
|
+ <text class="text-style">通风监测预警</text>
|
|
|
+ <u-icon @click="toggleIsShow1" name="arrow-down"></u-icon>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="flcard">
|
|
|
+ <view class="flcard" v-show="isShow1">
|
|
|
<view class="datacard demo-layout bg-purple-light">
|
|
|
<view style="margin-top: 10rpx">
|
|
|
<text class="text-style1">{{ windData.zongjinfeng }}</text>
|
|
@@ -31,19 +40,29 @@
|
|
|
<view style="margin-top: 10rpx">总需风量(m³/min):</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="flcard">
|
|
|
- <text class="text-style">火灾监测预警</text>
|
|
|
+ <view class="flcard" v-if="isShow2">
|
|
|
+ <view class="typeBar">
|
|
|
+ <text class="text-style">火灾监测预警</text>
|
|
|
+ <u-icon @click="toggleIsShow2" name="arrow-up"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flcard" v-else>
|
|
|
+ <view class="typeBar">
|
|
|
+ <text class="text-style">火灾监测预警</text>
|
|
|
+ <u-icon @click="toggleIsShow2" name="arrow-down"></u-icon>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="flcard">
|
|
|
+ <view class="flcard" v-show="isShow2">
|
|
|
<view class="firecontainer">
|
|
|
<view class="title">
|
|
|
- <span class="firetext">外因火灾</span>
|
|
|
+ <span class="firetext">内因火灾</span>
|
|
|
</view>
|
|
|
<view class="firecard fire-style">
|
|
|
<view
|
|
|
- v-for="(item, index) in externalInfo"
|
|
|
+ v-for="(item, index) in internalInfo"
|
|
|
:key="index"
|
|
|
class="fire-item"
|
|
|
+ v-if="item && Object.keys(item).length > 0"
|
|
|
>
|
|
|
<view style="margin-top: 20rpx">
|
|
|
<text
|
|
@@ -57,14 +76,13 @@
|
|
|
</view>
|
|
|
<view class="firecontainer">
|
|
|
<view class="title">
|
|
|
- <span class="firetext">内因火灾</span>
|
|
|
+ <span class="firetext">外因火灾</span>
|
|
|
</view>
|
|
|
<view class="firecard fire-style">
|
|
|
<view
|
|
|
- v-for="(item, index) in internalInfo"
|
|
|
+ v-for="(item, index) in externalInfo"
|
|
|
:key="index"
|
|
|
class="fire-item"
|
|
|
- v-if="item && Object.keys(item).length > 0"
|
|
|
>
|
|
|
<view style="margin-top: 20rpx">
|
|
|
<text
|
|
@@ -77,14 +95,27 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="flcard">
|
|
|
- <text class="text-style">粉尘监测预警</text>
|
|
|
+ <view class="flcard" v-if="isShow3">
|
|
|
+ <view class="typeBar">
|
|
|
+ <text class="text-style">粉尘监测预警</text>
|
|
|
+ <u-icon @click="toggleIsShow3" name="arrow-up"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flcard" v-else>
|
|
|
+ <view class="typeBar">
|
|
|
+ <text class="text-style">粉尘监测预警</text>
|
|
|
+ <u-icon @click="toggleIsShow3" name="arrow-down"></u-icon>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="flcard">
|
|
|
+ <view class="flcard" v-show="isShow3">
|
|
|
<view class="firecard fire-style">
|
|
|
<view v-for="(value, key) in dustData" :key="key" class="fire-item">
|
|
|
<view style="margin-top: 20rpx">
|
|
|
- <image src="/static/warndata/alarm.svg" class="icon-style" :style="{ backgroundColor: key === 'alarm' ? 'red' : key }"></image>
|
|
|
+ <image
|
|
|
+ src="/static/warndata/alarm.svg"
|
|
|
+ class="icon-style"
|
|
|
+ :style="{ backgroundColor: key === 'alarm' ? 'red' : key }"
|
|
|
+ ></image>
|
|
|
<span style="margin-top: 10rpx">
|
|
|
{{ dustMap[key] }} :{{ value }}</span
|
|
|
>
|
|
@@ -93,10 +124,19 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <view class="flcard">
|
|
|
- <text class="text-style">瓦斯监测预警</text>
|
|
|
+ <view class="flcard" v-if="isShow4">
|
|
|
+ <view class="typeBar">
|
|
|
+ <text class="text-style">瓦斯监测预警</text>
|
|
|
+ <u-icon @click="toggleIsShow4" name="arrow-up"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flcard" v-else>
|
|
|
+ <view class="typeBar">
|
|
|
+ <text class="text-style">瓦斯监测预警</text>
|
|
|
+ <u-icon @click="toggleIsShow4" name="arrow-down"></u-icon>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="flcard">
|
|
|
+ <view class="flcard" v-show="isShow4">
|
|
|
<view class="firecontainer">
|
|
|
<view class="title">
|
|
|
<span class="firetext" v-if="gasDevice.length > 0"
|
|
@@ -126,10 +166,19 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view class="flcard">
|
|
|
- <text class="text-style">设备监测预警</text>
|
|
|
+ <view class="flcard" v-if="isShow5">
|
|
|
+ <view class="typeBar">
|
|
|
+ <text class="text-style">设备监测预警</text>
|
|
|
+ <u-icon @click="toggleIsShow5" name="arrow-up"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flcard" v-else>
|
|
|
+ <view class="typeBar">
|
|
|
+ <text class="text-style">设备监测预警</text>
|
|
|
+ <u-icon @click="toggleIsShow5" name="arrow-down"></u-icon>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="flcard demo-layout bg-purple-light">
|
|
|
+ <view class="flcard demo-layout bg-purple-light" v-show="isShow5">
|
|
|
<view class="deviceCard">
|
|
|
<view
|
|
|
class="item-container"
|
|
@@ -188,13 +237,17 @@ export default {
|
|
|
wintest: "wintest.png",
|
|
|
},
|
|
|
dustMap: {
|
|
|
- alarm: "报警",
|
|
|
- blue: "低风险",
|
|
|
- orange: "重大风险",
|
|
|
+ alarm: "报警",
|
|
|
+ blue: "低风险",
|
|
|
+ orange: "重大风险",
|
|
|
red: "较大风险",
|
|
|
yellow: "一般风险",
|
|
|
-
|
|
|
},
|
|
|
+ isShow1: true,
|
|
|
+ isShow2: true,
|
|
|
+ isShow3: false,
|
|
|
+ isShow4: false,
|
|
|
+ isShow5: false,
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
@@ -227,6 +280,21 @@ export default {
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
+ toggleIsShow1() {
|
|
|
+ this.isShow1 = !this.isShow1; // 切换 isShow 的值
|
|
|
+ },
|
|
|
+ toggleIsShow2() {
|
|
|
+ this.isShow2 = !this.isShow2; // 切换 isShow 的值
|
|
|
+ },
|
|
|
+ toggleIsShow3() {
|
|
|
+ this.isShow3 = !this.isShow3; // 切换 isShow 的值
|
|
|
+ },
|
|
|
+ toggleIsShow4() {
|
|
|
+ this.isShow4 = !this.isShow4; // 切换 isShow 的值
|
|
|
+ },
|
|
|
+ toggleIsShow5() {
|
|
|
+ this.isShow5 = !this.isShow5; // 切换 isShow 的值
|
|
|
+ },
|
|
|
},
|
|
|
computed: {
|
|
|
itemBackground() {
|
|
@@ -241,21 +309,21 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
- .container{
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
+.container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
>>> .u-navbar--fixed {
|
|
|
padding-top: 20px;
|
|
|
- width: 100%;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
.main {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- flex: 1;
|
|
|
- width: 100%;
|
|
|
- padding-top: 40px; /* 内容区域顶部留出导航栏的高度 */
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 40px; /* 内容区域顶部留出导航栏的高度 */
|
|
|
}
|
|
|
.text-style {
|
|
|
font-weight: bold;
|
|
@@ -379,9 +447,13 @@ export default {
|
|
|
}
|
|
|
|
|
|
.icon-style {
|
|
|
- margin-right: 8px;
|
|
|
- width: 13px;
|
|
|
- height: 13px;
|
|
|
- border-radius: 4px;
|
|
|
+ margin-right: 8px;
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+.typeBar {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
</style>
|