feat: 接口联调优化

src/styles/element-plus.scss

@@ -142,6 +142,26 @@
   background-color: #032b5c; /* 自定义背景色 */
   border: none; /* 可选：去掉边框 */
 }
+.custom-input {
+  width: 150px;
+  background-color: #032b5c; /* 自定义背景色 */
+  border: none; /* 可选：去掉边框 */
+  .el-input__wrapper {
+    background: rgba(74, 126, 191, 0.1); /* 下拉框背景色 */
+    border: 1px solid transparent; /* 边框 */
+    color: white; /* 文字颜色 */
+    height: 32px;
+    box-shadow: none;
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.6); /* 占位符颜色 */
+    }
+  }
+  .el-input__inner {
+    color: white; /* 文字颜色 */
+    height: 32px;
+  }
+}
 
 /* 修改下拉菜单背景色 */
 .el-select-dropdown {

src/views/dashboard/AppearanceMonitor.scss

@@ -29,15 +29,15 @@
 
     .appearance-monitor-left {
       width: 55%;
-      .monitor-left-top {
-        box-sizing: border-box;
-        padding: 32px 16px;
-        margin-bottom: 16px;
-        min-height: 600px;
       background-image: url("@/assets/common/boderBg.png");
       background-size: 100% 100%;
       background-position: center;
       background-repeat: no-repeat;
+      .monitor-left-top {
+        box-sizing: border-box;
+        padding: 32px 16px 20px;
+        min-height: 600px;
+        
         img {
           width: 100%;
           height: 590px;
@@ -45,6 +45,8 @@
       }
       .monitor-left-bottom {
         width: 100%;
+        padding: 0 16px;
+        margin-bottom: 16px;
         overflow: visible;
         .swiper {
           width: 100%;
@@ -84,5 +86,13 @@
           }
         }
       }
+      .empty-bg {
+        width: 100%;
+        height: 800px;
+        background-image: url("@/assets/common/emptyBg.png");
+        background-size: 312px 204px;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
     }
   }

src/views/dashboard/AppearanceMonitor.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="appearance-monitor-warp">
     <div class="appearance-monitor-left h-[100%]">
+      <template v-if="isImageFlag">
         <div class="monitor-left-top">
           <img :src="imageBig" alt="监控画面" />
           <!-- <video src=""></video> -->
@@ -15,6 +16,8 @@
             </swiper-slide>
           </swiper>
         </div>
+      </template>
+      <div class="empty-bg" v-else></div>
     </div>
     <div class="appearance-monitor-right h-[100%]">
       <div class="module-header">
@@ -32,14 +35,8 @@
       <div class="px-[16px]">
 
         <div class="appearance-monitor-search-box">
-          <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.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-input v-model="searchForm.train_number" placeholder="列车号" class="custom-input" clearable />
+          <el-input v-model="searchForm.train_carriage_number" placeholder="车厢号" class="custom-input" clearable />
           <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>
@@ -132,6 +129,7 @@ const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
 
 const listData = ref([]);
 const listDetail = ref([]);
+const isImageFlag = ref(true);
 // 搜索表单
 const searchForm = reactive({
   train_number: "",
@@ -147,7 +145,7 @@ const getList = async () => {
   const { data } = await res
   console.log(data, 'getList_data')
   listData.value = data.data;
-  getDetail(listData.value[0].id)
+  getDetail(listData.value[0]?.id)
   console.log(data.list);
   pagination.value = {
     ...pagination.value,
@@ -161,6 +159,7 @@ const getDetail = async (id: any) => {
     const { data } = await res
     console.log(data, 'getDetail_data')
     listDetail.value = data.data;
+    isImageFlag.value = data.data?.length > 0 ? true : false;
     console.log(data.data);
 }
 
@@ -171,8 +170,9 @@ const handleQuery = () => {
 
 // 重置方法
 const handleReset = () => {
-  searchForm.trainNo = '';
-  // deviceId.value = '';
+  searchForm.train_number = '';
+  searchForm.train_carriage_number = '';
+  searchForm.fault_type = '';
   getList()
 };
 
@@ -226,20 +226,6 @@ const handleRowClick = (row, event, rowIndex) => {
 onMounted(() => {
   getList();
 });
-// // 窗口大小改变时更新 Swiper
-// const handleResize = () => {
-//   if (swiperRef.value) {
-//     swiperRef.value.update();
-//   }
-// };
-
-// onMounted(() => {
-//   window.addEventListener('resize', handleResize);
-// });
-
-// onUnmounted(() => {
-//   window.removeEventListener('resize', handleResize);
-// });
 </script>
 <style lang="scss">
 @import url('./AppearanceMonitor.scss');

src/views/dashboard/DataOverview.scss

@@ -1,5 +1,6 @@
 .data-overview-wrap {
-  background: #002a5c;
+  padding-top: 30px;
+  // background: #002a5c;
   color: white;
   font-family: "Arial", sans-serif;
   .grid-container {
@@ -40,7 +41,7 @@
         }
       }
       .chart-container {
-        margin-top: 40px;
+        // margin-top: 0px;
         width: 100%;
         height: 300px;
       }
@@ -72,13 +73,20 @@
     }
 
     .device-list {
+      box-sizing: border-box;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
+      padding: 0 16px 20px;
       gap: 10px;
 
       .device-card {
-        background: rgba(74, 126, 191, 0.1);
-        padding: 10px;
+        box-sizing: border-box;
+        // background: rgba(74, 126, 191, 0.1);
+        background-image: url("@/assets/common/deviceCardBg.png");
+        background-size: 100% 100%;
+        background-position: center;
+        background-repeat: no-repeat;
+        padding: 16px;
         border-radius: 4px;
 
         .status-bar {

vite.config.ts

@@ -45,6 +45,7 @@ export default defineConfig(({ mode }) => {
      // 开发服务器配置
      server: {
       port: 5050,
+      host: "0.0.0.0",
       proxy: {
         '/api': {
           target: env.VITE_APP_BASE_API,