Yaxin
/
5G-Loading-Bay-Web
31
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 撑杆检测开发

Browse Source
main
JINGYJ 2 months ago
parent 5fe2959de3
commit d07a52c43f
4 changed files with 194 additions and 93 deletions
Show Stats Download Patch File Download Diff File

89
src/views/dashboard/AppearanceMonitor.scss
Unescape Escape View File

@ -0,0 +1,89 @@
.appearance-monitor-warp {
height: 100%;
display: flex;
justify-content: center;
// align-items: center;
// .appearance-monitor-right {
// display: flex;
// }
.pagination-container {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
:deep(.el-pagination__total) {
color: #606266;
margin-right: 10px;
}
:deep(.el-pagination__sizes .el-select__inner) {
background: #002a5c;
color: white;
border: 1px solid #409eff;
}
:deep(.el-pagination__item),
:deep(.el-pagination__button) {
background: #002a5c;
color: white;
border: 1px solid #409eff;
margin-right: 5px;
}
:deep(.el-pagination__item.is-active) {
background: #409eff;
color: white;
}
.appearance-monitor-left {
.monitor-left-top {
box-sizing: border-box;
padding: 32px 16px;
min-height: 600px;
img {
width: 100%;
height: 600px;
}
}
.monitor-left-bottom {
width: 100%;
overflow: visible;
.swiper {
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);
}
}
}
}
}

90
src/views/dashboard/AppearanceMonitor.vue
Unescape Escape View File

@ -189,93 +189,5 @@ const onSlideChange = () => {
// });
</script>
<style lang="scss">
.appearance-monitor-warp {
height: 100%;
display: flex;
justify-content: center;
// align-items: center;
// .appearance-monitor-right {
// display: flex;
// }
.pagination-container {
margin-top: 20px;
display: flex;
justify-content: flex-end;
}
:deep(.el-pagination__total) {
color: #606266;
margin-right: 10px;
}
:deep(.el-pagination__sizes .el-select__inner) {
background: #002a5c;
color: white;
border: 1px solid #409eff;
}
:deep(.el-pagination__item),
:deep(.el-pagination__button) {
background: #002a5c;
color: white;
border: 1px solid #409eff;
margin-right: 5px;
}
:deep(.el-pagination__item.is-active) {
background: #409eff;
color: white;
}
.appearance-monitor-left {
.monitor-left-top {
box-sizing: border-box;
padding: 32px 16px;
min-height: 600px;
img {
width: 100%;
height: 600px;
}
}
.monitor-left-bottom {
width: 100%;
overflow: visible;
.swiper {
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);
}
}
}
}
}
@import url('./AppearanceMonitor.scss');
</style>

54
src/views/dashboard/PoleMonitor.scss
Unescape Escape View File

@ -2,4 +2,58 @@
.search-section{
padding: 16px 0;
}
.pole-monitor-main {
.left-panel {
.main-image {
box-sizing: border-box;
min-height: 512px;
img {
width: 100%;
height: 512px;
}
}
.thumbnail-container {
width: 100%;
overflow: visible;
.swiper {
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);
}
}
}
}
}
}

54
src/views/dashboard/PoleMonitor.vue
Unescape Escape View File

@ -48,7 +48,7 @@
<!-- 主体内容区域 -->
<div class="flex justify-between pole-monitor-main">
<!-- 左侧视频与缩略图区域 -->
<div class="left-panel">
<div class="left-panel w-[900px]">
<!-- 主图显示 -->
<div class="main-image">
<img src="https://picsum.photos/300/200?random=1" alt="监控画面">
@ -59,7 +59,28 @@
<!-- 缩略图区域 -->
<div class="thumbnail-container">
<img src="https://picsum.photos/300/200?random=2" alt="监控画面">
<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>
<!-- 右侧表格区域 -->
@ -89,18 +110,43 @@
<script lang="ts" setup>
import ContentHeader from '@/components/ContentHeader.vue';
import { BaseTable } from "@/components/CustomTable";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Scrollbar } from "swiper/modules";
import "swiper/css";
import 'swiper/scss';
import 'swiper/scss/navigation';
defineOptions({
name: "PoleMonitorIndex"
});
const modules = [Navigation, Scrollbar];
// 搜索表单
const searchForm = ref({
trainNo: 'all',
carriageNo: 'all',
faultType: 'all'
});
const images = ref([
'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 activeIndex = ref(-1);
const handleSlideClick = (index) => {
console.log(index);
activeIndex.value = index;
};
const swiperRef = ref(null);
console.log(swiperRef.value);
const onSwiper = (swiper) => {
swiperRef.value = swiper;
console.log('Swiper 实例已获取:', swiper);
};
const onSlideChange = () => {
console.log("slide change");
};
const currentRow = ref<Record<string, any>>({});
const columns = [

Write Preview
Loading…
Cancel
Save