Commit f31bd281 authored by ninglx's avatar ninglx

添加头盔率 bug集中修改

parent 2e598be6
......@@ -38,7 +38,6 @@ export function initWs(data) {
};
reader.readAsArrayBuffer(res.data);
} else {
console.log('111',res);
if (res.data.startsWith("[") || res.data.startsWith("{")) {
data.callback(JSON.parse(res.data));
}
......
......@@ -55,3 +55,12 @@ export const trackPoints = (data) =>
method: 'get',
params: data
})
// 获取头盔率图片
export const helmetRateImages = (data) =>
request({
url: '/holo/analysis-cross-non-motor/illegal',
method: 'get',
params: data
})
......@@ -990,6 +990,7 @@ export default {
let base64 = chart.getDataURL(opts);
let el = document.createElement("img");
el.src = base64;
console.log('base64',base64);
el.style.width = "100%";
el.style.height = "100%";
el.style.zIndex = 999;
......
<template>
<div class="custom-dialog">
<div class="dialog-main">
<div class="holo-dialog-header">
<div>头盔率拍摄图片</div>
<div><i class="el-icon-close holo-dialog-close" @click="closeDia"></i></div>
<div class="holo-dialog-header">
<div>非机动车佩戴头盔率:{{ helmetRate }}</div>
<div>
<i class="el-icon-close holo-dialog-close" @click="closeDia"></i>
</div>
</div>
<div
class="holo-dialog-container"
element-loading-text="加载图片中,请稍候..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
v-loading="loading"
>
<img
style="height: 100%; width: 100%"
alt="佩戴头盔率图片"
id="holo_helmetImg"
:src="currentHelmetImg"
/>
<div class="to-lastOrNext to-last" @click="getLastImage">
<div class="lastImg img"></div>
</div>
<div class="to-lastOrNext to-next" @click="getNextImage">
<div class="nextImg img"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import { helmetRateImages } from "../../dao/organization";
name: "cameraImage";
export default {
data() {
return {};
return {
currentHelmetImg: "#",
currentPage: 0,
totalPage: 0,
loading: false,
};
},
props: ["timeRange", 'cameraId'],
mounted() {
this.getImage();
},
methods: {
getLastImage() {
if (this.currentPage - 1 < 0) {
ELEMENT.Message("已经是第一张图片!");
return;
}
this.currentPage -= 1;
this.getImage();
},
getNextImage() {
if (this.currentPage + 1 > this.totalPage) {
ELEMENT.Message("已经是最后一张图片!");
return;
}
this.currentPage += 1;
this.getImage();
},
getImage() {
this.loading = true;
helmetRateImages({
cameraId: this.cameraId,
startDate: "2023-10-27 15:00:00",
endDate: "2023-10-27 15:00:00",
page: this.currentPage,
size: 1,
}).then((res) => {
this.loading = false;
this.currentHelmetImg = `data:image/png;base64,${res.content.rows[0].shootImage}`;
this.totalPage = res.content.total;
});
},
closeDia() {
this.$emit("actionFinished");
},
},
computed: {
helmetRate() {
return "98%";
},
},
methods:{
closeDia(){
this.$emit('actionFinished')
}
}
};
</script>
......@@ -37,23 +104,76 @@ export default {
left: 50%;
transform: translateX(-50%);
top: 10vh;
background-color: white;
height: 300px;
width: 500px;
.holo-dialog-header{
height: 40px;
width: 100%;
background-color: aquamarine;
background-color: #2b548c;
border: 1px solid rgba(87, 190, 255, 1);
height: 515px;
width: 850px;
padding: 7px;
.holo-dialog-header {
// height: 40px;
height: 26px;
margin-bottom: 8px;
width: 100%;
display: flex;
font-size: 18px;
font-weight: 700;
align-items: center;
justify-content: space-between;
padding: 0 4px;
font-size: 18px;
font-weight: bold;
color: white;
.holo-dialog-close {
font-size: 22px;
color: rgba(255, 255, 255, 1);
cursor: pointer;
}
.holo-dialog-close:hover {
color: rgba(255, 255, 255, 0.7);
}
}
.holo-dialog-container {
width: 100%;
height: calc(100% - 34px);
background-color: transparent;
position: relative;
.to-lastOrNext {
position: absolute;
top: 0;
height: 100%;
width: 42px;
display: flex;
justify-content: center;
align-items: center;
justify-content: space-between;
padding: 0 10px;
font-size: 18px;
font-weight: bold;
.holo-dialog-close{
font-size: 22px;
cursor: pointer;
cursor: pointer;
.img {
width: 22px;
height: 38px;
}
.lastImg {
background-image: url("../../assets/images/organization/toLast.png");
}
.nextImg {
background-image: url("../../assets/images/organization/toNext.png");
}
}
.to-last {
left: 0;
background-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0.6) 0%,
rgba(0, 0, 0, 0.01) 100%
);
}
.to-next {
right: 0;
background-image: linear-gradient(
90deg,
rgba(0, 0, 0, 0.01) 0%,
rgba(0, 0, 0, 0.6) 100%
);
}
}
}
}
......
......@@ -144,9 +144,7 @@
? (
item.valueList[item.valueList.length - 1] * 100
).toFixed(2)
: item.valueList[item.valueList.length - 1].toFixed(
2
)
: item.valueList[item.valueList.length - 1]
}}<span
v-show="
item.label.includes('率') ||
......@@ -187,6 +185,7 @@
</div>
</div>
<cameraImage
:cameraId="cameraImageProps.cameraId"
@actionFinished="imageDialogShow = false"
v-if="imageDialogShow"
/>
......@@ -214,7 +213,7 @@ import MapTrack from "./mapTrack.vue";
// import { addOrUpdateRoadPolygon } from "../../utils/mapboxTools";
import * as mapTools from "../../utils/mapboxTools";
import mapAssets from "../../config/holo/mapAssets";
import {equip_camera} from '../../dao/situation'
import { equip_camera } from "../../dao/situation";
let bottomMap;
export default {
components: {
......@@ -228,6 +227,7 @@ export default {
},
data() {
return {
cameraImageProps: { cameraId: "" },
imageDialogShow: false,
jinchukouMap: { 2: "进口", 3: "出口" },
dirMap: { 1: "", 2: "", 3: "", 4: "掉头" },
......@@ -748,6 +748,7 @@ export default {
console.log(e.features);
if (e.features.length) {
let prop = e.features[0].properties;
this.cameraImageProps.cameraId = prop.equipIp;
this.imageDialogShow = true;
}
},
......@@ -1001,7 +1002,7 @@ export default {
if (tabName !== "Vehicle") {
this.removeLayer(bottomMap, "roadPolygon");
}
if(tabName !== 'NoVehicle'){
if (tabName !== "NoVehicle") {
this.removeLayer(bottomMap, "camera");
}
},
......
......@@ -17,7 +17,7 @@
</el-button>
</div>
<div class="bottom-content">
<el-input type="textarea" :autosize="{ minRows: 20, maxRows: 40}"
<el-input type="textarea" :autosize="{ minRows: 20, maxRows: 35}"
placeholder="请输入配置内容" style="height:100%;width:100%;"
v-model="dataMap.systemValue"></el-input>
</div>
......
......@@ -239,6 +239,15 @@ export default {
},
created() {},
mounted() {
this.getMapParamsTimer = setInterval(() => {
if (map && map.getCenter()) {
console.log("地图当前视角信息:");
console.log("center : ", [map.getCenter().lng, map.getCenter().lat]);
console.log("zoom : ", map.getZoom());
console.log("pitch : ", map.getPitch());
console.log("bearing : ", map.getBearing());
}
}, 5000);
let queue = [];
let needDicts = [
"CarColor",
......@@ -442,32 +451,28 @@ export default {
// alt + 1/2/3 改变缩放层级
if (event.altKey && (event.keyCode === 49 || event.keyCode === 97)) {
map.flyTo({
zoom: map_config.MAP_ZOOM,
center: center,
bearing: 0,
pitch: map_config.MAP_PITCH,
zoom: map_config.MAP_ZOOM || 14,
center: map_config.MAP_CENTER || [1, 1],
bearing: map_config.MAP_BEARING || 0,
pitch: map_config.MAP_PITCH || 0,
});
this.boxesShow = true;
}
if (event.altKey && (event.keyCode === 50 || event.keyCode === 98)) {
// setInterval(()=>{
// console.log(map.getCenter());
// },1000)
map.flyTo({
zoom: 17.05,
// center: center,
center: [117.09014899567012, 36.643486519747924],
bearing: 0,
pitch: 0,
zoom: map_config.MAP_ZOOM2 || 14,
center: map_config.MAP_CENTER2 || [1, 1],
bearing: map_config.MAP_BEARING || 0,
pitch: map_config.MAP_PITCH2 || 0,
});
this.boxesShow = false;
}
if (event.altKey && (event.keyCode === 51 || event.keyCode === 99)) {
map.flyTo({
zoom: 19.26,
center: center,
bearing: 0,
pitch: map_config.MAP_PITCH,
zoom: map_config.MAP_ZOOM3 || 14,
center: map_config.MAP_CENTER3 || [1, 1],
bearing: map_config.MAP_BEARING || 0,
pitch: map_config.MAP_PITCH3 || 0,
});
this.boxesShow = false;
}
......
......@@ -403,7 +403,7 @@ export default {
},
getEventAlarm() {
eventAlarm().then((res) => {
console.log("事件告警", res.content);
// console.log("事件告警", res.content);
this.warningData = res.content;
if (!this.init) {
if (this.lastWarningData.length !== res.content.length) {
......
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