Skip to content

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

巡检结果图片增加识别框

parent a21ff579
Show whitespace changes
Inline Side-by-side
Showing with 61 additions and 13 deletions
src/views/Result.vue
View file @ 75b19e4c
...@@ -112,6 +112,7 @@ ...@@ -112,6 +112,7 @@
label="终止时间戳" label="终止时间戳"
prop="endTime"> prop="endTime">
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="详情" > <el-table-column fixed="right" label="详情" >
<template slot-scope="scope"> <template slot-scope="scope">
...@@ -174,8 +175,9 @@ ...@@ -174,8 +175,9 @@
:title="imgContent" :title="imgContent"
custom-class="customWidth" custom-class="customWidth"
> >
<div :style="'height:' + fullHeight + 'px;'"> <div :style="'height:' + fullHeight + 'px; position: relative;'" ref="mainW">
<img :src="bigImgUrl" width="100%" style="height: 100%;"> <img :src="bigImgUrl" ref="BGIMG" width="100%" style="height: 100%;" @load=loadBigImg>
<div class="dash" :style="customStyle" v-if="showRedBox"></div>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
...@@ -271,7 +273,10 @@ ...@@ -271,7 +273,10 @@
.pic_active{ .pic_active{
border: 5px solid #1296db; border: 5px solid #1296db;
} }
.dash{
position: absolute;
border: 2px #EC292A dashed;
}
</style> </style>
<script> <script>
...@@ -395,7 +400,20 @@ export default { ...@@ -395,7 +400,20 @@ export default {
label: '测速雷达', label: '测速雷达',
value: 805 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() { mounted() {
...@@ -423,6 +441,19 @@ export default { ...@@ -423,6 +441,19 @@ export default {
}, },
methods: { 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){ getMapBounds(e){
var bounds = e.target.getBounds(); var bounds = e.target.getBounds();
...@@ -488,9 +519,9 @@ export default { ...@@ -488,9 +519,9 @@ export default {
document.getElementById(this.imgs[index].id).scrollIntoView(); document.getElementById(this.imgs[index].id).scrollIntoView();
this.carPoints.forEach((val, index_) => { this.carPoints.forEach((val, index_) => {
if (index_ === 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{ }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; this.isShow = index;
...@@ -498,28 +529,45 @@ export default { ...@@ -498,28 +529,45 @@ export default {
}, },
removeclass(index) { removeclass(index) {
this.carPoints.forEach((val) => { 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; this.isShow = -1;
}, },
showPicture(index){ showPicture(index){
this.bigImgUrl = this.imgs[index].url; this.bigImgUrl = this.imgs[index].url;
this.isShowPicture = true;
this.imgContent = this.imgs[index].content; 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) { addActive(index) {
this.carPoints.forEach((val) => { this.carPoints.forEach((val) => {
val.markerAnim = ''; 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.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'; this.carPoints[index].markerAnim = 'BMAP_ANIMATION_BOUNCE';
}, },
removeActive(index) { removeActive(index) {
this.isShow = -1; this.isShow = -1;
this.carPoints[index].markerAnim = ''; 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}) { handler({BMap, map}) {
console.log(BMap, map); console.log(BMap, map);
...@@ -614,8 +662,8 @@ export default { ...@@ -614,8 +662,8 @@ export default {
info.type2 = capital.label; 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.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.type2 + ' | ' + (info.status == 1 ? '正常' : (info.status == 2 ? '异常' : '新增')) + ' | ' + info.position, number: this.no ,id: 'imageCard' + this.no}); 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