Skip to content

G
gassafety-progress
Commit bafc4fd5 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

Merge branch 'develop_jzl'

parents bd3ebb9f 0c4f8267
Hide whitespace changes
Inline Side-by-side
Showing with 242 additions and 69 deletions
gassafetyprogress-web/src/api/bigWindow/getDevice.js
View file @ bafc4fd5
/*
* @Author: your name
* @Date: 2022-02-23 15:28:07
* @LastEditTime: 2022-02-25 18:43:58
* @LastEditTime: 2022-03-01 09:05:43
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /newDev/gassafety-progress/gassafetyprogress-web/src/api/bigWindow/getdevice.js
......@@ -67,4 +67,12 @@ export function getCompany(query) {
method: 'get',
params: query
})
}
// 报警
export function userAlarm(query) {
return request({
url: '/supervise/user/getDetectorUserAlarmList',
method: 'get',
params: query
})
}
\ No newline at end of file
gassafetyprogress-web/src/assets/mapImages/userAlarm.svg 0 → 100644
View file @ bafc4fd5
<svg id="组_2446" data-name="组 2446" xmlns="http://www.w3.org/2000/svg" width="18" height="25" viewBox="0 0 23 33.9">
<path id="路径_170" data-name="路径 170" d="M-1583.57,295.955a3.719,3.719,0,0,0-3.714,3.713,3.719,3.719,0,0,0,3.714,3.713,3.719,3.719,0,0,0,3.713-3.713,3.719,3.719,0,0,0-3.713-3.713Zm2.287,4.15a.608.608,0,0,1-.437.184h-1.862a.618.618,0,0,1-.621-.621V297.2a.618.618,0,0,1,.621-.621.608.608,0,0,1,.437.184.608.608,0,0,1,.184.437v1.862h1.242a.618.618,0,0,1,.621.621.6.6,0,0,1-.184.425Zm-8.966-5.047a4.143,4.143,0,0,0,4.161,0,4.166,4.166,0,0,0,2.081-3.61,4.161,4.161,0,0,0-4.162-4.161,4.16,4.16,0,0,0-4.161,4.161A4.179,4.179,0,0,0-1590.249,295.058Zm1.724,4.61a4.872,4.872,0,0,1,.391-1.931,5.639,5.639,0,0,1,.54-.966,4.67,4.67,0,0,1-.575.035,5.145,5.145,0,0,1-2.081-.425,5.006,5.006,0,0,1-.943-.517,1.2,1.2,0,0,0-1.345-.011,7.8,7.8,0,0,0-3.414,6.265v.069a.6.6,0,0,0,.6.575h7.92a5.215,5.215,0,0,1-.7-1.161,5.035,5.035,0,0,1-.391-1.931Z" transform="translate(1599.528 -284.903)" fill="#7bf8f4" opacity="0.996">
<animate attributeName="fill" attributeType="XML"
from="#7bf8f4" to="#ff0000"
begin="0s" dur="1s"
fill="remove" repeatCount="indefinite"/>
</path>
<g id="路径_190" data-name="路径 190" fill="none">
<path d="M11.5,0A11.5,11.5,0,0,1,23,11.5c0,6.351-11.6,18.226-11.5,18.3S0,17.851,0,11.5A11.5,11.5,0,0,1,11.5,0Z" stroke="none"/>
<path d="M 11.5 1.000003814697266 C 5.71027946472168 1.000003814697266 1 5.710294723510742 1 11.50003433227539 C 1 15.44052124023438 6.295677185058594 22.62869262695312 11.47670078277588 28.30246353149414 C 12.68496322631836 26.95182609558105 15.33070659637451 23.97891044616699 17.65538024902344 20.72865295410156 C 19.63738059997559 17.95753479003906 22 14.10700416564941 22 11.50003433227539 C 22 5.710294723510742 17.28972053527832 1.000003814697266 11.5 1.000003814697266 M 11.5 3.814697265625e-06 C 17.85128021240234 3.814697265625e-06 23 5.148744583129883 23 11.50003433227539 C 23 17.82767677307129 11.48916530609131 29.63790130615234 11.49940204620361 29.80170249938965 C 11.36462783813477 29.63816833496094 0 17.78736114501953 0 11.50003433227539 C 0 5.148744583129883 5.14872932434082 3.814697265625e-06 11.5 3.814697265625e-06 Z M 11.49940204620361 29.80170249938965 C 11.50076866149902 29.80335998535156 11.50098419189453 29.80382347106934 11.5 29.80304336547852 C 11.49963855743408 29.80275726318359 11.49944019317627 29.80231475830078 11.49940204620361 29.80170249938965 Z" stroke="none" fill="#7bf8f4">
<animate attributeName="fill" attributeType="XML"
from="#7bf8f4" to="#ff0000"
begin="0s" dur="1s"
fill="remove" repeatCount="indefinite"/>
</path>
</g>
<path id="多边形_37" data-name="多边形 37" d="M4.471,0,8.941,5.961H0Z" transform="translate(16.094 29.803) rotate(180)" fill="#7bf8f4">
<animate attributeName="fill" attributeType="XML"
from="#7bf8f4" to="#ff0000"
begin="0s" dur="1s"
fill="remove" repeatCount="indefinite"/>
</path>
</svg>
gassafetyprogress-web/src/components/bigWindow/Center.vue
View file @ bafc4fd5
......@@ -40,7 +40,7 @@
<div v-else>-</div>
</template>
</el-table-column>
<el-table-column prop="reportTime" label="报警时间" width="">
<el-table-column prop="reportTime" label="预警时间" width="">
<template slot-scope="scope">
<div v-unValue>{{ scope.row.reportTime }}</div>
</template>
......
gassafetyprogress-web/src/components/bigWindow/DeviceA.vue
View file @ bafc4fd5
<!--
* @Author: your name
* @Date: 2022-01-26 20:07:52
* @LastEditTime: 2022-02-28 15:52:58
* @LastEditTime: 2022-02-28 18:05:19
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
......@@ -62,8 +62,8 @@
<div class="last">报警中</div>
</div>
<div class="tbody flex" v-if="Array.isArray(deviceData.pressureFlows)">
<div class="first zzz">{{ "压力表与流量计" }}</div>
<div v-unValue class="">{{ deviceData.numberEquipment }}</div>
<div class="first zzz">{{ "压力表" }}</div>
<div v-unValue class="">{{ deviceData.numberPressureGauges }}</div>
<div v-unValue class="">
{{ deviceData.onlineEquipment }}
</div>
......@@ -80,6 +80,25 @@
{{ deviceData.inAlarm }}
</div>
</div>
<div class="tbody flex" v-if="Array.isArray(deviceData.pressureFlows)">
<div class="first zzz">{{ "流量计" }}</div>
<div v-unValue class="">{{ deviceData.numberEquipment }}</div>
<div v-unValue class="">
{{ deviceData.numberOnlineEquipment }}
</div>
<div v-unValue class="">
{{ deviceData.numberOfflineEquipment }}
</div>
<div v-unValue class="">
{{ deviceData.numberHistoricalAlarm }}
</div>
<div v-unValue class="">
{{ deviceData.numberAlarmProcessed }}
</div>
<div v-unValue class="last">
{{ deviceData.numberInAlarm }}
</div>
</div>
</div>
<div class="btn">
......
gassafetyprogress-web/src/components/bigWindow/User.vue
View file @ bafc4fd5
<!--
* @Author: your name
* @Date: 2022-01-26 20:07:52
* @LastEditTime: 2022-02-28 13:30:46
* @LastEditTime: 2022-03-01 09:17:01
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
......@@ -35,41 +35,46 @@
</div>
</div>
<div class="foot">
<div class="thead flex">
<div class="first">设备类型</div>
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
<div>历史报警</div>
<div>已处理报警</div>
<div class="last">报警中</div>
</div>
<div class="tbody flex">
<div v-unValue class="first zzz">{{ deviceData.detectorType }}</div>
<div class="">{{ deviceData.detectorCount }}</div>
<div v-unValue class="">
{{ deviceData.onLineNum }}
</div>
<div v-unValue class="">
{{ deviceData.offLineNum }}
</div>
<div v-unValue class="">
{{ deviceData.historyAlarmNum }}
<template v-if="deviceData.detectorCountList">
<div class="foot">
<div class="thead flex">
<div class="first">设备类型</div>
<div>设备数量</div>
<div>在线设备</div>
<div>离线设备</div>
<div>历史报警</div>
<div>已处理报警</div>
<div class="last">报警中</div>
</div>
<div v-unValue class="">
{{ deviceData.cancelAlarmNum }}
</div>
<div v-unValue class="last zzz">
{{ deviceData.processingAlarmNum }}
<div
v-for="data in deviceData.detectorCountList"
:key="data.userId"
class="tbody flex"
>
<div v-unValue class="first zzz">{{ data.detectorType }}</div>
<div class="">{{ data.detectorCount }}</div>
<div v-unValue class="">
{{ data.onLineNum }}
</div>
<div v-unValue class="">
{{ data.offLineNum }}
</div>
<div v-unValue class="">
{{ data.historyAlarmNum }}
</div>
<div v-unValue class="">
{{ data.cancelAlarmNum }}
</div>
<div v-unValue class="last zzz">
{{ data.processingAlarmNum }}
</div>
</div>
</div>
</div>
</template>
<div class="btn">
<div @click="btnClick">感知设备</div>
</div>
</div>
</template>
......@@ -106,7 +111,10 @@ export default {
},
btnClick() {
// this.vueRoot.centerDataFunc(this.deviceData.pressureFlows);
this.vueRoot.getDetectorInfoList({ userId: this.deviceData.userId },this.deviceData.nickName);
this.vueRoot.getDetectorInfoList(
{ userId: this.deviceData.userId },
this.deviceData.nickName
);
},
},
};
......
gassafetyprogress-web/src/components/bigWindow/UserCenter.vue
View file @ bafc4fd5
......@@ -26,7 +26,7 @@
</div>
</template>
</el-table-column>
<el-table-column prop="detectorName" label="设备名称" width="100">
<el-table-column prop="detectorName" label="设备名称" width="120">
<template slot-scope="scope">
<div :title="scope.row.detectorName" class="ddd" v-unValue>
{{ scope.row.detectorName }}
......@@ -39,12 +39,15 @@
</template>
</el-table-column>
<el-table-column prop="linkman" label="联系人" width="100">
<template slot-scope="scope">
<div v-unValue>{{ scope.row.linkman }}</div>
</template>
</el-table-column>
<el-table-column prop="phone" label="联系电话" width="">
</el-table-column>
<el-table-column prop="detectorStatus" label="设备状态" width="100">
</el-table-column>
<el-table-column prop="alarmTime" label="报警时间" width="200">
<el-table-column prop="alarmTime" label="预警时间" width="180">
<template slot-scope="scope">
<div v-unValue>{{ scope.row.alarmTime }}</div>
</template>
......
gassafetyprogress-web/src/utils/mapClass/config.js
View file @ bafc4fd5
/*
* @Author: your name
* @Date: 2022-01-26 10:47:44
* @LastEditTime: 2022-02-28 15:53:46
* @LastEditTime: 2022-02-28 20:33:47
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/config.js
......@@ -27,6 +27,13 @@ export const svgUrl = {
5: require("@/assets/image/jiankong1.svg"),
6: require("@/assets/image/user1.svg"),
};
export const svgAlarm = {
2: require("@/assets/image/tiaoyaxiang1.svg"),
3: require("@/assets/image/famen1.svg"),
4: require("@/assets/image/changzhan1.svg"),
5: require("@/assets/image/jiankong1.svg"),
6: require("@/assets/mapImages/userAlarm.svg"),
};
export const deviceType = {
1:"管道",
2:"调压箱",
......
gassafetyprogress-web/src/utils/mapClass/map.js
View file @ bafc4fd5
/*
* @Author: your name
* @Date: 2022-01-11 13:45:12
* @LastEditTime: 2022-02-28 10:25:45
* @LastEditTime: 2022-03-01 10:04:44
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/mapClass.js
*/
import { pipeColor, svgUrl } from "@/utils/mapClass/config.js";
import { pipeColor, svgUrl, svgAlarm } from "@/utils/mapClass/config.js";
// 编辑类
// 在地图上新增的设备可以直接编辑，
......@@ -34,6 +34,8 @@ export class EditorMap {
allDevice = {};
// 存放所有的管道
pipeArr = {};
// 报警设备的对象
alarmObj = {};
// 当前的infowindow的组件
infowindowComponent = null;
// infowindow本身
......@@ -249,6 +251,7 @@ export class EditorMap {
addDevice(deviceData, compontent) {
const { longitude: lng, latitude: lat, iconType } = deviceData;
const icon = svgUrl[iconType];
console.log("icon", icon);
let device = this.createMarker({
map: this.map,
anchor: "bottom-center",
......@@ -266,7 +269,6 @@ export class EditorMap {
this.allDevice[iconType] = [];
}
this.allDevice[iconType].push(device);
// 设备的事件函数
this.deviceEvent(device, compontent);
}
......@@ -282,18 +284,19 @@ export class EditorMap {
// 3是删除操作
}
});
device.on("mouseover",(e)=>{
device.on("mouseover", (e) => {
const target = e.target;
const data = target.getExtData();
console.log(data)
const name = data.nickName||data.deviceName||data.videoName||data.stationName
target.setLabel({content:name,direction:"top"})
})
device.on("mouseout",(e)=>{
console.log(data);
const name =
data.nickName || data.deviceName || data.videoName || data.stationName;
target.setLabel({ content: name, direction: "top" });
});
device.on("mouseout", (e) => {
const target = e.target;
const data = target.getExtData();
target.setLabel({content:""})
})
target.setLabel({ content: "" });
});
}
/** 点击marker出现infowindow
* @description:
......@@ -477,8 +480,8 @@ export class EditorMap {
// 燃气没有公司，所以没有device.companyType不收到公司的控制
const companyHas = companyArr.indexOf(data.companyType + "") >= 0;
// 设备存在
const deviceHas = typeArr.indexOf(+data.iconType ) >= 0;
console.log(deviceHas)
const deviceHas = typeArr.indexOf(+data.iconType) >= 0;
console.log(deviceHas);
// 必须设备存在数组里，才会显示设备 !data.companyType代表用户不受公司制约
if (deviceHas && (companyHas || !data.companyType)) {
device.show();
......@@ -488,7 +491,88 @@ export class EditorMap {
});
}
}
// 普通调用方法
// 设备报警
deviceAlarm(obj) {
// 设备的类型
const { iconType, userId } = obj;
// 找到这个设备所属的空间
const device = this.allDevice[iconType].filter(
(item) => item.getExtData().userId == userId
)[0];
// 更改的icon
const icon = svgAlarm[iconType];
device.setIcon(icon);
// 将旧的值缓存一下
device.oldData = device.getExtData();
device.setExtData(obj);
if (!this.alarmObj[iconType]) {
this.alarmObj[iconType] = [];
} else {
const ind = this.alarmObj[iconType].indexOf(userId);
if (ind < 0) {
this.alarmObj[iconType].push(userId);
}
}
}
//如果传过来的报警设备中，有不在deviceAlarm中，就是恢复的设备恢复
relieveAlarm(alarmObj) {
// 把报警数组改变结构
const httpArr = alarmObj.map((item) => item.userId);
// 循环现有报警设备
for (let iconType in this.alarmObj) {
const arr = this.alarmObj[iconType];
// 循环现有报警设备
for (let i = 0; i < arr.length; i++) {
// 看看现有报警设备中有没有不在 报警数组中的值，有就恢复
const userId = arr[i];
// 看看接口传来的数据中还有没有这些UserId，如果没有了，就是修好了
const index = httpArr.indexOf(userId);
// 如果已经不在报警数组中,就要去大数组中找他,利用userId
if (index < 0) {
// 过滤出来这个要恢复的设备
const device = this.allDevice[iconType].filter(
(item) => item.getExtData().userId == userId
)[0];
// 恢复
const icon = svgUrl[iconType];
device.setIcon(icon);
// 赋值
const deviceData = device.oldData;
device.setExtData(deviceData);
device.oldData = null;
// 在arr中删掉
arr.splice(i, 1);
// 由于删掉了当前，所以要--恢复位置
i--;
}
}
}
}
// ws协议方法
wsAlarm(obj) {
const { iconType, userId, userStatus } = obj;
const decice = this.allDevice[iconType].filter(
(item) => item.getExtData().userId == userId
)[0];
let icon = null;
// 2报警，1恢复
if (userStatus == 2) {
icon = svgAlarm[iconType];
device.oldData = device.getExtData()
device.setExtData(obj);
}else if(userStatus==1){
icon = svgUrl[iconType];
const oldData = device.oldData;
device.setExtData(oldData);
device.oldData=null;
}
decice.setIcon(icon)
}
// 卫星图切换
satellite = null;
changeMap(bool) {
......
gassafetyprogress-web/src/views/bigWindow/index.vue
View file @ bafc4fd5
<!--
* @Author: your name
* @Date: 2022-01-11 13:44:17
* @LastEditTime: 2022-02-28 15:54:27
* @LastEditTime: 2022-03-01 09:51:34
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/Home.vue
......@@ -152,6 +152,7 @@ import {
getCz,
getVideo,
getUser,
userAlarm,
} from "@/api/bigWindow/getDevice";
import Line from "@/components/bigWindow/Line.vue";
import VideoView from "@/components/bigWindow/VideoView.vue";
......@@ -244,6 +245,9 @@ export default {
centerTotal: null,
centerShow: false,
centerTitle: "",
// 报警轮询timer
alarmTimer: null,
};
},
......@@ -305,12 +309,16 @@ export default {
this.goMap(getFm, this.addDevice, DeviceA);
this.goMap(getCz, this.addDevice, DeviceA);
this.goMap(getVideo, this.addDevice, VideoView);
this.goMap(detectorUserList, this.addDevice, User);
// getVideo().then((res) => {
// console.log("getVideo", res);
// });
// 用户要等一下 因为有报警数据
this.goMap(detectorUserList, this.addDevice, User).then((res) => {
// 先查一下，然后开启定时器
this.userAlarm();
this.alarmTimer = setInterval(() => {
this.userAlarm();
// console.log("查询报警");
}, 6000);
});
}
this.currentTime();
this.$refs.mychild.choice(0);
this.$refs.mychild2.choice(0);
......@@ -336,7 +344,7 @@ export default {
}
},
goMap(httpFunc, addFunc, component) {
httpFunc().then((res) => {
return httpFunc().then((res) => {
// 给用户加icontype
if (res.data && !res.data[0].iconType) {
......@@ -344,26 +352,35 @@ export default {
item.iconType = 6;
});
}
// if (res.data && !res.data[0].iconType) {
// res.data.forEach((item) => {
// item.iconType = 6;
// });
// }
// 根据数据格式不同，赋值不同，如果是个数组，就用res，如果不是就用res.data
let config = {};
if (Array.isArray(res)) {
config = { data: res };
// 给视频设备的conpanyType变成null
if(res[0].iconType==5){
res.forEach(item=>{
if (res[0].iconType == 5) {
res.forEach((item) => {
item.companyType = null;
})
});
}
} else {
config = { data: res.data };
}
addFunc(config, component);
return config.iconType;
});
},
userAlarm() {
userAlarm().then((res) => {
console.log("报警", res.data);
if (res.data.length > 0) {
// 报警
res.data.forEach((item) => {
this.map.deviceAlarm(item);
});
// 看看谁告消警
}
this.map.relieveAlarm(res.data);
});
},
......@@ -474,6 +491,9 @@ export default {
if (this.formatDate) {
clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
}
if (this.alarmTimer) {
clearInterval(this.alarmTimer);
}
},
};
</script>
......
gassafetyprogress-web/vue.config.js
View file @ bafc4fd5
......@@ -34,7 +34,7 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
// target: `http://localhost:8903/gassafety`,
// target: `http://192.168.2.14:8903/gassafety`,
target: `http://222.223.203.154:8092/gassafety`,
changeOrigin: true,
pathRewrite: {
......
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