|
|
@@ -39,38 +39,91 @@
|
|
|
<view class="title">
|
|
|
<span class="firetext">外因火灾</span>
|
|
|
</view>
|
|
|
- <view class="firecard"> </view>
|
|
|
+ <view class="firecard fire-style">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in externalInfo"
|
|
|
+ :key="index"
|
|
|
+ class="fire-item"
|
|
|
+ >
|
|
|
+ <view style="margin-top: 20rpx">
|
|
|
+ <text
|
|
|
+ :class="item.Maxlevel > 0 ? 'red-text-style' : 'text-style1'"
|
|
|
+ >{{ item.value }}</text
|
|
|
+ >
|
|
|
+ <view style="margin-top: 10rpx">{{ item.name }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="firecontainer">
|
|
|
<view class="title">
|
|
|
<span class="firetext">内因火灾</span>
|
|
|
</view>
|
|
|
- <view class="firecard"> </view>
|
|
|
+ <view class="firecard fire-style">
|
|
|
+ <view
|
|
|
+ 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
|
|
|
+ :class="item.Maxlevel > 0 ? 'red-text-style' : 'text-style1'"
|
|
|
+ >{{ item.value }}</text
|
|
|
+ >
|
|
|
+ <view style="margin-top: 10rpx">{{ item.name }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="flcard">
|
|
|
<text class="text-style">粉尘监测预警</text>
|
|
|
</view>
|
|
|
<view class="flcard">
|
|
|
- <text class="u-collapse-content"
|
|
|
- >众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨</text
|
|
|
- >
|
|
|
+ <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>
|
|
|
+ <span style="margin-top: 10rpx">
|
|
|
+ {{ dustMap[key] }} :{{ value }}</span
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+
|
|
|
<view class="flcard">
|
|
|
<text class="text-style">瓦斯监测预警</text>
|
|
|
</view>
|
|
|
<view class="flcard">
|
|
|
<view class="firecontainer">
|
|
|
<view class="title">
|
|
|
- <span class="firetext" v-if="gasDevice.length > 0">{{ gasDevice[0].systemname }}</span>
|
|
|
+ <span class="firetext" v-if="gasDevice.length > 0"
|
|
|
+ >安全监测系统监测点</span
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="gascard" v-for="(item, index) in gasDevice">
|
|
|
+ <view style="margin-top: 20rpx">
|
|
|
+ <text class="text-style1">{{ item.gasNumber }}</text>
|
|
|
+ <view style="margin: 10rpx">{{ item.systemname }}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="firecard"> </view>
|
|
|
</view>
|
|
|
<view class="firecontainer">
|
|
|
<view class="title">
|
|
|
- <span class="firetext" v-if="gasDevice.length > 0">{{ gasDevice[1].systemname }}</span>
|
|
|
+ <span class="firetext" v-if="gasDevice.length > 0"
|
|
|
+ >瓦斯抽采系统监测点</span
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ <view class="gascontainer">
|
|
|
+ <view class="gascard" v-for="(item, index) in gasDevice">
|
|
|
+ <view style="margin-top: 20rpx">
|
|
|
+ <text class="text-style1">{{ item.pumpNumber }}</text>
|
|
|
+ <view style="margin: 10rpx">{{ item.systemname }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="firecard"> </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="flcard">
|
|
|
@@ -82,6 +135,7 @@
|
|
|
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>
|
|
|
@@ -101,12 +155,46 @@ export default {
|
|
|
watch: {},
|
|
|
data() {
|
|
|
return {
|
|
|
- windData: [],
|
|
|
+ windData: {},
|
|
|
devicekindData: [],
|
|
|
fireData: [],
|
|
|
gasData: [],
|
|
|
+ dustData: [],
|
|
|
gasDevice: [],
|
|
|
+ externalInfo: [],
|
|
|
+ internalInfo: [],
|
|
|
xufengliang: "", //总需风量
|
|
|
+ imageMap: {
|
|
|
+ atomizing: "atomizing.png",
|
|
|
+ ballvalve: "ballvalve.png",
|
|
|
+ dedustefan: "dedustefan.png",
|
|
|
+ drilling: "drilling.png",
|
|
|
+ dustdev: "dustdev.png",
|
|
|
+ fanlocal: "fanlocal.png",
|
|
|
+ fanmain: "fanmain.png",
|
|
|
+ forcFan: "forcFan.png",
|
|
|
+ gasmonitor: "gasmonitor.png",
|
|
|
+ gate: "gate.png",
|
|
|
+ location: "location.png",
|
|
|
+ nitrogen: "nitrogen.png",
|
|
|
+ pulping: "pulping.png",
|
|
|
+ pump: "pump.png",
|
|
|
+ rebroadcast: "rebroadcast.png",
|
|
|
+ safetymonitor: "safetymonitor.png",
|
|
|
+ spary: "spary.png",
|
|
|
+ unit: "unit.png",
|
|
|
+ window: "window.png",
|
|
|
+ windrect: "windrect.png",
|
|
|
+ wintest: "wintest.png",
|
|
|
+ },
|
|
|
+ dustMap: {
|
|
|
+ alarm: "报警",
|
|
|
+ blue: "低风险",
|
|
|
+ orange: "重大风险",
|
|
|
+ red: "较大风险",
|
|
|
+ yellow: "一般风险",
|
|
|
+
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -123,10 +211,12 @@ export default {
|
|
|
this.windData = response.data.result.ventInfo;
|
|
|
this.devicekindData = response.data.result.info.devicekindInfo;
|
|
|
this.fireData = response.data.result.info.sysInfo.fireS;
|
|
|
+ this.externalInfo = this.fireData.summaryInfo.external;
|
|
|
+ this.internalInfo = this.fireData.summaryInfo.internal;
|
|
|
this.gasData = response.data.result.info.sysInfo.gasS;
|
|
|
this.gasDevice = this.gasData.devices;
|
|
|
- console.log(this.gasDevice, "数据");
|
|
|
this.xufengliang = this.windData.sysdata.xufengliang;
|
|
|
+ this.dustData = response.data.result.info.sysInfo.dustS.levels;
|
|
|
} else {
|
|
|
reject(response);
|
|
|
}
|
|
|
@@ -138,17 +228,34 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ itemBackground() {
|
|
|
+ return (item) => {
|
|
|
+ const defaultImage = "unit.png";
|
|
|
+ const imageName = this.imageMap[item.code] || defaultImage;
|
|
|
+ return `url('/static/warndata/${imageName}')`;
|
|
|
+ };
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
+ .container{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
>>> .u-navbar--fixed {
|
|
|
- margin-top: 20px;
|
|
|
+ padding-top: 20px;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
.main {
|
|
|
- margin-top: 100rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 40px; /* 内容区域顶部留出导航栏的高度 */
|
|
|
}
|
|
|
.text-style {
|
|
|
font-weight: bold;
|
|
|
@@ -200,7 +307,6 @@ export default {
|
|
|
width: 100%;
|
|
|
margin: 1px;
|
|
|
float: left;
|
|
|
- height: 100rpx;
|
|
|
text-align: center;
|
|
|
border-radius: 10px;
|
|
|
margin-top: 10px;
|
|
|
@@ -212,6 +318,7 @@ export default {
|
|
|
);
|
|
|
background-repeat: repeat;
|
|
|
}
|
|
|
+
|
|
|
.deviceCard {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
@@ -219,10 +326,9 @@ export default {
|
|
|
}
|
|
|
|
|
|
.item-container {
|
|
|
- height: 100px;
|
|
|
- background-image: url(/static/warndata/window.png);
|
|
|
- background-size: 100% 60%;
|
|
|
- background-repeat: no-repeat;
|
|
|
+ height: 100px; /* 设置容器高度，根据需要进行调整 */
|
|
|
+ background-size: 100% 60%; /* 设置背景图片尺寸，根据需要进行调整 */
|
|
|
+ background-repeat: no-repeat; /* 设置背景图片不重复，根据需要进行调整 */
|
|
|
}
|
|
|
.item {
|
|
|
margin-left: 70px;
|
|
|
@@ -233,9 +339,49 @@ export default {
|
|
|
}
|
|
|
.text-style1 {
|
|
|
color: #3787fe;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: large;
|
|
|
+}
|
|
|
+.red-text-style1 {
|
|
|
+ color: #ff0000;
|
|
|
+ font-weight: bold;
|
|
|
font-size: large;
|
|
|
}
|
|
|
.firecontainer {
|
|
|
margin-top: 10px;
|
|
|
}
|
|
|
+.fire-style {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.fire-item {
|
|
|
+ width: calc(33.33% - 20px);
|
|
|
+ margin: 16rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+.gascontainer {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.gascard {
|
|
|
+ width: calc(33.33% - 20px);
|
|
|
+ margin: 1px;
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ 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)
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+.icon-style {
|
|
|
+ margin-right: 8px;
|
|
|
+ width: 13px;
|
|
|
+ height: 13px;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
</style>
|
