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 48d42f9409
commit 5fc4d7ec61
6 changed files with 146 additions and 63 deletions
Show Stats Download Patch File Download Diff File

10
src/api/dashboard.ts
Unescape Escape View File

@ -18,3 +18,13 @@ export const getDeviceStatusApi = (params: any) => {
return request.get(`/api/v1/device/device/`, params); return request.get(`/api/v1/device/device/`, params);
}; };
// 撑杆检测
export const getAppearanceMonitorApi = (params: any) => {
return request.get(`/api/v1/record/record/`, params);
};
// 撑杆检测详情
export const getAppearanceMonitorDetailApi = (params: any) => {
return request.get(`/api/v1/record/record_detail_list/`, params);
};

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

@ -32,15 +32,15 @@
<div class="px-[16px]"> <div class="px-[16px]">
<div class="appearance-monitor-search-box"> <div class="appearance-monitor-search-box">
<el-select v-model="searchForm.name" placeholder="列车号" class="custom-select"> <el-select v-model="searchForm.train_number" placeholder="列车号" class="custom-select">
<el-option label="A" value="deviceA"></el-option> <el-option label="A" value="deviceA"></el-option>
<el-option label="B" value="deviceB"></el-option> <el-option label="B" value="deviceB"></el-option>
</el-select> </el-select>
<el-select v-model="searchForm.deviceId" placeholder="车厢号" class="custom-select"> <el-select v-model="searchForm.train_carriage_number" placeholder="车厢号" class="custom-select">
<el-option label="ID-001" value="id001"></el-option> <el-option label="ID-001" value="id001"></el-option>
<el-option label="ID-002" value="id002"></el-option> <el-option label="ID-002" value="id002"></el-option>
</el-select> </el-select>
<el-select v-model="searchForm.faultType" placeholder="故障类型" class="custom-select"> <el-select v-model="searchForm.fault_type" placeholder="故障类型" class="custom-select">
<el-option label="类型1" value="id001"></el-option> <el-option label="类型1" value="id001"></el-option>
<el-option label="类型2" value="id002"></el-option> <el-option label="类型2" value="id002"></el-option>
</el-select> </el-select>
@ -57,7 +57,8 @@
<template v-if="pagination.total > 0"> <template v-if="pagination.total > 0">
<BaseTable class="bg-transparent baseTable_box" :total="pagination.total" :pageSize="pagination.pageSize" <BaseTable class="bg-transparent baseTable_box" :total="pagination.total" :pageSize="pagination.pageSize"
:dataSource="listData" :isFixedPagination="true" :columns="columns" :page="pagination.currentPage" :dataSource="listData" :isFixedPagination="true" :columns="columns" :page="pagination.currentPage"
@change="handleTableChange"> @change="handleTableChange":row-class-name="handleRowClassName"
@row-click="handleRowClick">
</BaseTable> </BaseTable>
</template> </template>
</div> </div>
@ -72,6 +73,7 @@ import ContentHeader from "@/components/ContentHeader.vue";
import { BaseTable } from "@/components/CustomTable"; import { BaseTable } from "@/components/CustomTable";
import { Swiper, SwiperSlide } from "swiper/vue"; import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Scrollbar } from "swiper/modules"; import { Navigation, Scrollbar } from "swiper/modules";
import { getAppearanceMonitorApi, getAppearanceMonitorDetailApi } from '@/api/dashboard';
import "swiper/css"; import "swiper/css";
import 'swiper/scss'; import 'swiper/scss';
import 'swiper/scss/navigation'; import 'swiper/scss/navigation';
@ -81,27 +83,27 @@ const modules = [Navigation, Scrollbar];
const columns = [ const columns = [
{ {
label: "车号", label: "车号",
property: "carNo", property: "train_number",
width: 80, width: 80,
}, },
{ {
label: "车型", label: "车型",
property: "carType", property: "train_model",
width: 80, width: 80,
}, },
{ {
label: "车厢号", label: "车厢号",
property: "carriageNo", property: "train_carriage_number",
width: 80, width: 80,
}, },
{ {
label: "告警类型", label: "告警类型",
property: "warnType", property: "alarm_type",
width: 120, width: 120,
}, },
{ {
label: "故障类型", label: "故障类型",
property: "faultType", property: "fault_type",
width: 120, width: 120,
}, },
{ {
@ -111,35 +113,35 @@ const columns = [
}, },
{ {
label: "复核", label: "复核",
property: "review", property: "is_reviewed",
width: 60, width: 60,
}, },
{ {
label: "时间", label: "时间",
property: "date" property: "created_at"
} }
] ]
const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 }); const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
const listData = ref([]); const listData = ref([]);
const listDetail = ref([]);
// 搜索表单 // 搜索表单
const searchForm = reactive({ const searchForm = reactive({
trainNo: "", train_number: "",
carriageNo: "", train_carriage_number: "",
faultType: "", fault_type: "",
type: "appearance"
}); });
const dataLoading = ref(true); const dataLoading = ref(true);
const getList = async () => { const getList = async () => {
const { currentPage, pageSize } = pagination.value; const { currentPage, pageSize } = pagination.value;
const res = await fetch('/api/getPoleMonitorList', { const res = await getAppearanceMonitorApi({ ...searchForm, current: currentPage, pageSize })
method: 'POST', const { data } = await res
body: JSON.stringify({ ...searchForm, page: currentPage, pageSize })
})
const { data } = await res.json()
console.log(data, 'getList_data') console.log(data, 'getList_data')
listData.value = data.list; listData.value = data.data;
getDetail(listData.value[0].id)
console.log(data.list); console.log(data.list);
pagination.value = { pagination.value = {
...pagination.value, ...pagination.value,
@ -148,6 +150,14 @@ const getList = async () => {
dataLoading.value = false; dataLoading.value = false;
}; };
const getDetail = async (id: any) => {
const res = await getAppearanceMonitorDetailApi({ id, current:1,})
const { data } = await res
console.log(data, 'getDetail_data')
listDetail.value = data.data;
console.log(data.data);
}
// 查询方法 // 查询方法
const handleQuery = () => { const handleQuery = () => {
getList() getList()
@ -195,6 +205,17 @@ const onSwiper = (swiper) => {
const onSlideChange = () => { const onSlideChange = () => {
console.log("slide change"); console.log("slide change");
}; };
const currentRowIndex = ref(-1);
// 定义行类名方法
const handleRowClassName = ({ row }) => {
return row.train_number === currentRowIndex.value ? 'selected-row' : '';
};
// 行点击事件处理
const handleRowClick = (row, event, rowIndex) => {
currentRowIndex.value = row.train_number;
getDetail(row.id)
};
onMounted(() => { onMounted(() => {
getList(); getList();

3
src/views/dashboard/DataOverview.scss
Unescape Escape View File

@ -16,6 +16,9 @@
&>li{ &>li{
width: 50%; width: 50%;
} }
&>li:last-child{
margin-left: 16px;
}
.module-header { .module-header {
color: #4a7ebf; color: #4a7ebf;
margin-bottom: 15px; margin-bottom: 15px;

32
src/views/dashboard/DataOverview.vue
Unescape Escape View File

@ -78,8 +78,18 @@
</template> </template>
<template #extra> <template #extra>
<el-select v-model="searchForm.name" placeholder="时间" class="custom-select"> <el-select v-model="searchForm.name" placeholder="时间" class="custom-select">
<el-option label="A" value="deviceA"></el-option> <el-option label="1月" value="1"></el-option>
<el-option label="B" value="deviceB"></el-option> <el-option label="2月" value="2"></el-option>
<el-option label="3月" value="3"></el-option>
<el-option label="4月" value="4"></el-option>
<el-option label="5月" value="5"></el-option>
<el-option label="6月" value="6"></el-option>
<el-option label="7月" value="7"></el-option>
<el-option label="8月" value="8"></el-option>
<el-option label="9月" value="9"></el-option>
<el-option label="10月" value="10"></el-option>
<el-option label="11月" value="11"></el-option>
<el-option label="12月" value="12"></el-option>
</el-select> </el-select>
</template> </template>
</ContentHeader> </ContentHeader>
@ -113,8 +123,18 @@
</template> </template>
<template #extra> <template #extra>
<el-select v-model="searchForm.name" placeholder="时间" class="custom-select"> <el-select v-model="searchForm.name" placeholder="时间" class="custom-select">
<el-option label="A" value="deviceA"></el-option> <el-option label="1月" value="1"></el-option>
<el-option label="B" value="deviceB"></el-option> <el-option label="2月" value="2"></el-option>
<el-option label="3月" value="3"></el-option>
<el-option label="4月" value="4"></el-option>
<el-option label="5月" value="5"></el-option>
<el-option label="6月" value="6"></el-option>
<el-option label="7月" value="7"></el-option>
<el-option label="8月" value="8"></el-option>
<el-option label="9月" value="9"></el-option>
<el-option label="10月" value="10"></el-option>
<el-option label="11月" value="11"></el-option>
<el-option label="12月" value="12"></el-option>
</el-select> </el-select>
</template> </template>
</ContentHeader> </ContentHeader>
@ -158,6 +178,10 @@ import BarChart from "./components/BarChart.vue";
import PieChart from "./components/PieChart.vue"; import PieChart from "./components/PieChart.vue";
import PieChartSmall from "./components/PieChartSmall.vue"; import PieChartSmall from "./components/PieChartSmall.vue";
import DeviceStatus from "./components/DeviceStatus.vue"; import DeviceStatus from "./components/DeviceStatus.vue";
defineOptions({
name: "DataOverviewWrap"
});
const xData = ref(["1月", "2月", "3月", "4月", "5月"]); const xData = ref(["1月", "2月", "3月", "4月", "5月"]);
const legendArr = ["车体检测", "撑杆检测"]; const legendArr = ["车体检测", "撑杆检测"];
const datas = [ const datas = [

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

@ -31,7 +31,11 @@
position: relative; position: relative;
background-color: #090F48; background-color: #090F48;
border-radius: 4px; border-radius: 4px;
img { // img {
// width: 100%;
// max-height: 460px;
// }
video {
width: 100%; width: 100%;
max-height: 460px; max-height: 460px;
} }
@ -62,7 +66,8 @@
border-radius: 4px; border-radius: 4px;
} }
} }
.active-slide img { .active-slide img,
.active-slide video {
border-radius: 4px; border-radius: 4px;
border: 2px solid #2ecce0; border: 2px solid #2ecce0;
} }

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

@ -22,15 +22,15 @@
<div class="pole-main-content px-[16px]"> <div class="pole-main-content px-[16px]">
<!-- 搜索区域 --> <!-- 搜索区域 -->
<div class="pole-monitor-search-box"> <div class="pole-monitor-search-box">
<el-select v-model="searchForm.name" placeholder="列车号" class="custom-select"> <el-select v-model="searchForm.train_number" placeholder="列车号" class="custom-select">
<el-option label="A" value="deviceA"></el-option> <el-option label="A" value="deviceA"></el-option>
<el-option label="B" value="deviceB"></el-option> <el-option label="B" value="deviceB"></el-option>
</el-select> </el-select>
<el-select v-model="searchForm.deviceId" placeholder="车厢号" class="custom-select"> <el-select v-model="searchForm.train_carriage_number" placeholder="车厢号" class="custom-select">
<el-option label="ID-001" value="id001"></el-option> <el-option label="ID-001" value="id001"></el-option>
<el-option label="ID-002" value="id002"></el-option> <el-option label="ID-002" value="id002"></el-option>
</el-select> </el-select>
<el-select v-model="searchForm.faultType" placeholder="故障类型" class="custom-select"> <el-select v-model="searchForm.fault_type" placeholder="故障类型" class="custom-select">
<el-option label="类型1" value="id001"></el-option> <el-option label="类型1" value="id001"></el-option>
<el-option label="类型2" value="id002"></el-option> <el-option label="类型2" value="id002"></el-option>
</el-select> </el-select>
@ -47,13 +47,14 @@
<div class="left-panel w-[870px]"> <div class="left-panel w-[870px]">
<!-- 主图显示 --> <!-- 主图显示 -->
<div class="main-image"> <div class="main-image">
<img src="https://picsum.photos/300/200?random=1" alt="监控画面"> <!-- <img src="https://picsum.photos/300/200?random=1" alt="监控画面"> -->
<video ref="refVideo" controls muted :src="videoDetail" width="100%" height="100%" style="object-fit: fill;"></video>
<div class="image-info"> <div class="image-info">
<span>长: 35cm</span> <span>长: {{ detailList?.length }}cm</span>
<span>宽: 35cm</span> <span>宽: {{ detailList?.width }}cm</span>
<span>高: 28cm</span> <span>高: {{ detailList?.height }}cm</span>
<span>体积: 50960</span> <span>体积: {{ detailList?.weight }}</span>
<span>重量: 58kg</span> <span>重量: {{ detailList?.weight }}kg</span>
</div> </div>
</div> </div>
@ -62,9 +63,10 @@
<swiper ref="swiperRef" :modules="modules" :slides-per-view="3" :space-between="10" navigation <swiper ref="swiperRef" :modules="modules" :slides-per-view="3" :space-between="10" navigation
:scrollbar="{ draggable: false }" :centered-slides="false" :observer="true" :scrollbar="{ draggable: false }" :centered-slides="false" :observer="true"
:observeParents="true" @swiper="onSwiper" @slideChange="onSlideChange"> :observeParents="true" @swiper="onSwiper" @slideChange="onSlideChange">
<swiper-slide v-for="(image, index) in images" :key="index" @click="handleSlideClick(index)" <swiper-slide v-for="(image, index) in listDetail" :key="index" @click="handleSlideClick(index)"
:class="{ 'active-slide': activeIndex === index }"> :class="{ 'active-slide': activeIndex === index }">
<img :src="image" alt="Slide" /> <!-- <img :src="image" alt="Slide" /> -->
<video ref="refVideo" :controls="false" muted :src="videoUrl" width="100%" height="100%"></video>
</swiper-slide> </swiper-slide>
</swiper> </swiper>
</div> </div>
@ -92,6 +94,7 @@ import ContentHeader from '@/components/ContentHeader.vue';
import { BaseTable } from "@/components/CustomTable"; import { BaseTable } from "@/components/CustomTable";
import { Swiper, SwiperSlide } from "swiper/vue"; import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Scrollbar } from "swiper/modules"; import { Navigation, Scrollbar } from "swiper/modules";
import { getAppearanceMonitorApi, getAppearanceMonitorDetailApi } from '@/api/dashboard';
import "swiper/css"; import "swiper/css";
import 'swiper/scss'; import 'swiper/scss';
import 'swiper/scss/navigation'; import 'swiper/scss/navigation';
@ -102,15 +105,16 @@ defineOptions({
const modules = [Navigation, Scrollbar]; const modules = [Navigation, Scrollbar];
const images = ref([ const images = ref([
'https://picsum.photos/300/200?random=1', 'https://picsum.photos/300/200?random=1',
'https://picsum.photos/300/200?random=2', 'https://picsum.photos/300/200?random=2',
'https://picsum.photos/300/200?random=3', 'https://picsum.photos/300/200?random=3',
'https://picsum.photos/300/200?random=4', 'https://picsum.photos/300/200?random=4',
'https://picsum.photos/300/200?random=5' 'https://picsum.photos/300/200?random=5'
]); ]);
const activeIndex = ref(-1); const activeIndex = ref(-1);
const handleSlideClick = (index) => { const handleSlideClick = (index) => {
console.log(index); console.log(index);
activeIndex.value = index; activeIndex.value = index;
videoDetail.value = videoUrl.value
}; };
const swiperRef = ref(null); const swiperRef = ref(null);
console.log(swiperRef.value); console.log(swiperRef.value);
@ -127,27 +131,27 @@ const currentRowIndex = ref(-1);
const columns = [ const columns = [
{ {
label: "车号", label: "车号",
property: "carNo", property: "train_number",
width: 100, width: 100,
}, },
{ {
label: "车型", label: "车型",
property: "carType", property: "train_model",
width: 100, width: 100,
}, },
{ {
label: "车厢号", label: "车厢号",
property: "carriageNo", property: "train_carriage_number",
width: 100, width: 100,
}, },
{ {
label: "告警类型", label: "告警类型",
property: "warnType", property: "alarm_type",
width: 120, width: 120,
}, },
{ {
label: "故障类型", label: "故障类型",
property: "faultType", property: "fault_type",
width: 120, width: 120,
}, },
{ {
@ -157,45 +161,56 @@ const columns = [
}, },
{ {
label: "复核", label: "复核",
property: "review", property: "is_reviewed",
width: 80, width: 80,
}, },
{ {
label: "时间", label: "时间",
property: "date" property: "created_at"
} }
] ]
const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 }); const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
const listData = ref([]); const listData = ref([]);
const listDetail = ref([]);
const searchForm = reactive({ const searchForm = reactive({
name: "", train_number: "",
status: "", train_carriage_number: "",
faultType: "", fault_type: "",
type: "pole"
}); });
const dataLoading = ref(true); const dataLoading = ref(true);
const getList = async () => { const getList = async () => {
const { currentPage, pageSize } = pagination.value; const { currentPage, pageSize } = pagination.value;
const res = await fetch('/api/getPoleMonitorList', { const res = await getAppearanceMonitorApi({ ...searchForm, current: currentPage, pageSize })
method: 'POST', const { data } = await res
body: JSON.stringify({ ...searchForm, page: currentPage, pageSize })
})
const { data } = await res.json()
console.log(data, 'getList_data') console.log(data, 'getList_data')
listData.value = data.list; listData.value = data.data;
console.log(data.list); getDetail(listData.value[0].id)
console.log(data.data);
pagination.value = { pagination.value = {
...pagination.value, ...pagination.value,
total: data.total total: data.total
}; };
dataLoading.value = false; dataLoading.value = false;
}; };
const videoDetail = ref(null)
const videoUrl = ref("http://192.168.10.28:8081/%E4%BA%A4%E8%AD%A6%E6%89%A7%E6%B3%95%E8%AE%B0%E5%BD%95%E4%BB%AA%E8%A7%86%E9%A2%91/guidang/zhixingren/AB4303403_090976_20240415164239_20240415162738MEDIA_CH0_090976_4303403_00000000_003.mp4");
const detailList = ref({})
const getDetail = async (id: any) => {
const res = await getAppearanceMonitorDetailApi({ id, current:1,})
const { data } = await res
console.log(data, 'getDetail_data')
listDetail.value = data.data;
detailList.value = data.data[0]
// images.value = images.value.push(images.value)
console.log(data.data);
}
// 查询方法 // 查询方法
const handleQuery = () => { const handleQuery = () => {
getList() getList()
@ -203,7 +218,7 @@ const handleQuery = () => {
// 重置方法 // 重置方法
const handleReset = () => { const handleReset = () => {
searchForm.name = ''; searchForm.train_number = '';
// deviceId.value = ''; // deviceId.value = '';
getList() getList()
}; };
@ -219,13 +234,18 @@ function handleTableChange(record) {
} }
// TODO 点击选中效果 // TODO 点击选中效果
// 定义行类名方法 // 定义行类名方法
const handleRowClassName = ({ rowIndex }) => { const handleRowClassName = ({ row }) => {
return rowIndex === currentRowIndex.value ? 'selected-row' : ''; return row.train_number === currentRowIndex.value ? 'selected-row' : '';
}; };
// 行点击事件处理 // 行点击事件处理
const handleRowClick = (row, event, rowIndex) => { const handleRowClick = (row, event, rowIndex) => {
currentRowIndex.value = rowIndex; currentRowIndex.value = row.train_number;
getDetail(row.id)
};
const handlePlay = (e) => {
e.preventDefault(); // 阻止默认播放行为
// alert('播放功能已禁用');
}; };
onMounted(() => { onMounted(() => {
getList(); getList();

Write Preview
Loading…
Cancel
Save