290 lines
8.6 KiB
Vue
290 lines
8.6 KiB
Vue
<template>
|
||
<BasicLayout>
|
||
<!-- 巡查记录列表 -->
|
||
<view class="inspection-list">
|
||
<BasicListLayout
|
||
@register="registerInspection"
|
||
style="position: absolute"
|
||
>
|
||
<template v-slot="{ data, index }">
|
||
<view class="inspection-record bg-white r-md p-15 mb-15">
|
||
<view class="record-header">
|
||
<view class="record-time">
|
||
<u-icon name="clock" color="#666" size="14"></u-icon>
|
||
<text class="time-text">{{ formatTime(data.xctime) }}</text>
|
||
</view>
|
||
<view class="record-status">
|
||
<text class="status-text">已巡查</text>
|
||
</view>
|
||
</view>
|
||
<view class="record-content">
|
||
<view class="content-item">
|
||
<text class="item-label">巡查教师：</text>
|
||
<text class="item-value">{{ data.jsxm }}</text>
|
||
</view>
|
||
<view class="content-item flex-col">
|
||
<text class="item-label" style="flex: 0 0 25px"
|
||
>巡查项目：</text
|
||
>
|
||
<view class="item-value" style="width: 100%">
|
||
<template
|
||
v-if="data.xkXcXmList && data.xkXcXmList.length > 0"
|
||
>
|
||
<view
|
||
v-for="(xm, idx) in data.xkXcXmList"
|
||
:key="xm.xcXmId"
|
||
style="margin-bottom: 4px"
|
||
>
|
||
<view>
|
||
<text>{{ idx + 1 }}、{{ xm.xcMc }}</text>
|
||
<view
|
||
style="
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 4px 0;
|
||
"
|
||
>
|
||
<text>分值：{{ xm.xmFz }}分</text>
|
||
<text
|
||
>巡查结果：{{
|
||
xm.xcJg === "A" ? "有" : "无"
|
||
}}</text
|
||
>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-else> 无巡查项目 </template>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="content-item"
|
||
v-if="data.zp && data.zp.length > 0"
|
||
>
|
||
<text class="item-label">巡查图片：</text>
|
||
<view
|
||
class="item-value"
|
||
style="display: flex; flex-wrap: wrap; gap: 8px"
|
||
>
|
||
<image
|
||
v-for="(img, imgIdx) in getImageArray(data.zp)"
|
||
:key="imgIdx"
|
||
:src="imagUrl(img)"
|
||
mode="aspectFill"
|
||
style="
|
||
width: 60px;
|
||
height: 60px;
|
||
border-radius: 4px;
|
||
border: 1px solid #eee;
|
||
cursor: pointer;
|
||
"
|
||
@click="handlePreviewImage(img, getImageArray(data.zp))"
|
||
/>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="content-item"
|
||
v-if="data.sp && data.sp.length > 0"
|
||
>
|
||
<text class="item-label">巡查视频：</text>
|
||
<view
|
||
class="item-value"
|
||
style="display: flex; flex-wrap: wrap; gap: 8px"
|
||
>
|
||
<view
|
||
v-for="(video, vIdx) in getVideoArray(data.sp)"
|
||
:key="vIdx"
|
||
style="
|
||
width: 80px;
|
||
height: 60px;
|
||
position: relative;
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
border: 1px solid #eee;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #000;
|
||
"
|
||
@click="handlePreviewVideo(getVideoArray(data.sp), vIdx)"
|
||
>
|
||
<video
|
||
:src="video"
|
||
style="width: 100%; height: 100%; object-fit: cover"
|
||
:controls="false"
|
||
:show-center-play-btn="false"
|
||
:show-play-btn="false"
|
||
:show-fullscreen-btn="false"
|
||
:show-progress="false"
|
||
:show-mute-btn="false"
|
||
:enable-progress-gesture="false"
|
||
:enable-play-gesture="false"
|
||
:loop="false"
|
||
:muted="true"
|
||
:poster="''"
|
||
></video>
|
||
<view
|
||
style="
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
"
|
||
>
|
||
<u-icon
|
||
name="play-right-fill"
|
||
color="#fff"
|
||
size="28"
|
||
></u-icon>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</BasicListLayout>
|
||
</view>
|
||
</BasicLayout>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { xkXcFindPageApi } from "@/api/base/xkXcApi";
|
||
import BasicLayout from "@/components/BasicLayout/Layout.vue";
|
||
import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
|
||
import { useDataStore } from "@/store/modules/data";
|
||
import { useUserStore } from "@/store/modules/user";
|
||
import { computed, onMounted, ref } from "vue";
|
||
import dayjs from "dayjs";
|
||
import { imagUrl } from "@/utils";
|
||
|
||
const { getJs } = useUserStore();
|
||
const { getData } = useDataStore();
|
||
|
||
const js = computed(() => getJs);
|
||
const xkkc = computed(() => getData);
|
||
|
||
// 巡查记录列表参数
|
||
let inspectionParams = ref({
|
||
rows: 10,
|
||
xkkcId: xkkc.value.id,
|
||
jsId: js.value.id,
|
||
});
|
||
|
||
// 巡查记录列表
|
||
const [registerInspection, { reload }] = useLayout({
|
||
api: xkXcFindPageApi,
|
||
componentProps: {},
|
||
param: inspectionParams.value,
|
||
});
|
||
|
||
// 图片预览
|
||
const handlePreviewImage = (img: string, images: string[]) => {
|
||
// 兼容uni-app的图片预览API
|
||
uni.previewImage({
|
||
current: img,
|
||
urls: images,
|
||
});
|
||
};
|
||
|
||
// 视频预览
|
||
const handlePreviewVideo = (videos: string[], index: number) => {
|
||
// 兼容uni-app的视频预览API
|
||
// uni.previewMedia 仅在H5/小程序/APP支持
|
||
uni.previewMedia({
|
||
current: index,
|
||
sources: videos.map((url) => ({
|
||
url,
|
||
type: "video",
|
||
})),
|
||
});
|
||
};
|
||
|
||
// 格式化时间
|
||
const formatTime = (timestamp: string) => {
|
||
return dayjs(timestamp).format("YYYY-MM-DD HH:mm");
|
||
};
|
||
|
||
// 将逗号分隔的字符串转换为数组
|
||
const getImageArray = (str: string) => {
|
||
if (!str) return [];
|
||
return str.split(",").map((item) => item.trim());
|
||
};
|
||
|
||
// 将逗号分隔的字符串转换为数组
|
||
const getVideoArray = (str: string) => {
|
||
if (!str) return [];
|
||
return str.split(",").map((item) => item.trim());
|
||
};
|
||
|
||
// 页面加载时重新加载巡查记录
|
||
onMounted(() => {
|
||
reload();
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.inspection-list {
|
||
position: relative;
|
||
height: calc(100vh - 50px);
|
||
|
||
.inspection-record {
|
||
.record-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #eee;
|
||
|
||
.record-time {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #666;
|
||
|
||
.time-text {
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
|
||
.record-status {
|
||
padding: 3px 8px;
|
||
border-radius: 4px;
|
||
border: 1px solid #4080ff;
|
||
display: inline-flex;
|
||
font-size: 12px;
|
||
color: #4080ff;
|
||
}
|
||
}
|
||
|
||
.record-content {
|
||
.content-item {
|
||
display: flex;
|
||
margin-bottom: 5px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
|
||
.item-label {
|
||
font-weight: bold;
|
||
flex: 0 0 80px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .zp-loading-fixed {
|
||
position: absolute;
|
||
}
|
||
|
||
::v-deep .d-load-main {
|
||
position: absolute;
|
||
}
|
||
}
|
||
</style>
|