图片 样式修改
This commit is contained in:
parent
b081921d0c
commit
ef027af1a4
|
|
@ -10,7 +10,7 @@ VUE_APP_BASE_API = '/dev-api'
|
|||
|
||||
VUE_APP_ONLYOFFICE_URL = 'http://36.33.26.201:19840'
|
||||
# 图片预览路径
|
||||
VUE_APP_FILE_URL = 'http://192.168.0.108:58089/smartCar/profile'
|
||||
VUE_APP_FILE_URL = 'http://192.168.0.108:8099/smartCar/profile'
|
||||
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ ENV = 'production'
|
|||
VUE_APP_ENV = 'production'
|
||||
VUE_APP_ONLYOFFICE_URL = 'http://36.33.26.201:19840'
|
||||
# 图片预览路径
|
||||
VUE_APP_FILE_URL = 'http://192.168.0.108:58089/smartCar/profile'
|
||||
VUE_APP_FILE_URL = 'http://192.168.0.108:8099/smartCar/profile'
|
||||
|
||||
# 车辆道路监测系统/生产环境
|
||||
VUE_APP_BASE_API = '/smart-car-api'
|
||||
|
|
|
|||
|
|
@ -37,18 +37,18 @@
|
|||
<h3>数据列表</h3>
|
||||
</template>
|
||||
<template slot="carColor" slot-scope="{ data }">
|
||||
<el-tag v-if="data.carColor === '1'" type="success">蓝色</el-tag>
|
||||
<el-tag v-else-if="data.carColor === '2'" type="warning">绿色</el-tag>
|
||||
<el-tag v-if="data.carColor === '1'">蓝色</el-tag>
|
||||
<el-tag v-else-if="data.carColor === '2'" type="success">绿色</el-tag>
|
||||
<el-tag v-else type="info">{{ data.carColor }}</el-tag>
|
||||
</template>
|
||||
<template slot="carType" slot-scope="{ data }">
|
||||
<el-tag v-if="data.carType === '1'" type="success">油车</el-tag>
|
||||
<el-tag v-else-if="data.carType === '2'" type="warning">新能源</el-tag>
|
||||
<el-tag v-if="data.carType === '1'">油车</el-tag>
|
||||
<el-tag v-else-if="data.carType === '2'" type="success">新能源</el-tag>
|
||||
<el-tag v-else type="info">其他</el-tag>
|
||||
</template>
|
||||
<template slot="recognitionPhoto" slot-scope="{ data }">
|
||||
<el-image :src="data.recognitionPhoto || test_image" alt="识别照片" class="recognition-photo"
|
||||
fit="cover" :preview-src-list="previewImageList">
|
||||
<el-image :src="getImageUrl(data.filePath)" alt="识别照片" class="recognition-photo" fit="cover"
|
||||
:preview-src-list="previewImageList">
|
||||
<div slot="error" class="image-error">
|
||||
<i class="el-icon-picture"></i>
|
||||
</div>
|
||||
|
|
@ -92,7 +92,7 @@ export default {
|
|||
}
|
||||
}
|
||||
const defaultTime = getDefaultTimeRange()
|
||||
|
||||
|
||||
return {
|
||||
showSearch: true,
|
||||
columnsList,
|
||||
|
|
@ -142,6 +142,16 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
|
||||
getImageUrl(filePath) {
|
||||
if (filePath) {
|
||||
if (isExternal(filePath)) {
|
||||
return filePath
|
||||
} else {
|
||||
return process.env.VUE_APP_FILE_URL + filePath
|
||||
}
|
||||
}
|
||||
},
|
||||
/** 初始化默认时间范围 */
|
||||
initDefaultTimeRange() {
|
||||
const now = new Date()
|
||||
|
|
@ -259,7 +269,7 @@ export default {
|
|||
/** 导出操作 */
|
||||
handleExport() {
|
||||
const params = { ...this.queryParams }
|
||||
|
||||
|
||||
// 导出时给开始时间添加 :00 秒，结束时间添加 :59 秒
|
||||
if (params.startTime && params.startTime.length === 16) {
|
||||
params.startTime = params.startTime + ':00'
|
||||
|
|
@ -267,17 +277,17 @@ export default {
|
|||
if (params.endTime && params.endTime.length === 16) {
|
||||
params.endTime = params.endTime + ':59'
|
||||
}
|
||||
|
||||
|
||||
// 将参数编码后作为URL参数传递
|
||||
const paramsStr = encodeURIComponent(JSON.stringify(params))
|
||||
const url = `${window.location.origin}${process.env.VUE_APP_ENV === 'production' ? '/smart-car' : ''}/device/data-recognition/export-progress?params=${paramsStr}`
|
||||
|
||||
|
||||
// 计算窗口居中位置
|
||||
const width = 750
|
||||
const height = 500
|
||||
const left = (window.screen.width - width) / 2
|
||||
const top = (window.screen.height - height) / 2
|
||||
|
||||
|
||||
// 打开新窗口（居中显示）
|
||||
window.open(url, '_blank', `width=${width},height=${height},left=${left},top=${top},scrollbars=yes,resizable=yes`)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
<div class="image-grid-container" v-loading="loading">
|
||||
<div v-for="(item, index) in imageList" :key="index" class="image-card">
|
||||
<div class="image-wrapper">
|
||||
<el-image :src="item.imageUrl || test_image" fit="cover" class="detection-image"
|
||||
<el-image :src="item.imageUrl || test_image" fit="contain" class="detection-image"
|
||||
:preview-src-list="previewImageList">
|
||||
<div slot="error" class="image-error">
|
||||
<i class="el-icon-picture"></i>
|
||||
|
|
@ -91,7 +91,20 @@ export default {
|
|||
|
||||
computed: {
|
||||
previewImageList() {
|
||||
return this.imageList.map(item => item.imageUrl).filter(url => url)
|
||||
// 从 imageList 中获取所有图片URL
|
||||
return this.imageList
|
||||
.map(item => {
|
||||
if (item.originalData && item.originalData.filePath) {
|
||||
const filePath = item.originalData.filePath
|
||||
if (isExternal(filePath)) {
|
||||
return filePath
|
||||
} else {
|
||||
return process.env.VUE_APP_FILE_URL + filePath
|
||||
}
|
||||
}
|
||||
return item.imageUrl
|
||||
})
|
||||
.filter(url => url)
|
||||
},
|
||||
},
|
||||
|
||||
|
|
@ -102,6 +115,15 @@ export default {
|
|||
},
|
||||
|
||||
methods: {
|
||||
getImageUrl(filePath) {
|
||||
if (filePath) {
|
||||
if (isExternal(filePath)) {
|
||||
return filePath
|
||||
} else {
|
||||
return process.env.VUE_APP_FILE_URL + filePath
|
||||
}
|
||||
}
|
||||
},
|
||||
/** 初始化默认时间范围 */
|
||||
initDefaultTimeRange() {
|
||||
const now = new Date()
|
||||
|
|
@ -183,7 +205,7 @@ export default {
|
|||
// 映射接口返回的数据到前端使用的格式
|
||||
const list = (res.rows || []).map(item => {
|
||||
// 处理图片路径，默认使用 test_image
|
||||
// let imageUrl = this.test_image
|
||||
let imageUrl = ''
|
||||
if (item.filePath) {
|
||||
if (isExternal(item.filePath)) {
|
||||
imageUrl = item.filePath
|
||||
|
|
|
|||
Loading…
Reference in New Issue