|
|
@@ -34,19 +34,25 @@
|
|
|
<view style="margin-top: 10rpx">
|
|
|
<text class="text-style1">{{ windData.zongjinfeng }}</text>
|
|
|
</view>
|
|
|
- <view style="margin-top: 10rpx">总进风量(m³/min):</view>
|
|
|
+ <view class="nameStyle" style="margin-top: 10rpx; margin-left: 5px"
|
|
|
+ >总进风量(m³/min)</view
|
|
|
+ >
|
|
|
</view>
|
|
|
<view class="datacard demo-layout bg-purple-light">
|
|
|
<view style="margin-top: 10rpx">
|
|
|
<text class="text-style1">{{ windData.zonghuifeng }}</text>
|
|
|
</view>
|
|
|
- <view style="margin-top: 10rpx">总回风量(m³/min):</view>
|
|
|
+ <view class="nameStyle" style="margin-top: 10rpx; margin-left: 5px"
|
|
|
+ >总回风量(m³/min)</view
|
|
|
+ >
|
|
|
</view>
|
|
|
<view class="datacard demo-layout bg-purple-light">
|
|
|
<view style="margin-top: 10rpx">
|
|
|
<text class="text-style1">{{ xufengliang }}</text>
|
|
|
</view>
|
|
|
- <view style="margin-top: 10rpx">总需风量(m³/min):</view>
|
|
|
+ <view class="nameStyle" style="margin-top: 10rpx; margin-left: 5px"
|
|
|
+ >总需风量(m³/min)</view
|
|
|
+ >
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="flcard" v-if="isShow2">
|
|
|
@@ -94,7 +100,9 @@
|
|
|
: "(ppm)"
|
|
|
}}
|
|
|
</text>
|
|
|
- <view style="margin-top: 10rpx">{{ item.monitorcode }}</view>
|
|
|
+ <view class="nameStyle" style="margin-top: 10rpx">{{
|
|
|
+ item.monitorcode
|
|
|
+ }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -128,7 +136,9 @@
|
|
|
: "(ppm)"
|
|
|
}}
|
|
|
</text>
|
|
|
- <view style="margin-top: 10rpx">{{ item.monitorcode }}</view>
|
|
|
+ <view class="nameStyle" style="margin-top: 10rpx">{{
|
|
|
+ item.monitorcode
|
|
|
+ }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -149,17 +159,25 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="flcard" v-show="isShow3" @click="getDetail('dust')">
|
|
|
- <view class="datacard demo-layout bg-purple-light">
|
|
|
- <view style="margin-top: 10rpx">
|
|
|
- <text class="text-style1">{{ dustTotalcount }}</text>
|
|
|
+ <view style="display: flex">
|
|
|
+ <view class="dustcard">
|
|
|
+ <view class="demo-layout bg-purple-light">
|
|
|
+ <view style="margin-top: 10rpx">
|
|
|
+ <text class="text-style1">{{ dustTotalcount }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="nameStyle" style="margin: 10rpx">测点数量</view>
|
|
|
+ </view>
|
|
|
+ <view class="dust-right"> </view>
|
|
|
</view>
|
|
|
- <view style="margin-top: 10rpx">测点数量:</view>
|
|
|
- </view>
|
|
|
- <view class="datacard demo-layout bg-purple-light">
|
|
|
- <view style="margin-top: 10rpx">
|
|
|
- <text class="text-style1">{{ dustLevelstatus }}</text>
|
|
|
+ <view class="dustcard">
|
|
|
+ <view class="demo-layout bg-purple-light">
|
|
|
+ <view style="margin-top: 10rpx">
|
|
|
+ <text class="text-style1">{{ dustLevelstatus }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="nameStyle" style="margin: 10rpx">当前状态</view>
|
|
|
+ </view>
|
|
|
+ <view class="dust-right"> </view>
|
|
|
</view>
|
|
|
- <view style="margin-top: 10rpx">当前状态:</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
@@ -184,15 +202,20 @@
|
|
|
>安全监测系统监测点</span
|
|
|
>
|
|
|
</view>
|
|
|
+ </view>
|
|
|
+ <view class="safe-container">
|
|
|
<view
|
|
|
- class="gascard"
|
|
|
+ class="safecard"
|
|
|
v-for="(item, index) in gasDevice"
|
|
|
:key="index"
|
|
|
>
|
|
|
- <view style="margin-top: 20rpx">
|
|
|
+ <view class="left" style="margin-top: 20rpx; float: left">
|
|
|
<text class="text-style1">{{ item.gasNumber }}</text>
|
|
|
- <view style="margin: 10rpx">{{ item.systemname }}</view>
|
|
|
+ <view class="nameStyle" style="margin: 10rpx">{{
|
|
|
+ item.systemname
|
|
|
+ }}</view>
|
|
|
</view>
|
|
|
+ <view class="right"> </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="firecontainer">
|
|
|
@@ -207,10 +230,13 @@
|
|
|
v-for="(item, index) in gasDevice"
|
|
|
:key="index"
|
|
|
>
|
|
|
- <view style="margin-top: 20rpx">
|
|
|
+ <view class="left" style="margin-top: 20rpx; float: left">
|
|
|
<text class="text-style1">{{ item.pumpNumber }}</text>
|
|
|
- <view style="margin: 10rpx">{{ item.systemname }}</view>
|
|
|
+ <view class="nameStyle" style="margin: 10rpx">{{
|
|
|
+ item.systemname
|
|
|
+ }}</view>
|
|
|
</view>
|
|
|
+ <view class="gas-right"> </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -239,11 +265,17 @@
|
|
|
class="item-container"
|
|
|
v-for="(item, index) in devicekindData"
|
|
|
:key="index"
|
|
|
- :style="{ backgroundImage: itemBackground(item) }"
|
|
|
>
|
|
|
- <view class="item">
|
|
|
- <text style="margin-right: 10px">{{ item.name }}</text>
|
|
|
- <text>{{ item.status }}</text>
|
|
|
+ <view
|
|
|
+ class="item"
|
|
|
+ :style="{ backgroundImage: itemBackground(item) }"
|
|
|
+ >
|
|
|
+ <view class="deviceItem">
|
|
|
+ <text class="nameStyle" style="margin-right: 10px">{{
|
|
|
+ item.name
|
|
|
+ }}</text>
|
|
|
+ <text style="font-weight: bold">{{ item.status }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -467,6 +499,10 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+.nameStyle {
|
|
|
+ color: #7484a4;
|
|
|
+ font-size: 15px;
|
|
|
+}
|
|
|
.container {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -496,9 +532,9 @@ export default {
|
|
|
width: 32.5%;
|
|
|
margin: 1px;
|
|
|
float: left;
|
|
|
- height: 100rpx;
|
|
|
- text-align: center;
|
|
|
- border-radius: 10px;
|
|
|
+ height: 74px;
|
|
|
+ line-height: 27px;
|
|
|
+ border-radius: 5px;
|
|
|
background: url(/static/model/windM3.png),
|
|
|
linear-gradient(
|
|
|
to right,
|
|
|
@@ -506,8 +542,32 @@ export default {
|
|
|
rgba(4, 184, 255, 0.08),
|
|
|
rgba(60, 161, 237, 0.08)
|
|
|
);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: right;
|
|
|
+}
|
|
|
+.dustcard {
|
|
|
+ width: 47%;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin: 10px;
|
|
|
+ display: flex;
|
|
|
+ background: linear-gradient(
|
|
|
+ to right,
|
|
|
+ rgba(55, 135, 254, 0.08),
|
|
|
+ rgba(4, 184, 255, 0.08),
|
|
|
+ rgba(60, 161, 237, 0.08)
|
|
|
+ );
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.dust-right {
|
|
|
+ margin-right: 10px;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background: url(/static/warndata/dust.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
-
|
|
|
.datacard1 {
|
|
|
width: 100%;
|
|
|
margin: 2px;
|
|
|
@@ -542,35 +602,29 @@ export default {
|
|
|
float: left;
|
|
|
text-align: center;
|
|
|
border-radius: 10px;
|
|
|
- background: linear-gradient(
|
|
|
- to right,
|
|
|
- rgba(55, 135, 254, 0.08),
|
|
|
- rgba(4, 184, 255, 0.08),
|
|
|
- rgba(60, 161, 237, 0.08)
|
|
|
- );
|
|
|
- background-repeat: repeat;
|
|
|
}
|
|
|
|
|
|
.deviceCard {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(2, 1fr);
|
|
|
margin-top: 10rpx;
|
|
|
}
|
|
|
|
|
|
-.item-container {
|
|
|
- height: 100px;
|
|
|
- /* 设置容器高度，根据需要进行调整 */
|
|
|
- background-size: 100% 60%;
|
|
|
- /* 设置背景图片尺寸，根据需要进行调整 */
|
|
|
+.item {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ background-size: 100% 100%;
|
|
|
background-repeat: no-repeat;
|
|
|
- /* 设置背景图片不重复，根据需要进行调整 */
|
|
|
}
|
|
|
-
|
|
|
-.item {
|
|
|
- margin-left: 70px;
|
|
|
- margin-top: 36px;
|
|
|
+.deviceItem {
|
|
|
+ position: absolute;
|
|
|
+ width: 76%;
|
|
|
+ top: 76%;
|
|
|
+ left: 63%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
}
|
|
|
-
|
|
|
.firetext {
|
|
|
margin: 20px;
|
|
|
}
|
|
|
@@ -578,7 +632,8 @@ export default {
|
|
|
.text-style1 {
|
|
|
color: #3787fe;
|
|
|
font-weight: bold;
|
|
|
- font-size: 16px;
|
|
|
+ font-size: 17px;
|
|
|
+ margin-left: 5px;
|
|
|
}
|
|
|
|
|
|
.red-text-style1 {
|
|
|
@@ -596,36 +651,72 @@ export default {
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
-.fire-item {
|
|
|
- width: calc(33.33% - 20px);
|
|
|
- margin: 16rpx;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
.fire-item1 {
|
|
|
width: 45%;
|
|
|
margin: 16rpx;
|
|
|
- box-sizing: border-box;
|
|
|
+ background: linear-gradient(
|
|
|
+ to right,
|
|
|
+ rgba(55, 135, 254, 0.08),
|
|
|
+ rgba(4, 184, 255, 0.08)
|
|
|
+ );
|
|
|
}
|
|
|
+
|
|
|
.gascontainer {
|
|
|
display: flex;
|
|
|
}
|
|
|
|
|
|
.gascard {
|
|
|
- width: calc(33.33% - 20px);
|
|
|
- margin: 1px;
|
|
|
- float: left;
|
|
|
- text-align: center;
|
|
|
+ width: 47%;
|
|
|
border-radius: 10px;
|
|
|
margin: 10px;
|
|
|
- background: url(/static/warndata/work.png),
|
|
|
- linear-gradient(
|
|
|
- to right,
|
|
|
- rgba(55, 135, 254, 0.08),
|
|
|
- rgba(4, 184, 255, 0.08),
|
|
|
- rgba(60, 161, 237, 0.08)
|
|
|
- );
|
|
|
+ display: flex;
|
|
|
+ background: linear-gradient(
|
|
|
+ to right,
|
|
|
+ rgba(55, 135, 254, 0.08),
|
|
|
+ rgba(4, 184, 255, 0.08),
|
|
|
+ rgba(60, 161, 237, 0.08)
|
|
|
+ );
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.gas-right {
|
|
|
+ margin-right: 10px;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background: url(/static/warndata/gas.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+}
|
|
|
+.safecard {
|
|
|
+ width: 47%;
|
|
|
+ border-radius: 10px;
|
|
|
+ margin: 10px;
|
|
|
+ display: flex;
|
|
|
+ background: linear-gradient(
|
|
|
+ to right,
|
|
|
+ rgba(55, 135, 254, 0.08),
|
|
|
+ rgba(4, 184, 255, 0.08),
|
|
|
+ rgba(60, 161, 237, 0.08)
|
|
|
+ );
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.safe-container {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 70px;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.right {
|
|
|
+ margin-right: 10px;
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ background: url(/static/warndata/safety.png);
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
}
|
|
|
-
|
|
|
.icon-style {
|
|
|
margin-right: 8px;
|
|
|
width: 13px;
|
