Files
zgty-mas-m/pages/device/deviceBusDailyCheck/detail.vue
2025-11-27 16:12:25 +08:00

139 lines
4.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<up-popup :show="visible" mode="right" closeable @close="handleClose" @open="handleOpen">
<uni-section titleFontSize="18px" type="line" title="设备点检信息"> </uni-section>
<scroll-view scroll-y="true" style="height: 85vh; width: 90vw">
<view class="content">
<up-row class="flex-wrap p10" style="background-color: #f5f7fa">
<up-col class="mb10" :span="gridCol" v-for="(item, index) in detailSchema">
<view style="color: #666"
><span style="color: #333">{{ item.label }}</span>{{ detailInfo[item.value] }}</view
>
</up-col>
</up-row>
<view class="p5">
<view class="pt5"
>备注
<text style="color: #666">
{{ detailInfo.content }}
</text>
</view>
<up-row>
<up-col span="6">
<view class="pt5"
>点检人
<text style="color: #666">
{{ detailInfo.checkUserName }}
</text>
</view>
<view class="pt5"
>点检日期
<text style="color: #666">
{{ detailInfo.checkDate }}
</text>
</view>
</up-col>
<up-col span="6">
<up-album multiple-size="70" single-size="70" :urls="attachment" row-count="4"> </up-album>
</up-col>
</up-row>
</view>
<view>
<up-row class="font-bold" style="background-color: #f5f5f5">
<up-col span="5">点检项目</up-col>
<up-col span="3">检查标准</up-col>
<up-col span="2"> 频次</up-col>
<up-col span="2">是否正常</up-col>
</up-row>
<view class="pt10">
<up-row class="pb10" v-for="(item, index) in detailInfo.maintainItemList" :key="index">
<up-col span="5">
<view class="x-f">
<text class="pl10">
{{ item.itemName }}
</text>
</view>
</up-col>
<up-col span="3">{{ item.standard }}</up-col>
<up-col span="2">{{ item.frequencyRemark }}</up-col>
<up-col span="2">
<u-tag v-if="item.checkResult == '正常'" text="正常" size="mini" type="success" plain plainFill></u-tag>
<u-tag v-else text="不正常" type="error" size="mini" plain plainFill></u-tag>
</up-col>
</up-row>
</view>
<view class="p10"></view>
</view>
</view>
</scroll-view>
</up-popup>
</template>
<script setup>
import { ref, reactive, onMounted, watch, computed } from 'vue'
import { detailSchema } from './dailyCheck.data'
import dailyCheckApi from '@/nx/api/dailyCheck'
import { getImgBaseUrl } from '@/defaultBaseUrl'
import { useGridCol } from '@/nx/hooks/useGridCol'
const { gridCol } = useGridCol([700], [6, 4])
const props = defineProps({
show: {
type: Boolean,
default: false
},
checkInfo: {
type: Object
}
})
const visible = ref(props.show)
// 监听外部传入的show属性变化
watch(
() => props.show,
newVal => {
visible.value = newVal
}
)
let detailInfo = ref({})
const attachment = ref([])
async function getDetailInfo(id) {
const res = await dailyCheckApi.queryById(id)
res.maintainItemList.forEach(item => {
if (item.checkResult == 'false' || !item.checkResult) {
item.checkResult = false
}
if (item.checkResult == 'true') {
item.checkResult = true
}
})
detailInfo.value = res
attachment.value = []
let files = res?.attachment?.split(',') || []
if (files.length > 0) {
attachment.value = files.map(item => getImgBaseUrl() + item)
}
}
const emit = defineEmits(['close', 'open'])
function handleClose() {
emit('close')
}
function handleOpen() {
getDetailInfo(props.checkInfo.id)
}
</script>
<style lang="scss" scoped>
.content {
background-color: #fff;
height: 100%;
padding: 16px;
padding-top: 10px;
font-size: 16px;
}
:deep(.uicon-close) {
font-size: 22px !important;
}
</style>