Skip to content

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

添加单位

parent f3f82940
Hide whitespace changes
Inline Side-by-side
Showing with 365 additions and 287 deletions
gassafety-web/src/components/PopWindowGis/markerInfoWindow.vue
View file @ e2bbaee9
...@@ -64,68 +64,68 @@ ...@@ -64,68 +64,68 @@
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div> <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div> --> </div> -->
<template v-if="data.deviceType ==3 || data.deviceType==4"> <template v-if="data.deviceType ==3 || data.deviceType==4">
<div v-if="data.deviceType==3" class="windowwarn-content" style=" <div v-if="data.deviceType==3" class="windowwarn-content" style="
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;
padding: 10px 0 2px 22px; padding: 10px 0 2px 22px;
height: 150px;padding-bottom: 2px; height: 150px;padding-bottom: 2px;
"> ">
<el-col :span="11"> <el-col :span="12">
<div class="windowwarn"> <div class="windowwarn">
标况累积量：<span class="standardConditionAccumulation"></span> 标况累积量：<span class="standardConditionAccumulation"></span>
</div> </div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<div class="windowwarn"> <div class="windowwarn">
工况累积量：<span class="workingConditionAccumulation"></span> 工况累积量：<span class="workingConditionAccumulation"></span>
</div> </div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="12">
<div class="windowwarn"> <div class="windowwarn">
剩余量：<span class="residualQuantity"></span> 剩余量：<span class="residualQuantity"></span>
</div> </div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<div class="windowwarn"> <div class="windowwarn">
标况流量：<span class="standardConditionFlow"></span> 标况流量：<span class="standardConditionFlow"></span>
</div> </div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="12">
<div class="windowwarn"> <div class="windowwarn">
工况流量：<span class="workingConditionFlow"></span> 工况流量：<span class="workingConditionFlow"></span>
</div> </div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<div class="windowwarn"> <div class="windowwarn">
温度：<span class="temperature"></span> 温度：<span class="temperature"></span>
</div> </div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="12">
<div class="windowwarn"> <div class="windowwarn">
压力：<span class="pressure"></span> 压力：<span class="pressure"></span>
</div> </div>
</el-col> </el-col>
<el-col :span="15"> <el-col :span="15">
<div class="windowwarn"> <div class="windowwarn">
上报时间：<span class="reportTime"></span> 上报时间：<span class="reportTime"></span>
</div> </div>
</el-col> </el-col>
</div> </div>
<div v-if="data.deviceType==4" class="windowwarn-content" style=" <div v-if="data.deviceType==4" class="windowwarn-content" style="
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;
padding: 10px 0 2px 22px; padding: 10px 0 2px 22px;
height: 70px;padding-bottom: 2px; height: 70px;padding-bottom: 2px;
"> ">
<el-col :span="24"> <el-col :span="24">
<div class="windowwarn"> <div class="windowwarn">
压力：<span class="pressure"></span> 压力：<span class="pressure"></span>
</div> </div>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="windowwarn"> <div class="windowwarn">
上报时间：<span class="reportTime"></span> 上报时间：<span class="reportTime"></span>
</div> </div>
</el-col> </el-col>
</div> </div>
</template> </template>
...@@ -140,45 +140,56 @@ ...@@ -140,45 +140,56 @@
</template> </template>
<script> <script>
import { realtimeData, getData } from "@/api/dataMonitoring/reportData"; let closeInfoWindowTimer = null;
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: {},
}, map: null,
data(){ },
return{ data() {
deviceId:"", return {
alarm:{}, deviceId: "",
} alarm: {},
}, }
mounted() { },
mounted() {
clearInterval(this.data.class.view.deviceTimer); clearInterval(this.data.class.view.deviceTimer);
if (this.data.deviceType == 3 || this.data.deviceType == 4) { if (this.data.deviceType == 3 || this.data.deviceType == 4) {
this.getDataid(); this.getDataid();
this.data.class.view.deviceTimer = setInterval(this.getDataid, 5000); this.data.class.view.deviceTimer = setInterval(this.getDataid, 5000);
closeInfoWindowTimer = setInterval(() => {
const dom= document.getElementsByClassName("amap-info")[0];
const disPlay =dom?.style.display;
if (!dom || (dom && disPlay == "none")) {
clearInterval(this.data.class.view.deviceTimer)
clearInterval(closeInfoWindowTimer)
console.log("请求关闭")
}
}, 1000)
} }
}, },
methods: { methods: {
moment, moment,
deviceMore() { deviceMore() {
this.data.class.view.$router.push({ this.data.class.view.$router.push({
// path: "/dataMonitoring/realtimedetail", // path: "/dataMonitoring/realtimedetail",
path: "/device/deviceInfoDetail", path: "/device/deviceInfoDetail",
query: { query: {
deviceId: this.data.deviceId, deviceId: this.data.deviceId,
// deviceType: this.data.deviceType, // deviceType: this.data.deviceType,
}, },
}); });
}, },
getDataid() { getDataid() {
getData(this.data.deviceId).then(response => { getData(this.data.deviceId).then(response => {
this.changeValue(response.data) this.changeValue(response.data)
...@@ -187,179 +198,217 @@ export default { ...@@ -187,179 +198,217 @@ export default {
changeValue(data) { changeValue(data) {
const keyArr = Object.keys(data); const keyArr = Object.keys(data);
keyArr.forEach((item) => { keyArr.forEach((item) => {
const dw = this.danwei(item)
const dom = document.getElementsByClassName(item)[0]; const dom = document.getElementsByClassName(item)[0];
if (dom) { if (dom) {
dom.innerHTML = data[item]; dom.innerHTML = data[item] +"&nbsp"+ dw;
} }
}) })
}, },
close() { danwei(item) {
this.map.clearInfoWindow(); let dw='';
this.data.class.view.domAllShow() if(item =='standardConditionAccumulation' || item == 'workingConditionAccumulation' || item == 'residualQuantity'){
dw="m³"
}else if(item =='standardConditionFlow'|| item == 'workingConditionFlow'){
dw="m³/h"
}else if(item =='temperature'){
dw="℃"
}else if(item == 'pressure'){
dw="KPa"
}else if(item == 'reportTime'){
dw=" "
}
return dw;
} ,
close() {
this.map.clearInfoWindow();
this.data.class.view.domAllShow()
},
}, },
}, };
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.windowwarn-content{ .windowwarn-content {
div{ div {
font-size: 14px; font-size: 14px;
font-wwight: 400; font-wwight: 400;
.windowwarn{
.windowwarn {
margin-bottom: 7px; margin-bottom: 7px;
} }
} }
} }
.wrapper {
width: 406px; .wrapper {
max-height: 600px; width: 406px;
// background: #fff; max-height: 600px;
border-radius: 4px; // background: #fff;
background: rgba(7, 29, 51, 0.9); border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); background: rgba(7, 29, 51, 0.9);
color: #fff; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
// overflow: hidden; color: #fff;
.top {
width: 100%; // overflow: hidden;
height: 51px; .top {
// background-color: #053b6a; width: 100%;
background-image: url(../../assets/images/blueTopBg.png); height: 51px;
background-size: 100% 100%; // background-color: #053b6a;
background-position: center; background-image: url(../../assets/images/blueTopBg.png);
&:before { background-size: 100% 100%;
// content: ""; background-position: center;
// position: absolute;
// left: -20px; &:before {
// top: 5px; // content: "";
// width: 0px; // position: absolute;
// height: 0px; // left: -20px;
// z-index:-1; // top: 5px;
// border-top: 15px solid transparent; // width: 0px;
// border-bottom: 15px solid transparent; // height: 0px;
// border-right: 30px solid #053b6a; // z-index:-1;
content: ""; // border-top: 15px solid transparent;
position: absolute; // border-bottom: 15px solid transparent;
left: -20px; // border-right: 30px solid #053b6a;
top: 5px; content: "";
z-index: -1; position: absolute;
width: 33px; left: -20px;
height: 33px; top: 5px;
background-image: url(../../assets/images/blueLeftTriangle.png); z-index: -1;
} width: 33px;
.text { height: 33px;
font-weight: 600; background-image: url(../../assets/images/blueLeftTriangle.png);
font-size: 16px;
color: #ffffff;
line-height: 51px;
}
.left {
padding-left: 22px;
}
.right {
padding-right: 22px;
img {
cursor: pointer;
} }
}
} .text {
.content { font-weight: 600;
position: relative; font-size: 16px;
max-height: 300px; color: #ffffff;
overflow: hidden; line-height: 51px;
overflow-y: auto;
padding-bottom: 2px;
border-bottom: 1px solid #eeeeee;
.eq-content {
// min-height: 156px;
box-sizing: border-box;
padding: 13px 22px 0px 22px;
// border-bottom: 1px solid #e2e2e2;
.text-wrapper {
padding-top: 1px;
& > div {
margin-bottom: 6px;
}
.eq-text {
font-size: 14px;
font-weight: 400;
// color: #1d1d1d;
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; .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: #1d1d1d;
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 {
.elbtn { box-sizing: border-box;
background-color: #053b6a; padding: 10px 0 2px 22px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); border-bottom: 1px solid #e2e2e2;
width: 95px; color: #fe5966;
height: 33px;
&>div {
font-size: 14px;
font-weight: 400;
margin-bottom: 8px;
}
}
.btn {
padding: 16px 0;
text-align: center;
.elbtn {
background-color: #053b6a;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
width: 95px;
height: 33px;
}
} }
} }
} }
}
.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/components/PopWindowGis/markerInfoWindowWarn.vue
View file @ e2bbaee9
...@@ -74,68 +74,68 @@ ...@@ -74,68 +74,68 @@
</div> </div>
<template v-if="data.deviceType ==3 || data.deviceType==4"> <template v-if="data.deviceType ==3 || data.deviceType==4">
<div v-if="data.deviceType==3" class="windowwarn-content" style=" <div v-if="data.deviceType==3" class="windowwarn-content" style="
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;
padding: 10px 0 2px 22px; padding: 10px 0 2px 22px;
height: 150px;padding-bottom: 2px; height: 150px;padding-bottom: 2px;
"> ">
<el-col :span="11"> <el-col :span="12">
<div class="windowwarn"> <div class="windowwarn">
标况累积量：<span class="standardConditionAccumulation"></span> 标况累积量：<span class="standardConditionAccumulation"></span>
</div> </div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<div class="windowwarn"> <div class="windowwarn">
工况累积量：<span class="workingConditionAccumulation"></span> 工况累积量：<span class="workingConditionAccumulation"></span>
</div> </div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="12">
<div class="windowwarn"> <div class="windowwarn">
剩余量：<span class="residualQuantity"></span> 剩余量：<span class="residualQuantity"></span>
</div> </div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<div class="windowwarn"> <div class="windowwarn">
标况流量：<span class="standardConditionFlow"></span> 标况流量：<span class="standardConditionFlow"></span>
</div> </div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="12">
<div class="windowwarn"> <div class="windowwarn">
工况流量：<span class="workingConditionFlow"></span> 工况流量：<span class="workingConditionFlow"></span>
</div> </div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="11">
<div class="windowwarn"> <div class="windowwarn">
温度：<span class="temperature"></span> 温度：<span class="temperature"></span>
</div> </div>
</el-col> </el-col>
<el-col :span="11"> <el-col :span="12">
<div class="windowwarn"> <div class="windowwarn">
压力：<span class="pressure"></span> 压力：<span class="pressure"></span>
</div> </div>
</el-col> </el-col>
<el-col :span="15"> <el-col :span="15">
<div class="windowwarn"> <div class="windowwarn">
上报时间：<span class="reportTime"></span> 上报时间：<span class="reportTime"></span>
</div> </div>
</el-col> </el-col>
</div> </div>
<div v-if="data.deviceType==4" class="windowwarn-content" style=" <div v-if="data.deviceType==4" class="windowwarn-content" style="
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;
padding: 10px 0 2px 22px; padding: 10px 0 2px 22px;
height: 70px;padding-bottom: 2px; height: 70px;padding-bottom: 2px;
"> ">
<el-col :span="24"> <el-col :span="24">
<div class="windowwarn"> <div class="windowwarn">
压力：<span class="pressure"></span> 压力：<span class="pressure"></span>
</div> </div>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<div class="windowwarn"> <div class="windowwarn">
上报时间：<span class="reportTime"></span> 上报时间：<span class="reportTime"></span>
</div> </div>
</el-col> </el-col>
</div> </div>
</template> </template>
...@@ -157,6 +157,7 @@ ...@@ -157,6 +157,7 @@
</template> </template>
<script> <script>
let closeInfoWindowTimer;
import { realtimeData, getData } from "@/api/dataMonitoring/reportData"; import { realtimeData, getData } from "@/api/dataMonitoring/reportData";
import moment from "moment"; import moment from "moment";
//line移入时的的infowindow //line移入时的的infowindow
...@@ -179,13 +180,23 @@ ...@@ -179,13 +180,23 @@
}; };
}, },
mounted() { mounted() {
clearInterval(this.data.view.deviceTimer); clearInterval(this.data.view.deviceTimer)
if (this.data.deviceType == 3 || this.data.deviceType == 4) { if (this.data.deviceType == 3 || this.data.deviceType == 4) {
this.getDataid(); this.getDataid();
this.data.view.deviceTimer = setInterval(this.getDataid, 5000); this.data.view.deviceTimer = setInterval(this.getDataid, 5000);
closeInfoWindowTimer = setInterval(() => {
const dom = document.getElementsByClassName("amap-info")[0];
const disPlay = dom?.style.display;
if (!dom || (dom && disPlay == "none")) {
clearInterval(this.data.view.deviceTimer)
clearInterval(closeInfoWindowTimer)
console.log("请求关闭")
}
}, 1000)
} }
}, },
computed: { computed: {
orderId() { orderId() {
...@@ -206,12 +217,28 @@ ...@@ -206,12 +217,28 @@
changeValue(data) { changeValue(data) {
const keyArr = Object.keys(data); const keyArr = Object.keys(data);
keyArr.forEach((item) => { keyArr.forEach((item) => {
const dw = this.danwei(item)
const dom = document.getElementsByClassName(item)[0]; const dom = document.getElementsByClassName(item)[0];
if (dom) { if (dom) {
dom.innerHTML = data[item]; dom.innerHTML = data[item] +"&nbsp"+dw;
} }
}) })
}, },
danwei(item) {
let dw='';
if(item =='standardConditionAccumulation' || item == 'workingConditionAccumulation' || item == 'residualQuantity'){
dw="m³"
}else if(item =='standardConditionFlow'|| item == 'workingConditionFlow'){
dw="m³/h"
}else if(item =='temperature'){
dw="℃"
}else if(item == 'pressure'){
dw="KPa"
}else if(item == 'reportTime'){
dw=" "
}
return dw;
} ,
createWork() { createWork() {
// 控制外层弹框 // 控制外层弹框
// console.log(this.data.view.$refs.CreateWork); // console.log(this.data.view.$refs.CreateWork);
...@@ -275,15 +302,17 @@ ...@@ -275,15 +302,17 @@
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.windowwarn-content{ .windowwarn-content {
div{ div {
font-size: 14px; font-size: 14px;
font-wwight: 400; font-wwight: 400;
.windowwarn{
.windowwarn {
margin-bottom: 7px; margin-bottom: 7px;
} }
} }
} }
.wrapper { .wrapper {
width: 406px; width: 406px;
max-height: 600px; max-height: 600px;
......
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