|
|
|
|
@ -1,237 +1,331 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="pole-monitor-wrap mt-[32px]">
|
|
|
|
|
<div class="module-header">
|
|
|
|
|
<ContentHeader bgLayout="1855">
|
|
|
|
|
<template #title>
|
|
|
|
|
<div class="w-[200px] bg_title bg_title_3">
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<template #extra>
|
|
|
|
|
<div></div>
|
|
|
|
|
</template>
|
|
|
|
|
</ContentHeader>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pole-main-content px-[16px]">
|
|
|
|
|
<!-- 搜索区域 -->
|
|
|
|
|
<div class="pole-monitor-search-box">
|
|
|
|
|
<el-select v-model="searchForm.station" placeholder="站点" class="custom-select">
|
|
|
|
|
<el-option label="小觉站" value="小觉站"></el-option>
|
|
|
|
|
<el-option label="东西站" value="东西站"></el-option>
|
|
|
|
|
<el-option label="立杆区" value="立杆区"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-input v-model="searchForm.train_number" placeholder="请输入列车号" class="custom-input" clearable />
|
|
|
|
|
<el-input v-model="searchForm.train_carriage_number" placeholder="请输入车厢号" class="custom-input"
|
|
|
|
|
clearable />
|
|
|
|
|
<el-select v-model="searchForm.fault_type" placeholder="故障类型" class="custom-select" clearable>
|
|
|
|
|
<el-option label="撑杆弯曲" value="撑杆弯曲"></el-option>
|
|
|
|
|
<el-option label="撑杆断折" value="撑杆断折"></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 class="pole-monitor-wrap mt-[32px]">
|
|
|
|
|
<div class="module-header">
|
|
|
|
|
<ContentHeader bgLayout="1855">
|
|
|
|
|
<template #title>
|
|
|
|
|
<div class="w-[200px] bg_title bg_title_3"></div>
|
|
|
|
|
</template>
|
|
|
|
|
<template #extra>
|
|
|
|
|
<div></div>
|
|
|
|
|
</template>
|
|
|
|
|
</ContentHeader>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="pole-main-content px-[16px]">
|
|
|
|
|
<!-- 搜索区域 -->
|
|
|
|
|
<div class="pole-monitor-search-box">
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="searchForm.station"
|
|
|
|
|
placeholder="站点"
|
|
|
|
|
class="custom-select"
|
|
|
|
|
>
|
|
|
|
|
<el-option label="小觉站" value="小觉站"></el-option>
|
|
|
|
|
<el-option label="东西站" value="东西站"></el-option>
|
|
|
|
|
<el-option label="立杆区" value="立杆区"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="searchForm.train_number"
|
|
|
|
|
placeholder="请输入列车号"
|
|
|
|
|
class="custom-input"
|
|
|
|
|
clearable
|
|
|
|
|
/>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="searchForm.train_carriage_number"
|
|
|
|
|
placeholder="请输入车厢号"
|
|
|
|
|
class="custom-input"
|
|
|
|
|
clearable
|
|
|
|
|
/>
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="searchForm.fault_type"
|
|
|
|
|
placeholder="故障类型"
|
|
|
|
|
class="custom-select"
|
|
|
|
|
clearable
|
|
|
|
|
>
|
|
|
|
|
<el-option label="撑杆弯曲" value="撑杆弯曲"></el-option>
|
|
|
|
|
<el-option label="撑杆断折" value="撑杆断折"></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" v-if="currFileList?.length">
|
|
|
|
|
<!-- 主图显示 -->
|
|
|
|
|
<div class="main-image">
|
|
|
|
|
<!-- <img src="https://picsum.phfotos/300/200?random=1" alt="监控画面"> -->
|
|
|
|
|
<!-- <video ref="refVideo" controls muted :src="currFile?.video_url" width="100%" height="100%" style="object-fit: fill;"></video> -->
|
|
|
|
|
<div class="file-preview-screen">
|
|
|
|
|
<Player
|
|
|
|
|
:src="currFile?.video_url"
|
|
|
|
|
:is-playing="isPlaying"
|
|
|
|
|
v-if="currFile?.video_url"
|
|
|
|
|
@play="isPlaying = true"
|
|
|
|
|
@pause="isPlaying = false"
|
|
|
|
|
/>
|
|
|
|
|
<img :src="currFile?.image_url" v-else-if="currFile?.image_url" />
|
|
|
|
|
<div v-else>
|
|
|
|
|
<!-- //TODO 视频【图片】加载失败 -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 主体内容区域 -->
|
|
|
|
|
<div class="flex justify-between pole-monitor-main">
|
|
|
|
|
<!-- 左侧视频与缩略图区域 -->
|
|
|
|
|
<div class="left-panel" v-if="currFileList?.length">
|
|
|
|
|
<!-- 主图显示 -->
|
|
|
|
|
<div class="main-image">
|
|
|
|
|
<!-- <img src="https://picsum.phfotos/300/200?random=1" alt="监控画面"> -->
|
|
|
|
|
<!-- <video ref="refVideo" controls muted :src="currFile?.video_url" width="100%" height="100%" style="object-fit: fill;"></video> -->
|
|
|
|
|
<div class="file-preview-screen">
|
|
|
|
|
<Player :src="currFile?.video_url" :is-playing="isPlaying" v-if="currFile?.video_url"
|
|
|
|
|
@play="isPlaying = true" @pause="isPlaying = false" />
|
|
|
|
|
<img :src="currFile?.image_url" v-else-if="currFile?.image_url">
|
|
|
|
|
<div v-else>
|
|
|
|
|
<!-- //TODO 视频【图片】加载失败 -->
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="image-info" v-if="currFile?.image_url">
|
|
|
|
|
<!-- //TODO 参数单位和待确认 -->
|
|
|
|
|
<span>长: {{ currFile?.length }}</span>
|
|
|
|
|
<span>宽: {{ currFile?.width }}</span>
|
|
|
|
|
<span>高: {{ currFile?.height }}</span>
|
|
|
|
|
<span>体积: {{ currFile?.volume }}</span>
|
|
|
|
|
<span>重量: {{ currFile?.weight }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 缩略图区域 -->
|
|
|
|
|
<div class="thumbnail-container mt-[16px] w-[870px]">
|
|
|
|
|
<swiper ref="swiperRef" :modules="modules" :slides-per-view="3" :space-between="10" navigation
|
|
|
|
|
:scrollbar="{ draggable: false }" :centered-slides="false" :observer="true"
|
|
|
|
|
:observeParents="true" @swiper="onSwiper" @slideChange="onSlideChange">
|
|
|
|
|
<swiper-slide v-for="(file, index) in currFileList" :key="index"
|
|
|
|
|
@click="handleSlideClick(index)" :class="{ 'active-slide': activeIndex === index }">
|
|
|
|
|
<img :src="file?.image_url" v-if="file?.image_url" class="cursor-pointer" />
|
|
|
|
|
<SwiperPlayer class="cursor-pointer" :videoUrl="file?.video_url"
|
|
|
|
|
v-else-if="file?.video_url" :isPlaying="isPlaying && (activeIndex === index)" />
|
|
|
|
|
<div v-else>
|
|
|
|
|
<!-- //TODO 视频【图片】加载失败 -->
|
|
|
|
|
</div>
|
|
|
|
|
</swiper-slide>
|
|
|
|
|
</swiper>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="left-panel empty-bg" v-else></div>
|
|
|
|
|
<!-- 右侧表格区域 -->
|
|
|
|
|
<div class="flex-1 right-panel">
|
|
|
|
|
<div class="bg-transparent baseTable_wrap">
|
|
|
|
|
<BaseTable class="bg-transparent baseTable_box" :total="pagination.total"
|
|
|
|
|
:pageSize="pagination.pageSize" :dataSource="listData" :isFixedPagination="true"
|
|
|
|
|
:columns="columns" :page="pagination.currentPage" @change="handleTableChange"
|
|
|
|
|
:row-class-name="handleRowClassName" @row-click="handleRowClick">
|
|
|
|
|
</BaseTable>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="image-info" v-if="currFile?.image_url">
|
|
|
|
|
<!-- //TODO 参数单位和待确认 -->
|
|
|
|
|
<span>长: {{ currFile?.length }}</span>
|
|
|
|
|
<span>宽: {{ currFile?.width }}</span>
|
|
|
|
|
<span>高: {{ currFile?.height }}</span>
|
|
|
|
|
<span>体积: {{ currFile?.volume }}</span>
|
|
|
|
|
<span>重量: {{ currFile?.weight }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 缩略图区域 -->
|
|
|
|
|
<div class="thumbnail-container mt-[16px] w-[870px]">
|
|
|
|
|
<swiper
|
|
|
|
|
ref="swiperRef"
|
|
|
|
|
:modules="modules"
|
|
|
|
|
:slides-per-view="3"
|
|
|
|
|
:space-between="10"
|
|
|
|
|
navigation
|
|
|
|
|
:scrollbar="{ draggable: false }"
|
|
|
|
|
:centered-slides="false"
|
|
|
|
|
:observer="true"
|
|
|
|
|
:observeParents="true"
|
|
|
|
|
@swiper="onSwiper"
|
|
|
|
|
@slideChange="onSlideChange"
|
|
|
|
|
>
|
|
|
|
|
<swiper-slide
|
|
|
|
|
v-for="(file, index) in currFileList"
|
|
|
|
|
:key="index"
|
|
|
|
|
@click="handleSlideClick(index)"
|
|
|
|
|
:class="{ 'active-slide': activeIndex === index }"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
:src="file?.image_url"
|
|
|
|
|
v-if="file?.image_url"
|
|
|
|
|
class="cursor-pointer"
|
|
|
|
|
/>
|
|
|
|
|
<SwiperPlayer
|
|
|
|
|
class="cursor-pointer"
|
|
|
|
|
:videoUrl="file?.video_url"
|
|
|
|
|
v-else-if="file?.video_url"
|
|
|
|
|
:isPlaying="isPlaying && activeIndex === index"
|
|
|
|
|
/>
|
|
|
|
|
<div v-else>
|
|
|
|
|
<!-- //TODO 视频【图片】加载失败 -->
|
|
|
|
|
</div>
|
|
|
|
|
</swiper-slide>
|
|
|
|
|
</swiper>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<AlarmModal v-model:value="isAlarmOpen" :info="currentRow" :image="currFileList" @close="isAlarmOpen = false" />
|
|
|
|
|
<DeleteModal v-model:value="isDeleteOpen" @delete-success="getList()" :info="currentRow" @close="isDeleteOpen = false" />
|
|
|
|
|
<!-- <div class="bg_footer_desp">
|
|
|
|
|
</div> -->
|
|
|
|
|
<div class="left-panel empty-bg" v-else></div>
|
|
|
|
|
<!-- 右侧表格区域 -->
|
|
|
|
|
<div class="flex-1 right-panel">
|
|
|
|
|
<div class="bg-transparent baseTable_wrap">
|
|
|
|
|
<BaseTable
|
|
|
|
|
class="bg-transparent baseTable_box"
|
|
|
|
|
:total="pagination.total"
|
|
|
|
|
:pageSize="pagination.pageSize"
|
|
|
|
|
:dataSource="listData"
|
|
|
|
|
:isFixedPagination="true"
|
|
|
|
|
:columns="columns"
|
|
|
|
|
:page="pagination.currentPage"
|
|
|
|
|
@change="handleTableChange"
|
|
|
|
|
:row-class-name="handleRowClassName"
|
|
|
|
|
@row-click="handleRowClick"
|
|
|
|
|
>
|
|
|
|
|
</BaseTable>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<PointModal
|
|
|
|
|
v-model:value="isPointOpen"
|
|
|
|
|
:info="currentRow"
|
|
|
|
|
@close="isPointOpen = false"
|
|
|
|
|
/>
|
|
|
|
|
<AlarmModal
|
|
|
|
|
v-model:value="isAlarmOpen"
|
|
|
|
|
:info="currentRow"
|
|
|
|
|
:image="currFileList"
|
|
|
|
|
@close="isAlarmOpen = false"
|
|
|
|
|
/>
|
|
|
|
|
<DeleteModal
|
|
|
|
|
v-model:value="isDeleteOpen"
|
|
|
|
|
@delete-success="getList()"
|
|
|
|
|
:info="currentRow"
|
|
|
|
|
@close="isDeleteOpen = false"
|
|
|
|
|
/>
|
|
|
|
|
<!-- <div class="bg_footer_desp">
|
|
|
|
|
</div> -->
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { onBeforeRouteLeave } from 'vue-router';
|
|
|
|
|
import Player from '@/components/videoPlayer/Player.vue'
|
|
|
|
|
import ContentHeader from '@/components/ContentHeader.vue';
|
|
|
|
|
import { onBeforeRouteLeave } from "vue-router";
|
|
|
|
|
import Player from "@/components/videoPlayer/Player.vue";
|
|
|
|
|
import ContentHeader from "@/components/ContentHeader.vue";
|
|
|
|
|
import { BaseTable } from "@/components/CustomTable";
|
|
|
|
|
import SwiperPlayer from './components/SwiperPlayer.vue'
|
|
|
|
|
import SwiperPlayer from "./components/SwiperPlayer.vue";
|
|
|
|
|
import { Swiper, SwiperSlide } from "swiper/vue";
|
|
|
|
|
import { Navigation, Scrollbar } from "swiper/modules";
|
|
|
|
|
import { getAppearanceMonitorApi, getAppearanceMonitorDetailApi } from '@/api/dashboard';
|
|
|
|
|
import {
|
|
|
|
|
getAppearanceMonitorApi,
|
|
|
|
|
getAppearanceMonitorDetailApi,
|
|
|
|
|
} from "@/api/dashboard";
|
|
|
|
|
import { isSuccessApi } from "@/utils/forApi";
|
|
|
|
|
import AlarmModal from './components/AlarmModal.vue'
|
|
|
|
|
import DeleteModal from './components/DeleteModal.vue'
|
|
|
|
|
import { useWebSocketStore } from '@/stores/websocketStore';
|
|
|
|
|
import PointModal from "./components/PointModal.vue";
|
|
|
|
|
import AlarmModal from "./components/AlarmModal.vue";
|
|
|
|
|
import DeleteModal from "./components/DeleteModal.vue";
|
|
|
|
|
import { useWebSocketStore } from "@/stores/websocketStore";
|
|
|
|
|
import "swiper/css";
|
|
|
|
|
import 'swiper/scss';
|
|
|
|
|
import 'swiper/scss/navigation';
|
|
|
|
|
import "swiper/scss";
|
|
|
|
|
import "swiper/scss/navigation";
|
|
|
|
|
|
|
|
|
|
defineOptions({
|
|
|
|
|
name: "PoleMonitorIndex"
|
|
|
|
|
name: "PoleMonitorIndex",
|
|
|
|
|
});
|
|
|
|
|
const modules = [Navigation, Scrollbar];
|
|
|
|
|
const activeIndex = ref(-1);
|
|
|
|
|
const swiperRef = ref(null);
|
|
|
|
|
const columns = [
|
|
|
|
|
{
|
|
|
|
|
label: "站点",
|
|
|
|
|
property: "station",
|
|
|
|
|
width: 80,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "车号",
|
|
|
|
|
property: "train_number",
|
|
|
|
|
width: 155,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "车型",
|
|
|
|
|
property: "train_model",
|
|
|
|
|
width: 70,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "车厢号",
|
|
|
|
|
property: "train_carriage_number",
|
|
|
|
|
width: 95,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "告警类型",
|
|
|
|
|
property: "alarm_type",
|
|
|
|
|
width: 90,
|
|
|
|
|
{
|
|
|
|
|
label: "站点",
|
|
|
|
|
property: "station",
|
|
|
|
|
width: 80,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "车号",
|
|
|
|
|
property: "train_number",
|
|
|
|
|
width: 155,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "车型",
|
|
|
|
|
property: "train_model",
|
|
|
|
|
width: 70,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "车厢号",
|
|
|
|
|
property: "train_carriage_number",
|
|
|
|
|
width: 95,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "告警类型",
|
|
|
|
|
property: "alarm_type",
|
|
|
|
|
width: 90,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "故障类型",
|
|
|
|
|
property: "fault_type",
|
|
|
|
|
width: 100,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "等级",
|
|
|
|
|
property: "level",
|
|
|
|
|
width: 60,
|
|
|
|
|
},
|
|
|
|
|
// {
|
|
|
|
|
// label: "复核",
|
|
|
|
|
// property: "is_reviewed",
|
|
|
|
|
// formatter: ({ is_reviewed }) => {
|
|
|
|
|
// return is_reviewed === true
|
|
|
|
|
// ? "是"
|
|
|
|
|
// : "否";
|
|
|
|
|
// },
|
|
|
|
|
// width: 80,
|
|
|
|
|
// },
|
|
|
|
|
{
|
|
|
|
|
label: "时间",
|
|
|
|
|
property: "created_at",
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
slot: "operation",
|
|
|
|
|
label: "操作",
|
|
|
|
|
width: 140,
|
|
|
|
|
formatter: (row) => {
|
|
|
|
|
return h(
|
|
|
|
|
"div",
|
|
|
|
|
{
|
|
|
|
|
style: {
|
|
|
|
|
fontSize: "14px",
|
|
|
|
|
color: "#37EBFF",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
[
|
|
|
|
|
// h("i", {
|
|
|
|
|
// class: `iconfont icon-zishebeizu pr-[8px]`
|
|
|
|
|
// }),
|
|
|
|
|
h(
|
|
|
|
|
"span",
|
|
|
|
|
{
|
|
|
|
|
fontSize: "14px",
|
|
|
|
|
class: "pf-1",
|
|
|
|
|
},
|
|
|
|
|
[
|
|
|
|
|
h(
|
|
|
|
|
"i",
|
|
|
|
|
{
|
|
|
|
|
style: {
|
|
|
|
|
fontSize: "14px",
|
|
|
|
|
letterSpacing: "2px",
|
|
|
|
|
marginRight: "4px",
|
|
|
|
|
color: "#37EBFF",
|
|
|
|
|
},
|
|
|
|
|
onClick: () => {
|
|
|
|
|
// console.log(row.id);
|
|
|
|
|
// 这里可以添加按钮点击后的具体逻辑
|
|
|
|
|
isPointOpen.value = true;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
"点云"
|
|
|
|
|
),
|
|
|
|
|
h(
|
|
|
|
|
"i",
|
|
|
|
|
{
|
|
|
|
|
style: {
|
|
|
|
|
fontSize: "14px",
|
|
|
|
|
letterSpacing: "2px",
|
|
|
|
|
marginRight: "4px",
|
|
|
|
|
color: "#009DFF",
|
|
|
|
|
},
|
|
|
|
|
onClick: (row) => {
|
|
|
|
|
// console.log(row.id);
|
|
|
|
|
// 这里可以添加按钮点击后的具体逻辑
|
|
|
|
|
isAlarmOpen.value = true;
|
|
|
|
|
currentRow.value = row;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
"详情"
|
|
|
|
|
),
|
|
|
|
|
h(
|
|
|
|
|
"i",
|
|
|
|
|
{
|
|
|
|
|
style: {
|
|
|
|
|
fontSize: "14px",
|
|
|
|
|
letterSpacing: "2px",
|
|
|
|
|
marginRight: "4px",
|
|
|
|
|
color: "#FF2727",
|
|
|
|
|
},
|
|
|
|
|
onClick: (row) => {
|
|
|
|
|
// console.log(row.id);
|
|
|
|
|
// 这里可以添加按钮点击后的具体逻辑
|
|
|
|
|
isDeleteOpen.value = true;
|
|
|
|
|
currentRow.value = row;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
"删除"
|
|
|
|
|
),
|
|
|
|
|
]
|
|
|
|
|
),
|
|
|
|
|
]
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "故障类型",
|
|
|
|
|
property: "fault_type",
|
|
|
|
|
width: 100,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "等级",
|
|
|
|
|
property: "level",
|
|
|
|
|
width: 60,
|
|
|
|
|
},
|
|
|
|
|
// {
|
|
|
|
|
// label: "复核",
|
|
|
|
|
// property: "is_reviewed",
|
|
|
|
|
// formatter: ({ is_reviewed }) => {
|
|
|
|
|
// return is_reviewed === true
|
|
|
|
|
// ? "是"
|
|
|
|
|
// : "否";
|
|
|
|
|
// },
|
|
|
|
|
// width: 80,
|
|
|
|
|
// },
|
|
|
|
|
{
|
|
|
|
|
label: "时间",
|
|
|
|
|
property: "created_at"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
slot: "operation",
|
|
|
|
|
label: "操作",
|
|
|
|
|
width: 120,
|
|
|
|
|
formatter: (row) => {
|
|
|
|
|
return h(
|
|
|
|
|
"div",
|
|
|
|
|
{
|
|
|
|
|
style: {
|
|
|
|
|
fontSize: "14px",
|
|
|
|
|
color:"#37EBFF"
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
[
|
|
|
|
|
// h("i", {
|
|
|
|
|
// class: `iconfont icon-zishebeizu pr-[8px]`
|
|
|
|
|
// }),
|
|
|
|
|
h(
|
|
|
|
|
"span",
|
|
|
|
|
{
|
|
|
|
|
fontSize: "14px",
|
|
|
|
|
class: "pf-1",
|
|
|
|
|
},
|
|
|
|
|
[
|
|
|
|
|
h("i",
|
|
|
|
|
{
|
|
|
|
|
style: {
|
|
|
|
|
fontSize: "14px",
|
|
|
|
|
letterSpacing: "2px",
|
|
|
|
|
marginRight: "4px",
|
|
|
|
|
color:"#009DFF"
|
|
|
|
|
},
|
|
|
|
|
onClick: (row) => {
|
|
|
|
|
// console.log(row.id);
|
|
|
|
|
// 这里可以添加按钮点击后的具体逻辑
|
|
|
|
|
isAlarmOpen.value = true;
|
|
|
|
|
currentRow.value = row;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
"详情"
|
|
|
|
|
),
|
|
|
|
|
h("i",
|
|
|
|
|
{
|
|
|
|
|
style: {
|
|
|
|
|
fontSize: "14px",
|
|
|
|
|
letterSpacing: "2px",
|
|
|
|
|
marginRight: "4px",
|
|
|
|
|
color:"#FF2727"
|
|
|
|
|
},
|
|
|
|
|
onClick: (row) => {
|
|
|
|
|
// console.log(row.id);
|
|
|
|
|
// 这里可以添加按钮点击后的具体逻辑
|
|
|
|
|
isDeleteOpen.value = true;
|
|
|
|
|
currentRow.value = row;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
"删除"
|
|
|
|
|
),
|
|
|
|
|
]
|
|
|
|
|
)
|
|
|
|
|
]
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
|
|
|
|
|
const listData = ref<Record<string, any>[]>([]); // 列表数据
|
|
|
|
|
@ -240,25 +334,30 @@ const currFileList = ref<Record<string, any>[]>([]); // 详情的文件列表
|
|
|
|
|
const currFile = ref<Record<string, any>>({}); // 详情数据
|
|
|
|
|
const isPlaying = ref<boolean>(false); // 是否播放
|
|
|
|
|
const searchForm = reactive({
|
|
|
|
|
train_number: "",
|
|
|
|
|
train_carriage_number: "",
|
|
|
|
|
fault_type: "",
|
|
|
|
|
station: "",
|
|
|
|
|
type: "pole"
|
|
|
|
|
train_number: "",
|
|
|
|
|
train_carriage_number: "",
|
|
|
|
|
fault_type: "",
|
|
|
|
|
station: "",
|
|
|
|
|
type: "pole",
|
|
|
|
|
});
|
|
|
|
|
const dataLoading = ref(true);
|
|
|
|
|
const isPointOpen = ref<Boolean>(false); //点云弹窗
|
|
|
|
|
const isAlarmOpen = ref<Boolean>(false); //详情弹窗
|
|
|
|
|
const isDeleteOpen = ref<Boolean>(false); //删除弹窗
|
|
|
|
|
|
|
|
|
|
const websocketStore = useWebSocketStore();
|
|
|
|
|
// 监听 messages 的变化
|
|
|
|
|
watch(() => websocketStore.messages, (newMessages: string[], oldMessages: string[]) => {
|
|
|
|
|
if(newMessages?.length > 0 && !isAlarmOpen.value) {
|
|
|
|
|
currentRow.value = newMessages[newMessages?.length - 1];
|
|
|
|
|
currFileList.value = newMessages[newMessages?.length - 1]?.images;
|
|
|
|
|
isAlarmOpen.value = true;
|
|
|
|
|
watch(
|
|
|
|
|
() => websocketStore.messages,
|
|
|
|
|
(newMessages: string[], oldMessages: string[]) => {
|
|
|
|
|
if (newMessages?.length > 0 && !isAlarmOpen.value) {
|
|
|
|
|
currentRow.value = newMessages[newMessages?.length - 1];
|
|
|
|
|
currFileList.value = newMessages[newMessages?.length - 1]?.images;
|
|
|
|
|
isAlarmOpen.value = true;
|
|
|
|
|
}
|
|
|
|
|
}, { deep: true, immediate: true });
|
|
|
|
|
},
|
|
|
|
|
{ deep: true, immediate: true }
|
|
|
|
|
);
|
|
|
|
|
// const isCurrPlaying = computed(() => {
|
|
|
|
|
// return (index) => {
|
|
|
|
|
// return isPlaying.value && (activeIndex === index)
|
|
|
|
|
@ -266,39 +365,43 @@ watch(() => websocketStore.messages, (newMessages: string[], oldMessages: string
|
|
|
|
|
// })
|
|
|
|
|
|
|
|
|
|
const togglePlay = () => {
|
|
|
|
|
isPlaying.value = !isPlaying.value;
|
|
|
|
|
isPlaying.value = !isPlaying.value;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleSlideClick = (index) => {
|
|
|
|
|
if (activeIndex.value === index) {
|
|
|
|
|
togglePlay() // 播放 暂停
|
|
|
|
|
} else {
|
|
|
|
|
isPlaying.value = false;
|
|
|
|
|
activeIndex.value = index;
|
|
|
|
|
currFile.value = currFileList.value[index]
|
|
|
|
|
}
|
|
|
|
|
if (activeIndex.value === index) {
|
|
|
|
|
togglePlay(); // 播放 暂停
|
|
|
|
|
} else {
|
|
|
|
|
isPlaying.value = false;
|
|
|
|
|
activeIndex.value = index;
|
|
|
|
|
currFile.value = currFileList.value[index];
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
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 getFileList = async () => {
|
|
|
|
|
try {
|
|
|
|
|
const res = await getAppearanceMonitorDetailApi({ id: currentRow.value?.id, current: 1, pageSize: 1000 })
|
|
|
|
|
console.log(res.data, 'getDetailList_data')
|
|
|
|
|
if (isSuccessApi(res)) {
|
|
|
|
|
currFileList.value = res.data.data;
|
|
|
|
|
currFile.value = res.data.data[0];
|
|
|
|
|
activeIndex.value = 0;
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error, 'getDetailList_error')
|
|
|
|
|
try {
|
|
|
|
|
const res = await getAppearanceMonitorDetailApi({
|
|
|
|
|
id: currentRow.value?.id,
|
|
|
|
|
current: 1,
|
|
|
|
|
pageSize: 1000,
|
|
|
|
|
});
|
|
|
|
|
console.log(res.data, "getDetailList_data");
|
|
|
|
|
if (isSuccessApi(res)) {
|
|
|
|
|
currFileList.value = res.data.data;
|
|
|
|
|
currFile.value = res.data.data[0];
|
|
|
|
|
activeIndex.value = 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error, "getDetailList_error");
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
// TODO mock 获取视频列表数据
|
|
|
|
|
// const getFileList = async () => {
|
|
|
|
|
// try {
|
|
|
|
|
@ -317,74 +420,77 @@ const getFileList = async () => {
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
function loadDetail() {
|
|
|
|
|
currentRow.value = listData.value[0]
|
|
|
|
|
getFileList()
|
|
|
|
|
currentRow.value = listData.value[0];
|
|
|
|
|
getFileList();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 获取列表
|
|
|
|
|
const getList = async () => {
|
|
|
|
|
try {
|
|
|
|
|
const { currentPage, pageSize } = pagination.value;
|
|
|
|
|
const res = await getAppearanceMonitorApi({ ...searchForm, current: currentPage, pageSize })
|
|
|
|
|
console.log(res.data, 'getList_data')
|
|
|
|
|
if (isSuccessApi(res)) {
|
|
|
|
|
listData.value = res.data.data;
|
|
|
|
|
if (listData.value?.length > 0) {
|
|
|
|
|
loadDetail()
|
|
|
|
|
pagination.value = {
|
|
|
|
|
...pagination.value,
|
|
|
|
|
total: res.data.total
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('获取数据失败:', error)
|
|
|
|
|
try {
|
|
|
|
|
const { currentPage, pageSize } = pagination.value;
|
|
|
|
|
const res = await getAppearanceMonitorApi({
|
|
|
|
|
...searchForm,
|
|
|
|
|
current: currentPage,
|
|
|
|
|
pageSize,
|
|
|
|
|
});
|
|
|
|
|
console.log(res.data, "getList_data");
|
|
|
|
|
if (isSuccessApi(res)) {
|
|
|
|
|
listData.value = res.data.data;
|
|
|
|
|
if (listData.value?.length > 0) {
|
|
|
|
|
loadDetail();
|
|
|
|
|
pagination.value = {
|
|
|
|
|
...pagination.value,
|
|
|
|
|
total: res.data.total,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error("获取数据失败:", error);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 查询方法
|
|
|
|
|
const handleQuery = () => {
|
|
|
|
|
getList()
|
|
|
|
|
getList();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 重置方法
|
|
|
|
|
const handleReset = () => {
|
|
|
|
|
searchForm.train_number = '';
|
|
|
|
|
searchForm.station = '';
|
|
|
|
|
searchForm.train_carriage_number = '';
|
|
|
|
|
searchForm.fault_type = '';
|
|
|
|
|
getList()
|
|
|
|
|
searchForm.train_number = "";
|
|
|
|
|
searchForm.station = "";
|
|
|
|
|
searchForm.train_carriage_number = "";
|
|
|
|
|
searchForm.fault_type = "";
|
|
|
|
|
getList();
|
|
|
|
|
};
|
|
|
|
|
// 分页表格切换参数
|
|
|
|
|
function handleTableChange(record) {
|
|
|
|
|
console.log("handleTableChange_record", record);
|
|
|
|
|
pagination.value = {
|
|
|
|
|
...pagination.value,
|
|
|
|
|
currentPage: record.page,
|
|
|
|
|
pageSize: record.pageSize
|
|
|
|
|
};
|
|
|
|
|
getList();
|
|
|
|
|
console.log("handleTableChange_record", record);
|
|
|
|
|
pagination.value = {
|
|
|
|
|
...pagination.value,
|
|
|
|
|
currentPage: record.page,
|
|
|
|
|
pageSize: record.pageSize,
|
|
|
|
|
};
|
|
|
|
|
getList();
|
|
|
|
|
}
|
|
|
|
|
// 定义行类名方法
|
|
|
|
|
const handleRowClassName = ({ row }) => {
|
|
|
|
|
return row.id === currentRow.value.id ? 'selected-row' : '';
|
|
|
|
|
return row.id === currentRow.value.id ? "selected-row" : "";
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 行点击事件处理
|
|
|
|
|
const handleRowClick = (row, event, rowIndex) => {
|
|
|
|
|
currentRow.value = row;
|
|
|
|
|
getFileList()
|
|
|
|
|
currentRow.value = row;
|
|
|
|
|
getFileList();
|
|
|
|
|
};
|
|
|
|
|
onBeforeRouteLeave(() => {
|
|
|
|
|
isAlarmOpen.value = false;
|
|
|
|
|
currentRow.value = {};
|
|
|
|
|
currFileList.value = [];
|
|
|
|
|
isAlarmOpen.value = false;
|
|
|
|
|
currentRow.value = {};
|
|
|
|
|
currFileList.value = [];
|
|
|
|
|
});
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getList();
|
|
|
|
|
getList();
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
@import url('./PoleMonitor.scss');
|
|
|
|
|
</style>
|
|
|
|
|
@import url("./PoleMonitor.scss");
|
|
|
|
|
</style>
|
|
|
|
|
|
