feat: 首页接口联调

src/api/dashboard.ts

@@ -28,3 +28,13 @@ export const getAppearanceMonitorDetailApi = (params: any) => {
   return request.get(`/api/v1/record/record_detail_list/`, params);
 };
 
+// 检测总量
+export const getDataOverviewApi = (params: any) => {
+  return request.get(`/api/v1/system/get_record_stats/`, params);
+};
+
+// 设备信息数据
+export const getDeviceInfowApi = () => {
+  return request.get(`/api/v1/system/get_device_stats/`);
+};
+

src/views/dashboard/AppearanceMonitor.scss

@@ -1,13 +1,16 @@
 .appearance-monitor-warp {
     box-sizing: border-box;
     padding-top: 32px;
+    width: 100%;
     height: 100%;
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
+    gap: 20px;
     // align-items: center;
-    // .appearance-monitor-right {
+    .appearance-monitor-right {
-    //     display: flex;
+      width: 44%;
-    // }
+        // display: flex;
+    }
 
     .appearance-monitor-search-box {
       display: flex;
@@ -16,6 +19,7 @@
       margin: 16px 0;
     }
     .right-panel{
+      
       .el-scrollbar__view {
         background: transparent !important;
         height: 600px;
@@ -24,6 +28,7 @@
 
 
     .appearance-monitor-left {
+      width: 55%;
       .monitor-left-top {
         box-sizing: border-box;
         padding: 32px 16px;

src/views/dashboard/AppearanceMonitor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="appearance-monitor-warp">
-    <div class="appearance-monitor-left w-[56%] h-[100%]">
+    <div class="appearance-monitor-left h-[100%]">
       <div class="monitor-left-top">
         <img :src="imageBig" alt="监控画面" />
         <!-- <video src=""></video> -->
@@ -16,7 +16,7 @@
         </swiper>
       </div>
     </div>
-    <div class="appearance-monitor-right w-[44%] h-[100%]">
+    <div class="appearance-monitor-right h-[100%]">
       <div class="module-header">
         <ContentHeader bgLayout="918">
           <template #title>
@@ -52,7 +52,7 @@
           </el-button>
         </div>
         <!-- 右侧表格区域 -->
-        <div class="right-panel w-[768px]">
+        <div class="right-panel w-[800px]">
           <div class="bg-transparent baseTable_wrap">
             <template v-if="pagination.total > 0">
               <BaseTable class="bg-transparent baseTable_box" :total="pagination.total" :pageSize="pagination.pageSize"
@@ -84,7 +84,7 @@ const columns = [
   {
     label: "车号",
     property: "train_number",
-    width: 80,
+    width: 130,
   },
   {
     label: "车型",
@@ -99,7 +99,7 @@ const columns = [
   {
     label: "告警类型",
     property: "alarm_type",
-    width: 120,
+    width: 100,
   },
   {
     label: "故障类型",
@@ -114,11 +114,17 @@ const columns = [
   {
     label: "复核",
     property: "is_reviewed",
+    formatter: ({ is_reviewed }) => {
+    return is_reviewed === true 
+        ? "是"
+        :"否";
+    },
     width: 60,
   },
   {
     label: "时间",
-    property: "created_at"
+    property: "created_at",
+    width: 170
   }
 ]
 

src/views/dashboard/DataOverview.vue

@@ -10,10 +10,10 @@
             </template>
             <template #extra>
               <div>
-                <el-button type="primary" class="month-btn" @click="activeBtn = '月'" :class="{ 'active-btn': activeBtn === '月' }">
+                <el-button type="primary" class="month-btn" @click="getList('month')" :class="{ 'active-btn': activeBtn === 'month' }">
                    月
                 </el-button>
-                <el-button class="week-btn" @click="activeBtn = '周'" :class="{ 'active-btn': activeBtn === '周' }">
+                <el-button class="week-btn" @click="getList('week')" :class="{ 'active-btn': activeBtn === 'week' }">
                    周
                 </el-button>
               </div>
@@ -46,13 +46,13 @@
             <div class="device-icon"></div>
             <div class="device-count">
               <div>设备总数</div>
-              <div class="count-number">37</div>
+              <div class="count-number">{{ deviceTotal }}</div>
             </div>
           </div>
           <div class="device-list">
             <div class="device-card">
-              <div class="mb-3">车体检测设备: 12</div>
+              <div class="mb-3">车体检测设备: {{ carDevice.total }}</div>
-              <DeviceStatus :deviceStatus="deviceStatus" />
+              <DeviceStatus :deviceStatus="carDevice" />
             </div>
             <div class="device-card">
               <div class="mb-3">撑杆检测设备: 10</div>
@@ -178,16 +178,17 @@ 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 } from '@/api/dashboard';
 
 defineOptions({
     name: "DataOverviewWrap"
 });
 const xData = ref(["1月", "2月", "3月", "4月", "5月"]);
 const legendArr = ["车体检测", "撑杆检测"];
-const datas = [
+const datas = ref([
   [1528, 1266.02, 2468.39, 2982.67, 3165.91],
   [2844.44, 6505.07, 8016.12, 6350.87, 1474.61],
-];
+]);
 const colorArr = [
   ["#3B9FFE", "#5070F2"],
   ["#FFDA8D", "#FFAC06"],
@@ -202,8 +203,39 @@ const searchForm = reactive({
     status: "",
     faultType: "",
 });
-const activeBtn = ref("月");
+const deviceTotal = ref(0);
+const carDevice = ref({});
+const activeBtn = ref("month");
+const getList = async (dateType:string = "month") => {
+    activeBtn.value = dateType
+    const res = await getDataOverviewApi({ dateType })
+    const { data } = await res
+    datas.value[0] = data.appearance
+    datas.value[1] = data.pole
+    if(dateType === "month") {
+      xData.value = data.dateArr.map((item:any) => {if(dateType === 'month') {
+          return item+'月'
+        }
+      })
+    }else {
+      xData.value = ["周一","周二","周三","周四","周五","周六","周日"]
+    }
+    // console.log(data, 'getList_data')
+};
+const getDeviceInfo = async () => {
+  try {
+    const res = await getDeviceInfowApi();
+    const { data } = res;
+    deviceTotal.value = data.deviceTotal;
+    carDevice.value = data.appearance;
+    // deviceStatus.value = data
+  } catch (error) {
+    console.error('获取设备信息出错:', error);
+  }
+}
 onMounted(() => {
+  getList()
+  getDeviceInfo()
 });
 </script>
 

src/views/dashboard/PoleMonitor.vue

@@ -132,7 +132,7 @@ const columns = [
     {
         label: "车号",
         property: "train_number",
-        width: 100,
+        width: 130,
     },
     {
         label: "车型",
@@ -162,6 +162,11 @@ const columns = [
     {
         label: "复核",
         property: "is_reviewed",
+        formatter: ({ is_reviewed }) => {
+        return is_reviewed === true 
+            ? "是"
+            :"否";
+        },
         width: 80,
     },
     {

src/views/dashboard/components/DeviceStatus.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import { ref } from "vue";
-// import deviceStatusOnline from "@/assets/svg/deviceStatus/online.svg?component";
-// import deviceStatusError from "@/assets/svg/deviceStatus/error.svg?component";
-// import deviceStatusOutline from "@/assets/svg/deviceStatus/outline.svg?component";
 defineOptions({
   name: "DeviceStatus"
 });
@@ -13,8 +10,6 @@ const props = defineProps({
     default: () => {}
   }
 });
-const deviceStatusData = ref({ ...props.deviceStatus });
-
 const deviceStatusOptions = ref<Record<string, any>[]>([
   {
     label: "在线",
@@ -64,13 +59,13 @@ const deviceStatusOptions = ref<Record<string, any>[]>([
       <div class="flex flex-col flex-1">
         <div class="flex justify-between" style="margin-bottom: 4px">
           <span>{{ v.label }}</span>
-          <span>{{ deviceStatusData[v.valueKey] }}</span>
+          <span>{{ deviceStatus[v.valueKey] }}</span>
         </div>
         <div class="w-full">
           <el-progress
             :show-text="false"
             :stroke-width="8"
-            :percentage="deviceStatusData[v.valueKey]"
+            :percentage="deviceStatus[v.valueKey]"
             :color="v.color"
           />
         </div>