From 9f0ff58efa67a3ab283b0e44b8685b7016f4f872 Mon Sep 17 00:00:00 2001 From: donghao Date: Thu, 13 Mar 2025 17:41:54 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8E=86=E5=8F=B2=E8=A7=86=E9=A2=91?= =?UTF-8?q?=E5=BC=B9=E7=AA=97=E4=BA=A4=E4=BA=92=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mock/deviceStatus.ts | 17 +- mock/pools/deviceStatusData.ts | 123 ++++++++- mock/utils/apiMock.ts | 28 +- package.json | 1 + pnpm-lock.yaml | 8 + src/assets/common/pause_icon.png | Bin 0 -> 876 bytes src/components/videoPlayer/Player.vue | 172 +++++++++++- src/utils/array.ts | 32 +++ src/utils/request/instance.ts | 10 +- src/views/dashboard/DeviceStatus.vue | 34 ++- .../components/HistoryVideoModal.vue | 258 +++++++++++++++++- .../dashboard/components/RealVideoModal.vue | 18 +- src/views/login/Login.vue | 6 +- 13 files changed, 661 insertions(+), 46 deletions(-) create mode 100644 src/assets/common/pause_icon.png create mode 100644 src/utils/array.ts diff --git a/mock/deviceStatus.ts b/mock/deviceStatus.ts index 8bbfac1..11f3a50 100644 --- a/mock/deviceStatus.ts +++ b/mock/deviceStatus.ts @@ -2,17 +2,17 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2025-03-07 14:57:20 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2025-03-07 15:10:10 + * @LastEditTime: 2025-03-13 14:34:44 * @FilePath: \5G-Loading-Bay-Web\mock\deviceStatus.ts * @Description: 设备状态 */ import { MockMethod } from "vite-plugin-mock"; -import { deviceStatusListData } from "./pools/deviceStatusData"; -import { fetchCurrPageByList } from "./utils/apiMock"; +import { deviceStatusListData, deviceHistoryListData } from "./pools/deviceStatusData"; +import { fetchCurrPageByList, fetchMockSuccessFullByOther } from "./utils/apiMock"; export default [ { - url: "/api/getDeviceStatusList", + url: "/api/v1/device/device/", method: "post", response: req => { const { page, pageSize } = req.body; @@ -28,5 +28,14 @@ export default [ }) }; } + }, + { + url: "/api/v1/device/device_history/", + method: "post", + response: req => { + const { page, pageSize } = req.body; + // console.log(req); + return {...fetchMockSuccessFullByOther(deviceHistoryListData)} + } } ] as MockMethod[]; \ No newline at end of file diff --git a/mock/pools/deviceStatusData.ts b/mock/pools/deviceStatusData.ts index d5b17cd..41a8366 100644 --- a/mock/pools/deviceStatusData.ts +++ b/mock/pools/deviceStatusData.ts @@ -2,7 +2,7 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2024-02-22 13:38:04 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2025-03-07 15:07:28 + * @LastEditTime: 2025-03-13 14:35:20 * @FilePath: \General-AI-Platform-Web-Client\mock\pools\deviceStatusData.ts * @Description: 设备状态数据 */ @@ -46,13 +46,130 @@ function fetchList(): Record[] { // 告警代码MSRF-0 RL0F HTFIF-02 TLOC-1 E1AIS-05 // 设备组：核心检测组001 无尘总装组005 送料监测线02 +const mockHistroyData = [ + { + id: 10, + key: "10", + video_url: "https://www.w3schools.com/html/mov_bbb.mp4", + created_at: "2025-03-12 14:53:36", + device: 1 + }, + { + id: 11, + key: "11", + video_url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4", + created_at: "2025-03-12 15:20:15", + device: 1 + }, + { + id: 12, + key: "12", + video_url: "https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4", + created_at: "2025-03-13 09:45:22", + device: 1 + }, + { + id: 20, + key: "10", + video_url: "https://www.w3schools.com/html/mov_bbb.mp4", + created_at: "2025-03-12 14:53:36", + device: 1 + }, + { + id: 21, + key: "11", + video_url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4", + created_at: "2025-03-12 15:20:15", + device: 1 + }, + { + id: 22, + key: "12", + video_url: "https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4", + created_at: "2025-03-13 09:45:22", + device: 1 + }, + // { + // id: 10, + // key: "10", + // video_url: "https://www.w3schools.com/html/mov_bbb.mp4", + // created_at: "2025-03-12 14:53:36", + // device: 1 + // }, + // { + // id: 11, + // key: "11", + // video_url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4", + // created_at: "2025-03-12 15:20:15", + // device: 1 + // }, + // { + // id: 12, + // key: "12", + // video_url: "https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4", + // created_at: "2025-03-13 09:45:22", + // device: 1 + // }, + // { + // id: 10, + // key: "10", + // video_url: "https://www.w3schools.com/html/mov_bbb.mp4", + // created_at: "2025-03-12 14:53:36", + // device: 1 + // }, + // { + // id: 11, + // key: "11", + // video_url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4", + // created_at: "2025-03-12 15:20:15", + // device: 1 + // }, + // { + // id: 12, + // key: "12", + // video_url: "https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4", + // created_at: "2025-03-13 09:45:22", + // device: 1 + // }, + // { + // id: 10, + // key: "10", + // video_url: "https://www.w3schools.com/html/mov_bbb.mp4", + // created_at: "2025-03-12 14:53:36", + // device: 1 + // }, + // { + // id: 11, + // key: "11", + // video_url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4", + // created_at: "2025-03-12 15:20:15", + // device: 1 + // }, + // { + // id: 12, + // key: "12", + // video_url: "https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4", + // created_at: "2025-03-13 09:45:22", + // device: 1 + // } +]; + + const currentData = fetchList(); +const currentHistroyData = mockHistroyData; +// export const deviceStatusListData = { data: { - list: currentData, + data: currentData, total: currentData.length, - page: 1, + current: 1, pageSize: 10 } }; + +export const deviceHistoryListData = { + data: currentHistroyData +} + + diff --git a/mock/utils/apiMock.ts b/mock/utils/apiMock.ts index 8445850..9e4d0ea 100644 --- a/mock/utils/apiMock.ts +++ b/mock/utils/apiMock.ts @@ -1,39 +1,47 @@ +/* + * @Author: donghao donghao@supervision.ltd + * @Date: 2025-03-07 14:58:39 + * @LastEditors: donghao donghao@supervision.ltd + * @LastEditTime: 2025-03-13 14:29:26 + * @FilePath: \5G-Loading-Bay-Web\mock\utils\apiMock.ts + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ import { failMockApiProps, successMockApiProps } from "../typing"; export function fetchMockSuccessFullByOther({ data, - msg + msg, }): successMockApiProps { // return { - // code: 0, // 0 成功 + // code: 200, // 200 成功 // success: true, // true 成功 // data: data || null, // mock业务层数据 // msg: msg | "ok", // 成功提示 // isMock: true // true 标识当前是模拟数据 // } as successMockApiProps; const result: successMockApiProps = { - code: 0, // 0 成功 + code: 200, // 200 成功 success: true, // true 成功 data: data || null, // mock业务层数据 msg: msg as string | "ok", // 成功提示 - isMock: true // true 标识当前是模拟数据 + isMock: true, // true 标识当前是模拟数据 }; return result; } export function fetchMockFailFullByOther({ data, msg }): failMockApiProps { // return { - // code: 599, // 0 成功 + // code: 599, // 200 成功 // success: true, // true 成功 // data: data || null, // mock业务层数据 // msg: msg | "fail", // 成功提示 // isMock: true // true 标识当前是模拟数据 // } as failMockApiProps; const result: failMockApiProps = { - code: 599, // 0 成功 + code: 599, // 200 成功 success: false, // true 成功 data: data || null, // mock业务层数据 msg: msg as string | "fail", // 成功提示 - isMock: true // true 标识当前是模拟数据 + isMock: true, // true 标识当前是模拟数据 }; return result; } @@ -41,11 +49,11 @@ export function fetchMockFailFullByOther({ data, msg }): failMockApiProps { // 分页展示 export function fetchCurrPageByList({ data }): successMockApiProps { // console.log("fetchCurrPageByList_data", data); - const { page, pageSize } = data; - const prevPage = page - 1; + const { current, pageSize } = data; + const prevPage = current - 1; const currPageData = { ...data, - list: data.list.slice(prevPage * pageSize, page * pageSize) + data: data.data.slice(prevPage * pageSize, current * pageSize), }; return fetchMockSuccessFullByOther({ data: currPageData }); } diff --git a/package.json b/package.json index d4223f4..d0cdd6b 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "dependencies": { "axios": "^1.8.3", "echarts": "^5.6.0", + "moment": "^2.30.1", "postcss-scss": "^4.0.9", "sass": "^1.85.1", "swiper": "^11.2.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 44631d0..7cfe04c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -14,6 +14,9 @@ importers: echarts: specifier: ^5.6.0 version: 5.6.0 + moment: + specifier: ^2.30.1 + version: 2.30.1 postcss-scss: specifier: ^4.0.9 version: 4.0.9(postcss@8.5.3) @@ -1455,6 +1458,9 @@ packages: resolution: {integrity: sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==} hasBin: true + moment@2.30.1: + resolution: {integrity: sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==} + mpd-parser@1.3.1: resolution: {integrity: sha512-1FuyEWI5k2HcmhS1HkKnUAQV7yFPfXPht2DnRRGtoiiAAW+ESTbtEXIDpRkwdU+XyrQuwrIym7UkoPKsZ0SyFw==} hasBin: true @@ -3224,6 +3230,8 @@ snapshots: dependencies: commander: 13.1.0 + moment@2.30.1: {} + mpd-parser@1.3.1: dependencies: '@babel/runtime': 7.26.10 diff --git a/src/assets/common/pause_icon.png b/src/assets/common/pause_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..f7acae26e38a93c079ffd68a41ea770d2d7c709b GIT binary patch literal 876 zcmV-y1C#uTP)?ry(b@pJ?Xu_x^$8Tn zQz~^FQjdpNCK5feW-VySeFd`RE^eR`*$I+DPL%(Rnx7>#zy3U}sflA~mYgwtm=jnz zmGxzcWD-y@>*yNb?nL35zwFbJ# z0QmuKx(+k3phlr91_gTa8QJi^^1y7S{ht-{x_c9xZBFQJ}GY+^X;3t@b*whi=)XEXy=w3Ev|s2qsmXU zI;`voq~lzXpGshwQ6nPm0XU|ArO$tXNl^mnOoogxx^yXlv`P1nJxu=N2-GdKkukJu z9)ZsB##Sbc%Gsr-JPdCi*oXxkyUgQ~I&zJJ5FKk;d~=KXk#~J1jD^g`VTS8oeW#E} zCiw6R@v!mUqf1fk(miB|pU42hK*_b>c$;aLL|;lAVATk;Tyf0QKB(o;Adl{2Mex`Z z;+o#NDS@n9m(v~6gboNzul1ZdzmAW;%0ud$>dlUmOCRrw?b&+YP`9RI7o&|b6(~@Q z#+<`fAUh0s(l*kGFea_L8jtDM7_x%^Chc>)m4sPsx_eAmD2CW^uBkHORe|C>WoBE~ z4eST4wS@`v;#ie0T>P88*U%Z0k8yeq?WorJC;0=SdivH0xsZ_n0000 \ No newline at end of file +
+ + +
+ + + +
+
+ + + + + + + diff --git a/src/utils/array.ts b/src/utils/array.ts new file mode 100644 index 0000000..34014af --- /dev/null +++ b/src/utils/array.ts @@ -0,0 +1,32 @@ +/* + * @Author: donghao donghao@supervision.ltd + * @Date: 2025-03-13 16:12:49 + * @LastEditors: donghao donghao@supervision.ltd + * @LastEditTime: 2025-03-13 16:25:52 + * @FilePath: \5G-Loading-Bay-Web\src\utils\array.ts + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ +import moment from 'moment'; + +export function extractUniqueDatesWithMoment(data: { created_at: string }[]): string[] { + const dateSet = new Set(); + data.forEach(item => { + // 使用 moment 解析 created_at 字段并格式化为 YYYY-MM-DD + const formattedDate = moment(item.created_at).format('YYYY-MM-DD'); + dateSet.add(formattedDate); + }); + return Array.from(dateSet); +} + + +export function filterDataByDate(data: { created_at: string }[], targetDate: string): { created_at: string }[] { + // 补全开始时间为目标日期的 0 点 + const startTime = moment(targetDate).startOf('day').format('YYYY-MM-DD HH:mm:ss'); + // 补全结束时间为目标日期的 23:59:59 + const endTime = moment(targetDate).endOf('day').format('YYYY-MM-DD HH:mm:ss'); + + return data.filter(item => { + const createdAt = moment(item.created_at); + return createdAt.isBetween(startTime, endTime, null, '[]'); + }); +} \ No newline at end of file diff --git a/src/utils/request/instance.ts b/src/utils/request/instance.ts index 4de71a8..3732b0a 100644 --- a/src/utils/request/instance.ts +++ b/src/utils/request/instance.ts @@ -1,3 +1,11 @@ +/* + * @Author: donghao donghao@supervision.ltd + * @Date: 2025-03-12 15:12:58 + * @LastEditors: donghao donghao@supervision.ltd + * @LastEditTime: 2025-03-13 13:42:24 + * @FilePath: \5G-Loading-Bay-Web\src\utils\request\instance.ts + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ import Request from './index' import { config } from '@/config' import { ElLoading } from "element-plus"; @@ -20,7 +28,7 @@ const request = new Request({ } // 全局 loading 配置 - if (config.showLoading !== false) { + if (config.showLoading) { const loading = ElLoading.service({ lock: true, text: '加载中...', diff --git a/src/views/dashboard/DeviceStatus.vue b/src/views/dashboard/DeviceStatus.vue index 20bfa5b..481d302 100644 --- a/src/views/dashboard/DeviceStatus.vue +++ b/src/views/dashboard/DeviceStatus.vue @@ -44,7 +44,8 @@ - + @@ -59,6 +60,7 @@ import outLineIcon from '@/assets/common/outline_icon.png'; import errorIcon from '@/assets/common/error_icon.png'; import { getDeviceStatusApi } from '@/api/dashboard'; import { isSuccessApi } from "@/utils/forApi"; +import { nextTick } from "vue"; defineOptions({ name: "DeviceStatusIndex" }); @@ -99,6 +101,8 @@ const alarmLevelStatusEnum = { const currentRow = ref>({}); const isRealOpen = ref(false); // 实时视频弹窗 const isHistoryOpen = ref(false); // 历史视频弹窗 +const historyVideos = ref[]>([]); //历史视频数据 +const historyModalRef = ref(null); const columns = [ { @@ -120,8 +124,6 @@ const columns = [ console.log(val); const currentLevelObj = alarmLevelStatusEnum[val?.device_status] || alarmLevelStatusEnum.notFound; - - return h( "div", { @@ -153,7 +155,6 @@ const columns = [ ); } }, - // TODO 需要封装操作按钮 { type: "action", label: "操作" @@ -197,12 +198,33 @@ function openCurrent(row) { } /**打开历史视频 */ +// TODO mock 获取视频列表数据 +const fetchHistoryList = async () => { + try { + const resAll = await fetch('/api/v1/device/device_history/', { + method: 'POST' + }) + const res = await resAll.json() + if (isSuccessApi(res)) { + historyVideos.value = res.data; + isHistoryOpen.value = true; + nextTick(() => { + historyModalRef.value.loadData() + }) + console.log(res, 'fetchHistoryList_data') + + } + } catch (error) { + console.error('获取数据失败:', error) + } +} + function openHistory(row) { console.log(row, "openHistory"); currentRow.value = row; - // TODO 历史视频模块 - isHistoryOpen.value = true; + fetchHistoryList(); } + onMounted(() => { getList(); }); diff --git a/src/views/dashboard/components/HistoryVideoModal.vue b/src/views/dashboard/components/HistoryVideoModal.vue index 4936ee6..13b380d 100644 --- a/src/views/dashboard/components/HistoryVideoModal.vue +++ b/src/views/dashboard/components/HistoryVideoModal.vue @@ -1,12 +1,260 @@ + + + \ No newline at end of file diff --git a/src/views/dashboard/components/RealVideoModal.vue b/src/views/dashboard/components/RealVideoModal.vue index 765b062..bb7ac70 100644 --- a/src/views/dashboard/components/RealVideoModal.vue +++ b/src/views/dashboard/components/RealVideoModal.vue @@ -1,11 +1,12 @@