Skip to content

T
traffic-front
Commit 75b19e4c authored by chengcaixia's avatar chengcaixia
Browse files
Options

巡检结果图片增加识别框

parent a21ff579
Hide whitespace changes
Inline Side-by-side
Showing with 61 additions and 13 deletions
src/views/Result.vue
View file @ 75b19e4c
......@@ -112,6 +112,7 @@
label="终止时间戳"
prop="endTime">
</el-table-column>
<el-table-column fixed="right" label="详情" >
<template slot-scope="scope">
......@@ -174,8 +175,9 @@
:title="imgContent"
custom-class="customWidth"
>
<div :style="'height:' + fullHeight + 'px;'">
<img :src="bigImgUrl" width="100%" style="height: 100%;">
<div :style="'height:' + fullHeight + 'px; position: relative;'" ref="mainW">
<img :src="bigImgUrl" ref="BGIMG" width="100%" style="height: 100%;" @load=loadBigImg>
<div class="dash" :style="customStyle" v-if="showRedBox"></div>
</div>
</el-dialog>
</div>
......@@ -271,7 +273,10 @@
.pic_active{
border: 5px solid #1296db;
}
.dash{
position: absolute;
border: 2px #EC292A dashed;
}
</style>
<script>
......@@ -395,7 +400,20 @@ export default {
label: '测速雷达',
value: 805
}
]
],
showRedBox: false,
customStyle: {
top: `${this.positionRight / this.hscale}px`,
left: `${this.positionLeft / this.scale}px`,
width: `${this.positionWidth / this.scale}px`,
height: `${this.positionHeight / this.hscale}px`,
},
positionLeft: '',
positionRight: '',
positionWidth: '',
positionHeight: '',
scale: 0, // 适应比例
hscale: 0,
};
},
mounted() {
......@@ -423,6 +441,19 @@ export default {
},
methods: {
loadBigImg() {
// console.log('---');
this.scale = this.$refs.BGIMG.naturalWidth / this.$refs.mainW.offsetWidth;
this.hscale = this.$refs.BGIMG.naturalHeight / this.$refs.mainW.offsetHeight;
this.customStyle = {
top: `${this.positionRight / this.hscale}px`,
left: `${this.positionLeft / this.scale}px`,
width: `${this.positionWidth / this.scale}px`,
height: `${this.positionHeight / this.hscale}px`,
};
},
getMapBounds(e){
var bounds = e.target.getBounds();
......@@ -488,9 +519,9 @@ export default {
document.getElementById(this.imgs[index].id).scrollIntoView();
this.carPoints.forEach((val, index_) => {
if (index_ === index) {
val.url = val.status == 1 ? require('../assets/img/map-marker_blue.png') : require('../assets/img/jingbao_blue.png');
val.url = val.status == 1 || val.status == 3 ? require('../assets/img/map-marker_blue.png') : require('../assets/img/jingbao_blue.png');
}else{
val.url = val.status == 1 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
val.url = val.status == 1 || val.status == 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
}
});
this.isShow = index;
......@@ -498,28 +529,45 @@ export default {
},
removeclass(index) {
this.carPoints.forEach((val) => {
val.url = val.status == 1 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
val.url = val.status == 1 || val.status == 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
});
this.isShow = -1;
},
showPicture(index){
this.bigImgUrl = this.imgs[index].url;
this.isShowPicture = true;
this.imgContent = this.imgs[index].content;
let vectorData = JSON.parse(this.imgs[index].vector);
if (vectorData && vectorData.location) {
let point = vectorData.location;
if (point.length == 4) {
this.positionLeft = point[0];
this.positionRight = point[1];
this.positionWidth = point[2] - point[0];
this.positionHeight = point[3] - point[1];
this.customStyle = {
top: `${this.positionRight / this.hscale}px`,
left: `${this.positionLeft / this.scale}px`,
width: `${this.positionWidth / this.scale}px`,
height: `${this.positionHeight / this.hscale}px`,
};
}
}
this.showRedBox = true;
this.isShowPicture = true;
},
addActive(index) {
this.carPoints.forEach((val) => {
val.markerAnim = '';
val.url = val.status == 1 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
val.url = val.status == 1 || val.status == 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
});
this.isShow = index;
this.carPoints[index].url = this.carPoints[index].status == 1 ? require('../assets/img/map-marker_blue.png') : require('../assets/img/jingbao_blue.png');
this.carPoints[index].url = this.carPoints[index].status == 1 || this.carPoints[index].status == 3 ? require('../assets/img/map-marker_blue.png') : require('../assets/img/jingbao_blue.png');
this.carPoints[index].markerAnim = 'BMAP_ANIMATION_BOUNCE';
},
removeActive(index) {
this.isShow = -1;
this.carPoints[index].markerAnim = '';
this.carPoints[index].url = this.carPoints[index].status == 1 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
this.carPoints[index].url = this.carPoints[index].status == 1 || this.carPoints[index].status == 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png');
},
handler({BMap, map}) {
console.log(BMap, map);
......@@ -614,8 +662,8 @@ export default {
info.type2 = capital.label;
}
});
this.allPoints.push({lng: result[0], lat: result[1], markerAnim: '', url: info.status == 1 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png'), status: info.status, content: this.no, title: '', titleList: ['资产类型:' + info.type2,'资产状态:' + (info.status == 1 ? '正常' : (info.status == 2 ? '异常' : '新增')), '位置:' + info.position]});
this.allImgs.push({url: '/roadlinks/getCapitalImg?imgPath=' + info.imagePath, content: info.type2 + ' | ' + (info.status == 1 ? '正常' : (info.status == 2 ? '异常' : '新增')) + ' | ' + info.position, number: this.no ,id: 'imageCard' + this.no});
this.allPoints.push({lng: result[0], lat: result[1], markerAnim: '', url: info.status == 1 || info.status == 3 ? require('../assets/img/map-marker_orange.png') : require('../assets/img/jingbao_red.png'), status: info.status, content: this.no, title: '', titleList: ['资产类型:' + info.type2,'资产状态:' + (info.status == 1 ? '正常' : (info.status == 2 ? '异常' : '新增')), '位置:' + info.position]});
this.allImgs.push({url: '/roadlinks/getCapitalImg?imgPath=' + info.imagePath, content: info.info + ' | ' + (info.status == 1 ? '正常' : (info.status == 2 ? '异常' : '新增')) + ' | ' + info.position, number: this.no ,id: 'imageCard' + this.no, vector: info.vector});
}
});
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment