Skip to content

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

Merge branch 'develop_jzl'

parents 77e76c21 5295048e
Hide 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 @@ ...@@ -13,7 +13,7 @@
<div class="text-wrapper"> <div class="text-wrapper">
<div class="eq-text">设备类型：<span>{{title}}</span></div> <div class="eq-text">设备类型：<span>{{title}}</span></div>
<div class="eq-text">设备型号：<span>{{data.deviceModel}}</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 class="eq-text">物联网编号：<span>{{data.iotNo}}</span></div>
</div> </div>
<div class="pic"> <div class="pic">
......
gassafety-web/src/components/PopWindowGis/markerInfoWindow.vue
View file @ b651ddc3
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
设备型号：<span>{{ data.deviceModel }}</span> 设备型号：<span>{{ data.deviceModel }}</span>
</div> </div>
<div class="eq-text"> <div class="eq-text">
所属管道：<span>{{ data.pipeCode }}</span> 所属管道：<span>{{ data.pipeName }}</span>
</div> </div>
<div class="eq-text"> <div class="eq-text">
物联网编号：<span>{{ data.iotNo }}</span> 物联网编号：<span>{{ data.iotNo }}</span>
......
gassafety-web/src/components/PopWindowGis/markerInfoWindowWarn.vue
View file @ b651ddc3
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
设备型号：<span>{{ data.deviceModel }}</span> 设备型号：<span>{{ data.deviceModel }}</span>
</div> </div>
<div class="eq-text"> <div class="eq-text">
所属管道：<span>{{ data.pipeCode }}</span> 所属管道：<span>{{ data.pipeName }}</span>
</div> </div>
<div class="eq-text"> <div class="eq-text">
物联网编号：<span>{{ data.iotNo }}</span> 物联网编号：<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 { ...@@ -34,6 +34,7 @@ class gaodeMap {
mouseTool = null; mouseTool = null;
myMap = null; myMap = null;
showInfoWindow = null; showInfoWindow = null;
view = null;
//构造函数中设置中央点默认值 //构造函数中设置中央点默认值
constructor(center) { constructor(center) {
...@@ -86,6 +87,16 @@ class gaodeMap { ...@@ -86,6 +87,16 @@ class gaodeMap {
// console.log("缩放开始") // console.log("缩放开始")
this.closeInfoWindow(); this.closeInfoWindow();
}); });
this.myMap.on("moveend", () => {
// console.log("缩放开始")
if (!this.onceFlag) {
this.onceFlag = true;
this.view.backFlag = false;
// 让抽屉不在隐身
this.view.drawerOpacity = true;
}
});
this.districtBoundaries(); this.districtBoundaries();
} }
...@@ -987,10 +998,10 @@ class gaodeMap { ...@@ -987,10 +998,10 @@ class gaodeMap {
} }
}); });
let infoWindow = new AMap.InfoWindow({ let infoWindow = new AMap.InfoWindow({
isCustom:true, isCustom: true,
content: `<span style='border:1px solid #80d8ff;background:#fff'>${pipeName}</span>`, content: `<span style='border:1px solid #80d8ff;background:#fff'>${pipeName}</span>`,
anchor: "left-top", anchor: "left-top",
offset: new AMap.Pixel(20, -20), offset: new AMap.Pixel(20, -20)
}); });
polyline.on("mouseover", e => { polyline.on("mouseover", e => {
const options = polyline.getOptions(); const options = polyline.getOptions();
...@@ -1007,7 +1018,7 @@ class gaodeMap { ...@@ -1007,7 +1018,7 @@ class gaodeMap {
map.add(polyline); map.add(polyline);
const path = eval(coordinates)[0]; const path = eval(coordinates)[0];
// map.setFitView(); // map.setFitView();
map.setCenter([+path[0],+path[1]], false) map.setCenter([+path[0], +path[1]], false);
// const lntlat = eval(coordinates)[0]; // const lntlat = eval(coordinates)[0];
// map.panTo(lntlat) // map.panTo(lntlat)
......
gassafety-web/src/utils/gaodeMapView.js
View file @ b651ddc3
...@@ -29,13 +29,14 @@ export const DEVICE_TYPE = { ...@@ -29,13 +29,14 @@ export const DEVICE_TYPE = {
PRESSUREGAGE: "7", PRESSUREGAGE: "7",
INSPECTOR: "8", INSPECTOR: "8",
SMALLINSPECTOR: "workPoint", SMALLINSPECTOR: "workPoint",
TROUBLE:"trouble" TROUBLE: "trouble"
}; };
class gaodeMap { class gaodeMap {
// 所有线的数组 // 所有线的数组
polyLines = []; polyLines = [];
//值班人员的单独数组，轨迹的时候使用 //值班人员的单独数组，轨迹的时候使用
workerManArr = []; workerManArr = [];
troubles=[];
// 值班人员对象的arr // 值班人员对象的arr
workerManMarkArr = []; workerManMarkArr = [];
// 是否开启新增 // 是否开启新增
...@@ -115,7 +116,10 @@ class gaodeMap { ...@@ -115,7 +116,10 @@ class gaodeMap {
if (!this.onceFlag) { if (!this.onceFlag) {
this.onceFlag = true; this.onceFlag = true;
this.view.backFlag = false; this.view.backFlag = false;
// 让抽屉不在隐身
this.view.drawerOpacity = true;
} }
// 每次地图移动结束，就让地图可以缩放 // 每次地图移动结束，就让地图可以缩放
let options = this.myMap.getStatus(); let options = this.myMap.getStatus();
options.scrollWheel = true; options.scrollWheel = true;
...@@ -271,17 +275,14 @@ class gaodeMap { ...@@ -271,17 +275,14 @@ class gaodeMap {
} }
// 隐患 // 隐患
if(DEVICE_TYPE.TROUBLE == markerType){ if (DEVICE_TYPE.TROUBLE == markerType) {
console.log("隐患上图") this.troubles.push(marker)
} }
if ( if (
DEVICE_TYPE.WORKORDER != markerType && DEVICE_TYPE.WORKORDER != markerType &&
DEVICE_TYPE.INSPECTOR != markerType && DEVICE_TYPE.INSPECTOR != markerType &&
DEVICE_TYPE.SMALLINSPECTOR != markerType&& DEVICE_TYPE.SMALLINSPECTOR != markerType &&
DEVICE_TYPE.TROUBLE != markerType DEVICE_TYPE.TROUBLE != markerType
) { ) {
// marker.content = this.getMarketContent(data, markerInfoWindow); // marker.content = this.getMarketContent(data, markerInfoWindow);
...@@ -369,6 +370,7 @@ class gaodeMap { ...@@ -369,6 +370,7 @@ class gaodeMap {
return marker; return marker;
} }
// 值班人员
wokerManOpen = e => { wokerManOpen = e => {
this.markerType = e.target.markerType; this.markerType = e.target.markerType;
e.target.content = this.getMarketContent(e.target.data); e.target.content = this.getMarketContent(e.target.data);
......
gassafety-web/src/views/device/map/index.vue
View file @ b651ddc3
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
</div> </div>
</div> </div>
<el-input <!-- <el-input
v-model="keyWord" v-model="keyWord"
placeholder="点击输入" placeholder="点击输入"
id="tipinput" id="tipinput"
...@@ -74,9 +74,9 @@ ...@@ -74,9 +74,9 @@
> >
<el-button icon="el-icon-refresh" class="refresh-but" @click="refreshMap()" <el-button icon="el-icon-refresh" class="refresh-but" @click="refreshMap()"
>重置</el-button >重置</el-button
> > -->
<div class="leftBar-wrapper"> <!-- <div class="leftBar-wrapper">
<div <div
v-for="item in changeBtnData" v-for="item in changeBtnData"
:key="item.value" :key="item.value"
...@@ -92,6 +92,150 @@ ...@@ -92,6 +92,150 @@
</div> </div>
<i class="el-icon-check"></i> <i class="el-icon-check"></i>
</div> </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>
</div> </div>
</template> </template>
...@@ -110,8 +254,15 @@ export default { ...@@ -110,8 +254,15 @@ export default {
radio1: "", radio1: "",
// 1新建，2编辑，3删除,点按钮变色 // 1新建，2编辑，3删除,点按钮变色
targetNum: 0, targetNum: 0,
backFlag: true,
// 抽屉内的滚动条的高需要赋值赋值
boxHeight: "",
drawerOpacity:false,
// 左边的bar的active判定 // 左边的bar的active判定
leftBarNum: [1, 2, 3, 4, 7], leftBarNum: [1, 2, 3, 4, 7],
// 右转箭头的样式active判定
arrowRightNum: [],
// 新建里的值 // 新建里的值
iconClass: "icon-create", iconClass: "icon-create",
...@@ -122,26 +273,31 @@ export default { ...@@ -122,26 +273,31 @@ export default {
value: 1, value: 1,
icon: "icon-gd", icon: "icon-gd",
label: "管道", label: "管道",
list: [],
}, },
{ {
value: 2, value: 2,
icon: "icon-tyx", icon: "icon-tyx",
label: "调压箱", label: "调压箱",
list: [],
}, },
{ {
value: 3, value: 3,
icon: "icon-fmj", icon: "icon-fmj",
label: "阀门井", label: "阀门井",
list: [],
}, },
{ {
value: 4, value: 4,
icon: "icon-llj", icon: "icon-llj",
label: "流量计", label: "流量计",
list: [],
}, },
{ {
value: 7, value: 7,
icon: "icon-ylb", icon: "icon-ylb",
label: "压力表", label: "压力表",
list: [],
}, },
], ],
keyWord: "", keyWord: "",
...@@ -149,11 +305,13 @@ export default { ...@@ -149,11 +305,13 @@ export default {
}, },
mounted() { mounted() {
this.initMap(); this.initMap();
this.boxHeight = document.body.clientHeight - 81;
}, },
methods: { methods: {
initMap() { initMap() {
let gaoMap = new gaodeMap("石家庄"); let gaoMap = new gaodeMap("石家庄");
this.gaoMap = gaoMap; this.gaoMap = gaoMap;
this.gaoMap.view = this;
window.addEventListener("click", this.barClose); window.addEventListener("click", this.barClose);
gaoMap.addMouseTool(); gaoMap.addMouseTool();
gaoMap.searchTips("tipinput"); gaoMap.searchTips("tipinput");
...@@ -360,7 +518,7 @@ export default { ...@@ -360,7 +518,7 @@ export default {
this.gaoMap.closeAddMarker(); this.gaoMap.closeAddMarker();
this.gaoMap.removeMarkerDragg(); this.gaoMap.removeMarkerDragg();
this.gaoMap.mapOperateType = "normal"; this.gaoMap.mapOperateType = "normal";
this.leftBarNum=[1,2,3,4,7] this.leftBarNum = [1, 2, 3, 4, 7];
// map.remove(this.gaodeMap.markerOverlays); // map.remove(this.gaodeMap.markerOverlays);
}, },
search() { search() {
...@@ -405,8 +563,18 @@ export default { ...@@ -405,8 +563,18 @@ export default {
this.targetNum = 0; this.targetNum = 0;
map.clearMap(); map.clearMap();
this.initMap(); this.initMap();
this.leftBarNum=[1,2,3,4,7]; this.leftBarNum = [1, 2, 3, 4, 7];
this.keyWord=""; 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 { ...@@ -420,67 +588,67 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
// 解决地图下拉框 // 解决地图下拉框
#container{ #container {
position: fixed; position: fixed;
top: 80px; top: 80px;
bottom:0; bottom: 0;
width: 100%; width: 100%;
} }
// 左边的bar // 左边的bar
.leftBar-wrapper { // .leftBar-wrapper {
position: fixed; // position: fixed;
left: 100px; // left: 100px;
top: 150px; // top: 150px;
.box { // .box {
width: 180px; // width: 180px;
height: 48px; // height: 48px;
display: flex; // display: flex;
background-color: #ffffff; // background-color: #ffffff;
box-sizing: border-box; // box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.1); // border: 1px solid rgba(0, 0, 0, 0.1);
border-top: none; // border-top: none;
cursor: pointer; // cursor: pointer;
position: relative; // position: relative;
> i { // > i {
position: absolute; // position: absolute;
line-height: 48px; // line-height: 48px;
right: 20px; // right: 20px;
color: #fff; // color: #fff;
} // }
&:hover { // &:hover {
// background-color: #053b6a; // // background-color: #053b6a;
// color: #ffffff; // // color: #ffffff;
// > i { // // > i {
// color:#fff; // // color:#fff;
// } // // }
} // }
&:hover .left, // &:hover .left,
&:hover .right { // &:hover .right {
// color: #ffffff; // // color: #ffffff;
} // }
&.active { // &.active {
// background-color: #053b6a; // // background-color: #053b6a;
.left, // .left,
.right { // .right {
color: #053b6a; // color: #053b6a;
} // }
> i { // > i {
color: #053b6a; // color: #053b6a;
} // }
} // }
.left { // .left {
color: #053b6a; // color: #053b6a;
line-height: 48px; // line-height: 48px;
margin-left: 40px; // margin-left: 40px;
} // }
.right { // .right {
color: #1d1d1d; // color: #1d1d1d;
line-height: 48px; // line-height: 48px;
margin-left: 20px; // margin-left: 20px;
} // }
} // }
} // }
.btn-wrapper { .btn-wrapper {
position: fixed; position: fixed;
...@@ -668,5 +836,260 @@ input[type="radio"] { ...@@ -668,5 +836,260 @@ input[type="radio"] {
color: white; color: white;
background-color: #053b6a; 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> </style>
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ b651ddc3
...@@ -75,17 +75,14 @@ ...@@ -75,17 +75,14 @@
@callback="CreateWorkCallBack" @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"> <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-if="!backFlag" src="@/assets/images/l.png" alt="" />
<img v-else src="@/assets/images/r.png" alt="" /> <img v-else src="@/assets/images/r.png" alt="" />
<!-- <i class="el-icon-arrow-right"></i> -->
</div> </div>
<!-- 只能动态传入内嵌盒子的高 --> <!-- 只能动态传入内嵌盒子的高 -->
<div class="scroll" :style="{ height: `${boxHeight}px` }"> <div class="scroll" :style="{ height: `${boxHeight}px` }">
...@@ -194,12 +191,8 @@ ...@@ -194,12 +191,8 @@
</div> </div>
</div> </div>
</template> </template>
<!-- 翻页 -->
<div class="goback"> <div class="goback">
<!-- <div class="minMax">
页数
{{ item.nowPage }}/{{ item.maxPage }}
</div> -->
<div class="btn-w"> <div class="btn-w">
<el-button <el-button
class="btn backPage" class="btn backPage"
...@@ -346,6 +339,7 @@ export default { ...@@ -346,6 +339,7 @@ export default {
alarmObj: { alarmId: "", type: "" }, alarmObj: { alarmId: "", type: "" },
// 左边抽屉 内嵌scroll盒子的高 // 左边抽屉 内嵌scroll盒子的高
boxHeight: "", boxHeight: "",
drawerOpacity: false,
//抽屉是否收回 //抽屉是否收回
backFlag: true, backFlag: true,
}; };
...@@ -473,7 +467,8 @@ export default { ...@@ -473,7 +467,8 @@ export default {
}, },
// 隐患 // 隐患
getMapHiddenTroublelist(queryParams) { getMapHiddenTroublelist(queryParams) {
return getMapHiddenTroublelist({ dealStatus: 3 }).then((res) => { return getMapHiddenTroublelist().then((res) => {
console.log(res);
if (res.code == 200) { if (res.code == 200) {
res.data.forEach((item) => { res.data.forEach((item) => {
console.log("隐患", item); console.log("隐患", item);
...@@ -1206,9 +1201,9 @@ export default { ...@@ -1206,9 +1201,9 @@ export default {
}, },
beforeDestroy() { beforeDestroy() {
// 让抽屉继续隐身
console.log("移除window事件"); console.log("移除window事件");
map.clearMap(); map.clearMap();
window.removeEventListener("mousedown", this.barClose); window.removeEventListener("mousedown", this.barClose);
// 关闭scoket // 关闭scoket
if (this.ws) { if (this.ws) {
...@@ -1228,93 +1223,93 @@ export default { ...@@ -1228,93 +1223,93 @@ export default {
bottom: 0; bottom: 0;
width: 100%; width: 100%;
} }
.btn-wrapper { // .btn-wrapper {
position: fixed; // position: fixed;
right: 32px; // right: 32px;
top: 100px; // top: 100px;
.myBtn { // .myBtn {
display: flex; // display: flex;
justify-content: space-between; // justify-content: space-between;
.el-btn { // .el-btn {
width: 144px; // width: 144px;
height: 44px; // height: 44px;
background-color: #053b6a; // background-color: #053b6a;
margin-right: 22px; // margin-right: 22px;
border-radius: 4px; // border-radius: 4px;
text-align: center; // text-align: center;
line-height: 44px; // line-height: 44px;
color: #fff; // color: #fff;
cursor: pointer; // cursor: pointer;
font-size: 18px; // font-size: 18px;
display: flex; // display: flex;
justify-content: space-between; // justify-content: space-between;
&.active { // &.active {
background: #31eaea; // background: #31eaea;
color: #053b6a !important; // color: #053b6a !important;
} // }
.left { // .left {
padding-left: 38px; // padding-left: 38px;
i { // i {
font-size: 18px; // font-size: 18px;
} // }
} // }
.right { // .right {
padding-right: 38px; // padding-right: 38px;
} // }
.newLetf { // .newLetf {
margin-left: 20px; // margin-left: 20px;
} // }
.newRight { // .newRight {
margin-right: 20px; // margin-right: 20px;
position: relative; // position: relative;
i { // i {
position: absolute; // position: absolute;
right: 0px; // right: 0px;
top: 1px; // top: 1px;
font-size: 30px; // font-size: 30px;
} // }
} // }
} // }
} // }
.animate { // .animate {
.option { // .option {
.op-btn { // .op-btn {
width: 144px; // width: 144px;
height: 38px; // height: 38px;
border-radius: 0; // border-radius: 0;
color: #053b6a; // color: #053b6a;
line-height: 38px; // line-height: 38px;
background-color: #fff; // background-color: #fff;
cursor: pointer; // cursor: pointer;
position: relative; // position: relative;
border: 1px solid #cccccc; // border: 1px solid #cccccc;
border-top: 0; // border-top: 0;
&.active { // &.active {
background-image: url("../../../assets/images/bac1.png"); // background-image: url("../../../assets/images/bac1.png");
} // }
.left { // .left {
position: relative; // position: relative;
margin-right: 30px; // margin-right: 30px;
margin-left: 22px; // margin-left: 22px;
i { // i {
position: absolute; // position: absolute;
top: -7px; // top: -7px;
font-size: 20px; // font-size: 20px;
} // }
} // }
.right { // .right {
display: inline-block; // display: inline-block;
font-size: 14px; // font-size: 14px;
line-height: 38px; // line-height: 38px;
} // }
&:hover { // &:hover {
background-image: url("../../../assets/images/bac1.png"); // background-image: url("../../../assets/images/bac1.png");
} // }
} // }
} // }
} // }
} // }
.input-card { .input-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -1373,6 +1368,11 @@ input[type="radio"] { ...@@ -1373,6 +1368,11 @@ input[type="radio"] {
transition: 0.2s linear; transition: 0.2s linear;
background: #fff; background: #fff;
// background: red; // background: red;
opacity: 0;
// 优化抽屉出来回去
&.opacity {
opacity: 1;
}
&.back { &.back {
left: -348px; left: -348px;
} }
...@@ -1439,21 +1439,21 @@ input[type="radio"] { ...@@ -1439,21 +1439,21 @@ input[type="radio"] {
// border-right: 1px solid #cccccc; // border-right: 1px solid #cccccc;
box-sizing: border-box; box-sizing: border-box;
// padding-left: 5px; // padding-left: 5px;
color: #053B6A; color: #053b6a;
font-weight: 600; font-weight: 600;
} }
} }
.deviceList { .deviceList {
cursor: pointer; cursor: pointer;
margin-bottom: 2px; margin-bottom: 2px;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid #053b6a00; border-bottom: 1px solid #053b6a00;
color: #1D1D1D; color: #1d1d1d;
&:hover { &:hover {
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid #053b6a; border-bottom: 1px solid #053b6a;
color: #053B6A; color: #053b6a;
font-weight: 600;
} }
&.topActive { &.topActive {
// border-top: 1px solid #cccccc; // border-top: 1px solid #cccccc;
...@@ -1589,18 +1589,6 @@ input[type="radio"] { ...@@ -1589,18 +1589,6 @@ input[type="radio"] {
// width: 14px; // width: 14px;
// height: 14px; // height: 14px;
padding: 2px; padding: 2px;
&:active {
// border-color: #053b6a;
// color: #053b6a;
// outline: none;
}
&:hover {
// background: #053b6a;
// color: #053b6a;
}
}
.goPage {
// margin-left: 0;
} }
.btn-w-num { .btn-w-num {
display: inline-block; display: inline-block;
...@@ -1621,7 +1609,6 @@ input[type="radio"] { ...@@ -1621,7 +1609,6 @@ input[type="radio"] {
border-radius: 40%; border-radius: 40%;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
// background: #fff;
i { i {
background: #fff; 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