add:加载载具图片页面

This commit is contained in:
zhangzq
2025-09-19 10:13:12 +08:00
parent 6c10720ea8
commit dd2263626b
2 changed files with 68 additions and 0 deletions

View File

@@ -91,6 +91,8 @@ public class BsrealStorattrController {
public ResponseEntity<Object> getFile(@PathVariable String filename) {
try {
String imagePath = HikvisionSnapshotUtil.path+ DateUtil.thisYear();
//文件名称后缀是jpg具体以实际为准。文件路径是path+当前年份,在存储时也是一样
//文件会存储两份:一个是载具编号.jpg一个是载具编号_任务号.jpg载具编号的图片会进行替换为最新的
Path file = Paths.get(imagePath).resolve(filename+".jpg");
org.springframework.core.io.Resource resource = new UrlResource(file.toUri());
if (resource.exists() && resource.isReadable()) {

View File

@@ -0,0 +1,66 @@
<template>
<div class="image-modal" v-if="visible" @click.self="close">
<div class="demo-image">
<el-image
style="width: 500px; height: 500px"
:src="imageUrl"
></el-image>
</div>
</div>
</template>
<script>
export default {
name: 'ImageModal',
props: {
visible: Boolean,
imageUrl: String
},
methods: {
close() {
this.$emit('update:visible', false);
}
}
};
</script>
<style scoped>
.image-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-content {
position: relative;
max-width: 90%;
max-height: 90%;
}
.modal-content img {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
}
.close {
position: absolute;
top: -40px;
right: 0;
color: white;
font-size: 35px;
font-weight: bold;
cursor: pointer;
}
.close:hover {
color: #ccc;
}
</style>