|
|
|
|
@ -22,15 +22,15 @@
|
|
|
|
|
<div class="pole-main-content px-[16px]">
|
|
|
|
|
<!-- 搜索区域 -->
|
|
|
|
|
<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="B" value="deviceB"></el-option>
|
|
|
|
|
</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-002" value="id002"></el-option>
|
|
|
|
|
</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="类型2" value="id002"></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
@ -47,13 +47,14 @@
|
|
|
|
|
<div class="left-panel w-[870px]">
|
|
|
|
|
<!-- 主图显示 -->
|
|
|
|
|
<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">
|
|
|
|
|
<span>长: 35cm</span>
|
|
|
|
|
<span>宽: 35cm</span>
|
|
|
|
|
<span>高: 28cm</span>
|
|
|
|
|
<span>体积: 50960</span>
|
|
|
|
|
<span>重量: 58kg</span>
|
|
|
|
|
<span>长: {{ detailList?.length }}cm</span>
|
|
|
|
|
<span>宽: {{ detailList?.width }}cm</span>
|
|
|
|
|
<span>高: {{ detailList?.height }}cm</span>
|
|
|
|
|
<span>体积: {{ detailList?.weight }}</span>
|
|
|
|
|
<span>重量: {{ detailList?.weight }}kg</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@ -62,9 +63,10 @@
|
|
|
|
|
<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="(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 }">
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
@ -92,6 +94,7 @@ import ContentHeader from '@/components/ContentHeader.vue';
|
|
|
|
|
import { BaseTable } from "@/components/CustomTable";
|
|
|
|
|
import { Swiper, SwiperSlide } from "swiper/vue";
|
|
|
|
|
import { Navigation, Scrollbar } from "swiper/modules";
|
|
|
|
|
import { getAppearanceMonitorApi, getAppearanceMonitorDetailApi } from '@/api/dashboard';
|
|
|
|
|
import "swiper/css";
|
|
|
|
|
import 'swiper/scss';
|
|
|
|
|
import 'swiper/scss/navigation';
|
|
|
|
|
@ -111,6 +114,7 @@ const activeIndex = ref(-1);
|
|
|
|
|
const handleSlideClick = (index) => {
|
|
|
|
|
console.log(index);
|
|
|
|
|
activeIndex.value = index;
|
|
|
|
|
videoDetail.value = videoUrl.value
|
|
|
|
|
};
|
|
|
|
|
const swiperRef = ref(null);
|
|
|
|
|
console.log(swiperRef.value);
|
|
|
|
|
@ -127,27 +131,27 @@ const currentRowIndex = ref(-1);
|
|
|
|
|
const columns = [
|
|
|
|
|
{
|
|
|
|
|
label: "车号",
|
|
|
|
|
property: "carNo",
|
|
|
|
|
property: "train_number",
|
|
|
|
|
width: 100,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "车型",
|
|
|
|
|
property: "carType",
|
|
|
|
|
property: "train_model",
|
|
|
|
|
width: 100,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "车厢号",
|
|
|
|
|
property: "carriageNo",
|
|
|
|
|
property: "train_carriage_number",
|
|
|
|
|
width: 100,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "告警类型",
|
|
|
|
|
property: "warnType",
|
|
|
|
|
property: "alarm_type",
|
|
|
|
|
width: 120,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "故障类型",
|
|
|
|
|
property: "faultType",
|
|
|
|
|
property: "fault_type",
|
|
|
|
|
width: 120,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
@ -157,45 +161,56 @@ const columns = [
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "复核",
|
|
|
|
|
property: "review",
|
|
|
|
|
property: "is_reviewed",
|
|
|
|
|
width: 80,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "时间",
|
|
|
|
|
property: "date"
|
|
|
|
|
property: "created_at"
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
|
|
|
|
|
|
|
|
|
|
const listData = ref([]);
|
|
|
|
|
const listDetail = ref([]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const searchForm = reactive({
|
|
|
|
|
name: "",
|
|
|
|
|
status: "",
|
|
|
|
|
faultType: "",
|
|
|
|
|
train_number: "",
|
|
|
|
|
train_carriage_number: "",
|
|
|
|
|
fault_type: "",
|
|
|
|
|
type: "pole"
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const dataLoading = ref(true);
|
|
|
|
|
|
|
|
|
|
const getList = async () => {
|
|
|
|
|
const { currentPage, pageSize } = pagination.value;
|
|
|
|
|
const res = await fetch('/api/getPoleMonitorList', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
body: JSON.stringify({ ...searchForm, page: currentPage, pageSize })
|
|
|
|
|
})
|
|
|
|
|
const { data } = await res.json()
|
|
|
|
|
const res = await getAppearanceMonitorApi({ ...searchForm, current: currentPage, pageSize })
|
|
|
|
|
const { data } = await res
|
|
|
|
|
console.log(data, 'getList_data')
|
|
|
|
|
listData.value = data.list;
|
|
|
|
|
console.log(data.list);
|
|
|
|
|
listData.value = data.data;
|
|
|
|
|
getDetail(listData.value[0].id)
|
|
|
|
|
console.log(data.data);
|
|
|
|
|
pagination.value = {
|
|
|
|
|
...pagination.value,
|
|
|
|
|
total: data.total
|
|
|
|
|
};
|
|
|
|
|
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 = () => {
|
|
|
|
|
getList()
|
|
|
|
|
@ -203,7 +218,7 @@ const handleQuery = () => {
|
|
|
|
|
|
|
|
|
|
// 重置方法
|
|
|
|
|
const handleReset = () => {
|
|
|
|
|
searchForm.name = '';
|
|
|
|
|
searchForm.train_number = '';
|
|
|
|
|
// deviceId.value = '';
|
|
|
|
|
getList()
|
|
|
|
|
};
|
|
|
|
|
@ -219,13 +234,18 @@ function handleTableChange(record) {
|
|
|
|
|
}
|
|
|
|
|
// TODO 点击选中效果
|
|
|
|
|
// 定义行类名方法
|
|
|
|
|
const handleRowClassName = ({ rowIndex }) => {
|
|
|
|
|
return rowIndex === currentRowIndex.value ? 'selected-row' : '';
|
|
|
|
|
const handleRowClassName = ({ row }) => {
|
|
|
|
|
return row.train_number === currentRowIndex.value ? 'selected-row' : '';
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 行点击事件处理
|
|
|
|
|
const handleRowClick = (row, event, rowIndex) => {
|
|
|
|
|
currentRowIndex.value = rowIndex;
|
|
|
|
|
currentRowIndex.value = row.train_number;
|
|
|
|
|
getDetail(row.id)
|
|
|
|
|
};
|
|
|
|
|
const handlePlay = (e) => {
|
|
|
|
|
e.preventDefault(); // 阻止默认播放行为
|
|
|
|
|
// alert('播放功能已禁用');
|
|
|
|
|
};
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
getList();
|
|
|
|
|
|
JINGYJ
2 months ago