Skip to content

P
pingshan-ranqi
Commit e78f76d1 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

提交调一下bug

parent f6b3bef5
Show whitespace changes
Inline Side-by-side
Showing with 895 additions and 19 deletions
gassafety-web/src/api/device/detector.js
View file @ e78f76d1
......@@ -9,3 +9,12 @@ export function detectorUserList(query) {
params: query
})
}
// 查询报警器用户下的报警器
export function getdetectorInfoList(query) {
return request({
url: '/detector/detectorInfo/detectorInfoList',
method: 'get',
params: query
})
}
gassafety-web/src/assets/images/detctor/baojingquan.svg 0 → 100644
View file @ e78f76d1
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1636705080414" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3153" width="20" height="20" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M513.024 65.536q93.184 0 175.616 35.84t143.872 97.28 97.28 143.872 35.84 175.616q0 94.208-35.84 176.64t-97.28 143.872-143.872 97.28-175.616 35.84q-94.208 0-176.64-35.84t-143.872-97.28-97.28-143.872-35.84-176.64q0-93.184 35.84-175.616t97.28-143.872 143.872-97.28 176.64-35.84zM513.024 909.312q80.896 0 152.064-30.72t124.416-83.968 83.968-124.416 30.72-152.064-30.72-152.064-83.968-124.416-124.416-83.968-152.064-30.72q-81.92 0-153.088 30.72t-124.416 83.968-83.968 124.416-30.72 152.064 30.72 152.064 83.968 124.416 124.416 83.968 153.088 30.72zM513.024 190.464q66.56 0 124.928 25.088t102.4 69.12 69.12 102.4 25.088 124.928-25.088 125.44-69.12 102.912-102.4 69.12-124.928 25.088-125.44-25.088-102.912-69.12-69.12-102.912-25.088-125.44 25.088-124.928 69.12-102.4 102.912-69.12 125.44-25.088z" p-id="3154" fill="#7bf8f4"></path></svg>
\ No newline at end of file
gassafety-web/src/assets/styles/fonticon.scss
View file @ e78f76d1
@font-face {
font-family: "iconfont"; /* Project id 2931179 */
src: url('//at.alicdn.com/t/font_2931179_mu5fqimdyte.woff2?t=1636617085041') format('woff2'),
url('//at.alicdn.com/t/font_2931179_mu5fqimdyte.woff?t=1636617085041') format('woff'),
url('//at.alicdn.com/t/font_2931179_mu5fqimdyte.ttf?t=1636617085041') format('truetype');
src: url('//at.alicdn.com/t/font_2931179_1l1pycze51s.woff2?t=1636704314183') format('woff2'),
url('//at.alicdn.com/t/font_2931179_1l1pycze51s.woff?t=1636704314183') format('woff'),
url('//at.alicdn.com/t/font_2931179_1l1pycze51s.ttf?t=1636704314183') format('truetype');
}
.iconfont {
......@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-bjqdw:before {
content: "\e8a4";
}
.icon-gongye:before {
content: "\e61a";
}
......
gassafety-web/src/assets/styles/gassafety.scss
View file @ e78f76d1
......@@ -415,10 +415,21 @@
}
// gis地图内的bottom列表，如果隐藏在出现会有一个bug，这样可以解决
.el-bottom {
.b {
&>.el-bottom {
.el-table__body-wrapper {
height: 140px !important;
}
}
}
// center
.center {
.el-bottom {
.el-table__body-wrapper {
max-height: 600px !important;
}
}
}
// 设备巡检详情页表格样式
......@@ -479,7 +490,7 @@
.scrollStyle {
&::-webkit-scrollbar {
width: 10px;
background: rgba(6, 29, 51, 0.8)
background: rgba(6, 29, 51, 0.8);
// position: absolute;
// top: 0;
......
gassafety-web/src/components/PopWindowGis/detectorInfoWindow.vue 0 → 100644
View file @ e78f76d1
<template>
<div class="wrapper">
<span class="dot-left"></span>
<div class="top display-default">
<div class="left text ddd" :title="data.deviceName">
{{ data.nickName }}
</div>
<div class="right text">
<img src="../../assets/images/closeBtn.png" alt="" @click="close" />
</div>
</div>
<div class="table-top">
<div>
联系人: <span v-un-content>{{ data.username }}</span>
</div>
<div>
联系电话：<span v-un-content>{{ data.phone }}</span>
</div>
<div :title="data.address" class="ddd">
联系地址：<span v-un-content>{{ data.address }}</span>
</div>
</div>
<div class="content-wrapper">
{{ data.remarks ? data.remarks : "暂无介绍" }}
</div>
<div class="table-list">
<div class="thead">
<div class="theadtop">设备类型</div>
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
<div>历史报警</div>
<div>已处理报警</div>
<div class="last">报警中</div>
</div>
<div class="tbody">
<div class="theadtop">{{ userTypeName[data.userType] }}</div>
<div>{{ data.detectorCount }}</div>
<div>{{ data.onLineNum }}</div>
<div>{{ data.offLineNum }}</div>
<div>{{ data.historyAlarmNum }}</div>
<div>{{ data.cancelAlarmNum }}</div>
<div class="last">{{ data.processingAlarmNum }}</div>
</div>
</div>
<div class="btn">
<span @click="centerShow" >
<el-button class="elbtn" type="primary">感知设备</el-button>
</span>
</div>
</div>
</template>
<script>
import moment from "moment";
//line移入时的的infowindow
export default {
props: {
obj: { typs: Object },
title: "",
data: {},
map: null,
},
data() {
return {
userTypeName: ["家用报警器", "商用报警器", "工业报警器"],
};
},
mounted() {
console.log(this.data);
},
methods: {
moment,
close() {
this.map.clearInfoWindow();
this.data.class.view.domAllShow();
},
centerShow() {
this.data.class.view.getDetectorInfoList({ userId: this.data.userId });
},
},
};
</script>
<style lang="scss" scoped>
.wrapper {
width: 750px;
max-height: 430px;
// background: #fff;
border-radius: 4px;
background: rgba(7, 29, 51, 0.9);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
color: #fff;
// overflow: hidden;
.top {
width: 100%;
height: 51px;
background-color: #053b6a;
background-image: url(../../assets/images/blueTopBg.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/blueLeftTriangle.png);
}
.text {
font-weight: 600;
font-size: 16px;
color: #ffffff;
line-height: 51px;
}
.left {
padding-left: 22px;
}
.right {
padding-right: 22px;
img {
cursor: pointer;
}
}
}
.table-top {
display: flex;
justify-content: space-between;
& > div {
width: 33%;
text-align: center;
}
}
.content-wrapper {
padding: 10px 5px 10px 10px;
}
.table-list {
padding-left: 3px;
padding-right: 3px;
.thead {
display: flex;
justify-content: space-between;
& > div {
box-sizing: border-box;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
padding-left: 5px;
padding-top: 3px;
padding-bottom: 3px;
font-size: 14px;
width: 100px;
&.theadtop {
width: 150px;
border-left: 1px solid #fff;
}
}
}
.tbody {
display: flex;
justify-content: space-between;
& > div {
box-sizing: border-box;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
padding-left: 5px;
padding-top: 3px;
padding-bottom: 3px;
font-size: 14px;
width: 100px;
&.theadtop {
width: 150px;
border-left: 1px solid #fff;
}
}
}
}
}
.btn {
text-align: right;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
.elbtn {
background-color: #053b6a;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
width: 95px;
height: 33px;
// border: none;
}
}
.display-default {
display: flex;
justify-content: space-between;
}
</style>
gassafety-web/src/components/PopWindowGis/detectorOnlyInfoWindow.vue 0 → 100644
View file @ e78f76d1
<template>
<div class="wrapper">
<span class="dot-left"></span>
<div class="top display-default">
<div class="left text ddd" :title="data.deviceName">
{{ data.deviceName }}
</div>
<div class="right text">
<img src="../../assets/images/closeBtn.png" alt="" @click="close" />
</div>
</div>
</div>
</template>
<script>
import moment from "moment";
//line移入时的的infowindow
export default {
props: {
obj: { typs: Object },
title: "",
data: {},
map: null,
},
data() {
return {};
},
computed: {},
methods: {
moment,
close() {
this.map.clearInfoWindow();
this.data.class.view.domAllShow();
},
},
};
</script>
<style lang="scss" scoped>
.wrapper {
width: 406px;
max-height: 500px;
// background: #fff;
background: rgba(7, 29, 51, 0.9);
color: #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;
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 {
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: #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;
}
}
}
}
.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;
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 {
}
.display-default {
display: flex;
justify-content: space-between;
}
</style>
gassafety-web/src/utils/gaodeMapView.js
View file @ e78f76d1
......@@ -15,6 +15,9 @@ import workerManInfowindow from "../components/PopWindowGis/workerManInfowindow.
import workerManView from "../components/PopWindowGis/workerManView.vue";
import videoView from "../components/PopWindowGis/videoView.vue";
import videoInfowindow from "../components/PopWindowGis/videoInfowindow.vue";
// 三个报警器
import detectorInfoWindow from "../components/PopWindowGis/detectorInfoWindow.vue";
import detectorOnlyInfoWindow from "../components/PopWindowGis/detectorInfoWindow.vue";
import { getArray } from "@/utils/gassafety.js";
import { lineColor, mapStyle } from "./mapCommon.js";
......@@ -40,7 +43,9 @@ export const DEVICE_TYPE = {
// 商用报警器
DETECTOR_CM: "12",
// 工业报警器
DETECTOR_NT: "13"
DETECTOR_NT: "13",
// 报警器用户的单独的报警器
DETECTOR_ONLY: "detector_only"
};
class gaodeMap {
......@@ -51,6 +56,8 @@ class gaodeMap {
troubles = [];
// 摄像头
cameras = [];
// 独立展示的报警器，报警器用户列表点击生成的单一的报警器
detcetorMarker = null;
// 报警器用户
detectors = [];
// 值班人员对象的arr
......@@ -234,6 +241,7 @@ class gaodeMap {
* @param markerType
* @param lnglats
*/
addMarker(markerType, data) {
let that = this;
that.markerType = markerType;
......@@ -366,11 +374,33 @@ class gaodeMap {
marker.markerType = markerType;
marker.data = data;
marker.infoWindow = infoWindow;
marker.on("mousedown", this.troubleOpen);
marker.on("mousedown", this.detectorOpen);
marker.setExtData(data);
this.detectors.push(marker);
}
// 报警器用户下的独立报警器
if (DEVICE_TYPE.DETECTOR_ONLY == markerType) {
// 如果报警器用户下的单一报警器
// 如果this.detcetorMarker有值就删了
this.detcetorMarker && map.remove(this.detcetorMarker);
this.detcetorMarker = null;
marker.markerType = markerType;
marker.data = data;
marker.infoWindow = infoWindow;
// marker.on("mousedown", this.detectorOpen
const e = {
target,
lnglat: [data.longitude, data.latitude]
};
this.detectorOnlyOpen(e);
marker.setExtData(data);
// 赋值上去
this.detcetorMarker = marker;
}
// 四个设备
if (
DEVICE_TYPE.WORKORDER != markerType &&
......@@ -380,7 +410,8 @@ class gaodeMap {
DEVICE_TYPE.VIDEO != markerType &&
DEVICE_TYPE.DETECTOR_NT != markerType &&
DEVICE_TYPE.DETECTOR_CM != markerType &&
DEVICE_TYPE.DETECTOR_FM != markerType
DEVICE_TYPE.DETECTOR_FM != markerType &&
DEVICE_TYPE.DETECTOR_ONLY != markerType
) {
// marker.content = this.getMarketContent(data, markerInfoWindow);
marker.infoWindow = infoWindow;
......@@ -453,10 +484,18 @@ class gaodeMap {
// 如果这个值为false说明不是workerpoint，就push进去
if (!marker.workerPoint) {
// 全部隐藏
// 如果不是报警器永华下的单一报警器
if (markerType != DEVICE_TYPE.DETECTOR_ONLY) {
// 刚进来所有的设备都是隐藏的
marker.hide();
this.markers.push(marker);
} else {
}
// 如果不是单独报警器就缩放
if (markerType != DEVICE_TYPE.DETECTOR_ONLY) {
map.setZoom("13");
}
}
//map.setFitView();
function infoClose(e) {
......@@ -500,7 +539,16 @@ class gaodeMap {
this.workerManInfoWindow = e.target.infoWindow;
};
// 三种报警器
detctorOpen = e => {
detectorOpen = e => {
this.markerType = e.target.markerType;
e.target.content = this.getMarketContent(e.target.data);
e.target.infoWindow.setContent(e.target.content);
e.target.infoWindow.open(map, e.target.getPosition());
this.boxCollision(e.target.infoWindow.dom);
this.workerManInfoWindow = e.target.infoWindow;
};
// 报警器用户下的单独报警器
detectorOnlyOpen = e => {
this.markerType = e.target.markerType;
e.target.content = this.getMarketContent(e.target.data);
e.target.infoWindow.setContent(e.target.content);
......@@ -508,6 +556,7 @@ class gaodeMap {
this.boxCollision(e.target.infoWindow.dom);
this.workerManInfoWindow = e.target.infoWindow;
};
// 鼠标移入设备时候实行的函数
infoOpen = e => {
if (e.target.getExtData().alarmState == 1) {
......@@ -653,7 +702,7 @@ class gaodeMap {
return html;
}
case DEVICE_TYPE.VIDEO: {
console.log("DEVICE_TYPE.VIDEODEVICE_TYPE.VIDEO", DEVICE_TYPE.VIDEO);
// console.log("DEVICE_TYPE.VIDEODEVICE_TYPE.VIDEO", DEVICE_TYPE.VIDEO);
const dom = createPop(videoInfowindow, {
title: "video",
data: data,
......@@ -663,6 +712,50 @@ class gaodeMap {
dom.remove();
return html;
}
case DEVICE_TYPE.DETECTOR_CM: {
// console.log("DEVICE_TYPE.VIDEODEVICE_TYPE.VIDEO", DEVICE_TYPE.VIDEO);
const dom = createPop(detectorInfoWindow, {
title: "detector",
data: data,
map: map
});
const html = dom.$el;
dom.remove();
return html;
}
case DEVICE_TYPE.DETECTOR_FM: {
// console.log("DEVICE_TYPE.VIDEODEVICE_TYPE.VIDEO", DEVICE_TYPE.VIDEO);
const dom = createPop(detectorInfoWindow, {
title: "detector",
data: data,
map: map
});
const html = dom.$el;
dom.remove();
return html;
}
case DEVICE_TYPE.DETECTOR_NT: {
// console.log("DEVICE_TYPE.VIDEODEVICE_TYPE.VIDEO", DEVICE_TYPE.VIDEO);
const dom = createPop(detectorInfoWindow, {
title: "detector",
data: data,
map: map
});
const html = dom.$el;
dom.remove();
return html;
}
case DEVICE_TYPE.DETECTOR_ONLY: {
// console.log("DEVICE_TYPE.VIDEODEVICE_TYPE.VIDEO", DEVICE_TYPE.VIDEO);
const dom = createPop(detectorOnlyInfoWindow, {
title: "detector",
data: data,
map: map
});
const html = dom.$el;
dom.remove();
return html;
}
}
}
......@@ -798,6 +891,15 @@ class gaodeMap {
marker.setIcon(icon);
break;
}
//报警器用户下定位出来的报警器
case DEVICE_TYPE.DETECTOR_ONLY: {
let icon = new AMap.Icon({
opacity: 0.1,
image: require("../assets/images/detctor/baojingquan.svg")
});
marker.setIcon(icon);
break;
}
}
}
changeMarkIcon(marker, iconUrl) {
......
gassafety-web/src/views/enterprise/mapView/components/Bottom.vue
View file @ e78f76d1
<template>
<div class="wrapper">
<div class="wrapper b">
<div class="left">
<div class="top">
<span class="title">设备报警最新记录</span>
......
gassafety-web/src/views/enterprise/mapView/components/Center.vue 0 → 100644
View file @ e78f76d1
<template>
<div v-show="show" class="wrapper center">
<div class="left">
<div class="title-wrapper">
<div class="title"></div>
<div class="close" @click="close">
<img src="@/assets/images/closeBtn.png" alt="" />
</div>
</div>
<div class="bottom right-bottom-data-left">
<el-table
size="mini"
:data="detcetorList"
style="width: 100%; maxheight: 600px"
class="el-bottom"
>
<!-- :height="tableHeight" -->
<el-table-column prop="detectorName" label="设备名称" width="100">
</el-table-column>
<el-table-column prop="detectorCode" label="设备编号" width="200">
</el-table-column>
<el-table-column prop="linkman" label="联系人" width="100">
</el-table-column>
<el-table-column prop="phone" label="联系电话" width="">
</el-table-column>
<el-table-column prop="detectorStatus" label="设备状态" width="100">
</el-table-column>
<el-table-column prop="alarmTime" label="报警时间" width="">
<template slot-scope="scope">
<div v-un-content>{{scope.row.alarmTime}}</div>
</template>
</el-table-column>
<el-table-column prop="creatTime" label="创建时间" width="">
<template slot-scope="scope">
<div v-un-content>{{scope.row.creatTime}}</div>
</template>
</el-table-column>
<el-table-column prop="alarmValue" label="定位" width="50">
<template slot-scope="scope">
<div @click="createDetector(scope)" class="iconfont icon-bjqdw">
</div>
<!-- {{ scope.row.userId }} -->
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>
</template>
<script>
import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
export default {
props: {
detcetorList: {
type: Array,
},
show: {
type: Boolean,
},
},
data() {
return {
tableHeight: 600,
tableData: [
{
deviceCode: "2016-05-05",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
{
deviceCode: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
],
};
},
created() {
console.log("list", this.detcetorList);
// this.getList();
},
watch: {
// 当组件显示的时候
show(bol) {
console.log(bol);
if (bol) {
console.log(this.detcetorList);
// this.tableData=[...detcetorList]
}
},
},
methods: {
close() {
this.$parent.centerShow = false;
},
// 点击创建点并且定位过去
createDetector(data){
console.log(data);
this.$parent.gaoMap.addMarker('detector_only');
}
},
};
</script>
<style lang="scss" scoped>
.wrapper {
// width: 978px;
max-height: 600px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -500px;
// background-color: #fff;
display: flex;
justify-content: space-between;
z-index: 9999;
& > div {
}
.left {
// width: 100px;
max-height: 598px;
margin-right: 12px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
// background-color: #fff;
// color: #fff;
font-size: 14px;
font-weight: 400;
.title-wrapper {
width: 100%;
display: flex;
justify-content: space-between;
background: #1890ff;
padding: 5px;
.title {
color: #fff;
}
.close {
box-sizing: border-box;
padding-top: 2px;
padding-right: 2px;
cursor: pointer;
}
}
.el-table__body-wrappe {
height: 140px !important;
}
.top {
height: 19px;
// background-color: #053b6a;
color: #fff;
// line-height: 32px;
// padding-left: 12px;
position: relative;
.title {
position: absolute;
left: 50%;
margin-left: -92px;
top: -5px;
}
.repeat {
position: absolute;
top: -5px;
right: 160px;
color: #fff;
cursor: pointer;
&:hover {
color: #2788ea;
}
}
.repeat2 {
position: absolute;
right: 206px;
color: #67c23a;
}
.more {
position: absolute;
right: 38px;
top: -5px;
color: #fff;
float: right;
margin-right: 20px;
cursor: pointer;
&:hover {
color: #2788ea;
}
}
}
.bottom {
width: 900px;
margin: 0 auto;
position: relative;
}
}
.right {
width: 740px;
display: flex;
flex-wrap: wrap;
// justify-content: space-between;
align-content: flex-start;
// margin-top: 7px;
& > .right-content {
background-color: #fff;
width: 238px;
height: 82px;
margin-bottom: 29px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
margin-right: 10px;
display: flex;
&.three {
margin-right: 0px;
}
// align-items: center;
.text-icon {
line-height: 82px;
padding-left: 22px;
margin-right: 22px;
i {
color: #053b6a;
font-size: 60px;
}
}
.text {
font-size: 14px;
padding-top: 16px;
.top {
color: #000;
margin-bottom: 10px;
font-weight: 600;
}
.bottom {
color: #2788ea;
}
}
}
}
.iconfont{
cursor: pointer;
}
// 单独调整下最后一个icon的大小
.iconFontSize {
font-size: 50px !important;
}
.fade-enter-to,
.fade-leave {
opacity: 1;
}
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-active {
transition: opacity 0s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
}
</style>
\ No newline at end of file
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ e78f76d1
<template>
<div>
<div class="gis">
<div
:style="{ height: `${boxHeight}px`, width: `${boxWidth}px` }"
id="container"
......@@ -92,6 +92,8 @@
:open="createWorkTroubleOpen"
@callback="CreateWorkTroubleCallBack"
/>
<!-- 报警用户的报警器列表 -->
<Center :show="centerShow" ref="center" :detcetorList="detcetorList"/>
<div
ref="drawer"
class="drawer"
......@@ -388,7 +390,7 @@
<script>
// import from "utils/gaodeMapView.js";
import { pipeAllInfoList, countPipeLength } from "@/api/device/pipe.js";
import { detectorUserList } from "@/api/device/detector.js";
import { detectorUserList,getdetectorInfoList } from "@/api/device/detector.js";
import { videoList } from "@/api/device/videoManager.js";
import gaodeMap, {
map,
......@@ -402,6 +404,7 @@ import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo";
import { getMapHiddenTroublelist } from "@/api/riskManagement/hiddenTrouble";
import Bottom from "./components/Bottom.vue";
import Right from "./components/Right.vue";
import Center from "./components/Center.vue";
import CreateWork from "./components/CreateWork.vue";
import CreateWorkTrouble from "./components/CreateWorkTrouble.vue";
import { getInspectorLocations } from "@/api/inspectorLocation/location";
......@@ -414,6 +417,7 @@ export default {
CreateWork,
CreateWorkTrouble,
Right,
Center
},
data() {
return {
......@@ -439,6 +443,7 @@ export default {
createLabel: "新增",
//所有燃气公司
comp: [{ infoId: 123, unitName: "公司A" }],
// 公司被选中状态
compChangeArr: [],
......@@ -567,6 +572,10 @@ export default {
//抽屉是否收回
backFlag: true,
mapStyle: true,
// Center组件的参数，也就是报警用户的的list
centerShow:false,
detcetorList:[],
};
},
created() {
......@@ -802,6 +811,18 @@ export default {
}
});
},
// 获取报警器用户的报警器分布
getDetectorInfoList(queryParams){
return getdetectorInfoList(queryParams).then(res=>{
console.log("queryParams",res)
if(res.code ==200){
this.detcetorList=res.data;
this.centerShow=true;
// 传递回去
return res.code;
}
})
},
// 获取报警资源，并且改变图上的状态
getSelectAlarmDevice() {
return selectAlarmDevice().then((res) => {
......@@ -1339,6 +1360,10 @@ export default {
this.trouleInfoWindowShow(iten, lat, lng);
} else if (item.value == 10) {
this.videoInfoWindowShow(iten, lat, lng);
} else if (item.value > 10 && item.value <= 13) {
// this.detectorOpen
console.log("detectorInfoWindowShow")
this.detectorInfoWindowShow(iten, lat, lng)
} else {
// 其他设备
this.diveceInfoWindowShow(iten, lat, lng);
......@@ -1465,10 +1490,35 @@ export default {
}
// 因为地图移动的时候infowindow无法显示
this.gaoMap.handleInfoWindowOpenFunc = () => {
this.gaoMap.wokerManOpen(e);
this.gaoMap.videoOpen(e);
};
},
detectorInfoWindowShow(iten, lat, lng) {
// console.log("iten",iten.userId)
const target = this.gaoMap.markers.filter((item) => {
return item.getExtData().userId == iten.userId;
})[0];
console.log("target", target);
const e = {
target,
lnglat: iten.path,
};
// 如果是原地不动，就直接执行
// if (iten.path[0] == lng && iten.path[1] == lat + 0.08) {
// console.log(iten.path[0] , iten.path[1] ,lat+0.06,lng)
if (iten.path[0] == lng && iten.path[1] >= lat + 0.08 - 0.000001) {
this.gaoMap.leftListClick = false;
this.gaoMap.detectorOpen(e);
return;
}
// 因为地图移动的时候infowindow无法显示
this.gaoMap.handleInfoWindowOpenFunc = () => {
this.gaoMap.detectorOpen(e);
};
},
// 向右的箭头的动画
arrowRightChange(item) {
const index = this.arrowRightNum.indexOf(item.value);
......
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