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 @@
<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: {
alarmId: 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 @ 6c252225
......@@ -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 @ 6c252225
......@@ -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 @ 6c252225
......@@ -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 @ 6c252225
......@@ -48,6 +48,7 @@ class gaodeMap {
showInfoWindow = null;
// 工人轨迹用的窗口
markerPassedPolylineInfoWindow = null;
view = null;
//构造函数中设置中央点默认值
constructor(center) {
......@@ -397,14 +398,16 @@ 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: {
const dom = createPop(markerInfoWindow, {
title: "调压箱",
data: data,
map: map
map: map,
});
const html = dom.$el;
dom.remove();
......@@ -703,7 +706,8 @@ class gaodeMap {
type: "line",
//当前line状态 0:正常状态 1:正在编辑状态
isState: 0,
lineData: item
lineData: item,
class: this
}
});
......@@ -768,7 +772,7 @@ class gaodeMap {
} else {
polyline.setOptions({ strokeColor: "#FF5A67" });
}
infoWindow.setOffset(new AMap.Pixel(X, Y));
this.boxCollision(infoWindow.dom);
this.showInfoWindow = infoWindow;
......
gassafety-web/src/views/dataMonitoring/deviceAlarm/alarmdetail.vue
View file @ 6c252225
......@@ -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>
</div>
<div style="width: 100%;height: 200px;">
<!-- <div style="color: #31EAEA;width: 30%;height: 30px;">
<ul><li>详细信息</li></ul>
......
gassafety-web/src/views/dataMonitoring/deviceAlarm/index.vue
View file @ 6c252225
......@@ -292,7 +292,6 @@ export default {
vm.fromGisMap=false;
}
});
},
methods: {
/** 查询报警信息列表 */
......@@ -379,7 +378,6 @@ export default {
},
/** 工单详细信息跳转 */
showDetail(row) {
this.$router.push({
path: '/deviceAlarm/alarmdetail',
query: {
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 6c252225
......@@ -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,135 @@
: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="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>
</template>
<script>
......@@ -137,47 +235,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 +316,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 +348,13 @@ export default {
// 获取地图上设备资源
this.getResource();
// 把组件this传入类
this.gaoMap.view = this;
// 右下角数据 跟值班人员
this.rightBottomData();
this.backFlag = false;
},
// 获取地图上的资源
getResource() {
this.getDeviceInfo()
......@@ -222,135 +366,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 +501,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 +514,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 +541,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 +553,7 @@ export default {
} else {
this.gaoMap.changeMarkIcon(
device,
require(`@/assets/images/ylbWran.png`)
require(`@/assets/images/ylb.gif`)
);
}
}
......@@ -482,32 +562,279 @@ 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() {
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);
// 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 +925,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 +1033,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 +1162,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 {
&.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>
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