Skip to content

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

抽屉

parent b0b31198
Hide whitespace changes
Inline Side-by-side
Showing with 787 additions and 354 deletions
gassafety-web/src/components/PopWindowGis/lineInfoWindow.vue
View file @ 6c252225
...@@ -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: {
alarmId: 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 @ 6c252225
...@@ -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 @ 6c252225
...@@ -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 @ 6c252225
...@@ -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 @ 6c252225
...@@ -48,6 +48,7 @@ class gaodeMap { ...@@ -48,6 +48,7 @@ class gaodeMap {
showInfoWindow = null; showInfoWindow = null;
// 工人轨迹用的窗口 // 工人轨迹用的窗口
markerPassedPolylineInfoWindow = null; markerPassedPolylineInfoWindow = null;
view = null;
//构造函数中设置中央点默认值 //构造函数中设置中央点默认值
constructor(center) { constructor(center) {
...@@ -397,14 +398,16 @@ class gaodeMap { ...@@ -397,14 +398,16 @@ 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: {
const dom = createPop(markerInfoWindow, { const dom = createPop(markerInfoWindow, {
title: "调压箱", title: "调压箱",
data: data, data: data,
map: map map: map,
}); });
const html = dom.$el; const html = dom.$el;
dom.remove(); dom.remove();
...@@ -703,7 +706,8 @@ class gaodeMap { ...@@ -703,7 +706,8 @@ class gaodeMap {
type: "line", type: "line",
//当前line状态 0:正常状态 1:正在编辑状态 //当前line状态 0:正常状态 1:正在编辑状态
isState: 0, isState: 0,
lineData: item lineData: item,
class: this
} }
}); });
...@@ -768,7 +772,7 @@ class gaodeMap { ...@@ -768,7 +772,7 @@ class gaodeMap {
} else { } else {
polyline.setOptions({ strokeColor: "#FF5A67" }); polyline.setOptions({ strokeColor: "#FF5A67" });
} }
infoWindow.setOffset(new AMap.Pixel(X, Y)); infoWindow.setOffset(new AMap.Pixel(X, Y));
this.boxCollision(infoWindow.dom); this.boxCollision(infoWindow.dom);
this.showInfoWindow = infoWindow; this.showInfoWindow = infoWindow;
......
gassafety-web/src/views/dataMonitoring/deviceAlarm/alarmdetail.vue
View file @ 6c252225
...@@ -11,8 +11,7 @@ ...@@ -11,8 +11,7 @@
<div style="float: left;margin-top: 8px;margin-left: 5px;"><img src="../../../assets/logo/fanhui.png" style="width: 25px;" alt=""></div> <div style="float: left;margin-top: 8px;margin-left: 5px;"><img src="../../../assets/logo/fanhui.png" style="width: 25px;" alt=""></div>
</div> </div>
</div> </div>
<div style="width: 100%;height: 200px;"> <div style="width: 100%;height: 200px;">
<!-- <div style="color: #31EAEA;width: 30%;height: 30px;"> <!-- <div style="color: #31EAEA;width: 30%;height: 30px;">
<ul><li>详细信息</li></ul> <ul><li>详细信息</li></ul>
......
gassafety-web/src/views/dataMonitoring/deviceAlarm/index.vue
View file @ 6c252225
...@@ -292,7 +292,6 @@ export default { ...@@ -292,7 +292,6 @@ export default {
vm.fromGisMap=false; vm.fromGisMap=false;
} }
}); });
}, },
methods: { methods: {
/** 查询报警信息列表 */ /** 查询报警信息列表 */
...@@ -379,7 +378,6 @@ export default { ...@@ -379,7 +378,6 @@ export default {
}, },
/** 工单详细信息跳转 */ /** 工单详细信息跳转 */
showDetail(row) { showDetail(row) {
this.$router.push({ this.$router.push({
path: '/deviceAlarm/alarmdetail', path: '/deviceAlarm/alarmdetail',
query: { query: {
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 6c252225
...@@ -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,135 @@ ...@@ -105,6 +74,135 @@
: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="name">设备名称</div>
<div class="code">设备编号</div>
</div>
<div
class="deviceList"
:class="{ topActive: index == 0 }"
v-for="(item, index) in item.list"
:key="item.deviceId + `` + index"
>
<div class="no">{{ item.no + 1 }}</div>
<div :title="item.deviceName" class="name">
{{ item.deviceName }}
</div>
<div :title="item.code" class="code">{{ item.code }}</div>
</div>
</div>
</template>
<!-- 值班人员 展示不太一样-->
<templage 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="(item, index) in item.list"
:key="item.deviceId + `` + index"
>
<div class="no">{{ item.no + 1 }}</div>
<div :title="item.userName" class="code">
{{ item.userName }}
</div>
</div>
</div>
</templage>
<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 +235,79 @@ export default { ...@@ -137,47 +235,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 +316,27 @@ export default { ...@@ -186,14 +316,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 +348,13 @@ export default { ...@@ -205,12 +348,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 +366,75 @@ export default { ...@@ -222,135 +366,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 +501,12 @@ export default { ...@@ -417,14 +501,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 +514,12 @@ export default { ...@@ -432,14 +514,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 +541,7 @@ export default { ...@@ -461,7 +541,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 +553,7 @@ export default { ...@@ -473,7 +553,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 +562,279 @@ export default { ...@@ -482,32 +562,279 @@ 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() {
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);
}
// 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);
}
},
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) => {
return {
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 {
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 {
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 {
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 {
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 {
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 +925,7 @@ export default { ...@@ -598,56 +925,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 +1033,6 @@ export default { ...@@ -755,60 +1033,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 +1162,233 @@ input[type="radio"] { ...@@ -938,66 +1162,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 {
&.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 {
width: 100px;
}
.code {
border-right: none;
flex: 1;
}
}
.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