<template>
|
<div class="containerSafe">
|
<div class="containerSafeTop">
|
<div class="titleC">企业基本信息</div>
|
<div class="containerSafeTop1">
|
<span>{{ company.corpName }}</span>
|
<!-- <button>在产</button> -->
|
</div>
|
<div class="containerSafeTop2">
|
<button class="btn1">小型</button>
|
<button class="btn2">{{ company.statusName }}</button>
|
</div>
|
<div class="containerSafeTop3">
|
<scrool></scrool>
|
</div>
|
<div class="containerSafeTop4">
|
<tableList></tableList>
|
</div>
|
</div>
|
<div class="containerSafeBottom">
|
<div class="titleC">企业实时数据监测</div>
|
<div class="titleCompany">{{ company.corpName }}-实时监测</div>
|
<div class="bottomMsg">
|
<div class="bottommsg1" v-for="(item, index) in CGList" :key="index">
|
<div class="bottommsg1Top">
|
<div class="bottommsg11">
|
<span
|
><img src="../../../assets/image/Left/safe/储罐.png"
|
/></span>
|
</div>
|
<div class="bottommsg12">
|
<span class="span1">{{ item.monitorPointName }}</span>
|
<span class="span2">{{ item.storageMedium }}</span>
|
</div>
|
</div>
|
<div class="bottommsg1Bottom">
|
<span class="span1">
|
<span
|
><img src="../../../assets/image/Left/safe/压力.png"
|
/></span>
|
<span>压力</span>
|
<span>{{ item.pressureNum }}</span>
|
</span>
|
<span class="span1">
|
<span
|
><img src="../../../assets/image/Left/safe/温度.png"
|
/></span>
|
<span>液位</span>
|
<span>{{ item.liquidLevel }}</span>
|
</span>
|
<!-- <span class="span1">-->
|
<!-- <span><img src="../../../assets/image/Left/safe/重量.png" /></span>-->
|
<!-- <span>重量</span>-->
|
<!-- <span>{{item.weightNum}}</span>-->
|
<!-- </span>-->
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { axios_get, axios_post } from "../../../until/request.js";
|
import scrool from "./scroll.vue";
|
import tableList from "./Tablelist.vue";
|
import { mapState,mapMutations } from "vuex";
|
export default {
|
components: {
|
scrool,
|
tableList,
|
},
|
data() {
|
return {
|
CGList: [],
|
company: {},
|
timer: null,
|
pressureState: false,
|
liquidState: false,
|
};
|
},
|
computed: {
|
// 获取vuex中state里的值
|
...mapState(["monitorData"]),
|
|
},
|
methods: {
|
// 获取vuex中mutation里的方法
|
...mapMutations(["getmonitorData"]),
|
GetCGData() {
|
this.GetCGOrginData();
|
this.timer = setInterval(() => {
|
this.GetCGOrginData();
|
}, 5000);
|
},
|
|
GetCGOrginData() {
|
// axios_get("/safe/realTimeMonitor/1504302689396211713")
|
axios_get("/safe/realTimeMonitor/1531096777549819906").then(
|
(response) => {
|
this.CGList = response.data;
|
this.CGList = this.CGList.reverse();
|
|
this.CGList.forEach((e) => {
|
e.pressureNum1 = Number(e.pressureNum.split("M")[0]);
|
e.liquidLevel1 = Number(e.liquidLevel.split("m")[0]);
|
if (e.pressureNum1 < 0.4 || e.pressureNum1 > 1.0) {
|
this.pressureState = true;
|
}
|
if (e.liquidLevel1 < 50 || e.liquidLevel1 > 80) {
|
this.liquidState = true;
|
}
|
});
|
|
if (this.pressureState || this.liquidState) {
|
this.getmonitorData({
|
name: this.company.corpName,
|
state: true,
|
location: this.company.location,
|
});
|
|
}
|
}
|
);
|
},
|
|
GetGSMessage() {
|
let pid = this.$store.state.Pid;
|
axios_get("/safe/getCorpMessage/" + pid).then((reponse) => {
|
this.company = reponse.data;
|
|
});
|
},
|
},
|
mounted() {
|
this.GetCGData();
|
this.GetGSMessage();
|
},
|
|
destroyed() {
|
clearInterval(this.timer);
|
this.timers = null;
|
},
|
|
watch: {
|
"$store.state.Pid": {
|
deep: true, //深度监听
|
handler(newValue, oldValue) {
|
console.log(newValue + "++++++" + oldValue);
|
this.GetGSMessage();
|
},
|
},
|
},
|
};
|
</script>
|
|
<style scoped="scoped" lang="less">
|
.containerSafe {
|
height: 100%;
|
width: 88%;
|
|
.containerSafeTop {
|
height: 60%;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-around;
|
|
.containerSafeTop1 {
|
width: 100%;
|
height: 8%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
span {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
font-size: 36px;
|
color: #ffffff;
|
letter-spacing: 2px;
|
}
|
|
button {
|
width: 114px;
|
height: 45px;
|
margin-left: 50px;
|
border: 2px solid #1de6d4;
|
border-radius: 5px;
|
background: transparent;
|
font-size: 28px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
font-weight: 700;
|
text-align: center;
|
color: #1de6d4;
|
letter-spacing: 2px;
|
}
|
}
|
|
.containerSafeTop2 {
|
width: 100%;
|
height: 8%;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
.btn1 {
|
background-color: #1a3e60;
|
width: 110px;
|
height: 40px;
|
border-radius: 5px;
|
font-size: 22px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
font-weight: 700;
|
color: #4eb2ff;
|
letter-spacing: 1.65px;
|
border: none;
|
}
|
|
.btn2 {
|
background-color: rgba(241, 210, 2, 0.3);
|
width: 191px;
|
height: 40px;
|
border-radius: 5px;
|
font-size: 22px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
font-weight: 700;
|
color: #f6d602;
|
letter-spacing: 1.65px;
|
margin-left: 50px;
|
border: none;
|
}
|
}
|
|
.containerSafeTop3 {
|
width: 100%;
|
height: 45%;
|
}
|
|
.containerSafeTop4 {
|
width: 100%;
|
height: 25%;
|
}
|
}
|
|
.containerSafeBottom {
|
height: 40%;
|
width: 100%;
|
|
.titleCompany {
|
height: 20%;
|
width: 100%;
|
|
color: #ffffff;
|
font-size: 36px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.bottomMsg {
|
width: 100%;
|
height: calc(80% - 72px);
|
display: flex;
|
flex-direction: row;
|
justify-content: space-around;
|
align-items: center;
|
|
.bottommsg1 {
|
background-image: url(../../../assets/image/Left/safe/btbg.png);
|
background-size: 100% 100%;
|
width: 16%;
|
height: 95%;
|
display: flex;
|
flex-direction: column;
|
border-radius: 10px;
|
|
.bottommsg1Top {
|
height: 40%;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
border-bottom: solid 1px #0b4389;
|
|
.bottommsg11 {
|
height: 50%;
|
width: 100%;
|
|
span {
|
height: 100%;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
img {
|
width: 100%;
|
}
|
}
|
}
|
|
.bottommsg12 {
|
height: 50%;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
|
span {
|
display: flex;
|
align-items: center;
|
justify-content: flex-start;
|
height: 40%;
|
width: 100%;
|
display: flex;
|
}
|
|
.span1 {
|
font-size: 20px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
|
font-weight: 700;
|
color: #00a4fc;
|
// letter-spacing: 2.25px;
|
}
|
|
.span2 {
|
font-size: 18px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
font-weight: 400;
|
text-align: left;
|
color: #ffffff;
|
padding-top: 33px;
|
}
|
}
|
}
|
|
.bottommsg1Bottom {
|
height: 60%;
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
|
span {
|
height: 30%;
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 20px;
|
font-family: Microsoft YaHei, Microsoft YaHei-Regular;
|
margin-bottom: 23px;
|
// margin-right: 10px;
|
color: #ffffff;
|
// img{
|
// width: 100%;
|
// }
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.titleC {
|
width: 100%;
|
height: 44px;
|
background-image: url(../../../assets/images/titleC.png);
|
background-size: 100% 100%;
|
font-family: MytitileName;
|
font-size: 24px;
|
display: flex;
|
align-items: center;
|
color: #98deff;
|
text-indent: 70px;
|
letter-spacing: 3px;
|
}
|
</style>
|
