diff --git a/mock/pools/deviceStatusData.ts b/mock/pools/deviceStatusData.ts index e5da94f..817662c 100644 --- a/mock/pools/deviceStatusData.ts +++ b/mock/pools/deviceStatusData.ts @@ -92,7 +92,8 @@ const mockHistroyData = Mock.mock({ return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; }, device: 1, - }, + } + ], }); diff --git a/mock/pools/poleMonitorData.ts b/mock/pools/poleMonitorData.ts index c858676..fb94ae5 100644 --- a/mock/pools/poleMonitorData.ts +++ b/mock/pools/poleMonitorData.ts @@ -2,21 +2,15 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2025-03-11 11:30:09 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2025-03-14 15:18:42 + * @LastEditTime: 2025-03-17 15:24: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"; -// 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' -// ]; +import { isImage } from "../utils/is"; 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", + "http://192.168.10.14:8123/ftp/1.jpg", "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", @@ -60,9 +54,20 @@ const mockFilesData = Mock.mock({ name: "@animal", video_url: function () { // 依次取出视频链接 - return videoUrls[this.id - 10]; + const currFile = videoUrls[this.id - 10]; + if (!isImage(currFile)) { + return videoUrls[this.id - 10]; + } + return null; + }, + image_url: function () { + // 依次取出视频链接 + const currFile = videoUrls[this.id - 10]; + if (isImage(currFile)) { + return videoUrls[this.id - 10]; + } + return null; }, - 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)", @@ -92,6 +97,6 @@ export const poleMonitorListData = { export const fileListData = { data: { - data: currentFilesData + data: currentFilesData, }, }; diff --git a/mock/utils/is.ts b/mock/utils/is.ts new file mode 100644 index 0000000..84e81f8 --- /dev/null +++ b/mock/utils/is.ts @@ -0,0 +1,43 @@ +/** + * 判断文件名是否为图片 + * @param {string} filename 完整文件名（含路径和扩展名） + * @returns {boolean} 是否为图片 + */ + +const IMAGE_EXTENSIONS = new Set([ + "jpg", + "jpeg", + "png", + "gif", + "bmp", + "svg", + "webp", + "tiff", + "psd", + "ico", + "jfif", + "apng", + "avif", +]); +export function isImage(filename) { + // 1. 去除路径，只保留文件名 + const baseName = filename.split("/").pop().split("\\").pop(); + if (!baseName) return false; + + // 2. 提取扩展名（处理多扩展名，取最后一个） + const ext = baseName.split(".").pop()?.toLowerCase(); + if (!ext || ext.length < 2) return false; // 扩展名长度至少2位（如.jpg） + + // 3. 检查是否在图片扩展名白名单 + return IMAGE_EXTENSIONS.has(ext); +} + +// 示例测试 +// console.log(isImage('photo.jpg')); // true +// console.log(isImage('image.png')); // true +// console.log(isImage('logo.svg')); // true +// console.log(isImage('cover.tar.gz')); // false（非图片扩展名） +// console.log(isImage('file')); // false（无扩展名） +// console.log(isImage('.hidden.png')); // true（隐藏文件） +// console.log(isImage('icon.JPEG')); // true（大小写不敏感） +// console.log(isImage('video.mp4')); // false（视频） diff --git a/src/assets/common/device_status_bg_line.png b/src/assets/common/device_status_bg_line.png new file mode 100644 index 0000000..176a770 Binary files /dev/null and b/src/assets/common/device_status_bg_line.png differ diff --git a/src/components/ContentHeader.vue b/src/components/ContentHeader.vue index 5aaa1a4..ef45316 100644 --- a/src/components/ContentHeader.vue +++ b/src/components/ContentHeader.vue @@ -2,7 +2,7 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2025-03-06 15:52:40 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2025-03-07 14:19:16 + * @LastEditTime: 2025-03-17 10:20:28 * @FilePath: \vite-ai\data-dashboard\src\components\contentHeader.vue * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> @@ -31,7 +31,7 @@ import Bg800 from '@/assets/header/bg_800.png'; import Bg450 from '@/assets/header/bg_450.png'; // 定义组件 props const props = withDefaults(defineProps<{ - bgLayout: number; // 背景样式 1855 918 800 450 + bgLayout: number | string; // 背景样式 1855 918 800 450 }>(), { bgLayout: 1855, }); diff --git a/src/components/CustomTable/src/baseTable.scss b/src/components/CustomTable/src/baseTable.scss index 3068280..e914794 100644 --- a/src/components/CustomTable/src/baseTable.scss +++ b/src/components/CustomTable/src/baseTable.scss @@ -7,11 +7,15 @@ /* 去掉表头下边框 */ .el-table__header-wrapper thead th { border-bottom: none !important; + border: none !important; + } /* 去掉单元格边框 */ .el-table td, .el-table th.is-leaf { border-bottom: none !important; + border: none !important; + } /* 去掉纵向分割线 */ .el-table--border::after, @@ -23,10 +27,12 @@ .el-table--group { border-right: none !important; border-bottom: none !important; + border: none !important; } .el-table td, .el-table th { border-right: none !important; + border: none !important; } .el-scrollbar__view { diff --git a/src/components/videoPlayer/Player.vue b/src/components/videoPlayer/Player.vue index 6f4bcf8..a663083 100644 --- a/src/components/videoPlayer/Player.vue +++ b/src/components/videoPlayer/Player.vue @@ -2,14 +2,14 @@ * @Author: donghao donghao@supervision.ltd * @Date: 2025-03-12 13:48:31 * @LastEditors: donghao donghao@supervision.ltd - * @LastEditTime: 2025-03-14 16:37:49 + * @LastEditTime: 2025-03-17 15:36:41 * @FilePath: \5G-Loading-Bay-Web\src\components\videoPlayer\player.vue * @Description: 视频播放器 --> \ No newline at end of file + +function openReal() { + isPlaying.value = true; + nextTick(() => initPlayer()) + console.log("开启") +} + +defineExpose({ + initPlayer +}) + + + \ No newline at end of file diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss index d6150e0..e89a1fa 100644 --- a/src/styles/element-plus.scss +++ b/src/styles/element-plus.scss @@ -10,18 +10,16 @@ ), ), $select-dropdown: ( - "background-color": red, + "background-color": transparent, ) // $el-pagination: ( // --el-pagination-button-height-small: 24px; // ) ); - /* 引入 Element Plus 样式 */ @use "element-plus/theme-chalk/src/index.scss" as *; - .el-button.is-text:not(.is-disabled):hover { background-color: transparent; } @@ -112,12 +110,15 @@ /* 下拉选择 */ .custom-select { width: 150px; + background-color: #032b5c; /* 自定义背景色 */ + border: none; /* 可选：去掉边框 */ .el-select__selected-item { color: white; /* 文字颜色 */ } + .el-select__wrapper { background: rgba(74, 126, 191, 0.1); /* 下拉框背景色 */ - border: 1px solid transparent; /* 边框 */ + border: none !important; /* 边框 */ color: white; /* 文字颜色 */ height: 32px; box-shadow: none; @@ -137,22 +138,17 @@ border-color: transparent; /* 悬停边框颜色 */ } } - -.custom-select { - background-color: #032b5c; /* 自定义背景色 */ - border: none; /* 可选：去掉边框 */ -} .custom-input { width: 150px; background-color: #032b5c; /* 自定义背景色 */ border: none; /* 可选：去掉边框 */ + .el-input__wrapper { background: rgba(74, 126, 191, 0.1); /* 下拉框背景色 */ - border: 1px solid transparent; /* 边框 */ + border: none; /* 边框 */ color: white; /* 文字颜色 */ height: 32px; box-shadow: none; - &::placeholder { color: rgba(255, 255, 255, 0.6); /* 占位符颜色 */ } @@ -176,14 +172,11 @@ } .el-select-dropdown__item.is-hovering { - background-color: #2de6ff; + background-color: #0c4eac; color: white; } /* table */ -.el-table { - // background-color: transparent; -} .table_action_box { .el-button { padding: 0; diff --git a/src/views/dashboard/AppearanceMonitor.scss b/src/views/dashboard/AppearanceMonitor.scss index a589640..d2c4203 100644 --- a/src/views/dashboard/AppearanceMonitor.scss +++ b/src/views/dashboard/AppearanceMonitor.scss @@ -45,9 +45,21 @@ padding: 32px 16px 20px; min-height: 600px; - img { + .file-preview-screen { width: 100%; height: 590px; + display: flex; + justify-content: center; + align-items: center; + img { + max-width: 100%; + max-height: 460px; + object-fit: cover + } + video { + width: 100%; + max-height: calc(100%); + } } } .monitor-left-bottom { @@ -61,13 +73,16 @@ .swiper-slide { width: 20%; border-radius:4px; + height: 144px; img { width: 100%; height: 144px; border-radius:4px; + object-fit: cover } } - .active-slide img { + .active-slide img, + .active-slide video { border-radius:4px; border: 2px solid #2ECCE0; } diff --git a/src/views/dashboard/AppearanceMonitor.vue b/src/views/dashboard/AppearanceMonitor.vue index b3a5357..c3b5e17 100644 --- a/src/views/dashboard/AppearanceMonitor.vue +++ b/src/views/dashboard/AppearanceMonitor.vue @@ -1,18 +1,29 @@