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