From 5fc4d7ec61d6fbb491760a540cb2427ae57144e2 Mon Sep 17 00:00:00 2001 From: JINGYJ <1458671527@qq.com> Date: Thu, 13 Mar 2025 16:13:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=92=91=E6=9D=86=E6=A3=80=E6=B5=8B?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=B0=83=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/dashboard.ts | 10 +++ src/views/dashboard/AppearanceMonitor.vue | 61 ++++++++++----- src/views/dashboard/DataOverview.scss | 3 + src/views/dashboard/DataOverview.vue | 32 +++++++- src/views/dashboard/PoleMonitor.scss | 9 ++- src/views/dashboard/PoleMonitor.vue | 94 ++++++++++++++--------- 6 files changed, 146 insertions(+), 63 deletions(-) diff --git a/src/api/dashboard.ts b/src/api/dashboard.ts index 55dea2d..16e2f5a 100644 --- a/src/api/dashboard.ts +++ b/src/api/dashboard.ts @@ -18,3 +18,13 @@ export const getDeviceStatusApi = (params: any) => { 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); +}; + diff --git a/src/views/dashboard/AppearanceMonitor.vue b/src/views/dashboard/AppearanceMonitor.vue index 1eaf07c..49b22df 100644 --- a/src/views/dashboard/AppearanceMonitor.vue +++ b/src/views/dashboard/AppearanceMonitor.vue @@ -32,15 +32,15 @@
- + - + - + @@ -57,7 +57,8 @@
@@ -72,6 +73,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'; @@ -81,27 +83,27 @@ const modules = [Navigation, Scrollbar]; const columns = [ { label: "车号", - property: "carNo", + property: "train_number", width: 80, }, { label: "车型", - property: "carType", + property: "train_model", width: 80, }, { label: "车厢号", - property: "carriageNo", + property: "train_carriage_number", width: 80, }, { label: "告警类型", - property: "warnType", + property: "alarm_type", width: 120, }, { label: "故障类型", - property: "faultType", + property: "fault_type", width: 120, }, { @@ -111,35 +113,35 @@ const columns = [ }, { label: "复核", - property: "review", + property: "is_reviewed", width: 60, }, { label: "时间", - property: "date" + property: "created_at" } ] const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 }); const listData = ref([]); +const listDetail = ref([]); // 搜索表单 const searchForm = reactive({ - trainNo: "", - carriageNo: "", - faultType: "", + train_number: "", + train_carriage_number: "", + fault_type: "", + type: "appearance" }); 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; + listData.value = data.data; + getDetail(listData.value[0].id) console.log(data.list); pagination.value = { ...pagination.value, @@ -148,6 +150,14 @@ const getList = async () => { 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 = () => { getList() @@ -195,6 +205,17 @@ const onSwiper = (swiper) => { const onSlideChange = () => { 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(() => { getList(); diff --git a/src/views/dashboard/DataOverview.scss b/src/views/dashboard/DataOverview.scss index 2d00c68..0b60220 100644 --- a/src/views/dashboard/DataOverview.scss +++ b/src/views/dashboard/DataOverview.scss @@ -16,6 +16,9 @@ &>li{ width: 50%; } + &>li:last-child{ + margin-left: 16px; + } .module-header { color: #4a7ebf; margin-bottom: 15px; diff --git a/src/views/dashboard/DataOverview.vue b/src/views/dashboard/DataOverview.vue index 378f0cd..94a177f 100644 --- a/src/views/dashboard/DataOverview.vue +++ b/src/views/dashboard/DataOverview.vue @@ -78,8 +78,18 @@ @@ -113,8 +123,18 @@ @@ -158,6 +178,10 @@ import BarChart from "./components/BarChart.vue"; import PieChart from "./components/PieChart.vue"; import PieChartSmall from "./components/PieChartSmall.vue"; import DeviceStatus from "./components/DeviceStatus.vue"; + +defineOptions({ + name: "DataOverviewWrap" +}); const xData = ref(["1月", "2月", "3月", "4月", "5月"]); const legendArr = ["车体检测", "撑杆检测"]; const datas = [ diff --git a/src/views/dashboard/PoleMonitor.scss b/src/views/dashboard/PoleMonitor.scss index a9f386a..b649619 100644 --- a/src/views/dashboard/PoleMonitor.scss +++ b/src/views/dashboard/PoleMonitor.scss @@ -31,7 +31,11 @@ position: relative; background-color: #090F48; border-radius: 4px; - img { + // img { + // width: 100%; + // max-height: 460px; + // } + video { width: 100%; max-height: 460px; } @@ -62,7 +66,8 @@ border-radius: 4px; } } - .active-slide img { + .active-slide img, + .active-slide video { border-radius: 4px; border: 2px solid #2ecce0; } diff --git a/src/views/dashboard/PoleMonitor.vue b/src/views/dashboard/PoleMonitor.vue index 5bfa23c..a678ab1 100644 --- a/src/views/dashboard/PoleMonitor.vue +++ b/src/views/dashboard/PoleMonitor.vue @@ -22,15 +22,15 @@
- + - + - + @@ -47,13 +47,14 @@
- 监控画面 + +
- 长: 35cm - 宽: 35cm - 高: 28cm - 体积: 50960 - 重量: 58kg + 长: {{ detailList?.length }}cm + 宽: {{ detailList?.width }}cm + 高: {{ detailList?.height }}cm + 体积: {{ detailList?.weight }} + 重量: {{ detailList?.weight }}kg
@@ -62,9 +63,10 @@ - - Slide + +
@@ -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'; @@ -102,15 +105,16 @@ defineOptions({ const modules = [Navigation, Scrollbar]; 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=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; + 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();