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>
|