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

feat: 点云数据调换到撑杆模块

Browse Source
main
donghao 3 months ago
parent 3c8f45d6f1
commit ecf5023e3c
3 changed files with 416 additions and 309 deletions
Show Stats Download Patch File Download Diff File

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

@ -85,7 +85,7 @@
</div>
</div>
<PointModal v-model:value="isPointOpen" :info="currentRow" @close="isPointOpen = false" />
<!-- <PointModal v-model:value="isPointOpen" :info="currentRow" @close="isPointOpen = false" /> -->
<AppearanceAlarmModal v-model:value="isAlarmOpen" :info="currentRow" :image="currFileList" :beforeImage="currBeforeFileList" @close="isAlarmOpen = false" />
<DeleteModal v-model:value="isDeleteOpen" @delete-success="getList()" :info="currentRow" @close="isDeleteOpen = false" />
</div>
@ -99,7 +99,7 @@ import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Scrollbar } from "swiper/modules";
import { getAppearanceMonitorApi, getAppearanceMonitorDetailApi, getBeforeMonitorDetailApi } from '@/api/dashboard';
import { isSuccessApi } from "@/utils/forApi";
import PointModal from './components/PointModal.vue'
// import PointModal from './components/PointModal.vue'
import AppearanceAlarmModal from './components/AppearanceAlarmModal.vue'
import DeleteModal from './components/DeleteModal.vue'
import { useWebSocketStore } from '@/stores/websocketStore';
@ -112,7 +112,7 @@ import { color } from 'echarts';
const modules = [Navigation, Scrollbar];
const activeIndex = ref(-1);
const swiperRef = ref(null);
const isPointOpen = ref<Boolean>(false); //点云弹窗
// const isPointOpen = ref<Boolean>(false); //点云弹窗
const isAlarmOpen = ref<Boolean>(false); //详情弹窗
const isDeleteOpen = ref<Boolean>(false); //删除弹窗
const websocketStore = useWebSocketStore();
@ -187,7 +187,7 @@ const columns = [
{
slot: "operation",
label: "操作",
width: 140,
width: 120,
formatter: (row) => {
return h(
"div",
@ -208,22 +208,22 @@ const columns = [
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:"#37EBFF"
// },
// onClick: () => {
// // console.log(row.id);
// // 这里可以添加按钮点击后的具体逻辑
// isPointOpen.value = true;
// }
// },
// "点云"
// ),
h("i",
{
style: {

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

@ -3,8 +3,7 @@
<div class="module-header">
<ContentHeader bgLayout="1855">
<template #title>
<div class="w-[200px] bg_title bg_title_3">
</div>
<div class="w-[200px] bg_title bg_title_3"></div>
</template>
<template #extra>
<div></div>
@ -14,19 +13,41 @@
<div class="pole-main-content px-[16px]">
<!-- 搜索区域 -->
<div class="pole-monitor-search-box">
<el-select v-model="searchForm.station" placeholder="站点" class="custom-select">
<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-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">
<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">
@ -42,9 +63,14 @@
<!-- <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">
<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>
@ -60,14 +86,36 @@
</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)" />
<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>
@ -79,40 +127,67 @@
<!-- 右侧表格区域 -->
<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
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>
<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" />
<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);
@ -165,20 +240,20 @@ const columns = [
// },
{
label: "时间",
property: "created_at"
property: "created_at",
},
{
slot: "operation",
label: "操作",
width: 120,
width: 140,
formatter: (row) => {
return h(
"div",
{
style: {
fontSize: "14px",
color:"#37EBFF"
}
color: "#37EBFF",
},
},
[
// h("i", {
@ -191,47 +266,66 @@ const columns = [
class: "pf-1",
},
[
h("i",
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"
color: "#009DFF",
},
onClick: (row) => {
// console.log(row.id);
// 这里可以添加按钮点击后的具体逻辑
isAlarmOpen.value = true;
currentRow.value = row;
}
},
},
"详情"
),
h("i",
h(
"i",
{
style: {
fontSize: "14px",
letterSpacing: "2px",
marginRight: "4px",
color:"#FF2727"
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>[]>([]); // 列表数据
@ -244,21 +338,26 @@ const searchForm = reactive({
train_carriage_number: "",
fault_type: "",
station: "",
type: "pole"
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) {
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)
@ -271,16 +370,16 @@ const togglePlay = () => {
const handleSlideClick = (index) => {
if (activeIndex.value === index) {
togglePlay() // 播放 暂停
togglePlay(); // 播放 暂停
} else {
isPlaying.value = false;
activeIndex.value = index;
currFile.value = currFileList.value[index]
currFile.value = currFileList.value[index];
}
};
const onSwiper = (swiper) => {
swiperRef.value = swiper;
console.log('Swiper 实例已获取:', swiper);
console.log("Swiper 实例已获取:", swiper);
};
const onSlideChange = () => {
console.log("slide change");
@ -288,17 +387,21 @@ const onSlideChange = () => {
// 文件详情
const getFileList = async () => {
try {
const res = await getAppearanceMonitorDetailApi({ id: currentRow.value?.id, current: 1, pageSize: 1000 })
console.log(res.data, 'getDetailList_data')
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')
console.log(error, "getDetailList_error");
}
}
};
// TODO mock 获取视频列表数据
// const getFileList = async () => {
// try {
@ -317,44 +420,47 @@ 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')
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()
loadDetail();
pagination.value = {
...pagination.value,
total: res.data.total
total: res.data.total,
};
}
}
} catch (error) {
console.error('获取数据失败:', 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) {
@ -362,19 +468,19 @@ function handleTableChange(record) {
pagination.value = {
...pagination.value,
currentPage: record.page,
pageSize: record.pageSize
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()
getFileList();
};
onBeforeRouteLeave(() => {
isAlarmOpen.value = false;
@ -386,5 +492,5 @@ onMounted(() => {
});
</script>
<style lang="scss">
@import url('./PoleMonitor.scss');
@import url("./PoleMonitor.scss");
</style>

3
vite.config.ts
Unescape Escape View File

@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2025-03-06 11:27:03
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2025-03-13 09:35:33
* @LastEditTime: 2025-06-26 13:34:26
* @FilePath: \vite-ai\data-dashboard\vite.config.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
@ -21,6 +21,7 @@ export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '')
return {
base: "./", // 设置打包路径
resolve: {
alias: [
{ find: /^@\//, replacement: resolve(__dirname, "src") + "/" },

Write Preview
Loading…
Cancel
Save