<template>
|
<div>
|
<el-row type="flex" class="row-bg">
|
<el-col :span="16">
|
<div >
|
<svg style="border: 2px dashed #549b3a;" id="svg" @click="setMousePosClick && getMousePos()" :style="{'pointer-events':setMousePosPointer?'all':'none'}">
|
<g id="svgG" transform="translate(0,0) scale(1)">
|
|
</g>
|
</svg>
|
</div>
|
</el-col>
|
<el-col :span="8" class="grid-content">
|
<div class="rightMain">
|
<textarea style="resize:none;" :style="{'height':(imgForm.imgHeight/3+5)+'px'}" readonly="readonly" rows="" cols="" id="textareaValue">
|
****★日志打印窗口★****
|
</textarea>
|
</div>
|
</el-col>
|
</el-row>
|
|
<el-form ref="form" :model="form" label-width="80px">
|
<el-row style="margin-top: 22px;">
|
<el-col :span="12">
|
<el-form-item label="图片宽度" prop="imgWidth">
|
<el-input-number style="width:350px" v-model="imgForm.imgWidth" :max="1920" :min="200" placeholder="请输入图片宽度"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-button type="success" style="margin-left: 5px;" v-if="!setMousePosClick" @click="setMousePosClick=true">开始绘画轨迹</el-button>
|
<el-button type="success" style="margin-left: 5px;" v-if="setMousePosClick" @click="setMousePosClick=false">结束绘画轨迹</el-button>
|
<el-button type="warning" style="margin-left: 20px;" @click="clearURL">清除轨迹</el-button>
|
</el-col>
|
</el-row>
|
<el-row >
|
<el-col :span="12">
|
<el-form-item label="图片高度" prop="imgWidth">
|
<el-input-number style="width:350px" v-model="imgForm.imgHeight" :max="1080" :min="100" placeholder="请输入图片宽度"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-button style="margin-left: 5px;" type="primary" @click="updateImgSize">确认图片大小</el-button>
|
<el-button style="margin-left: 20px;" type="success" @click="cameraSvgEditorReturn">确认轨迹</el-button>
|
</el-col>
|
</el-row>
|
<el-row >
|
<el-col :span="24">
|
<el-form-item label="轨迹" prop="imgTrailLine">
|
<el-input type="textarea" readonly="readonly" v-model="imgForm.imgTrailLineStr" placeholder="未设置轨迹"/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
</div>
|
</template>
|
|
<script>
|
import * as d3 from '@/utils/svg/d3.js';
|
import {ycslSvgObj} from "@/utils/svg/svgUtils.js";
|
export default {
|
name: "cameraSvgEditor",
|
props: {
|
cameraImgUrl: {
|
default: "",
|
type: String,
|
},
|
cameraImgUrlRedraw: {
|
default: "",
|
type: String,
|
},
|
},
|
data(){
|
return{
|
imgUrl:'',
|
setMousePosClick: false,//控制svg是否可点击插入部件
|
setMousePosPointer: true,//是否允许编辑svg
|
imgForm:{
|
imgWidth: 1920,
|
imgHeight: 1080,
|
imgTrailLine:[],
|
imgTrailLineStr:'',
|
|
},
|
}
|
},
|
watch:{
|
cameraImgUrlRedraw(){
|
this.imgForm.imgTrailLineStr=this.cameraImgUrlRedraw;
|
this.imgForm.imgTrailLine=JSON.parse(this.cameraImgUrlRedraw);
|
this.init()
|
}
|
},
|
created() {
|
if(this.cameraImgUrlRedraw){
|
this.imgForm.imgTrailLineStr=this.cameraImgUrlRedraw;
|
this.imgForm.imgTrailLine=JSON.parse(this.cameraImgUrlRedraw);
|
}
|
},
|
mounted() {
|
this.init();
|
},
|
methods: {
|
|
init() {
|
console.log('this.cameraImgUrlRedraw'+ this.cameraImgUrlRedraw)
|
|
var config = {
|
'svg': 'svg',//必传
|
'svgG': 'svgG',//必传
|
'carArr': this.carArr,
|
'roadArr': this.roadArr,//必传 道路
|
'textArr': this.textArr,//必传 文字
|
'trafficLightsRows': this.trafficLightsRows,//必传 红绿灯
|
'stationRows': this.stationRows,//必传 基站
|
'barrierGateRows': this.barrierGateRows,//必传 道岔
|
'width': (this.imgForm.imgWidth/3)+"",//非必传 默认100%
|
'height': (this.imgForm.imgHeight/3)+"",//非必传 默认100%
|
'isKQYDYSF': false,//编辑界面不允许移动与缩放
|
}
|
ycslSvgObj.init(config);
|
ycslSvgObj.addOrUpdateCameraImg(this.cameraImgUrl,(this.imgForm.imgWidth/3),(this.imgForm.imgHeight/3));
|
this.printConsole("开始初始化显示标点");
|
this.redraw();
|
},
|
updateImgSize(){
|
ycslSvgObj.addOrUpdateCameraImg(this.cameraImgUrl,(this.imgForm.imgWidth/3),(this.imgForm.imgHeight/3));
|
this.imgForm.imgTrailLine=[];
|
this.printConsole("开始重置图片大小,初始化显示标点");
|
this.redraw();
|
},
|
clearURL(){
|
this.imgForm.imgTrailLine=[];
|
this.redraw();
|
this.printConsole("清理标点,初始化显示标点");
|
},
|
getMousePos () {
|
var _this = this;
|
var e = window.event;
|
var nowSvg=document.getElementById("svg");
|
var scrollX = nowSvg.getBoundingClientRect().left;
|
var scrollY = nowSvg.getBoundingClientRect().top;
|
var x = e.clientX - scrollX;
|
var y = e.clientY - scrollY;
|
var newX=(x*3).toFixed(2);
|
var newY=(y*3).toFixed(2);
|
this.imgForm.imgTrailLine.push({'x': newX, 'y': newY});
|
this.printConsole("开始添加第"+this.imgForm.imgTrailLine.length+"个标点");
|
this.redraw();
|
},
|
redraw(){
|
this.imgForm.imgTrailLineStr=JSON.stringify(this.imgForm.imgTrailLine);
|
ycslSvgObj.addOrUpdateCameraRedraw(this.imgForm.imgTrailLine);
|
},
|
//清理控制台
|
clear() {
|
let textareaValue=document.getElementById("textareaValue");
|
textareaValue.innerHTML="";
|
},
|
//输出信息到控制台
|
printConsole(msg) {
|
let textareaValue=document.getElementById("textareaValue");
|
textareaValue.append("\n" + msg);
|
let scrollTop = textareaValue.scrollHeight;
|
textareaValue.scrollTop=scrollTop;
|
},
|
cameraSvgEditorReturn(){
|
this.$emit('cameraSvgEditorReturn',this.imgForm.imgTrailLineStr);
|
},
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
|
|
/* 主区域 */
|
.rightMain {
|
padding-inline: 10px;
|
}
|
|
textarea {
|
line-height:2;
|
height: 550px;
|
width: 100%;
|
background-color:black;
|
text-align: left;
|
padding: 0px 10px 30px 10px;
|
color:#00FF00
|
}
|
|
</style>
|
