From caabce90ba30796cdd8ebf510ae4e521930d3cd0 Mon Sep 17 00:00:00 2001
From: JINGYJ <1458671527@qq.com>
Date: Fri, 7 Mar 2025 18:01:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E9=A1=B5=E9=9D=A2=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/AppearanceMonitor.vue | 131 +++++++++++++++++++++-
 src/views/dashboard/PoleMonitor.vue       | 101 ++++++++++++++++-
 2 files changed, 228 insertions(+), 4 deletions(-)

diff --git a/src/views/dashboard/AppearanceMonitor.vue b/src/views/dashboard/AppearanceMonitor.vue
index 3d5a2f8..2f8f4bf 100644
--- a/src/views/dashboard/AppearanceMonitor.vue
+++ b/src/views/dashboard/AppearanceMonitor.vue
@@ -1,3 +1,130 @@
 <template>
-    数据监测
-</template>
\ No newline at end of file
+    <div class="appearance-monitor-warp">
+        <div class="appearance-monitor-left w-[56%] h-[100%]">
+            <div class="monitor-left-top">
+                <img src="https://picsum.photos/300/200?random=1" alt="监控画面">
+            </div>
+            <div class="monitor-left-bottom">
+                <img src="https://picsum.photos/300/200?random=2" alt="监控画面">
+            </div>
+        </div>
+        <div class="appearance-monitor-right w-[44%] h-[100%]">
+            <div class="module-header">
+                <ContentHeader bgLayout="918">
+                    <template #title>
+                        <div class="w-[200px] bg_title bg_title_5">
+                        </div>
+                    </template>
+                    <template #extra>
+                        <div></div>
+                    </template>
+                </ContentHeader>
+            </div>
+             <!-- 表格区域 -->
+             <el-table 
+                :data="tableData" 
+                stripe 
+                style="width: 100%; margin-top: 20px"
+                class="custom-table"
+                >
+                <el-table-column prop="carNo" label="车号" width="80"></el-table-column>
+                <el-table-column prop="carType" label="车型" width="60"></el-table-column>
+                <el-table-column prop="carriageNo" label="车厢号" width="80"></el-table-column>
+                <el-table-column prop="warnType" label="告警类型" width="80"></el-table-column>
+                <el-table-column prop="faultType" label="故障类型" width="120"></el-table-column>
+                <el-table-column prop="level" label="等级" width="60"></el-table-column>
+                <el-table-column prop="review" label="复核" width="60"></el-table-column>
+                <el-table-column prop="time" label="时间" width="120"></el-table-column>
+            </el-table>
+
+            <!-- 分页区域 -->
+            
+            <div class="pagination-container">
+                <el-pagination
+                    :page-sizes="[100, 200, 300, 400]"
+                    
+                    layout="total, sizes, prev, pager, next, jumper"
+                    :total="400"
+                    />
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import ContentHeader from '@/components/ContentHeader.vue';
+import { ref } from 'vue';
+// 搜索表单
+const searchForm = ref({
+  trainNo: 'all',
+  carriageNo: 'all',
+  faultType: 'all'
+});
+
+// 模拟表格数据
+const tableData = ref([
+  { carNo: 'CA1001', carType: 'C64', carriageNo: '101', warnType: '车辆损坏', faultType: '搭扣未搭', level: '1', review: '是', time: '2025-02-05 14:33' },
+  { carNo: 'CA1002', carType: 'C64', carriageNo: '101', warnType: '车辆损坏', faultType: '搭扣未搭', level: '1', review: '是', time: '2025-02-12 15:33' },
+  // 其他数据...
+]);
+
+const total = ref(66);
+
+// 搜索方法
+const handleSearch = () => {
+  console.log('搜索参数', searchForm.value);
+};
+
+// 重置方法
+const handleReset = () => {
+  searchForm.value = {
+    trainNo: 'all',
+    carriageNo: 'all',
+    faultType: 'all'
+  };
+};
+
+// 分页切换
+const handlePageChange = (page) => {
+  console.log('当前页码', page);
+};
+</script>
+<style scoped lang="scss">
+.appearance-monitor-warp {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    // align-items: center;
+    // .appearance-monitor-right {
+    //     display: flex;
+    // }
+    .pagination-container {
+        margin-top: 20px;
+        display: flex;
+        justify-content: flex-end;
+    }
+    :deep(.el-pagination__total) {
+        color: #606266;
+        margin-right: 10px;
+    }
+
+    :deep(.el-pagination__sizes .el-select__inner) {
+        background: #002a5c;
+        color: white;
+        border: 1px solid #409eff;
+    }
+
+    :deep(.el-pagination__item), 
+    :deep(.el-pagination__button) {
+        background: #002a5c;
+        color: white;
+        border: 1px solid #409eff;
+        margin-right: 5px;
+    }
+
+    :deep(.el-pagination__item.is-active) {
+        background: #409eff;
+        color: white;
+
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/dashboard/PoleMonitor.vue b/src/views/dashboard/PoleMonitor.vue
index 786ab79..f519df8 100644
--- a/src/views/dashboard/PoleMonitor.vue
+++ b/src/views/dashboard/PoleMonitor.vue
@@ -7,5 +7,102 @@
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 -->
 <template>
-    撑杆监测
-</template>
\ No newline at end of file
+    <div class="pole-monitor-warp">
+        <div class="module-header">
+            <ContentHeader bgLayout="1855">
+                <template #title>
+                    <div class="w-[200px] bg_title bg_title_3">
+                    </div>
+                </template>
+                <template #extra>
+                    <div></div>
+                </template>
+            </ContentHeader>
+        </div>
+        <!-- 搜索区域 -->
+        <div class="search-section">
+            <el-row>
+                <el-col span="6">
+                    <el-select v-model="searchForm.trainNo" placeholder="列车号">
+                        <el-option label="全部列车" value="all"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col span="6">
+                    <el-select v-model="searchForm.carriageNo" placeholder="车厢号">
+                        <el-option label="全部车厢" value="all"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col span="6">
+                    <el-select v-model="searchForm.faultType" placeholder="故障类型">
+                        <el-option label="全部类型" value="all"></el-option>
+                    </el-select>
+                </el-col>
+                <el-col span="3">
+                    <el-button type="primary" @click="handleSearch">查询</el-button>
+                </el-col>
+                <el-col span="3">
+                    <el-button @click="handleReset">重置</el-button>
+                </el-col>
+            </el-row>
+        </div>
+        <!-- 主体内容区域 -->
+        <div class="pole-monitor-main">
+            <!-- 左侧视频与缩略图区域 -->
+            <div class="left-panel">
+                <!-- 主图显示 -->
+                <div class="main-image">
+                    <img src="https://picsum.photos/300/200?random=1" alt="监控画面">
+                <div class="image-info">
+                    长: 35cm 宽: 52cm 高: 28cm 体积: 50960cm 重量: 58kg
+                </div>
+                </div>
+
+                <!-- 缩略图区域 -->
+                <div class="thumbnail-container">
+                    <img src="https://picsum.photos/300/200?random=2" alt="监控画面">
+                </div>
+            </div>
+            <!-- 右侧表格区域 -->
+            <div class="right-panel">
+                <el-table 
+                    :data="tableData" 
+                    stripe 
+                    class="custom-table"
+                >
+                    <el-table-column prop="carNo" label="车号" width="80"></el-table-column>
+                    <el-table-column prop="carType" label="车型" width="60"></el-table-column>
+                    <el-table-column prop="carriageNo" label="车厢号" width="80"></el-table-column>
+                    <el-table-column prop="warnType" label="告警类型" width="80"></el-table-column>
+                    <el-table-column prop="faultType" label="故障类型" width="120"></el-table-column>
+                    <el-table-column prop="level" label="等级" width="60"></el-table-column>
+                    <el-table-column prop="review" label="复核" width="60"></el-table-column>
+                    <el-table-column prop="time" label="时间" width="120"></el-table-column>
+                </el-table>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import ContentHeader from '@/components/ContentHeader.vue';
+import { ref } from 'vue';
+// 搜索表单
+const searchForm = ref({
+  trainNo: 'all',
+  carriageNo: 'all',
+  faultType: 'all'
+});
+
+// 模拟数据
+const tableData = ref([
+  { carNo: 'CA1001', carType: 'C64', carriageNo: '101', warnType: '车辆损坏', faultType: '搭扣未搭', level: '1', review: '是', time: '2025-02-05 14:33' },
+  // 其他数据...
+]);
+</script>
+<style scoped lang="scss">
+.pole-monitor-warp {
+    .pole-monitor-main{
+        display: flex;
+        justify-content: space-between;
+    }
+}
+</style>
\ No newline at end of file