feat: 补充提交

main
donghao 2 months ago
parent 2a00c4d689
commit fc0bf97958

Binary file not shown.

After

Width:  |  Height:  |  Size: 800 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 225 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 400 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 352 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 922 B

@ -0,0 +1,11 @@
<!--
* @Author: donghao donghao@supervision.ltd
* @Date: 2025-03-12 13:48:31
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2025-03-12 13:56:15
* @FilePath: \5G-Loading-Bay-Web\src\components\videoPlayer\player.vue
* @Description: 视频播放器
-->
<template>
<!-- 视频播放器 -->
</template>

@ -0,0 +1,4 @@
<template>
<!-- 实时视频播放器 -->
</template>

@ -1,71 +1,80 @@
.pole-monitor-wrap {
.search-section{
background-image: url("@/assets/common/bg_banner.png");
// background-color: red;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
.search-section {
padding: 16px 0;
}
.pole-monitor-search-box {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0;
}
.right-panel{
.el-scrollbar__view {
background: transparent !important;
height: 600px;
}
}
.pole-monitor-main {
.left-panel {
.pole-main-content {
width: 100%;
}
.pole-monitor-search-box {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0;
}
.right-panel {
.el-scrollbar__view {
background: transparent !important;
height: 600px;
}
}
.pole-monitor-main {
.left-panel {
.main-image {
box-sizing: border-box;
min-height: 512px;
img {
width: 100%;
height: 512px;
}
box-sizing: border-box;
min-height: 512px;
img {
width: 100%;
height: 512px;
}
}
.thumbnail-container {
width: 100%;
overflow: visible;
.swiper {
width: 100%;
overflow: visible;
.swiper {
width: 100%;
height: 100%;
.swiper-slide {
width: 20%;
border-radius: 4px;
img {
width: 100%;
height: 100%;
.swiper-slide {
width: 20%;
border-radius:4px;
img {
width: 100%;
height: 100%;
border-radius:4px;
}
}
.active-slide img {
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);
}
border-radius: 4px;
}
}
.active-slide img {
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);
}
}
}
}
}
}
}
}
}

@ -2,12 +2,12 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2025-03-06 15:15:01
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2025-03-12 13:30:24
* @LastEditTime: 2025-03-12 14:06:27
* @FilePath: \vite-ai\data-dashboard\src\views\dashboard\PoleMonitor.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="pole-monitor-wrap">
<div class="pole-monitor-wrap mt-[32px]">
<div class="module-header">
<ContentHeader bgLayout="1855">
<template #title>
@ -19,60 +19,62 @@
</template>
</ContentHeader>
</div>
<!-- 搜索区域 -->
<div class="pole-monitor-search-box">
<el-select v-model="searchForm.name" placeholder="列车号" class="custom-select">
<el-option label="A" value="deviceA"></el-option>
<el-option label="B" value="deviceB"></el-option>
</el-select>
<el-select v-model="searchForm.deviceId" placeholder="车厢号" class="custom-select">
<el-option label="ID-001" value="id001"></el-option>
<el-option label="ID-002" value="id002"></el-option>
</el-select>
<el-select v-model="searchForm.faultType" placeholder="故障类型" class="custom-select">
<el-option label="类型1" value="id001"></el-option>
<el-option label="类型2" value="id002"></el-option>
</el-select>
<el-button type="primary" @click="handleQuery" class="basic-btn query-btn">
<span class="icon"></span> 查询
</el-button>
<el-button @click="handleReset" class="basic-btn reset-btn">
<span class="icon"></span> 重置
</el-button>
</div>
<!-- 主体内容区域 -->
<div class="flex justify-between pole-monitor-main">
<!-- 左侧视频与缩略图区域 -->
<div class="left-panel w-[900px]">
<!-- 主图显示 -->
<div class="main-image">
<img src="https://picsum.photos/300/200?random=1" alt="监控画面">
<div class="image-info">
: 35cm : 52cm : 28cm 体积: 50960cm 重量: 58kg
<div class="pole-main-content">
<!-- 搜索区域 -->
<div class="pole-monitor-search-box">
<el-select v-model="searchForm.name" placeholder="列车号" class="custom-select">
<el-option label="A" value="deviceA"></el-option>
<el-option label="B" value="deviceB"></el-option>
</el-select>
<el-select v-model="searchForm.deviceId" placeholder="车厢号" class="custom-select">
<el-option label="ID-001" value="id001"></el-option>
<el-option label="ID-002" value="id002"></el-option>
</el-select>
<el-select v-model="searchForm.faultType" placeholder="故障类型" class="custom-select">
<el-option label="类型1" value="id001"></el-option>
<el-option label="类型2" value="id002"></el-option>
</el-select>
<el-button type="primary" @click="handleQuery" class="basic-btn query-btn">
<span class="icon"></span> 查询
</el-button>
<el-button @click="handleReset" class="basic-btn reset-btn">
<span class="icon"></span> 重置
</el-button>
</div>
<!-- 主体内容区域 -->
<div class="flex justify-between pole-monitor-main">
<!-- 左侧视频与缩略图区域 -->
<div class="left-panel w-[900px]">
<!-- 主图显示 -->
<div class="main-image">
<img src="https://picsum.photos/300/200?random=1" alt="监控画面">
<!-- <div class="image-info">
: 35cm : 52cm : 28cm 体积: 50960cm 重量: 58kg
</div> -->
</div>
</div>
<!-- 缩略图区域 -->
<div class="thumbnail-container">
<swiper ref="swiperRef" :modules="modules" :slides-per-view="4" :space-between="10" navigation
:scrollbar="{ draggable: false }" :centered-slides="false" :observer="true"
:observeParents="true" @swiper="onSwiper" @slideChange="onSlideChange">
<swiper-slide v-for="(image, index) in images" :key="index" @click="handleSlideClick(index)"
:class="{ 'active-slide': activeIndex === index }">
<img :src="image" alt="Slide" />
</swiper-slide>
</swiper>
<!-- 缩略图区域 -->
<div class="thumbnail-container">
<swiper ref="swiperRef" :modules="modules" :slides-per-view="4" :space-between="10" navigation
:scrollbar="{ draggable: false }" :centered-slides="false" :observer="true"
:observeParents="true" @swiper="onSwiper" @slideChange="onSlideChange">
<swiper-slide v-for="(image, index) in images" :key="index" @click="handleSlideClick(index)"
:class="{ 'active-slide': activeIndex === index }">
<img :src="image" alt="Slide" />
</swiper-slide>
</swiper>
</div>
</div>
</div>
<!-- 右侧表格区域 -->
<div class="right-panel w-[934px]">
<div class="bg-transparent baseTable_wrap">
<template v-if="pagination.total > 0">
<BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
:pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
:columns="columns" :page="pagination.currentPage" @change="handleTableChange">
</BaseTable>
</template>
<!-- 右侧表格区域 -->
<div class="right-panel w-[934px]">
<div class="bg-transparent baseTable_wrap">
<template v-if="pagination.total > 0">
<BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
:pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
:columns="columns" :page="pagination.currentPage" @change="handleTableChange">
</BaseTable>
</template>
</div>
</div>
</div>
</div>

Loading…
Cancel
Save