Skip to content

platform / fanxing_new

Go to a project
Commit 4aaf34ab by 潘建波
Options

提交修改BUG和任务下发

1 parent b2e5589f
Inline Side-by-side
Showing 9 changed files with 3370 additions and 305 deletions
src/assets/resetElementCss/index.css
......@@ -12,7 +12,7 @@
font-size: 16px;
}
#login .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
margin-bottom: 28px!important;
/* margin-bottom: 28px!important; */
}
.el-main{
padding: 0;
......
src/views/public/mapvideo2.vue
......@@ -83,9 +83,9 @@ export default {
},
beforeDestroy: function () {
if (this.videoplayer.techName_ == "Flash" && this.videoplayer.pause) {
this.videoplayer.pause();
}
// if (this.videoplayer.techName_ == "Flash" && this.videoplayer.pause) {
// this.videoplayer.pause();
// }
}
};
......
src/views/sceneManage/setting/areaconfig/TraficCanvas.vue
<template>
<div class="modal-body">
<div class="modal-lt">
<button v-for="(item,index) in typeData" :class="{'curmodal':index==cindex}" @click="changeLayer(index)" :key="index">{{item}}</button>
<button
v-for="(item, index) in typeData"
:class="{ curmodal: index == cindex }"
@click="changeLayer(index)"
:key="index"
>
{{ item }}
</button>
</div>
<div class="modal-editbox">
<div class="modal-lb" id="edit_list" v-if="drawState!=-1">
<div class="modal-lb" id="edit_list" v-if="drawState != -1">
<!--<button>加载图片</button>-->
<!--<button>修改保存路径</button>-->
<!--<button>删除区域</button>-->
<el-radio-group v-model="canvasState" @change='changeCanvasState' :disabled='needLine||needRect' v-show="drawState!=2">
<el-radio-group
v-model="canvasState"
@change="changeCanvasState"
:disabled="needLine || needRect"
v-show="drawState != 2"
>
<el-radio-button :label="1" class="editbtn">
<i class="el-icon-circle-plus icon"></i>
</el-radio-button>
......@@ -17,10 +29,18 @@
</el-radio-button>
</el-radio-group>
<div v-if="!canvasState">
<span @click='delShape' class="delbtn editbtn" v-show='drawState!="2"'>
<span
@click="delShape"
class="delbtn editbtn"
v-show="drawState != '2'"
>
<i class="el-icon-delete icon"></i>
</span>
<el-select v-if='drawState==1&&selectedShape' v-model="markLineType" @change="lineChange">
<el-select
v-if="drawState == 1 && selectedShape"
v-model="markLineType"
@change="lineChange"
>
<el-option value="0" label="普通车道线"></el-option>
<el-option value="7" label="白实线"></el-option>
<el-option value="1" label="黄实线"></el-option>
......@@ -30,8 +50,11 @@
<el-option value="5" label="直行判定线"></el-option>
<el-option value="9" label="左转弯弧度判定线"></el-option>
</el-select>
<span v-if='drawState==2&&selectedShape'>导向类型</span>
<el-select v-if='drawState==2&&selectedShape' v-model="guidingtype">
<span v-if="drawState == 2 && selectedShape">导向类型</span>
<el-select
v-if="drawState == 2 && selectedShape"
v-model="guidingtype"
>
<el-option value="0" label="直行车道"></el-option>
<el-option value="1" label="左转车道"></el-option>
<el-option value="2" label="右转车道"></el-option>
......@@ -39,8 +62,8 @@
<el-option value="4" label="直右混行"></el-option>
<el-option value="5" label="左直右混行"></el-option>
</el-select>
<span v-if='drawState==2&&selectedShape'>使用类型</span>
<el-select v-if='drawState==2&&selectedShape' v-model="lanuse">
<span v-if="drawState == 2 && selectedShape">使用类型</span>
<el-select v-if="drawState == 2 && selectedShape" v-model="lanuse">
<el-option value="0" label="普通车道"></el-option>
<el-option value="1" label="公交车道"></el-option>
<el-option value="2" label="应急车道"></el-option>
......@@ -48,70 +71,140 @@
<el-option value="4" label="大货车禁行车道"></el-option>
<el-option value="5" label="隔离带"></el-option>
</el-select>
<span v-if='drawState==2&&selectedShape'>方向</span>
<el-select v-if='drawState==2&&selectedShape' v-model="markLineDirect">
<span v-if="drawState == 2 && selectedShape">方向</span>
<el-select
v-if="drawState == 2 && selectedShape"
v-model="markLineDirect"
>
<el-option value="0" label="去向"></el-option>
<el-option value="1" label="来向"></el-option>
<el-option value="2" label="双向"></el-option>
</el-select>
<span v-if='drawState==2&&selectedShape'>车道号</span>
<el-input type="number" v-model="lineNum" min='1' v-if='((drawState==1&&(markLineType=="0"||markLineType=="1"||markLineType=="7"))||drawState==2)&&selectedShape'></el-input>
<el-select name="" v-model="lightInfo.type" v-if='drawState==3&&selectedShape'>
<span v-if="drawState == 2 && selectedShape">车道号</span>
<el-input
type="number"
v-model="lineNum"
min="1"
v-if="
((drawState == 1 &&
(markLineType == '0' ||
markLineType == '1' ||
markLineType == '7')) ||
drawState == 2) &&
selectedShape
"
></el-input>
<el-select
name=""
v-model="lightInfo.type"
v-if="drawState == 3 && selectedShape"
>
<el-option value="1" label="左转灯"></el-option>
<el-option value="2" label="直行灯"></el-option>
<el-option value="3" label="左直灯"></el-option>
<el-option value="4" label="右转灯"></el-option>
<el-option value="6" label="右直灯"></el-option>
</el-select>
<el-select v-model="lightInfo.distribute" v-if='drawState==3&&selectedShape'>
<el-select
v-model="lightInfo.distribute"
v-if="drawState == 3 && selectedShape"
>
<el-option value="1" label="单眼灯"></el-option>
<el-option value="2" label="两眼灯"></el-option>
<el-option value="3" label="三眼灯"></el-option>
</el-select>
<el-select name="" v-model="lightInfo.shap" v-if='drawState==3&&selectedShape'>
<el-select
name=""
v-model="lightInfo.shap"
v-if="drawState == 3 && selectedShape"
>
<el-option value="1" label="圆形"></el-option>
<el-option value="2" label="箭头"></el-option>
<el-option value="3" label="条形"></el-option>
</el-select>
</div>
<div class="" v-if="!canvasState&&(drawState==6||drawState==7||drawState==8)">
<el-input v-model="polygon_id" disabled="disabled" type="text" class="w120" placeholder="区域ID"></el-input>
<el-input v-model="polygon_name" disabled="disabled" type="text" class="w120 mt10" placeholder="区域名称"></el-input>
<div
class=""
v-if="
!canvasState && (drawState == 6 || drawState == 7 || drawState == 8)
"
>
<el-input
v-model="polygon_id"
disabled="disabled"
type="text"
class="w120"
placeholder="区域ID"
></el-input>
<el-input
v-model="polygon_name"
disabled="disabled"
type="text"
class="w120 mt10"
placeholder="区域名称"
></el-input>
</div>
<div v-if="canvasState" sytle="textAlign:center">
<!-- <button>撤销</button> -->
<el-radio-group v-model="polyline" @change="polyChang">
<el-radio class="radio" :label="0" :style="lineRadioStyle" v-if='drawState==1'>直线</el-radio>
<el-radio class="radio" :label="1" :style="lineRadioStyle" v-if='drawState==1'>折线</el-radio>
<el-radio
class="radio"
:label="0"
:style="lineRadioStyle"
v-if="drawState == 1"
>直线</el-radio
>
<el-radio
class="radio"
:label="1"
:style="lineRadioStyle"
v-if="drawState == 1"
>折线</el-radio
>
</el-radio-group>
</div>
</div>
</div>
<div class="modal-right">
<div class="pic" id="pic"><img :src="bgUrl" id='bg' /></div>
<div id='traficCanvas'></div>
<div class="pic" id="pic"><img :src="bgUrl" id="bg" /></div>
<div id="traficCanvas"></div>
</div>
<div class='clear'></div>
<div class="clear"></div>
<div id="line_type" class="littleModel BR active" v-if="smallWindow">
<div>
<p v-if="typeFlag==1">线属性</p>
<p v-if="typeFlag==0">车道属性</p>
<p v-if="typeFlag==2">灯属性</p>
<div class='item'>
<span v-if='typeFlag!=3'>类型：</span>
<p v-if="typeFlag == 1">线属性</p>
<p v-if="typeFlag == 0">车道属性</p>
<p v-if="typeFlag == 2">灯属性</p>
<div class="item">
<span v-if="typeFlag != 3">类型：</span>
<div>
<el-select v-if='typeFlag==1' v-model="markLineType">
<el-option value="0" label="普通车道线" v-if='!polyline'></el-option>
<el-option value="7" label="白实线" v-if='!polyline'></el-option>
<el-option value="1" label="黄实线" v-if='!polyline'></el-option>
<el-option value="2" label="停止线" v-if='!polyline'></el-option>
<el-option value="3" label="左转判定线" v-if='!polyline'></el-option>
<el-option value="4" label="右转判定线" v-if='!polyline'></el-option>
<el-option value="5" label="直行判定线" v-if='!polyline'></el-option>
<el-select v-if="typeFlag == 1" v-model="markLineType">
<el-option
value="0"
label="普通车道线"
v-if="!polyline"
></el-option>
<el-option value="7" label="白实线" v-if="!polyline"></el-option>
<el-option value="1" label="黄实线" v-if="!polyline"></el-option>
<el-option value="2" label="停止线" v-if="!polyline"></el-option>
<el-option
value="3"
label="左转判定线"
v-if="!polyline"
></el-option>
<el-option
value="4"
label="右转判定线"
v-if="!polyline"
></el-option>
<el-option
value="5"
label="直行判定线"
v-if="!polyline"
></el-option>
<el-option value="9" label="左转弯弧度判定线"></el-option>
</el-select>
<el-select v-if='typeFlag==0' v-model="markLineType">
<el-select v-if="typeFlag == 0" v-model="markLineType">
<el-option value="0" label="左转车道"></el-option>
<el-option value="1" label="右转车道"></el-option>
<el-option value="2" label="直行车道"></el-option>
......@@ -121,7 +214,7 @@
<el-option value="9" label="应急车道"></el-option>
<el-option value="10" label="非机动车道"></el-option>
</el-select>
<el-select name="" v-model="lightInfo.type" v-if='typeFlag==2'>
<el-select name="" v-model="lightInfo.type" v-if="typeFlag == 2">
<el-option value="1" label="左转灯"></el-option>
<el-option value="2" label="直行灯"></el-option>
<el-option value="3" label="左直灯"></el-option>
......@@ -130,13 +223,22 @@
</el-select>
</div>
</div>
<div class='item' v-if="(typeFlag==1 && (markLineType=='0'||markLineType=='1'||markLineType=='7')) || drawState==2">
<div
class="item"
v-if="
(typeFlag == 1 &&
(markLineType == '0' ||
markLineType == '1' ||
markLineType == '7')) ||
drawState == 2
"
>
<span>序号：</span>
<div>
<el-input type="number" v-model="lineNum" min='1'></el-input>
<el-input type="number" v-model="lineNum" min="1"></el-input>
</div>
</div>
<div v-if="typeFlag==2" class='lightInfo item'>
<div v-if="typeFlag == 2" class="lightInfo item">
<span>灯眼模式：</span>
<div>
<el-select v-model="lightInfo.distribute">
......@@ -146,7 +248,7 @@
</el-select>
</div>
</div>
<div v-if="typeFlag==2" class="item">
<div v-if="typeFlag == 2" class="item">
<span>形状：</span>
<div>
<el-select name="" v-model="lightInfo.shap">
......@@ -156,11 +258,11 @@
</el-select>
</div>
</div>
<LightCanvas v-if="typeFlag==3" ref='lightCanvas'></LightCanvas>
<LightCanvas v-if="typeFlag == 3" ref="lightCanvas"></LightCanvas>
</div>
<div v-if="typeFlag != 3">
<button @click="lineTypeCancel">取消</button>
<button @click="lightLast" v-if="typeFlag==2">上一步</button>
<button @click="lightLast" v-if="typeFlag == 2">上一步</button>
<button @click="lineTypeBtn">确定</button>
</div>
<div v-if="typeFlag == 3">
......@@ -172,11 +274,11 @@
<div class="pedestrian-area-attr BR" v-if="curLayerstate">
<div class="mt40">
<span class="label">ID号:</span>
<input type="text" v-model="polygon_id">
<input type="text" v-model="polygon_id" />
</div>
<div class="mt10">
<span class="label">名称:</span>
<input type="text" v-model="polygon_name">
<input type="text" v-model="polygon_name" />
</div>
<div class="btn-box mt40">
<button @click="bicyEnter">确定</button>
......@@ -186,8 +288,8 @@
</div>
</template>
<script>
import LightCanvas from "./LightCanvas";
export default {
import LightCanvas from "./LightCanvas";
export default {
name: "zoneSetting",
data() {
return {
......@@ -199,11 +301,22 @@
"138,43,226",
"241,31,8",
"31,151,181",
'3,65,76',
"3,65,76",
"12,222,235"
], //线颜色
typeData:['预览','车牌检测区域','车道标志线','车道属性','红绿灯区域','对向车道','违停区域','行人检测区域','行人密度区域','异物检测区域'],
cindex:0,
typeData: [
"预览",
"车牌检测区域",
"车道标志线",
"车道属性",
"红绿灯区域",
"对向车道",
"违停区域",
"行人检测区域",
"行人密度区域",
"异物检测区域"
],
cindex: 0,
//laneMark:false,
drawState: -1, //配置项类型
lineRadioStyle: {
......@@ -227,22 +340,25 @@
selectedShape: null, //当前选中图形
typeFlag: 1, //选择属性弹窗状态
lineNum: 1, //车道线/车道序号
curLayerstate:false,//行人检测区域属性设置
polygon_id:'',//行人检测区域id
polygon_name:'',//行人检测区域name
curLayerstate: false, //行人检测区域属性设置
testLayerstate:false,//测试检测区域属性设置
polygon_id: "", //行人检测区域id
polygon_name: "", //行人检测区域name
markLineType: "0",
markLineDirect: "",
lanuse:'',//车道属性类型
lanuse:'0',//车道属性类型
guidingtype:'',//车道导向类型
markLineDirect: "",
childUrl: "", //红绿灯区域截图
scale: {}, //红绿灯区域截图放大倍数
lightInfo: {
type: "1",
distribute: "1",
shap: "1"
shap: "1",
delay:3
},
roiBody: {},
XMLStr: ""
XMLStr: "",
eventData:[]
};
},
props: ["bgUrl"],
......@@ -297,6 +413,11 @@
id:'foreignLayer',
name:"layer"
});
this.testRegionLayer = new Kinetic.Layer({//测试检测区域
id:'testRegionLayer',
name:"layer"
});
let shadow = new Kinetic.Rect({
x: 0, //矩形左上角x坐标
y: 0, //矩形左上角y坐标
......@@ -334,6 +455,7 @@
this.stage.add(this.noStopLayer);
this.stage.add(this.densityLayer);
this.stage.add(this.foreignLayer);
this.stage.add(this.testRegionLayer)
this.layers = [
this.testLayer,
this.lineLayer,
......@@ -343,7 +465,8 @@
this.noStopLayer,
this.bicyLayer,
this.densityLayer,
this.foreignLayer
this.foreignLayer,
this.testRegionLayer
];
},
//还原配置
......@@ -477,12 +600,21 @@
let arrs = this.roadLayer.get(".arr");
let arr = arrs[arrs.length - 1];
line.index = ele.lane_no;
let lane_guid_type = 0;
let lane_use = 0;
if(obj.lanes.lane_count == 1){
lane_guid_type = obj.lanes.lane.lane_guiding_type
lane_use = obj.lanes.lane.lane_use_type
} else {
lane_guid_type = obj.lanes.lane[index].lane_guiding_type;
lane_use = obj.lanes.lane[index].lane_use_type
}
this.roads[parseInt(ele.lane_seq - 1)] = {
type: ele.lane_type,
index: ele.lane_no,
direct: direct,
lane_guiding_type:obj.lanes.lane[index].lane_guiding_type,
lane_use_type:obj.lanes.lane[index].lane_use_type
lane_guiding_type:lane_guid_type,
lane_use_type:lane_use
};
}
});
......@@ -504,7 +636,6 @@
let bottom = points.bottom * 500;
let pointsAry = [left, top, left, bottom, right, bottom, right, top];
let rect = this.drawRect("morePoints", pointsAry, this.color[3]);
let linghtRoi = {
light_region_seq: 1,
top: (top / 500).toFixed(6),
......@@ -516,6 +647,7 @@
(rect.light_type = ele.light_type),
(rect.light_distribute = ele.light_distribute),
(rect.light_shape = ele.light_shape),
(rect.light_delay = ele.light_yellow_delay||ele.light_yellow_interval),
(rect.light_regions = {
light_region_count: 1,
light_region: linghtRoi
......@@ -613,6 +745,28 @@
} catch (error) {
console.log(error);
}
//测试检测区域
try {
let testarr = obj.test_result_region.polygon;
if (!testarr.length) {
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);
}
this.selectedShape = null;
this.drawRoad();
......@@ -659,8 +813,8 @@
}
this.canvasState = 0;
this.polyline = 0;
this.polygon_name = '';
this.polygon_id = '';
this.polygon_name = "";
this.polygon_id = "";
var e = e || window.event;
switch (index - 1) {
......@@ -763,10 +917,10 @@
break;
case 4:
if (this.needRect) {
this.endChangeShape(evt)
this.endChangeShape(evt);
} else {
this.needRect = true
this.startChangeShape(pos,layer,this.color[this.drawState])
this.needRect = true;
this.startChangeShape(pos, layer, this.color[this.drawState]);
}
break;
case 6:
......@@ -809,6 +963,14 @@
this.startChangeShape(pos, layer, this.color[this.drawState]);
}
break;
case 9:
if (this.needRect) {
this.endChangeShape(evt);
} else {
this.needRect = true;
this.startChangeShape(pos, layer, this.color[this.drawState]);
}
break;
default:
break;
}
......@@ -824,7 +986,7 @@
this.markLineType = this.roads[shape.roadIndex].type;
this.markLineDirect = this.roads[shape.roadIndex].direct;
this.guidingtype = this.roads[shape.roadIndex].lane_guiding_type;
this.lanuse = this.roads[shape.roadIndex].lane_use_type;
this.lanuse = this.roads[shape.roadIndex].lane_use_type || '0';
shape.setFill("rgba(" + this.color[1] + ",0.3)");
let gLine = this.greenLines[shape.roadIndex];
if (gLine.getParent().attrs.name == "arr") {
......@@ -867,9 +1029,15 @@
this.lightInfo = {
type: shape.light_type,
shap: shape.light_shape,
distribute: shape.light_distribute
distribute: shape.light_distribute,
delay:shape.light_delay
};
} else if(this.drawState == 6 ||this.drawState == 7||this.drawState == 8){
} else if (
this.drawState == 6 ||
this.drawState == 7 ||
this.drawState == 8 ||
this.drawState == 9
) {
this.polygon_name = shape.polygon_name;
this.polygon_id = shape.polygon_id;
}
......@@ -894,6 +1062,7 @@
) {
this.blueLines.splice(this.lineNum - 1, 0, this.selectedShape);
this.lineNum++;
this.roadFlag = false;
}
this.selectedShape.line_type = this.markLineType;
} else if (this.drawState == 2) {
......@@ -906,7 +1075,7 @@
this.selectedShape.setFill("rgba(255,255,255,0)");
if (this.markLineDirect != undefined) {
road.direct = this.markLineDirect;
road.cPoints = this.sortLinePoints(road.cPoints)
road.cPoints = this.sortLinePoints(road.cPoints);
let points;
if (this.markLineDirect == "0") {
points = [
......@@ -937,6 +1106,7 @@
this.selectedShape.light_type = this.lightInfo.type;
this.selectedShape.light_shape = this.lightInfo.shap;
this.selectedShape.light_distribute = this.lightInfo.distribute;
this.selectedShape.light_delay = this.lightInfo.delay;
}
this.selectedShape = null;
......@@ -944,7 +1114,8 @@
this.lightInfo = {
type: "1",
distribute: "1",
shap: "1"
shap: "1",
delay:3
};
this.layers[this.drawState].draw();
},
......@@ -958,12 +1129,12 @@
this.drawState == 5 ||
this.drawState == 6 ||
this.drawState == 7 ||
this.drawState == 8
this.drawState == 8 ||
this.drawState == 9
) {
let rect = this.drawRect(pos, pos, col);
rect.moveToBottom();
layer.add(rect);
} else {
if (ary.length == 0 && !this.needLine) {
let circle = this.drawCircle(pos, "rgba(255,255,255,.2)");
......@@ -1030,8 +1201,8 @@
let rect = rects[rects.length - 1];
let points = rect.attrs.points;
let canvas = document.createElement("canvas");
let img = document.getElementById('pic').childNodes[0]
console.log(img)
let img = document.getElementById("pic").childNodes[0];
console.log(img);
let w = Math.abs(points[0] - points[4]);
let h = Math.abs(points[1] - points[5]);
this.scale = {
......@@ -1075,12 +1246,14 @@
}, 0);
layer.draw();
}
if(this.drawState == 6 ||
if (this.drawState == 6 ||
this.drawState == 7 ||
this.drawState == 8
) {
this.drawState == 8) {
this.curLayerstate = true;
}
if(this.drawState == 9){
this.testLayerstate = true;
}
},
lineChange: function name() {
let color = "blue";
......@@ -1131,29 +1304,34 @@
layer.draw();
}
},
//行人检测信息/异物检测信息
bicyEnter(){
//行人检测信息/异物检测信息/测试检测区域
bicyEnter() {
let curLayers = this.layers[this.drawState].get(".rect");
let curlay = curLayers[curLayers.length - 1];
curlay.polygon_id = this.polygon_id;
curlay.polygon_name = this.polygon_name;
this.curLayerstate = false;
//测试区域弹窗
this.testLayerstate = false;
//清空输入框
this.polygon_id = '';
this.polygon_name = '';
this.polygon_id = "";
this.polygon_name = "";
},
curlayCancel(){
curlayCancel() {
let curLayers = this.layers[this.drawState].get(".rect");
let curlay = curLayers[curLayers.length - 1];
curlay.destroy();
console.log(curlay)
console.log(curlay);
this.selectedShape = null;
this.cancleSelectedGroup();
this.layers[this.drawState].draw();
this.curLayerstate = false;
//测试区域弹窗
this.testLayerstate = false;
//清空输入框
this.polygon_id = '';
this.polygon_name = '';
this.polygon_id = "";
this.polygon_name = "";
},
//画圆
drawCircle: function(pos, col, r) {
......@@ -1269,8 +1447,8 @@
this.roads[rindex] = "";
break;
case 6:
this.polygon_name = '';
this.polygon_id = '';
this.polygon_name = "";
this.polygon_id = "";
default:
break;
}
......@@ -1385,6 +1563,7 @@
(rect.light_type = this.lightInfo.type),
(rect.light_distribute = this.lightInfo.distribute),
(rect.light_shape = this.lightInfo.shap),
(rect.light_delay = this.lightInfo.delay),
(rect.light_regions = {
light_region_count: 1,
light_region: linghtRoi
......@@ -1395,7 +1574,8 @@
this.lightInfo = {
type: "1",
distribute: "1",
shap: "1"
shap: "1",
delay:3
};
this.selectedShape = null;
},
......@@ -1429,7 +1609,7 @@
arrowY = c1[1] - topY;
// let line = this.drawLine({x:c1[0],y:c1[1]},{x:c2[0],y:c2[1]},color)
line.attrs.name = "centerLine";
line.attrs.name = "`centerLine`";
arrowX = c2[0] + topX;
arrowY = c2[1] + topY;
......@@ -1473,9 +1653,38 @@
this.roadLayer.draw();
try {
// console.log('蓝色车道线')
// console.log(this.blueLines)
this.blueLines.forEach((ele, index) => {
let points = this.sortLinePoints(ele.attrs.points);
if(ele.attrs.points[1] - ele.attrs.points[3] > 0) {
var copypoint = Array.from(ele.attrs.points);
ele.attrs.points[0] = copypoint[2]
ele.attrs.points[1] = copypoint[3]
ele.attrs.points[2] = copypoint[0]
ele.attrs.points[3] = copypoint[1]
// console.log('*******蓝色车道线*******')
// 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) => {
let points =this.sortLinePoints(ele.attrs.points);
if (index > 0) {
//绘制车道
let lastPoints = this.sortLinePoints(this.blueLines[index - 1].attrs.points);
......@@ -1519,10 +1728,11 @@
}
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,
(mPoints[0] + mPoints[6]) / 2,
(mPoints[1] + mPoints[7]) / 2
];
road.cPoints = cPoints;
let cLine = this.drawLine("morePoints", cPoints, this.color[2]);
......@@ -1579,6 +1789,7 @@
childCancle: function() {
this.$refs.lightCanvas.cancle();
},
//生成xml
save: function() {
this.cancleSelectedGroup();
//车牌检测区域
......@@ -1603,11 +1814,11 @@
};
//新增新增
this.roiBody.plate_detect_region = {
detect_polygon:{
polygon_point_count:testAry.length,
detect_polygon: {
polygon_point_count: testAry.length,
point: testAry
}
}
};
//车道线
let lineAry = [];
try {
......@@ -1675,7 +1886,6 @@
try {
console.log(this.roads);
this.blueLines.forEach((ele, index) => {
if (index != this.blueLines.length - 1) {
let midLine = this.roads[index],
points =
......@@ -1688,7 +1898,9 @@
]
: midLine.cPoints,
rectPoints1 = this.sortLinePoints(ele.attrs.points),
rectPoints2 = this.sortLinePoints(this.blueLines[index + 1].attrs.points);
rectPoints2 = this.sortLinePoints(
this.blueLines[index + 1].attrs.points
);
let options = {
lane_seq: index + 1,
lane_no: midLine.index,
......@@ -1748,59 +1960,62 @@
]
}
};
let linetype =''
if(midLine.lane_use_type == 0) {
let linetype = "";
if (midLine.lane_use_type == 0) {
// linetype = this.lanuse;
switch(midLine.lane_guiding_type){
case '0':
linetype = 2
switch (midLine.lane_guiding_type) {
case "0":
linetype = 2;
break;
case '1':
linetype = 0
case "1":
linetype = 0;
break;
case '2':
linetype = 1
case "2":
linetype = 1;
break;
case '3':
linetype = 3
case "3":
linetype = 3;
break;
case '4':
linetype = 4
case "4":
linetype = 4;
break;
case '5':
linetype = 5
case "5":
linetype = 5;
break;
default:
break;
}
} else if(midLine.lane_use_type != '' && midLine.lane_use_type != 0) {
} else if (
midLine.lane_use_type != "" &&
midLine.lane_use_type != 0
) {
// linetype = this.lanuse;
switch(midLine.lane_use_type){
case '1':
linetype = 8
switch (midLine.lane_use_type) {
case "1":
linetype = 8;
break;
case '2':
linetype = 9
case "2":
linetype = 9;
break;
case '3':
linetype = 10
case "3":
linetype = 10;
break;
case '4':
linetype = ''
case "4":
linetype = "";
break;
case '5':
linetype = ''
case "5":
linetype = "";
break;
default:
break;
}
}
options.lane_type = linetype
roadAry.push(options)
options.lane_type = linetype;
roadAry.push(options);
//新增
let L = JSON.stringify(options);
let lanaOptions = JSON.parse(L);
console.log(this.lanuse)
console.log(this.lanuse);
lanaOptions.lane_use_type = midLine.lane_use_type;
lanaOptions.lane_guiding_type = midLine.lane_guiding_type;
......@@ -1808,31 +2023,35 @@
lanaOptions.lane_user_id = options.lane_no;
lanaOptions.lane_middle_line = {
polygon_point_count: 2,
"point1": {
point1: {
x: points ? (points[0] / 800).toFixed(6) : "",
y: points ? (points[1] / 500).toFixed(6) : ""
},
"point2":{
point2: {
x: points ? (points[2] / 800).toFixed(6) : "",
y: points ? (points[3] / 500).toFixed(6) : ""
}
};
lanaOptions.lane_directions = {
lane_direction_count:'1',
lane_direction:{
lane_direction_type:midLine.direct,
lane_direction_time:'00:00:00-23:59:59'
}
lane_direction_count: "1",
lane_direction: {
lane_direction_type: midLine.direct,
lane_direction_time: "00:00:00-23:59:59"
}
lanaAry.push(lanaOptions)
};
lanaAry.push(lanaOptions);
}
});
} catch (error) {
console.log(error);
}
console.log('#######################')
console.log(lanaAry)
console.log('#######################')
console.log("#######################");
console.log(lanaAry);
console.log("#######################");
this.roiBody.lanes = {
lane_count: lanaAry.length ? lanaAry.length : 0,
lane: lanaAry ? lanaAry : []
}
//对向车道
try {
this.subtendLayer.get(".rect").forEach((el, index) => {
......@@ -1858,7 +2077,7 @@
lanaAry.push({
lane_no: 1,
lane_seq: roadAry.length + 1,
lane_use_type:6,
lane_use_type: 6,
lane_type: 11,
lane_polygon: {
polygon_point_count: bicAry.length,
......@@ -1868,7 +2087,6 @@
});
} catch (error) {}
// 红绿灯区域
let lightAry = [];
try {
......@@ -1879,11 +2097,11 @@
light_id:ele.light_type,
light_distribute: ele.light_distribute,
light_number_type:ele.light_distribute,
light_shape: ele.light_shape,
light_yellow_delay: Number(ele.light_delay),
light_yellow_interval:Number(ele.light_delay),
light_shape:ele.light_shape,
light_shape_type:ele.light_shape,
light_regions: ele.light_regions,
light_yellow_interval:3,
light_yellow_delay:3
});
});
} catch (error) {}
......@@ -1940,10 +2158,10 @@
polygon_point_count: bicAry.length,
point: bicAry
}
})
});
bicArys.push({
polygon_id:el.polygon_id,
polygon_name:el.polygon_name,
polygon_id: el.polygon_id,
polygon_name: el.polygon_name,
polygon_point_count: bicAry.length,
point: bicAry
});
......@@ -1958,11 +2176,6 @@
lane_count: roadAry.length ? roadAry.length : 0,
lane: roadAry ? roadAry : []
};
//新增
this.roiBody.lanes = {
lane_count: lanaAry.length ? lanaAry.length : 0,
lane: lanaAry ? lanaAry : []
}
//行人密度检测区域
let densityAry = [];
......@@ -1978,8 +2191,8 @@
});
}
densityAry.push({
polygon_id:el.polygon_id,
polygon_name:el.polygon_name,
polygon_id: el.polygon_id,
polygon_name: el.polygon_name,
polygon_point_count: denAry.length,
point: denAry
});
......@@ -2005,8 +2218,8 @@
});
}
foreignAry.push({
polygon_id:el.polygon_id,
polygon_name:el.polygon_name,
polygon_id: el.polygon_id,
polygon_name: el.polygon_name,
polygon_point_count: foAry.length,
point: foAry
});
......@@ -2018,6 +2231,33 @@
polygon: foreignAry
};
//测试检测区域
let testRegion = [];
try {
this.testRegionLayer.get(".rect").forEach((el, index) => {
let foAry = [];
let points = el.attrs.points;
for (let i = 0; i < points.length; i += 2) {
foAry.push({
point_seq: i / 2 + 1,
x: (points[i] / 800).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
});
});
} catch (error) {}
this.roiBody.test_result_region = {
region_count: foreignAry.length,
polygon: testRegion
};
console.log(this.roiBody);
return this.oParse.writeXML({ roi: this.roiBody });
},
......@@ -2033,6 +2273,7 @@
(this.polygon_name = ''),
(this.polygon_id = ''),
(this.polyline = 0);
$(".modal-lt button").removeClass("active");
},
sortLinePoints(pointarr){
try{
......@@ -2049,10 +2290,26 @@
}catch(err){
console.log(err)
}
},
changetestid(){
this.eventData.forEach(ele => {
if(ele.value == this.polygon_id){
this.polygon_name = ele.name
}
})
}
},
mounted() {
console.log(eventJson)
this.eventData = eventJson
// this.stageInit()
key('alt+1',()=>{
if(this.istest) {
this.istest = false
} else {
this.istest = true
}
})
}
};
</script>
......@@ -2077,22 +2334,22 @@ button {
overflow: hidden;
}
.modal-lt button {
outline:none;
outline: none;
height: 30px;
line-height: 30px;
float: left;
padding: 0 10px;
border-radius: 15px;
margin:0 0px 10px 15px;
background: #D7EDFF;
border:1px solid rgba(59,183,255,1);
margin: 0 0px 10px 15px;
background: #d7edff;
border: 1px solid rgba(59, 183, 255, 1);
cursor: pointer;
color: #666666;
}
.modal-lt .curmodal {
background: #D7EDFF !important;
border: 1px solid rgba(59,183,255,1);
color: #3BB7FF;
background: #d7edff !important;
border: 1px solid rgba(59, 183, 255, 1);
color: #3bb7ff;
}
.modal-editbox {
......@@ -2102,7 +2359,7 @@ button {
width: 22%;
color: #fff;
}
.modal-editbox .modal-lb{
.modal-editbox .modal-lb {
position: absolute;
bottom: 0;
}
......@@ -2142,7 +2399,7 @@ button {
text-align: center;
line-height: 35px;
/* background: #409eff; */
background:rgba(1, 20, 51,.9);
background: rgba(1, 20, 51, 0.9);
}
#line_type.active {
......@@ -2246,9 +2503,9 @@ li {
width: 70%;
}
.w120 {
width: 120px
width: 120px;
}
.mt10{
.mt10 {
margin-top: 10px;
}
.pedestrian-area-attr {
......@@ -2267,28 +2524,29 @@ li {
.pedestrian-area-attr .label {
width: 80px;
}
.pedestrian-area-attr input{
width: 200px!important;
opacity: .8;
.pedestrian-area-attr input {
width: 200px !important;
opacity: 0.8;
height: 30px;
line-height: 30px;
border: 0px;
}
.mt40 {
margin-top:40px;
margin-top: 40px;
}
.btn-box button{
.btn-box button {
height: 30px;
line-height: 30px;
width: 100px;
border:0;
border: 0;
cursor: pointer;
background: #145b93;
color: #ffffff;
}
.delbtn{
.delbtn {
color: #fff;
background: #E5E5E5;
background: #e5e5e5;
}
</style> b
</style>
b
src/views/sceneManage/setting/areaconfig/trafficback.vue 0 → 100644
<template>
<div class="modal-body">
<div class="modal-lt">
<button
v-for="(item, index) in typeData"
:class="{ curmodal: index == cindex }"
@click="changeLayer(index)"
:key="index"
>
{{ item }}
</button>
</div>
<div class="modal-editbox">
<div class="modal-lb" id="edit_list" v-if="drawState != -1">
<!--<button>加载图片</button>-->
<!--<button>修改保存路径</button>-->
<!--<button>删除区域</button>-->
<el-radio-group
v-model="canvasState"
@change="changeCanvasState"
:disabled="needLine || needRect"
v-show="drawState != 2"
>
<el-radio-button :label="1" class="editbtn">
<i class="el-icon-circle-plus icon"></i>
</el-radio-button>
<el-radio-button :label="0" class="editbtn">
<i class="el-icon-edit-outline"></i>
</el-radio-button>
</el-radio-group>
<div v-if="!canvasState">
<span
@click="delShape"
class="delbtn editbtn"
v-show="drawState != '2'"
>
<i class="el-icon-delete icon"></i>
</span>
<el-select
v-if="drawState == 1 && selectedShape"
v-model="markLineType"
@change="lineChange"
>
<el-option value="0" label="普通车道线"></el-option>
<el-option value="7" label="白实线"></el-option>
<el-option value="1" label="黄实线"></el-option>
<el-option value="2" label="停止线"></el-option>
<el-option value="3" label="左转判定线"></el-option>
<el-option value="4" label="右转判定线"></el-option>
<el-option value="5" label="直行判定线"></el-option>
<el-option value="9" label="左转弯弧度判定线"></el-option>
</el-select>
<span v-if="drawState == 2 && selectedShape">导向类型</span>
<el-select
v-if="drawState == 2 && selectedShape"
v-model="guidingtype"
>
<el-option value="0" label="直行车道"></el-option>
<el-option value="1" label="左转车道"></el-option>
<el-option value="2" label="右转车道"></el-option>
<el-option value="3" label="直左混行"></el-option>
<el-option value="4" label="直右混行"></el-option>
<el-option value="5" label="左直右混行"></el-option>
</el-select>
<span v-if="drawState == 2 && selectedShape">使用类型</span>
<el-select v-if="drawState == 2 && selectedShape" v-model="lanuse">
<el-option value="0" label="普通车道"></el-option>
<el-option value="1" label="公交车道"></el-option>
<el-option value="2" label="应急车道"></el-option>
<el-option value="3" label="非机动车道"></el-option>
<el-option value="4" label="大货车禁行车道"></el-option>
<el-option value="5" label="隔离带"></el-option>
</el-select>
<span v-if="drawState == 2 && selectedShape">方向</span>
<el-select
v-if="drawState == 2 && selectedShape"
v-model="markLineDirect"
>
<el-option value="0" label="去向"></el-option>
<el-option value="1" label="来向"></el-option>
<el-option value="2" label="双向"></el-option>
</el-select>
<span v-if="drawState == 2 && selectedShape">车道号</span>
<el-input
type="number"
v-model="lineNum"
min="1"
v-if="
((drawState == 1 &&
(markLineType == '0' ||
markLineType == '1' ||
markLineType == '7')) ||
drawState == 2) &&
selectedShape
"
></el-input>
<el-select
name=""
v-model="lightInfo.type"
v-if="drawState == 3 && selectedShape"
>
<el-option value="1" label="左转灯"></el-option>
<el-option value="2" label="直行灯"></el-option>
<el-option value="3" label="左直灯"></el-option>
<el-option value="4" label="右转灯"></el-option>
<el-option value="6" label="右直灯"></el-option>
</el-select>
<el-select
v-model="lightInfo.distribute"
v-if="drawState == 3 && selectedShape"
>
<el-option value="1" label="单眼灯"></el-option>
<el-option value="2" label="两眼灯"></el-option>
<el-option value="3" label="三眼灯"></el-option>
</el-select>
<el-select
name=""
v-model="lightInfo.shap"
v-if="drawState == 3 && selectedShape"
>
<el-option value="1" label="圆形"></el-option>
<el-option value="2" label="箭头"></el-option>
<el-option value="3" label="条形"></el-option>
</el-select>
</div>
<div
class=""
v-if="
!canvasState && (drawState == 6 || drawState == 7 || drawState == 8)
"
>
<el-input
v-model="polygon_id"
disabled="disabled"
type="text"
class="w120"
placeholder="区域ID"
></el-input>
<el-input
v-model="polygon_name"
disabled="disabled"
type="text"
class="w120 mt10"
placeholder="区域名称"
></el-input>
</div>
<div v-if="canvasState" sytle="textAlign:center">
<!-- <button>撤销</button> -->
<el-radio-group v-model="polyline" @change="polyChang">
<el-radio
class="radio"
:label="0"
:style="lineRadioStyle"
v-if="drawState == 1"
>直线</el-radio
>
<el-radio
class="radio"
:label="1"
:style="lineRadioStyle"
v-if="drawState == 1"
>折线</el-radio
>
</el-radio-group>
</div>
</div>
</div>
<div class="modal-right">
<div class="pic" id="pic"><img :src="bgUrl" id="bg" /></div>
<div id="traficCanvas"></div>
</div>
<div class="clear"></div>
<div id="line_type" class="littleModel BR active" v-if="smallWindow">
<div>
<p v-if="typeFlag == 1">线属性</p>
<p v-if="typeFlag == 0">车道属性</p>
<p v-if="typeFlag == 2">灯属性</p>
<div class="item">
<span v-if="typeFlag != 3">类型：</span>
<div>
<el-select v-if="typeFlag == 1" v-model="markLineType">
<el-option
value="0"
label="普通车道线"
v-if="!polyline"
></el-option>
<el-option value="7" label="白实线" v-if="!polyline"></el-option>
<el-option value="1" label="黄实线" v-if="!polyline"></el-option>
<el-option value="2" label="停止线" v-if="!polyline"></el-option>
<el-option
value="3"
label="左转判定线"
v-if="!polyline"
></el-option>
<el-option
value="4"
label="右转判定线"
v-if="!polyline"
></el-option>
<el-option
value="5"
label="直行判定线"
v-if="!polyline"
></el-option>
<el-option value="9" label="左转弯弧度判定线"></el-option>
</el-select>
<el-select v-if="typeFlag == 0" v-model="markLineType">
<el-option value="0" label="左转车道"></el-option>
<el-option value="1" label="右转车道"></el-option>
<el-option value="2" label="直行车道"></el-option>
<el-option value="3" label="直左混行"></el-option>
<el-option value="4" label="直右混行"></el-option>
<el-option value="8" label="公交车道"></el-option>
<el-option value="9" label="应急车道"></el-option>
<el-option value="10" label="非机动车道"></el-option>
</el-select>
<el-select name="" v-model="lightInfo.type" v-if="typeFlag == 2">
<el-option value="1" label="左转灯"></el-option>
<el-option value="2" label="直行灯"></el-option>
<el-option value="3" label="左直灯"></el-option>
<el-option value="4" label="右转灯"></el-option>
<el-option value="6" label="右直灯"></el-option>
</el-select>
</div>
</div>
<div
class="item"
v-if="
(typeFlag == 1 &&
(markLineType == '0' ||
markLineType == '1' ||
markLineType == '7')) ||
drawState == 2
"
>
<span>序号：</span>
<div>
<el-input type="number" v-model="lineNum" min="1"></el-input>
</div>
</div>
<div v-if="typeFlag == 2" class="lightInfo item">
<span>灯眼模式：</span>
<div>
<el-select v-model="lightInfo.distribute">
<el-option value="1" label="单眼灯"></el-option>
<el-option value="2" label="两眼灯"></el-option>
<el-option value="3" label="三眼灯"></el-option>
</el-select>
</div>
</div>
<div v-if="typeFlag == 2" class="item">
<span>形状：</span>
<div>
<el-select name="" v-model="lightInfo.shap">
<el-option value="1" label="圆形"></el-option>
<el-option value="2" label="箭头"></el-option>
<el-option value="3" label="条形"></el-option>
</el-select>
</div>
</div>
<LightCanvas v-if="typeFlag == 3" ref="lightCanvas"></LightCanvas>
</div>
<div v-if="typeFlag != 3">
<button @click="lineTypeCancel">取消</button>
<button @click="lightLast" v-if="typeFlag == 2">上一步</button>
<button @click="lineTypeBtn">确定</button>
</div>
<div v-if="typeFlag == 3">
<button @click="lineTypeCancel">取消</button>
<button @click="childCancle" v-if="lightCancle">撤销</button>
<button @click="lightNext" v-if="lightNextBtn">下一步</button>
</div>
</div>
<div class="pedestrian-area-attr BR" v-if="curLayerstate">
<div class="mt40">
<span class="label">ID号:</span>
<input type="text" v-model="polygon_id" />
</div>
<div class="mt10">
<span class="label">名称:</span>
<input type="text" v-model="polygon_name" />
</div>
<div class="btn-box mt40">
<button @click="bicyEnter">确定</button>
<button @click="curlayCancel">取消</button>
</div>
</div>
</div>
</template>
<script>
import LightCanvas from "./LightCanvas";
export default {
name: "zoneSetting",
data() {
return {
color: [
"222,50,212",
"24,0,254",
"0,254,137",
"255,255,0",
"138,43,226",
"241,31,8",
"31,151,181",
"3,65,76",
"12,222,235"
], //线颜色
typeData: [
"预览",
"车牌检测区域",
"车道标志线",
"车道属性",
"红绿灯区域",
"对向车道",
"违停区域",
"行人检测区域",
"行人密度区域",
"异物检测区域"
],
cindex: 0,
//laneMark:false,
drawState: -1, //配置项类型
lineRadioStyle: {
color: "#fff",
width: "40px",
margin: "10px 15px"
},
canvasState: 0, //控制编辑/添加
polyline: 0, //控制直线/折线
smallWindow: false, //控制属性弹窗
lightCancle: false, //控制属性弹窗是否显示撤销按钮
lightNextBtn: false, //控制属性弹窗是否显示下一步按钮
roadFlag: "", //标记车道线是否有修改
needRect: false, //标记是否处于划矩形状态
needLine: false, //标记是否处于划线状态
lightShootState: 0, //标记选择灯区域截图起止方式，用于放大图片
layers: [], //用于记录各个配置项的图层
blueLines: [], //记录用于连接车道的车道线
greenLines: [], //记录车道中线箭头
roads: [],
selectedShape: null, //当前选中图形
typeFlag: 1, //选择属性弹窗状态
lineNum: 1, //车道线/车道序号
curLayerstate: false, //行人检测区域属性设置
testLayerstate:false,//测试检测区域属性设置
polygon_id: "", //行人检测区域id
polygon_name: "", //行人检测区域name
markLineType: "0",
lanuse:'0',//车道属性类型
guidingtype:'',//车道导向类型
markLineDirect: "",
childUrl: "", //红绿灯区域截图
scale: {}, //红绿灯区域截图放大倍数
lightInfo: {
type: "1",
distribute: "1",
shap: "1",
delay:3
},
roiBody: {},
XMLStr: "",
eventData:[]
};
},
props: ["bgUrl"],
components: {
LightCanvas
},
methods: {
stageInit: function(params) {
console.log("init1");
this.drawState = -1;
this.stage = new Kinetic.Stage({
container: "traficCanvas", //<div>的id
width: 800, //创建的舞台宽度
height: 500 //创建的舞台高度
});
this.shadowLayer = new Kinetic.Layer({
id: "shadowLayer"
});
this.testLayer = new Kinetic.Layer({
id: "testLayer",
name: "layer"
});
this.lineLayer = new Kinetic.Layer({
id: "lineLayer",
name: "layer"
});
this.roadLayer = new Kinetic.Layer({
id: "roadLayer",
name: "layer"
});
this.lightLayer = new Kinetic.Layer({
id: "lightLayer",
name: "layer"
});
this.subtendLayer = new Kinetic.Layer({
id: "subtendLayer",
name: "layer"
});
this.noStopLayer = new Kinetic.Layer({
id: "noStopLayer",
name: "layer"
});
this.bicyLayer = new Kinetic.Layer({ //行人检测区域
id: "bicyLayer",
name: "layer"
});
this.densityLayer = new Kinetic.Layer({//密度
id:'densityLayer',
name:"layer"
});
this.foreignLayer = new Kinetic.Layer({//异物
id:'foreignLayer',
name:"layer"
});
this.testRegionLayer = new Kinetic.Layer({//测试检测区域
id:'testRegionLayer',
name:"layer"
});
let shadow = new Kinetic.Rect({
x: 0, //矩形左上角x坐标
y: 0, //矩形左上角y坐标
width: 800, //矩形的宽度
height: 500, //矩形的高度
fill: "rgba(255,255,255,.2)", //矩形的填充色
stroke: "black", //矩形边缘线的颜色
strokeWidth: 3 //矩形边缘线的宽度
});
let that = this;
this.stage.on("click", function(evt) {
that.stageClick(evt);
});
this.stage.on("dblclick", function(evt) {
if (that.polyline) {
let pos = {
x: evt.evt.offsetX,
y: evt.evt.offsetY
};
that.lineStop(that.layers[1], pos);
that.smallWindow = true;
}
});
this.stage.on("mousemove", function(evt) {
that.stageMouseMove(evt);
});
this.shadowLayer.add(shadow);
this.stage.add(this.shadowLayer);
this.stage.add(this.testLayer);
this.stage.add(this.lineLayer);
this.stage.add(this.roadLayer);
this.stage.add(this.lightLayer);
this.stage.add(this.bicyLayer);
this.stage.add(this.subtendLayer);
this.stage.add(this.noStopLayer);
this.stage.add(this.densityLayer);
this.stage.add(this.foreignLayer);
this.stage.add(this.testRegionLayer)
this.layers = [
this.testLayer,
this.lineLayer,
this.roadLayer,
this.lightLayer,
this.subtendLayer,
this.noStopLayer,
this.bicyLayer,
this.densityLayer,
this.foreignLayer,
this.testRegionLayer
];
},
//还原配置
configInit: function(xml) {
let obj = this.oParse.parseXML(xml).roi;
let that = this;
console.log(obj);
//检测区域
// console.log(obj)
let testAry = obj.flow_roi.flow_region.point;
let testRect = [];
try {
testAry.forEach((ele, index) => {
testRect.push(ele.x * 800);
testRect.push(ele.y * 500);
});
let line = this.drawRect("morePoints", testRect, this.color[0]);
this.testLayer.add(line);
} catch (error) {
console.log(error);
}
//车道线
try {
console.log(obj.lane_line);
let normalLines = obj.lane_line.line;
if (!normalLines.length) {
normalLines = [normalLines];
}
normalLines.forEach(ele => {
let points = ele.points.point;
let lineType = ele.line_type;
let color = "24,0,254";
console.log(lineType);
if (lineType == 1) {
color = "255,255,0";
} else if (lineType == 2) {
color = "255,0,0";
} else if (lineType == 7) {
color = "255,255,255";
} else if (
lineType == 3 ||
lineType == 4 ||
lineType == 5 ||
lineType == 9
) {
color = "0,255,0";
}
let ary = [];
for (let i = 0; i < points.length; i++) {
ary.push(points[i].x * 800);
ary.push(points[i].y * 500);
}
let line = this.drawLine("morePoints", ary, color);
line.line_type = ele.line_type;
if (
line.line_type == 0 ||
line.line_type == 1 ||
line.line_type == 7
) {
this.blueLines.push(line);
}
this.lineLayer.add(line);
});
} catch (e) {
//TODO handle the exception
console.log(e);
}
//车道和行人
if (obj.median_lines.lane_count > 0) {
let ary = obj.median_lines.lane;
if (!ary.length) {
ary = [ary];
}
try {
ary.forEach((ele, index) => {
// if (ele.lane_type == "12") {
// let points = [];
// ele.lane_polygon.point.forEach((ele, index) => {
// points.push(ele.x * 800);
// points.push(ele.y * 500);
// });
// let rect = this.drawRect("morePoints", points, this.color[4]);
// this.bicyLayer.add(rect);
// } else
if (ele.lane_type == "11") {
let points = [];
ele.lane_polygon.point.forEach((ele, index) => {
points.push(ele.x * 800);
points.push(ele.y * 500);
});
let rect = this.drawRect("morePoints", points, this.color[5]);
this.subtendLayer.add(rect);
} else {
let points = ele.line.point;
let group = new Kinetic.Group({ name: "arr" });
let line = this.drawLine(
{ x: points[0].x * 800, y: points[0].y * 500 },
{ x: points[1].x * 800, y: points[1].y * 500 },
this.color[2]
);
this.greenLines[ele.lane_seq - 1] = line;
let cPoints, direct;
if (points[0].y < points[1].y) {
cPoints = [
points[0].x * 800,
points[0].y * 500,
points[1].x * 800,
points[1].y * 500
];
direct = "1";
} else {
cPoints = [
points[1].x * 800,
points[1].y * 500,
points[0].x * 800,
points[0].y * 500
];
direct = "0";
}
this.drawArrow(
[points[0].x * 800, points[0].y * 500],
[points[1].x * 800, points[1].y * 500],
30,
20,
3,
this.color[2],
this.roadLayer,
group,
line
);
let arrs = this.roadLayer.get(".arr");
let arr = arrs[arrs.length - 1];
line.index = ele.lane_no;
let lane_guid_type = 0;
let lane_use = 0;
if(obj.lanes.lane_count == 1){
lane_guid_type = obj.lanes.lane.lane_guiding_type
lane_use = obj.lanes.lane.lane_use_type
} else {
lane_guid_type = obj.lanes.lane[index].lane_guiding_type;
lane_use = obj.lanes.lane[index].lane_use_type
}
this.roads[parseInt(ele.lane_seq - 1)] = {
type: ele.lane_type,
index: ele.lane_no,
direct: direct,
lane_guiding_type: obj.lanes.lane[index].lane_guiding_type,
lane_use_type: obj.lanes.lane[index].lane_use_type
};
}
});
} catch (error) {
console.log(error);
}
}
//红绿灯
try {
let ary = obj.lights.light;
if (!ary.length) {
ary = [ary];
}
ary.forEach((ele, index) => {
let points = ele.light_regions.light_region;
let left = points.left * 800;
let top = points.top * 500;
let right = points.right * 800;
let bottom = points.bottom * 500;
let pointsAry = [left, top, left, bottom, right, bottom, right, top];
let rect = this.drawRect("morePoints", pointsAry, this.color[3]);
let linghtRoi = {
light_region_seq: 1,
top: (top / 500).toFixed(6),
right: (right / 800).toFixed(6),
bottom: (bottom / 500).toFixed(6),
left: (left / 800).toFixed(6)
};
(rect.light_seq = index + 1),
(rect.light_type = ele.light_type),
(rect.light_distribute = ele.light_distribute),
(rect.light_shape = ele.light_shape),
(rect.light_delay = ele.light_yellow_delay||ele.light_yellow_interval),
(rect.light_regions = {
light_region_count: 1,
light_region: linghtRoi
});
this.lightLayer.add(rect);
});
} catch (error) {
console.log(error);
}
//违停区域
let noStopAry = obj.no_stop_region.no_stop_polygon;
console.log(noStopAry);
try {
if (!noStopAry.length) {
noStopAry = [noStopAry];
}
noStopAry.forEach(ele => {
let points = ele.point;
let noStopRect = [];
for (let i = 0; i < points.length; i++) {
const point = points[i];
noStopRect.push(point.x * 800);
noStopRect.push(point.y * 500);
}
let line = this.drawRect("morePoints", noStopRect, this.color[5]);
this.noStopLayer.add(line);
});
} catch (error) {
console.log(error);
}
//行人检测区域
try {
let bicyarr = obj.pedestrian_detection_region.polygon;
if (!bicyarr.length) {
bicyarr = [bicyarr];
}
bicyarr.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[6]);
rect.polygon_name = ele.polygon_name;
rect.polygon_id = ele.polygon_id;
this.bicyLayer.add(rect);
});
} catch (error) {
console.log(error);
}
//行人密度区域
try {
let densityarr = obj.pedestrian_density_region.polygon;
if (!densityarr.length) {
densityarr = [densityarr];
}
densityarr.forEach(ele => {
let points = ele.point;
let densityRect = [];
for (let i = 0; i < points.length; i++) {
const point = points[i];
densityRect.push(point.x * 800);
densityRect.push(point.y * 500);
}
let rect = this.drawRect("morePoints", densityRect, this.color[7]);
rect.polygon_name = ele.polygon_name;
rect.polygon_id = ele.polygon_id;
this.densityLayer.add(rect);
});
} catch (error) {
console.log(error);
}
//异物检测区域
try {
let foreignarr = obj.foreign_detection_region.polygon;
if (!foreignarr.length) {
foreignarr = [foreignarr];
}
foreignarr.forEach(ele => {
let points = ele.point;
let foreignRect = [];
for (let i = 0; i < points.length; i++) {
const point = points[i];
foreignRect.push(point.x * 800);
foreignRect.push(point.y * 500);
}
let rect = this.drawRect("morePoints", foreignRect, this.color[8]);
rect.polygon_name = ele.polygon_name;
rect.polygon_id = ele.polygon_id;
this.foreignLayer.add(rect);
});
} catch (error) {
console.log(error);
}
//测试检测区域
try {
let testarr = obj.test_result_region.polygon;
if (!testarr.length) {
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);
}
this.selectedShape = null;
this.drawRoad();
console.log(this.stage);
this.stage.draw();
},
//切换编辑、添加状态
changeCanvasState: function() {
if (this.canvasState) {
this.cancleSelectedGroup();
}
if (this.drawState == 1) {
this.lineNum = this.blueLines.length + 1;
} else if (this.drawState == 2) {
this.lineNum = this.roads.length + 1;
}
this.selectedShape = null;
this.markLineType = "0";
this.lightInfo.type = "1";
},
//切换配置项
changeLayer: function(index) {
this.cindex = index;
if (this.needRect || this.needLine) {
let shape = this.needRect ? "区域" : "线段";
this.$message({
type: "error",
message: "当前" + shape + "配置未完成"
});
return;
}
if (this.smallWindow) {
this.$message({
type: "error",
message: "当前属性配置未完成"
});
return;
}
this.layers.forEach(ele => {
ele.setVisible(false);
});
if (this.drawState != -1) {
this.cancleSelectedGroup();
}
this.canvasState = 0;
this.polyline = 0;
this.polygon_name = "";
this.polygon_id = "";
var e = e || window.event;
switch (index - 1) {
case -1:
this.layers.forEach(ele => {
ele.setVisible(true);
});
this.drawRoad();
this.stage.draw();
break;
case 1:
this.typeFlag = 1;
this.lineNum = this.blueLines.length + 1 || 1;
break;
case 2:
this.typeFlag = 0;
this.drawRoad();
break;
}
this.drawState = index - 1;
// this.layers[this.drawState].moveToTop()
if (index) {
console.log(this.drawState);
this.layers[this.drawState].setVisible(true);
this.layers[this.drawState].draw();
}
},
//切换直线/折线
polyChang: function() {
if (this.polyline) {
this.markLineType = "9";
} else {
this.markLineType = "0";
}
},
//点击配置区域
stageClick: function(evt) {
if (this.drawState == -1) {
this.$message({
type: "info",
message: "预览模式下无法操作！"
});
return;
}
if (this.canvasState) {
//点中空白区域添加图形
if (this.smallWindow) return;
this.addShape(evt);
} else {
//点击图形选中
this.cancleSelectedGroup();
if (evt.target.className != "Rect") {
let tar = evt.target;
if (this.drawState == "2" && tar.attrs.name != "rect") {
return;
}
this.makeSelectedGroup(tar);
}
}
},
//添加图形
addShape: function(evt) {
let pos = {
x: evt.evt.offsetX,
y: evt.evt.offsetY
};
let layer = this.layers[this.drawState];
switch (this.drawState) {
case 0:
let testRects = layer.get(".rect");
if (testRects.length && !this.needRect) {
this.$message({
type: "error",
message: "只允许设置一个车牌检测区域"
});
return;
}
if (this.needRect) {
this.endChangeShape(evt);
} else {
this.needRect = true;
this.startChangeShape(pos, layer, this.color[this.drawState]);
}
break;
case 1:
if (this.roadFlag) {
this.roadFlag = false;
}
this.startChangeShape(pos, layer, this.color[this.drawState]);
break;
case 3:
if (this.needRect) {
this.endChangeShape(evt);
} else {
this.needRect = true;
this.startChangeShape(pos, layer, this.color[this.drawState]);
}
break;
case 4:
if (this.needRect) {
this.endChangeShape(evt);
} else {
this.needRect = true;
this.startChangeShape(pos, layer, this.color[this.drawState]);
}
break;
case 6:
let rects = layer.get(".rect");
if (rects.length > 1 && !this.needRect) {
this.$message({
type: "error",
message: "只允许设置两个行人检测区域"
});
return;
}
if (this.needRect) {
this.endChangeShape(evt);
} else {
this.needRect = true;
this.startChangeShape(pos, layer, this.color[this.drawState]);
}
break;
case 5:
if (this.needRect) {
this.endChangeShape(evt);
} else {
this.needRect = true;
this.startChangeShape(pos, layer, this.color[this.drawState]);
}
break;
case 7:
if (this.needRect) {
this.endChangeShape(evt);
} else {
this.needRect = true;
this.startChangeShape(pos, layer, this.color[this.drawState]);
}
break;
case 8:
if (this.needRect) {
this.endChangeShape(evt);
} else {
this.needRect = true;
this.startChangeShape(pos, layer, this.color[this.drawState]);
}
break;
case 9:
if (this.needRect) {
this.endChangeShape(evt);
} else {
this.needRect = true;
this.startChangeShape(pos, layer, this.color[this.drawState]);
}
break;
default:
break;
}
},
//改变选中图形样式
makeSelectedGroup: function(shape) {
console.log(shape);
let points = shape.attrs.points;
let lineType = shape.line_type;
let color = this.color[this.drawState];
if (this.drawState == 2) {
this.lineNum = this.roads[shape.roadIndex].index;
this.markLineType = this.roads[shape.roadIndex].type;
this.markLineDirect = this.roads[shape.roadIndex].direct;
this.guidingtype = this.roads[shape.roadIndex].lane_guiding_type;
this.lanuse = this.roads[shape.roadIndex].lane_use_type || '0';
shape.setFill("rgba(" + this.color[1] + ",0.3)");
let gLine = this.greenLines[shape.roadIndex];
if (gLine.getParent().attrs.name == "arr") {
gLine.getParent().destroy();
this.roadLayer.add(gLine);
}
} else {
if (this.drawState == 1) {
let index = this.blueLines.indexOf(shape);
if (lineType == 0) {
color = "0,0,255";
} else if (lineType == 1) {
color = "255,255,0";
} else if (lineType == 2) {
color = "255,0,0";
} else if (lineType == 7) {
color = "255,255,255";
} else {
color = "0,255,0";
}
if (index > -1) {
this.blueLines.splice(index, 1);
} else {
index = this.blueLines.length;
}
this.lineNum = index + 1;
}
for (let i = 0; i < points.length; i += 2) {
const pos = {
x: points[i],
y: points[i + 1]
};
let cir = this.drawCircle(pos, color, 5);
this.layers[this.drawState].add(cir);
}
}
if (this.drawState == 1) {
this.markLineType = shape.line_type;
} else if (this.drawState == 3) {
this.lightInfo = {
type: shape.light_type,
shap: shape.light_shape,
distribute: shape.light_distribute,
delay:shape.light_delay
};
} else if (
this.drawState == 6 ||
this.drawState == 7 ||
this.drawState == 8
) {
this.polygon_name = shape.polygon_name;
this.polygon_id = shape.polygon_id;
}
this.selectedShape = shape;
this.layers[this.drawState].draw();
},
//取消选中图形样式
cancleSelectedGroup: function(isdel) {
if (!this.selectedShape) return;
let cirs = this.layers[this.drawState].get(".circle");
for (let i = 0; i < cirs.length; i++) {
const cir = cirs[i];
cir.destroy();
}
if (this.drawState == 1) {
if (
(this.markLineType == "0" ||
this.markLineType == "1" ||
this.markLineType == "7") &&
!isdel
) {
this.blueLines.splice(this.lineNum - 1, 0, this.selectedShape);
this.lineNum++;
this.roadFlag = false;
}
this.selectedShape.line_type = this.markLineType;
} else if (this.drawState == 2) {
console.log(this.selectedShape);
let road = this.roads[this.selectedShape.roadIndex];
road.type = this.markLineType;
road.index = this.lineNum;
road.lane_use_type = this.lanuse;
road.lane_guiding_type = this.guidingtype;
this.selectedShape.setFill("rgba(255,255,255,0)");
if (this.markLineDirect != undefined) {
road.direct = this.markLineDirect;
road.cPoints = this.sortLinePoints(road.cPoints);
let points;
if (this.markLineDirect == "0") {
points = [
road.cPoints[2],
road.cPoints[3],
road.cPoints[0],
road.cPoints[1]
];
} else {
points = road.cPoints;
}
let line = this.greenLines[this.selectedShape.roadIndex];
let group = new Kinetic.Group({ name: "arr" });
this.drawArrow(
[points[0], points[1]],
[points[2], points[3]],
30,
20,
3,
this.color[2],
this.roadLayer,
group,
line
);
}
} else if (this.drawState == 3) {
this.selectedShape.light_type = this.lightInfo.type;
this.selectedShape.light_shape = this.lightInfo.shap;
this.selectedShape.light_distribute = this.lightInfo.distribute;
this.selectedShape.light_delay = this.lightInfo.delay;
}
this.selectedShape = null;
this.markLineType = "0";
this.lightInfo = {
type: "1",
distribute: "1",
shap: "1",
delay:3
};
this.layers[this.drawState].draw();
},
//开始绘制图形（第一次点击）
startChangeShape: function(pos, layer, col) {
let ary = layer.get(".circle");
if (
this.drawState == 0 ||
this.drawState == 3 ||
this.drawState == 4 ||
this.drawState == 5 ||
this.drawState == 6 ||
this.drawState == 7 ||
this.drawState == 8 ||
this.drawState == 9
) {
let rect = this.drawRect(pos, pos, col);
rect.moveToBottom();
layer.add(rect);
} else {
if (ary.length == 0 && !this.needLine) {
let circle = this.drawCircle(pos, "rgba(255,255,255,.2)");
layer.add(circle);
this.needLine = true;
let line = this.drawLine(pos, pos, col);
this.selectedShape = line;
layer.add(line);
} else {
if (this.polyline) {
let lines = layer.get(".line");
let lastLine = lines[lines.length - 1];
let points = lastLine.attrs.points;
if (points.length >= 4) {
points.push(pos.x);
points.push(pos.y);
}
lastLine.attrs.points = points;
} else {
this.lineStop(layer, pos);
this.smallWindow = true;
}
}
}
layer.draw();
},
//鼠标移动生成线、矩形
stageMouseMove: function(evt) {
if (!this.needLine && !this.needRect) return;
let pos = {
x: evt.evt.offsetX,
y: evt.evt.offsetY
};
let layer = this.layers[this.drawState];
if (this.needLine) {
let lines;
if (this.drawState == 2) {
lines = layer.get(".centerLine");
} else {
lines = layer.get(".line");
}
let points = lines[lines.length - 1].attrs.points;
points[points.length - 2] = pos.x;
points[points.length - 1] = pos.y;
} else if (this.needRect) {
let rects = layer.get(".rect");
let rect = rects[rects.length - 1];
rect.moveToBottom();
rect.attrs.points[3] = pos.y;
rect.attrs.points[4] = pos.x;
(rect.attrs.points[5] = pos.y), pos;
rect.attrs.points[6] = pos.x;
}
layer.draw();
},
//结束一个图形配置
endChangeShape: function(evt) {
evt.cancelBubble = true;
if (!this.needRect) return;
this.needRect = false;
if (this.drawState == 3) {
let layer = this.layers[this.drawState];
let rects = layer.get(".rect");
let rect = rects[rects.length - 1];
let points = rect.attrs.points;
let canvas = document.createElement("canvas");
let img = document.getElementById("pic").childNodes[0];
console.log(img);
let w = Math.abs(points[0] - points[4]);
let h = Math.abs(points[1] - points[5]);
this.scale = {
x: 200 / w,
y: 200 / h
};
console.log(this.scale);
canvas.width = w;
canvas.height = h;
if (points[0] - points[4] > 0 && points[1] - points[5] > 0) {
this.lightShootState = 2;
canvas
.getContext("2d")
.drawImage(img, points[4], points[5], w, h, 0, 0, w, h);
} else if (points[0] - points[4] > 0 && points[1] - points[5] < 0) {
this.lightShootState = 3;
canvas
.getContext("2d")
.drawImage(img, points[6], points[7], w, h, 0, 0, w, h);
} else if (points[0] - points[4] < 0 && points[1] - points[5] > 0) {
this.lightShootState = 1;
canvas
.getContext("2d")
.drawImage(img, points[2], points[3], w, h, 0, 0, w, h);
} else if (points[0] - points[4] < 0 && points[1] - points[5] < 0) {
this.lightShootState = 0;
canvas
.getContext("2d")
.drawImage(img, points[0], points[1], w, h, 0, 0, w, h);
}
console.log(this.lightShootState);
this.typeFlag = 3;
// this.lineTypeShow()
this.smallWindow = true;
let that = this;
this.childUrl = canvas.toDataURL("image/webp");
setTimeout(function() {
that.$refs.lightCanvas.bgUrl = that.childUrl;
that.$refs.lightCanvas.imgSize(w, h);
}, 0);
layer.draw();
}
if (this.drawState == 6 ||
this.drawState == 7 ||
this.drawState == 8) {
this.curLayerstate = true;
}
if(this.drawState == 9){
this.testLayerstate = true;
}
},
lineChange: function name() {
let color = "blue";
if (this.markLineType == 1) {
color = "yellow";
} else if (this.markLineType == 2) {
color = "red";
} else if (this.markLineType == 7) {
color = "white";
} else if (
this.markLineType == 3 ||
this.markLineType == 4 ||
this.markLineType == 5 ||
this.markLineType == 9
) {
color = "rgb(0,255,0)";
}
this.selectedShape.attrs.stroke = color;
this.lineLayer.draw();
},
lineStop: function(layer, pos) {
this.needLine = false;
let start = layer.get(".circle")[0];
let x = start.attrs.x;
let y = start.attrs.y;
start.destroy();
if (this.drawState == 2) {
let group = new Kinetic.Group({
name: "arr"
});
let lines = layer.get(".centerLine");
let line = lines[lines.length - 1];
this.drawArrow(
[x, y],
[pos.x, pos.y],
30,
20,
3,
this.color[2],
layer,
group,
line
);
} else {
layer.draw();
}
},
//行人检测信息/异物检测信息/测试检测区域
bicyEnter() {
let curLayers = this.layers[this.drawState].get(".rect");
let curlay = curLayers[curLayers.length - 1];
curlay.polygon_id = this.polygon_id;
curlay.polygon_name = this.polygon_name;
this.curLayerstate = false;
//测试区域弹窗
this.testLayerstate = false;
//清空输入框
this.polygon_id = "";
this.polygon_name = "";
},
curlayCancel() {
let curLayers = this.layers[this.drawState].get(".rect");
let curlay = curLayers[curLayers.length - 1];
curlay.destroy();
console.log(curlay);
this.selectedShape = null;
this.cancleSelectedGroup();
this.layers[this.drawState].draw();
this.curLayerstate = false;
//测试区域弹窗
this.testLayerstate = false;
//清空输入框
this.polygon_id = "";
this.polygon_name = "";
},
//画圆
drawCircle: function(pos, col, r) {
let size = r || 2;
let circle = new Kinetic.Circle({
x: pos.x,
y: pos.y,
fill: "rgb(" + col + ")",
radius: size,
name: "circle",
draggable: true
});
circle.on("dragmove", evt => {
if (this.canvasState) return;
evt.cancelBubble = true;
this.changeRect(evt);
});
return circle;
},
//画线
drawLine: function(start, end, col, width) {
let points;
if (start === "morePoints") {
points = end;
} else {
points = [start.x, start.y, end.x, end.y];
}
let name = "line";
let size = width || 4;
if (this.drawState == 2 && this.needLine) {
name = "centerLine";
}
let line = new Kinetic.Line({
x: 0,
points: points,
tension: 0,
closed: false,
stroke: "rgb(" + col + ")",
strokeWidth: size,
name: name
});
return line;
},
//画矩形
drawRect: function(start, end, color, boo) {
let points,
isFill = true;
if (boo == false) {
isFill = boo;
}
if (start === "morePoints") {
points = end;
} else {
points = [
start.x,
start.y,
start.x,
end.y,
end.x,
end.y,
end.x,
start.y
];
}
let rect = new Kinetic.Line({
x: 0,
points: points,
// tension: 0.5,
closed: true,
stroke: "rgb(" + color + ")",
strokeWidth: 4,
name: "rect",
fill: isFill ? "rgba(" + color + ",0.3)" : "transparent"
});
return rect;
},
//改变矩形
changeRect: function(evt) {
let rects = evt.target.getParent().get(".rect");
let cirs = evt.target.getParent().get(".circle");
let points = [];
cirs.forEach(ele => {
points.push(ele.attrs.x);
points.push(ele.attrs.y);
});
this.selectedShape.attrs.points = points;
this.layers[this.drawState].draw();
},
//删除图形
delShape: function() {
if (!this.selectedShape) {
return;
}
switch (this.drawState) {
case 1:
if (
this.selectedShape.line_type != 0 &&
this.selectedShape.line_type != 1 &&
this.selectedShape.line_type != 7
) {
let index = this.blueLines.indexOf(this.selectedShape);
this.blueLines.splice(index, 1);
this.lineNum = this.blueLines.length + 1;
}
this.roadFlag = false;
break;
case 2:
let rindex = this.roads.indexOf(this.selectedShape);
console.log(rindex);
this.roads[rindex] = "";
break;
case 6:
this.polygon_name = "";
this.polygon_id = "";
default:
break;
}
this.selectedShape.destroy();
this.cancleSelectedGroup(true);
this.selectedShape = null;
},
//选择线/区域属性弹窗
lineTypeCancel: function() {
if (this.drawState == 3) {
let rects = this.lightLayer.get(".rect");
let rect = rects[rects.length - 1];
rect.destroy();
} else {
this.selectedShape.destroy();
}
this.selectedShape = null;
this.cancleSelectedGroup();
this.layers[this.drawState].draw();
this.smallWindow = false;
},
lineTypeBtn: function() {
this.smallWindow = false;
let layer = this.layers[this.drawState];
if (this.typeFlag == 1) {
let lines = layer.get(".line");
let line = lines[lines.length - 1];
let color = "blue";
line.line_type = this.markLineType;
if (this.markLineType == 1) {
color = "yellow";
} else if (this.markLineType == 2) {
color = "red";
} else if (this.markLineType == 7) {
color = "white";
} else if (
this.markLineType == 3 ||
this.markLineType == 4 ||
this.markLineType == 5 ||
this.markLineType == 9
) {
color = "rgb(0,255,0)";
}
line.attrs.stroke = color;
layer.draw();
if (
this.markLineType == "0" ||
this.markLineType == "1" ||
this.markLineType == "7"
) {
this.blueLines.splice(this.lineNum - 1, 0, lines[lines.length - 1]);
this.lineNum++;
}
} else if (this.typeFlag == 0) {
if (this.roads[this.lineNum - 1]) {
console.log(this.roads[this.lineNum - 1]);
this.roads[this.lineNum - 1].getParent().destroy();
layer.draw();
}
let arrs = layer.get(".arr");
let lastLine = arrs[arrs.length - 1].children[0];
lastLine.line_type = this.markLineType;
lastLine.roadsIndex = this.lineNum - 1;
this.roads[this.lineNum - 1] = lastLine;
this.lineNum++;
} else if (this.typeFlag == 2) {
let that = this;
let rects = layer.get(".rect");
let rect = rects[rects.length - 1];
let points = [];
this.childCirAry.forEach(ele => {
let cir = [];
console.log(this.lightShootState);
switch (this.lightShootState) {
case 0:
cir = [rect.attrs.points[0], rect.attrs.points[1]];
break;
case 1:
cir = [rect.attrs.points[2], rect.attrs.points[3]];
break;
case 2:
cir = [rect.attrs.points[4], rect.attrs.points[5]];
break;
case 3:
cir = [rect.attrs.points[6], rect.attrs.points[7]];
break;
}
let x = parseInt(ele[0] / that.scale.x) + parseInt(cir[0]);
let y = parseInt(ele[1] / that.scale.y) + parseInt(cir[1]);
points.push(x);
points.push(y);
});
console.log(points);
rect.attrs.points = points;
layer.draw();
let length = points;
let top = Math.min(points[1], points[3], points[5], points[7]);
let left = Math.min(points[0], points[2], points[4], points[6]);
let bottom = Math.max(points[1], points[3], points[5], points[7]);
let right = Math.max(points[0], points[2], points[4], points[6]);
let linghtRoi = {
light_region_seq: 1,
top: (top / 500).toFixed(6),
right: (right / 800).toFixed(6),
bottom: (bottom / 500).toFixed(6),
left: (left / 800).toFixed(6)
};
(rect.light_seq = this.lightLayer.get("rect").length + 1),
(rect.light_type = this.lightInfo.type),
(rect.light_distribute = this.lightInfo.distribute),
(rect.light_shape = this.lightInfo.shap),
(rect.light_delay = this.lightInfo.delay),
(rect.light_regions = {
light_region_count: 1,
light_region: linghtRoi
});
this.childCirAry = [];
}
this.markLineType = "0";
this.lightInfo = {
type: "1",
distribute: "1",
shap: "1",
delay:3
};
this.selectedShape = null;
},
//画箭头
drawArrow: function(
c1,
c2,
theta,
headlen,
width,
color,
layer,
group,
line
) {
theta = typeof theta != "undefined" ? theta : 30;
headlen = typeof theta != "undefined" ? headlen : 10;
width = typeof width != "undefined" ? width : 1;
color = typeof color != "color" ? color : "#000";
// 计算各角度和对应的P2,P3坐标
var angle = (Math.atan2(c1[1] - c2[1], c1[0] - c2[0]) * 180) / Math.PI,
angle1 = ((angle + theta) * Math.PI) / 180,
angle2 = ((angle - theta) * Math.PI) / 180,
topX = headlen * Math.cos(angle1),
topY = headlen * Math.sin(angle1),
botX = headlen * Math.cos(angle2),
botY = headlen * Math.sin(angle2);
var arrowX = c1[0] - topX,
arrowY = c1[1] - topY;
// let line = this.drawLine({x:c1[0],y:c1[1]},{x:c2[0],y:c2[1]},color)
line.attrs.name = "centerLine";
arrowX = c2[0] + topX;
arrowY = c2[1] + topY;
let line1 = this.drawLine(
{ x: c2[0], y: c2[1] },
{ x: arrowX, y: arrowY },
color,
3
);
arrowX = c2[0] + botX;
arrowY = c2[1] + botY;
let line2 = this.drawLine(
{ x: c2[0], y: c2[1] },
{ x: arrowX, y: arrowY },
color,
3
);
group.add(line);
group.add(line1);
group.add(line2);
layer.add(group);
layer.draw();
},
//生成车道
drawRoad: function() {
if (this.roadFlag === true) return;
if (this.roadFlag === false) {
this.$alert("车道线有修改，请逐一检查车道属性是否正确", "提示", {
confirmButtonText: "确定"
});
}
let childs = this.roadLayer.children;
//清空层内非中线图形
const num = childs.length - 1;
for (let i = num; i > -1; i--) {
const element = childs[i];
element.destroy();
}
this.roadLayer.draw();
try {
// console.log('蓝色车道线')
// console.log(this.blueLines)
this.blueLines.forEach((ele, index) => {
if(ele.attrs.points[1] - ele.attrs.points[3] > 0) {
var copypoint = Array.from(ele.attrs.points);
ele.attrs.points[0] = copypoint[2]
ele.attrs.points[1] = copypoint[3]
ele.attrs.points[2] = copypoint[0]
ele.attrs.points[3] = copypoint[1]
// console.log('*******蓝色车道线*******')
// 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) => {
let points =this.sortLinePoints(ele.attrs.points);
if (index > 0) {
//绘制车道
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) {
this.roadLayer.add(cLine);
} else if (road.direct == "1") {
this.drawArrow(
[cPoints[0], cPoints[1]],
[cPoints[2], cPoints[3]],
30,
20,
3,
this.color[2],
this.roadLayer,
new Kinetic.Group({ name: "arr" }),
cLine
);
} else if (road.direct == "0") {
this.drawArrow(
[cPoints[2], cPoints[3]],
[cPoints[0], cPoints[1]],
30,
20,
3,
this.color[2],
this.roadLayer,
new Kinetic.Group({ name: "arr" }),
cLine
);
}
}
});
this.roadFlag = true;
} catch (error) {
console.log(error);
}
this.roadLayer.draw();
},
lightNext: function() {
this.childCirAry = this.$refs.lightCanvas.cirAry;
this.typeFlag = 2;
},
lightLast: function() {
this.typeFlag = 3;
let that = this;
setTimeout(function() {
that.$refs.lightCanvas.cirAry = that.childCirAry;
that.$refs.lightCanvas.bgUrl = that.childUrl;
that.$refs.lightCanvas.draw();
}, 0);
},
childCancle: function() {
this.$refs.lightCanvas.cancle();
},
save: function() {
this.cancleSelectedGroup();
//车牌检测区域
let testAry = [];
try {
const testPoints = this.testLayer.get(".rect")[0].attrs.points;
for (let i = 0; i < testPoints.length; i += 2) {
testAry.push({
point_seq: i / 2 + 1,
x: (testPoints[i] / 800).toFixed(6),
y: (testPoints[i + 1] / 500).toFixed(6)
});
}
} catch (error) {}
this.roiBody.flow_roi = {
flow_type: "",
flow_region: {
polygon_point_count: testAry.length,
point: testAry
}
};
//新增新增
this.roiBody.plate_detect_region = {
detect_polygon: {
polygon_point_count: testAry.length,
point: testAry
}
};
//车道线
let lineAry = [];
try {
this.blueLines.forEach((ele, index) => {
let points = ele.attrs.points;
lineAry.push({
line_seq: index + 1,
lane_no: 1,
line_type: ele.line_type,
points: {
point_count: 2,
point: [
{
point_seq: 1,
x: (points[0] / 800).toFixed(6),
y: (points[1] / 500).toFixed(6)
},
{
point_seq: 2,
x: (points[2] / 800).toFixed(6),
y: (points[3] / 500).toFixed(6)
}
]
}
});
});
} catch (error) {
console.log(error);
}
try {
this.lineLayer.get(".line").forEach((ele, index) => {
if (ele.line_type != 0 && ele.line_type != 1 && ele.line_type != 7) {
let points = ele.attrs.points;
let ary = [];
for (let i = 0; i < points.length; i += 2) {
ary.push({
point_seq: i / 2 + 1,
x: (points[i] / 800).toFixed(6),
y: (points[i + 1] / 500).toFixed(6)
});
}
lineAry.push({
line_seq: lineAry.length + 1,
lane_no: 1,
line_type: ele.line_type,
points: {
point_count: points.length / 2,
point: ary
}
});
}
});
} catch (error) {
console.log(error);
}
this.roiBody.lane_line = {
line_count: lineAry.length,
line: lineAry
};
//车道
let roadAry = [];
let lanaAry = [];
console.log(this.roads);
try {
console.log(this.roads);
this.blueLines.forEach((ele, index) => {
if (index != this.blueLines.length - 1) {
let midLine = this.roads[index],
points =
midLine.direct != "1"
? [
midLine.cPoints[2],
midLine.cPoints[3],
midLine.cPoints[0],
midLine.cPoints[1]
]
: midLine.cPoints,
rectPoints1 = this.sortLinePoints(ele.attrs.points),
rectPoints2 = this.sortLinePoints(
this.blueLines[index + 1].attrs.points
);
let options = {
lane_seq: index + 1,
lane_no: midLine.index,
line: {
polygon_point_count: 2,
point: [
{
point_seq: 1,
x: points ? (points[0] / 800).toFixed(6) : "",
y: points ? (points[1] / 500).toFixed(6) : ""
},
{
point_seq: 2,
x: points ? (points[2] / 800).toFixed(6) : "",
y: points ? (points[3] / 500).toFixed(6) : ""
}
]
},
direction_polygon: {
polygon_point_count: 2,
point: [
{
point_seq: 1,
x: points ? (points[0] / 800).toFixed(6) : "",
y: points ? (points[1] / 500).toFixed(6) : ""
},
{
point_seq: 2,
x: points ? (points[2] / 800).toFixed(6) : "",
y: points ? (points[3] / 500).toFixed(6) : ""
}
]
},
lane_polygon: {
polygon_point_count: 4,
point: [
{
point_seq: 1,
x: (rectPoints1[2] / 800).toFixed(6),
y: (rectPoints1[3] / 500).toFixed(6)
},
{
point_seq: 2,
x: (rectPoints1[0] / 800).toFixed(6),
y: (rectPoints1[1] / 500).toFixed(6)
},
{
point_seq: 3,
x: (rectPoints2[0] / 800).toFixed(6),
y: (rectPoints2[1] / 500).toFixed(6)
},
{
point_seq: 4,
x: (rectPoints2[2] / 800).toFixed(6),
y: (rectPoints2[3] / 500).toFixed(6)
}
]
}
};
let linetype = "";
if (midLine.lane_use_type == 0) {
// linetype = this.lanuse;
switch (midLine.lane_guiding_type) {
case "0":
linetype = 2;
break;
case "1":
linetype = 0;
break;
case "2":
linetype = 1;
break;
case "3":
linetype = 3;
break;
case "4":
linetype = 4;
break;
case "5":
linetype = 5;
break;
default:
break;
}
} else if (
midLine.lane_use_type != "" &&
midLine.lane_use_type != 0
) {
// linetype = this.lanuse;
switch (midLine.lane_use_type) {
case "1":
linetype = 8;
break;
case "2":
linetype = 9;
break;
case "3":
linetype = 10;
break;
case "4":
linetype = "";
break;
case "5":
linetype = "";
break;
default:
break;
}
}
options.lane_type = linetype;
roadAry.push(options);
//新增
let L = JSON.stringify(options);
let lanaOptions = JSON.parse(L);
console.log(this.lanuse);
lanaOptions.lane_use_type = midLine.lane_use_type;
lanaOptions.lane_guiding_type = midLine.lane_guiding_type;
lanaOptions.lane_type = linetype;
lanaOptions.lane_user_id = options.lane_no;
lanaOptions.lane_middle_line = {
polygon_point_count: 2,
point1: {
x: points ? (points[0] / 800).toFixed(6) : "",
y: points ? (points[1] / 500).toFixed(6) : ""
},
point2: {
x: points ? (points[2] / 800).toFixed(6) : "",
y: points ? (points[3] / 500).toFixed(6) : ""
}
};
lanaOptions.lane_directions = {
lane_direction_count: "1",
lane_direction: {
lane_direction_type: midLine.direct,
lane_direction_time: "00:00:00-23:59:59"
}
};
lanaAry.push(lanaOptions);
}
});
} catch (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 {
this.subtendLayer.get(".rect").forEach((el, index) => {
let bicAry = [];
let points = el.attrs.points;
for (let i = 0; i < points.length; i += 2) {
bicAry.push({
point_seq: i / 2 + 1,
x: (points[i] / 800).toFixed(6),
y: (points[i + 1] / 500).toFixed(6)
});
}
roadAry.push({
lane_no: 1,
lane_seq: roadAry.length + 1,
lane_type: 11,
lane_polygon: {
polygon_point_count: bicAry.length,
point: bicAry
}
});
lanaAry.push({
lane_no: 1,
lane_seq: roadAry.length + 1,
lane_use_type: 6,
lane_type: 11,
lane_polygon: {
polygon_point_count: bicAry.length,
point: bicAry
}
});
});
} catch (error) {}
// 红绿灯区域
let lightAry = [];
try {
this.lightLayer.get(".rect").forEach((ele, index) => {
lightAry.push({
light_seq: index + 1,
light_type: ele.light_type,
light_id:ele.light_type,
light_distribute: ele.light_distribute,
light_number_type:ele.light_distribute,
light_yellow_delay: Number(ele.light_delay),
light_yellow_interval:Number(ele.light_delay),
light_shape:ele.light_shape,
light_shape_type:ele.light_shape,
light_regions: ele.light_regions,
});
});
} catch (error) {}
this.roiBody.lights = {
light_count: lightAry.length,
light: lightAry
};
//违停区域
let noStopRois = this.noStopLayer.get(".rect");
let noStopAry = [];
try {
noStopRois.forEach((el, index) => {
let points = el.attrs.points;
let ary = [];
for (let i = 0; i < points.length; i += 2) {
ary.push({
point_seq: i / 2 + 1,
x: (points[i] / 800).toFixed(6),
y: (points[i + 1] / 500).toFixed(6)
});
}
noStopAry.push({
polygon_seq: index + 1,
polygon_point_count: ary.length,
point: ary
});
});
} catch (error) {}
this.roiBody.no_stop_region = {
region_count: noStopAry.length,
no_stop_polygon: noStopAry
};
//行人检测区域
let bicArys = [];
try {
this.bicyLayer.get(".rect").forEach((el, index) => {
let bicAry = [];
let points = el.attrs.points;
for (let i = 0; i < points.length; i += 2) {
bicAry.push({
point_seq: i / 2 + 1,
x: (points[i] / 800).toFixed(6),
y: (points[i + 1] / 500).toFixed(6)
});
}
roadAry.push({
lane_no: 1,
lane_seq: roadAry.length + 1,
lane_type: 12,
lane_polygon: {
polygon_point_count: bicAry.length,
point: bicAry
}
});
bicArys.push({
polygon_id: el.polygon_id,
polygon_name: el.polygon_name,
polygon_point_count: bicAry.length,
point: bicAry
});
});
} catch (error) {}
this.roiBody.pedestrian_detection_region = {
region_count: bicArys.length,
polygon: bicArys
};
this.roiBody.median_lines = {
lane_count: roadAry.length ? roadAry.length : 0,
lane: roadAry ? roadAry : []
};
//行人密度检测区域
let densityAry = [];
try {
this.densityLayer.get(".rect").forEach((el, index) => {
let denAry = [];
let points = el.attrs.points;
for (let i = 0; i < points.length; i += 2) {
denAry.push({
point_seq: i / 2 + 1,
x: (points[i] / 800).toFixed(6),
y: (points[i + 1] / 500).toFixed(6)
});
}
densityAry.push({
polygon_id: el.polygon_id,
polygon_name: el.polygon_name,
polygon_point_count: denAry.length,
point: denAry
});
});
} catch (error) {}
this.roiBody.pedestrian_density_region = {
region_count: densityAry.length,
polygon: densityAry
};
//异物检测区域
let foreignAry = [];
try {
this.foreignLayer.get(".rect").forEach((el, index) => {
let foAry = [];
let points = el.attrs.points;
for (let i = 0; i < points.length; i += 2) {
foAry.push({
point_seq: i / 2 + 1,
x: (points[i] / 800).toFixed(6),
y: (points[i + 1] / 500).toFixed(6)
});
}
foreignAry.push({
polygon_id: el.polygon_id,
polygon_name: el.polygon_name,
polygon_point_count: foAry.length,
point: foAry
});
});
} catch (error) {}
this.roiBody.foreign_detection_region = {
region_count: foreignAry.length,
polygon: foreignAry
};
//测试检测区域
let testRegion = [];
try {
this.testRegionLayer.get(".rect").forEach((el, index) => {
let foAry = [];
let points = el.attrs.points;
for (let i = 0; i < points.length; i += 2) {
foAry.push({
point_seq: i / 2 + 1,
x: (points[i] / 800).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
});
});
} catch (error) {}
this.roiBody.test_result_region = {
region_count: foreignAry.length,
polygon: testRegion
};
console.log(this.roiBody);
return this.oParse.writeXML({ roi: this.roiBody });
},
clear: function() {
(this.blueLines = []),
(this.roads = []),
(this.drawState = -1),
(this.smallWindow = false),
(this.roadFlag = ""),
(this.needRect = false),
(this.needLine = false),
(this.canvasState = 0),
(this.polygon_name = ''),
(this.polygon_id = ''),
(this.polyline = 0);
$(".modal-lt button").removeClass("active");
},
sortLinePoints(pointarr){
try{
let newpoint = [];
if((pointarr[1] - pointarr[3]) > 0){
newpoint[0] = pointarr[2]
newpoint[1] = pointarr[3]
newpoint[2] = pointarr[0]
newpoint[3] = pointarr[1]
} else {
newpoint = pointarr
}
return newpoint
}catch(err){
console.log(err)
}
},
changetestid(){
this.eventData.forEach(ele => {
if(ele.value == this.polygon_id){
this.polygon_name = ele.name
}
})
}
},
mounted() {
console.log(eventJson)
this.eventData = eventJson
// this.stageInit()
key('alt+1',()=>{
if(this.istest) {
this.istest = false
} else {
this.istest = true
}
})
}
};
</script>
<style scoped>
button {
cursor: pointer;
}
.modal-title {
float: left;
width: 93%;
overflow: hidden;
}
.modal-body {
height: 540px !important;
}
.modal-lt {
width: 100%;
margin-bottom: 10px;
text-align: center;
overflow: hidden;
}
.modal-lt button {
outline: none;
height: 30px;
line-height: 30px;
float: left;
padding: 0 10px;
border-radius: 15px;
margin: 0 0px 10px 15px;
background: #d7edff;
border: 1px solid rgba(59, 183, 255, 1);
cursor: pointer;
color: #666666;
}
.modal-lt .curmodal {
background: #d7edff !important;
border: 1px solid rgba(59, 183, 255, 1);
color: #3bb7ff;
}
.modal-editbox {
position: relative;
float: right;
min-height: 450px;
width: 22%;
color: #fff;
}
.modal-editbox .modal-lb {
position: absolute;
bottom: 0;
}
.modal-right {
position: relative;
float: left;
text-align: center;
}
.modal-editbox button {
display: block;
margin: 10px;
}
.modal-lb button {
float: left;
width: 90px;
margin-left: 15px;
}
#zone_list button.active {
background: #fff;
color: #3d6797;
}
#line_type {
display: none;
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 340px;
margin-left: -250px;
margin-top: -150px;
z-index: 52;
color: #fff;
text-align: center;
line-height: 35px;
/* background: #409eff; */
background: rgba(1, 20, 51, 0.9);
}
#line_type.active {
display: block;
z-index: 1001;
opacity: 1;
}
#line_type p {
padding: 15px;
font-size: 17px;
font-weight: bold;
}
#line_type input {
width: 150px;
}
el-select {
width: 90px !important;
}
#line_type button {
color: #fff;
margin: 50px 2%;
width: 100px;
height: 35px;
line-height: 35px;
background: #3a51f2f7;
color: #fff;
border: 0;
}
#c1 {
position: absolute;
top: 0;
left: 0;
}
.pic {
position: absolute;
top: 0;
left: 0;
}
.pic img {
width: 800px;
height: 500px;
margin: 0;
padding: 0;
}
canvas {
margin: 0;
padding: 0;
}
.title {
/*background: url('../../../assets/18.png') no-repeat;*/
width: 24%;
height: 70px;
line-height: 50px;
margin: 0;
margin-left: 3.5%;
font-size: 25px;
letter-spacing: 10px;
display: inline-block;
}
.shadow {
display: none;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
width: 100%;
height: 100%;
background: #000;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
ul {
padding: 10px;
}
li {
width: 130px;
text-align: center;
}
.item {
width: 50%;
margin: 10px auto;
}
.item span {
display: inline-block;
width: 28%;
text-align: right;
}
.item div {
display: inline-block;
width: 70%;
}
.w120 {
width: 120px;
}
.mt10 {
margin-top: 10px;
}
.pedestrian-area-attr {
position: fixed;
top: 50%;
left: 50%;
width: 500px;
height: 300px;
margin-left: -250px;
margin-top: -150px;
z-index: 52;
color: #fff;
text-align: center;
line-height: 35px;
}
.pedestrian-area-attr .label {
width: 80px;
}
.pedestrian-area-attr input {
width: 200px !important;
opacity: 0.8;
height: 30px;
line-height: 30px;
border: 0px;
}
.mt40 {
margin-top: 40px;
}
.btn-box button {
height: 30px;
line-height: 30px;
width: 100px;
border: 0;
cursor: pointer;
background: #145b93;
color: #ffffff;
}
.delbtn {
color: #fff;
background: #e5e5e5;
}
</style>
b
src/views/taskManage/back.vue 0 → 100644
<template>
<div class="expande-table-row">
<span class="label">视频源文件</span>
<span class="subtask-info">{{ subTaskData.vchan_name }}</span>
<span class="label">设备地址</span>
<span class="subtask-info">192.178.99.99</span>
<span class="label">已用资源</span>
<span class="subtask-info">22</span>
<span class="label">设备容量</span>
<span class="subtask-info">33</span>
<span class="label">指定设备下发</span>
<span class="subtask-info">
<el-select v-model="assign_id">
<el-option
v-for="(item, index) in freeList"
:key="index"
:value="item.device_id"
>
{{ item.in_ip }}
</el-option>
</el-select>
</span>
<span class="label sub-btn" @click="subMove">确定</span>
</div>
</template>
<script>
export default {
data() {
return {
assign_id: ""
};
},
props: ["subTaskData", "freeList", "taskData"],
methods: {
subMove() {
let taskID = this.taskData.task_id;
let subTaksID = this.subTaskData.subtask_id;
this.$api.task.getTaskParams(taskID, subTaksID).then(res => {
let obj = {};
obj.mtasks = res.mtasks;
obj.assign_to = {
id: this.assign_id,
flag: 0
};
this.subRoi(taskID, subTaksID, obj);
});
},
subRoi(taskid, subtaskid, postObj) {
this.$api.task
.editRoi(taskid, subtaskid, postObj, {
headers: {
authorization: localStorage.getItem("atoken")
}
})
.then(m => {
if (m.ecode == "200") {
this.$message({
message: "设置成功！",
type: "success"
});
}
});
}
},
created() {},
watch: {
subTaskData(val) {
console.log(val);
}
},
mounted() {
this.assign_id = this.subTaskData.assign_id
? this.subTaskData.assign_id
: "";
}
};
</script>
<style lang="scss" scoped>
.expande-table-row {
span {
float: left;
border-bottom: 1px solid #ccc;
overflow: hidden;
}
.label {
width: 6vw;
text-align: center;
border-left: 1px solid $border-color;
background: #f0f0f0;
height: 40px;
line-height: 40px;
}
.subtask-info {
border-left: 1px solid #f0f0f0;
text-align: center;
overflow: hidden;
height: 40px;
line-height: 40px;
}
.subtask-info:nth-child(2) {
width: 9vw;
overflow: hidden;
}
.subtask-info:nth-child(4) {
width: 6vw;
}
.subtask-info:nth-child(6) {
width: 4.5vw;
}
.subtask-info:nth-child(8) {
width: 4vw;
}
.subtask-info:nth-child(10) {
width: 12vw;
}
.sub-btn {
cursor: pointer;
}
}
</style>
src/views/taskManage/editVideo.vue
......@@ -74,7 +74,7 @@
:visible-arrow="false"
>
<span
class="el-icon-copy-document moveIcon"
class="icon-fanxing-qianyi moveIcon"
@click="moveFun(scope.$index, scope.row)"
></span>
</el-tooltip>
......@@ -115,6 +115,7 @@ export default {
user_unid: "",
formData: {},
editData: {},
taskData:{},
setvisible: false,
props: {
id: "vchan_refid",
......@@ -152,6 +153,7 @@ export default {
},
methods: {
showModal(val) {
this.taskData = val;
this.tableData = [];
this.setvisible = true;
this.$store.commit("setocxstate", 1);
......@@ -160,7 +162,6 @@ export default {
let ary = [];
let data = res.list_data;
for (let i in data) {
debugger
if (data[i].vchan) {
data[i].vchan.subtask_id = data[i].subtask_id;
data[i].vchan.refid = data[i].vchan.vchan_refid;
......@@ -199,6 +200,12 @@ export default {
staus = false;
}
},
editTask(data) {
// let data = this.taskData;
this.$api.task.editTask(data, data.task_id).then(res => {
this.$emit("refresh");
});
},
editsubTask(vchan) {
let data = {
is_dome: false,
......@@ -210,6 +217,7 @@ export default {
vchan_name: vchan.name
}
};
this.$api.task.editSubTask(this.editData.task_id, data).then(res => {
this.tableData.push(vchan);
});
......@@ -222,9 +230,12 @@ export default {
.deleteSubTask(this.editData.task_id, data.subtask_id)
.then(res => {
this.tableData.splice(index, 1);
this.checkvckan();
});
if (action != "tree") {
setTimeout(() => {
this.checkvckan();
}, 0);
}
},
append(data) {
......
src/views/taskManage/index.vue
......@@ -74,33 +74,17 @@
ref="table"
style="width: 100%"
@expand-change="expandchange"
:expand-row-keys="rowkey"
>
<el-table-column type="expand">
<template slot-scope="props">
<div
<subTaskInfo
v-for="(item, index) in props.row.subTaskData"
:key="index"
class="expande-table-row"
:subTaskData="item"
:taskData="props.row"
:freeList="freeList"
>
<span class="label">视频源文件</span>
<span class="subtask-info">{{item.vchan_name}}</span>
<span class="label">设备地址</span>
<span class="subtask-info">192.178.99.99</span>
<span class="label">已用资源</span>
<span class="subtask-info">22</span>
<span class="label">设备容量</span>
<span class="subtask-info">33</span>
<span class="label">指定设备下发</span>
<span class="subtask-info">
<el-select v-model="assign_ip">
<el-option v-for="(item,index) in freeList" :key="index" :value="item.in_ip">
{{item.in_ip}}
</el-option>
</el-select>
</span>
<span class="label">确定</span>
</div>
</subTaskInfo>
</template>
</el-table-column>
<el-table-column
......@@ -255,6 +239,7 @@
<script>
import editset from "./editSet";
import editvideo from "./editVideo";
import subTaskInfo from "./subtask.vue";
export default {
data() {
return {
......@@ -263,22 +248,23 @@ export default {
task_algo_type: "",
total: 0,
page: 1,
freeList: [],
pageSize: 30,
setShow: false,
videoShow: false,
editForm: {},
tableData: [],
subTaskData: [],
freeList: [],
pedittype: "add",
currentRow: {},
rowkey: ["1"],
assign_ip: ""
};
},
components: {
editset,
editvideo
editvideo,
subTaskInfo
},
mounted() {
this.getTaskList();
......@@ -297,12 +283,14 @@ export default {
data[i].vchan.subtask_id = data[i].subtask_id;
data[i].vchan.refid = data[i].vchan.vchan_refid;
data[i].vchan.name = data[i].vchan.vchan_name;
data[i].vchan.assign_id = data[i].assign_to ?data[i].assign_to.id : "";
} else {
data.vchan = {
subtask_id: data[i].subtask_id,
refid: "",
vchan_name: data[i].subtask_name,
name: data[i].subtask_name
name: data[i].subtask_name,
assign_id: data[i].assign_id ? data[i].assign_to.id : ""
};
}
ary.push(data[i].vchan);
......@@ -340,6 +328,12 @@ export default {
return "未知";
}
},
getFreelist() {
this.$api.device.getFreelist(this.dev_unid).then(res => {
this.freeList = res.list_data;
});
// /
},
dateFormatter(row, column, cellValue, index) {
let startDate = cellValue ? cellValue.split(" ")[0] : "";
let endDate = row.end_dt ? row.end_dt.split(" ")[0] : "";
......@@ -395,7 +389,7 @@ export default {
this.tableData = [];
} else {
res.list_data.forEach(item => {
item.subTaskData = []
item.subTaskData = [];
if (item.start_dt) {
//先转utc格式
let date = this.$moment.utc(item.start_dt).format();
......@@ -418,12 +412,6 @@ export default {
})
.catch(error => {});
},
getFreelist() {
this.$api.device.getFreelist(this.dev_unid).then(res => {
this.freeList = res.list_data;
});
// /
},
editVideo(index, row) {
this.$refs.editvideo.showModal(row);
},
......@@ -595,38 +583,20 @@ export default {
color: #f2365a;
font-size: 16px;
}
.expande-table-row {
span {
display: inline-block;
}
.label {
width: 6vw;
text-align: center;
border-left: 1px solid $border-color;
background: #f0f0f0;
}
.subtask-info {
border-left: 1px solid #f0f0f0;
text-align: center;
}
.subtask-info:nth-child(2) {
.subtask-info:nth-child(2) {
width: 8vw;
}
.subtask-info:nth-child(4) {
}
.subtask-info:nth-child(4) {
width: 6vw;
}
.subtask-info:nth-child(6) {
}
.subtask-info:nth-child(6) {
width: 4.5vw;
}
.subtask-info:nth-child(8) {
}
.subtask-info:nth-child(8) {
width: 4vw;
}
.subtask-info:nth-child(10) {
}
.subtask-info:nth-child(10) {
width: 12vw;
}
line-height: 40px;
border-bottom: 1px solid #f0f0f0;
}
</style>
src/views/taskManage/subtask.vue
<template>
<div class="expande-table-row">
<span class="label">视频源文件</span>
<span class="subtask-info">{{ subTaskData.vchan_name }}</span>
<span class="label">设备地址</span>
<span class="subtask-info">192.178.99.99</span>
<span class="label">已用资源</span>
<span class="subtask-info">22</span>
<span class="label">设备容量</span>
<span class="subtask-info">33</span>
<span class="label">指定设备下发</span>
<span class="subtask-info">
<el-select v-model="assign_id">
<el-option
v-for="(item, index) in freeList"
:key="index"
:value="item.device_id"
>
{{ item.in_ip }}
</el-option>
</el-select>
</span>
<span class="label sub-btn" @click="subMove">确定</span>
</div>
</template>
<script>
export default {
data() {
return {
assign_id: ""
};
},
props: ["subTaskData", "freeList", "taskData"],
methods: {
subMove() {
let taskID = this.taskData.task_id;
let subTaksID = this.subTaskData.subtask_id;
this.$api.task.getTaskParams(taskID, subTaksID).then(res => {
let obj = {};
obj.mtasks = res.mtasks;
obj.assign_to = {
id: this.assign_id,
flag: 0
};
this.subRoi(taskID, subTaksID, obj);
});
},
subRoi(taskid, subtaskid, postObj) {
this.$api.task
.editRoi(taskid, subtaskid, postObj, {
headers: {
authorization: localStorage.getItem("atoken")
}
})
.then(m => {
if (m.ecode == "200") {
this.$message({
message: "设置成功！",
type: "success"
});
}
});
}
},
created() {},
watch: {
},
mounted() {
this.assign_id = this.subTaskData.assign_id
? this.subTaskData.assign_id
: "";
}
};
</script>
<style lang="scss" scoped>
.expande-table-row {
span {
float: left;
border-bottom: 1px solid #ccc;
overflow: hidden;
}
.label {
width: 6vw;
text-align: center;
border-left: 1px solid $border-color;
background: #f0f0f0;
height: 40px;
line-height: 40px;
}
.subtask-info {
border-left: 1px solid #f0f0f0;
text-align: center;
overflow: hidden;
height: 40px;
line-height: 40px;
}
.subtask-info:nth-child(2) {
width: 9vw;
overflow: hidden;
}
.subtask-info:nth-child(4) {
width: 6vw;
}
.subtask-info:nth-child(6) {
width: 4.5vw;
}
.subtask-info:nth-child(8) {
width: 4vw;
}
.subtask-info:nth-child(10) {
width: 12vw;
}
.sub-btn {
cursor: pointer;
}
}
</style>
src/views/trafficShow/alarmEvent.vue
......@@ -2,12 +2,29 @@
<div class="alarm-event-box">
<el-table :data="tableData" height="30vh">
<el-table-column type="index" align="center" label="#"></el-table-column>
<el-table-column align="center" prop="camername" label="事件地点"></el-table-column>
<el-table-column align="center" prop="illname" label="抓拍类型"></el-table-column>
<el-table-column align="center" prop="illdt" label="发生时间"></el-table-column>
<el-table-column
align="center"
prop="camername"
label="事件地点"
></el-table-column>
<el-table-column
align="center"
prop="illname"
label="抓拍类型"
></el-table-column>
<el-table-column
align="center"
prop="illdt"
label="发生时间"
></el-table-column>
<el-table-column align="center" prop="operation" label="操作">
<template slot-scope="scope">
<el-tooltip content="查看" placement="bottom" effect="light" :visible-arrow="false">
<el-tooltip
content="查看"
placement="bottom"
effect="light"
:visible-arrow="false"
>
<img
src="../../assets/img/home/look.png"
alt
......@@ -16,7 +33,12 @@
/>
</el-tooltip>
<span class="tableSpanBorder"></span>
<el-tooltip content="删除" placement="bottom" effect="light" :visible-arrow="false">
<el-tooltip
content="删除"
placement="bottom"
effect="light"
:visible-arrow="false"
>
<img
src="../../assets/img/home/del.png"
alt
......@@ -34,93 +56,104 @@
export default {
data() {
return {
tableData:[]
}
tableData: []
};
},
methods:{
methods: {
delFun(index, rows) {
rows.splice(index, 1);
},
editVideo(index, rows){
this.$emit('event',rows)
},
editVideo(index, rows) {
this.$emit("event", rows);
}
},
beforeMount(){
beforeMount() {
try {
let that = this;
this.connect_id = new Date().getTime()
this.connect_id = new Date().getTime();
// this.cws = new WebSocket('ws://'+ this.API.IP +'/websocket/v1/integrated/connects/' + this.connect_id)
this.cws = new WebSocket(`ws://${this.$api.wsIP}/websocket/api/v1/datahandle/connects/${this.connect_id}`)
this.cws = new WebSocket(
`ws://${this.$api.wsIP}/websocket/api/v1/datahandle/connects/${this.connect_id}`
);
this.cws.onopen = () =>{
console.log('ws事件推送服务连接成功')
}
this.cws.onopen = () => {
console.log("ws事件推送服务连接成功");
};
//事件断开
this.cws.onclose = () =>{
window.clearTimeout(that.keepAlive)
console.log('ws事件推送服务断开')
that.connect_id = new Date().getTime()
that.cws = new WebSocket(`ws://${this.$api.wsIP}/websocket/api/v1/datahandle/connects/${this.connect_id}`)
this.cws.onclose = () => {
window.clearTimeout(that.keepAlive);
console.log("ws事件推送服务断开");
that.connect_id = new Date().getTime();
that.cws = new WebSocket(
`ws://${this.$api.wsIP}/websocket/api/v1/datahandle/connects/${this.connect_id}`
);
that.keepAlive = setInterval(() => {
let message = {
type: 'request',
type: "request",
id: new Date().getTime(),
mts: new Date().getTime(),
command:'get /websocket/v1/recv_data/connects/' + this.connect_id +'/keep_alive'
}
this.cws.send(JSON.stringify(message))
command:
"get /websocket/v1/recv_data/connects/" +
this.connect_id +
"/keep_alive"
};
this.cws.send(JSON.stringify(message));
}, 20000);
}
};
//事件推送信息
let _this = this;
this.cws.onmessage = (evt) =>{
let data = JSON.parse(evt.data)
this.cws.onmessage = evt => {
let data = JSON.parse(evt.data);
try {
if(data.event_data.illegal.state == 1){
let illname = _this.getCode('违法类型',data.event_data.illegal.code) || '';
let camername = data.event_data.location.name
let dt = this.showLocalTime(data.event_dt).split(' ')[1];
console.log(data.pics[0].src_url)
let pics = data.pics[0].src_url
let pos = data.event_data.location.pos
if (data.event_data.illegal.state == 1) {
let illname =
_this.getCode("违法类型", data.event_data.illegal.code) || "";
let camername = data.event_data.location.name;
let dt = this.showLocalTime(data.event_dt).split(" ")[1];
console.log(data.pics[0].src_url);
let pics = data.pics[0].src_url;
let pos = data.event_data.location.pos;
let obj = {
illname:illname,
illdt:dt,
camername:camername,
pics:pics,
pos:pos
}
if(that.tableData.length > 40) {
that.tableData.pop(obj)
illname: illname,
illdt: dt,
camername: camername,
pics: pics,
pos: pos
};
if (that.tableData.length > 40) {
that.tableData.pop(obj);
} else {
that.tableData.unshift(obj)
that.tableData.unshift(obj);
}
that.tableData.unshift(obj)
} else{
that.tableData.unshift(obj);
}
} catch (error) {
}
if(data.command){
console.log('推送服务连接正常')
} else if(data.type =='response'){
console.log('请求任务推送成功')
console.log(error);
}
if (data.command) {
console.log("推送服务连接正常");
} else if (data.type == "response") {
console.log("请求任务推送成功");
}
};
this.keepAlive = setInterval(() => {
let message = {
type: 'request',
type: "request",
id: new Date().getTime(),
mts: new Date().getTime(),
command:'get /websocket/v1/recv_data/connects/' + this.connect_id +'/keep_alive'
}
this.cws.send(JSON.stringify(message))
command:
"get /websocket/v1/recv_data/connects/" +
this.connect_id +
"/keep_alive"
};
this.cws.send(JSON.stringify(message));
}, 50000);
} catch (error) {
console.log(error);
}
}
};
</script>
<style>
</style>>
\ No newline at end of file
<style></style>>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!