图片 样式修改

This commit is contained in:
cwchen 2026-01-08 18:05:50 +08:00
parent b081921d0c
commit ef027af1a4
4 changed files with 48 additions and 16 deletions

View File

@ -10,7 +10,7 @@ VUE_APP_BASE_API = '/dev-api'
VUE_APP_ONLYOFFICE_URL = 'http://36.33.26.201:19840' 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 VUE_CLI_BABEL_TRANSPILE_MODULES = true

View File

@ -6,7 +6,7 @@ ENV = 'production'
VUE_APP_ENV = 'production' VUE_APP_ENV = 'production'
VUE_APP_ONLYOFFICE_URL = 'http://36.33.26.201:19840' 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' VUE_APP_BASE_API = '/smart-car-api'

View File

@ -37,18 +37,18 @@
<h3>数据列表</h3> <h3>数据列表</h3>
</template> </template>
<template slot="carColor" slot-scope="{ data }"> <template slot="carColor" slot-scope="{ data }">
<el-tag v-if="data.carColor === '1'" type="success">蓝色</el-tag> <el-tag v-if="data.carColor === '1'">蓝色</el-tag>
<el-tag v-else-if="data.carColor === '2'" type="warning">绿色</el-tag> <el-tag v-else-if="data.carColor === '2'" type="success">绿色</el-tag>
<el-tag v-else type="info">{{ data.carColor }}</el-tag> <el-tag v-else type="info">{{ data.carColor }}</el-tag>
</template> </template>
<template slot="carType" slot-scope="{ data }"> <template slot="carType" slot-scope="{ data }">
<el-tag v-if="data.carType === '1'" type="success">油车</el-tag> <el-tag v-if="data.carType === '1'">油车</el-tag>
<el-tag v-else-if="data.carType === '2'" type="warning">新能源</el-tag> <el-tag v-else-if="data.carType === '2'" type="success">新能源</el-tag>
<el-tag v-else type="info">其他</el-tag> <el-tag v-else type="info">其他</el-tag>
</template> </template>
<template slot="recognitionPhoto" slot-scope="{ data }"> <template slot="recognitionPhoto" slot-scope="{ data }">
<el-image :src="data.recognitionPhoto || test_image" alt="识别照片" class="recognition-photo" <el-image :src="getImageUrl(data.filePath)" alt="识别照片" class="recognition-photo" fit="cover"
fit="cover" :preview-src-list="previewImageList"> :preview-src-list="previewImageList">
<div slot="error" class="image-error"> <div slot="error" class="image-error">
<i class="el-icon-picture"></i> <i class="el-icon-picture"></i>
</div> </div>
@ -92,7 +92,7 @@ export default {
} }
} }
const defaultTime = getDefaultTimeRange() const defaultTime = getDefaultTimeRange()
return { return {
showSearch: true, showSearch: true,
columnsList, columnsList,
@ -142,6 +142,16 @@ export default {
}, },
methods: { methods: {
getImageUrl(filePath) {
if (filePath) {
if (isExternal(filePath)) {
return filePath
} else {
return process.env.VUE_APP_FILE_URL + filePath
}
}
},
/** 初始化默认时间范围 */ /** 初始化默认时间范围 */
initDefaultTimeRange() { initDefaultTimeRange() {
const now = new Date() const now = new Date()
@ -259,7 +269,7 @@ export default {
/** 导出操作 */ /** 导出操作 */
handleExport() { handleExport() {
const params = { ...this.queryParams } const params = { ...this.queryParams }
// :00 :59 // :00 :59
if (params.startTime && params.startTime.length === 16) { if (params.startTime && params.startTime.length === 16) {
params.startTime = params.startTime + ':00' params.startTime = params.startTime + ':00'
@ -267,17 +277,17 @@ export default {
if (params.endTime && params.endTime.length === 16) { if (params.endTime && params.endTime.length === 16) {
params.endTime = params.endTime + ':59' params.endTime = params.endTime + ':59'
} }
// URL // URL
const paramsStr = encodeURIComponent(JSON.stringify(params)) 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 url = `${window.location.origin}${process.env.VUE_APP_ENV === 'production' ? '/smart-car' : ''}/device/data-recognition/export-progress?params=${paramsStr}`
// //
const width = 750 const width = 750
const height = 500 const height = 500
const left = (window.screen.width - width) / 2 const left = (window.screen.width - width) / 2
const top = (window.screen.height - height) / 2 const top = (window.screen.height - height) / 2
// //
window.open(url, '_blank', `width=${width},height=${height},left=${left},top=${top},scrollbars=yes,resizable=yes`) window.open(url, '_blank', `width=${width},height=${height},left=${left},top=${top},scrollbars=yes,resizable=yes`)
}, },

View File

@ -34,7 +34,7 @@
<div class="image-grid-container" v-loading="loading"> <div class="image-grid-container" v-loading="loading">
<div v-for="(item, index) in imageList" :key="index" class="image-card"> <div v-for="(item, index) in imageList" :key="index" class="image-card">
<div class="image-wrapper"> <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"> :preview-src-list="previewImageList">
<div slot="error" class="image-error"> <div slot="error" class="image-error">
<i class="el-icon-picture"></i> <i class="el-icon-picture"></i>
@ -91,7 +91,20 @@ export default {
computed: { computed: {
previewImageList() { 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: { methods: {
getImageUrl(filePath) {
if (filePath) {
if (isExternal(filePath)) {
return filePath
} else {
return process.env.VUE_APP_FILE_URL + filePath
}
}
},
/** 初始化默认时间范围 */ /** 初始化默认时间范围 */
initDefaultTimeRange() { initDefaultTimeRange() {
const now = new Date() const now = new Date()
@ -183,7 +205,7 @@ export default {
// 使 // 使
const list = (res.rows || []).map(item => { const list = (res.rows || []).map(item => {
// 使 test_image // 使 test_image
// let imageUrl = this.test_image let imageUrl = ''
if (item.filePath) { if (item.filePath) {
if (isExternal(item.filePath)) { if (isExternal(item.filePath)) {
imageUrl = item.filePath imageUrl = item.filePath