Skip to content

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

Merge branch 'develop_jzl'

parents d5edf392 8ffdb420
Hide whitespace changes
Inline Side-by-side
Showing with 295 additions and 59 deletions
gassafety-web/src/api/device/videoManager.js
View file @ dc2f32dd
......@@ -9,7 +9,7 @@ export function listManager(query) {
})
}
export function videoList() {
export function videoList(query) {
return request({
url: '/device/manager/videoList',
method: 'get',
......
gassafety-web/src/assets/images/shexiangtou.svg 0 → 100644
View file @ dc2f32dd
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="34.049" viewBox="0 0 23 34.049">
<g id="组_2451" data-name="组 2451" transform="translate(7189 23993)">
<g id="路径_188" data-name="路径 188" transform="translate(-7189 -23993)" 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 0.9999980926513672 C 5.71027946472168 0.9999980926513672 1 5.710289001464844 1 11.50002861022949 C 1 15.44052600860596 6.295671463012695 22.62869071960449 11.47669506072998 28.3024730682373 C 12.68497657775879 26.95182228088379 15.33078575134277 23.97880554199219 17.65543937683105 20.72857856750488 C 19.63740921020508 17.95747756958008 22 14.10697841644287 22 11.50002861022949 C 22 5.710289001464844 17.28972053527832 0.9999980926513672 11.5 0.9999980926513672 M 11.5 -1.9073486328125e-06 C 17.85127067565918 -1.9073486328125e-06 23 5.148738861083984 23 11.50002861022949 C 23 17.82768249511719 11.48916530609131 29.63789749145508 11.49940204620361 29.80171585083008 C 11.36462783813477 29.63818168640137 0 17.7873649597168 0 11.50002861022949 C 0 5.148738861083984 5.14872932434082 -1.9073486328125e-06 11.5 -1.9073486328125e-06 Z M 11.49940204620361 29.80171585083008 C 11.50076866149902 29.80337524414062 11.50098419189453 29.8038387298584 11.5 29.80305862426758 C 11.49963855743408 29.80277252197266 11.49944019317627 29.80232810974121 11.49940204620361 29.80171585083008 Z" stroke="none" fill="#7bf8f4"/>
</g>
<path id="多边形_35" data-name="多边形 35" d="M4.524,0,9.049,6.033H0Z" transform="translate(-7172.411 -23963.049) rotate(180)" fill="#7bf8f4"/>
<path id="路径_1298" data-name="路径 1298" d="M21.1,8.659v7.97l-2.46-.621V13.532l-5.534-1.863V9.8h-.613V8.563l-3.428.807,1.315-1.4-.129-.791c-.1.323-.282.54-.508.573-.476.081-.992-.67-1.154-1.67-.145-.928.065-1.75.484-1.92L7.742,2.577l-.1-.04-1.888.307.016.452,1.3-.21L7.4,5.191l-.694.1L5.168,3.593,5.12,2.327,6.5,2.109l.9-.145.791-.129L16.51.512l.976.371,1.452,2.549L10.025,4.86a3.109,3.109,0,0,1,.21.549L18.2,4.134,18.624,6.8,17.285,8.062l-2.323.508V9.813h-.613v1.242L18.656,12.3V9.2ZM9.323,5.175c-.21.032-.315.411-.25.839s.29.758.5.726.315-.411.25-.839S9.532,5.142,9.323,5.175ZM7.943,8.119l-.411-2.6-.6.1.46,2.864,1.549.96.46-.419Z" transform="translate(-7191.327 -23989.652)" fill="#7bf8f4"/>
</g>
</svg>
gassafety-web/src/assets/styles/fonticon.scss
View file @ dc2f32dd
@font-face {
font-family: "iconfont"; /* Project id 2692138 */
src: url('//at.alicdn.com/t/font_2692138_spittg1q2rr.woff2?t=1629681541408') format('woff2'),
url('//at.alicdn.com/t/font_2692138_spittg1q2rr.woff?t=1629681541408') format('woff'),
url('//at.alicdn.com/t/font_2692138_spittg1q2rr.ttf?t=1629681541408') format('truetype');
src: url('//at.alicdn.com/t/font_2692138_w351iy9udj.woff2?t=1632302713203') format('woff2'),
url('//at.alicdn.com/t/font_2692138_w351iy9udj.woff?t=1632302713203') format('woff'),
url('//at.alicdn.com/t/font_2692138_w351iy9udj.ttf?t=1632302713203') format('truetype');
}
.iconfont {
......@@ -13,17 +13,20 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-fmjgs:before {
content: "\e619";
}
.icon-sxt:before {
content: "\e618";
}
.icon-reset:before {
content: "\e616";
}
.icon-search{
}
.icon-search:before {
content: "\e617";
font-size: 13px;
}
.icon-zhibanrenyuan:before {
......@@ -42,10 +45,6 @@
content: "\e610";
}
.icon-fmjgs:before {
content: "\e612";
}
.icon-lljgs:before {
content: "\e614";
}
......
gassafety-web/src/components/PopWindowGis/videoInfowindow.vue 0 → 100644
View file @ dc2f32dd
<template>
<div class="wrapper">
<div class="content">
<span class="left ">名称: {{ data.videoName }}</span>
<span class="right ">位置: {{ data.videoAddress }}</span>
</div>
<div class=""></div>
</div>
</template>
<script>
export default {
props: {
data: {
type: Object,
},
},
created() {
// console.log("data", this.data);
},
};
</script>
<style lang="scss" scoped>
.wrapper {
// width: 166px;
height: 54px;
// background: #0d4f88;
background: rgba(7, 29, 51, 0.9);
font-size: 14px;
color: #fff;
box-sizing: border-box;
padding: 7px 7px 7px 8px;
box-shadow: 0 0 20px -5px #0d4f88;
border-radius: 4px;
position: relative;
&:before {
content: "";
position: absolute;
left: -10px;
top: 5px;
width: 0px;
height: 0px;
/* border: 20px solid red; */
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
/* border-left: 50px solid greenyellow; */
border-right: 30px solid rgba(7, 29, 51, 0.9);
box-shadow: 0 0 20px -5px #0d4f88;
z-index: -1;
}
.content {
span {
word-break: break-all;
display: block;
}
}
}
</style>
\ No newline at end of file
gassafety-web/src/components/PopWindowGis/videoView.vue 0 → 100644
View file @ dc2f32dd
<template>
<el-dialog
:title="title"
:visible.sync="dialogVisible"
:before-close="handleClose"
ref="videoBox"
>
<div class="box videoBox">
<div id="video"></div>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false"
>确 定
</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</span>
</el-dialog>
</template>
<script>
import moment from "moment";
import WasmPlayer from "@easydarwin/easywasmplayer"; //导入WasmPlayer.js
export default {
props: {
videoManagerId: {
type: Number,
},
resourceId: {
type: String,
},
title: {
type: String,
},
target: {
type: Object,
},
gaodeMap: {
type: Object,
},
},
data() {
return {
dialogVisible: true,
AfterClose: true,
};
},
computed: {
url() {
return `http://27.128.189.137:18000/flv/hls/${this.resourceId}.flv`;
},
},
watch: {
dialogVisible(val) {
if (!val) {
document.body.removeChild(this.$refs.videoBox.$el);
this.player.destroy(this.url);
}
},
},
mounted() {
setTimeout(() => {
this.player = new WasmPlayer(null, "video", this.callBack, {
Height: true,
});
this.player.play(this.url, 1);
}, 1000);
},
methods: {
show() {
this.dialogVisible = true;
},
handleClose(done) {
console.log("关闭");
this.player.destroy(this.url);
// document.body.removeChild(this.$refs.videoBox.$el);
done();
},
callBack() {
console.log(123);
},
},
};
</script>
<style lang="scss">
.box {
width: 100%;
height: 500px;
#video {
height: 100%;
}
}
</style>
gassafety-web/src/utils/gaodeMapView.js
View file @ dc2f32dd
......@@ -13,9 +13,11 @@ import { delDeviceInfo } from "@/api/device/deviceInfo";
import workerManInfowindow from "../components/PopWindowGis/workerManInfowindow.vue";
import workerManView from "../components/PopWindowGis/workerManView.vue";
import videoView from "../components/PopWindowGis/videoView.vue";
import videoInfowindow from "../components/PopWindowGis/videoInfowindow.vue";
import { getArray } from "@/utils/gassafety.js";
import { lineColor,mapStyle } from "./mapCommon.js";
import { lineColor, mapStyle } from "./mapCommon.js";
import { delPipe } from "@/api/device/pipe.js";
import vue from "../main";
import { Card } from "element-ui";
......@@ -31,7 +33,8 @@ export const DEVICE_TYPE = {
PRESSUREGAGE: "7",
INSPECTOR: "8",
SMALLINSPECTOR: "workPoint",
TROUBLE: "trouble"
TROUBLE: "trouble",
VIDEO: "10"
};
class gaodeMap {
......@@ -40,6 +43,8 @@ class gaodeMap {
//值班人员的单独数组，轨迹的时候使用
workerManArr = [];
troubles = [];
// 摄像头
cameras = [];
// 值班人员对象的arr
workerManMarkArr = [];
// 是否开启新增
......@@ -73,7 +78,7 @@ class gaodeMap {
pitch: 8,
zoom: 9,
//mapStyle: 'amap://styles/darkblue',
mapStyle,
mapStyle
});
this.myMap = map;
this.myMap.on("mousedown", e => {
......@@ -147,7 +152,6 @@ class gaodeMap {
}
changeMap(bool) {
// 卫星图
if (!bool) {
if (this.satellite) return;
this.satellite = new AMap.TileLayer.Satellite();
......@@ -270,24 +274,7 @@ class gaodeMap {
deviceType: type,
userId
});
// 值班人员的事件
// marker.on("click", e => {
// console.log(e);
// console.log(e.target.getExtData());
// // console.log(Card)
// // e.target.content = this.getMarketContent(data);
// });
// marker.on("mouseover", e => {
// that.markerType = markerType;
// e.target.content = this.getMarketContent(data);
// infoWindow.setContent(e.target.content);
// infoWindow.open(map, e.target.getPosition());
// that.boxCollision(infoWindow.dom);
// // that.addCloneDome(e.target, infoWindow);
// // infoWindow.close();
// that.workerManInfoWindow = infoWindow;
// });
marker.markerType = markerType;
marker.data = data;
marker.infoWindow = infoWindow;
......@@ -321,12 +308,53 @@ class gaodeMap {
marker.setExtData(data);
this.troubles.push(marker);
}
// 摄像头
if (DEVICE_TYPE.VIDEO == markerType) {
// 摄像头
const {
longitude,
latitude,
videoName,
videoManagerId,
resourceId,
videoAddress,
type
} = data;
marker.setExtData({
videoManagerId,
videoName,
videoAddress,
resourceId,
pos: [longitude, latitude],
deviceType: type
});
marker.markerType = markerType;
marker.data = data;
marker.infoWindow = infoWindow;
marker.on("mouseover", this.videoOpen);
marker.on("mouseout", e => {
e.target.infoWindow.close();
this.domAllShow();
});
marker.on("mousedown", e => {
that.closeInfoWindow();
that.videoView({
title: "监控",
target: marker,
videoManagerId,
resourceId
});
});
// marker.setExtData(data);
this.cameras.push(marker);
}
if (
DEVICE_TYPE.WORKORDER != markerType &&
DEVICE_TYPE.INSPECTOR != markerType &&
DEVICE_TYPE.SMALLINSPECTOR != markerType &&
DEVICE_TYPE.TROUBLE != markerType
DEVICE_TYPE.TROUBLE != markerType &&
DEVICE_TYPE.VIDEO != markerType
) {
// marker.content = this.getMarketContent(data, markerInfoWindow);
marker.infoWindow = infoWindow;
......@@ -420,11 +448,7 @@ class gaodeMap {
e.target.infoWindow.setContent(e.target.content);
e.target.infoWindow.setOffset(new AMap.Pixel(24, -38));
e.target.infoWindow.open(map, e.target.getExtData().pos);
console.log("e.target.getPosition()", e.target.getExtData().pos);
console.log("offset", e.target.infoWindow.getOffset());
this.boxCollision(e.target.infoWindow.dom);
// that.addCloneDome(e.target, infoWindow);
// infoWindow.close();
this.workerManInfoWindow = e.target.infoWindow;
};
// 隐患
......@@ -436,6 +460,16 @@ class gaodeMap {
this.boxCollision(e.target.infoWindow.dom);
this.workerManInfoWindow = e.target.infoWindow;
};
//摄像头
videoOpen = e => {
this.markerType = e.target.markerType;
e.target.content = this.getMarketContent(e.target.data);
e.target.infoWindow.setContent(e.target.content);
e.target.infoWindow.setOffset(new AMap.Pixel(24, -38));
e.target.infoWindow.open(map, e.target.getExtData().pos);
this.boxCollision(e.target.infoWindow.dom);
this.workerManInfoWindow = e.target.infoWindow;
};
// 鼠标移入设备时候实行的函数
infoOpen = e => {
......@@ -581,6 +615,17 @@ class gaodeMap {
dom.remove();
return html;
}
case DEVICE_TYPE.VIDEO: {
console.log("DEVICE_TYPE.VIDEODEVICE_TYPE.VIDEO", DEVICE_TYPE.VIDEO);
const dom = createPop(videoInfowindow, {
title: "video",
data: data,
map: map
});
const html = dom.$el;
dom.remove();
return html;
}
}
}
......@@ -680,6 +725,15 @@ class gaodeMap {
marker.setIcon(icon);
break;
}
// 摄像头
case DEVICE_TYPE.VIDEO: {
let icon = new AMap.Icon({
opacity: 0.1,
image: require("../assets/images/shexiangtou.svg")
});
marker.setIcon(icon);
break;
}
}
}
changeMarkIcon(marker, iconUrl) {
......@@ -692,20 +746,20 @@ class gaodeMap {
workerManView(options) {
// const {} =options;
const notice = createPop(workerManView, {
// 数据
// lineData: options.lineData,
// lnglatsArr:options.lnglatsArr,
// pipeLength:options.pipeLength,
// //线是新线还是老线
// lineType: options.lineType,
// target: options.obj,
...options,
//把当前对象当作that传进去
gaodeMap: this
// lineOkCallBack: this.lineOkCallBack
});
notice.show();
}
videoView(options) {
// const {} =options;
const notice = createPop(videoView, {
...options,
gaodeMap: this
});
notice.show();
}
//
trackBack(marker, arr, data) {
this.tracMoveFlag = true;
......
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ dc2f32dd
......@@ -92,7 +92,6 @@
:open="createWorkTroubleOpen"
@callback="CreateWorkTroubleCallBack"
/>
<div
ref="drawer"
class="drawer"
......@@ -301,6 +300,7 @@
<script>
// import from "utils/gaodeMapView.js";
import { pipeAllInfoList, countPipeLength } from "@/api/device/pipe.js";
import { videoList } from "@/api/device/videoManager.js";
import gaodeMap, {
map,
DEVICE_TYPE,
......@@ -335,7 +335,7 @@ export default {
// 1新建，2编辑，3删除,点按钮变色
targetNum: 0,
// 左边的bar的active判定
leftBarNum: [1, 2, 3, 4, 7, 8, 9],
leftBarNum: [1, 2, 3, 4, 7, 8, 9, 10],
// 右转箭头的样式active判定
arrowRightNum: [],
// 新建里的值
......@@ -409,7 +409,7 @@ export default {
{
type: "7",
value: 10,
icon: "icon-zhibanrenyuan",
icon: "icon-sxt",
label: "摄像头",
nowPage: 1,
maxPage: 99,
......@@ -417,7 +417,7 @@ export default {
},
],
// 这是图上所有的点
allList: [[], [], [], [], [], [], [],[]],
allList: [[], [], [], [], [], [], [], []],
keyWord: "",
// 右下角的数据data
rightBototmData: [],
......@@ -450,12 +450,10 @@ export default {
mounted() {
// this.$nextTick(() => {
this.onResize();
window.removeEventListener("resize", this.onResize);
window.addEventListener("resize", this.onResize);
this.initMap();
// });
},
watch: {
......@@ -531,6 +529,12 @@ export default {
return this.getMapHiddenTroublelist();
}
})
.then((res) => {
//摄像头
if (res == 200) {
return this.getVideoList();
}
})
.then((res) => {
if (res == 200) {
// 所有设备上图结束之后，左边的抽屉加载数据
......@@ -575,7 +579,7 @@ export default {
// 管道
getPipeList(queryParams) {
return pipeAllInfoList(queryParams).then((res) => {
console.log("管道", res);
// console.log("管道", res);
if (res.code == 200) {
this.gaoMap.addPolyline(res.data);
this.pipeClassify(res.data);
......@@ -587,7 +591,7 @@ export default {
getInspectorLocations(queryParams) {
return getInspectorLocations(queryParams).then((res) => {
if (res.code == 200) {
console.log(" 值班人员", res);
// console.log(" 值班人员", res);
// 把值班人员传进类里
this.gaoMap.workerManArr = res.data;
this.workerManClassify(res.data);
......@@ -600,6 +604,7 @@ export default {
return res.code;
});
},
// 隐患
getMapHiddenTroublelist(queryParams) {
return getMapHiddenTroublelist(queryParams).then((res) => {
......@@ -607,13 +612,25 @@ export default {
if (res.code == 200) {
this.troubleClassify(res.data);
res.data.forEach((item) => {
console.log("隐患", item);
// console.log("隐患", item);
this.gaoMap.addMarker(DEVICE_TYPE.TROUBLE, item);
});
return res.code;
}
});
},
// 视频设备
getVideoList(queryParams) {
return videoList(queryParams).then((res) => {
if (res.code == 200) {
console.log("摄像头", res.rows);
res.rows.forEach((item) => {
this.gaoMap.addMarker(DEVICE_TYPE.VIDEO, item);
});
return res.code;
}
});
},
// 获取报警资源，并且改变图上的状态
getSelectAlarmDevice() {
return selectAlarmDevice().then((res) => {
......@@ -1381,7 +1398,7 @@ export default {
this.gaoMap.searchSelectName = undefined;
} else {
// 左边全选
this.leftBarNum = [1, 2, 3, 4, 7, 8, 9];
this.leftBarNum = [1, 2, 3, 4, 7, 8, 9, 10];
// this.arrowRightNum=[];
// 右转箭头的样式active判定
// this.arrowRightNum = [];
......@@ -1399,6 +1416,7 @@ export default {
this.changeBtnData.forEach((item) => {
item.nowPage = 1;
});
this.pipeList().then(() => {
// 设备报警
this.getSelectAlarmDevice();
......@@ -1453,7 +1471,7 @@ export default {
});
map.clearMap();
this.leftBarNum = [1, 2, 3, 4, 7, 8, 9];
this.leftBarNum = [1, 2, 3, 4, 7, 8, 9, 10];
this.initMap();
},
// 改变工单弹框状态
......
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