Skip to content

platform / fanxing_new

Go to a project
Commit 68ab860b by 潘建波
Options

修改视频资源修改后不刷新问题

1 parent 463b27e4
Inline Side-by-side
Showing 8 changed files with 690 additions and 12 deletions
dist.zip
No preview for this file type
public/js/version.json
{"commit":"0f836ae1db6fa125fb5b8de516d3bc87216e607c","commitDate":"2020-9-18 13:43","buildDate":"2020-9-28 18:1","version":"2.0.8","info":"【NEW】添加日志 【NEW】增加加密方式 【BUG】去除地点名称限制 【BUG】点击主节点之后再点击平台，不可以显示平台的信息 【BUG】上传时间是调用的utc时间"}
\ No newline at end of file \ No newline at end of file
{"commit":"463b27e4ce45ee1406fd848cc3af744223fcc6a6","commitDate":"2020-10-9 14:18","buildDate":"2020-10-9 14:19","version":"2.0.8","info":"增加组织机构日志"}
\ No newline at end of file \ No newline at end of file
src/views/resource/treeComponents/cameraDialog.vue
...@@ -118,6 +118,7 @@ export default { ...@@ -118,6 +118,7 @@ export default {
longitude: "", longitude: "",
latitude: "" latitude: ""
}, },
curNode:null,
initParam: {}, initParam: {},
cameraAddVisible: false, cameraAddVisible: false,
dirCodeList: [], dirCodeList: [],
...@@ -139,6 +140,7 @@ export default { ...@@ -139,6 +140,7 @@ export default {
}, },
methods: { methods: {
initDialog(node, type, devsId) { initDialog(node, type, devsId) {
this.curNode = node;
this.cameraAddVisible = true; this.cameraAddVisible = true;
this.devsId = devsId; this.devsId = devsId;
if (type == "add") { if (type == "add") {
...@@ -239,6 +241,8 @@ export default { ...@@ -239,6 +241,8 @@ export default {
org_type: "address", org_type: "address",
unid: this.addVideoParam.addr_unid unid: this.addVideoParam.addr_unid
}; };
debugger
this.$emit("setCamerInfo","");
this.$emit("getData", data); this.$emit("getData", data);
// this.$emit("getData", data); // this.$emit("getData", data);
this.cameraAddVisible = false; this.cameraAddVisible = false;
......
src/views/resource/treeComponents/cameraTree.vue
...@@ -272,7 +272,6 @@ export default { ...@@ -272,7 +272,6 @@ export default {
editObj[0].unid editObj[0].unid
) )
.then(data => { .then(data => {
debugger
let type = this.editForm.targetType; let type = this.editForm.targetType;
if(type == 'org') { if(type == 'org') {
this.$logs.oplogs(res,'serv_vchan',`修改组织${this.editForm.name}`); this.$logs.oplogs(res,'serv_vchan',`修改组织${this.editForm.name}`);
......
src/views/resource/videoEquipment.vue
...@@ -243,6 +243,10 @@ export default { ...@@ -243,6 +243,10 @@ export default {
syncdetail(index, data) { syncdetail(index, data) {
this.$refs.syncdetail.initDialog(data); this.$refs.syncdetail.initDialog(data);
}, },
setCamerInfo(){
debugger
this.getCameraTree();
},
getCameraTree() { getCameraTree() {
this.tableType = "camera"; this.tableType = "camera";
this.$api.resource this.$api.resource
...@@ -313,7 +317,7 @@ export default { ...@@ -313,7 +317,7 @@ export default {
this.cameraTree = res.vchan_struct; this.cameraTree = res.vchan_struct;
this.cameraArr = []; this.cameraArr = [];
this.cameraTreeData = this.cameraBuildTree(res.vchan_struct); this.cameraTreeData = this.cameraBuildTree(res.vchan_struct);
// this.getTable(data, "camera"); this.getTable(data, "camera");
}); });
}, },
syncBuildTree(data) { syncBuildTree(data) {
...@@ -460,11 +464,13 @@ export default { ...@@ -460,11 +464,13 @@ export default {
getTable(data, type) { getTable(data, type) {
if (data.org_type != "root") { if (data.org_type != "root") {
this.tableType = type; this.tableType = type;
debugger
if (this.tableType == "camera") { if (this.tableType == "camera") {
if (data.type) { if (data.type || data.org_type) {
this.tableType = type; this.tableType = type;
this.formattterData = []; this.formattterData = [];
let filterData = []; let filterData = [];
debugger
let search_params = { let search_params = {
vchan_type: "camera", vchan_type: "camera",
org_unid: data.unid org_unid: data.unid
......
src/views/trafficShow/map.vue
...@@ -68,6 +68,8 @@ import { ...@@ -68,6 +68,8 @@ import {
defaults as defaultInteractions, defaults as defaultInteractions,
Pointer as PointerInteraction Pointer as PointerInteraction
} from "ol/interaction"; //交互，选择，画框等 } from "ol/interaction"; //交互，选择，画框等
import ImageWMS from 'ol/source/ImageWMS';
import TileWMS from 'ol/source/TileWMS';
import { import {
Circle as CircleStyle, Circle as CircleStyle,
Fill, Fill,
...@@ -190,20 +192,35 @@ export default { ...@@ -190,20 +192,35 @@ export default {
url: path url: path
}) })
}); });
var wmsSource = new ImageWMS({
        url: 'https://ahocevar.com/geoserver/wms',
        params: {'LAYERS': 'ne:ne'},
serverType: 'geoserver',
crossOrigin: 'anonymous',
      });
Views = new View({       var wmsLayer = new TileLayer({
projection: "EPSG:4326",         source:wmsSource ,
zoom: 2, // 并且定义地图显示层级为2       });
minZoom: 13,
maxZoom: 18,     
center: mapcenter Views = new View({
});          center: [0, 0],
        zoom: 1
      });
// Views = new View({
// projection: "EPSG:4326",
// zoom: 2, // 并且定义地图显示层级为2
// minZoom: 13,
// maxZoom: 18,
// center: mapcenter
// });
map = new Map({ map = new Map({
controls: defaultControls().extend([new RotateNorthControl()]), controls: defaultControls().extend([new RotateNorthControl()]),
// 设置地图图层 // 设置地图图层
layers: [ layers: [
// 创建一个使用Open Street Map地图源的瓦片图层 // 创建一个使用Open Street Map地图源的瓦片图层
offlineMapLayer     wmsLayer 
], ],
loadTilesWhileAnimating: true, loadTilesWhileAnimating: true,
......
src/views/trafficShow/map.xml 0 → 100644
<ServiceExceptionReport xmlns="http://www.opengis.net/ogc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.3.0" xsi:schemaLocation="http://www.opengis.net/ogc https://ahocevar.com/geoserver/schemas/wms/1.3.0/exceptions_1_3_0.xsd">
<ServiceException code="MissingParameterValue" locator="request">
Could not determine geoserver request from http request org.geoserver.platform.AdvancedDispatchFilter$AdvancedDispatchHttpRequest@3df6b271
</ServiceException>
</ServiceExceptionReport>
\ No newline at end of file \ No newline at end of file
src/views/trafficShow/wmsmap.vue 0 → 100644
<template>
<div style="width:100%">
<div id="map" class="maps"></div>
<div id="popup" class="ol-popup img-popup">
<a
href="#"
id="popup-closer"
class="ol-popup-closer"
@click="closepopup"
></a>
<div class="" id="t-popup-content"></div>
</div>
<div id="videopopup" class="ol-popup video-popup">
<a
href="#"
id="popup-closer"
class="ol-popup-closer"
@click="closevideopopup"
></a>
<div class="mapvideo">
<videoPlay ref="mapvideo" :playurl="playurl"></videoPlay>
</div>
<div class="video-info">
<el-col class="info-item" :span="24">
视频源名称：{{ curtaskname }}
</el-col>
<el-col class="info-item" :span="24">坐标点：{{ pcoordinate }}</el-col>
<el-col class="info-item" :span="24">
算法类型：{{ setalgo(curSubtask.task_algo_type) }}
</el-col>
</div>
</div>
<div id="taskinfopopup" class="ol-popup info-popup">
<div>
<!-- <span>{{ infoData.vchan_name }}</span> -->
<span>{{ curtaskname }}</span>
</div>
</div>
</div>
</template>
<script>
import { mapState } from "vuex";
import videoPlay from "../public/videoPlay";
import { inherits } from "ol/util.js";
import Map from "ol/Map";
import View from "ol/View";
import Feature from "ol/Feature"; //元素
import Overlay from "ol/Overlay"; //弹出框
import { toStringHDMS } from "ol/coordinate";
import { fromLonLat, toLonLat } from "ol/proj";
import { defaults as defaultControls, Control } from "ol/control.js";
import {
Tile as TileLayer,
Vector as VectorLayer,
VectorTile,
Heatmap as HeatmapLayer
} from "ol/layer"; //瓦片图层 , 矢量图层等基础图层
import { Cluster, OSM, Vector as VectorSource, XYZ, TileJSON } from "ol/source";
import KML from "ol/format/KML.js";
import {
defaults,
Select,
DragBox,
Pointer,
DragAndDrop,
Draw,
defaults as defaultInteractions,
Pointer as PointerInteraction
} from "ol/interaction"; //交互，选择，画框等
import ImageWMS from 'ol/source/ImageWMS';
import {
Circle as CircleStyle,
Fill,
Stroke,
Style,
Text,
Icon
} from "ol/style"; //添加图层，点，圆等的样式调节
import { Point, Geometry, LineString } from "ol/geom";
import GeoJSON from "ol/format/GeoJSON.js";
import "ol/ol.css"; //地图默认样式
var map = "";
var Views = "";
var container = "";
var videocontainer = "";
var taskInfocontaniner = "";
var content = "";
var voideocontent = "";
var closer = "";
var taskcloser = "";
var overlay = "";
var infooverlay = "";
var mapcenter = [120.324447, 36.074594];
var RotateNorthControl = (function(Control) {
function RotateNorthControl(opt_options) {
var options = opt_options || {};
var button = document.createElement("button");
button.className = "el-icon-aim";
var element = document.createElement("div");
element.className = "rotate-north ol-unselectable ol-control";
element.appendChild(button);
Control.call(this, {
element: element,
target: options.target
});
button.addEventListener("click", this.handleRotateNorth.bind(this), false);
}
if (Control) RotateNorthControl.__proto__ = Control;
RotateNorthControl.prototype = Object.create(Control && Control.prototype);
RotateNorthControl.prototype.constructor = RotateNorthControl;
RotateNorthControl.prototype.handleRotateNorth = function handleRotateNorth() {
Views.animate({
center: mapcenter,
duration: 400,
zoom: 14
});
};
return RotateNorthControl;
})(Control);
export default {
data() {
return {
devList: [],
playurl: {},
subtaskList: [],
infoData: {},
curtaskname: "",
pcoordinate: "",
curSubtask: {}
};
},
components: {
videoPlay
},
methods: {
InitMap() {
let _this = this;
//坐标
//
var heatData = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [116.357068, 39.954021, 0]
},
properties: {
name: "M 5 - 2012 Dec 25, PAKISTAN"
}
}
]
};
for (var i = 0; i < 300; i++) {
let c = Math.random(1) * 1000;
let e = Math.random(1) * 100;
let b = (116.357068 * 1000000 + i * c) / 1000000;
let d = (39.954021 * 1000000 + i * e) / 1000000;
let a = {
type: "Feature",
geometry: {
type: "Point",
coordinates: [b, d, 0]
},
properties: {
name: "M 5 - 2012 Dec 25, PAKISTAN" + i
}
};
heatData.features.push(a);
}
var vectorSources = new VectorSource({
features: new GeoJSON().readFeatures(heatData, {
dataProjection: "EPSG:4326"
})
});
var path =
"http://192.168.9.62:20080/static/pics/qingdaoMap/roadmap/{z}/{x}/{y}.png";
var offlineMapLayer = new TileLayer({
source: new XYZ({
// 设置本地离线瓦片所在路径，由于例子里面只有一张瓦片，页面显示时就只看得到一张瓦片。
url: path
})
});
var wmsSource = new ImageWMS({
        url: 'http://191p6205d9.51mypc.cn:48397/arcgis/services/Pipe/wisdom_cable_tv/MapServer/WMSServer?request=GetCapabilities&service=WMS',
         params: {'LAYERS': 'topp:states'},
        serverType: 'geoserver',
         ratio: 1,
      });
      var wmsLayer = new TileLayer({
       source: new OSM(),
      });
    
Views = new View({
         center: [0, 0],
        zoom: 1
      });
// Views = new View({
// projection: "EPSG:4326",
// zoom: 2, // 并且定义地图显示层级为2
// minZoom: 13,
// maxZoom: 18,
// center: mapcenter
// });
map = new Map({
controls: defaultControls().extend([new RotateNorthControl()]),
// 设置地图图层
layers: [
// 创建一个使用Open Street Map地图源的瓦片图层
    wmsLayer 
],
loadTilesWhileAnimating: true,
// 设置显示地图的视图
view: Views,
// 让id为map的div作为地图的容器
target: "map"
});
var heatmapvector = new HeatmapLayer({
source: vectorSources,
blur: parseInt(20, 6),
radius: parseInt(3, 5)
});
map.addLayer(heatmapvector);
// 添加一个使用离线瓦片地图的层
this.devList.map(ele => {
console.log(ele.longitude);
var CameraVertorlayer = new VectorLayer({
source: _this.addCameraLayer(
[Number(ele.longitude), Number(ele.latitude)],
ele
)
});
map.addLayer(CameraVertorlayer);
});
let that = this;
map.on("click", e => {
var pixel = map.getEventPixel(e.originalEvent);
console.log("地图坐标", e.coordinate);
//点击相机标注点
map.forEachFeatureAtPixel(pixel, function(feature) {
let data = feature.getProperties().cameraInfo;
that.playvideo(data);
that.curtaskname = data.name;
that.getSubTaskInfo(data.refid);
that.pcoordinate = `${data.longitude},${data.latitude}`;
});
});
//鼠标移入标注点
map.on("pointermove", e => {
if (map.hasFeatureAtPixel(e.pixel)) {
var pixel = map.getEventPixel(e.originalEvent);
map.forEachFeatureAtPixel(pixel, function(feature) {
let data = feature.getProperties().cameraInfo;
that.infoData = data;
that.curtaskname = data.name;
that.showTaskInfo(data);
});
} else {
this.closetaskpopup();
}
});
},
movemap(data, point, type) {
let pos = point ? point : [120.324447, 36.074594];
Views.animate({
center: pos,
duration: 400,
zoom: 14
});
if (type && type == 2) {
this.addLayer(data, pos);
}
},
closepopup() {
overlay.setPosition(undefined);
closer.blur();
return false;
},
closevideopopup() {
this.closetaskpopup();
let video_ocx = document.getElementById("VionVideo");
let stopRes = video_ocx.StopPlaySip(0);
let stopRtspRes = video_ocx.StopPlay(0);
overlay.setPosition(undefined);
closer.blur();
return false;
},
closetaskpopup() {
try {
infooverlay.setPosition(undefined);
if (taskcloser) {
taskcloser.blur();
}
return false;
} catch (error) {
console.log(error);
}
},
addLayer(pdata, pos) {
document.getElementById("popup").style.display = "block";
console.log(pdata);
if (pdata.pics) {
content.innerHTML =
'<div class="content-box"><div class="img-box"><img src=' +
pdata.pics +
"></div></div>";
} else {
content.innerHTML =
'<div class="content-box"><div class="img-box"><img src=""></div></div>';
}
overlay = new Overlay({
element: container,
autoPan: true,
position: pos,
offset: [0, -30],
autoPanAnimation: {
duration: 100
}
});
map.addOverlay(overlay);
},
addCameraLayer(coordinate, data) {
let vectorSource = new VectorSource({ id: 1 });
let icon = new Feature({
geometry: new Point(coordinate),
unid: "1",
cameraInfo: data
});
let color = "#156BB1"; //设置气泡颜色
//添加svg图标需注意 width,height要和 new Icon 的imgSize保持一致
// let svg = '<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1585897688450" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2671" xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28"><defs><style type="text/css"></style></defs><path d="M512 320a192.096 192.096 0 0 1 0.256 384H512a192 192 0 1 1 0-384z" fill="#2b5ffa" p-id="2672"></path></svg>';
// let cameraIcon = new Image();
// cameraIcon.src = "data:image/svg+xml," + escape(svg);
icon.setStyle(
new Style({
//设置样式和大小
image: new Icon({
// img: cameraIcon,
// crossOrigin: "anonymous",
// imgSize: [40, 40],
marginTop: 10,
anchor: [0.5, 36],
anchorXUnits: "fraction",
anchorYUnits: "pixels",
src: require("./dian.png")
}),
// text: new Text({
// text: data.vchan_name,
// textBaseline: "top",
// font: "normal 12px 微软雅黑",
// lineHeight: "0px",
// fill: new Fill({
// color: "red"
// })
// }),
stroke: new Stroke({
color: "red",
width: 21,
marginTop: 10
})
})
);
vectorSource.addFeature(icon);
return vectorSource;
},
showTaskInfo(data) {
let pos = [data.longitude, data.latitude];
document.getElementById("taskinfopopup").style.display = "block";
infooverlay = new Overlay({
element: taskInfocontaniner,
autoPan: true,
position: pos,
offset: [-23, -20],
autoPanAnimation: {
duration: 150
}
});
map.addOverlay(infooverlay);
},
playvideo(data) {
let pos = [data.longitude, data.latitude];
document.getElementById("videopopup").style.display = "block";
overlay = new Overlay({
element: videocontainer,
autoPan: true,
offset: [-2, -40],
position: pos,
autoPanAnimation: {
duration: 50
}
});
map.addOverlay(overlay);
let vrefid = data.vchan_refid ? data.vchan_refid : data.refid;
// 获取视频流
this.$api.device.getFxStream(this.dev_unid, vrefid).then(res => {
if (res.task_list.length > 0) {
var taskarr = res.task_list;
let obj = {};
for (let i = 0; i < taskarr.length; i++) {
if (taskarr[i].rtsp_url != "") {
obj.rtsp_url = res.task_list[i].rtsp_url;
break;
}
}
this.playurl = obj;
this.$refs.mapvideo.videoPlay();
} else {
this.$message({
message: "该相机下没有分析任务",
type: "error"
});
}
});
},
getSubTaskInfo(refid) {
if (this.subtaskList.length > 0) {
for (let i = 0; i < this.subtaskList.length; i++) {
if (refid == this.subtaskList[i].vchan.vchan_refid) {
this.curSubtask = this.subtaskList[i];
break;
}
}
}
},
setalgo(id) {
let algotype = "";
switch (id) {
case "0":
algotype = "交通";
break;
case "1":
algotype = "客流";
break;
case "2":
algotype = "客流";
break;
case "3":
algotype = "违停";
break;
default:
break;
}
return algotype;
},
getDevList() {
this.$api.show.getDevList(this.dev_unid).then(res => {
let devlist = [];
this.$store.commit("setDevList", res.list_data);
res.list_data.map(ele => {
if (ele.vchan_type == "camera") {
devlist.push(ele);
}
});
this.devList = devlist;
setTimeout(() => {
this.InitMap();
}, 200);
});
},
searchvchan(vchanname) {
this.devList.forEach(ele => {
if (ele.vchan_name == vchanname) {
let point = [ele.longitude, ele.latitude];
this.movemap(point);
}
});
}
},
computed: {
...mapState(["mapopen"])
},
watch: {
mapopen() {
setTimeout(() => {
map.updateSize();
}, 1000);
// this.InitMap();
}
},
created() {
this.$api.task.getSubTask("").then(res => {
this.subtaskList = res;
});
},
mounted() {
setTimeout(() => {
this.getDevList();
}, 1000);
container = document.getElementById("popup");
videocontainer = document.getElementById("videopopup");
taskInfocontaniner = document.getElementById("taskinfopopup");
content = document.getElementById("t-popup-content");
voideocontent = document.getElementById("video-popup-content");
closer = document.getElementById("popup-closer");
taskcloser = document.getElementById("task-popup-closer");
}
};
</script>
<style lang="stylus" scoped>
.maps{
background:url("./map.png");
width 100%
}
.ol-control button{
display:none!important;
background:red!important
}
.canvasDiv{
height :30px;
width :30px;
background :red;
border-radius :30px;
color: #ffffff;
font-size :12px;
text-align :center;
line-height :30px;
z-index :10;
opacity :0.5;
}
.ol-popup {
display: none;
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
width: 20vw;
height 25vh;
}
.img-popup {
height auto
}
.video-popup{
padding-bottom 75px
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "✖";
}
.pop-img-box {
float: left;
height: 100px;
width :120px;
img {
height: 100%;
width: 100%;
}
}
.info-popup {
width 150px;
text-align center
height 30px;
line-height 30px;
border-radius 5px
padding 0 10px;
color #fff;
background #333;
ovflow hidden
}
.info-popup:after {
disply block
content ""
position absolute
bottom -15px
left 75px
border: 6px solid transparent;
border-top-color: #333 ;
}
.pop-info{
float: left;
padding-left: 20px;
width :100px
}
.map-box {
position: relative;
background :#f8f8f8;
border-radius: 10px;
.content-info{
position :absolute;
z-index :1000;
color: red
}
}
.mapvideo{
height 100%;
width 100%;
}
.video-info {
height 100px;
}
.info-item{
margin-bottom 4px;
color #66676a
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!