diff --git a/mock/deviceStatus.ts b/mock/deviceStatus.ts index 11f3a50..efb548e 100644 --- a/mock/deviceStatus.ts +++ b/mock/deviceStatus.ts @@ -2,7 +2,7 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2025-03-07 14:57:20 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2025-03-13 14:34:44 + * @LastEditTime: 2025-03-14 15:11:04 * @FilePath: \5G-Loading-Bay-Web\mock\deviceStatus.ts * @Description: 设备状态 */ @@ -33,7 +33,6 @@ export default [ url: "/api/v1/device/device_history/", method: "post", response: req => { - const { page, pageSize } = req.body; // console.log(req); return {...fetchMockSuccessFullByOther(deviceHistoryListData)} } diff --git a/mock/poleMonitor.ts b/mock/poleMonitor.ts index e9c45c5..49e3483 100644 --- a/mock/poleMonitor.ts +++ b/mock/poleMonitor.ts @@ -2,13 +2,13 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2025-03-11 11:29:02 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2025-03-11 11:39:31 + * @LastEditTime: 2025-03-14 15:10:47 * @FilePath: \5G-Loading-Bay-Web\mock\poleMonitor.ts * @Description: 撑杆监测 */ import { MockMethod } from "vite-plugin-mock"; -import { poleMonitorListData } from "./pools/poleMonitorData"; -import { fetchCurrPageByList } from "./utils/apiMock"; +import { poleMonitorListData, fileListData } from "./pools/poleMonitorData"; +import { fetchCurrPageByList, fetchMockSuccessFullByOther } from "./utils/apiMock"; export default [ { @@ -28,5 +28,13 @@ export default [ }) }; } + }, + { + url: "/api/v1/record/record_detail_list/", + method: "post", + response: req => { + // console.log(req); + return {...fetchMockSuccessFullByOther(fileListData)} + } } ] as MockMethod[]; \ No newline at end of file diff --git a/mock/pools/poleMonitorData.ts b/mock/pools/poleMonitorData.ts index 8e4e463..c858676 100644 --- a/mock/pools/poleMonitorData.ts +++ b/mock/pools/poleMonitorData.ts @@ -2,43 +2,96 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2025-03-11 11:30:09 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2025-03-11 14:37:36 + * @LastEditTime: 2025-03-14 15:18:42 * @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 Mock from "mockjs"; +// const images = [ +// 'https://picsum.photos/300/200?random=1', +// 'https://picsum.photos/300/200?random=2', +// 'https://picsum.photos/300/200?random=3', +// 'https://picsum.photos/300/200?random=4', +// 'https://picsum.photos/300/200?random=5' +// ]; +const videoUrls = [ + "https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4", + "https://www.sample-videos.com/video123/mp4/1080/big_buck_bunny_1080p_100mb.mp4", + "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", + "https://www.sample-videos.com/video123/mp4/360/big_buck_bunny_360p_5mb.mp4", + "https://media.w3.org/2010/05/video/movie_300.mp4", + "https://www.w3schools.com/html/mov_bbb.mp4", + "https://media.w3.org/2010/05/sintel/trailer.mp4", + "https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4", + "https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4", + "https://archive.org/download/Sita_Sings_the_Blues/Sita_Sings_the_Blues_small.mp4", +]; +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 mockData = Mock.mock({ - // 生成 10 条数据，可以根据需要调整数量 - 'data|140': [ - { - // 车号，生成随机的 4 位字母和数字组合 - 'carNo': /[A-Z0-9]{4}/, - // 车型，从预定义的数组中随机选择一个 - 'carType': () => Mock.Random.pick(['轿车', 'SUV', '客车', '货车']), - // 车厢号，生成 1 到 10 的随机整数 - 'carriageNo|1-10': 1, - // 告警类型，从预定义的数组中随机选择一个 - 'warnType': () => Mock.Random.pick(['超速告警', '碰撞告警', '低电量告警']), - // 故障类型，从预定义的数组中随机选择一个 - 'faultType': () => Mock.Random.pick(['电路故障', '机械故障', '传感器故障']), - // 等级，生成 1 到 3 的随机整数 - 'level|1-3': 1, - // 复核，随机生成 '是' 或 '否' - 'review': () => Mock.Random.pick(['是', '否']), - // 时间，生成过去一个月内的随机日期和时间 - 'date': () => Mock.Random.date('yyyy-MM-dd') + ' ' + Mock.Random.time('HH:mm:ss') - } - ] +const mockFilesData = Mock.mock({ + [`list|${videoUrls.length}`]: [ + { + "id|+1": 10, + key: "@id", + name: "@animal", + video_url: function () { + // 依次取出视频链接 + return videoUrls[this.id - 10]; + }, + image_url: 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(mockData, 'mockData'); -const currentData = mockData.data; + +// console.log(mockListData, 'mockListData'); +const currentData = mockListData.data; +const currentFilesData = mockFilesData.list; + export const poleMonitorListData = { data: { list: currentData, total: currentData.length, page: 1, - pageSize: 10 - } + pageSize: 10, + }, +}; + +export const fileListData = { + data: { + data: currentFilesData + }, }; diff --git a/src/assets/common/load_file_error.png b/src/assets/common/load_file_error.png new file mode 100644 index 0000000..2f26e27 Binary files /dev/null and b/src/assets/common/load_file_error.png differ diff --git a/src/assets/common/player_icon_1.png b/src/assets/common/player_icon_1.png new file mode 100644 index 0000000..a453f2f Binary files /dev/null and b/src/assets/common/player_icon_1.png differ diff --git a/src/assets/common/player_icon_2.png b/src/assets/common/player_icon_2.png new file mode 100644 index 0000000..082186a Binary files /dev/null and b/src/assets/common/player_icon_2.png differ diff --git a/src/components/videoPlayer/Player.vue b/src/components/videoPlayer/Player.vue index 821d18a..6f4bcf8 100644 --- a/src/components/videoPlayer/Player.vue +++ b/src/components/videoPlayer/Player.vue @@ -2,7 +2,7 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2025-03-12 13:48:31 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2025-03-13 15:01:16 + * @LastEditTime: 2025-03-14 16:37:49 * @FilePath: \5G-Loading-Bay-Web\src\components\videoPlayer\player.vue * @Description: 视频播放器 --> @@ -11,7 +11,7 @@
@@ -21,6 +21,9 @@
+
+ +
@@ -54,9 +57,14 @@ const emit = defineEmits<{ }>() const videoRef = ref(null) -const loading = ref(false) +const loading = ref(false) +const isVideoError = ref(false); + let currentDuration = 0 + + + // 监听播放状态变化 watch(() => props.isPlaying, (newVal) => { if (!videoRef.value) return @@ -66,6 +74,7 @@ watch(() => props.isPlaying, (newVal) => { // 监听视频源变化 watch(() => props.src, (newVal) => { if (!videoRef.value) return + isVideoError.value = false videoRef.value.pause() videoRef.value.src = newVal videoRef.value.load() @@ -97,6 +106,11 @@ const handleLoadedMetadata = () => { emit('update:duration', currentDuration) } +const handleVideoError = () => { + console.log('handleVideoError') + isVideoError.value = true; +}; + // 播放状态处理 const handlePlay = () => emit('play') const handlePause = () => emit('pause') @@ -107,6 +121,7 @@ const handleCanPlay = () => loading.value = false onMounted(() => { + console.log('onMounted', props.src) if (videoRef.value) { videoRef.value.src = props.src } @@ -140,8 +155,24 @@ defineExpose({ .video-player-box { position: relative; width: 100%; + height: 100%; margin: 0 auto; + .bg_error_img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 99999999; + background-color: #090F48; + background-image: url("@/assets/common/load_file_error.png"); + background-position: center; + background-repeat: no-repeat; + background-size: 50%; + border: 1px dashed red; + } + .video-element { width: 100%; height: auto; diff --git a/src/views/dashboard/PoleMonitor.scss b/src/views/dashboard/PoleMonitor.scss index b649619..6de28d5 100644 --- a/src/views/dashboard/PoleMonitor.scss +++ b/src/views/dashboard/PoleMonitor.scss @@ -25,12 +25,23 @@ } .pole-monitor-main { .left-panel { + width: 870px; + margin-right: 16px; + &.empty-bg { + background-image: url("@/assets/common/emptyBg.png"); + background-size: 312px 204px; + background-position: center; + background-repeat: no-repeat; + } .main-image { box-sizing: border-box; - min-height: 511px; + height: 511px; position: relative; background-color: #090F48; border-radius: 4px; + .video-screen{ + height: calc(100% - 52px); + } // img { // width: 100%; // max-height: 460px; @@ -60,6 +71,7 @@ .swiper-slide { width: 20%; border-radius: 4px; + height: 144px; img { width: 100%; height: 144px; diff --git a/src/views/dashboard/PoleMonitor.vue b/src/views/dashboard/PoleMonitor.vue index 2b65536..efca17b 100644 --- a/src/views/dashboard/PoleMonitor.vue +++ b/src/views/dashboard/PoleMonitor.vue @@ -1,11 +1,3 @@ -