Skip to content

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

Merge branch 'master' of http://111.61.77.35:9999/gengdidi/gassafety into master

parents 4d7aa47a 59af78cf
Hide whitespace changes
Inline Side-by-side
Showing with 1062 additions and 469 deletions
gassafety-web/src/components/PopWindowGis/lineInfoWindow.vue
View file @ f82316af
......@@ -81,7 +81,10 @@
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div> -->
<div class="btn">
<el-button class="elbtn" type="primary">设备详情</el-button>
<span @mousedown.stop="deviceMore">
<el-button class="elbtn" type="primary">设备详情</el-button>
</span>
<!-- <el-button class="elbtn" type="primary">生成工单</el-button> -->
</div>
</div>
......@@ -107,7 +110,7 @@ export default {
methods: {
moment,
mousedown(e) {
console.log("?")
console.log("?");
return;
// console.log(this.$refs.previewImg)
this.$refs.previewImg.showViewer = true;
......@@ -126,6 +129,15 @@ export default {
close() {
this.obj.polyline.infoWindow.close();
},
deviceMore() {
console.log(this.obj.polyline.getExtData().lineData)
this.obj.polyline.getExtData().class.view.$router.push({
path: "/realtimeData/realtimedetail",
query: {
deviceId: this.obj.polyline.getExtData().lineData.pipeId,
},
});
},
},
};
</script>
......@@ -141,7 +153,7 @@ export default {
.top {
width: 100%;
height: 51px;
background-color: #053B6A;
background-color: #053b6a;
.text {
font-weight: 600;
font-size: 16px;
......@@ -230,7 +242,7 @@ export default {
box-sizing: border-box;
padding: 10px 0 2px 22px;
border-bottom: 1px solid #e2e2e2;
color:#FE5966;
color: #fe5966;
& > div {
font-size: 14px;
font-weight: 400;
......
gassafety-web/src/components/PopWindowGis/lineInfoWindowWarn.vue
View file @ f82316af
......@@ -85,7 +85,7 @@
</div>
</div>
<div @click.stop="stopPropatation" class="btn">
<span>
<span @mousedown.stop="deviceMore">
<el-button class="elbtn" type="primary">设备详情</el-button>
</span>
<span v-if="orderId" @mousedown.stop="createWork">
......@@ -160,17 +160,29 @@ export default {
},
CreateWorkCallBack() {
console.log("polylineCallBack");
const polyline = this.obj.polyline.getExtData().lineData.view.gaoMap.polyLines.filter(
(item) => {
return item.getExtData().lineData.alarmId == this.obj.polyline.getExtData().lineData.alarmId;
}
)[0];
const polyline = this.obj.polyline
.getExtData()
.lineData.view.gaoMap.polyLines.filter((item) => {
return (
item.getExtData().lineData.alarmId ==
this.obj.polyline.getExtData().lineData.alarmId
);
})[0];
console.log("polyline.getExtData()", polyline.getExtData().lineData);
let options = polyline.getExtData();
// 暂时传值，到时候回重新刷新
options.lineData.orderId = "1";
polyline.setExtData(options);
},
deviceMore() {
console.log(this.obj.polyline.getExtData().lineData);
this.obj.polyline.getExtData().class.view.$router.push({
path: "/deviceAlarm/alarmdetail",
query: {
alarmId: this.obj.polyline.getExtData().lineData.alarmId,
},
});
},
},
};
</script>
......
gassafety-web/src/components/PopWindowGis/markerInfoWindow.vue
View file @ f82316af
......@@ -68,7 +68,9 @@
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div> -->
<div class="btn">
<el-button class="elbtn" type="primary">设备详情</el-button>
<span @mousedown.stop="deviceMore">
<el-button class="elbtn" type="primary">设备详情</el-button>
</span>
<!-- <el-button class="elbtn" type="primary">生成工单</el-button> -->
</div>
</div>
......@@ -87,6 +89,14 @@ export default {
},
methods: {
moment,
deviceMore() {
this.data.class.view.$router.push({
path: "/realtimeData/realtimedetail",
query: {
deviceId: this.data.deviceId,
},
});
},
},
};
</script>
......
gassafety-web/src/components/PopWindowGis/markerInfoWindowWarn.vue
View file @ f82316af
......@@ -72,7 +72,7 @@
</div>
</div>
<div class="btn">
<span>
<span @mousedown.stop="deviceMore">
<el-button class="elbtn" type="primary">设备详情</el-button>
</span>
<span v-if="orderId" @mousedown.stop="createWork">
......@@ -115,10 +115,9 @@ export default {
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.CreateWorkCallBack = this.CreateWorkCallBack;
},
CreateWorkCallBack() {
// console.log("markerCallBack")
const marker = this.data.view.gaoMap.markers.filter((item) => {
return item.getExtData().alarmId == this.data.alarmId;
......@@ -129,6 +128,14 @@ export default {
options.orderId = "1";
marker.setExtData(options);
},
deviceMore() {
this.data.view.$router.push({
path: "/deviceAlarm/alarmdetail",
query: {
alarmId: this.data.alarmId,
},
});
},
},
beforeDestroy() {
// this.data.view.createWorkOpen = false;
......
gassafety-web/src/utils/gaodeMapView.js
View file @ f82316af
......@@ -48,6 +48,8 @@ class gaodeMap {
showInfoWindow = null;
// 工人轨迹用的窗口
markerPassedPolylineInfoWindow = null;
view = null;
handleInfoWindowOpenFunc = null;
//构造函数中设置中央点默认值
constructor(center) {
......@@ -100,8 +102,15 @@ class gaodeMap {
// console.log("缩放开始")
this.closeInfoWindow();
});
this.myMap.on("moveend", () => {
if (this.handleInfoWindowOpenFunc) {
this.handleInfoWindowOpenFunc();
this.handleInfoWindowOpenFunc = null;
}
});
this.districtBoundaries();
}
// 地图移动结束
/**
* 获取map
......@@ -155,7 +164,10 @@ class gaodeMap {
}
});
}
// 地图中点平移
panTo(lnglat) {
this.myMap.panTo(lnglat);
}
/**
* 添加Market
* @param markerType
......@@ -215,18 +227,22 @@ class gaodeMap {
// // console.log(Card)
// // e.target.content = this.getMarketContent(data);
// });
marker.on("mouseover", e => {
that.markerType = markerType;
e.target.content = this.getMarketContent(data);
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
that.boxCollision(infoWindow.dom);
// that.addCloneDome(e.target, infoWindow);
// infoWindow.close();
that.workerManInfoWindow = infoWindow;
});
// marker.on("mouseover", e => {
// that.markerType = markerType;
// e.target.content = this.getMarketContent(data);
// infoWindow.setContent(e.target.content);
// infoWindow.open(map, e.target.getPosition());
// that.boxCollision(infoWindow.dom);
// // that.addCloneDome(e.target, infoWindow);
// // infoWindow.close();
// that.workerManInfoWindow = infoWindow;
// });
marker.markerType=markerType;
marker.data = data;
marker.infoWindow =infoWindow;
marker.on("mouseover", this.wokerManOpen);
marker.on("mousedown", e => {
console.log(data);
// console.log(data);
that.closeInfoWindow();
if (marker.workerPoint) return;
that.workerManView({
......@@ -246,10 +262,10 @@ class gaodeMap {
DEVICE_TYPE.SMALLINSPECTOR != markerType
) {
// marker.content = this.getMarketContent(data, markerInfoWindow);
marker.on("mouseover", infoOpen);
marker.infoWindow = infoWindow;
marker.on("mouseover", that.infoOpen);
marker.on("mouseout", infoClose);
marker.setExtData(data);
that.deviceType = markerType;
let editWindow = that.createInfowindow("编辑");
editWindow.fileArr =
......@@ -326,55 +342,67 @@ class gaodeMap {
//infoWindow.close(map, e.target.getPosition());
}
function infoOpen(e) {
if (e.target.getExtData().alarmState == 1) {
if (e.target.getExtData().deviceType == 4) {
that.markerType = "7";
} else if (e.target.getExtData().deviceType <= 3) {
that.markerType = +e.target.getExtData().deviceType + 1 + "";
}
console.log("that.markerType", that.markerType);
// 警告状态这样就要换infowindow
e.target.content = that.getMarketContent(
e.target.getExtData(),
markerInfoWindowWarn
);
} else {
// 初始化为1的时候是没有的，所以需要判断一下
// that.markerType =
// e.target.getExtData().deviceType + "" == 1
// ? "2"
// : e.target.getExtData().deviceType + "";
// 上图状态跟后台状态不统一，所以需要判断一下
if (e.target.getExtData().deviceType == 4) {
that.markerType = "7";
} else if (e.target.getExtData().deviceType <= 3) {
that.markerType = +e.target.getExtData().deviceType + 1 + "";
}
console.log("that.markerType");
e.target.content = that.getMarketContent(
e.target.getExtData(),
markerInfoWindow
);
}
let options = map.getStatus();
options.scrollWheel = false;
map.setStatus(options);
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
// function infoOpen(e) {}
// 检测是否碰到底部的bottomData
that.boxCollision(infoWindow.dom);
return marker;
}
wokerManOpen=(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);
// that.addCloneDome(e.target, infoWindow);
// infoWindow.close();
that.markerInfoWindow = infoWindow;
this.workerManInfoWindow = e.target.infoWindow;
}
// 鼠标移入设备时候实行的函数
infoOpen = e => {
if (e.target.getExtData().alarmState == 1) {
if (e.target.getExtData().deviceType == 4) {
this.markerType = "7";
} else if (e.target.getExtData().deviceType <= 3) {
this.markerType = +e.target.getExtData().deviceType + 1 + "";
}
// console.log("this.markerType", this.markerType);
// 警告状态这样就要换infowindow
e.target.content = this.getMarketContent(
e.target.getExtData(),
markerInfoWindowWarn
);
} else {
// 初始化为1的时候是没有的，所以需要判断一下
// that.markerType =
// e.target.getExtData().deviceType + "" == 1
// ? "2"
// : e.target.getExtData().deviceType + "";
// 上图状态跟后台状态不统一，所以需要判断一下
if (e.target.getExtData().deviceType == 4) {
this.markerType = "7";
} else if (e.target.getExtData().deviceType <= 3) {
this.markerType = +e.target.getExtData().deviceType + 1 + "";
}
console.log("this.markerType");
e.target.content = this.getMarketContent(
e.target.getExtData(),
markerInfoWindow
);
}
return marker;
}
let options = map.getStatus();
options.scrollWheel = false;
map.setStatus(options);
e.target.infoWindow.setContent(e.target.content);
e.target.infoWindow.open(map, e.target.getPosition());
// 检测是否碰到底部的bottomData
this.boxCollision(e.target.infoWindow.dom);
// that.addCloneDome(e.target, infoWindow);
// infoWindow.close();
this.markerInfoWindow = e.target.infoWindow;
};
/**
* marker添加拖拽事件
*/
......@@ -397,7 +425,9 @@ class gaodeMap {
* @param data
* @returns {string}
*/
getMarketContent(data, markerInfoWindow) {
getMarketContent(Data, markerInfoWindow) {
let data = { ...Data };
data.class = this;
console.log("this.markerType", this.markerType);
switch (this.markerType) {
case DEVICE_TYPE.REGEULATORBOX: {
......@@ -703,7 +733,8 @@ class gaodeMap {
type: "line",
//当前line状态 0:正常状态 1:正在编辑状态
isState: 0,
lineData: item
lineData: item,
class: this
}
});
......@@ -711,69 +742,8 @@ class gaodeMap {
// 信息窗体
this.newLineAddEvent(polyline);
//添加事件
polyline.on("mouseover", e => {
if (this.lineType == 1) return;
// 生成infoWindow
let infoWindow;
// 警告状态时
if (e.target.getExtData().lineData.alarmState == 1) {
infoWindow = this.lineMouseOver(polyline, lineInfoWindowWarn, item);
} else {
infoWindow = this.lineMouseOver(polyline, lineInfoWindow, item);
}
infoWindow.open(map, e.lnglat);
// 上方导航的高
const topBar = 81;
// 坐标导航的宽
const leftBar = 100;
// 屏幕可视区的宽高
const {
clientWidth: windowClientWidth,
clientHeight: windowClientHeight
} = document.body;
// 弹出的信息窗口的宽高
const {
offsetWidth: infoWindowWidth,
offsetHeight: infoWindowHeight
} = infoWindow.dom;
// 鼠标碰到线后的位置
const { clientX: mouseClientX, clientY: mouseClientY } = e.originEvent;
// 鼠标到左边界的距离
const offsetLeftX = mouseClientX - 100;
// 鼠标到右边界的距离
const offsetRightX = windowClientWidth - mouseClientX;
const offsetTopY = mouseClientY - 81;
const offsetBottomY = windowClientHeight - mouseClientY;
polyline.on("mouseover", this.polylineMouseOver);
const offsetY = mouseClientY - 80 - infoWindowHeight;
let X = 20,
Y = -20;
if (offsetLeftX <= infoWindowWidth) {
//console.log("靠左了");
X = 20;
} else if (offsetRightX <= infoWindowWidth) {
//console.log("靠右了");
X = -infoWindowWidth - 20;
}
if (offsetTopY <= infoWindowHeight) {
//console.log("靠上了");
Y = 20;
} else if (offsetBottomY <= infoWindowHeight + 81) {
//console.log("靠下了");
Y = -infoWindowHeight - 20;
}
if (polyline.getExtData().lineData.alarmState == 1) {
polyline.setOptions({ strokeColor: "#ff0000" });
} else {
polyline.setOptions({ strokeColor: "#FF5A67" });
}
infoWindow.setOffset(new AMap.Pixel(X, Y));
this.boxCollision(infoWindow.dom);
this.showInfoWindow = infoWindow;
// const
});
polyline.on("mouseout", e => {
// console.log("polyline.getExtData().lineData.alarmState",polyline.getExtData().lineData.alarmState)
if (polyline.getExtData().lineData.alarmState == 1) return;
......@@ -787,6 +757,81 @@ class gaodeMap {
// 缩放地图到合适的视野级别
// map.setFitView();
}
// 鼠标移入线条执行
polylineMouseOver = e => {
let polyline = e.target;
if (this.lineType == 1) return;
// 生成infoWindow
let infoWindow;
// 警告状态时
const item = e.target.getExtData().lineData;
// console.log("item",item)
if (e.target.getExtData().lineData.alarmState == 1) {
infoWindow = this.lineMouseOver(polyline, lineInfoWindowWarn, item);
} else {
infoWindow = this.lineMouseOver(polyline, lineInfoWindow, item);
}
infoWindow.open(map, e.lnglat);
console.log(infoWindow);
// 如果是鼠标真正移入，则计算位置，如果不是鼠标真正移入，是人为执行出现infowindow，则不计算位置
console.log("e.originEvent", e.originEvent);
if (e.originEvent) {
// 上方导航的高
const topBar = 81;
// 坐标导航的宽
const leftBar = 100;
// 屏幕可视区的宽高
const {
clientWidth: windowClientWidth,
clientHeight: windowClientHeight
} = document.body;
// 弹出的信息窗口的宽高
const {
offsetWidth: infoWindowWidth,
offsetHeight: infoWindowHeight
} = infoWindow.dom;
// 鼠标碰到线后的位置
const { clientX: mouseClientX, clientY: mouseClientY } = e.originEvent;
// 鼠标到左边界的距离
const offsetLeftX = mouseClientX - 100;
// 鼠标到右边界的距离
const offsetRightX = windowClientWidth - mouseClientX;
const offsetTopY = mouseClientY - 81;
const offsetBottomY = windowClientHeight - mouseClientY;
const offsetY = mouseClientY - 80 - infoWindowHeight;
let X = 20,
Y = -20;
if (offsetLeftX <= infoWindowWidth) {
//console.log("靠左了");
X = 20;
} else if (offsetRightX <= infoWindowWidth) {
//console.log("靠右了");
X = -infoWindowWidth - 20;
}
if (offsetTopY <= infoWindowHeight) {
//console.log("靠上了");
Y = 20;
} else if (offsetBottomY <= infoWindowHeight + 81) {
//console.log("靠下了");
Y = -infoWindowHeight - 20;
}
if (polyline.getExtData().lineData.alarmState == 1) {
polyline.setOptions({ strokeColor: "#ff0000" });
} else {
polyline.setOptions({ strokeColor: "#FF5A67" });
}
infoWindow.setOffset(new AMap.Pixel(X, Y));
} else {
infoWindow.setOffset(new AMap.Pixel(20, -20));
}
this.boxCollision(infoWindow.dom);
this.showInfoWindow = infoWindow;
// const
};
lineMouseOver(polyline, lineInfoWindow, item) {
let dom = createPop(lineInfoWindow, {
obj: { a: 123, editorPage: true, ...item, polyline }
......
gassafety-web/src/views/dataMonitoring/deviceAlarm/index.vue
View file @ f82316af
......@@ -263,7 +263,6 @@ export default {
vm.fromGisMap=false;
}
});
},
methods: {
/** 查询报警信息列表 */
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ f82316af
......@@ -63,37 +63,6 @@
</div>
</div>
<el-input
v-model="keyWord"
placeholder="点击输入"
id="tipinput"
class="search-input"
/>
<el-button icon="el-icon-search" class="search-but" @click="search()"
>搜索</el-button
>
<el-button icon="el-icon-refresh" class="refresh-but" @click="refreshMap()"
>重置</el-button
>
<div class="leftBar-wrapper">
<div
v-for="item in changeBtnData"
:key="item.value"
class="box"
:class="{ active: leftBarNum.indexOf(item.value) >= 0 }"
@click="leftBarChange(item)"
>
<div class="left">
<i class="iconfont" :class="item.icon"></i>
</div>
<div class="right">
{{ item.label }}
</div>
<i class="el-icon-check"></i>
</div>
</div>
<RightBototmData
v-show="bottomDataShow"
:class="{ classShow: !bottomDataShow }"
......@@ -105,6 +74,137 @@
:open="createWorkOpen"
@callback="CreateWorkCallBack"
/>
<div ref="drawer" class="drawer" :class="{ back: backFlag }">
<div class="switch" @click="backFlag = !backFlag">
<i
:class="{
'el-icon-arrow-left': !backFlag,
'el-icon-arrow-right': backFlag,
}"
></i>
<!-- <i class="el-icon-arrow-right"></i> -->
</div>
<!-- 只能动态传入内嵌盒子的高 -->
<div class="scroll" :style="{ height: `${boxHeight}px` }">
<el-input
v-model="keyWord"
placeholder="点击输入"
id="tipinput"
class="search-input"
/>
<el-button class="search-but" @click="search()">搜索</el-button>
<el-button class="refresh-but" @click="refreshMap()">重置</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.value != 9">
<div>
<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>
<div class="thead">
<div class="no">序号</div>
<div class="code">人员姓名</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>
</div>
</template>
<div class="goback">
<div class="minMax">
页数
{{ item.nowPage }}/{{ item.maxPage }}
</div>
<div class="btn">
<el-button
class="backPage"
type="mini"
:disabled="item.nowPage == 1"
@click.stop="pageBack(item, index)"
>上一页</el-button
>
<el-button
class="goPage"
type="mini"
:disabled="item.nowPage == item.maxPage"
@click.stop="pageGo(item, index)"
>下一页</el-button
>
</div>
</div>
</div>
</el-collapse-transition>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
......@@ -137,47 +237,79 @@ export default {
targetNum: 0,
// 左边的bar的active判定
leftBarNum: [1, 2, 3, 4, 7, 8, 9],
// 右转箭头的样式active判定
arrowRightNum: [],
// 新建里的值
iconClass: "icon-create",
createValue: 0,
createLabel: "新增",
changeBtnData: [
{
type: "0",
value: 1,
icon: "icon-gd",
label: "管道",
nowPage: 1,
maxPage: 99,
list: [],
},
{
type: "1",
value: 2,
icon: "icon-tyx",
label: "调压箱",
nowPage: 1,
maxPage: 99,
list: [],
},
{
type: "2",
value: 3,
icon: "icon-fmj",
label: "阀门井",
nowPage: 1,
maxPage: 99,
list: [],
},
{
type: "3",
value: 4,
icon: "icon-llj",
label: "流量计",
nowPage: 1,
maxPage: 99,
list: [],
},
{
type: "4",
value: 7,
icon: "icon-ylb",
label: "压力表",
nowPage: 1,
maxPage: 99,
list: [],
},
{
type: "5",
value: 8,
icon: "icon-yh",
label: "隐患",
nowPage: 1,
maxPage: 99,
list: [],
},
{
type: "6",
value: 9,
icon: "icon-zhibanrenyuan",
label: "值班人员",
nowPage: 1,
maxPage: 99,
list: [],
},
],
// 这是图上所有的点
allList: [[], [], [], [], [], [], []],
keyWord: "",
// 右下角的数据data
rightBototmData: [],
......@@ -186,14 +318,27 @@ export default {
createWorkOpen: false,
// 查询用的
alarmId: "",
// 左边抽屉 内嵌scroll盒子的高
boxHeight: "",
//抽屉是否收回
backFlag: true,
};
},
created() {
// 让左边的框隐藏
this.$store.dispatch("app/toggleDevice", "mobile");
},
mounted() {
this.initMap();
this.boxHeight = document.body.clientHeight - 81;
},
watch: {
changeBtnData: {
handler(newName, oldName) {},
deep: true,
// immediate: true,
},
},
methods: {
initMap() {
......@@ -205,12 +350,13 @@ export default {
// 获取地图上设备资源
this.getResource();
// 把组件this传入类
this.gaoMap.view = this;
// 右下角数据 跟值班人员
this.rightBottomData();
this.backFlag = false;
},
// 获取地图上的资源
getResource() {
this.getDeviceInfo()
......@@ -222,135 +368,75 @@ export default {
})
.then((res) => {
if (res == 200) {
console.log("管道", res);
// 值班人员
return this.getInspectorLocations();
}
})
.then((res) => {
if (res == 200) {
// 所有设备上图结束之后，左边的抽屉加载数据
this.pipeList();
// 获取报警资源
this.getSelectAlarmDevice();
// selectAlarmDevice
}
});
},
// 右下角数据
async rightBottomData() {
await countPipeLength().then((res) => {
// console.log("管道管道管道管道管道管道", res);
if (res.code == 200) {
let obj;
if (res.data > 0) {
obj = { number: res.data, type: "99" };
} else {
obj = { number: 0, type: "99" };
getDeviceInfo(queryParams) {
this.loading = true;
return getAllDeviceInfo(queryParams).then((response) => {
if (response.code == 200) {
console.log("所有设备", response.data);
//各种苏剧分离存储
this.deviceClassify(response.data);
for (var i = 0; i < response.data.length; i++) {
if ("1" == response.data[i].deviceType) {
this.gaoMap.addMarker(
DEVICE_TYPE.REGEULATORBOX,
response.data[i]
);
}
if ("2" == response.data[i].deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.VALUEWELL, response.data[i]);
}
if ("3" == response.data[i].deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.FLOWMETER, response.data[i]);
}
if ("4" == response.data[i].deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.PRESSUREGAGE, response.data[i]);
}
}
this.rightBototmData.push(obj);
}
this.loading = false;
return response.code;
});
await countDeviceByType().then((res) => {
console.log("markerresresresresresresresresresresresres", res);
},
getPipeList(queryParams) {
return pipeAllInfoList(queryParams).then((res) => {
console.log("管道", res);
if (res.code == 200) {
let obj = [
{
number: 0,
type: "1",
},
{
number: 0,
type: "2",
},
{
number: 0,
type: "3",
},
{
number: 0,
type: "4",
},
];
res.data.forEach((item, index) => {
for (let i = 0; i < obj.length; i++) {
let objItem = obj[i];
if (item.type == objItem.type) {
objItem.number = item.number;
}
}
});
this.rightBototmData.push(...obj);
this.gaoMap.addPolyline(res.data);
this.pipeClassify(res.data);
}
return res.code;
});
// 值班人员
this.getInspectorLocations();
},
// 左边的Bar修改值
leftBarChange(item) {
// this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
const index = this.leftBarNum.indexOf(item.value);
if (index >= 0) {
this.leftBarNum.splice(index, 1);
} else {
this.leftBarNum.push(item.value);
}
// 1,2,3,4,7分别对应数据库type5，1，2，3，4
console.log(this.leftBarNum);
if (this.leftBarNum.includes(1)) {
this.gaoMap.lineShow(true);
} else {
this.gaoMap.lineShow(false);
}
// console.log("marks",this.gaoMap.markers)
// this.gaoMap.markerShow();
if (this.leftBarNum.includes(2)) {
this.gaoMap.markerShow(1, true);
} else {
this.gaoMap.markerShow(1, false);
}
if (this.leftBarNum.includes(3)) {
this.gaoMap.markerShow(2, true);
} else {
this.gaoMap.markerShow(2, false);
}
if (this.leftBarNum.includes(4)) {
this.gaoMap.markerShow(3, true);
} else {
this.gaoMap.markerShow(3, false);
}
if (this.leftBarNum.includes(7)) {
this.gaoMap.markerShow(4, true);
} else {
this.gaoMap.markerShow(4, false);
}
if (this.leftBarNum.includes(9)) {
this.gaoMap.markerShow(9, true);
} else {
this.gaoMap.markerShow(9, false);
}
},
addDevice() {
if (this.iconClass == "icon-create") {
this.targetNum = this.targetNum != 1 ? 1 : 0;
} else {
if (this.deviceType) {
this.targetNum = 0;
this.createReset();
this.gaoMap.newLineReset();
//值班人员
getInspectorLocations() {
return getInspectorLocations().then((res) => {
if (res.code == 200) {
console.log(" 值班人员", res);
// 把值班人员传进类里
this.gaoMap.workerManArr = res.data;
this.workerManClassify(res.data);
for (var i = 0; i < res.data.length; i++) {
let options = res.data[i];
options.type = 9;
this.gaoMap.addMarker(DEVICE_TYPE.INSPECTOR, options);
}
}
}
if (this.targetNum == 1 && this.createValue == 1) {
this.gaoMap.lineType = 1;
} else {
this.gaoMap.lineType = 0;
this.gaoMap.mouseTool.close();
}
// 关闭当前的infowindow
this.gaoMap.closeInfoWindow();
this.deviceType = !this.deviceType;
this.gaoMap.mapOperateType = "add";
this.gaoMap.removeMarkerDragg();
return res.code;
});
},
// 获取报警资源，并且改变图上的状态
getSelectAlarmDevice() {
......@@ -417,14 +503,12 @@ export default {
// 获取循报警设备的id
const { deviceId, alarmId, alarmType, alarmValue, endTime, orderId } =
item;
console.log("endTime", endTime);
// 获取polyLine
const device = this.gaoMap.markers.filter((item) => {
const id = item.getExtData().deviceId;
return deviceId == id;
})[0];
const options = device.getExtData();
console.log(options);
// 增加一个报警状态
// 如果有endtime说明状态已经不是报警状态了，要归位，所有东西都要变回来
......@@ -432,14 +516,12 @@ export default {
options.alarmId = alarmId;
options.orderId = orderId;
if (endTime) {
console.log("设备恢复");
options.alarmState = 0;
// 报警类型
options.alarmType = null;
// 报警信息
options.alarmValue = null;
} else {
console.log("设备报警");
options.alarmState = 1;
// 报警类型
options.alarmType = alarmType;
......@@ -461,7 +543,7 @@ export default {
} else {
this.gaoMap.changeMarkIcon(
device,
require(`@/assets/images/lljWran.png`)
require(`@/assets/images/llj.gif`)
);
}
} else if (device.getExtData().deviceType == 4) {
......@@ -473,7 +555,7 @@ export default {
} else {
this.gaoMap.changeMarkIcon(
device,
require(`@/assets/images/ylbWran.png`)
require(`@/assets/images/ylb.gif`)
);
}
}
......@@ -482,32 +564,394 @@ export default {
if (this.ws) return;
this.socket();
},
socket() {
console.log("socket执行");
// this.ws = new WebSocket(
// "ws://36.148.23.59:8901/gassafety/websocketServer"
// );
this.ws = new WebSocket(
"ws://192.168.2.23:8903/gassafety/websocketServer"
);
this.ws.onopen = (evt) => {
console.log("WebSockets=======gogogog");
// this.ws.send("WebSockets!=========================");
};
this.ws.onmessage = (evt) => {
console.log("推送", evt);
socket() {
console.log("socket执行");
// this.ws = new WebSocket(
// "ws://36.148.23.59:8901/gassafety/websocketServer"
// );
this.ws = new WebSocket(
"ws://192.168.2.23:8903/gassafety/websocketServer"
);
this.ws.onopen = (evt) => {
console.log("WebSockets=======gogogog");
// this.ws.send("WebSockets!=========================");
};
this.ws.onmessage = (evt) => {
console.log("推送", evt);
// console.log("Received Message: " + evt.data);
// ws.close();
const obj = JSON.parse(evt.data);
this.statusChange([obj]);
};
this.ws.onclose = () => {
console.log("ws协议关闭");
};
// this.ws.onclose = function (evt) {
// console.log("关闭");
// };
},
// 右下角数据
async rightBottomData() {
this.rightBototmData = [];
await countPipeLength().then((res) => {
// console.log("管道管道管道管道管道管道", res);
if (res.code == 200) {
let obj;
if (res.data > 0) {
obj = { number: res.data, type: "99" };
} else {
obj = { number: 0, type: "99" };
}
this.rightBototmData.push(obj);
}
});
await countDeviceByType().then((res) => {
if (res.code == 200) {
let obj = [
{
number: 0,
type: "1",
},
{
number: 0,
type: "2",
},
{
number: 0,
type: "3",
},
{
number: 0,
type: "4",
},
];
res.data.forEach((item, index) => {
for (let i = 0; i < obj.length; i++) {
let objItem = obj[i];
if (item.type == objItem.type) {
objItem.number = item.number;
}
}
});
this.rightBototmData.push(...obj);
}
});
},
// 左边的Bar修改值 左边抽屉
leftBarChange(item) {
// this.leftBarNum= this.leftBarNum != item.value ? item.value:0;
const index = this.leftBarNum.indexOf(item.value);
if (index >= 0) {
this.leftBarNum.splice(index, 1);
} else {
this.leftBarNum.push(item.value);
this.panTo(item);
}
// 1,2,3,4,7分别对应数据库type5，1，2，3，4
// console.log(this.leftBarNum);
if (this.leftBarNum.includes(1)) {
this.gaoMap.lineShow(true);
// this.panTo(item);
} else {
this.gaoMap.lineShow(false);
}
// console.log("marks",this.gaoMap.markers)
// this.gaoMap.markerShow();
if (this.leftBarNum.includes(2)) {
this.gaoMap.markerShow(1, true);
// this.panTo(item);
} else {
this.gaoMap.markerShow(1, false);
}
if (this.leftBarNum.includes(3)) {
this.gaoMap.markerShow(2, true);
// this.panTo(item);
} else {
this.gaoMap.markerShow(2, false);
}
if (this.leftBarNum.includes(4)) {
this.gaoMap.markerShow(3, true);
// this.panTo(item);
} else {
this.gaoMap.markerShow(3, false);
}
if (this.leftBarNum.includes(7)) {
this.gaoMap.markerShow(4, true);
// this.panTo(item);
} else {
this.gaoMap.markerShow(4, false);
}
if (this.leftBarNum.includes(9)) {
this.gaoMap.markerShow(9, true);
// this.panTo(item);
} else {
this.gaoMap.markerShow(9, false);
}
},
panTo(item, bool) {
if (item.list.length > 0) {
if (this.leftBarNum.includes(item.value)) {
this.gaoMap.panTo(item.list[0].path);
}
}
},
panToo(iten, item) {
// 如果没打对勾，就啥也不干
if(!this.leftBarNum.includes(item.value) ) return
// 如果地图太大了就吸纳是不出来infowindow了，所以要固定缩放比例
this.gaoMap.myMap.setZoom(11);
if (item.list.length > 0) {
if (this.leftBarNum.includes(item.value)) {
this.gaoMap.panTo(iten.path);
}
}
// 当前地图中心点
const { lat, lng } = this.gaoMap.myMap.getCenter();
// 管道是这个方法，因为管道比较特殊
if (item.value == 1) {
this.polylineInfoWindowShow(iten, lat, lng);
} else if (item.value == 9) {
// 工作人员
this.workerManInfoWindowShow(iten, lat, lng);
} else {
// 其他设备
this.diveceInfoWindowShow(iten, lat, lng);
}
},
// 如果是线条飞过去出现infowindow
polylineInfoWindowShow(iten, lat, lng) {
const target = this.gaoMap.polyLines.filter((item) => {
return item.getExtData().lineData.pipeId == iten.deviceId;
})[0];
console.log("target", target);
const e = {
target,
lnglat: iten.lnglat,
};
// 如果是原地不动，就直接执行
if (iten.path[0] == lng && iten.path[1] == lat) {
this.gaoMap.polylineMouseOver(e);
return;
}
// 因为地图移动的时候infowindow无法显示
this.gaoMap.handleInfoWindowOpenFunc = () => {
this.gaoMap.polylineMouseOver(e);
};
},
// 这个是其他设备的infowindow
diveceInfoWindowShow(iten, lat, lng) {
const target = this.gaoMap.markers.filter((item) => {
return item.getExtData().deviceId == iten.deviceId;
})[0];
console.log("target", target);
const e = {
target,
lnglat: iten.path,
};
// 如果是原地不动，就直接执行
if (iten.path[0] == lng && iten.path[1] == lat) {
this.gaoMap.infoOpen(e);
return;
}
// 因为地图移动的时候infowindow无法显示
this.gaoMap.handleInfoWindowOpenFunc = () => {
this.gaoMap.infoOpen(e);
};
},
// workerMan，值班人员飞过去后侠士infowindow
workerManInfoWindowShow(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) {
this.gaoMap.wokerManOpen(e);
return;
}
// 因为地图移动的时候infowindow无法显示
this.gaoMap.handleInfoWindowOpenFunc = () => {
this.gaoMap.wokerManOpen(e);
};
},
// 向右的箭头的动画
arrowRightChange(item) {
const index = this.arrowRightNum.indexOf(item.value);
if (index >= 0) {
this.arrowRightNum.splice(index, 1);
} else {
this.arrowRightNum.push(item.value);
}
},
// 管道储存
pipeClassify(pipeData) {
const pipeArr = pipeData.map((item, index) => {
// console.log( '管道路径',eval(item.coordinates )[0])
return {
lnglat: eval(item.coordinates)[0],
path: eval(item.coordinates)[1],
no: index,
deviceId: item.pipeId,
deviceType: "0",
deviceName: item.pipeName,
code: item.pipeCode,
};
});
this.allList[0] = pipeArr;
console.log("管道", pipeArr);
},
// 设备分类存储
deviceClassify(data) {
// 所有调压箱数据
const tyxArr = data
.filter((item) => {
return item.deviceType == 1;
})
.map((item, index) => {
return {
path: [item.longitude, item.latitude],
no: index,
deviceId: item.deviceId,
deviceType: item.deviceType,
deviceName: item.deviceName,
code: item.iotNo,
};
});
// 所有阀门井数据
const fmjArr = data
.filter((item) => {
return item.deviceType == 2;
})
.map((item, index) => {
return {
path: [item.longitude, item.latitude],
no: index,
deviceId: item.deviceId,
deviceType: item.deviceType,
deviceName: item.deviceName,
code: item.iotNo,
};
});
// 所有流量计数据
const lljArr = data
.filter((item) => {
return item.deviceType == 3;
})
.map((item, index) => {
return {
path: [item.longitude, item.latitude],
no: index,
deviceId: item.deviceId,
deviceType: item.deviceType,
deviceName: item.deviceName,
code: item.iotNo,
};
});
// 所有压力表数据
const ylbArr = data
.filter((item) => {
return item.deviceType == 4;
})
.map((item, index) => {
return {
path: [item.longitude, item.latitude],
no: index,
deviceId: item.deviceId,
deviceType: item.deviceType,
deviceName: item.deviceName,
code: item.iotNo,
};
});
// console.log("设备", tyxArr, fmjArr, lljArr, ylbArr);
this.allList[1] = tyxArr;
this.allList[2] = fmjArr;
this.allList[3] = lljArr;
this.allList[4] = ylbArr;
},
// 值班人员
workerManClassify(workManData) {
const workManArr = workManData.map((item, index) => {
return {
path: [item.longitude, item.latitude],
no: index,
userId: item.userId,
userName: item.userName,
};
});
console.log("值班人员", workManArr);
this.allList[6] = workManArr;
},
// 左边设备翻页
pipeList(pageNum) {
const num = pageNum ? pageNum : 10;
// const { nowPage } = this.changeBtnData[0];
// this.changeBtnData[0].list = this.allList[0].filter((item, index) => {
// return index >= (nowPage - 1) * num && index < nowPage * num;
// });
// console.log(this.changeBtnData[0], this.allList[0]);
this.changeBtnData.forEach((item, index) => {
console.log("=======", index, this.allList[index]);
if (this.allList[index]?.length > 0) {
item.list = this.allList[index].filter((item2, index2) => {
return (
index2 >= (item.nowPage - 1) * num && index2 < item.nowPage * num
);
});
item.maxPage = Math.ceil(this.allList[index].length / num);
}
});
},
pageBack(item) {
item.nowPage--;
this.pipeList();
},
pageGo(item) {
item.nowPage++;
this.pipeList();
},
addDevice() {
if (this.iconClass == "icon-create") {
this.targetNum = this.targetNum != 1 ? 1 : 0;
} else {
if (this.deviceType) {
this.targetNum = 0;
this.createReset();
this.gaoMap.newLineReset();
}
}
if (this.targetNum == 1 && this.createValue == 1) {
this.gaoMap.lineType = 1;
} else {
this.gaoMap.lineType = 0;
this.gaoMap.mouseTool.close();
}
// 关闭当前的infowindow
this.gaoMap.closeInfoWindow();
// console.log("Received Message: " + evt.data);
// ws.close();
const obj = JSON.parse(evt.data);
this.statusChange([obj]);
};
this.ws.onclose = () => {
console.log("ws协议关闭");
};
this.ws.onclose = function (evt) {
console.log("关闭");
};
this.deviceType = !this.deviceType;
this.gaoMap.mapOperateType = "add";
this.gaoMap.removeMarkerDragg();
},
// 选择新建项目哪个
......@@ -598,56 +1042,7 @@ export default {
this.gaoMap.createNewLine();
}
},
getDeviceInfo(queryParams) {
this.loading = true;
return getAllDeviceInfo(queryParams).then((response) => {
if (response.code == 200) {
for (var i = 0; i < response.data.length; i++) {
if ("1" == response.data[i].deviceType) {
this.gaoMap.addMarker(
DEVICE_TYPE.REGEULATORBOX,
response.data[i]
);
}
if ("2" == response.data[i].deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.VALUEWELL, response.data[i]);
}
if ("3" == response.data[i].deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.FLOWMETER, response.data[i]);
}
if ("4" == response.data[i].deviceType) {
this.gaoMap.addMarker(DEVICE_TYPE.PRESSUREGAGE, response.data[i]);
}
}
}
this.loading = false;
return response.code;
});
},
getPipeList(queryParams) {
return pipeAllInfoList(queryParams).then((res) => {
console.log("管道", res);
if (res.code == 200) {
this.gaoMap.addPolyline(res.data);
}
return res.code;
});
},
//值班人员
getInspectorLocations() {
getInspectorLocations().then((res) => {
if (res.code == 200) {
console.log(" 值班人员", res);
// 把值班人员传进类里
this.gaoMap.workerManArr = res.data;
for (var i = 0; i < res.data.length; i++) {
let options = res.data[i];
options.type = 9;
this.gaoMap.addMarker(DEVICE_TYPE.INSPECTOR, options);
}
}
});
},
searchClear() {
this.iconClass = "icon-create";
this.createValue = 0;
......@@ -755,60 +1150,6 @@ export default {
bottom: 0;
width: 100%;
}
// 左边的bar
.leftBar-wrapper {
position: fixed;
left: 10px;
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;
......@@ -938,66 +1279,233 @@ input[type="radio"] {
padding: 0;
margin: 0 0.5rem 0 0;
}
// .btn {
// display: inline-block;
// font-weight: 400;
// text-align: center;
// white-space: nowrap;
// vertical-align: middle;
// -webkit-user-select: none;
// -moz-user-select: none;
// -ms-user-select: none;
// user-select: none;
// border: 1px solid transparent;
// transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
// border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
// background-color: transparent;
// background-image: none;
// color: #25a5f7;
// border-color: #25a5f7;
// padding: 0.25rem 0.5rem;
// line-height: 1.5;
// border-radius: 1rem;
// -webkit-appearance: button;
// cursor: pointer;
// width: 6rem;
// margin: 0 1rem 0 2rem;
// }
// .btn:hover {
// color: #fff;
// background-color: #25a5f7;
// border-color: #25a5f7;
// }
.input-text {
width: 4rem;
margin-right: 1rem;
}
.search-input {
position: fixed;
top: 100px;
left: 10px;
width: 240px;
}
.search-but {
position: fixed;
top: 100px;
left: 260px;
width: 85px;
color: white;
background-color: #053b6a;
}
.refresh-but {
position: fixed;
top: 100px;
left: 345px;
width: 85px;
// position: fixed;
position: absolute;
top: 10px;
left: 285px;
// width: 85px;
color: white;
background-color: #053b6a;
}
.classShow {
opacity: 0;
}
.drawer {
position: fixed;
top: 80px;
bottom: 0;
left: 0;
width: 370px;
transition: 0.2s linear;
background: #fff;
// background: red;
&.back {
left: -370px;
}
.scroll {
// height: 100%;
position: relative;
overflow-y: scroll;
overflow-x: hidden;
&::-webkit-scrollbar {
display: none;
}
}
.switch {
position: absolute;
font-size: 30px;
right: -15px;
top: 50%;
margin-top: -30px;
width: 25px;
border-radius: 40%;
overflow: hidden;
cursor: pointer;
// background: #fff;
i {
background: #fff;
}
}
}
.search-input {
position: absolute;
top: 10px;
left: 20px;
width: 200px;
}
.search-but {
// position: fixed;
position: absolute;
top: 10px;
left: 220px;
// width: 85px;
color: white;
background-color: #053b6a;
}
// 左边的bar
.leftBar-wrapper {
// position: fixed;
width: 340px;
margin-left: 20px;
margin-top: 70px;
// box-sizing: border-box;
.box-wrapper {
}
.animate {
border: 1px solid rgba(0, 0, 0, 0.1);
border-top: none;
.thead {
display: flex;
font-size: 14px;
> div {
border-right: 1px solid #cccccc;
box-sizing: border-box;
padding-left: 5px;
color: #000;
font-weight: 600;
}
}
.deviceList {
cursor: pointer;
&.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;
}
.code {
width: 100px;
}
}
.box {
width: 340px;
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;
.upPic {
display: inline-block;
margin-left: 32px;
line-height: 48px;
font-size: 10px;
color: #053b6a;
}
&.firstbox {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
> i.ju {
position: absolute;
display: inline-block;
width: 15px;
height: 15px;
background: #fff;
border: 1px solid #cccccc;
left: 15px;
top: 16px;
// top: ;
z-index: 1;
border-radius: 2px;
}
> i.bingo {
z-index: 2;
position: absolute;
// line-height: 48px;
left: 15px;
top: 16px;
color: #fff;
}
> i.arrow-right {
position: absolute;
right: 10px;
top: 16px;
transition: 0.3s linear;
&.active {
transform: rotate(90deg);
}
}
&: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: 20px;
}
.right {
color: #1d1d1d;
line-height: 48px;
// margin-left: 20px;
}
}
.goback {
display: flex;
justify-content: space-between;
.minMax {
font-size: 14px;
line-height: 28px;
box-sizing: border-box;
padding-left: 3px;
}
.btn {
text-align: right;
.goPage {
margin-left: 0;
}
}
}
}
</style>
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