taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0913

Browse Source
This commit is contained in:
dhr
2025-09-13 18:43:26 +08:00
parent 120a46d76c
commit 2d6f9282d9
20 changed files with 12777 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/views/dhr_demo/xunjianjihua.vue
View File

@ -3,14 +3,15 @@
<div class="navigation-tabs">
<div class="nav-tab" @click="handleInspection1">待办事项</div>
<div class="nav-tab active" @click="handleInspection2">巡检管理</div>
<div class="nav-tab">试验管理</div>
<div class="nav-tab">报修管理</div>
<div class="nav-tab">抢修管理</div>
<div class="nav-tab">工单管理</div>
<div class="nav-tab" @click="handleInspection3">试验管理</div>
<div class="nav-tab" @click="handleInspection4">报修管理</div>
<div class="nav-tab" @click="handleInspection5">抢修管理</div>
<div class="nav-tab" @click="handleInspection6">工单管理</div>
<div class="nav-tab" @click="handleInspection7">运维组织</div>
</div>
<div style="display: flex; align-items: center; gap: 1200px">
<div class="header-container">
<TitleComponent title="运维巡检管理" subtitle="制定巡检计划，安排巡检任务，跟进巡检记录"></TitleComponent>
<div style="display: flex; align-items: center; gap: 10px">
<div class="header-actions">
<el-button type="primary" class="export-btn">筛选</el-button>
<el-button type="primary" class="create-btn">导入数据</el-button>
</div>
@ -58,10 +59,10 @@
</div>
</div>
<!-- 主内容区 -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6" style="grid-auto-rows: 1fr">
<!-- 主内容区 - 使用flex确保等高 -->
<div class="main-content-container">
<!-- 左侧和中间内容区 -->
<div class="lg:col-span-2 space-y-6">
<div class="left-content">
<!-- 巡检记录与报告卡片 -->
<div class="content-card">
<div class="card-header">
@ -260,14 +261,14 @@
</div>
<!-- 右侧最近巡检结果 -->
<div class="lg:col-span-1" style="display: flex; flex-direction: column; height: 100%">
<div class="content-card" style="flex: 1; display: flex; flex-direction: column">
<div class="right-content">
<div class="content-card h-full flex flex-col">
<div class="card-header">
<h2 class="card-title">最近巡检结果</h2>
</div>
<!-- 巡检结果列表 -->
<div class="card-body" style="flex: 1; overflow-y: auto">
<!-- 巡检结果列表 - 添加滚动样式 -->
<div class="card-body flex-1 overflow-y-auto scrollbar-thin">
<div class="inspection-results space-y-4">
<!-- 结果1：正常 -->
<div class="inspection-card bg-white border border-gray-200 rounded-lg p-4 shadow-sm">
@ -281,7 +282,7 @@
<div class="flex flex-col items-center">
<i class="fas fa-check-circle text-green-500 text-lg mb-1"></i>
<span class="text-xs text-gray-600 mb-1">系统连接量</span>
<span class="text-sm font-medium">128<500</span>
<span class="text-sm font-medium">128</span>
</div>
<div class="flex flex-col items-center">
<i class="fas fa-check-circle text-green-500 text-lg mb-1"></i>
@ -421,6 +422,21 @@ const handleInspection1 = () => {
const handleInspection2 = () => {
router.push('/rili/InspectionManagement');
};
const handleInspection3 = () => {
router.push('/rili/shiyanguanli');
};
const handleInspection4 = () => {
router.push('/rili/baoxiuguanli');
};
const handleInspection5 = () => {
router.push('/rili/qiangxiuguanli');
};
const handleInspection6 = () => {
router.push('/rili/gongdanliebiao');
};
const handleInspection7 = () => {
router.push('/rili/renyuanzhuangtai');
};
const handleInspectionManagement1 = () => {
router.push('/rili/InspectionManagement');
};
@ -440,6 +456,19 @@ const handleInspectionManagement3 = () => {
min-height: 100vh;
}
/* 头部容器 - 替换了固定gap的flex布局 */
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-actions {
display: flex;
align-items: center;
gap: 10px;
}
/* 导航栏样式 */
.navigation-tabs {
display: flex;
@ -527,12 +556,35 @@ const handleInspectionManagement3 = () => {
border-radius: 4px;
}
/* 主内容区 - 使用flex确保等高 */
.main-content-container {
display: flex;
gap: 20px;
height: calc(100% - 20px);
min-height: 500px; /* 确保有最小高度 */
}
.left-content {
flex: 2; /* 左侧占2/3宽度 */
display: flex;
flex-direction: column;
}
.right-content {
flex: 1; /* 右侧占1/3宽度 */
display: flex;
flex-direction: column;
}
/* 内容卡片样式 */
.content-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
overflow: hidden;
height: 100%; /* 卡片高度占满容器 */
display: flex;
flex-direction: column;
}
.card-header {
@ -552,6 +604,7 @@ const handleInspectionManagement3 = () => {
.card-body {
padding: 0 20px;
flex: 1; /* 内容区域占满剩余空间 */
}
/* 统计卡片样式 */
@ -657,8 +710,36 @@ const handleInspectionManagement3 = () => {
background-color: #ecf5ff;
}
/* 滚动条样式优化 */
.scrollbar-thin {
scrollbar-width: thin;
scrollbar-color: #d1d5db #f3f4f6;
}
.scrollbar-thin::-webkit-scrollbar {
width: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: #f3f4f6;
border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
background-color: #d1d5db;
border-radius: 3px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
background-color: #9ca3af;
}
/* 响应式设计 */
@media (max-width: 1200px) {
.main-content-container {
flex-direction: column;
}
.filter-bar {
flex-direction: column;
align-items: stretch;