diff --git a/src/assets/fonts/FileZilla_Server_1.9.4_win64-setup.exe b/src/assets/fonts/FileZilla_Server_1.9.4_win64-setup.exe
deleted file mode 100644
index 49ad7b4..0000000
Binary files a/src/assets/fonts/FileZilla_Server_1.9.4_win64-setup.exe and /dev/null differ
diff --git a/src/styles/element-plus.scss b/src/styles/element-plus.scss
index 2cacf7b..e4faf0d 100644
--- a/src/styles/element-plus.scss
+++ b/src/styles/element-plus.scss
@@ -17,8 +17,25 @@
// )
);
+
/* 引入 Element Plus 样式 */
@use "element-plus/theme-chalk/src/index.scss" as *;
+
+
+.el-button.is-text:not(.is-disabled):hover {
+ background-color: transparent;
+}
+
+.el-button.is-text:not(.is-disabled):hover {
+ background-color: transparent;
+}
+
+.el-button:hover {
+ color: white;
+ background-color: transparent;
+ outline: none;
+}
+
/* 表格 */
.ds_table {
position: relative;
diff --git a/src/views/dashboard/AppearanceMonitor.scss b/src/views/dashboard/AppearanceMonitor.scss
index 848142e..6dc97cf 100644
--- a/src/views/dashboard/AppearanceMonitor.scss
+++ b/src/views/dashboard/AppearanceMonitor.scss
@@ -6,34 +6,21 @@
// .appearance-monitor-right {
// display: flex;
// }
- .pagination-container {
- margin-top: 20px;
+
+ .appearance-monitor-search-box {
display: flex;
- justify-content: flex-end;
+ align-items: center;
+ gap: 12px;
+ margin: 16px 0;
}
- :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;
+ .right-panel{
+ .el-scrollbar__view {
+ background: transparent !important;
+ height: 600px;
+ }
}
+
+
.appearance-monitor-left {
.monitor-left-top {
box-sizing: border-box;
diff --git a/src/views/dashboard/AppearanceMonitor.vue b/src/views/dashboard/AppearanceMonitor.vue
index f06e559..27e974e 100644
--- a/src/views/dashboard/AppearanceMonitor.vue
+++ b/src/views/dashboard/AppearanceMonitor.vue
@@ -5,25 +5,11 @@
<img src="https://picsum.photos/300/200?random=1" alt="监控画面" />
</div>
<div class="monitor-left-bottom">
- <swiper
- ref="swiperRef"
- :modules="modules"
- :slides-per-view="4"
- :space-between="10"
- navigation
- :scrollbar="{ draggable: false }"
- :centered-slides="false"
- :observer="true"
- :observeParents="true"
- @swiper="onSwiper"
- @slideChange="onSlideChange"
- >
- <swiper-slide
- v-for="(image, index) in images"
- :key="index"
- @click="handleSlideClick(index)"
- :class="{ 'active-slide': activeIndex === index }"
- >
+ <swiper ref="swiperRef" :modules="modules" :slides-per-view="4" :space-between="10" navigation
+ :scrollbar="{ draggable: false }" :centered-slides="false" :observer="true" :observeParents="true"
+ @swiper="onSwiper" @slideChange="onSlideChange">
+ <swiper-slide v-for="(image, index) in images" :key="index" @click="handleSlideClick(index)"
+ :class="{ 'active-slide': activeIndex === index }">
<img :src="image" alt="Slide" />
</swiper-slide>
</swiper>
@@ -41,57 +27,48 @@
</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="px-[16px]">
- <!-- 分页区域 -->
-
- <div class="pagination-container">
- <el-pagination
- :page-sizes="[100, 200, 300, 400]"
- layout="total, sizes, prev, pager, next, jumper"
- :total="400"
- />
+ <div class="appearance-monitor-search-box">
+ <el-select v-model="searchForm.name" 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.deviceId" 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-select v-model="searchForm.faultType" placeholder="故障类型" class="custom-select">
+ <el-option label="类型1" value="id001"></el-option>
+ <el-option label="类型2" value="id002"></el-option>
+ </el-select>
+ <el-button type="primary" @click="handleQuery" class="basic-btn query-btn">
+ <span class="icon"></span> 查询
+ </el-button>
+ <el-button @click="handleReset" class="basic-btn reset-btn">
+ <span class="icon"></span> 重置
+ </el-button>
+ </div>
+ <!-- 右侧表格区域 -->
+ <div class="right-panel w-[768px]">
+ <div class="bg-transparent baseTable_wrap">
+ <template v-if="pagination.total > 0">
+ <BaseTable class="bg-transparent baseTable_box" :total="pagination.total" :pageSize="pagination.pageSize"
+ :dataSource="listData" :isFixedPagination="true" :columns="columns" :page="pagination.currentPage"
+ @change="handleTableChange">
+ </BaseTable>
+ </template>
+ </div>
+ </div>
</div>
+
</div>
</div>
</template>
<script lang="ts" setup>
import ContentHeader from "@/components/ContentHeader.vue";
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { BaseTable } from "@/components/CustomTable";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation, Scrollbar } from "swiper/modules";
import "swiper/css";
@@ -99,58 +76,100 @@ import 'swiper/scss';
import 'swiper/scss/navigation';
const modules = [Navigation, Scrollbar];
-// 搜索表单
-const searchForm = ref({
- trainNo: "all",
- carriageNo: "all",
- faultType: "all",
-});
-
-// 模拟表格数据
-const tableData = ref([
+// const currentRow = ref<Record<string, any>>({});
+const columns = [
{
- carNo: "CA1001",
- carType: "C64",
- carriageNo: "101",
- warnType: "车辆损坏",
- faultType: "搭扣未搭",
- level: "1",
- review: "是",
- time: "2025-02-05 14:33",
+ label: "车号",
+ property: "carNo",
+ width: 80,
},
{
- carNo: "CA1002",
- carType: "C64",
- carriageNo: "101",
- warnType: "车辆损坏",
- faultType: "搭扣未搭",
- level: "1",
- review: "是",
- time: "2025-02-12 15:33",
+ label: "车型",
+ property: "carType",
+ width: 80,
},
- // 其他数据...
-]);
+ {
+ label: "车厢号",
+ property: "carriageNo",
+ width: 80,
+ },
+ {
+ label: "告警类型",
+ property: "warnType",
+ width: 120,
+ },
+ {
+ label: "故障类型",
+ property: "faultType",
+ width: 120,
+ },
+ {
+ label: "等级",
+ property: "level",
+ width: 60,
+ },
+ {
+ label: "复核",
+ property: "review",
+ width: 60,
+ },
+ {
+ label: "时间",
+ property: "date"
+ }
+]
+
+const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
+
+const listData = ref([]);
+// 搜索表单
+const searchForm = reactive({
+ trainNo: "",
+ carriageNo: "",
+ faultType: "",
+});
+const dataLoading = ref(true);
-const total = ref(66);
+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()
+ console.log(data, 'getList_data')
+ listData.value = data.list;
+ console.log(data.list);
+ pagination.value = {
+ ...pagination.value,
+ total: data.total
+ };
+ dataLoading.value = false;
+};
-// 搜索方法
-const handleSearch = () => {
- console.log("搜索参数", searchForm.value);
+// 查询方法
+const handleQuery = () => {
+ getList()
};
// 重置方法
const handleReset = () => {
- searchForm.value = {
- trainNo: "all",
- carriageNo: "all",
- faultType: "all",
- };
+ searchForm.trainNo = '';
+ // deviceId.value = '';
+ getList()
};
-// 分页切换
-const handlePageChange = (page) => {
- console.log("当前页码", page);
-};
+function handleTableChange(record) {
+ console.log("handleTableChange_record", record);
+ pagination.value = {
+ ...pagination.value,
+ currentPage: record.page,
+ pageSize: record.pageSize
+ };
+ getList();
+}
+
+
const images = ref([
'https://picsum.photos/300/200?random=1',
'https://picsum.photos/300/200?random=2',
@@ -173,6 +192,10 @@ const onSwiper = (swiper) => {
const onSlideChange = () => {
console.log("slide change");
};
+
+onMounted(() => {
+ getList();
+});
// // 窗口大小改变时更新 Swiper
// const handleResize = () => {
// if (swiperRef.value) {
diff --git a/src/views/dashboard/PoleMonitor.vue b/src/views/dashboard/PoleMonitor.vue
index 16f1645..804aafb 100644
--- a/src/views/dashboard/PoleMonitor.vue
+++ b/src/views/dashboard/PoleMonitor.vue
@@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd
* @Date: 2025-03-06 15:15:01
* @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2025-03-12 11:43:32
+ * @LastEditTime: 2025-03-12 13:30:24
* @FilePath: \vite-ai\data-dashboard\src\views\dashboard\PoleMonitor.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -21,15 +21,15 @@
</div>
<!-- 搜索区域 -->
<div class="pole-monitor-search-box">
- <el-select v-model="formData.name" placeholder="列车号" class="custom-select">
+ <el-select v-model="searchForm.name" 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="formData.deviceId" placeholder="车厢号" class="custom-select">
+ <el-select v-model="searchForm.deviceId" 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-select v-model="formData.faultType" placeholder="故障类型" class="custom-select">
+ <el-select v-model="searchForm.faultType" placeholder="故障类型" class="custom-select">
<el-option label="类型1" value="id001"></el-option>
<el-option label="类型2" value="id002"></el-option>
</el-select>
@@ -91,12 +91,6 @@ defineOptions({
name: "PoleMonitorIndex"
});
const modules = [Navigation, Scrollbar];
-// 搜索表单
-const searchForm = ref({
- trainNo: 'all',
- carriageNo: 'all',
- faultType: 'all'
-});
const images = ref([
'https://picsum.photos/300/200?random=1',
'https://picsum.photos/300/200?random=2',
@@ -119,7 +113,7 @@ const onSlideChange = () => {
console.log("slide change");
};
-const currentRow = ref<Record<string, any>>({});
+// const currentRow = ref<Record<string, any>>({});
const columns = [
{
label: "车号",
@@ -167,7 +161,7 @@ const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
const listData = ref([]);
-const formData = reactive({
+const searchForm = reactive({
name: "",
status: "",
faultType: "",
@@ -179,7 +173,7 @@ const getList = async () => {
const { currentPage, pageSize } = pagination.value;
const res = await fetch('/api/getPoleMonitorList', {
method: 'POST',
- body: JSON.stringify({ ...formData, page: currentPage, pageSize })
+ body: JSON.stringify({ ...searchForm, page: currentPage, pageSize })
})
const { data } = await res.json()
console.log(data, 'getList_data')
@@ -199,8 +193,9 @@ const handleQuery = () => {
// 重置方法
const handleReset = () => {
- formData.name = '';
+ searchForm.name = '';
// deviceId.value = '';
+ getList()
};
function handleTableChange(record) {