Skip to content

platform / fanxing_new

Go to a project
Commit d13af288 by 潘建波
Options

提交预置位设置

1 parent 2d6459fb
Inline Side-by-side
Showing 15 changed files with 568 additions and 425 deletions
dist.zip
No preview for this file type
src/api/axios.js
...@@ -33,11 +33,15 @@ let service = axios.create({ ...@@ -33,11 +33,15 @@ let service = axios.create({
// 添加请求拦截器 // 添加请求拦截器
service.interceptors.request.use( service.interceptors.request.use(
config => { config => {
// startLoading(); // startLoading();
let atoken = localStorage.getItem("atoken"); let atoken = localStorage.getItem("atoken");
if (atoken) { if (atoken) {
// 判断是否存在token，如果存在的话，则每个http header都加上token // 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.authorization = atoken; if (config.url.indexOf("codes") > -1) {
//
} else {
config.headers.authorization = atoken;
}
} else { } else {
router.push("/login"); router.push("/login");
// endLoading(); // endLoading();
......
src/api/baseUrl.js
...@@ -3,14 +3,14 @@ import axios from "axios"; ...@@ -3,14 +3,14 @@ import axios from "axios";
console.log(process.env.NODE_ENV); console.log(process.env.NODE_ENV);
switch (process.env.NODE_ENV) { switch (process.env.NODE_ENV) {
case "development": case "development":
baseUrl = "/api"; // 测试环境url baseUrl = "http://192.168.9.133:20080"; // 测试环境url
// baseUrl = "http://192.168.9.61:8086"; // baseUrl = "http://192.168.9.61:8086";
break; break;
case "pre": case "pre":
baseUrl = "https://pre-server.feleti.cn"; // 预上线环境url baseUrl = "https://pre-server.feleti.cn"; // 预上线环境url
break; break;
case "production": case "production":
baseUrl = "http://vion-panda.51vip.biz:52510"; // 生产环境url baseUrl = "http://192.168.9.133:20080"; // 生产环境url
break; break;
} }
......
src/assets/css/public.css
...@@ -242,4 +242,28 @@ body{ ...@@ -242,4 +242,28 @@ body{
} }
.el-menu-item.is-active .submenuicon{ .el-menu-item.is-active .submenuicon{
background:rgba(0,105,255,1)!important; background:rgba(0,105,255,1)!important;
}
.el-input-group__append{
background:rgba(0,105,255,1)!important;
color: #ffffff;
}
.search-vchan .el-input-group {
box-shadow:-1.2px 2px 1px 0px rgba(78, 8, 8, 0.1);
}
.card-hover:hover {
webkit-transform: translateY(-4px) scale(1);
-moz-transform: translateY(-4px) scale(1.01);
-ms-transform: translateY(-4px) scale(1.01);
-o-transform: translateY(-4px) scale(1.01);
transform: translateY(-4px) scale(1.01);
-webkit-box-shadow: 0 14px 24px rgba(62,57,107,.1);
box-shadow: 0 14px 24px rgba(62,57,107,.1);
}
.card-hover {
-webkit-transition: all .25s ease;
-o-transition: all .25s ease;
-moz-transition: all .25s ease;
transition: all .25s ease;
} }
\ No newline at end of file \ No newline at end of file
src/views/behaviorShow/devInfo.vue
...@@ -17,15 +17,15 @@ ...@@ -17,15 +17,15 @@
<div class="item-box"> <div class="item-box">
<div class="icon el-icon-bell"></div> <div class="icon el-icon-bell"></div>
<div class="item-info-box"> <div class="item-info-box">
<div>运行异常资源</div> <div>运行异常</div>
<div><span>6</span>个</div> <div><span>6</span> 个</div>
</div> </div>
</div> </div>
<div class="item-box"> <div class="item-box">
<div class="icon el-icon-s-order"></div> <div class="icon el-icon-s-order"></div>
<div class="item-info-box"> <div class="item-info-box">
<div>信息存储量</div> <div>信息存储量</div>
<div> <span>1.2</span> T</div> <div><span>1.2</span> T</div>
</div> </div>
</div> </div>
</div> </div>
......
src/views/sceneManage/setting/areaconfig/trafficback.vue
...@@ -341,83 +341,87 @@ export default { ...@@ -341,83 +341,87 @@ export default {
typeFlag: 1, //选择属性弹窗状态 typeFlag: 1, //选择属性弹窗状态
lineNum: 1, //车道线/车道序号 lineNum: 1, //车道线/车道序号
curLayerstate: false, //行人检测区域属性设置 curLayerstate: false, //行人检测区域属性设置
testLayerstate:false,//测试检测区域属性设置 testLayerstate: false, //测试检测区域属性设置
polygon_id: "", //行人检测区域id polygon_id: "", //行人检测区域id
polygon_name: "", //行人检测区域name polygon_name: "", //行人检测区域name
markLineType: "0", markLineType: "0",
lanuse:'0',//车道属性类型 lanuse: "0", //车道属性类型
guidingtype:'',//车道导向类型 guidingtype: "", //车道导向类型
markLineDirect: "", markLineDirect: "",
childUrl: "", //红绿灯区域截图 childUrl: "", //红绿灯区域截图
scale: {}, //红绿灯区域截图放大倍数 scale: {}, //红绿灯区域截图放大倍数
lightInfo: { lightInfo: {
type: "1", type: "1",
distribute: "1", distribute: "1",
shap: "1", shap: "1",
delay:3 delay: 3
}, },
roiBody: {}, roiBody: {},
XMLStr: "", XMLStr: "",
eventData:[] eventData: []
}; };
}, },
props: ["bgUrl"], props: ["bgUrl"],
components: { components: {
LightCanvas LightCanvas
}, },
methods: { methods: {
stageInit: function(params) { stageInit: function(params) {
console.log("init1"); console.log("init1");
this.drawState = -1; this.drawState = -1;
this.stage = new Kinetic.Stage({ this.stage = new Kinetic.Stage({
container: "traficCanvas", //<div>的id container: "traficCanvas", //<div>的id
width: 800, //创建的舞台宽度 width: 800, //创建的舞台宽度
height: 500 //创建的舞台高度 height: 500 //创建的舞台高度
}); });
this.shadowLayer = new Kinetic.Layer({ this.shadowLayer = new Kinetic.Layer({
id: "shadowLayer" id: "shadowLayer"
}); });
this.testLayer = new Kinetic.Layer({ this.testLayer = new Kinetic.Layer({
id: "testLayer", id: "testLayer",
name: "layer" name: "layer"
}); });
this.lineLayer = new Kinetic.Layer({ this.lineLayer = new Kinetic.Layer({
id: "lineLayer", id: "lineLayer",
name: "layer" name: "layer"
}); });
this.roadLayer = new Kinetic.Layer({ this.roadLayer = new Kinetic.Layer({
id: "roadLayer", id: "roadLayer",
name: "layer" name: "layer"
}); });
this.lightLayer = new Kinetic.Layer({ this.lightLayer = new Kinetic.Layer({
id: "lightLayer", id: "lightLayer",
name: "layer" name: "layer"
}); });
this.subtendLayer = new Kinetic.Layer({ this.subtendLayer = new Kinetic.Layer({
id: "subtendLayer", id: "subtendLayer",
name: "layer" name: "layer"
}); });
this.noStopLayer = new Kinetic.Layer({ this.noStopLayer = new Kinetic.Layer({
id: "noStopLayer", id: "noStopLayer",
name: "layer" name: "layer"
}); });
this.bicyLayer = new Kinetic.Layer({ //行人检测区域 this.bicyLayer = new Kinetic.Layer({
id: "bicyLayer", //行人检测区域
name: "layer" id: "bicyLayer",
}); name: "layer"
this.densityLayer = new Kinetic.Layer({//密度 });
id:'densityLayer', this.densityLayer = new Kinetic.Layer({
name:"layer" //密度
}); id: "densityLayer",
this.foreignLayer = new Kinetic.Layer({//异物 name: "layer"
id:'foreignLayer', });
name:"layer" this.foreignLayer = new Kinetic.Layer({
}); //异物
this.testRegionLayer = new Kinetic.Layer({//测试检测区域 id: "foreignLayer",
id:'testRegionLayer', name: "layer"
name:"layer" });
}); this.testRegionLayer = new Kinetic.Layer({
//测试检测区域
id: "testRegionLayer",
name: "layer"
});
let shadow = new Kinetic.Rect({ let shadow = new Kinetic.Rect({
x: 0, //矩形左上角x坐标 x: 0, //矩形左上角x坐标
y: 0, //矩形左上角y坐标 y: 0, //矩形左上角y坐标
...@@ -455,7 +459,7 @@ export default { ...@@ -455,7 +459,7 @@ export default {
this.stage.add(this.noStopLayer); this.stage.add(this.noStopLayer);
this.stage.add(this.densityLayer); this.stage.add(this.densityLayer);
this.stage.add(this.foreignLayer); this.stage.add(this.foreignLayer);
this.stage.add(this.testRegionLayer) this.stage.add(this.testRegionLayer);
this.layers = [ this.layers = [
this.testLayer, this.testLayer,
this.lineLayer, this.lineLayer,
...@@ -600,15 +604,15 @@ export default { ...@@ -600,15 +604,15 @@ export default {
let arrs = this.roadLayer.get(".arr"); let arrs = this.roadLayer.get(".arr");
let arr = arrs[arrs.length - 1]; let arr = arrs[arrs.length - 1];
line.index = ele.lane_no; line.index = ele.lane_no;
let lane_guid_type = 0; let lane_guid_type = 0;
let lane_use = 0; let lane_use = 0;
if(obj.lanes.lane_count == 1){ if (obj.lanes.lane_count == 1) {
lane_guid_type = obj.lanes.lane.lane_guiding_type lane_guid_type = obj.lanes.lane.lane_guiding_type;
lane_use = obj.lanes.lane.lane_use_type lane_use = obj.lanes.lane.lane_use_type;
} else { } else {
lane_guid_type = obj.lanes.lane[index].lane_guiding_type; lane_guid_type = obj.lanes.lane[index].lane_guiding_type;
lane_use = obj.lanes.lane[index].lane_use_type lane_use = obj.lanes.lane[index].lane_use_type;
} }
this.roads[parseInt(ele.lane_seq - 1)] = { this.roads[parseInt(ele.lane_seq - 1)] = {
type: ele.lane_type, type: ele.lane_type,
index: ele.lane_no, index: ele.lane_no,
...@@ -648,7 +652,8 @@ export default { ...@@ -648,7 +652,8 @@ export default {
(rect.light_type = ele.light_type), (rect.light_type = ele.light_type),
(rect.light_distribute = ele.light_distribute), (rect.light_distribute = ele.light_distribute),
(rect.light_shape = ele.light_shape), (rect.light_shape = ele.light_shape),
(rect.light_delay = ele.light_yellow_delay||ele.light_yellow_interval), (rect.light_delay =
ele.light_yellow_delay || ele.light_yellow_interval),
(rect.light_regions = { (rect.light_regions = {
light_region_count: 1, light_region_count: 1,
light_region: linghtRoi light_region: linghtRoi
...@@ -746,28 +751,28 @@ export default { ...@@ -746,28 +751,28 @@ export default {
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
//测试检测区域 //测试检测区域
try { try {
let testarr = obj.test_result_region.polygon; let testarr = obj.test_result_region.polygon;
if (!testarr.length) { if (!testarr.length) {
testarr = [testarr]; testarr = [testarr];
}
testarr.forEach(ele => {
let points = ele.point;
let bicRect = [];
for (let i = 0; i < points.length; i++) {
const point = points[i];
bicRect.push(point.x * 800);
bicRect.push(point.y * 500);
}
let rect = this.drawRect("morePoints", bicRect, this.color[9]);
rect.polygon_name = ele.polygon_name;
rect.polygon_id = ele.polygon_id;
this.testRegionLayer.add(rect);
});
} catch (error) {
console.log(error);
} }
testarr.forEach(ele => {
let points = ele.point;
let bicRect = [];
for (let i = 0; i < points.length; i++) {
const point = points[i];
bicRect.push(point.x * 800);
bicRect.push(point.y * 500);
}
let rect = this.drawRect("morePoints", bicRect, this.color[9]);
rect.polygon_name = ele.polygon_name;
rect.polygon_id = ele.polygon_id;
this.testRegionLayer.add(rect);
});
} catch (error) {
console.log(error);
}
this.selectedShape = null; this.selectedShape = null;
this.drawRoad(); this.drawRoad();
...@@ -964,14 +969,14 @@ export default { ...@@ -964,14 +969,14 @@ export default {
this.startChangeShape(pos, layer, this.color[this.drawState]); this.startChangeShape(pos, layer, this.color[this.drawState]);
} }
break; break;
case 9: case 9:
if (this.needRect) { if (this.needRect) {
this.endChangeShape(evt); this.endChangeShape(evt);
} else { } else {
this.needRect = true; this.needRect = true;
this.startChangeShape(pos, layer, this.color[this.drawState]); this.startChangeShape(pos, layer, this.color[this.drawState]);
} }
break; break;
default: default:
break; break;
} }
...@@ -987,7 +992,7 @@ export default { ...@@ -987,7 +992,7 @@ export default {
this.markLineType = this.roads[shape.roadIndex].type; this.markLineType = this.roads[shape.roadIndex].type;
this.markLineDirect = this.roads[shape.roadIndex].direct; this.markLineDirect = this.roads[shape.roadIndex].direct;
this.guidingtype = this.roads[shape.roadIndex].lane_guiding_type; this.guidingtype = this.roads[shape.roadIndex].lane_guiding_type;
this.lanuse = this.roads[shape.roadIndex].lane_use_type || '0'; this.lanuse = this.roads[shape.roadIndex].lane_use_type || "0";
shape.setFill("rgba(" + this.color[1] + ",0.3)"); shape.setFill("rgba(" + this.color[1] + ",0.3)");
let gLine = this.greenLines[shape.roadIndex]; let gLine = this.greenLines[shape.roadIndex];
if (gLine.getParent().attrs.name == "arr") { if (gLine.getParent().attrs.name == "arr") {
...@@ -1031,7 +1036,7 @@ export default { ...@@ -1031,7 +1036,7 @@ export default {
type: shape.light_type, type: shape.light_type,
shap: shape.light_shape, shap: shape.light_shape,
distribute: shape.light_distribute, distribute: shape.light_distribute,
delay:shape.light_delay delay: shape.light_delay
}; };
} else if ( } else if (
this.drawState == 6 || this.drawState == 6 ||
...@@ -1062,7 +1067,7 @@ export default { ...@@ -1062,7 +1067,7 @@ export default {
) { ) {
this.blueLines.splice(this.lineNum - 1, 0, this.selectedShape); this.blueLines.splice(this.lineNum - 1, 0, this.selectedShape);
this.lineNum++; this.lineNum++;
this.roadFlag = false; this.roadFlag = false;
} }
this.selectedShape.line_type = this.markLineType; this.selectedShape.line_type = this.markLineType;
} else if (this.drawState == 2) { } else if (this.drawState == 2) {
...@@ -1106,7 +1111,7 @@ export default { ...@@ -1106,7 +1111,7 @@ export default {
this.selectedShape.light_type = this.lightInfo.type; this.selectedShape.light_type = this.lightInfo.type;
this.selectedShape.light_shape = this.lightInfo.shap; this.selectedShape.light_shape = this.lightInfo.shap;
this.selectedShape.light_distribute = this.lightInfo.distribute; this.selectedShape.light_distribute = this.lightInfo.distribute;
this.selectedShape.light_delay = this.lightInfo.delay; this.selectedShape.light_delay = this.lightInfo.delay;
} }
this.selectedShape = null; this.selectedShape = null;
...@@ -1114,23 +1119,23 @@ export default { ...@@ -1114,23 +1119,23 @@ export default {
this.lightInfo = { this.lightInfo = {
type: "1", type: "1",
distribute: "1", distribute: "1",
shap: "1", shap: "1",
delay:3 delay: 3
}; };
this.layers[this.drawState].draw(); this.layers[this.drawState].draw();
}, },
//开始绘制图形（第一次点击） //开始绘制图形（第一次点击）
startChangeShape: function(pos, layer, col) { startChangeShape: function(pos, layer, col) {
let ary = layer.get(".circle"); let ary = layer.get(".circle");
if ( if (
this.drawState == 0 || this.drawState == 0 ||
this.drawState == 3 || this.drawState == 3 ||
this.drawState == 4 || this.drawState == 4 ||
this.drawState == 5 || this.drawState == 5 ||
this.drawState == 6 || this.drawState == 6 ||
this.drawState == 7 || this.drawState == 7 ||
this.drawState == 8 || this.drawState == 8 ||
this.drawState == 9 this.drawState == 9
) { ) {
let rect = this.drawRect(pos, pos, col); let rect = this.drawRect(pos, pos, col);
rect.moveToBottom(); rect.moveToBottom();
...@@ -1246,14 +1251,12 @@ export default { ...@@ -1246,14 +1251,12 @@ export default {
}, 0); }, 0);
layer.draw(); layer.draw();
} }
if (this.drawState == 6 || if (this.drawState == 6 || this.drawState == 7 || this.drawState == 8) {
this.drawState == 7 || this.curLayerstate = true;
this.drawState == 8) { }
this.curLayerstate = true; if (this.drawState == 9) {
} this.testLayerstate = true;
if(this.drawState == 9){ }
this.testLayerstate = true;
}
}, },
lineChange: function name() { lineChange: function name() {
let color = "blue"; let color = "blue";
...@@ -1304,7 +1307,7 @@ export default { ...@@ -1304,7 +1307,7 @@ export default {
layer.draw(); layer.draw();
} }
}, },
//行人检测信息/异物检测信息/测试检测区域 //行人检测信息/异物检测信息/测试检测区域
bicyEnter() { bicyEnter() {
let curLayers = this.layers[this.drawState].get(".rect"); let curLayers = this.layers[this.drawState].get(".rect");
let curlay = curLayers[curLayers.length - 1]; let curlay = curLayers[curLayers.length - 1];
...@@ -1312,11 +1315,10 @@ export default { ...@@ -1312,11 +1315,10 @@ export default {
curlay.polygon_name = this.polygon_name; curlay.polygon_name = this.polygon_name;
this.curLayerstate = false; this.curLayerstate = false;
//测试区域弹窗 //测试区域弹窗
this.testLayerstate = false; this.testLayerstate = false;
//清空输入框 //清空输入框
this.polygon_id = ""; this.polygon_id = "";
this.polygon_name = ""; this.polygon_name = "";
}, },
curlayCancel() { curlayCancel() {
let curLayers = this.layers[this.drawState].get(".rect"); let curLayers = this.layers[this.drawState].get(".rect");
...@@ -1563,7 +1565,7 @@ export default { ...@@ -1563,7 +1565,7 @@ export default {
(rect.light_type = this.lightInfo.type), (rect.light_type = this.lightInfo.type),
(rect.light_distribute = this.lightInfo.distribute), (rect.light_distribute = this.lightInfo.distribute),
(rect.light_shape = this.lightInfo.shap), (rect.light_shape = this.lightInfo.shap),
(rect.light_delay = this.lightInfo.delay), (rect.light_delay = this.lightInfo.delay),
(rect.light_regions = { (rect.light_regions = {
light_region_count: 1, light_region_count: 1,
light_region: linghtRoi light_region: linghtRoi
...@@ -1575,7 +1577,7 @@ export default { ...@@ -1575,7 +1577,7 @@ export default {
type: "1", type: "1",
distribute: "1", distribute: "1",
shap: "1", shap: "1",
delay:3 delay: 3
}; };
this.selectedShape = null; this.selectedShape = null;
}, },
...@@ -1652,91 +1654,92 @@ export default { ...@@ -1652,91 +1654,92 @@ export default {
} }
this.roadLayer.draw(); this.roadLayer.draw();
try { try {
// console.log('蓝色车道线') // console.log('蓝色车道线')
// console.log(this.blueLines) // console.log(this.blueLines)
this.blueLines.forEach((ele, index) => { this.blueLines.forEach((ele, index) => {
if(ele.attrs.points[1] - ele.attrs.points[3] > 0) { if (ele.attrs.points[1] - ele.attrs.points[3] > 0) {
var copypoint = Array.from(ele.attrs.points); var copypoint = Array.from(ele.attrs.points);
ele.attrs.points[0] = copypoint[2] ele.attrs.points[0] = copypoint[2];
ele.attrs.points[1] = copypoint[3] ele.attrs.points[1] = copypoint[3];
ele.attrs.points[2] = copypoint[0] ele.attrs.points[2] = copypoint[0];
ele.attrs.points[3] = copypoint[1] ele.attrs.points[3] = copypoint[1];
// console.log('*******蓝色车道线*******') // console.log('*******蓝色车道线*******')
// console.log(ele) // console.log(ele)
}
})
//车道线根据坐标排序
function sortBlueLine(arr){
var len = arr.length;
for (var i = 0; i < len; i++) {
for (var j = 0; j < len - 1 - i; j++) {
if (arr[j].attrs.points[0] > arr[j+1].attrs.points[0]) { //相邻元素两两对比
var temp = arr[j+1]; //元素交换
arr[j+1] = arr[j];
arr[j] = temp;
}
}
}
return arr;
} }
console.log('排序后的蓝色车道线') });
console.log(sortBlueLine(this.blueLines)) //车道线根据坐标排序
this.blueLines.forEach((ele, index) => { function sortBlueLine(arr) {
let points =this.sortLinePoints(ele.attrs.points); var len = arr.length;
if (index > 0) { for (var i = 0; i < len; i++) {
//绘制车道 for (var j = 0; j < len - 1 - i; j++) {
let lastPoints = this.sortLinePoints(this.blueLines[index - 1].attrs.points); if (arr[j].attrs.points[0] > arr[j + 1].attrs.points[0]) {
let num1 = //相邻元素两两对比
Math.pow(points[0] - lastPoints[0], 2) + var temp = arr[j + 1]; //元素交换
Math.pow(points[1] - lastPoints[1], 2) + arr[j + 1] = arr[j];
Math.pow(points[2] - lastPoints[2], 2) + arr[j] = temp;
Math.pow(points[3] - lastPoints[3], 2);
let num2 =
Math.pow(points[0] - lastPoints[2], 2) +
Math.pow(points[1] - lastPoints[3], 2) +
Math.pow(points[2] - lastPoints[0], 2) +
Math.pow(points[3] - lastPoints[1], 2);
let mPoints;
if (num1 < num2) {
mPoints = points.concat([
lastPoints[2],
lastPoints[3],
lastPoints[0],
lastPoints[1]
]);
} else {
mPoints = points.concat([
lastPoints[0],
lastPoints[1],
lastPoints[2],
lastPoints[3]
]);
}
let rect = this.drawRect(
"morePoints",
mPoints,
this.color[1],
false
);
rect.roadIndex = index - 1;
this.roadLayer.add(rect);
//绘制车道中线
if (!this.roads[index - 1]) {
this.roads[index - 1] = {};
} }
let road = this.roads[index - 1]; }
let cPoints = [ }
(mPoints[0] + mPoints[6]) / 2, return arr;
(mPoints[1] + mPoints[7]) / 2, }
(mPoints[2] + mPoints[4]) / 2, console.log("排序后的蓝色车道线");
(mPoints[3] + mPoints[5]) / 2, console.log(sortBlueLine(this.blueLines));
this.blueLines.forEach((ele, index) => {
]; let points = this.sortLinePoints(ele.attrs.points);
road.cPoints = cPoints; if (index > 0) {
let cLine = this.drawLine("morePoints", cPoints, this.color[2]); //绘制车道
this.greenLines[index - 1] = cLine; let lastPoints = this.sortLinePoints(
this.blueLines[index - 1].attrs.points
);
let num1 =
Math.pow(points[0] - lastPoints[0], 2) +
Math.pow(points[1] - lastPoints[1], 2) +
Math.pow(points[2] - lastPoints[2], 2) +
Math.pow(points[3] - lastPoints[3], 2);
let num2 =
Math.pow(points[0] - lastPoints[2], 2) +
Math.pow(points[1] - lastPoints[3], 2) +
Math.pow(points[2] - lastPoints[0], 2) +
Math.pow(points[3] - lastPoints[1], 2);
let mPoints;
if (num1 < num2) {
mPoints = points.concat([
lastPoints[2],
lastPoints[3],
lastPoints[0],
lastPoints[1]
]);
} else {
mPoints = points.concat([
lastPoints[0],
lastPoints[1],
lastPoints[2],
lastPoints[3]
]);
}
let rect = this.drawRect(
"morePoints",
mPoints,
this.color[1],
false
);
rect.roadIndex = index - 1;
this.roadLayer.add(rect);
//绘制车道中线
if (!this.roads[index - 1]) {
this.roads[index - 1] = {};
}
let road = this.roads[index - 1];
let cPoints = [
(mPoints[0] + mPoints[6]) / 2,
(mPoints[1] + mPoints[7]) / 2,
(mPoints[2] + mPoints[4]) / 2,
(mPoints[3] + mPoints[5]) / 2
];
road.cPoints = cPoints;
let cLine = this.drawLine("morePoints", cPoints, this.color[2]);
this.greenLines[index - 1] = cLine;
if (road.direct == undefined) { if (road.direct == undefined) {
this.roadLayer.add(cLine); this.roadLayer.add(cLine);
...@@ -2000,10 +2003,10 @@ export default { ...@@ -2000,10 +2003,10 @@ export default {
linetype = 10; linetype = 10;
break; break;
case "4": case "4":
linetype = ""; linetype = 13;
break; break;
case "5": case "5":
linetype = ""; linetype = 14;
break; break;
default: default:
break; break;
...@@ -2044,13 +2047,7 @@ export default { ...@@ -2044,13 +2047,7 @@ export default {
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
console.log("#######################");
console.log(lanaAry);
console.log("#######################");
this.roiBody.lanes = {
lane_count: lanaAry.length ? lanaAry.length : 0,
lane: lanaAry ? lanaAry : []
}
//对向车道 //对向车道
try { try {
this.subtendLayer.get(".rect").forEach((el, index) => { this.subtendLayer.get(".rect").forEach((el, index) => {
...@@ -2084,26 +2081,33 @@ export default { ...@@ -2084,26 +2081,33 @@ export default {
} }
}); });
}); });
} catch (error) {} } catch (error) {
console.log(error);
}
console.log("lanaAry", lanaAry);
this.roiBody.lanes = {
lane_count: lanaAry.length ? lanaAry.length : 0,
lane: lanaAry ? lanaAry : []
};
// 红绿灯区域 // 红绿灯区域
let lightAry = []; let lightAry = [];
try { try {
this.lightLayer.get(".rect").forEach((ele, index) => { this.lightLayer.get(".rect").forEach((ele, index) => {
lightAry.push({ lightAry.push({
light_seq: index + 1, light_seq: index + 1,
light_type: ele.light_type, light_type: ele.light_type,
light_id:ele.light_type, light_id: ele.light_type,
light_distribute: ele.light_distribute, light_distribute: ele.light_distribute,
light_number_type:ele.light_distribute, light_number_type: ele.light_distribute,
light_yellow_delay: Number(ele.light_delay), light_yellow_delay: Number(ele.light_delay),
light_yellow_interval:Number(ele.light_delay), light_yellow_interval: Number(ele.light_delay),
light_shape:ele.light_shape, light_shape: ele.light_shape,
light_shape_type:ele.light_shape, light_shape_type: ele.light_shape,
light_regions: ele.light_regions, light_regions: ele.light_regions
}); });
}); });
} catch (error) {} } catch (error) {}
this.roiBody.lights = { this.roiBody.lights = {
light_count: lightAry.length, light_count: lightAry.length,
light: lightAry light: lightAry
...@@ -2174,7 +2178,7 @@ export default { ...@@ -2174,7 +2178,7 @@ export default {
this.roiBody.median_lines = { this.roiBody.median_lines = {
lane_count: roadAry.length ? roadAry.length : 0, lane_count: roadAry.length ? roadAry.length : 0,
lane: roadAry ? roadAry : [] lane: roadAry ? roadAry : []
}; };
//行人密度检测区域 //行人密度检测区域
let densityAry = []; let densityAry = [];
...@@ -2230,86 +2234,86 @@ export default { ...@@ -2230,86 +2234,86 @@ export default {
polygon: foreignAry polygon: foreignAry
}; };
//测试检测区域 //测试检测区域
let testRegion = []; let testRegion = [];
try { try {
this.testRegionLayer.get(".rect").forEach((el, index) => { this.testRegionLayer.get(".rect").forEach((el, index) => {
let foAry = []; let foAry = [];
let points = el.attrs.points; let points = el.attrs.points;
for (let i = 0; i < points.length; i += 2) { for (let i = 0; i < points.length; i += 2) {
foAry.push({ foAry.push({
point_seq: i / 2 + 1, point_seq: i / 2 + 1,
x: (points[i] / 800).toFixed(6), x: (points[i] / 800).toFixed(6),
y: (points[i + 1] / 500).toFixed(6) y: (points[i + 1] / 500).toFixed(6)
});
}
testRegion.push({
polygon_id:el.polygon_id,
polygon_name:el.polygon_name,
polygon_point_count: foAry.length,
point: foAry
}); });
}
testRegion.push({
polygon_id: el.polygon_id,
polygon_name: el.polygon_name,
polygon_point_count: foAry.length,
point: foAry
}); });
} catch (error) {} });
} catch (error) {}
this.roiBody.test_result_region = { this.roiBody.test_result_region = {
region_count: foreignAry.length, region_count: foreignAry.length,
polygon: testRegion polygon: testRegion
}; };
console.log(this.roiBody); console.log(this.roiBody);
return this.oParse.writeXML({ roi: this.roiBody }); return this.oParse.writeXML({ roi: this.roiBody });
}, },
clear: function() { clear: function() {
(this.blueLines = []), (this.blueLines = []),
(this.roads = []), (this.roads = []),
(this.drawState = -1), (this.drawState = -1),
(this.smallWindow = false), (this.smallWindow = false),
(this.roadFlag = ""), (this.roadFlag = ""),
(this.needRect = false), (this.needRect = false),
(this.needLine = false), (this.needLine = false),
(this.canvasState = 0), (this.canvasState = 0),
(this.polygon_name = ''), (this.polygon_name = ""),
(this.polygon_id = ''), (this.polygon_id = ""),
(this.polyline = 0); (this.polyline = 0);
$(".modal-lt button").removeClass("active"); $(".modal-lt button").removeClass("active");
}, },
sortLinePoints(pointarr){ sortLinePoints(pointarr) {
try{ try {
let newpoint = []; let newpoint = [];
if((pointarr[1] - pointarr[3]) > 0){ if (pointarr[1] - pointarr[3] > 0) {
newpoint[0] = pointarr[2] newpoint[0] = pointarr[2];
newpoint[1] = pointarr[3] newpoint[1] = pointarr[3];
newpoint[2] = pointarr[0] newpoint[2] = pointarr[0];
newpoint[3] = pointarr[1] newpoint[3] = pointarr[1];
} else { } else {
newpoint = pointarr newpoint = pointarr;
}
return newpoint
}catch(err){
console.log(err)
} }
}, return newpoint;
changetestid(){ } catch (err) {
this.eventData.forEach(ele => { console.log(err);
if(ele.value == this.polygon_id){
this.polygon_name = ele.name
}
})
} }
}, },
mounted() { changetestid() {
this.eventData = eventJson this.eventData.forEach(ele => {
// this.stageInit() if (ele.value == this.polygon_id) {
key('alt+1',()=>{ this.polygon_name = ele.name;
if(this.istest) { }
this.istest = false });
} else {
this.istest = true
}
})
} }
}; },
mounted() {
this.eventData = eventJson;
// this.stageInit()
key("alt+1", () => {
if (this.istest) {
this.istest = false;
} else {
this.istest = true;
}
});
}
};
</script> </script>
<style scoped> <style scoped>
......
src/views/sceneManage/setting/index.vue
...@@ -5,13 +5,15 @@ ...@@ -5,13 +5,15 @@
:data="taskInfo.mtasks[0].scenes" :data="taskInfo.mtasks[0].scenes"
border border
stripe stripe
highlight-current-row
style="width: 80%;float:left" style="width: 80%;float:left"
height="25vh" height="25vh"
@current-change="handleCurrentChange"
> >
<el-table-column label="序号" type="index" width="50" align="center"> <el-table-column label="序号" type="index" width="50" align="center">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="name" prop="position_num"
align="center" align="center"
label="预置位编号" label="预置位编号"
width="180" width="180"
...@@ -60,7 +62,7 @@ ...@@ -60,7 +62,7 @@
<handleparam ref="handleparam"></handleparam> <handleparam ref="handleparam"></handleparam>
</div> </div>
<div class="yt-box"> <div class="yt-box">
<ytconfig ref="yt"></ytconfig> <ytconfig ref="yt" @subpostion="submitPosion"></ytconfig>
</div> </div>
<div> <div>
<parameter ref="parameter"></parameter> <parameter ref="parameter"></parameter>
...@@ -108,6 +110,17 @@ ...@@ -108,6 +110,17 @@
<el-input v-model="timer" style="padding-right:23px"></el-input> <el-input v-model="timer" style="padding-right:23px"></el-input>
</div> </div>
</div> </div>
<div class="sel-box">
<span class="title">开启轮休:</span>
<div class="timer-sel">
<el-switch
width="30"
v-model="polling_state"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</div>
</div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="handleTimerClose">取 消</el-button> <el-button @click="handleTimerClose">取 消</el-button>
<el-button type="primary" @click="submitTimer">确 定</el-button> <el-button type="primary" @click="submitTimer">确 定</el-button>
...@@ -126,11 +139,13 @@ export default { ...@@ -126,11 +139,13 @@ export default {
data() { data() {
return { return {
timer: 0, timer: 0,
polling_state: false,
timersel: 0, timersel: 0,
timerDialog: false, timerDialog: false,
curindex: 0, curindex: 0,
timeroptions: [30, 40, 50, 60, 100], timeroptions: [30, 40, 50, 60, 100],
timerscenes: null, timerscenes: null,
currentRow: null,
taskInfo: { taskInfo: {
mtasks: [ mtasks: [
{ {
...@@ -166,7 +181,7 @@ export default { ...@@ -166,7 +181,7 @@ export default {
this.$refs.handleparam.show(type); this.$refs.handleparam.show(type);
}, },
setsounces() { setsounces() {
this.$refs.yt.openyt(); this.$refs.yt.openyt(this.currentRow);
}, },
getTaskParams() { getTaskParams() {
this.$api.task.getTaskParams(this.taskid, this.subtaskid).then(data => { this.$api.task.getTaskParams(this.taskid, this.subtaskid).then(data => {
...@@ -175,6 +190,7 @@ export default { ...@@ -175,6 +190,7 @@ export default {
}, },
setTimer(data) { setTimer(data) {
this.timerscenes = data; this.timerscenes = data;
this.polling_state = data.pollingState;
this.$store.commit("setocxstate", 0); this.$store.commit("setocxstate", 0);
this.timerDialog = true; this.timerDialog = true;
}, },
...@@ -182,11 +198,30 @@ export default { ...@@ -182,11 +198,30 @@ export default {
this.timerDialog = false; this.timerDialog = false;
this.$store.commit("setocxstate", 1); this.$store.commit("setocxstate", 1);
}, },
handleCurrentChange(val) {
this.currentRow = val;
},
submitPosion(positionnum) {
this.taskInfo.mtasks[0].scenes.map(ele => {
if (ele.scene_unid == this.currentRow.scene_unid) {
ele.position_num = positionnum;
}
});
this.subRoi(this.taskInfo.mtasks);
},
submitTimer(item) { submitTimer(item) {
this.taskInfo.mtasks[0].time_interval = this.timer; this.taskInfo.mtasks[0].scenes.map(ele => {
if (ele.scene_unid == this.currentRow.scene_unid) {
ele.runtime = this.timer;
ele.pollingState = this.polling_state;
}
});
this.subRoi(this.taskInfo.mtasks);
},
subRoi(mdata) {
let data = { let data = {
subtask_id: this.subtaskid, subtask_id: this.subtaskid,
mtasks: this.taskInfo.mtasks mtasks: mdata
}; };
this.$api.task.editRoi(this.taskid, this.subtaskid, data).then(res => { this.$api.task.editRoi(this.taskid, this.subtaskid, data).then(res => {
if (res.ecode == 200) { if (res.ecode == 200) {
...@@ -201,14 +236,14 @@ export default { ...@@ -201,14 +236,14 @@ export default {
}, },
showview() { showview() {
let routeData = this.$router.resolve({ let routeData = this.$router.resolve({
name: "show", name: "show",
query: { query: {
taskid: this.taskid, taskid: this.taskid,
subtaskid: this.subtaskid, subtaskid: this.subtaskid,
playurl: this.playurl playurl: this.playurl
} }
}); });
window.open(routeData.href, '_blank'); window.open(routeData.href, "_blank");
}, },
submit: function(xml, type) { submit: function(xml, type) {
let postObj = { let postObj = {
......
src/views/sceneManage/setting/ytconfig.vue
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
</div> </div>
<div class="right-bottom-box"> <div class="right-bottom-box">
<div class="setyzw item-box"> <div class="setyzw item-box">
<el-input placeholder="预置位编号"></el-input> <el-input placeholder="预置位编号" v-model="presetindex"></el-input>
</div> </div>
<div class="subbtn item-box"> <div class="subbtn item-box">
<el-button @click="subset">确定</el-button> <el-button @click="subset">确定</el-button>
...@@ -104,11 +104,22 @@ export default { ...@@ -104,11 +104,22 @@ export default {
value2: 0, value2: 0,
value3: 0, value3: 0,
value4: 0, value4: 0,
presetindex: "",
curtask:{},
}; };
}, },
methods: { methods: {
openyt() { openyt(curtask) {
this.showyt = true; if (curtask) {
this.curtask = curtask;
this.showyt = true;
this.presetindex = curtask.position_num;
} else {
this.$message({
message: "请选择要操作的预置位",
type: "warning"
});
}
}, },
closeyt() { closeyt() {
this.showyt = false; this.showyt = false;
...@@ -121,23 +132,7 @@ export default { ...@@ -121,23 +132,7 @@ export default {
VionVideo.VionPTZonrol(null, nType, nParam); VionVideo.VionPTZonrol(null, nType, nParam);
}, },
subset() { subset() {
let mtasks = this.allMask.mtasks; this.$emit("subpostion", this.presetindex);
this.allMask.mtasks.forEach(ele => {
ele.scenes[this.curindex].algo_type = this.algo_type;
ele.scenes[this.curindex].position_name = this.position_name;
ele.scenes[this.curindex].position_num = this.position_num;
});
let reqObj = {
subtask_id: this.curentSubTaskId,
mtasks: this.allMask.mtasks
};
this.$api.task
.editRoi(this.curentTaskId, this.curentSubTaskId, reqObj)
.then(res => {
if (data.ecode == "200") {
this.closeyt();
}
});
} }
} }
}; };
......
src/views/search/event.vue
...@@ -110,7 +110,7 @@ ...@@ -110,7 +110,7 @@
label="操作"> label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tooltip content="播放" placement="bottom" effect="light" :visible-arrow=false> <el-tooltip content="播放" placement="bottom" effect="light" :visible-arrow=false>
<span :class="{'iconfont icon-bofang playIcon':true,'no-btn':scope.row.video&&scope.row.video[0].src_url!=''?false:true}" @click="playFun(scope.$index, scope.row)"></span> <span :class="{'iconfont icon-fanxing-qidong playIcon':true,'no-btn':scope.row.video&&scope.row.video[0].src_url!=''?false:true}" @click="playFun(scope.$index, scope.row)"></span>
</el-tooltip> </el-tooltip>
<span class="tableSpanBorder"></span> <span class="tableSpanBorder"></span>
<el-tooltip content="详情" placement="bottom" effect="light" :visible-arrow=false> <el-tooltip content="详情" placement="bottom" effect="light" :visible-arrow=false>
......
src/views/search/illegal.vue
...@@ -145,7 +145,7 @@ ...@@ -145,7 +145,7 @@
label="操作"> label="操作">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tooltip content="播放" placement="bottom" effect="light" :visible-arrow=false> <el-tooltip content="播放" placement="bottom" effect="light" :visible-arrow=false>
<span :class="{'iconfont icon-bofang playIcon':true,'no-btn':scope.row.video&&scope.row.video[0].src_url!=''?false:true}" @click="playFun(scope.$index, scope.row)"></span> <span :class="{'iconfont icon-fanxing-qidong playIcon':true,'no-btn':scope.row.video&&scope.row.video[0].src_url!=''?false:true}" @click="playFun(scope.$index, scope.row)"></span>
</el-tooltip> </el-tooltip>
<span class="tableSpanBorder"></span> <span class="tableSpanBorder"></span>
<el-tooltip content="详情" placement="bottom" effect="light" :visible-arrow=false> <el-tooltip content="详情" placement="bottom" effect="light" :visible-arrow=false>
......
src/views/taskManage/editSet.vue
...@@ -37,8 +37,8 @@ ...@@ -37,8 +37,8 @@
</el-form-item> </el-form-item>
<el-form-item label="时间计划"> <el-form-item label="时间计划">
<el-select v-model="formData.period"> <el-select v-model="formData.period">
<el-option value="true" label="全天"></el-option> <el-option :value="1" label="全天"></el-option>
<el-option value="false" label="时间"></el-option> <el-option :value="0" label="时间"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="时间" v-show="formData.plate_time != 'day'"> <el-form-item label="时间" v-show="formData.plate_time != 'day'">
......
src/views/taskManage/index.vue
<template> <template>
<div class="contentBox"> <div class="contentBox">
<div class="topCon"> <div class="topCon">
<div class="left"> <!-- <div class="left">
<img src="../../assets/img/taskmanage/weather.png" alt="" /> <img src="../../assets/img/taskmanage/weather.png" alt="" />
<span class="textCon"> <span class="textCon">
<div class="topText">21°/31°</div> <div class="topText">21°/31°</div>
<div class="bottomText">西北风1级 空气优</div> <div class="bottomText">西北风1级 空气优</div>
</span> </span>
</div> </div> -->
<div class="right"> <div class="right">
<div class="rightBox"> <div class="rightBox">
<img src="../../assets/img/taskmanage/pic1.png" alt="" /> <img src="../../assets/img/taskmanage/pic1.png" alt="" />
...@@ -336,9 +336,14 @@ export default { ...@@ -336,9 +336,14 @@ export default {
// / // /
}, },
dateFormatter(row, column, cellValue, index) { dateFormatter(row, column, cellValue, index) {
let startDate = cellValue ? cellValue.split(" ")[0] : ""; if (row.period) {
let endDate = row.end_dt ? row.end_dt.split(" ")[0] : ""; return "全天"
return startDate + " ~ " + endDate; } else {
let startDate = cellValue ? cellValue.split(" ")[0] : "";
let endDate = row.end_dt ? row.end_dt.split(" ")[0] : "";
return startDate + " ~ " + endDate;
}
}, },
typeFormatter(row, column, cellValue, index) { typeFormatter(row, column, cellValue, index) {
if (cellValue == 0) { if (cellValue == 0) {
......
src/views/trafficShow/index.vue
...@@ -2,8 +2,13 @@ ...@@ -2,8 +2,13 @@
<el-row :gutter="10" style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden"> <el-row :gutter="10" style="padding: 10px 0 10px 10px;width: 100%;overflow:hidden">
<el-col :span="17"> <el-col :span="17">
<div id="map" class="maps"> <div id="map" class="maps">
<div class="search-vchan">
<el-input placeholder="请输入内容" v-model="vchanname" class="input-with-select">
<el-button slot="append" type="primary" icon="el-icon-search" @click="searchvchan"></el-button>
</el-input>
</div>
<showmap ref="map"></showmap> <showmap ref="map"></showmap>
<div class="eventlist-box"> <div class="eventlist-box card-hover">
<!-- <eventList></eventList> --> <!-- <eventList></eventList> -->
<devInfo></devInfo> <devInfo></devInfo>
</div> </div>
...@@ -20,7 +25,7 @@ ...@@ -20,7 +25,7 @@
</el-col> </el-col>
<el-col :span="7"> <el-col :span="7">
<el-row> <el-row>
<div class="collect-box"> <div class="collect-box card-hover">
<div class="header-title">今日抓拍量</div> <div class="header-title">今日抓拍量</div>
<div class="collect-content"> <div class="collect-content">
<el-col :span="6" class="content-item"> <el-col :span="6" class="content-item">
...@@ -44,11 +49,11 @@ ...@@ -44,11 +49,11 @@
</el-row> </el-row>
<el-row :gutter="12" class="event-type-box" style="margin-top:1vh"> <el-row :gutter="12" class="event-type-box" style="margin-top:1vh">
<el-col :span="16"> <el-col :span="16">
<div class="right-item-box"> <div class="right-item-box card-hover">
<eventTypedis></eventTypedis> <eventTypedis></eventTypedis>
</div> </div>
</el-col> </el-col>
<el-col :span="8" style="padding-right:0"> <el-col :span="8" style="padding-right:0" class="card-hover">
<div class="right-item-box"> <div class="right-item-box">
<div class="title">重点车辆分布</div> <div class="title">重点车辆分布</div>
<div class="car-dis-info"> <div class="car-dis-info">
...@@ -88,12 +93,12 @@ ...@@ -88,12 +93,12 @@
</el-col> </el-col>
</el-row> </el-row>
<el-row style="margin-top:1vh;background:#fff"> <el-row style="margin-top:1vh;background:#fff">
<div class> <div class="card-hover">
<illegaltrend></illegaltrend> <illegaltrend></illegaltrend>
</div> </div>
</el-row> </el-row>
<el-row class="clearpright" style="margin-top:1vh"> <el-row class="clearpright" style="margin-top:1vh">
<div class="right-item-box"> <div class="right-item-box card-hover">
<div class="title">实时数据</div> <div class="title">实时数据</div>
<alarmEvent @event="alarmevent"></alarmEvent> <alarmEvent @event="alarmevent"></alarmEvent>
</div> </div>
...@@ -126,7 +131,8 @@ export default { ...@@ -126,7 +131,8 @@ export default {
ocxstatus:true, ocxstatus:true,
archiveUnid: 0, archiveUnid: 0,
snap_num: 0, snap_num: 0,
playurl: {}, playurl: {},
vchanname:'',
playurl2:"", playurl2:"",
audit_num: 0, audit_num: 0,
snapData: { snapData: {
...@@ -168,6 +174,9 @@ export default { ...@@ -168,6 +174,9 @@ export default {
//移动地图 //移动地图
this.$refs.map.movemap(data); this.$refs.map.movemap(data);
}, },
searchvchan(){
this.$refs.map.searchvchan(this.vchanname)
},
closeocx(){ closeocx(){
this.ocxstatus=false; this.ocxstatus=false;
}, },
...@@ -437,4 +446,12 @@ export default { ...@@ -437,4 +446,12 @@ export default {
width:200px; width:200px;
height:200px; height:200px;
} }
.search-vchan{
width 270px;
position: absolute;
top: 12px;
z-index 900;
right 10px;
border-radius 3px;
}
</style> </style>
src/views/trafficShow/indexback.vue
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<div class="infoChild"> <div class="infoChild">
<img src="../../assets/img/map/warn.png" alt=""> <img src="../../assets/img/map/warn.png" alt="">
<span class="textCon"> <span class="textCon">
<div>运行异常资源</div> <div>运行异常</div>
<div class="colorText"><span>7</span>个</div> <div class="colorText"><span>7</span>个</div>
</span> </span>
</div> </div>
......
src/views/trafficShow/map.vue
<template> <template>
<div> <div>
<div id="map" class="maps"></div> <div id="map" class="maps"></div>
<div id="popup" class="ol-popup"> <div id="popup" class="ol-popup">
<a <a
href="#" href="#"
id="popup-closer" id="popup-closer"
class="ol-popup-closer" class="ol-popup-closer"
@click="closepopup" @click="closepopup"
></a> ></a>
<div class="" id="t-popup-content"> <div class="" id="t-popup-content"></div>
</div>
</div> </div>
<div id="videopopup" class="ol-popup"> <div id="videopopup" class="ol-popup">
<a <a
...@@ -22,6 +21,21 @@ ...@@ -22,6 +21,21 @@
<videoPlay ref="mapvideo" :playurl="playurl"></videoPlay> <videoPlay ref="mapvideo" :playurl="playurl"></videoPlay>
</div> </div>
</div> </div>
<div id="taskinfopopup" class="ol-popup info-popup">
<a
href="#"
id="task-popup-closer"
class="ol-popup-closer"
@click="closetaskpopup"
></a>
<div>
<span>{{ infoData.vchan_name }}</span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div> </div>
</template> </template>
...@@ -34,7 +48,7 @@ import Feature from "ol/Feature"; //元素 ...@@ -34,7 +48,7 @@ import Feature from "ol/Feature"; //元素
import Overlay from "ol/Overlay"; //弹出框 import Overlay from "ol/Overlay"; //弹出框
import { toStringHDMS } from "ol/coordinate"; import { toStringHDMS } from "ol/coordinate";
import { fromLonLat, toLonLat } from "ol/proj"; import { fromLonLat, toLonLat } from "ol/proj";
import {defaults as defaultControls, Control} from 'ol/control.js'; import { defaults as defaultControls, Control } from "ol/control.js";
import { import {
Tile as TileLayer, Tile as TileLayer,
Vector as VectorLayer, Vector as VectorLayer,
...@@ -68,49 +82,53 @@ var map = ""; ...@@ -68,49 +82,53 @@ var map = "";
var Views = ""; var Views = "";
var container = ""; var container = "";
var videocontainer = ""; var videocontainer = "";
var taskInfocontaniner = "";
var content = ""; var content = "";
var voideocontent = ""; var voideocontent = "";
var closer = ""; var closer = "";
var taskcloser = "";
var overlay = ""; var overlay = "";
var RotateNorthControl = (function (Control) { var infooverlay = "";
function RotateNorthControl(opt_options) { var RotateNorthControl = (function(Control) {
var options = opt_options || {}; function RotateNorthControl(opt_options) {
var options = opt_options || {};
var button = document.createElement('button'); var button = document.createElement("button");
button.className = 'el-icon-aim'; button.className = "el-icon-aim";
var element = document.createElement('div'); var element = document.createElement("div");
element.className = 'rotate-north ol-unselectable ol-control'; element.className = "rotate-north ol-unselectable ol-control";
element.appendChild(button); element.appendChild(button);
Control.call(this, { Control.call(this, {
element: element, element: element,
target: options.target target: options.target
}); });
button.addEventListener('click', this.handleRotateNorth.bind(this), false); button.addEventListener("click", this.handleRotateNorth.bind(this), false);
} }
if ( Control ) RotateNorthControl.__proto__ = Control; if (Control) RotateNorthControl.__proto__ = Control;
RotateNorthControl.prototype = Object.create( Control && Control.prototype ); RotateNorthControl.prototype = Object.create(Control && Control.prototype);
RotateNorthControl.prototype.constructor = RotateNorthControl; RotateNorthControl.prototype.constructor = RotateNorthControl;
RotateNorthControl.prototype.handleRotateNorth = function handleRotateNorth () { RotateNorthControl.prototype.handleRotateNorth = function handleRotateNorth() {
let pos = [120.324447, 36.074594]; let pos = [120.324447, 36.074594];
Views.animate({ Views.animate({
center: pos, center: pos,
duration: 400, duration: 400,
zoom: 14 zoom: 14
}); });
}; };
return RotateNorthControl; return RotateNorthControl;
}(Control)); })(Control);
export default { export default {
data() { data() {
return { return {
devList: [], devList: [],
playurl:{} playurl: {},
infoData: {}
}; };
}, },
components: { components: {
...@@ -177,9 +195,7 @@ export default { ...@@ -177,9 +195,7 @@ export default {
center: [120.324447, 36.064594] center: [120.324447, 36.064594]
}); });
map = new Map({ map = new Map({
controls: defaultControls().extend([ controls: defaultControls().extend([new RotateNorthControl()]),
new RotateNorthControl()
]),
// 设置地图图层 // 设置地图图层
layers: [ layers: [
// 创建一个使用Open Street Map地图源的瓦片图层 // 创建一个使用Open Street Map地图源的瓦片图层
...@@ -215,7 +231,6 @@ export default { ...@@ -215,7 +231,6 @@ export default {
let that = this; let that = this;
map.on("click", e => { map.on("click", e => {
console.log('经纬度',e.coordinate);
var pixel = map.getEventPixel(e.originalEvent); var pixel = map.getEventPixel(e.originalEvent);
//点击相机标注点 //点击相机标注点
map.forEachFeatureAtPixel(pixel, function(feature) { map.forEachFeatureAtPixel(pixel, function(feature) {
...@@ -226,18 +241,30 @@ export default { ...@@ -226,18 +241,30 @@ export default {
//播放视频操作 //播放视频操作
let data = feature.getProperties().cameraInfo; let data = feature.getProperties().cameraInfo;
that.playvideo(data); that.playvideo(data);
console.log("视频播放地址" + data); console.log("视频播放地址", data);
});
});
//鼠标移入标注点
map.on("pointermove", e => {
var pixel = map.getEventPixel(e.originalEvent);
map.forEachFeatureAtPixel(pixel, function(feature) {
let data = feature.getProperties().cameraInfo;
that.infoData = data;
that.showTaskInfo(data);
}); });
}); });
}, },
movemap(data) { movemap(data, point, type) {
let pos = [120.324447, 36.074594]; let pos = point ? point : [120.324447, 36.074594];
Views.animate({ Views.animate({
center: pos, center: pos,
duration: 400, duration: 400,
zoom: 14 zoom: 14
}); });
this.addLayer(data, pos); if (type && type == 2) {
this.addLayer(data, pos);
}
}, },
closepopup() { closepopup() {
overlay.setPosition(undefined); overlay.setPosition(undefined);
...@@ -245,6 +272,7 @@ export default { ...@@ -245,6 +272,7 @@ export default {
return false; return false;
}, },
closevideopopup() { closevideopopup() {
this.closetaskpopup();
let video_ocx = document.getElementById("VionVideo"); let video_ocx = document.getElementById("VionVideo");
let stopRes = video_ocx.StopPlaySip(0); let stopRes = video_ocx.StopPlaySip(0);
let stopRtspRes = video_ocx.StopPlay(0); let stopRtspRes = video_ocx.StopPlay(0);
...@@ -252,6 +280,11 @@ export default { ...@@ -252,6 +280,11 @@ export default {
closer.blur(); closer.blur();
return false; return false;
}, },
closetaskpopup() {
infooverlay.setPosition(undefined);
taskcloser.blur();
return false;
},
addLayer(pdata, pos) { addLayer(pdata, pos) {
document.getElementById("popup").style.display = "block"; document.getElementById("popup").style.display = "block";
...@@ -323,7 +356,19 @@ export default { ...@@ -323,7 +356,19 @@ export default {
vectorSource.addFeature(icon); vectorSource.addFeature(icon);
return vectorSource; 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,
autoPanAnimation: {
duration: 50
}
});
map.addOverlay(infooverlay);
},
playvideo(data) { playvideo(data) {
let pos = [data.longitude, data.latitude]; let pos = [data.longitude, data.latitude];
document.getElementById("videopopup").style.display = "block"; document.getElementById("videopopup").style.display = "block";
...@@ -385,6 +430,14 @@ export default { ...@@ -385,6 +430,14 @@ export default {
this.InitMap(); this.InitMap();
}, 200); }, 200);
}); });
},
searchvchan(vchanname) {
this.devList.forEach(ele => {
if (ele.vchan_name == vchanname) {
let point = [ele.longitude, ele.latitude];
this.movemap(point);
}
});
} }
}, },
mounted() { mounted() {
...@@ -393,9 +446,11 @@ export default { ...@@ -393,9 +446,11 @@ export default {
}, 1000); }, 1000);
container = document.getElementById("popup"); container = document.getElementById("popup");
videocontainer = document.getElementById("videopopup"); videocontainer = document.getElementById("videopopup");
taskInfocontaniner = document.getElementById("taskinfopopup");
content = document.getElementById("t-popup-content"); content = document.getElementById("t-popup-content");
voideocontent = document.getElementById("video-popup-content"); voideocontent = document.getElementById("video-popup-content");
closer = document.getElementById("popup-closer"); closer = document.getElementById("popup-closer");
taskcloser = document.getElementById("task-popup-closer");
} }
}; };
</script> </script>
...@@ -472,6 +527,10 @@ export default { ...@@ -472,6 +527,10 @@ export default {
width: 100%; width: 100%;
} }
} }
.info-popup {
width 10vw;
height 100px;
}
.pop-info{ .pop-info{
float: left; float: left;
padding-left: 20px; padding-left: 20px;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!