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 @@ ...@@ -81,7 +81,10 @@
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div> <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div> --> </div> -->
<div class="btn"> <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> --> <!-- <el-button class="elbtn" type="primary">生成工单</el-button> -->
</div> </div>
</div> </div>
...@@ -107,7 +110,7 @@ export default { ...@@ -107,7 +110,7 @@ export default {
methods: { methods: {
moment, moment,
mousedown(e) { mousedown(e) {
console.log("?") console.log("?");
return; return;
// console.log(this.$refs.previewImg) // console.log(this.$refs.previewImg)
this.$refs.previewImg.showViewer = true; this.$refs.previewImg.showViewer = true;
...@@ -126,6 +129,15 @@ export default { ...@@ -126,6 +129,15 @@ export default {
close() { close() {
this.obj.polyline.infoWindow.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> </script>
...@@ -141,7 +153,7 @@ export default { ...@@ -141,7 +153,7 @@ export default {
.top { .top {
width: 100%; width: 100%;
height: 51px; height: 51px;
background-color: #053B6A; background-color: #053b6a;
.text { .text {
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
...@@ -230,7 +242,7 @@ export default { ...@@ -230,7 +242,7 @@ export default {
box-sizing: border-box; box-sizing: border-box;
padding: 10px 0 2px 22px; padding: 10px 0 2px 22px;
border-bottom: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2;
color:#FE5966; color: #fe5966;
& > div { & > div {
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
......
gassafety-web/src/components/PopWindowGis/lineInfoWindowWarn.vue
View file @ f82316af
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
</div> </div>
</div> </div>
<div @click.stop="stopPropatation" class="btn"> <div @click.stop="stopPropatation" class="btn">
<span> <span @mousedown.stop="deviceMore">
<el-button class="elbtn" type="primary">设备详情</el-button> <el-button class="elbtn" type="primary">设备详情</el-button>
</span> </span>
<span v-if="orderId" @mousedown.stop="createWork"> <span v-if="orderId" @mousedown.stop="createWork">
...@@ -160,17 +160,29 @@ export default { ...@@ -160,17 +160,29 @@ export default {
}, },
CreateWorkCallBack() { CreateWorkCallBack() {
console.log("polylineCallBack"); console.log("polylineCallBack");
const polyline = this.obj.polyline.getExtData().lineData.view.gaoMap.polyLines.filter( const polyline = this.obj.polyline
(item) => { .getExtData()
return item.getExtData().lineData.alarmId == this.obj.polyline.getExtData().lineData.alarmId; .lineData.view.gaoMap.polyLines.filter((item) => {
} return (
)[0]; item.getExtData().lineData.alarmId ==
this.obj.polyline.getExtData().lineData.alarmId
);
})[0];
console.log("polyline.getExtData()", polyline.getExtData().lineData); console.log("polyline.getExtData()", polyline.getExtData().lineData);
let options = polyline.getExtData(); let options = polyline.getExtData();
// 暂时传值，到时候回重新刷新 // 暂时传值，到时候回重新刷新
options.lineData.orderId = "1"; options.lineData.orderId = "1";
polyline.setExtData(options); 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> </script>
......
gassafety-web/src/components/PopWindowGis/markerInfoWindow.vue
View file @ f82316af
...@@ -68,7 +68,9 @@ ...@@ -68,7 +68,9 @@
<div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div> <div>详细信息：<span>管线两端设备压差较大，管线可能泄漏</span></div>
</div> --> </div> -->
<div class="btn"> <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> --> <!-- <el-button class="elbtn" type="primary">生成工单</el-button> -->
</div> </div>
</div> </div>
...@@ -87,6 +89,14 @@ export default { ...@@ -87,6 +89,14 @@ export default {
}, },
methods: { methods: {
moment, moment,
deviceMore() {
this.data.class.view.$router.push({
path: "/realtimeData/realtimedetail",
query: {
deviceId: this.data.deviceId,
},
});
},
}, },
}; };
</script> </script>
......
gassafety-web/src/components/PopWindowGis/markerInfoWindowWarn.vue
View file @ f82316af
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
</div> </div>
</div> </div>
<div class="btn"> <div class="btn">
<span> <span @mousedown.stop="deviceMore">
<el-button class="elbtn" type="primary">设备详情</el-button> <el-button class="elbtn" type="primary">设备详情</el-button>
</span> </span>
<span v-if="orderId" @mousedown.stop="createWork"> <span v-if="orderId" @mousedown.stop="createWork">
...@@ -115,10 +115,9 @@ export default { ...@@ -115,10 +115,9 @@ export default {
this.data.view.$refs.CreateWork.open = true; this.data.view.$refs.CreateWork.open = true;
this.data.view.$refs.CreateWork.gaoMap = this.data.view.gaoMap; this.data.view.$refs.CreateWork.gaoMap = this.data.view.gaoMap;
// 改变外层回调 // 改变外层回调
this.data.view.CreateWorkCallBack=this.CreateWorkCallBack; this.data.view.CreateWorkCallBack = this.CreateWorkCallBack;
}, },
CreateWorkCallBack() { CreateWorkCallBack() {
// console.log("markerCallBack") // console.log("markerCallBack")
const marker = this.data.view.gaoMap.markers.filter((item) => { const marker = this.data.view.gaoMap.markers.filter((item) => {
return item.getExtData().alarmId == this.data.alarmId; return item.getExtData().alarmId == this.data.alarmId;
...@@ -129,6 +128,14 @@ export default { ...@@ -129,6 +128,14 @@ export default {
options.orderId = "1"; options.orderId = "1";
marker.setExtData(options); marker.setExtData(options);
}, },
deviceMore() {
this.data.view.$router.push({
path: "/deviceAlarm/alarmdetail",
query: {
alarmId: this.data.alarmId,
},
});
},
}, },
beforeDestroy() { beforeDestroy() {
// this.data.view.createWorkOpen = false; // this.data.view.createWorkOpen = false;
......
gassafety-web/src/utils/gaodeMapView.js
View file @ f82316af
...@@ -48,6 +48,8 @@ class gaodeMap { ...@@ -48,6 +48,8 @@ class gaodeMap {
showInfoWindow = null; showInfoWindow = null;
// 工人轨迹用的窗口 // 工人轨迹用的窗口
markerPassedPolylineInfoWindow = null; markerPassedPolylineInfoWindow = null;
view = null;
handleInfoWindowOpenFunc = null;
//构造函数中设置中央点默认值 //构造函数中设置中央点默认值
constructor(center) { constructor(center) {
...@@ -100,8 +102,15 @@ class gaodeMap { ...@@ -100,8 +102,15 @@ class gaodeMap {
// console.log("缩放开始") // console.log("缩放开始")
this.closeInfoWindow(); this.closeInfoWindow();
}); });
this.myMap.on("moveend", () => {
if (this.handleInfoWindowOpenFunc) {
this.handleInfoWindowOpenFunc();
this.handleInfoWindowOpenFunc = null;
}
});
this.districtBoundaries(); this.districtBoundaries();
} }
// 地图移动结束
/** /**
* 获取map * 获取map
...@@ -155,7 +164,10 @@ class gaodeMap { ...@@ -155,7 +164,10 @@ class gaodeMap {
} }
}); });
} }
// 地图中点平移
panTo(lnglat) {
this.myMap.panTo(lnglat);
}
/** /**
* 添加Market * 添加Market
* @param markerType * @param markerType
...@@ -215,18 +227,22 @@ class gaodeMap { ...@@ -215,18 +227,22 @@ class gaodeMap {
// // console.log(Card) // // console.log(Card)
// // e.target.content = this.getMarketContent(data); // // e.target.content = this.getMarketContent(data);
// }); // });
marker.on("mouseover", e => { // marker.on("mouseover", e => {
that.markerType = markerType; // that.markerType = markerType;
e.target.content = this.getMarketContent(data); // e.target.content = this.getMarketContent(data);
infoWindow.setContent(e.target.content); // infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition()); // infoWindow.open(map, e.target.getPosition());
that.boxCollision(infoWindow.dom); // that.boxCollision(infoWindow.dom);
// that.addCloneDome(e.target, infoWindow); // // that.addCloneDome(e.target, infoWindow);
// infoWindow.close(); // // infoWindow.close();
that.workerManInfoWindow = infoWindow; // that.workerManInfoWindow = infoWindow;
}); // });
marker.markerType=markerType;
marker.data = data;
marker.infoWindow =infoWindow;
marker.on("mouseover", this.wokerManOpen);
marker.on("mousedown", e => { marker.on("mousedown", e => {
console.log(data); // console.log(data);
that.closeInfoWindow(); that.closeInfoWindow();
if (marker.workerPoint) return; if (marker.workerPoint) return;
that.workerManView({ that.workerManView({
...@@ -246,10 +262,10 @@ class gaodeMap { ...@@ -246,10 +262,10 @@ class gaodeMap {
DEVICE_TYPE.SMALLINSPECTOR != markerType DEVICE_TYPE.SMALLINSPECTOR != markerType
) { ) {
// marker.content = this.getMarketContent(data, markerInfoWindow); // marker.content = this.getMarketContent(data, markerInfoWindow);
marker.on("mouseover", infoOpen); marker.infoWindow = infoWindow;
marker.on("mouseover", that.infoOpen);
marker.on("mouseout", infoClose); marker.on("mouseout", infoClose);
marker.setExtData(data); marker.setExtData(data);
that.deviceType = markerType; that.deviceType = markerType;
let editWindow = that.createInfowindow("编辑"); let editWindow = that.createInfowindow("编辑");
editWindow.fileArr = editWindow.fileArr =
...@@ -326,55 +342,67 @@ class gaodeMap { ...@@ -326,55 +342,67 @@ class gaodeMap {
//infoWindow.close(map, e.target.getPosition()); //infoWindow.close(map, e.target.getPosition());
} }
function infoOpen(e) { // 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());
// 检测是否碰到底部的bottomData return marker;
that.boxCollision(infoWindow.dom); }
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); // that.addCloneDome(e.target, infoWindow);
// infoWindow.close(); // infoWindow.close();
this.workerManInfoWindow = e.target.infoWindow;
that.markerInfoWindow = 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添加拖拽事件 * marker添加拖拽事件
*/ */
...@@ -397,7 +425,9 @@ class gaodeMap { ...@@ -397,7 +425,9 @@ class gaodeMap {
* @param data * @param data
* @returns {string} * @returns {string}
*/ */
getMarketContent(data, markerInfoWindow) { getMarketContent(Data, markerInfoWindow) {
let data = { ...Data };
data.class = this;
console.log("this.markerType", this.markerType); console.log("this.markerType", this.markerType);
switch (this.markerType) { switch (this.markerType) {
case DEVICE_TYPE.REGEULATORBOX: { case DEVICE_TYPE.REGEULATORBOX: {
...@@ -703,7 +733,8 @@ class gaodeMap { ...@@ -703,7 +733,8 @@ class gaodeMap {
type: "line", type: "line",
//当前line状态 0:正常状态 1:正在编辑状态 //当前line状态 0:正常状态 1:正在编辑状态
isState: 0, isState: 0,
lineData: item lineData: item,
class: this
} }
}); });
...@@ -711,69 +742,8 @@ class gaodeMap { ...@@ -711,69 +742,8 @@ class gaodeMap {
// 信息窗体 // 信息窗体
this.newLineAddEvent(polyline); this.newLineAddEvent(polyline);
//添加事件 //添加事件
polyline.on("mouseover", e => { polyline.on("mouseover", this.polylineMouseOver);
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;
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 => { polyline.on("mouseout", e => {
// console.log("polyline.getExtData().lineData.alarmState",polyline.getExtData().lineData.alarmState) // console.log("polyline.getExtData().lineData.alarmState",polyline.getExtData().lineData.alarmState)
if (polyline.getExtData().lineData.alarmState == 1) return; if (polyline.getExtData().lineData.alarmState == 1) return;
...@@ -787,6 +757,81 @@ class gaodeMap { ...@@ -787,6 +757,81 @@ class gaodeMap {
// 缩放地图到合适的视野级别 // 缩放地图到合适的视野级别
// map.setFitView(); // 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) { lineMouseOver(polyline, lineInfoWindow, item) {
let dom = createPop(lineInfoWindow, { let dom = createPop(lineInfoWindow, {
obj: { a: 123, editorPage: true, ...item, polyline } obj: { a: 123, editorPage: true, ...item, polyline }
......
gassafety-web/src/views/dataMonitoring/deviceAlarm/index.vue
View file @ f82316af
...@@ -263,7 +263,6 @@ export default { ...@@ -263,7 +263,6 @@ export default {
vm.fromGisMap=false; vm.fromGisMap=false;
} }
}); });
}, },
methods: { methods: {
/** 查询报警信息列表 */ /** 查询报警信息列表 */
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ f82316af
...@@ -63,37 +63,6 @@ ...@@ -63,37 +63,6 @@
</div> </div>
</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 <RightBototmData
v-show="bottomDataShow" v-show="bottomDataShow"
:class="{ classShow: !bottomDataShow }" :class="{ classShow: !bottomDataShow }"
...@@ -105,6 +74,137 @@ ...@@ -105,6 +74,137 @@
:open="createWorkOpen" :open="createWorkOpen"
@callback="CreateWorkCallBack" @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> </div>
</template> </template>
<script> <script>
...@@ -137,47 +237,79 @@ export default { ...@@ -137,47 +237,79 @@ export default {
targetNum: 0, targetNum: 0,
// 左边的bar的active判定 // 左边的bar的active判定
leftBarNum: [1, 2, 3, 4, 7, 8, 9], leftBarNum: [1, 2, 3, 4, 7, 8, 9],
// 右转箭头的样式active判定
arrowRightNum: [],
// 新建里的值 // 新建里的值
iconClass: "icon-create", iconClass: "icon-create",
createValue: 0, createValue: 0,
createLabel: "新增", createLabel: "新增",
changeBtnData: [ changeBtnData: [
{ {
type: "0",
value: 1, value: 1,
icon: "icon-gd", icon: "icon-gd",
label: "管道", label: "管道",
nowPage: 1,
maxPage: 99,
list: [],
}, },
{ {
type: "1",
value: 2, value: 2,
icon: "icon-tyx", icon: "icon-tyx",
label: "调压箱", label: "调压箱",
nowPage: 1,
maxPage: 99,
list: [],
}, },
{ {
type: "2",
value: 3, value: 3,
icon: "icon-fmj", icon: "icon-fmj",
label: "阀门井", label: "阀门井",
nowPage: 1,
maxPage: 99,
list: [],
}, },
{ {
type: "3",
value: 4, value: 4,
icon: "icon-llj", icon: "icon-llj",
label: "流量计", label: "流量计",
nowPage: 1,
maxPage: 99,
list: [],
}, },
{ {
type: "4",
value: 7, value: 7,
icon: "icon-ylb", icon: "icon-ylb",
label: "压力表", label: "压力表",
nowPage: 1,
maxPage: 99,
list: [],
}, },
{ {
type: "5",
value: 8, value: 8,
icon: "icon-yh", icon: "icon-yh",
label: "隐患", label: "隐患",
nowPage: 1,
maxPage: 99,
list: [],
}, },
{ {
type: "6",
value: 9, value: 9,
icon: "icon-zhibanrenyuan", icon: "icon-zhibanrenyuan",
label: "值班人员", label: "值班人员",
nowPage: 1,
maxPage: 99,
list: [],
}, },
], ],
// 这是图上所有的点
allList: [[], [], [], [], [], [], []],
keyWord: "", keyWord: "",
// 右下角的数据data // 右下角的数据data
rightBototmData: [], rightBototmData: [],
...@@ -186,14 +318,27 @@ export default { ...@@ -186,14 +318,27 @@ export default {
createWorkOpen: false, createWorkOpen: false,
// 查询用的 // 查询用的
alarmId: "", alarmId: "",
// 左边抽屉 内嵌scroll盒子的高
boxHeight: "",
//抽屉是否收回
backFlag: true,
}; };
}, },
created() { created() {
// 让左边的框隐藏 // 让左边的框隐藏
this.$store.dispatch("app/toggleDevice", "mobile"); this.$store.dispatch("app/toggleDevice", "mobile");
}, },
mounted() { mounted() {
this.initMap(); this.initMap();
this.boxHeight = document.body.clientHeight - 81;
},
watch: {
changeBtnData: {
handler(newName, oldName) {},
deep: true,
// immediate: true,
},
}, },
methods: { methods: {
initMap() { initMap() {
...@@ -205,12 +350,13 @@ export default { ...@@ -205,12 +350,13 @@ export default {
// 获取地图上设备资源 // 获取地图上设备资源
this.getResource(); this.getResource();
// 把组件this传入类 // 把组件this传入类
this.gaoMap.view = this; this.gaoMap.view = this;
// 右下角数据 跟值班人员 // 右下角数据 跟值班人员
this.rightBottomData(); this.rightBottomData();
this.backFlag = false;
}, },
// 获取地图上的资源 // 获取地图上的资源
getResource() { getResource() {
this.getDeviceInfo() this.getDeviceInfo()
...@@ -222,135 +368,75 @@ export default { ...@@ -222,135 +368,75 @@ export default {
}) })
.then((res) => { .then((res) => {
if (res == 200) { if (res == 200) {
console.log("管道", res); // 值班人员
return this.getInspectorLocations();
}
})
.then((res) => {
if (res == 200) {
// 所有设备上图结束之后，左边的抽屉加载数据
this.pipeList();
// 获取报警资源 // 获取报警资源
this.getSelectAlarmDevice(); this.getSelectAlarmDevice();
// selectAlarmDevice
} }
}); });
}, },
// 右下角数据
async rightBottomData() { getDeviceInfo(queryParams) {
await countPipeLength().then((res) => { this.loading = true;
// console.log("管道管道管道管道管道管道", res); return getAllDeviceInfo(queryParams).then((response) => {
if (res.code == 200) { if (response.code == 200) {
let obj; console.log("所有设备", response.data);
if (res.data > 0) { //各种苏剧分离存储
obj = { number: res.data, type: "99" }; this.deviceClassify(response.data);
} else { for (var i = 0; i < response.data.length; i++) {
obj = { number: 0, type: "99" }; 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) { if (res.code == 200) {
let obj = [ this.gaoMap.addPolyline(res.data);
{ this.pipeClassify(res.data);
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);
} }
return res.code;
}); });
// 值班人员
this.getInspectorLocations();
}, },
// 左边的Bar修改值 //值班人员
leftBarChange(item) { getInspectorLocations() {
// this.leftBarNum= this.leftBarNum != item.value ? item.value:0; return getInspectorLocations().then((res) => {
const index = this.leftBarNum.indexOf(item.value); if (res.code == 200) {
if (index >= 0) { console.log(" 值班人员", res);
this.leftBarNum.splice(index, 1); // 把值班人员传进类里
} else { this.gaoMap.workerManArr = res.data;
this.leftBarNum.push(item.value); this.workerManClassify(res.data);
} for (var i = 0; i < res.data.length; i++) {
// 1,2,3,4,7分别对应数据库type5，1，2，3，4 let options = res.data[i];
console.log(this.leftBarNum); options.type = 9;
this.gaoMap.addMarker(DEVICE_TYPE.INSPECTOR, options);
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();
} }
} return res.code;
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();
}, },
// 获取报警资源，并且改变图上的状态 // 获取报警资源，并且改变图上的状态
getSelectAlarmDevice() { getSelectAlarmDevice() {
...@@ -417,14 +503,12 @@ export default { ...@@ -417,14 +503,12 @@ export default {
// 获取循报警设备的id // 获取循报警设备的id
const { deviceId, alarmId, alarmType, alarmValue, endTime, orderId } = const { deviceId, alarmId, alarmType, alarmValue, endTime, orderId } =
item; item;
console.log("endTime", endTime);
// 获取polyLine // 获取polyLine
const device = this.gaoMap.markers.filter((item) => { const device = this.gaoMap.markers.filter((item) => {
const id = item.getExtData().deviceId; const id = item.getExtData().deviceId;
return deviceId == id; return deviceId == id;
})[0]; })[0];
const options = device.getExtData(); const options = device.getExtData();
console.log(options);
// 增加一个报警状态 // 增加一个报警状态
// 如果有endtime说明状态已经不是报警状态了，要归位，所有东西都要变回来 // 如果有endtime说明状态已经不是报警状态了，要归位，所有东西都要变回来
...@@ -432,14 +516,12 @@ export default { ...@@ -432,14 +516,12 @@ export default {
options.alarmId = alarmId; options.alarmId = alarmId;
options.orderId = orderId; options.orderId = orderId;
if (endTime) { if (endTime) {
console.log("设备恢复");
options.alarmState = 0; options.alarmState = 0;
// 报警类型 // 报警类型
options.alarmType = null; options.alarmType = null;
// 报警信息 // 报警信息
options.alarmValue = null; options.alarmValue = null;
} else { } else {
console.log("设备报警");
options.alarmState = 1; options.alarmState = 1;
// 报警类型 // 报警类型
options.alarmType = alarmType; options.alarmType = alarmType;
...@@ -461,7 +543,7 @@ export default { ...@@ -461,7 +543,7 @@ export default {
} else { } else {
this.gaoMap.changeMarkIcon( this.gaoMap.changeMarkIcon(
device, device,
require(`@/assets/images/lljWran.png`) require(`@/assets/images/llj.gif`)
); );
} }
} else if (device.getExtData().deviceType == 4) { } else if (device.getExtData().deviceType == 4) {
...@@ -473,7 +555,7 @@ export default { ...@@ -473,7 +555,7 @@ export default {
} else { } else {
this.gaoMap.changeMarkIcon( this.gaoMap.changeMarkIcon(
device, device,
require(`@/assets/images/ylbWran.png`) require(`@/assets/images/ylb.gif`)
); );
} }
} }
...@@ -482,32 +564,394 @@ export default { ...@@ -482,32 +564,394 @@ export default {
if (this.ws) return; if (this.ws) return;
this.socket(); this.socket();
}, },
socket() { socket() {
console.log("socket执行"); console.log("socket执行");
// this.ws = new WebSocket( // this.ws = new WebSocket(
// "ws://36.148.23.59:8901/gassafety/websocketServer" // "ws://36.148.23.59:8901/gassafety/websocketServer"
// ); // );
this.ws = new WebSocket( this.ws = new WebSocket(
"ws://192.168.2.23:8903/gassafety/websocketServer" "ws://192.168.2.23:8903/gassafety/websocketServer"
); );
this.ws.onopen = (evt) => { this.ws.onopen = (evt) => {
console.log("WebSockets=======gogogog"); console.log("WebSockets=======gogogog");
// this.ws.send("WebSockets!========================="); // this.ws.send("WebSockets!=========================");
}; };
this.ws.onmessage = (evt) => { this.ws.onmessage = (evt) => {
console.log("推送", 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); this.deviceType = !this.deviceType;
// ws.close(); this.gaoMap.mapOperateType = "add";
const obj = JSON.parse(evt.data); this.gaoMap.removeMarkerDragg();
this.statusChange([obj]);
};
this.ws.onclose = () => {
console.log("ws协议关闭");
};
this.ws.onclose = function (evt) {
console.log("关闭");
};
}, },
// 选择新建项目哪个 // 选择新建项目哪个
...@@ -598,56 +1042,7 @@ export default { ...@@ -598,56 +1042,7 @@ export default {
this.gaoMap.createNewLine(); 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() { searchClear() {
this.iconClass = "icon-create"; this.iconClass = "icon-create";
this.createValue = 0; this.createValue = 0;
...@@ -755,60 +1150,6 @@ export default { ...@@ -755,60 +1150,6 @@ export default {
bottom: 0; bottom: 0;
width: 100%; 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 { .btn-wrapper {
position: fixed; position: fixed;
...@@ -938,66 +1279,233 @@ input[type="radio"] { ...@@ -938,66 +1279,233 @@ input[type="radio"] {
padding: 0; padding: 0;
margin: 0 0.5rem 0 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 { .input-text {
width: 4rem; width: 4rem;
margin-right: 1rem; 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 { .refresh-but {
position: fixed; // position: fixed;
top: 100px; position: absolute;
left: 345px;
width: 85px; top: 10px;
left: 285px;
// width: 85px;
color: white; color: white;
background-color: #053b6a; background-color: #053b6a;
} }
.classShow { .classShow {
opacity: 0; 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> </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