From 0eee05eaa802f184131cd366a9da936a99ee153e Mon Sep 17 00:00:00 2001
From: JINGYJ <1458671527@qq.com>
Date: Fri, 14 Mar 2025 10:37:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83?=
 =?UTF-8?q?=E8=A1=A5=E5=85=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/dashboard.ts                  |  5 +++
 src/views/dashboard/DataOverview.scss | 26 ++++++++++--
 src/views/dashboard/DataOverview.vue  | 58 ++++++++++++++++++++-------
 3 files changed, 71 insertions(+), 18 deletions(-)

diff --git a/src/api/dashboard.ts b/src/api/dashboard.ts
index 36105a3..8a5070d 100644
--- a/src/api/dashboard.ts
+++ b/src/api/dashboard.ts
@@ -43,3 +43,8 @@ export const getRecordFaultApi = (params: any) => {
   return request.get(`/api/v1/system/get_record_fault_stats/`, params);
 };
 
+// 获取实时监控
+export const getRealTimeApi = () => {
+  return request.get(`/api/v1/record/get_latest_second_records/`);
+};
+
diff --git a/src/views/dashboard/DataOverview.scss b/src/views/dashboard/DataOverview.scss
index 0b60220..e01d55a 100644
--- a/src/views/dashboard/DataOverview.scss
+++ b/src/views/dashboard/DataOverview.scss
@@ -93,10 +93,30 @@
     box-sizing: border-box;
     gap: 16px;
     padding: 20px 16px 20px 16px;
-    img {
-      width: 100%;
-      height: auto;
+    .monitor-images-left,
+    .monitor-images-right {
+      flex: 1;
+      position: relative;
+      img {
+        width: 100%;
+        height: 256px;
+      }
+      .fault-info {
+        position: absolute;
+        padding: 0 10px;
+        // miomwidth: 80px;
+        height: 28px;
+        background: rgba(0,0,0,0.6);
+        border-radius: 16px 16px 16px 16px;
+        top: 16px;
+        left: 16px;
+        font-size: 14px;
+        color: #FFF;
+        text-align: center;
+        line-height: 28px;
+      }
     }
+   
   }
 }
 
diff --git a/src/views/dashboard/DataOverview.vue b/src/views/dashboard/DataOverview.vue
index c2459d1..27d989d 100644
--- a/src/views/dashboard/DataOverview.vue
+++ b/src/views/dashboard/DataOverview.vue
@@ -77,7 +77,7 @@
                 <div class="w-[200px] bg_title bg_title_2"></div>
               </template>
               <template #extra>
-                  <el-select v-model="searchForm.name" placeholder="时间" class="custom-select">
+                  <el-select v-model="searchForm.car" placeholder="时间" class="custom-select" @change="getCarFault()">
                     <el-option label="1月" value="1"></el-option>
                     <el-option label="2月" value="2"></el-option>
                     <el-option label="3月" value="3"></el-option>
@@ -115,7 +115,7 @@
                 <div class="w-[200px] bg_title bg_title_3"></div>
               </template>
               <template #extra>
-                <el-select v-model="searchForm.name" placeholder="时间" class="custom-select">
+                <el-select v-model="searchForm.pole" placeholder="时间" class="custom-select" @change="getPoleFault()">
                   <el-option label="1月" value="1"></el-option>
                     <el-option label="2月" value="2"></el-option>
                     <el-option label="3月" value="3"></el-option>
@@ -134,10 +134,7 @@
           </div>
           <div class="chart-container">
             <PieChartSmall
-              :data="[
-                { value: 65, name: '撑杆断裂' },
-                { value: 35, name: '撑杆弯曲' },
-              ]"
+              :data="poleFaultTotal"
               :colors="['#9DFFF3', '#FFA179']"
             />
           </div>
@@ -156,8 +153,14 @@
           </ContentHeader>
         </div>
         <div class="monitor-images">
-          <img src="https://picsum.photos/300/200?random=1" alt="监控画面" />
-          <img src="https://picsum.photos/300/200?random=2" alt="监控画面" />
+          <div class="monitor-images-left">
+            <img :src="imageFault[0].url" alt="监控画面" />
+            <div class="fault-info">{{ imageFault[0].fault_type }}</div>
+          </div>
+          <div class="monitor-images-right">
+            <img :src="imageFault[1].url" alt="监控画面" />
+            <div class="fault-info">{{ imageFault[1].fault_type }}</div>
+          </div>
         </div>
       </div>
     </div>
@@ -171,7 +174,7 @@ import BarChart from "./components/BarChart.vue";
 import PieChart from "./components/PieChart.vue";
 import PieChartSmall from "./components/PieChartSmall.vue";
 import DeviceStatus from "./components/DeviceStatus.vue";
-import { getDataOverviewApi,getDeviceInfowApi,getRecordFaultApi } from '@/api/dashboard';
+import { getDataOverviewApi,getDeviceInfowApi,getRecordFaultApi,getRealTimeApi } from '@/api/dashboard';
 
 defineOptions({
     name: "DataOverviewWrap"
@@ -192,9 +195,8 @@ const deviceStatus = ref({
     outlineCount: 10
 });
 const searchForm = reactive({
-    name: "",
-    status: "",
-    faultType: "",
+    car: "1",
+    pole: "1",
 });
 const deviceTotal = ref(0);
 const carDevice = ref({});
@@ -202,6 +204,7 @@ const poleDevice = ref({});
 const excavatorDevice = ref({});
 const carFaultTotal = ref([]);
 const poleFaultTotal = ref([]);
+const imageFault = ref([]);
 const activeBtn = ref("month");
 const getList = async (dateType:string = "month") => {
     activeBtn.value = dateType
@@ -232,9 +235,20 @@ const getDeviceInfo = async () => {
     console.error('获取设备信息出错:', error);
   }
 }
-const getRecordFault = async () => {
+const getPoleFault = async () => {
+  try {
+    const res = await getRecordFaultApi({dateType: 'month',value: searchForm.pole,type:"pole"});
+    const { data } = res;
+    poleFaultTotal.value = data;
+    // deviceStatus.value = data
+    console.log(data);
+  } catch (error) {
+    console.error('获取设备信息出错:', error);
+  }
+}
+const getCarFault = async () => {
   try {
-    const res = await getRecordFaultApi({dateType: 'month',value: 1,type:"appearance"});
+    const res = await getRecordFaultApi({dateType: 'month',value: searchForm.car,type:"appearance"});
     const { data } = res;
     carFaultTotal.value = data;
     // deviceStatus.value = data
@@ -243,10 +257,24 @@ const getRecordFault = async () => {
     console.error('获取设备信息出错:', error);
   }
 }
+
+const getRealTime = async () => {
+  try {
+    const res = await getRealTimeApi({deviceType: ''});
+    const { data } = res;
+    imageFault.value = data;
+    // deviceStatus.value = data
+    console.log(data);
+  } catch (error) {
+    console.error('获取设备信息出错:', error);
+  }
+}
 onMounted(() => {
   getList()
   getDeviceInfo()
-  getRecordFault()
+  getCarFault()
+  getPoleFault()
+  getRealTime()
 });
 </script>