Skip to content

G
gassafety
Commit 9df4e83e authored by yaqizhang's avatar yaqizhang
Browse files
Options

松原燃气地图首页流量计、压力表添加实时数据

parent b40cfd04
Hide whitespace changes
Inline Side-by-side
Showing with 447 additions and 208 deletions
gassafety-web/src/components/PopWindowGis/markerInfoWindow.vue
View file @ 9df4e83e
...@@ -63,6 +63,72 @@ ...@@ -63,6 +63,72 @@
<div>报警状态：<span>报警</span></div> <div>报警状态：<span>报警</span></div>
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div> <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div> --> </div> -->
<template v-if="data.deviceType ==3 || data.deviceType==4">
<div v-if="data.deviceType==3" class="windowwarn-content" style="
border-bottom: 1px solid #e2e2e2;
padding: 10px 0 2px 22px;
height: 150px;padding-bottom: 2px;
">
<el-col :span="11">
<div class="windowwarn">
标况累积量：<span class="standardConditionAccumulation"></span>
</div>
</el-col>
<el-col :span="11">
<div class="windowwarn">
工况累积量：<span class="workingConditionAccumulation"></span>
</div>
</el-col>
<el-col :span="11">
<div class="windowwarn">
剩余量：<span class="residualQuantity"></span>
</div>
</el-col>
<el-col :span="11">
<div class="windowwarn">
标况流量：<span class="standardConditionFlow"></span>
</div>
</el-col>
<el-col :span="11">
<div class="windowwarn">
工况流量：<span class="workingConditionFlow"></span>
</div>
</el-col>
<el-col :span="11">
<div class="windowwarn">
温度：<span class="temperature"></span>
</div>
</el-col>
<el-col :span="11">
<div class="windowwarn">
压力：<span class="pressure"></span>
</div>
</el-col>
<el-col :span="15">
<div class="windowwarn">
上报时间：<span class="reportTime"></span>
</div>
</el-col>
</div>
<div v-if="data.deviceType==4" class="windowwarn-content" style="
border-bottom: 1px solid #e2e2e2;
padding: 10px 0 2px 22px;
height: 45px;padding-bottom: 2px;
">
<el-col :span="11">
<div class="windowwarn">
压力：<span class="pressure"></span>
</div>
</el-col>
<el-col :span="11">
<div class="windowwarn">
上报时间：<span class="reportTime"></span>
</div>
</el-col>
</div>
</template>
<div class="btn"> <div class="btn">
<span @mousedown.stop="deviceMore"> <span @mousedown.stop="deviceMore">
<el-button class="elbtn" type="primary">设备详情</el-button> <el-button class="elbtn" type="primary">设备详情</el-button>
...@@ -74,6 +140,7 @@ ...@@ -74,6 +140,7 @@
</template> </template>
<script> <script>
import { realtimeData, getData } from "@/api/dataMonitoring/reportData";
import moment from "moment"; import moment from "moment";
//line移入时的的infowindow //line移入时的的infowindow
export default { export default {
...@@ -83,6 +150,22 @@ export default { ...@@ -83,6 +150,22 @@ export default {
data: {}, data: {},
map: null, map: null,
}, },
data(){
return{
deviceId:"",
alarm:{},
}
},
mounted() {
clearInterval(this.data.class.view.deviceTimer);
if (this.data.deviceType == 3 || this.data.deviceType == 4) {
this.getDataid();
this.data.class.view.deviceTimer = setInterval(this.getDataid, 5000);
}
},
methods: { methods: {
moment, moment,
deviceMore() { deviceMore() {
...@@ -95,6 +178,21 @@ export default { ...@@ -95,6 +178,21 @@ export default {
}, },
}); });
}, },
getDataid() {
getData(this.data.deviceId).then(response => {
this.changeValue(response.data)
})
},
changeValue(data) {
const keyArr = Object.keys(data);
keyArr.forEach((item) => {
const dom = document.getElementsByClassName(item)[0];
if (dom) {s
dom.innerHTML = data[item];
}
})
},
close() { close() {
this.map.clearInfoWindow(); this.map.clearInfoWindow();
this.data.class.view.domAllShow() this.data.class.view.domAllShow()
...@@ -104,9 +202,18 @@ export default { ...@@ -104,9 +202,18 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.windowwarn-content{
div{
font-size: 14px;
font-wwight: 400;
.windowwarn{
margin-bottom: 7px;
}
}
}
.wrapper { .wrapper {
width: 406px; width: 406px;
max-height: 430px; max-height: 600px;
// background: #fff; // background: #fff;
border-radius: 4px; border-radius: 4px;
background: rgba(7, 29, 51, 0.9); background: rgba(7, 29, 51, 0.9);
......
gassafety-web/src/components/PopWindowGis/markerInfoWindowWarn.vue
View file @ 9df4e83e
...@@ -72,253 +72,382 @@ ...@@ -72,253 +72,382 @@
工单编号：<span>{{ data.orderId }}</span> 工单编号：<span>{{ data.orderId }}</span>
</div> </div>
</div> </div>
<template v-if="data.deviceType ==3 || data.deviceType==4">
<div v-if="data.deviceType==3" class="windowwarn-content" style="
border-bottom: 1px solid #e2e2e2;
padding: 10px 0 2px 22px;
height: 150px;padding-bottom: 2px;
">
<el-col :span="11">
<div class="windowwarn">
标况累积量：<span class="standardConditionAccumulation"></span>
</div>
</el-col>
<el-col :span="11">
<div class="windowwarn">
工况累积量：<span class="workingConditionAccumulation"></span>
</div>
</el-col>
<el-col :span="11">
<div class="windowwarn">
剩余量：<span class="residualQuantity"></span>
</div>
</el-col>
<el-col :span="11">
<div class="windowwarn">
标况流量：<span class="standardConditionFlow"></span>
</div>
</el-col>
<el-col :span="11">
<div class="windowwarn">
工况流量：<span class="workingConditionFlow"></span>
</div>
</el-col>
<el-col :span="11">
<div class="windowwarn">
温度：<span class="temperature"></span>
</div>
</el-col>
<el-col :span="11">
<div class="windowwarn">
压力：<span class="pressure"></span>
</div>
</el-col>
<el-col :span="15">
<div class="windowwarn">
上报时间：<span class="reportTime"></span>
</div>
</el-col>
</div>
<div v-if="data.deviceType==4" class="windowwarn-content" style="
border-bottom: 1px solid #e2e2e2;
padding: 10px 0 2px 22px;
height: 45px;padding-bottom: 2px;
">
<el-col :span="11">
<div class="windowwarn">
压力：<span class="pressure"></span>
</div>
</el-col>
<el-col :span="11">
<div class="windowwarn">
上报时间：<span class="reportTime"></span>
</div>
</el-col>
</div>
</template>
<div class="btn"> <div class="btn">
<span @mousedown.stop="deviceMore"> <span @mousedown.stop="deviceMore">
<el-button class="elbtn" type="primary">设备详情</el-button> <el-button class="elbtn" type="primary">设备详情</el-button>
</span> </span>
<span v-if="orderId" @mousedown.stop="createWork"> <span v-if="orderId" @mousedown.stop="createWork">
<el-button <el-button v-if="title == '压力表' || title == '流量计'" class="elbtn" type="primary">生成工单</el-button>
v-if="title == '压力表' || title == '流量计'"
class="elbtn"
type="primary"
>生成工单</el-button
>
</span> </span>
<span v-else @mousedown.stop="checkWork"> <span v-else @mousedown.stop="checkWork">
<el-button class="elbtn" type="primary">查看工单</el-button> <el-button class="elbtn" type="primary">查看工单</el-button>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import moment from "moment"; import { realtimeData, getData } from "@/api/dataMonitoring/reportData";
//line移入时的的infowindow import moment from "moment";
export default { //line移入时的的infowindow
props: { export default {
obj: { typs: Object }, props: {
title: "", obj: { typs: Object },
data: {}, title: "",
map: null, data: {},
}, // realtime:{},
data() { map: null,
return { },
deviceType: { data() {
1: "调压箱", return {
2: "阀门井", deviceType: {
3: "流量计", 1: "调压箱",
4: "智能燃气表", 2: "阀门井",
}, 3: "流量计",
}; 4: "智能燃气表",
}, },
computed: { };
orderId() {
// 如果已经生成过工单，就不能再次生成了
// return this.data.orderId ? false : true;
return this.data.orderId ? false : true;
}, },
}, mounted() {
methods: { clearInterval(this.data.view.deviceTimer);
moment,
createWork() { if (this.data.deviceType == 3 || this.data.deviceType == 4) {
// 控制外层弹框 this.getDataid();
// console.log(this.data.view.$refs.CreateWork); this.data.view.deviceTimer = setInterval(this.getDataid, 5000);
this.data.view.$refs.CreateWork.alarmId = this.data.alarmId; }
this.data.view.$refs.CreateWork.open = true;
this.data.view.$refs.CreateWork.gaoMap = this.data.view.gaoMap;
// 改变外层回调
// this.data.view.CreateWorkCallBack = this.CreateWorkCallBack;
this.data.view.alarmObjChange({
alarmId: this.data.alarmId,
type: "device",
});
}, },
close() { computed: {
this.map.clearInfoWindow(); orderId() {
this.data.class.view.domAllShow(); // 如果已经生成过工单，就不能再次生成了
// return this.data.orderId ? false : true;
return this.data.orderId ? false : true;
},
}, },
// CreateWorkCallBack(e) { methods: {
// // console.log("生成工单后传过来的参数", e); moment,
// // console.log("markerCallBack"); getDataid() {
// const marker = this.data.view.gaoMap.markers.filter((item) => { getData(this.data.deviceId).then(response => {
// return item.getExtData().alarmId == this.data.alarmId; this.changeValue(response.data)
// })[0];
// console.log("marer.getExtData()", marker.getExtData()); })
// let options = marker.getExtData(); },
// // 暂时传值，到时候回重新刷新 changeValue(data) {
// options.orderId = e; const keyArr = Object.keys(data);
// marker.setExtData(options); keyArr.forEach((item) => {
// }, const dom = document.getElementsByClassName(item)[0];
deviceMore() { if (dom) {
this.data.view.$router.push({ dom.innerHTML = data[item];
path: "/dataMonitoring/alarmdetail", }
query: { })
},
createWork() {
// 控制外层弹框
// console.log(this.data.view.$refs.CreateWork);
this.data.view.$refs.CreateWork.alarmId = this.data.alarmId;
this.data.view.$refs.CreateWork.open = true;
this.data.view.$refs.CreateWork.gaoMap = this.data.view.gaoMap;
// 改变外层回调
// this.data.view.CreateWorkCallBack = this.CreateWorkCallBack;
this.data.view.alarmObjChange({
alarmId: this.data.alarmId, alarmId: this.data.alarmId,
dcviceType: this.deviceType[this.data.deviceType], type: "device",
}, });
}); },
close() {
this.map.clearInfoWindow();
this.data.class.view.domAllShow();
},
// CreateWorkCallBack(e) {
// // console.log("生成工单后传过来的参数", e);
// // console.log("markerCallBack");
// const marker = this.data.view.gaoMap.markers.filter((item) => {
// return item.getExtData().alarmId == this.data.alarmId;
// })[0];
// console.log("marer.getExtData()", marker.getExtData());
// let options = marker.getExtData();
// // 暂时传值，到时候回重新刷新
// options.orderId = e;
// marker.setExtData(options);
// },
deviceMore() {
this.data.view.$router.push({
path: "/dataMonitoring/alarmdetail",
query: {
alarmId: this.data.alarmId,
dcviceType: this.deviceType[this.data.deviceType],
},
});
},
// 查看工单
checkWork() {
this.data.view.$router.push({
path: "/workOrder/detail",
query: {
orderId: this.data.orderId,
},
});
},
changeA() {
}
}, },
// 查看工单 beforeDestroy() {
checkWork() { // this.data.view.createWorkOpen = false;
this.data.view.$router.push({ console.log("清空卸载")
path: "/workOrder/detail",
query: {
orderId: this.data.orderId,
},
});
}, },
},
beforeDestroy() { };
// this.data.view.createWorkOpen = false;
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .windowwarn-content{
width: 406px; div{
max-height: 500px; font-size: 14px;
// background: #fff; font-wwight: 400;
background: rgba(7, 29, 51, 0.9); .windowwarn{
color: #fff; margin-bottom: 7px;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
// overflow: hidden;
.top {
width: 100%;
height: 51px;
// background-color: #ff5a67;
background-image: url(../../assets/images/redTopBg.png);
background-size: 100% 100%;
background-position: center;
&:before {
content: "";
position: absolute;
left: -20px;
top: 5px;
z-index: -1;
width: 33px;
height: 33px;
background-image: url(../../assets/images/redLeftTriangle.png);
}
.text {
font-weight: 600;
font-size: 16px;
color: #ffffff;
line-height: 51px;
}
.left {
padding-left: 22px;
}
.right {
padding-right: 22px;
img {
cursor: pointer;
} }
} }
} }
.content { .wrapper {
position: relative; width: 406px;
max-height: 300px; max-height: 600px;
overflow: hidden; // background: #fff;
overflow-y: auto; background: rgba(7, 29, 51, 0.9);
padding-bottom: 2px; color: #fff;
border-bottom: 1px solid #eeeeee; border-radius: 4px;
.eq-content { box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
// min-height: 156px;
box-sizing: border-box; // overflow: hidden;
padding: 13px 22px 0px 22px; .top {
// border-bottom: 1px solid #e2e2e2; width: 100%;
.text-wrapper { height: 51px;
padding-top: 1px; // background-color: #ff5a67;
& > div { background-image: url(../../assets/images/redTopBg.png);
margin-bottom: 6px; background-size: 100% 100%;
} background-position: center;
.eq-text {
font-size: 14px; &:before {
font-weight: 400; content: "";
color: #fff; position: absolute;
opacity: 1; left: -20px;
& > span { top: 5px;
vertical-align: top; z-index: -1;
display: inline-block; width: 33px;
// white-space: nowrap; height: 33px;
// text-overflow: ellipsis; background-image: url(../../assets/images/redLeftTriangle.png);
// overflow: hidden; }
word-break: break-all;
max-width: 100px; .text {
} font-weight: 600;
} font-size: 16px;
color: #ffffff;
line-height: 51px;
} }
.pic {
width: 180px; .left {
height: 103px; padding-left: 22px;
// background-color: black; }
.right {
padding-right: 22px;
img { img {
width: 100%; cursor: pointer;
height: 100%;
// cursor: pointer;
} }
} }
} }
}
.maintain-content { .content {
width: 100%; position: relative;
max-height: 119px; max-height: 300px;
padding-left: 22px; overflow: hidden;
// padding-right: 22px; overflow-y: auto;
// padding-bottom: 10px; padding-bottom: 2px;
// padding-top: 16px; border-bottom: 1px solid #eeeeee;
box-sizing: border-box;
// border-bottom: 1px solid #e2e2e2; .eq-content {
& > div { // min-height: 156px;
margin-bottom: 8px; box-sizing: border-box;
font-size: 14px; padding: 13px 22px 0px 22px;
font-weight: 400;
span { // border-bottom: 1px solid #e2e2e2;
vertical-align: top; .text-wrapper {
display: inline-block; padding-top: 1px;
word-break: break-all;
max-width: 280px; &>div {
margin-bottom: 6px;
}
.eq-text {
font-size: 14px;
font-weight: 400;
color: #fff;
opacity: 1;
&>span {
vertical-align: top;
display: inline-block;
// white-space: nowrap;
// text-overflow: ellipsis;
// overflow: hidden;
word-break: break-all;
max-width: 100px;
}
}
}
.pic {
width: 180px;
height: 103px;
// background-color: black;
img {
width: 100%;
height: 100%;
// cursor: pointer;
}
}
} }
} }
}
.warn-wrapper { .maintain-content {
.warn-content { width: 100%;
max-height: 119px;
padding-left: 22px;
// padding-right: 22px;
// padding-bottom: 10px;
// padding-top: 16px;
box-sizing: border-box; box-sizing: border-box;
padding: 10px 0 2px 22px;
border-bottom: 1px solid #e2e2e2; // border-bottom: 1px solid #e2e2e2;
color: #fe5966; &>div {
& > div { margin-bottom: 8px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
margin-bottom: 8px;
span {
vertical-align: top;
display: inline-block;
word-break: break-all;
max-width: 280px;
}
} }
} }
.btn {
padding: 16px 0; .warn-wrapper {
text-align: center; .warn-content {
span { box-sizing: border-box;
display: inline-block; padding: 10px 0 2px 22px;
padding: 0 10px; border-bottom: 1px solid #e2e2e2;
.elbtn { color: #fe5966;
background-color: #053b6a;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); &>div {
width: 95px; font-size: 14px;
height: 33px; font-weight: 400;
// border: none; margin-bottom: 8px;
}
}
.btn {
padding: 16px 0;
text-align: center;
span {
display: inline-block;
padding: 0 10px;
.elbtn {
background-color: #053b6a;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
width: 95px;
height: 33px;
// border: none;
}
} }
} }
} }
} }
}
.wrapperEditorPage {}
.wrapperEditorPage {
} .display-default {
.display-default { display: flex;
display: flex; justify-content: space-between;
justify-content: space-between; }
} </style>
</style> \ No newline at end of file
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 9df4e83e
...@@ -469,6 +469,9 @@ export default { ...@@ -469,6 +469,9 @@ export default {
//抽屉是否收回 //抽屉是否收回
backFlag: true, backFlag: true,
mapStyle: true, mapStyle: true,
// 设备轮询用的定时器
deviceTimer:null,
}; };
}, },
created() { created() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment