图片 样式修改
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_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
|
||||||
|
|
|
||||||
|
|
@ -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'
|
||||||
|
|
|
||||||
|
|
@ -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`)
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue