Skip to content

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

Merge branch 'develop_jzl'

parents 77e76c21 5295048e
Show whitespace changes
Inline Side-by-side
Showing with 923 additions and 192 deletions
gassafety-web/src/components/PopWindow/markerInfoWindow.vue
View file @ b651ddc3
......@@ -13,7 +13,7 @@
<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.pipeName}}</span></div>
<div class="eq-text">物联网编号：<span>{{data.iotNo}}</span></div>
</div>
<div class="pic">
......
gassafety-web/src/components/PopWindowGis/markerInfoWindow.vue
View file @ b651ddc3
......@@ -22,7 +22,7 @@
设备型号：<span>{{ data.deviceModel }}</span>
</div>
<div class="eq-text">
所属管道：<span>{{ data.pipeCode }}</span>
所属管道：<span>{{ data.pipeName }}</span>
</div>
<div class="eq-text">
物联网编号：<span>{{ data.iotNo }}</span>
......
gassafety-web/src/components/PopWindowGis/markerInfoWindowWarn.vue
View file @ b651ddc3
......@@ -22,7 +22,7 @@
设备型号：<span>{{ data.deviceModel }}</span>
</div>
<div class="eq-text">
所属管道：<span>{{ data.pipeCode }}</span>
所属管道：<span>{{ data.pipeName }}</span>
</div>
<div class="eq-text">
物联网编号：<span>{{ data.iotNo }}</span>
......
gassafety-web/src/components/PopWindowGis/troubleInfoWindowWarn.vue 0 → 100644
View file @ b651ddc3
<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.pipeName }}</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>报警({{ data.alarmType }})</span>
</div>
<div>
详细信息：<span>{{ data.alarmValue ? data.alarmValue : "-" }}</span>
</div>
<div v-if="!orderId">
工单编号：<span>{{ data.orderId }}</span>
</div>
</div>
<div class="btn">
<span @mousedown.stop="deviceMore">
<el-button class="elbtn" type="primary">设备详情</el-button>
</span>
<span v-if="orderId" @mousedown.stop="createWork">
<el-button
v-if="title == '压力表' || title == '流量计'"
class="elbtn"
type="primary"
>生成工单</el-button
>
</span>
<span v-else @mousedown.stop="checkWork">
<el-button class="elbtn" type="primary">查看工单</el-button>
</span>
</div>
</div>
</div>
</template>
<script>
import moment from "moment";
//line移入时的的infowindow
export default {
props: {
obj: { typs: Object },
title: "",
data: {},
map: null,
},
data() {
return {
deviceType: {
1: "调压箱",
2: "阀门井",
3: "流量计",
4: "智能燃气表",
},
};
},
computed: {
orderId() {
// 如果已经生成过工单，就不能再次生成了
// return this.data.orderId ? false : true;
return this.data.orderId ? false : true;
},
},
methods: {
moment,
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,
type: "device",
});
},
// 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,
},
});
},
},
beforeDestroy() {
// this.data.view.createWorkOpen = false;
},
};
</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;
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/gaodeMap.js
View file @ b651ddc3
......@@ -34,6 +34,7 @@ class gaodeMap {
mouseTool = null;
myMap = null;
showInfoWindow = null;
view = null;
//构造函数中设置中央点默认值
constructor(center) {
......@@ -86,6 +87,16 @@ class gaodeMap {
// console.log("缩放开始")
this.closeInfoWindow();
});
this.myMap.on("moveend", () => {
// console.log("缩放开始")
if (!this.onceFlag) {
this.onceFlag = true;
this.view.backFlag = false;
// 让抽屉不在隐身
this.view.drawerOpacity = true;
}
});
this.districtBoundaries();
}
......@@ -987,10 +998,10 @@ class gaodeMap {
}
});
let infoWindow = new AMap.InfoWindow({
isCustom:true,
isCustom: true,
content: `<span style='border:1px solid #80d8ff;background:#fff'>${pipeName}</span>`,
anchor: "left-top",
offset: new AMap.Pixel(20, -20),
offset: new AMap.Pixel(20, -20)
});
polyline.on("mouseover", e => {
const options = polyline.getOptions();
......@@ -1007,7 +1018,7 @@ class gaodeMap {
map.add(polyline);
const path = eval(coordinates)[0];
// map.setFitView();
map.setCenter([+path[0],+path[1]], false)
map.setCenter([+path[0], +path[1]], false);
// const lntlat = eval(coordinates)[0];
// map.panTo(lntlat)
......
gassafety-web/src/utils/gaodeMapView.js
View file @ b651ddc3
......@@ -29,13 +29,14 @@ export const DEVICE_TYPE = {
PRESSUREGAGE: "7",
INSPECTOR: "8",
SMALLINSPECTOR: "workPoint",
TROUBLE:"trouble"
TROUBLE: "trouble"
};
class gaodeMap {
// 所有线的数组
polyLines = [];
//值班人员的单独数组，轨迹的时候使用
workerManArr = [];
troubles=[];
// 值班人员对象的arr
workerManMarkArr = [];
// 是否开启新增
......@@ -115,7 +116,10 @@ class gaodeMap {
if (!this.onceFlag) {
this.onceFlag = true;
this.view.backFlag = false;
// 让抽屉不在隐身
this.view.drawerOpacity = true;
}
// 每次地图移动结束，就让地图可以缩放
let options = this.myMap.getStatus();
options.scrollWheel = true;
......@@ -271,17 +275,14 @@ class gaodeMap {
}
// 隐患
if(DEVICE_TYPE.TROUBLE == markerType){
console.log("隐患上图")
if (DEVICE_TYPE.TROUBLE == markerType) {
this.troubles.push(marker)
}
if (
DEVICE_TYPE.WORKORDER != markerType &&
DEVICE_TYPE.INSPECTOR != markerType &&
DEVICE_TYPE.SMALLINSPECTOR != markerType&&
DEVICE_TYPE.SMALLINSPECTOR != markerType &&
DEVICE_TYPE.TROUBLE != markerType
) {
// marker.content = this.getMarketContent(data, markerInfoWindow);
......@@ -369,6 +370,7 @@ class gaodeMap {
return marker;
}
// 值班人员
wokerManOpen = e => {
this.markerType = e.target.markerType;
e.target.content = this.getMarketContent(e.target.data);
......
gassafety-web/src/views/device/map/index.vue
View file @ b651ddc3
......@@ -63,7 +63,7 @@
</div>
</div>
<el-input
<!-- <el-input
v-model="keyWord"
placeholder="点击输入"
id="tipinput"
......@@ -74,9 +74,9 @@
>
<el-button icon="el-icon-refresh" class="refresh-but" @click="refreshMap()"
>重置</el-button
>
> -->
<div class="leftBar-wrapper">
<!-- <div class="leftBar-wrapper">
<div
v-for="item in changeBtnData"
:key="item.value"
......@@ -92,6 +92,150 @@
</div>
<i class="el-icon-check"></i>
</div>
</div> -->
<div ref="drawer" class="drawer" :class="{ back: backFlag,opacity: drawerOpacity }">
<div class="switch" @click="backFlag = !backFlag">
<img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
<img v-else src="@/assets/images/r.png" alt="" />
</div>
<!-- 只能动态传入内嵌盒子的高 -->
<div class="scroll" :style="{ height: `${boxHeight}px` }">
<el-input
v-model="keyWord"
placeholder="点击输入"
id="tipinput"
class="search-input"
>
<template slot="suffix">
<div @click="search()">
<i class="iconfont icon-search"></i>
</div>
</template>
</el-input>
<!-- <el-button class="search-but" @click="search()">搜索</el-button> -->
<el-button class="refresh-but" @click="refreshMap()">
<i class="iconfont icon-reset"></i>
</el-button>
<div class="leftBar-wrapper">
<div
class="box-wrapper"
v-for="(item, index) in changeBtnData"
:key="item.value"
>
<div
class="box"
:class="{
active: leftBarNum.indexOf(item.value) >= 0,
firstbox: index == 0,
}"
@click.stop="arrowRightChange(item)"
>
<span class="upPic"> 上图 </span>
<div class="left">
<i class="iconfont" :class="item.icon"></i>
</div>
<div class="right">
{{ item.label }}
</div>
<i
@click.stop="leftBarChange(item)"
class="el-icon-check bingo"
></i>
<i class="ju"></i>
<i
class="arrow-right el-icon-arrow-right"
:class="{ active: arrowRightNum.indexOf(item.value) >= 0 }"
></i>
</div>
<el-collapse-transition>
<div
class="animate"
v-show="arrowRightNum.indexOf(item.value) >= 0"
>
<!-- 有数据 -->
<template v-if="item.list.length > 0">
<!-- 设备以及管道 展示内容是一样的 -->
<template v-if="item.value != 9">
<div class="list-wrapper">
<div class="thead">
<div class="no">序号</div>
<div class="code">设备编号</div>
<div class="name">设备名称</div>
</div>
<div
class="deviceList"
:class="{ topActive: index == 0 }"
v-for="(iten, index) in item.list"
:key="iten.deviceId + `` + index"
@mousedown.stop="panToo(iten, item)"
>
<div class="no">{{ iten.no + 1 }}</div>
<div :title="iten.code" class="code">
{{ iten.code }}
</div>
<div :title="iten.deviceName" class="name">
{{ iten.deviceName }}
</div>
</div>
</div>
</template>
<!-- 值班人员 展示不太一样-->
<template v-else-if="item.value == 9">
<div class="list-wrapper">
<div class="thead">
<div class="no">序号</div>
<div class="code">人员姓名</div>
<div class="name">联系电话</div>
</div>
<div
class="deviceList"
:class="{ topActive: index == 0 }"
v-for="(iten, index) in item.list"
:key="iten.deviceId + `` + index"
@click.stop="panToo(iten, item)"
>
<div class="no">{{ iten.no + 1 }}</div>
<div :title="iten.userName" class="code">
{{ iten.userName }}
</div>
<div :title="iten.userPhone" class="name">
{{ iten.userPhone ? iten.userPhone : "-" }}
</div>
</div>
</div>
</template>
<!-- 翻页 -->
<div class="goback">
<div class="btn-w">
<el-button
class="btn backPage"
type="mini"
:disabled="item.nowPage == 1"
@click.stop="pageBack(item, index)"
icon="el-icon-arrow-left"
/>
<span class="btn-w-num">{{ item.nowPage }}</span>
<el-button
class="btn goPage"
type="mini"
:disabled="item.nowPage == item.maxPage"
@click.stop="pageGo(item, index)"
icon="el-icon-arrow-right"
/>
</div>
</div>
</template>
<!-- 无数据 -->
<template v-else>
<div style="padding-left: 5px">暂无数据</div>
</template>
</div>
</el-collapse-transition>
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -110,8 +254,15 @@ export default {
radio1: "",
// 1新建，2编辑，3删除,点按钮变色
targetNum: 0,
backFlag: true,
// 抽屉内的滚动条的高需要赋值赋值
boxHeight: "",
drawerOpacity:false,
// 左边的bar的active判定
leftBarNum: [1, 2, 3, 4, 7],
// 右转箭头的样式active判定
arrowRightNum: [],
// 新建里的值
iconClass: "icon-create",
......@@ -122,26 +273,31 @@ export default {
value: 1,
icon: "icon-gd",
label: "管道",
list: [],
},
{
value: 2,
icon: "icon-tyx",
label: "调压箱",
list: [],
},
{
value: 3,
icon: "icon-fmj",
label: "阀门井",
list: [],
},
{
value: 4,
icon: "icon-llj",
label: "流量计",
list: [],
},
{
value: 7,
icon: "icon-ylb",
label: "压力表",
list: [],
},
],
keyWord: "",
......@@ -149,11 +305,13 @@ export default {
},
mounted() {
this.initMap();
this.boxHeight = document.body.clientHeight - 81;
},
methods: {
initMap() {
let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap;
this.gaoMap.view = this;
window.addEventListener("click", this.barClose);
gaoMap.addMouseTool();
gaoMap.searchTips("tipinput");
......@@ -360,7 +518,7 @@ export default {
this.gaoMap.closeAddMarker();
this.gaoMap.removeMarkerDragg();
this.gaoMap.mapOperateType = "normal";
this.leftBarNum=[1,2,3,4,7]
this.leftBarNum = [1, 2, 3, 4, 7];
// map.remove(this.gaodeMap.markerOverlays);
},
search() {
......@@ -405,8 +563,18 @@ export default {
this.targetNum = 0;
map.clearMap();
this.initMap();
this.leftBarNum=[1,2,3,4,7];
this.keyWord="";
this.leftBarNum = [1, 2, 3, 4, 7];
this.keyWord = "";
},
// 向右的箭头的动画
arrowRightChange(item) {
const index = this.arrowRightNum.indexOf(item.value);
if (index >= 0) {
this.arrowRightNum.splice(index, 1);
} else {
this.arrowRightNum.push(item.value);
}
},
},
......@@ -420,67 +588,67 @@ export default {
<style lang="scss" scoped>
// 解决地图下拉框
#container{
#container {
position: fixed;
top: 80px;
bottom:0;
bottom: 0;
width: 100%;
}
// 左边的bar
.leftBar-wrapper {
position: fixed;
left: 100px;
top: 150px;
.box {
width: 180px;
height: 48px;
display: flex;
background-color: #ffffff;
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.1);
border-top: none;
cursor: pointer;
position: relative;
> i {
position: absolute;
line-height: 48px;
right: 20px;
color: #fff;
}
&:hover {
// background-color: #053b6a;
// color: #ffffff;
// > i {
// color:#fff;
// }
}
&:hover .left,
&:hover .right {
// color: #ffffff;
}
&.active {
// background-color: #053b6a;
.left,
.right {
color: #053b6a;
}
> i {
color: #053b6a;
}
}
.left {
color: #053b6a;
line-height: 48px;
margin-left: 40px;
}
.right {
color: #1d1d1d;
line-height: 48px;
margin-left: 20px;
}
}
}
// .leftBar-wrapper {
// position: fixed;
// left: 100px;
// top: 150px;
// .box {
// width: 180px;
// height: 48px;
// display: flex;
// background-color: #ffffff;
// box-sizing: border-box;
// border: 1px solid rgba(0, 0, 0, 0.1);
// border-top: none;
// cursor: pointer;
// position: relative;
// > i {
// position: absolute;
// line-height: 48px;
// right: 20px;
// color: #fff;
// }
// &:hover {
// // background-color: #053b6a;
// // color: #ffffff;
// // > i {
// // color:#fff;
// // }
// }
// &:hover .left,
// &:hover .right {
// // color: #ffffff;
// }
// &.active {
// // background-color: #053b6a;
// .left,
// .right {
// color: #053b6a;
// }
// > i {
// color: #053b6a;
// }
// }
// .left {
// color: #053b6a;
// line-height: 48px;
// margin-left: 40px;
// }
// .right {
// color: #1d1d1d;
// line-height: 48px;
// margin-left: 20px;
// }
// }
// }
.btn-wrapper {
position: fixed;
......@@ -668,5 +836,260 @@ input[type="radio"] {
color: white;
background-color: #053b6a;
}
.drawer {
position: fixed;
top: 80px;
bottom: 0;
left: 100px;
width: 348px;
transition: 0.2s linear;
background: #fff;
// background: red;
opacity: 0;
&.opacity{
opacity: 1;
}
&.back {
left: -248px;
}
.scroll {
// height: 100%;
position: relative;
overflow-y: scroll;
overflow-x: hidden;
&::-webkit-scrollbar {
display: none;
}
.search-input {
position: absolute;
top: 14px;
left: 39px;
width: 236px;
.icon-search {
line-height: 28px;
cursor: pointer;
font-size: 13px;
}
}
.refresh-but {
// position: fixed;
position: absolute;
padding: 0px;
height: 28px;
width: 28px;
top: 14px;
left: 285px;
// width: 85px;
color: white;
background-color: #053b6a;
.icon-reset {
font-size: 13px;
}
}
}
// 左边的bar
.leftBar-wrapper {
// position: fixed;
width: 340px;
// margin-left: 20px;
margin-top: 60px;
// box-sizing: border-box;
.box-wrapper {
width: 340px;
}
.animate {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-top: none;
width: 340px;
.list-wrapper {
margin-left: 22px;
padding-top: 8px;
}
.thead {
display: flex;
font-size: 14px;
margin-bottom: 8px;
> div {
// border-right: 1px solid #cccccc;
box-sizing: border-box;
// padding-left: 5px;
color: #053b6a;
font-weight: 600;
}
}
.deviceList {
cursor: pointer;
margin-bottom: 2px;
box-sizing: border-box;
border-bottom: 1px solid #053b6a00;
color: #1d1d1d;
&:hover {
box-sizing: border-box;
border-bottom: 1px solid #053b6a;
color: #053b6a;
font-weight: 600;
}
&.topActive {
// border-top: 1px solid #cccccc;
}
display: flex;
// border-bottom: 1px solid #cccccc;
// justify-content: space-between;
> div {
// flex: 1;
font-size: 14px;
// border-right: 1px solid #cccccc;
box-sizing: border-box;
// padding-left: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
// border-right: 1px solid #cccccc;
}
}
.no {
width: 50px;
}
.name {
// border-right: none;
flex: 1;
text-align: center;
}
.code {
width: 112px;
text-align: center;
}
}
.box {
width: 348px;
height: 48px;
padding-left: 20px;
display: flex;
background-color: #ffffff;
box-sizing: border-box;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
cursor: pointer;
position: relative;
// box-sizing: border-box;
&.firstbox {
border-top: 1px solid rgba(0, 0, 0, 0.1);
// box-sizing: border-box;
&:hover {
border-top: 1px solid rgba(5, 59, 106, 0);
}
}
&:hover {
box-sizing: border-box;
background-color: rgba(5, 59, 106, 0.1);
border-bottom: none !important;
}
.upPic {
display: inline-block;
margin-left: 64px;
line-height: 48px;
font-size: 16px;
color: #053b6a;
}
> i.ju {
position: absolute;
display: inline-block;
width: 15px;
height: 15px;
background: #fff;
border: 1px solid #cccccc;
left: 45px;
top: 16px;
// top: ;
z-index: 1;
border-radius: 2px;
}
> i.bingo {
z-index: 2;
position: absolute;
// line-height: 48px;
left: 45px;
top: 16px;
color: #fff;
}
> i.arrow-right {
position: absolute;
right: 32px;
top: 16px;
transition: 0.3s linear;
&.active {
transform: rotate(90deg);
}
}
&.active {
// background-color: #053b6a;
.left,
.right {
color: #053b6a;
}
> i {
color: #053b6a;
}
}
.left {
color: #053b6a;
line-height: 48px;
margin-left: 28px;
.iconfont {
font-size: 22px;
}
}
.right {
color: #1d1d1d;
line-height: 48px;
font-size: 16px;
margin-left: 4px;
}
}
.goback {
display: flex;
justify-content: space-between;
.minMax {
font-size: 14px;
line-height: 28px;
box-sizing: border-box;
padding-left: 3px;
}
.btn-w {
width: 100%;
text-align: center;
padding-bottom: 2px;
.btn {
border-radius: 50%;
// width: 14px;
// height: 14px;
padding: 2px;
}
.btn-w-num {
display: inline-block;
font-size: 14px;
padding: 0px 5px;
}
}
}
}
// 开关
.switch {
position: absolute;
font-size: 30px;
right: -27px;
top: 50%;
margin-top: -30px;
width: 40px;
border-radius: 40%;
overflow: hidden;
cursor: pointer;
i {
background: #fff;
}
}
}
</style>
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ b651ddc3
......@@ -75,17 +75,14 @@
@callback="CreateWorkCallBack"
/>
<div ref="drawer" class="drawer" :class="{ back: backFlag }">
<div
ref="drawer"
class="drawer"
:class="{ back: backFlag, opacity: drawerOpacity }"
>
<div class="switch" @click="backFlag = !backFlag">
<!-- <i
:class="{
'el-icon-arrow-left': !backFlag,
'el-icon-arrow-right': backFlag,
}"
></i> -->
<img v-if="!backFlag" src="@/assets/images/l.png" alt="" />
<img v-else src="@/assets/images/r.png" alt="" />
<!-- <i class="el-icon-arrow-right"></i> -->
</div>
<!-- 只能动态传入内嵌盒子的高 -->
<div class="scroll" :style="{ height: `${boxHeight}px` }">
......@@ -194,12 +191,8 @@
</div>
</div>
</template>
<!-- 翻页 -->
<div class="goback">
<!-- <div class="minMax">
页数
{{ item.nowPage }}/{{ item.maxPage }}
</div> -->
<div class="btn-w">
<el-button
class="btn backPage"
......@@ -346,6 +339,7 @@ export default {
alarmObj: { alarmId: "", type: "" },
// 左边抽屉 内嵌scroll盒子的高
boxHeight: "",
drawerOpacity: false,
//抽屉是否收回
backFlag: true,
};
......@@ -473,7 +467,8 @@ export default {
},
// 隐患
getMapHiddenTroublelist(queryParams) {
return getMapHiddenTroublelist({ dealStatus: 3 }).then((res) => {
return getMapHiddenTroublelist().then((res) => {
console.log(res);
if (res.code == 200) {
res.data.forEach((item) => {
console.log("隐患", item);
......@@ -1206,9 +1201,9 @@ export default {
},
beforeDestroy() {
// 让抽屉继续隐身
console.log("移除window事件");
map.clearMap();
window.removeEventListener("mousedown", this.barClose);
// 关闭scoket
if (this.ws) {
......@@ -1228,93 +1223,93 @@ export default {
bottom: 0;
width: 100%;
}
.btn-wrapper {
position: fixed;
right: 32px;
top: 100px;
.myBtn {
display: flex;
justify-content: space-between;
.el-btn {
width: 144px;
height: 44px;
background-color: #053b6a;
margin-right: 22px;
border-radius: 4px;
text-align: center;
line-height: 44px;
color: #fff;
cursor: pointer;
font-size: 18px;
display: flex;
justify-content: space-between;
&.active {
background: #31eaea;
color: #053b6a !important;
}
.left {
padding-left: 38px;
i {
font-size: 18px;
}
}
.right {
padding-right: 38px;
}
.newLetf {
margin-left: 20px;
}
.newRight {
margin-right: 20px;
position: relative;
i {
position: absolute;
right: 0px;
top: 1px;
font-size: 30px;
}
}
}
}
.animate {
.option {
.op-btn {
width: 144px;
height: 38px;
border-radius: 0;
color: #053b6a;
line-height: 38px;
background-color: #fff;
cursor: pointer;
position: relative;
border: 1px solid #cccccc;
border-top: 0;
&.active {
background-image: url("../../../assets/images/bac1.png");
}
.left {
position: relative;
margin-right: 30px;
margin-left: 22px;
i {
position: absolute;
top: -7px;
font-size: 20px;
}
}
.right {
display: inline-block;
font-size: 14px;
line-height: 38px;
}
// .btn-wrapper {
// position: fixed;
// right: 32px;
// top: 100px;
// .myBtn {
// display: flex;
// justify-content: space-between;
// .el-btn {
// width: 144px;
// height: 44px;
// background-color: #053b6a;
// margin-right: 22px;
// border-radius: 4px;
// text-align: center;
// line-height: 44px;
// color: #fff;
// cursor: pointer;
// font-size: 18px;
// display: flex;
// justify-content: space-between;
// &.active {
// background: #31eaea;
// color: #053b6a !important;
// }
// .left {
// padding-left: 38px;
// i {
// font-size: 18px;
// }
// }
// .right {
// padding-right: 38px;
// }
// .newLetf {
// margin-left: 20px;
// }
// .newRight {
// margin-right: 20px;
// position: relative;
// i {
// position: absolute;
// right: 0px;
// top: 1px;
// font-size: 30px;
// }
// }
// }
// }
// .animate {
// .option {
// .op-btn {
// width: 144px;
// height: 38px;
// border-radius: 0;
// color: #053b6a;
// line-height: 38px;
// background-color: #fff;
// cursor: pointer;
// position: relative;
// border: 1px solid #cccccc;
// border-top: 0;
// &.active {
// background-image: url("../../../assets/images/bac1.png");
// }
// .left {
// position: relative;
// margin-right: 30px;
// margin-left: 22px;
// i {
// position: absolute;
// top: -7px;
// font-size: 20px;
// }
// }
// .right {
// display: inline-block;
// font-size: 14px;
// line-height: 38px;
// }
&:hover {
background-image: url("../../../assets/images/bac1.png");
}
}
}
}
}
// &:hover {
// background-image: url("../../../assets/images/bac1.png");
// }
// }
// }
// }
// }
.input-card {
display: flex;
flex-direction: column;
......@@ -1373,6 +1368,11 @@ input[type="radio"] {
transition: 0.2s linear;
background: #fff;
// background: red;
opacity: 0;
// 优化抽屉出来回去
&.opacity {
opacity: 1;
}
&.back {
left: -348px;
}
......@@ -1439,21 +1439,21 @@ input[type="radio"] {
// border-right: 1px solid #cccccc;
box-sizing: border-box;
// padding-left: 5px;
color: #053B6A;
color: #053b6a;
font-weight: 600;
}
}
.deviceList {
cursor: pointer;
margin-bottom: 2px;
box-sizing: border-box;
border-bottom: 1px solid #053b6a00;
color: #1D1D1D;
color: #1d1d1d;
&:hover {
box-sizing: border-box;
border-bottom: 1px solid #053b6a;
color: #053B6A;
color: #053b6a;
font-weight: 600;
}
&.topActive {
// border-top: 1px solid #cccccc;
......@@ -1589,18 +1589,6 @@ input[type="radio"] {
// width: 14px;
// height: 14px;
padding: 2px;
&:active {
// border-color: #053b6a;
// color: #053b6a;
// outline: none;
}
&:hover {
// background: #053b6a;
// color: #053b6a;
}
}
.goPage {
// margin-left: 0;
}
.btn-w-num {
display: inline-block;
......@@ -1621,7 +1609,6 @@ input[type="radio"] {
border-radius: 40%;
overflow: hidden;
cursor: pointer;
// background: #fff;
i {
background: #fff;
}
......
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