feat: 引入mock完成视频分析模块静态交互
parent
d8e35d30a0
commit
d0a2edeb6e
@ -0,0 +1,22 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-03-11 11:29:02
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-08-19 11:39:52
|
||||
* @FilePath: \5G-Loading-Bay-Web\mock\poleMonitor.ts
|
||||
* @Description: 撑杆监测
|
||||
*/
|
||||
import { MockMethod } from "vite-plugin-mock";
|
||||
import { poleMonitorListData, fileListData } from "./pools/commonData";
|
||||
import { fetchCurrPageByList, fetchMockSuccessFullByOther } from "./utils/apiMock";
|
||||
|
||||
export default [
|
||||
{
|
||||
url: "/api/v1/record/generator_result/",
|
||||
method: "post",
|
||||
response: req => {
|
||||
// console.log(req);
|
||||
return {...fetchMockSuccessFullByOther(fileListData)}
|
||||
}
|
||||
}
|
||||
] as MockMethod[];
|
||||
@ -0,0 +1,80 @@
|
||||
/*
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-03-11 11:30:09
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-08-19 17:35:17
|
||||
* @FilePath: \5G-Loading-Bay-Web\mock\pools\poleMonitorData.ts
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
*/
|
||||
import Mock from "mockjs";
|
||||
import { isImage } from "../utils/is";
|
||||
const fileUrls = [
|
||||
"https://t7.baidu.com/it/u=72176654,472254471&fm=193",
|
||||
"https://img2.baidu.com/it/u=1319203967,453193481&fm=253&fmt=auto&app=120&f=JPEG?w=1023&h=685",
|
||||
"https://img2.baidu.com/it/u=1876217523,3868046800&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800",
|
||||
"https://picx.zhimg.com/v2-a8b8217d6aad02940be44a657cb55a99_r.jpg?source=1940ef5c",
|
||||
"https://img0.baidu.com/it/u=108226426,371429720&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500",
|
||||
"https://img1.baidu.com/it/u=967792105,51180745&fm=253&fmt=auto?w=1200&h=800",
|
||||
"https://picx.zhimg.com/v2-026d3f92c9984a21dc217018d3b228a7_r.jpg?source=1def8aca",
|
||||
];
|
||||
const mockListData = Mock.mock({
|
||||
// 生成 10 条数据，可以根据需要调整数量
|
||||
"data|140": [
|
||||
{
|
||||
// 车号，生成随机的 4 位字母和数字组合
|
||||
train_number: /[A-Z0-9]{10}/,
|
||||
// 车型，从预定义的数组中随机选择一个
|
||||
train_model: () => Mock.Random.pick(["轿车", "SUV", "客车", "货车"]),
|
||||
// 车厢号，生成 1 到 10 的随机整数
|
||||
"train_carriage_number|1-10": 1,
|
||||
// 告警类型，从预定义的数组中随机选择一个
|
||||
alarm_type: () =>
|
||||
Mock.Random.pick(["超速告警", "碰撞告警", "低电量告警"]),
|
||||
// 故障类型，从预定义的数组中随机选择一个
|
||||
faultType: () => Mock.Random.pick(["撑杆弯曲", "撑杆断折"]),
|
||||
// 等级，生成 1 到 3 的随机整数
|
||||
"level|1-3": 1,
|
||||
// 复核，随机生成 '是' 或 '否'
|
||||
is_reviewed: () => Mock.Random.pick([true, false]),
|
||||
// 时间，生成过去一个月内的随机日期和时间
|
||||
created_at: () =>
|
||||
Mock.Random.date("yyyy-MM-dd") + " " + Mock.Random.time("HH:mm:ss"),
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const mockFilesData = Mock.mock({
|
||||
[`list|${fileUrls.length}`]: [
|
||||
{
|
||||
"id|+1": 10,
|
||||
key: "@id",
|
||||
name: "@animal",
|
||||
image_url: function () {
|
||||
// 依次取出视频链接
|
||||
const currFile = fileUrls[this.id - 10];
|
||||
return fileUrls[this.id - 10];
|
||||
return null;
|
||||
},
|
||||
created_at: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||
updated_at: '@datetime("yyyy-MM-dd HH:mm:ss")',
|
||||
length: "@float(0.1, 10, 2, 2)",
|
||||
width: "@float(0.1, 10, 2, 2)",
|
||||
height: "@float(0.1, 10, 2, 2)",
|
||||
weight: "@float(0.1, 1000, 1, 2)",
|
||||
volume: function () {
|
||||
return (this.length * this.width * this.height).toFixed(2);
|
||||
},
|
||||
record: 1,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// console.log(mockListData, 'mockListData');
|
||||
const currentData = mockListData.data;
|
||||
const currentFilesData = mockFilesData.list;
|
||||
|
||||
export const fileListData = {
|
||||
data: {
|
||||
data: currentFilesData,
|
||||
},
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 755 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 498 B |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
@ -0,0 +1,169 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-08-14 13:38:30
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-08-19 14:21:29
|
||||
* @FilePath: \5G-Web\src\views\dashboard\components\SwpierMonitor.vue
|
||||
* @Description: 外观、撑杆统一封装轮播图&视频组件
|
||||
-->
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Player from "@/components/videoPlayer/Player.vue";
|
||||
import SwiperPlayer from "./SwiperPlayer.vue";
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import { Navigation, Scrollbar, Mousewheel, Pagination } from "swiper/modules";
|
||||
import "swiper/css";
|
||||
import "swiper/scss";
|
||||
import "swiper/scss/navigation";
|
||||
|
||||
interface Props {
|
||||
value: number;
|
||||
fileList: Record<string, any>[];
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: "update:value", val: boolean): void;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
value: false,
|
||||
fileList: [],
|
||||
});
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
|
||||
const modules = [Navigation, Scrollbar];
|
||||
const activeIndex = ref(-1);
|
||||
const swiperRef = ref(null);
|
||||
const isPlaying = ref<boolean>(false); // 是否播放
|
||||
const currFile = ref<Record<string, any>>({}); // 详情数据
|
||||
|
||||
const togglePlay = () => {
|
||||
isPlaying.value = !isPlaying.value;
|
||||
};
|
||||
|
||||
const handleSlideClick = (index) => {
|
||||
if (activeIndex.value === index) {
|
||||
togglePlay(); // 播放 暂停
|
||||
} else {
|
||||
isPlaying.value = false;
|
||||
emit("update:value", index);
|
||||
currFile.value = props.fileList[index];
|
||||
}
|
||||
};
|
||||
const onSwiper = (swiper) => {
|
||||
swiperRef.value = swiper;
|
||||
console.log("Swiper 实例已获取:", swiper);
|
||||
};
|
||||
const onSlideChange = () => {
|
||||
console.log("slide change");
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.fileList,
|
||||
(newVal) => {
|
||||
currFile.value = newVal?.[0];
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(newVal) => {
|
||||
console.log("swiperFile_newVal", newVal);
|
||||
activeIndex.value = newVal;
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full h-full fg-swiper-file-wrap">
|
||||
<!-- 缩略图区域 -->
|
||||
<div class="flex" v-if="fileList?.length > 0">
|
||||
<div class="thumbnail-container">
|
||||
<!-- //TODO 轮播效果调整 -->
|
||||
<swiper
|
||||
ref="swiperRef"
|
||||
:modules="modules"
|
||||
:slides-per-view="4"
|
||||
:space-between="12"
|
||||
:navigation="true"
|
||||
:scrollbar="{ draggable: false }"
|
||||
:centered-slides="false"
|
||||
:observer="true"
|
||||
:observeParents="true"
|
||||
@swiper="onSwiper"
|
||||
@slideChange="onSlideChange"
|
||||
>
|
||||
<swiper-slide
|
||||
v-for="(file, index) in fileList"
|
||||
:key="index"
|
||||
@click="handleSlideClick(index)"
|
||||
:class="{ 'active-slide': activeIndex === index }"
|
||||
>
|
||||
<img
|
||||
:src="file?.image_url"
|
||||
v-if="file?.image_url"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
<SwiperPlayer
|
||||
class="cursor-pointer"
|
||||
:videoUrl="file?.video_url"
|
||||
v-else-if="file?.video_url"
|
||||
:isPlaying="isPlaying && activeIndex === index"
|
||||
/>
|
||||
<div v-else>
|
||||
<!-- 视频【图片】加载失败 -->
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.fg-swiper-file-wrap {
|
||||
.thumbnail-container {
|
||||
overflow: visible;
|
||||
margin-right: 16px;
|
||||
.swiper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.swiper-slide {
|
||||
img,
|
||||
video {
|
||||
border-radius: 4px;
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.active-slide img,
|
||||
.active-slide video {
|
||||
border-radius: 4px;
|
||||
border: 2px solid #2ecce0;
|
||||
}
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
color: white;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.swiper-button-prev::after,
|
||||
.swiper-button-next::after {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 修改按钮悬停样式 */
|
||||
.swiper-button-prev:hover,
|
||||
.swiper-button-next:hover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,62 @@
|
||||
<!--
|
||||
* @Author: donghao donghao@supervision.ltd
|
||||
* @Date: 2025-08-19 11:04:59
|
||||
* @LastEditors: donghao donghao@supervision.ltd
|
||||
* @LastEditTime: 2025-08-19 11:26:43
|
||||
* @FilePath: \5G-Web\src\components\Swiper\SwiperPlayer.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
-->
|
||||
<template>
|
||||
<div class="flex items-center justify-center w-full h-full position-relative">
|
||||
<video
|
||||
ref="videoRef"
|
||||
:controls="false"
|
||||
muted
|
||||
:src="videoUrl"
|
||||
width="100%"
|
||||
height="148"
|
||||
style="object-fit: cover"
|
||||
@error="handleVideoError"
|
||||
v-if="!isVideoError"
|
||||
></video>
|
||||
<div class="bg_error_img" v-if="isVideoError"></div>
|
||||
<div :class="{ bg_icon: true, playing: isPlaying }" v-if="!isVideoError">
|
||||
<!-- {{ isPlaying }} -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
const props = defineProps<{
|
||||
videoUrl: string;
|
||||
isPlaying: boolean;
|
||||
}>();
|
||||
const videoRef = ref<HTMLVideoElement | null>(null);
|
||||
const isVideoError = ref<boolean>(false);
|
||||
|
||||
const handleVideoError = () => {
|
||||
console.log("handleVideoError");
|
||||
isVideoError.value = true;
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.bg_error_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("@/assets/common/load_file_error.png") no-repeat center center;
|
||||
background-size: 50%;
|
||||
border: 1px dashed red;
|
||||
}
|
||||
|
||||
.bg_icon {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("@/assets/common/player_icon_1.png") no-repeat center center;
|
||||
background-size: 40px;
|
||||
|
||||
&.playing {
|
||||
background: url("@/assets/common/player_icon_2.png") no-repeat center center;
|
||||
background-size: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue