101 lines
3.1 KiB
Vue
101 lines
3.1 KiB
Vue
<template>
|
||
<view class="container">
|
||
<uni-section title="异常详情" type="line" class="mb-10" />
|
||
|
||
<uni-card :title="detail.inspectionPoint" :is-shadow="true" @click="onCardClick">
|
||
<uni-row class="row" :width="730">
|
||
<uni-col :span="16">
|
||
<view>
|
||
<text class="uni-body">巡检类型：{{ typeLabel(detail.inspectionType) }}</text>
|
||
</view>
|
||
<view>
|
||
<text class="uni-body">巡检人：{{ detail.inspectorId }}</text>
|
||
</view>
|
||
<view>
|
||
<text class="uni-body">巡检时间：{{ formatDate(detail.inspectionTime) }}</text>
|
||
</view>
|
||
<view>
|
||
<text class="uni-body">备注：{{ detail.remark || '-' }}</text>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="8">
|
||
<view class="thumbs">
|
||
<image v-for="(img,idx) in imageArray(detail.inspectionImg)" :key="idx" :src="imageUrl(img)" mode="aspectFill" class="thumb" @click.stop="preview(img, detail.inspectionImg)" />
|
||
</view>
|
||
</uni-col>
|
||
</uni-row>
|
||
</uni-card>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { getAbnormal } from '@/api/inspection/abnormal.js'
|
||
import { listData } from '@/api/system/dict/data.js'
|
||
import config from '@/config'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
id: null,
|
||
detail: {},
|
||
typeDict: [],
|
||
}
|
||
},
|
||
async onLoad(options) {
|
||
this.id = options?.id || null
|
||
await this.initDict()
|
||
if (this.id) {
|
||
await this.fetchDetail()
|
||
}
|
||
},
|
||
methods: {
|
||
async initDict() {
|
||
const typeData = await listData({ dictType: 'inspection_type' })
|
||
this.typeDict = typeData.rows || []
|
||
},
|
||
typeLabel(val) {
|
||
const item = this.typeDict.find(i => String(i.dictValue) === String(val))
|
||
return item ? item.dictLabel : (val ?? '-')
|
||
},
|
||
async fetchDetail() {
|
||
const res = await getAbnormal(this.id)
|
||
this.detail = res?.data || {}
|
||
},
|
||
imageArray(inspectionImg) {
|
||
if (!inspectionImg) return []
|
||
return inspectionImg.split(',').filter(Boolean)
|
||
},
|
||
imageUrl(path) {
|
||
if (!path) return ''
|
||
return config.baseUrl + path
|
||
},
|
||
preview(current, all) {
|
||
const urls = this.imageArray(all).map(p => this.imageUrl(p))
|
||
uni.previewImage({ current: this.imageUrl(current), urls })
|
||
},
|
||
formatDate(val) {
|
||
if (!val) return ''
|
||
try {
|
||
const d = new Date(val)
|
||
const y = d.getFullYear()
|
||
const m = String(d.getMonth()+1).padStart(2,'0')
|
||
const dd = String(d.getDate()).padStart(2,'0')
|
||
const hh = String(d.getHours()).padStart(2,'0')
|
||
const mm = String(d.getMinutes()).padStart(2,'0')
|
||
const ss = String(d.getSeconds()).padStart(2,'0')
|
||
return `${y}-${m}-${dd} ${hh}:${mm}:${ss}`
|
||
} catch(e) { return val }
|
||
},
|
||
onCardClick(type) {
|
||
// 可按需处理卡片各区域点击，目前不做特殊逻辑
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.container { padding: 10px; }
|
||
.thumbs { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
|
||
.thumb { width: 60px; height: 60px; border-radius: 6px; background: #f5f5f5; }
|
||
.mb-10 { margin-bottom: 10px; }
|
||
</style> |