|
|
|
|
@ -2,7 +2,7 @@
|
|
|
|
|
* @Author: donghao donghao@supervision.ltd
|
|
|
|
|
* @Date: 2025-03-06 15:15:01
|
|
|
|
|
* @LastEditors: donghao donghao@supervision.ltd
|
|
|
|
|
* @LastEditTime: 2025-03-11 13:46:36
|
|
|
|
|
* @LastEditTime: 2025-03-12 11:43:32
|
|
|
|
|
* @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
|
|
|
|
|
-->
|
|
|
|
|
@ -20,30 +20,25 @@
|
|
|
|
|
</ContentHeader>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 搜索区域 -->
|
|
|
|
|
<div class="search-section">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col span="6">
|
|
|
|
|
<el-select v-model="searchForm.trainNo" placeholder="列车号">
|
|
|
|
|
<el-option label="全部列车" value="all"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col span="6">
|
|
|
|
|
<el-select v-model="searchForm.carriageNo" placeholder="车厢号">
|
|
|
|
|
<el-option label="全部车厢" value="all"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col span="6">
|
|
|
|
|
<el-select v-model="searchForm.faultType" placeholder="故障类型">
|
|
|
|
|
<el-option label="全部类型" value="all"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col span="3">
|
|
|
|
|
<el-button type="primary" @click="handleSearch">查询</el-button>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col span="3">
|
|
|
|
|
<el-button @click="handleReset">重置</el-button>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<div class="pole-monitor-search-box">
|
|
|
|
|
<el-select v-model="formData.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="formData.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="formData.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">
|
|
|
|
|
@ -59,25 +54,11 @@
|
|
|
|
|
|
|
|
|
|
<!-- 缩略图区域 -->
|
|
|
|
|
<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 }"
|
|
|
|
|
>
|
|
|
|
|
<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>
|
|
|
|
|
@ -93,16 +74,6 @@
|
|
|
|
|
</BaseTable>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- <el-table :data="tableData" stripe class="custom-table">
|
|
|
|
|
<el-table-column prop="carNo" label="车号" width="80"></el-table-column>
|
|
|
|
|
<el-table-column prop="carType" label="车型" width="60"></el-table-column>
|
|
|
|
|
<el-table-column prop="carriageNo" label="车厢号" width="80"></el-table-column>
|
|
|
|
|
<el-table-column prop="warnType" label="告警类型" width="80"></el-table-column>
|
|
|
|
|
<el-table-column prop="faultType" label="故障类型" width="120"></el-table-column>
|
|
|
|
|
<el-table-column prop="level" label="等级" width="60"></el-table-column>
|
|
|
|
|
<el-table-column prop="review" label="复核" width="60"></el-table-column>
|
|
|
|
|
<el-table-column prop="date" label="时间" width="120"></el-table-column>
|
|
|
|
|
</el-table> -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -127,25 +98,25 @@ const searchForm = ref({
|
|
|
|
|
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'
|
|
|
|
|
'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;
|
|
|
|
|
console.log(index);
|
|
|
|
|
activeIndex.value = index;
|
|
|
|
|
};
|
|
|
|
|
const swiperRef = ref(null);
|
|
|
|
|
console.log(swiperRef.value);
|
|
|
|
|
const onSwiper = (swiper) => {
|
|
|
|
|
swiperRef.value = swiper;
|
|
|
|
|
console.log('Swiper 实例已获取:', swiper);
|
|
|
|
|
swiperRef.value = swiper;
|
|
|
|
|
console.log('Swiper 实例已获取:', swiper);
|
|
|
|
|
};
|
|
|
|
|
const onSlideChange = () => {
|
|
|
|
|
console.log("slide change");
|
|
|
|
|
console.log("slide change");
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const currentRow = ref<Record<string, any>>({});
|
|
|
|
|
@ -195,11 +166,11 @@ const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
|
|
|
|
|
|
|
|
|
|
const listData = ref([]);
|
|
|
|
|
|
|
|
|
|
// const searchValue = ref("");
|
|
|
|
|
|
|
|
|
|
const formData = reactive({
|
|
|
|
|
name: "",
|
|
|
|
|
status: ""
|
|
|
|
|
status: "",
|
|
|
|
|
faultType: "",
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const dataLoading = ref(true);
|
|
|
|
|
|
