Skip to content

G
gassafety
Commit a3303844 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

gis页面的设备报警

parent 5499b8db
Hide whitespace changes
Inline Side-by-side
Showing with 401 additions and 98 deletions
gassafety-web/src/components/PopWindowGis/lineInfoWindow.vue
View file @ a3303844
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
</div> </div>
</div> </div>
<!-- 设备信息 --> <!-- 报警设备信息 -->
<div class="content"> <div class="content">
<div class="eq-content display-default"> <div class="eq-content display-default">
<div class="text-wrapper"> <div class="text-wrapper">
...@@ -59,11 +59,7 @@ ...@@ -59,11 +59,7 @@
<el-col :span="13"> <el-col :span="13">
<div> <div>
<span>最后巡检日期：</span> <span>最后巡检日期：</span>
<span>{{ <span>{{ obj.inspectionTime ? obj.inspectionTime : "-" }}</span>
obj.inspectionTime
? obj.inspectionTime
: "-"
}}</span>
</div> </div>
</el-col> </el-col>
...@@ -71,23 +67,24 @@ ...@@ -71,23 +67,24 @@
<span>管道所在地址：</span> <span>管道所在地址：</span>
<span>{{ obj.pipeAddr }}</span> <span>{{ obj.pipeAddr }}</span>
</div> </div>
<div> <div style="padding: 0">
<span>备注信息：</span> <span>备注信息：</span>
<span>{{ obj.remarks }} </span> <span>{{ obj.remarks }} </span>
</div> </div>
</div> </div>
<template v-if="!obj.editorPage">
<div class="warn-content">
<div>报警状态 <span>报警</span></div>
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div>
<div class="btn">
<el-button class="elbtn" type="primary">生成工单</el-button>
</div>
</template>
</div> </div>
<!-- 报警状态 --> <!-- 报警状态 -->
<div class="warn-wrapper" v-if="true">
<!-- <div class="warn-content">
<div>报警状态：<span>报警</span></div>
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div> -->
<div class="btn">
<el-button class="elbtn" type="primary">设备详情</el-button>
<!-- <el-button class="elbtn" type="primary">生成工单</el-button> -->
</div>
</div>
</div> </div>
</template> </template>
...@@ -135,15 +132,15 @@ export default { ...@@ -135,15 +132,15 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .wrapper {
width: 406px; width: 406px;
// height: 488px; max-height: 430px;
background: #fff; background: #fff;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
// overflow: hidden; overflow: hidden;
.top { .top {
width: 100%; width: 100%;
height: 51px; height: 51px;
background-color: #053b6a; background-color: #053B6A;
.text { .text {
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
...@@ -162,9 +159,11 @@ export default { ...@@ -162,9 +159,11 @@ export default {
} }
.content { .content {
position: relative; position: relative;
max-height: 400px; max-height: 300px;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
padding-bottom: 2px;
border-bottom: 1px solid #eeeeee;
.eq-content { .eq-content {
// min-height: 156px; // min-height: 156px;
box-sizing: border-box; box-sizing: border-box;
...@@ -209,7 +208,7 @@ export default { ...@@ -209,7 +208,7 @@ export default {
max-height: 119px; max-height: 119px;
padding-left: 22px; padding-left: 22px;
// padding-right: 22px; // padding-right: 22px;
padding-bottom: 10px; // padding-bottom: 10px;
// padding-top: 16px; // padding-top: 16px;
box-sizing: border-box; box-sizing: border-box;
// border-bottom: 1px solid #e2e2e2; // border-bottom: 1px solid #e2e2e2;
...@@ -225,26 +224,27 @@ export default { ...@@ -225,26 +224,27 @@ export default {
} }
} }
} }
.warn-wrapper {
.warn-content { .warn-content {
height: 82px; box-sizing: border-box;
box-sizing: border-box; padding: 10px 0 2px 22px;
padding: 8px 0 0 22px; border-bottom: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2; color:#FE5966;
& > div { & > div {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
margin-bottom: 8px; margin-bottom: 8px;
}
} }
} .btn {
.btn { padding: 16px 0;
padding-top: 32px; text-align: center;
text-align: center; .elbtn {
.elbtn { background-color: #053b6a;
background-color: #053b6a; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); width: 95px;
width: 95px; height: 33px;
height: 33px; }
} }
} }
} }
......
gassafety-web/src/components/PopWindowGis/markerInfoWindow.vue
View file @ a3303844
...@@ -2,41 +2,51 @@ ...@@ -2,41 +2,51 @@
<div class="wrapper"> <div class="wrapper">
<span class="dot-left"></span> <span class="dot-left"></span>
<div class="top display-default"> <div class="top display-default">
<div class="left text">{{data.deviceName}}</div> <div class="left text">{{ data.deviceName }}</div>
<div class="right text"> <div class="right text">
<img src="../../assets/images/closeBtn.png" alt="" @click="map.clearInfoWindow()"/> <img
src="../../assets/images/closeBtn.png"
alt=""
@click="map.clearInfoWindow()"
/>
</div> </div>
</div> </div>
<!-- 设备信息 --> <!-- 设备信息 -->
<div class="content"> <div class="content">
<div class="eq-content display-default"> <div class="eq-content display-default">
<div class="text-wrapper"> <div class="text-wrapper">
<div class="eq-text">设备类型：<span>{{title}}</span></div> <div class="eq-text">
<div class="eq-text">设备型号：<span>{{data.deviceModel}}</span></div> 设备类型：<span>{{ title }}</span>
<div class="eq-text">所属管道：<span>{{data.pipeCode}}</span></div> </div>
<div class="eq-text">物联网编号：<span>{{data.iotNo}}</span></div> <div class="eq-text">
设备型号：<span>{{ data.deviceModel }}</span>
</div>
<div class="eq-text">
所属管道：<span>{{ data.pipeCode }}</span>
</div>
<div class="eq-text">
物联网编号：<span>{{ data.iotNo }}</span>
</div>
</div> </div>
<div class="pic"> <div class="pic">
<img v-bind:src="data.iconUrl" alt="" /> <img v-bind:src="data.iconUrl" alt="" />
</div> </div>
</div> </div>
<!-- 维修人员 --> <!-- 维修人员 -->
<div class="maintain-content"> <div class="maintain-content">
<el-col :span="11"> <el-col :span="11">
<div> <div>
<span>安装日期：</span> <span>安装日期：</span>
<span>{{ moment(data.installationTime).format("YYYY-MM-DD") }}</span> <span>{{
moment(data.installationTime).format("YYYY-MM-DD")
}}</span>
</div> </div>
</el-col> </el-col>
<el-col :span="13"> <el-col :span="13">
<div> <div>
<span>最后巡检日期：</span> <span>最后巡检日期：</span>
<span>{{ <span>{{ data.inspectionTime ? data.inspectionTime : "-" }}</span>
data.inspectionTime
? data.inspectionTime
: "-"
}}</span>
</div> </div>
</el-col> </el-col>
...@@ -49,37 +59,42 @@ ...@@ -49,37 +59,42 @@
<span>{{ data.remarks }} </span> <span>{{ data.remarks }} </span>
</div> </div>
</div> </div>
<!-- 报警状态 -->
<!--<div class="warn-content">
<div>报警状态 <span>报警</span></div>
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div>-->
</div> </div>
<!-- 报警状态 -->
<div class="warn-wrapper" v-if="true">
<!-- <div class="warn-content">
<div>报警状态：<span>报警</span></div>
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div> -->
<div class="btn">
<el-button class="elbtn" type="primary">设备详情</el-button>
<!-- <el-button class="elbtn" type="primary">生成工单</el-button> -->
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import moment from "moment" import moment from "moment";
//line移入时的的infowindow //line移入时的的infowindow
export default { export default {
props: { props: {
obj: { typs: Object }, obj: { typs: Object },
title: "", title: "",
data: {}, data: {},
map: null map: null,
}, },
methods:{ methods: {
moment, moment,
} },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .wrapper {
width: 406px; width: 406px;
// height: 488px; max-height: 430px;
background: #fff; background: #fff;
border-radius: 4px; border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
...@@ -106,9 +121,11 @@ export default { ...@@ -106,9 +121,11 @@ export default {
} }
.content { .content {
position: relative; position: relative;
max-height: 400px; max-height: 300px;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
padding-bottom: 2px;
border-bottom: 1px solid #eeeeee;
.eq-content { .eq-content {
// min-height: 156px; // min-height: 156px;
box-sizing: border-box; box-sizing: border-box;
...@@ -153,7 +170,7 @@ export default { ...@@ -153,7 +170,7 @@ export default {
max-height: 119px; max-height: 119px;
padding-left: 22px; padding-left: 22px;
// padding-right: 22px; // padding-right: 22px;
padding-bottom: 10px; // padding-bottom: 10px;
// padding-top: 16px; // padding-top: 16px;
box-sizing: border-box; box-sizing: border-box;
// border-bottom: 1px solid #e2e2e2; // border-bottom: 1px solid #e2e2e2;
...@@ -169,26 +186,27 @@ export default { ...@@ -169,26 +186,27 @@ export default {
} }
} }
} }
.warn-wrapper {
.warn-content { .warn-content {
height: 82px; box-sizing: border-box;
box-sizing: border-box; padding: 10px 0 2px 22px;
padding: 8px 0 0 22px; border-bottom: 1px solid #e2e2e2;
border-bottom: 1px solid #e2e2e2; color: #fe5966;
& > div { & > div {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
margin-bottom: 8px; margin-bottom: 8px;
}
} }
} .btn {
.btn { padding: 16px 0;
padding-top: 32px; text-align: center;
text-align: center; .elbtn {
.elbtn { background-color: #053b6a;
background-color: #053b6a; box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); width: 95px;
width: 95px; height: 33px;
height: 33px; }
} }
} }
} }
...@@ -199,5 +217,4 @@ export default { ...@@ -199,5 +217,4 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
</style> </style>
gassafety-web/src/components/PopWindowGis/markerInfoWindowWarn.vue 0 → 100644
View file @ a3303844
<template>
<div class="wrapper">
<span class="dot-left"></span>
<div class="top display-default">
<div class="left text">{{ data.deviceName }}</div>
<div class="right text">
<img
src="../../assets/images/closeBtn.png"
alt=""
@click="map.clearInfoWindow()"
/>
</div>
</div>
<!-- 设备信息 -->
<div class="content">
<div class="eq-content display-default">
<div class="text-wrapper">
<div class="eq-text">
设备类型：<span>{{ title }}</span>
</div>
<div class="eq-text">
设备型号：<span>{{ data.deviceModel }}</span>
</div>
<div class="eq-text">
所属管道：<span>{{ data.pipeCode }}</span>
</div>
<div class="eq-text">
物联网编号：<span>{{ data.iotNo }}</span>
</div>
</div>
<div class="pic">
<img v-bind:src="data.iconUrl" alt="" />
</div>
</div>
<!-- 维修人员 -->
<div class="maintain-content">
<el-col :span="11">
<div>
<span>安装日期：</span>
<span>{{
moment(data.installationTime).format("YYYY-MM-DD")
}}</span>
</div>
</el-col>
<el-col :span="13">
<div>
<span>最后巡检日期：</span>
<span>{{ data.inspectionTime ? data.inspectionTime : "-" }}</span>
</div>
</el-col>
<div>
<span>管道所在地址：</span>
<span>{{ data.pipeAddr }}</span>
</div>
<div>
<span>备注信息：</span>
<span>{{ data.remarks }} </span>
</div>
</div>
</div>
<!-- 报警状态 -->
<div class="warn-wrapper" v-if="true">
<!-- <div class="warn-content">
<div>报警状态：<span>报警</span></div>
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div> -->
<div class="btn">
<el-button class="elbtn" type="primary">设备详情</el-button>
<el-button class="elbtn" type="primary">生成工单</el-button>
</div>
</div>
</div>
</template>
<script>
import moment from "moment";
//line移入时的的infowindow
export default {
props: {
obj: { typs: Object },
title: "",
data: {},
map: null,
},
methods: {
moment,
},
};
</script>
<style lang="scss" scoped>
.wrapper {
width: 406px;
max-height: 430px;
background: #fff;
border-radius: 4px;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
overflow: hidden;
.top {
width: 100%;
height: 51px;
background-color: #FF5A67;
.text {
font-weight: 600;
font-size: 16px;
color: #ffffff;
line-height: 51px;
}
.left {
padding-left: 22px;
}
.right {
padding-right: 22px;
img {
cursor: pointer;
}
}
}
.content {
position: relative;
max-height: 300px;
overflow: hidden;
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;
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;
}
}
}
}
.maintain-content {
width: 100%;
max-height: 119px;
padding-left: 22px;
// padding-right: 22px;
// padding-bottom: 10px;
// padding-top: 16px;
box-sizing: border-box;
// border-bottom: 1px solid #e2e2e2;
& > div {
margin-bottom: 8px;
font-size: 14px;
font-weight: 400;
span {
vertical-align: top;
display: inline-block;
word-break: break-all;
max-width: 280px;
}
}
}
.warn-wrapper {
.warn-content {
box-sizing: border-box;
padding: 10px 0 2px 22px;
border-bottom: 1px solid #e2e2e2;
color: #fe5966;
& > 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 {
}
.display-default {
display: flex;
justify-content: space-between;
}
</style>
gassafety-web/src/utils/gaodeMapView.js
View file @ a3303844
...@@ -3,9 +3,12 @@ import regulatorBox from "../components/PopWindow/regulatorBox.vue"; ...@@ -3,9 +3,12 @@ import regulatorBox from "../components/PopWindow/regulatorBox.vue";
import valveWell from "../components/PopWindow/valveWell.vue"; import valveWell from "../components/PopWindow/valveWell.vue";
import flowMeter from "../components/PopWindow/flowMeter.vue"; import flowMeter from "../components/PopWindow/flowMeter.vue";
import pipelineView from "../components/PopWindow/pipelineView.vue"; import pipelineView from "../components/PopWindow/pipelineView.vue";
import lineInfoWindow from "../components/PopWindowGis/lineInfoWindowWarn.vue"; import lineInfoWindow from "../components/PopWindowGis/lineInfoWindow.vue";
import { delDeviceInfo } from "@/api/device/deviceInfo";
import markerInfoWindow from "../components/PopWindowGis/markerInfoWindow.vue"; import markerInfoWindow from "../components/PopWindowGis/markerInfoWindow.vue";
import markerInfoWindowWarn from "../components/PopWindowGis/markerInfoWindowWarn.vue";
import lineInfoWindowWarn from "../components/PopWindowGis/lineInfoWindowWarn.vue";
import { delDeviceInfo } from "@/api/device/deviceInfo";
import workerManInfowindow from "../components/PopWindowGis/workerManInfowindow.vue"; import workerManInfowindow from "../components/PopWindowGis/workerManInfowindow.vue";
import workerManView from "../components/PopWindowGis/workerManView.vue"; import workerManView from "../components/PopWindowGis/workerManView.vue";
...@@ -341,7 +344,9 @@ class gaodeMap { ...@@ -341,7 +344,9 @@ class gaodeMap {
* @returns {string} * @returns {string}
*/ */
getMarketContent(data) { getMarketContent(data) {
// let markerInfoWindow = markerInfoWindowWarn;
switch (this.markerType) { switch (this.markerType) {
case DEVICE_TYPE.REGEULATORBOX: { case DEVICE_TYPE.REGEULATORBOX: {
const dom = createPop(markerInfoWindow, { const dom = createPop(markerInfoWindow, {
title: "调压箱", title: "调压箱",
......
gassafety-web/src/views/enterprise/mapView/components/RightBototmData.vue
View file @ a3303844
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="left"> <div class="left">
<div class="top">设备报警最新记录</div> <div class="top">
<span>设备报警最新记录</span>
<span class="repeat">刷新</span>
<span @click="moreClick" class="more">更多</span>
</div>
<div class="bottom right-bottom-data-left"> <div class="bottom right-bottom-data-left">
<!-- <div class="table-top"> <!-- <div class="table-top">
...@@ -13,16 +17,21 @@ ...@@ -13,16 +17,21 @@
</div> --> </div> -->
<!-- <div class="one">设备编号:<span>1123123123</span></div> <!-- <div class="one">设备编号:<span>1123123123</span></div>
<div class="two">报警时间:<span>34523452345</span></div> --> <div class="two">报警时间:<span>34523452345</span></div> -->
<el-table size="mini" :data="tableData" style="width: 100%" height="170"> <el-table
<el-table-column prop="date" label="编号" width="150"> size="mini"
:data="tableData"
style="width: 100%"
height="170"
>
<el-table-column prop="deviceCode" label="编号" width="120">
</el-table-column> </el-table-column>
<el-table-column prop="name" label="名称" width="120"> <el-table-column prop="deviceName" label="名称" width="">
</el-table-column> </el-table-column>
<el-table-column prop="province" label="类型" width="80"> <el-table-column prop="alarmType" label="报警类型" width="">
</el-table-column> </el-table-column>
<el-table-column prop="city" label="时间" width="120"> <el-table-column prop="createTime" label="报警开始时间" width="">
</el-table-column> </el-table-column>
<el-table-column prop="address" label="内容" width=""> <el-table-column prop="alarmValue" label="报警内容" width="">
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
...@@ -54,6 +63,8 @@ ...@@ -54,6 +63,8 @@
</template> </template>
<script> <script>
import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
export default { export default {
props: { props: {
list: { list: {
...@@ -78,7 +89,7 @@ export default { ...@@ -78,7 +89,7 @@ export default {
}, },
tableData: [ tableData: [
{ {
date: "2016-05-03", deviceCode: "2016-05-03",
name: "王小虎", name: "王小虎",
province: "上海", province: "上海",
city: "普陀区", city: "普陀区",
...@@ -131,11 +142,42 @@ export default { ...@@ -131,11 +142,42 @@ export default {
}, },
created() { created() {
console.log("list", this.list); console.log("list", this.list);
this.getList();
}, },
methods: { methods: {
iconClass(item) { iconClass(item) {
return this.iconList[item.type]; return this.iconList[item.type];
}, },
moreClick() {
this.$router.push("/dataMonitoring/deviceAlarm");
// route.push(`dataMonitoring/deviceAlarm`)
},
getList() {
this.loading = true;
listDeviceAlarm({ pageNum: 1, pageSize: 10 }).then((res) => {
if (res.code == 200) {
const arr = res.rows.map((item) => {
const {
deviceCode,
deviceName,
alarmType,
createTime,
alarmValue,
} = item;
return {
deviceCode,
deviceName,
alarmType,
createTime,
alarmValue,
};
});
console.log(arr);
this.tableData=arr
}
});
},
}, },
}; };
</script> </script>
...@@ -147,7 +189,7 @@ export default { ...@@ -147,7 +189,7 @@ export default {
position: fixed; position: fixed;
right: 10px; right: 10px;
bottom: 10px; bottom: 10px;
overflow:hidden; overflow: hidden;
// background-color: #fff; // background-color: #fff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -167,6 +209,25 @@ export default { ...@@ -167,6 +209,25 @@ export default {
color: #fff; color: #fff;
line-height: 32px; line-height: 32px;
padding-left: 12px; padding-left: 12px;
// position: relative;
span {
display: inline-block;
}
.repeat {
margin-left: 20px;
cursor: pointer;
&:hover {
color: #2788ea;
}
}
.more {
float: right;
margin-right: 20px;
cursor: pointer;
&:hover {
color: #2788ea;
}
}
} }
.bottom { .bottom {
.table-top { .table-top {
...@@ -186,7 +247,7 @@ export default { ...@@ -186,7 +247,7 @@ export default {
flex-wrap: wrap; flex-wrap: wrap;
// justify-content: space-between; // justify-content: space-between;
align-content: flex-start; align-content: flex-start;
margin-top:7px; margin-top: 7px;
& > .right-content { & > .right-content {
background-color: #fff; background-color: #fff;
width: 238px; width: 238px;
......
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