3 Commits

Author SHA1 Message Date
dhr
f58efb0e08 0929 2025-09-29 17:17:42 +08:00
dhr
db9e2e55ea 0929 2025-09-29 15:18:50 +08:00
dhr
6079814962 0928 2025-09-28 20:12:49 +08:00
15 changed files with 958 additions and 432 deletions

View File

@ -5,7 +5,7 @@ VITE_APP_TITLE = 新能源场站智慧运维平台
VITE_APP_ENV = 'development'
# 开发环境
VITE_APP_BASE_API = 'http://192.168.110.149:18899'
VITE_APP_BASE_API = 'http://192.168.110.210:18899'
# 应用访问路径 例如使用前缀 /admin/
VITE_APP_CONTEXT_PATH = '/'

View File

@ -31,6 +31,7 @@
suffix-icon="el-icon-search"
@keyup.enter="handleSearch"
></el-input>
<el-button icon="Refresh" @click="() => { searchKeyword = ''; handleSearch(); }">重置</el-button>
<el-button type="primary" class="new-team-btn" @click="handleCreateTeam"> <i class="el-icon-plus"></i> 新增班组 </el-button>
</div>
</div>

View File

@ -22,6 +22,9 @@
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(名称/报修人/维修人)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="taskStatus" placeholder="任务状态">
<el-option label="待执行" value="pending"></el-option>
@ -46,6 +49,7 @@
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
<el-button icon="Refresh" @click="resetFilters"> 重置 </el-button>
<el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
</div>
</div>
@ -391,6 +395,7 @@ import { ElMessage, ElLoading } from 'element-plus';
const activeTab = ref('task');
// 筛选条件
const keyword = ref('');
const taskStatus = ref('');
const planType = ref('');
const executor = ref('');
@ -580,12 +585,23 @@ const statusOrder = {
// 分页处理后的数据(含排序)
const pagedTasks = computed(() => {
// 先按状态排序
const sortedTasks = [...tasks.value].sort((a, b) => {
return statusOrder[a.status] - statusOrder[b.status];
});
// 先关键词过滤
let filtered = [...tasks.value];
if (keyword.value && keyword.value.trim()) {
const kw = keyword.value.trim();
filtered = filtered.filter((t) =>
(t.title && t.title.includes(kw)) ||
(t.reporter && t.reporter.includes(kw)) ||
(t.maintainer && t.maintainer.includes(kw)) ||
(t.id && String(t.id).includes(kw))
);
}
// 再进行分页
// 按状态排序
const sortedTasks = filtered.sort((a, b) => statusOrder[a.status] - statusOrder[b.status]);
// 更新总数并分页
total.value = sortedTasks.length;
const startIndex = (currentPage.value - 1) * pageSize.value;
const endIndex = startIndex + pageSize.value;
return sortedTasks.slice(startIndex, endIndex);
@ -597,6 +613,15 @@ const handleSearch = () => {
getTaskList(); // 调用接口获取数据
};
const resetFilters = () => {
keyword.value = '';
taskStatus.value = '';
planType.value = '';
executor.value = '';
currentPage.value = 1;
getTaskList();
};
// 创建报修任务弹窗相关
const createTaskDialogVisible = ref(false);
const createTaskFormRef = ref(null);

View File

@ -23,6 +23,9 @@
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(单号/内容/报修人/维修人)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="taskStatus" placeholder="任务状态">
<el-option label="待执行" value="1"></el-option>
@ -56,6 +59,7 @@
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
<el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
</div>
</div>
</div>
@ -379,6 +383,7 @@ const taskStatus = ref('');
const priority = ref('');
const executor = ref('');
const dateRange = ref([]);
const keyword = ref('');
// 分页相关
const currentPage = ref(1);
@ -438,8 +443,13 @@ const fetchRepairRecords = async () => {
// 筛选后的记录
const filteredRecords = computed(() => {
// 实际应用中这里会根据筛选条件过滤数据
return repairRecords.value;
const kw = keyword.value.trim().toLowerCase();
if (!kw) return repairRecords.value;
return repairRecords.value.filter((r) =>
[r.id, r.reportInfo, r.reportName, r.sendPersonVo?.userName, getStatusText(r.status)]
.filter(Boolean)
.some((v) => String(v).toLowerCase().includes(kw))
);
});
// 搜索处理
@ -448,6 +458,17 @@ const handleSearch = () => {
fetchRepairRecords(); // 重新获取数据
};
// 重置筛选
const resetFilters = () => {
taskStatus.value = '';
priority.value = '';
executor.value = '';
dateRange.value = [];
keyword.value = '';
currentPage.value = 1;
fetchRepairRecords();
};
// 分页事件
const handleSizeChange = (val) => {
pageSize.value = val;

View File

@ -71,6 +71,11 @@
<el-input v-model="plateNumber4" maxlength="1" class="plate-char"></el-input>
<el-input v-model="plateNumber5" maxlength="1" class="plate-char"></el-input>
</div>
<div style="margin-top: 10px; display: flex; gap: 8px; justify-content: flex-end">
<el-input v-model="searchKeyword" placeholder="关键字(编号/类型/车牌)" clearable @keyup.enter="handleSearch" style="max-width: 220px" />
<el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
<el-button icon="Refresh" @click="resetFilters">重置</el-button>
</div>
</div>
</div>
</div>

View File

@ -22,6 +22,9 @@
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(标题/描述/创建人/编号)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="workOrderType" placeholder="工单类型" clearable>
<el-option label="全部类型" value="all"></el-option>
@ -53,6 +56,7 @@
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch">搜索</el-button>
<el-button icon="Refresh" class="create-btn" @click="resetFilters">重置</el-button>
<el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateWorkOrder">发起工单任务</el-button>
</div>
</div>
@ -454,6 +458,7 @@ import { ElMessageBox } from 'element-plus';
const activeTab = ref('list');
// 筛选条件
const keyword = ref('');
const workOrderType = ref('all');
const workOrderStatus = ref('all');
const priority = ref('all');
@ -604,10 +609,82 @@ const formatDate = (dateString) => {
// 初始化加载数据
fetchWorkOrderList();
// 分页处理后的数据
// 分页处理后的数据(前端筛选+分页)
const pagedTableData = computed(() => {
// 由于接口已经处理了分页和筛选,这里直接返回全部数据
return rawTableData.value;
let filteredData = [...rawTableData.value];
if (keyword.value && keyword.value.trim()) {
const kw = keyword.value.trim();
filteredData = filteredData.filter((item) =>
(item.title && item.title.includes(kw)) ||
(item.description && item.description.includes(kw)) ||
(item.creator && item.creator.includes(kw)) ||
(item.orderNo && item.orderNo.includes(kw))
);
}
if (workOrderType.value !== 'all') {
let typeText = '';
switch (workOrderType.value) {
case 'maintenance':
typeText = '维护保养';
break;
case 'inspection':
typeText = '检查检测';
break;
case 'installation':
typeText = '安装调试';
break;
case 'upgrade':
typeText = '升级改造';
break;
}
filteredData = filteredData.filter((item) => item.type === typeText);
}
if (workOrderStatus.value !== 'all') {
let statusText = '';
switch (workOrderStatus.value) {
case 'accepted':
statusText = '已接单';
break;
case 'pending':
statusText = '待处理';
break;
case 'executing':
statusText = '执行中';
break;
case 'completed':
statusText = '已完成';
break;
}
filteredData = filteredData.filter((item) => item.status === statusText);
}
if (priority.value !== 'all') {
let priorityText = '';
switch (priority.value) {
case 'high':
priorityText = '高';
break;
case 'medium':
priorityText = '中';
break;
case 'low':
priorityText = '低';
break;
}
filteredData = filteredData.filter((item) => item.priority === priorityText);
}
if (createDate.value) {
filteredData = filteredData.filter((item) => item.createTime && item.createTime.includes(createDate.value));
}
total.value = filteredData.length;
const startIndex = (currentPage.value - 1) * pageSize.value;
const endIndex = startIndex + pageSize.value;
return filteredData.slice(startIndex, endIndex);
});
// 获取类型标签样式
@ -690,19 +767,26 @@ const getStepStatusText = (status) => {
const handleSearch = () => {
currentPage.value = 1; // 重置到第一页
fetchWorkOrderList(); // 重新获取数据
};
// 重置筛选
const resetFilters = () => {
keyword.value = '';
workOrderType.value = 'all';
workOrderStatus.value = 'all';
priority.value = 'all';
createDate.value = '';
currentPage.value = 1;
};
// 分页事件
const handleSizeChange = (val) => {
pageSize.value = val;
currentPage.value = 1;
fetchWorkOrderList(); // 重新获取数据
};
const handleCurrentChange = (val) => {
currentPage.value = val;
fetchWorkOrderList(); // 重新获取数据
};
// 选项卡点击
@ -1539,46 +1623,7 @@ const handleInspectionManagement3 = () => {
}
/* 导航栏样式 */
.navigation-tabs {
display: flex;
margin-bottom: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
padding: 2px;
}
.nav-tab {
padding: 12px 24px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 4px;
font-size: 14px;
color: #606266;
border-right: 1px solid #f0f0f0;
flex: 1;
text-align: center;
}
.nav-tab:last-child {
border-right: none;
}
.nav-tab:hover {
color: #409eff;
background-color: #ecf5ff;
}
.nav-tab.active {
background-color: #409eff;
color: #fff;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}
.nav-tab {
cursor: pointer;
user-select: none;
}
/* 已注释的导航栏样式移除 */
/* 弹窗样式 */
.create-dialog {

View File

@ -24,6 +24,9 @@
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(标题/描述/创建人/编号)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="workOrderType" placeholder="工单类型" clearable>
<el-option label="全部类型" value="all"></el-option>
@ -55,6 +58,7 @@
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch">搜索</el-button>
<el-button icon="Refresh" class="create-btn" @click="resetFilters">重置</el-button>
</div>
</div>
</div>
@ -509,6 +513,7 @@ import ImageUpload from '@/components/ImageUpload/index.vue';
import { ElMessageBox, ElMessage } from 'element-plus';
// 筛选条件
const keyword = ref('');
const workOrderType = ref('all');
const workOrderStatus = ref('all');
const priority = ref('all');
@ -750,6 +755,18 @@ const pagedTableData = computed(() => {
// 筛选逻辑
let filteredData = [...rawTableData.value];
if (keyword.value && keyword.value.trim()) {
const kw = keyword.value.trim();
filteredData = filteredData.filter((item) => {
return (
(item.title && item.title.includes(kw)) ||
(item.description && item.description.includes(kw)) ||
(item.creator && item.creator.includes(kw)) ||
(item.orderNo && item.orderNo.includes(kw))
);
});
}
if (workOrderType.value !== 'all') {
// 转换筛选条件为显示文本进行匹配
let typeText = '';
@ -862,6 +879,16 @@ const handleSearch = () => {
currentPage.value = 1; // 重置到第一页
};
// 重置筛选
const resetFilters = () => {
keyword.value = '';
workOrderType.value = 'all';
workOrderStatus.value = 'all';
priority.value = 'all';
createDate.value = '';
currentPage.value = 1;
};
// 分页事件
const handleSizeChange = (val) => {
pageSize.value = val;
@ -1763,46 +1790,7 @@ const handleCloseDetailDialog = () => {
}
/* 导航栏样式 */
.navigation-tabs {
display: flex;
margin-bottom: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
padding: 2px;
}
.nav-tab {
padding: 12px 24px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 4px;
font-size: 14px;
color: #606266;
border-right: 1px solid #f0f0f0;
flex: 1;
text-align: center;
}
.nav-tab:last-child {
border-right: none;
}
.nav-tab:hover {
color: #409eff;
background-color: #ecf5ff;
}
.nav-tab.active {
background-color: #409eff;
color: #fff;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}
.nav-tab {
cursor: pointer;
user-select: none;
}
/* 已注释的导航栏样式移除 */
/* 弹窗样式 */
.create-dialog {

View File

@ -22,6 +22,9 @@
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(名称/报修人/维修人/位置)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="taskStatus" placeholder="任务状态">
<el-option label="待执行" value="pending"></el-option>
@ -49,6 +52,7 @@
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
<el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
<el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
</div>
</div>
@ -426,6 +430,7 @@ import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian';
const taskStatus = ref('all');
const planType = ref('all');
const executor = ref('all');
const keyword = ref('');
// 任务数据 - 添加了更多字段以展示滚动效果
const tasks = ref([]);
// 分页相关
@ -458,6 +463,16 @@ const handleSearch = () => {
getTaskList(); // 调用接口获取数据
};
// 重置筛选
const resetFilters = () => {
taskStatus.value = 'all';
planType.value = 'all';
executor.value = 'all';
keyword.value = '';
currentPage.value = 1;
getTaskList();
};
// 创建紧急抢修任务弹窗相关
const createTaskDialogVisible = ref(false);
const createTaskFormRef = ref(null); // 表单引用
@ -1090,9 +1105,8 @@ async function getTaskList() {
const res = await qiangxiulist(requestParams);
if (res.code === 200 && res.rows) {
total.value = res.total || 0;
// 将API返回的数据转换为前端显示所需的格式
tasks.value = res.rows.map((item) => ({
const mapped = res.rows.map((item) => ({
id: item.id,
title: item.name || '未命名抢修任务',
status: mapStatusToKey(item.status),
@ -1124,6 +1138,19 @@ async function getTaskList() {
// 添加needSupport字段确保从API返回数据中获取实际值
needSupport: item.support || ''
}));
// 关键词过滤
const kw = keyword.value.trim().toLowerCase();
const filtered = kw
? mapped.filter((t) =>
[t.title, t.reporter, t.maintainer, t.position, t.statusText]
.filter(Boolean)
.some((v) => String(v).toLowerCase().includes(kw))
)
: mapped;
tasks.value = filtered;
total.value = kw ? filtered.length : res.total || filtered.length;
} else {
tasks.value = [];
total.value = 0;
@ -1578,7 +1605,8 @@ setTimeout(() => {
.detail-value {
flex: 1;
color: #4e5969;
word-break: break-all;
word-break: break-word;
line-height: 1.5;
}
.task-result {
@ -1595,13 +1623,7 @@ setTimeout(() => {
align-items: center;
padding-top: 12px;
border-top: 1px solid #f0f2f5;
position: absolute;
bottom: 16px;
right: 16px;
left: 16px;
background-color: #fff;
padding: 12px 0 0 0;
z-index: 10;
}
.action-btn {
@ -1705,10 +1727,11 @@ setTimeout(() => {
}
.task-title {
font-size: 14px;
font-size: 16px;
font-weight: 500;
color: #1d2129;
line-height: 1.4;
word-break: break-word;
flex: 1;
margin-right: 8px;
}
@ -1721,35 +1744,32 @@ setTimeout(() => {
border: 1px solid transparent;
}
/* 不同故障类型的颜色 */
/* 电力,设备故障为红色 */
.task-type-tag.electric,
.task-type-tag.equipment {
/* 优先级标签背景色样式 - 与保修管理页面保持一致 */
.priority-high {
background-color: #fff2f0;
color: #ff4d4f;
border-color: #ffccc7;
}
/* 供水,设备损坏为黄色 */
.task-type-tag.water,
.task-type-tag.damage {
.priority-medium {
background-color: #fffbe6;
color: #fa8c16;
border-color: #ffe58f;
}
/* 其余为绿色 */
.task-type-tag {
background-color: #f6ffed;
color: #52c41a;
border-color: #b7eb8f;
.priority-low {
background-color: #e6f7ff;
color: #1890ff;
border-color: #91d5ff;
}
.task-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.task-card[data-v-2668390e]::before {
/* 左侧状态线样式 - 与保修管理页面保持一致 */
.task-card::before {
content: '';
position: absolute;
left: 0;
@ -1757,6 +1777,22 @@ setTimeout(() => {
bottom: 0;
width: 4px;
}
.left-line-high::before {
background-color: #ff4d4f;
}
.left-line-medium::before {
background-color: #fa8c16;
}
.left-line-low::before {
background-color: #1677ff;
}
.left-line-completed::before {
background-color: #52c41a;
}
.task-details {
margin-bottom: 16px;
}
@ -1769,8 +1805,9 @@ setTimeout(() => {
}
.detail-label {
flex: 0 0 70px;
flex: 0 0 85px;
color: #86909c;
margin-right: 4px;
}
.detail-value {

View File

@ -22,6 +22,9 @@
<!-- 筛选栏 (默认隐藏) -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(单号/内容/报修人/维修人)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="taskStatus" placeholder="任务状态">
<el-option label="待执行" value="pending"></el-option>
@ -54,6 +57,7 @@
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
<el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
</div>
</div>
</div>
@ -64,7 +68,9 @@
<div class="stat-info">
<p class="stat-label">本月抢修总数</p>
<p class="stat-value">{{ isCardLoading ? '加载中...' : statisticsData.totalCount }}</p>
<p class="stat-trend up">较上月:{{ statisticsData.monthChange }}</p>
<p class="stat-trend" :class="statisticsData.monthChangeClass">
较上月{{ statisticsData.monthChangeClass === 'warning' ? '无增长' : ':' + statisticsData.monthChange }}
</p>
</div>
<div class="stat-icon">
<img src="@/assets/images/qiangxiu.png" alt="本月抢修总数" class="stat-image" />
@ -75,7 +81,9 @@
<div class="stat-info">
<p class="stat-label">平均抢修时长</p>
<p class="stat-value">{{ isCardLoading ? '加载中...' : statisticsData.avgDuration }}</p>
<p class="stat-trend down">较上月:{{ statisticsData.durationChange }}</p>
<p class="stat-trend" :class="statisticsData.durationChangeClass">
较上月{{ statisticsData.durationChangeClass === 'warning' ? '无增长' : ':' + statisticsData.durationChange }}
</p>
</div>
<div class="stat-icon">
<img src="@/assets/images/qiangxiushijian.png" alt="平均抢修时长" class="stat-image" />
@ -97,7 +105,9 @@
<div class="stat-info">
<p class="stat-label">按时完成率</p>
<p class="stat-value">{{ isCardLoading ? '加载中...' : statisticsData.completionRate }}</p>
<p class="stat-trend up">{{ statisticsData.rateChange }}</p>
<p class="stat-trend" :class="statisticsData.rateChangeClass">
{{ statisticsData.rateChangeClass === 'warning' ? '较上月无增长' : statisticsData.rateChange }}
</p>
</div>
<div class="stat-icon success">
<img src="@/assets/images/qiangxiuwancheng.png" alt="按时完成率" class="stat-image" />
@ -360,6 +370,7 @@ const priority = ref('');
const executor = ref('');
const dateRange = ref([]);
const showFilter = ref(false);
const keyword = ref('');
// 表单验证规则
const assignTaskRules = {
@ -427,7 +438,7 @@ const getTaskList = async () => {
if (res && res.code === 200) {
// 更新表格数据,将接口返回的字段映射到表格期望的字段
repairRecords.value = Array.isArray(res.rows)
const mapped = Array.isArray(res.rows)
? res.rows.map((item) => ({
// 映射抢修单号
reportNo: `R-${item.id || '000'}`,
@ -454,7 +465,19 @@ const getTaskList = async () => {
originalData: item
}))
: [];
total.value = res.total || 0;
// 关键词过滤
const kw = keyword.value.trim().toLowerCase();
const filtered = kw
? mapped.filter((r) =>
[r.reportNo, r.content, r.reporter, r.handler, r.status]
.filter(Boolean)
.some((v) => String(v).toLowerCase().includes(kw))
)
: mapped;
repairRecords.value = filtered;
total.value = kw ? filtered.length : res.total || filtered.length;
} else {
ElMessage.error(`获取抢修记录失败:${res?.msg || '未知错误'}`);
repairRecords.value = [];
@ -586,15 +609,33 @@ const getStatisticsData = async () => {
const res = await qiangxiuRecord({ projectId: 1 });
if (res && res.code === 200) {
// 更新统计卡片数据
// API返回的实际数据在data字段中
const data = res.data || {};
// 更新统计卡片数据 - 映射新的API返回字段
// 解析百分比数据并添加判断逻辑
const bxsPercent = parseFloat(data.bxsjszzzl) || 0;
const clscPercent = parseFloat(data.clscjszzzl) || 0;
const wclPercent = parseFloat(data.wcljszzzl) || 0;
// 判断并设置变化率样式类
const getChangeClass = (percent) => {
if (percent > 100) return 'up';
if (percent < 100 && percent !== 0) return 'down';
return 'warning'; // 等于100或0时显示为灰色无变化
};
statisticsData.value = {
totalCount: res.totalCount || 0,
avgDuration: res.avgDuration || '0分钟',
pendingCount: res.pendingCount || 0,
completionRate: res.completionRate || '0%',
monthChange: res.monthChange || '+0%',
durationChange: res.durationChange || '-0分钟',
rateChange: res.rateChange || '+0%'
totalCount: data.byzbxs || 0, // 本月报修总数
avgDuration: `${data.pjclsc || 0}分钟`, // 平均处理时长
pendingCount: data.dclbx || 0, // 待处理报修
completionRate: `${data.wcl || 0}%`, // 完成率
monthChange: `${bxsPercent > 0 ? '+' : ''}${bxsPercent}%`, // 报修数较上月变化
monthChangeClass: getChangeClass(bxsPercent), // 报修数变化率样式类
durationChange: `${clscPercent > 0 ? '+' : '-'}${Math.abs(clscPercent)}分钟`, // 处理时长较上月变化
durationChangeClass: getChangeClass(clscPercent), // 处理时长变化率样式类
rateChange: `${wclPercent > 0 ? '+' : ''}${wclPercent}%`, // 完成率较上月变化
rateChangeClass: getChangeClass(wclPercent) // 完成率变化率样式类
};
} else {
ElMessage.error(`获取统计数据失败:${res?.msg || '未知错误'}`);
@ -1122,7 +1163,7 @@ const handleInspectionManagement2 = () => {
}
.stat-trend.warning {
color: #fa8c16;
color: #999;
}
.stat-icon {
@ -1210,39 +1251,53 @@ const handleInspectionManagement2 = () => {
}
.status-tag {
padding: 2px 8px;
border-radius: 4px;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
}
.status-tag.processing {
.status-processing {
background-color: #fffbe6;
color: #faad14;
border: 1px solid #fff1b8;
color: #fa8c16;
border: 1px solid #ffe58f;
}
.status-tag.completed {
background-color: #f0f9eb;
.status-completed {
background-color: #f6ffed;
color: #52c41a;
border: 1px solid #e1f3d8;
border: 1px solid #b7eb8f;
}
.status-pending {
background-color: #e6f7ff;
color: #1677ff;
border: 1px solid #91d5ff;
}
.priority-tag {
padding: 2px 8px;
border-radius: 4px;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
}
.priority-tag.urgent {
background-color: #ffebe6;
.priority-urgent {
background-color: #fff2f0;
color: #ff4d4f;
border: 1px solid #ffccc7;
}
.priority-tag.normal {
.priority-normal {
background-color: #e6f7ff;
color: #1890ff;
border: 1px solid #b3d8ff;
color: #1677ff;
border: 1px solid #91d5ff;
}
.priority-fatal {
background-color: #fff2f0;
color: #ff4d4f;
border: 1px solid #ffccc7;
}
.detail-btn {
@ -1253,6 +1308,10 @@ const handleInspectionManagement2 = () => {
color: #fa8c16;
}
.evaluate-btn {
color: #52c41a;
}
/* 分页区域样式 */
.pagination-section {
display: flex;

View File

@ -24,6 +24,7 @@
<!-- 4. 筛选和操作区域与试验系统filter-and-actions结构一致 -->
<div class="filter-and-actions">
<div class="filters">
<el-input v-model="keyword" placeholder="关键字(计划名/编号/负责人)" clearable @keyup.enter="handleSearch" style="width: 220px" />
<el-select v-model="filterStatus" placeholder="巡检状态" clearable>
<el-option label="全部状态" value="all"></el-option>
<el-option label="正常" value="normal"></el-option>
@ -49,7 +50,8 @@
></el-date-picker>
</div>
<div class="action-buttons">
<el-button type="primary" icon="Search" class="search-btn"> 搜索 </el-button>
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
<el-button icon="Refresh" @click="resetFilters"> 重置 </el-button>
<el-button type="primary" icon="Plus" class="create-btn" @click="openRecordDialog"> <i class="fas fa-plus"></i> 新增实验记录 </el-button>
</div>
</div>
@ -581,6 +583,7 @@ const activeTab = ref('plan'); // 默认为"巡检计划"
const timeRange = ref('month'); // 统计时间范围:月/周/日
// 2. 筛选条件
const keyword = ref('');
const filterStatus = ref('all');
const filterType = ref('all');
const dateRange = ref([]);
@ -628,6 +631,22 @@ const fetchExperimentData = async () => {
}
};
// 搜索与重置(当前数据主要来自接口,保留前端筛选入口)
const handleSearch = () => {
// 可根据项目需要将 keyword/filter 传给接口;当前保持页内刷新
currentPage.value = 1;
fetchExperimentData();
};
const resetFilters = () => {
keyword.value = '';
filterStatus.value = 'all';
filterType.value = 'all';
dateRange.value = [];
currentPage.value = 1;
fetchExperimentData();
};
// 辅助方法
const getTestObjectText = (type) => {
const typeMap = {
@ -1237,41 +1256,7 @@ const formatDateTime = (dateString) => {
background-color: #f9fbfd;
min-height: 100vh;
}
.navigation-tabs {
display: flex;
margin-bottom: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
padding: 2px;
}
.nav-tab {
padding: 12px 24px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 4px;
font-size: 14px;
color: #606266;
border-right: 1px solid #f0f0f0;
flex: 1;
text-align: center;
}
.nav-tab:last-child {
border-right: none;
}
.nav-tab:hover {
color: #409eff;
background-color: #ecf5ff;
}
.nav-tab.active {
background-color: #409eff;
color: #fff;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}
/* 已注释的导航栏样式移除 */
/* 3. 页面标题 */
.page-header {

View File

@ -23,6 +23,7 @@
<!-- 筛选和操作区域 -->
<div class="filter-and-actions">
<div class="filters">
<el-input v-model="keyword" placeholder="关键字(任务名/负责人/编号)" clearable @keyup.enter="handleSearch" style="width: 220px" />
<el-select v-model="filterStatus" placeholder="巡检状态" clearable>
<el-option label="全部状态" value="all"></el-option>
<el-option label="正常" value="normal"></el-option>
@ -47,7 +48,8 @@
class="date-picker"
></el-date-picker>
<el-button icon="Search" type="primary" class="search-btn"> 搜索 </el-button>
<el-button icon="Search" type="primary" class="search-btn" @click="handleSearch"> 搜索 </el-button>
<el-button icon="Refresh" @click="resetFilters"> 重置 </el-button>
</div>
</div>
@ -132,7 +134,7 @@
<div class="test-records">
<!-- 动态生成试验记录卡片 -->
<div
v-for="(record, recordIndex) in testRecords"
v-for="(record, recordIndex) in filteredTestRecords"
:key="record.id"
class="test-record-card"
:class="{ 'passed': record.status === 'completed', 'failed': record.status === 'failed' }"
@ -396,6 +398,7 @@ import { syrenwulist, syrenwujilu, syrenwuDetail } from '@/api/zhinengxunjian/sh
const activeTab = ref('record'); // 默认显示"试验记录"
// 2. 筛选条件
const keyword = ref('');
const filterStatus = ref('all');
const filterType = ref('all');
const dateRange = ref([]);
@ -449,6 +452,37 @@ const getTestRecords = async () => {
}
};
// 前端过滤后的试验记录
const filteredTestRecords = computed(() => {
let data = [...testRecords.value];
if (keyword.value && keyword.value.trim()) {
const kw = keyword.value.trim();
data = data.filter((rec) => {
return (
(rec.taskName && rec.taskName.includes(kw)) ||
(rec.personInfo?.userName && rec.personInfo.userName.includes(kw)) ||
(rec.id && String(rec.id).includes(kw))
);
});
}
// 可根据筛选状态/类型进一步过滤(若后续需要)
return data;
});
// 搜索与重置
const handleSearch = () => {
// 若后端支持条件,可在此调用接口;当前保持前端过滤
};
const resetFilters = () => {
keyword.value = '';
filterStatus.value = 'all';
filterType.value = 'all';
dateRange.value = [];
};
// 8. 方法:获取统计数据
const getStatisticsData = async () => {
try {
@ -715,41 +749,7 @@ onMounted(async () => {
min-height: 100vh;
}
.navigation-tabs {
display: flex;
margin-bottom: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
padding: 2px;
}
.nav-tab {
padding: 12px 24px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 4px;
font-size: 14px;
color: #606266;
border-right: 1px solid #f0f0f0;
flex: 1;
text-align: center;
}
.nav-tab:last-child {
border-right: none;
}
.nav-tab:hover {
color: #409eff;
background-color: #ecf5ff;
}
.nav-tab.active {
background-color: #409eff;
color: #fff;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}
/* 已注释的导航栏样式移除 */
/* 3. 选项卡样式 */
.tabs-wrapper {

View File

@ -24,6 +24,9 @@
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(任务名/测试对象/执行人)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="taskStatus" placeholder="任务状态">
<el-option label="待执行" value="1"></el-option>
@ -50,6 +53,7 @@
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
<el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
<el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
</div>
</div>
@ -479,6 +483,7 @@ const loading = ref(false);
// 筛选条件(与接口参数对应)
const taskStatus = ref(''); // 任务状态1=待执行2=暂停已延期3=失败4=执行中5=已完成
const planType = ref(''); // 关联计划ID1=每日2=每周3=每月
const keyword = ref(''); // 关键词
/**
* 将节点数据按模块分组
@ -716,8 +721,18 @@ const getTaskList = async () => {
if (response.code === 200) {
// 3. 接口数据映射为页面展示格式
tasks.value = (response.rows || []).map((item) => mapApiToView(item));
total.value = response.total || 0; // 同步总条数
const mapped = (response.rows || []).map((item) => mapApiToView(item));
// 4. 前端关键词过滤
const kw = keyword.value.trim();
const filtered = kw
? mapped.filter((t) =>
[t.title, t.target, t.executor, t.relatedPlan, t.statusText]
.filter(Boolean)
.some((v) => String(v).toLowerCase().includes(kw.toLowerCase()))
)
: mapped;
tasks.value = filtered;
total.value = kw ? filtered.length : response.total || filtered.length; // 同步总条数
} else {
ElMessage.error('获取任务列表失败:' + (response.msg || '未知错误'));
tasks.value = [];
@ -833,6 +848,18 @@ const mapApiToView = (apiData) => {
try {
// 优先查找nodes数组中处于执行中或失败的节点来确定当前试验阶段
if (apiData && apiData.nodes && Array.isArray(apiData.nodes)) {
// 优先查找失败状态的节点根据需求优先显示status为3的数据
const failedNode = apiData.nodes.find((node) => {
if (!node || node.status === undefined) return false;
return node.status === '3' || node.status === 3;
});
// 如果有失败的节点根据code判断阶段
if (failedNode && failedNode.code !== undefined) {
const stepName = failedNode.name || '未命名步骤';
return `${failedNode.code}步(${stepName})`;
}
// 查找执行中状态的节点
const executingNode = apiData.nodes.find((node) => {
if (!node || node.status === undefined) return false;
@ -845,18 +872,6 @@ const mapApiToView = (apiData) => {
return `${executingNode.code}步(${stepName})`;
}
// 查找失败状态的节点
const failedNode = apiData.nodes.find((node) => {
if (!node || node.status === undefined) return false;
return node.status === '3' || node.status === 3;
});
// 如果有失败的节点根据code判断阶段
if (failedNode && failedNode.code !== undefined) {
const stepName = failedNode.name || '未命名步骤';
return `${failedNode.code}步(${stepName})`;
}
// 查找已完成的节点,确定最后完成的阶段
const completedNodes = apiData.nodes.filter((node) => {
if (!node || node.status === undefined) return false;
@ -921,6 +936,16 @@ const handleSearch = () => {
getTaskList();
};
// 重置筛选条件
const resetFilters = () => {
taskStatus.value = '';
planType.value = '';
executor.value = 'all';
keyword.value = '';
currentPage.value = 1;
getTaskList();
};
/**
* 每页条数变化
* @param {number} val - 新的每页条数

View File

@ -654,46 +654,7 @@ const handleInspectionManagement3 = () => {
}
/* 导航栏样式 */
.navigation-tabs {
display: flex;
margin-bottom: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
padding: 2px;
}
.nav-tab {
padding: 12px 24px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 4px;
font-size: 14px;
color: #606266;
border-right: 1px solid #f0f0f0;
flex: 1;
text-align: center;
}
.nav-tab:last-child {
border-right: none;
}
.nav-tab:hover {
color: #409eff;
background-color: #ecf5ff;
}
.nav-tab.active {
background-color: #409eff;
color: #fff;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}
.nav-tab {
cursor: pointer;
user-select: none;
}
/* 已移除未使用的导航样式(模板中为注释状态) */
/* 选项卡样式 */
.tabs-wrapper {

View File

@ -23,6 +23,9 @@
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(任务名/对象/执行人)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="taskStatus" placeholder="任务状态">
<el-option label="待执行" value="pending"></el-option>
@ -43,6 +46,7 @@
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
<el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
<el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
</div>
</div>
@ -429,11 +433,13 @@ import { xjrenwuDetail, xjrenwulist, addxjrenwu, updatexjrenwu } from '@/api/zhi
import { xunjianUserlist, xunjianlist } from '@/api/zhinengxunjian/xunjian/index';
import { addjiedian } from '@/api/zhinengxunjian/jiedian/index';
import { ElMessage, ElLoading, ElForm } from 'element-plus';
import { formatDate } from '@/utils/index';
// 筛选条件
const taskStatus = ref('');
const planType = ref('');
const executor = ref('');
const keyword = ref('');
// 任务数据 - 初始为空数组通过API获取
const tasks = ref([]);
@ -543,16 +549,13 @@ const getTaskList = async () => {
const params = {
pageSize: pageSize.value,
pageNum: currentPage.value,
personId: 1,
taskType: taskStatus.value || undefined, // 任务状态
planType: planType.value || undefined, // 计划类型
personName: executor.value || undefined // 执行人
projectId: 1
};
const response = await xjrenwulist(params);
if (response.code === 200 && response.rows) {
tasks.value = response.rows.map((item) => {
const mapped = response.rows.map((item) => {
// 获取原始数据中的id
const taskId = item.id || '';
if (!taskId) {
@ -603,13 +606,16 @@ const getTaskList = async () => {
return task;
});
total.value = response.total || tasks.value.length;
// 搜索后如果没有结果,显示提示信息
if (tasks.value.length === 0) {
ElMessage.info('未找到符合条件的任务');
}
const kw = keyword.value.trim();
const filtered = kw
? mapped.filter((t) =>
[t.title, t.target, t.executor, t.relatedPlan, t.statusText]
.filter(Boolean)
.some((v) => String(v).toLowerCase().includes(kw.toLowerCase()))
)
: mapped;
tasks.value = filtered;
total.value = kw ? filtered.length : response.total || filtered.length;
}
} catch (error) {
console.error('获取巡检任务数据失败:', error);
@ -809,7 +815,7 @@ const handleSaveTask = async () => {
createTime: new Date().toISOString(),
updateTime: new Date().toISOString(),
startTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
startTime: formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss'),
params: {
property1: 'string',
property2: 'string'
@ -1045,7 +1051,7 @@ const handleAction = async (task) => {
const updateData = {
...originalTask.rawData,
id: task.id,
startTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
startTime: formatDate(new Date().toString()),
taskType: '3', // 3表示执行中
status: 'executing',
taskProgress: 0
@ -1072,14 +1078,7 @@ const handleAction = async (task) => {
const originalTask = tasks.value[taskIndex];
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const finishTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
const finishTime = formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss');
const updateData = {
...originalTask.rawData,

View File

@ -24,6 +24,9 @@
<!-- 筛选栏 -->
<div class="filter-bar">
<div class="filter-container">
<div class="filter-item">
<el-input v-model="keyword" placeholder="关键字(标题/描述/创建人)" clearable @keyup.enter="handleSearch" />
</div>
<div class="filter-item">
<el-select v-model="workOrderType" placeholder="工单类型" clearable>
<el-option label="全部类型" value="all"></el-option>
@ -55,6 +58,7 @@
</div>
<div class="filter-actions">
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch">搜索</el-button>
<el-button icon="Refresh" class="create-btn" @click="resetFilters">重置</el-button>
</div>
</div>
</div>
@ -83,26 +87,54 @@
</div>
</div>
<!-- 横向进度时间线 - 使用Element Plus的Steps组件 -->
<div class="progress-timeline-container">
<div class="progress-timeline">
<el-steps direction="horizontal" :active="activeStepIndex" align-center class="custom-steps" :progress-dot="false">
<template v-if="trackingSteps.length > 0">
<el-step v-for="(step, index) in trackingSteps" :key="step.id" :title="step.name" :status="getStatusByIndex(index)">
<template #description>
<div class="step-description">
<div class="step-person-time">
{{ step.executor || (step.getOrderPersonVo && step.getOrderPersonVo.userName) || '待分配' }}
</div>
<template v-if="step.intendedTime">
<div class="step-person-time">预期时间{{ formatDateTime(step.intendedTime) }}</div>
</template>
<div class="step-content">预期目的{{ step.intendedPurpose || '-' }}</div>
</div>
</template>
</el-step>
</template>
</el-steps>
<!-- 进度条设计 -->
<div class="tracking-progress-container" v-if="currentTrackedWorkOrder">
<!-- 进度条整体容器 -->
<div class="progress-bar-wrapper">
<!-- 进度条背景 -->
<div class="progress-bar-background"></div>
<!-- 进度条填充 -->
<div class="progress-bar-fill" :style="{ width: getProgressPercentage() + '%' }"></div>
<!-- 进度条节点 -->
<div class="progress-bar-nodes">
<div
v-for="(step, index) in trackingSteps"
:key="step.id"
class="progress-node"
:class="getStepStatusClass(index)"
:style="{ left: getNodePosition(index) + '%' }"
>
<div class="node-circle">
<div class="node-icon">{{ step.code || index + 1 }}</div>
</div>
</div>
</div>
</div>
<!-- 步骤信息显示 -->
<div class="progress-steps-info">
<div v-for="(step, index) in trackingSteps" :key="step.id" class="step-info-card" :class="getStepStatusClass(index)">
<div class="step-header">
<div class="step-number">{{ step.code || index + 1 }}</div>
<div class="step-name">{{ step.name }}</div>
</div>
<div class="step-details">
<div class="step-person">
<i class="el-icon-user"></i>
{{ step.executor || (step.getOrderPersonVo && step.getOrderPersonVo.userName) || '待分配' }}
</div>
<template v-if="step.intendedTime">
<div class="step-time">
<i class="el-icon-time"></i>
预期时间{{ formatDateTime(step.intendedTime) }}
</div>
</template>
<div class="step-purpose">
<i class="el-icon-document"></i>
预期目的{{ step.intendedPurpose || '-' }}
</div>
</div>
</div>
</div>
</div>
@ -140,6 +172,11 @@
</template>
</el-table-column>
<el-table-column align="center" prop="creator" label="创建人" min-width="100"></el-table-column>
<el-table-column align="center" prop="progress" label="工单进度" min-width="100">
<template #default="scope">
<el-progress :percentage="parseFloat(scope.row.progress) || 0" show-text />
</template>
</el-table-column>
<el-table-column align="center" prop="createTime" label="创建时间" min-width="140"></el-table-column>
<el-table-column align="center" prop="deadline" label="截止时间" min-width="140"></el-table-column>
<el-table-column align="center" prop="status" label="状态" min-width="100">
@ -296,13 +333,6 @@
<el-form-item label="工单描述">
<el-input v-model="createForm.resultDescription" type="textarea" :rows="3" placeholder="请描述该工单完成后预期达成的成果" />
</el-form-item>
<el-form-item label="是否需要执行人" prop="needAssignee">
<el-radio-group v-model="createForm.needAssignee">
<el-radio label="true">指定执行人</el-radio>
<el-radio label="false">由系统分配</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
@ -526,6 +556,7 @@ import ImageUpload from '@/components/ImageUpload/index.vue';
import { ElMessageBox, ElMessage } from 'element-plus';
// 筛选条件
const keyword = ref('');
const workOrderType = ref('all');
const workOrderStatus = ref('all');
const priority = ref('all');
@ -568,7 +599,8 @@ const fetchWorkOrderList = async () => {
getOrderTime: item.getOrderTime ? formatDate(item.getOrderTime) : '',
finishiOrderTime: item.finishiOrderTime ? formatDate(item.finishiOrderTime) : '',
position: item.position || '',
device: item.device || ''
device: item.device || '',
progress: item.progress // 添加进度字段
}));
// 更新总条数
@ -613,7 +645,8 @@ const updateCurrentTrackedOrder = () => {
intendedTime: node.intendedTime,
finishTime: node.finishTime,
intendedPurpose: node.intendedPurpose || '-',
remark: node.remark || ''
remark: node.remark || '',
status: node.status || '' // 添加status字段
}));
} else {
// 如果nodes数组为空创建一些默认的步骤数据
@ -621,13 +654,12 @@ const updateCurrentTrackedOrder = () => {
}
// 设置当前激活步骤索引
// 如果有实际的完成时间,我们可以基于此设置激活步骤
// 否则默认设置为第一个步骤
// 根据status字段判断status='1'表示完成status='2'表示未完成status='3'表示失败
activeStepIndex.value = 0;
// 检查是否有已完成的步骤,如果有,将激活步骤设置为最后一个已完成步骤的下一个
for (let i = trackingSteps.value.length - 1; i >= 0; i--) {
if (trackingSteps.value[i].finishTime) {
if (trackingSteps.value[i].status === '1') {
activeStepIndex.value = Math.min(i + 1, trackingSteps.value.length - 1);
break;
}
@ -797,8 +829,10 @@ const refreshTrackingSteps = async () => {
// 根据索引获取步骤状态
const getStatusByIndex = (index) => {
if (!currentTrackedWorkOrder.value) return 'wait';
if (index < activeStepIndex.value) {
return 'success';
return 'finish';
} else if (index === activeStepIndex.value) {
return 'process';
} else {
@ -806,6 +840,101 @@ const getStatusByIndex = (index) => {
}
};
// 试验记录页面步骤条状态判断 - 重点跟踪区域专用
const getStepStatusClass = (index) => {
if (!currentTrackedWorkOrder.value) return 'pending';
const step = trackingSteps.value[index];
if (step) {
// 优先根据status字段判断状态
const status = step.status?.toString() || '';
if (status === '1') {
return 'completed'; // 完成状态 - 绿色
} else if (status === '3') {
return 'delayed'; // 失败状态 - 红色
} else if (status === '2') {
return 'pending'; // 未完成状态 - 灰色
}
}
// fallback到基于索引的判断逻辑
if (index < activeStepIndex.value) {
return 'completed';
} else if (index === activeStepIndex.value) {
return 'active';
} else {
return 'pending';
}
};
// 获取进度线状态 - 重点跟踪区域专用
const getLineStatusClass = (index) => {
if (!currentTrackedWorkOrder.value) return 'pending';
// 进度线状态与前一个步骤状态保持一致
const prevStepIndex = index;
const prevStep = trackingSteps.value[prevStepIndex];
if (prevStep) {
const status = prevStep.status?.toString() || '';
if (status === '1') {
return 'completed'; // 前一步骤已完成 - 绿色
} else if (status === '3') {
return 'delayed'; // 前一步骤失败 - 红色
}
}
// fallback到基于索引的判断逻辑
if (index < activeStepIndex.value) {
return 'completed';
} else {
return 'pending';
}
};
// 计算进度百分比
const getProgressPercentage = () => {
if (!currentTrackedWorkOrder.value || trackingSteps.value.length === 0) return 0;
// 优先使用API返回的progress字段值
if (currentTrackedWorkOrder.value.progress) {
try {
// 将字符串类型的progress转换为数字
const progressValue = parseFloat(currentTrackedWorkOrder.value.progress);
// 确保进度值在0-100之间
return Math.min(Math.max(progressValue, 0), 100);
} catch (error) {
console.warn('解析progress字段失败使用默认计算逻辑:', error);
// 解析失败时使用原有逻辑
}
}
// 计算已完成步骤数
const completedSteps = trackingSteps.value.filter((step) => step.status === '1').length;
// 如果没有已完成步骤,但有活跃步骤,则使用活跃步骤的位置
if (completedSteps === 0 && activeStepIndex.value >= 0) {
return (activeStepIndex.value / trackingSteps.value.length) * 100;
}
// 计算进度百分比
const percentage = (completedSteps / trackingSteps.value.length) * 100;
// 确保最大为100%
return Math.min(percentage, 100);
};
// 计算节点位置百分比
const getNodePosition = (index) => {
if (!currentTrackedWorkOrder.value || trackingSteps.value.length <= 1) return 0;
// 等距分布节点
const position = (index / (trackingSteps.value.length - 1)) * 100;
return position;
};
// 将状态码转换为可读的状态文本
const getStatusText = (statusCode) => {
const statusMap = {
@ -837,6 +966,18 @@ const pagedTableData = computed(() => {
// 筛选逻辑
let filteredData = [...rawTableData.value];
if (keyword.value && keyword.value.trim()) {
const kw = keyword.value.trim();
filteredData = filteredData.filter((item) => {
return (
(item.title && item.title.includes(kw)) ||
(item.description && item.description.includes(kw)) ||
(item.creator && item.creator.includes(kw)) ||
(item.orderNo && item.orderNo.includes(kw))
);
});
}
if (workOrderType.value !== 'all') {
// 转换筛选条件为显示文本进行匹配
let typeText = '';
@ -990,6 +1131,16 @@ const handleSearch = () => {
currentPage.value = 1; // 重置到第一页
};
// 重置筛选
const resetFilters = () => {
keyword.value = '';
workOrderType.value = 'all';
workOrderStatus.value = 'all';
priority.value = 'all';
createDate.value = '';
currentPage.value = 1;
};
// 分页事件
const handleSizeChange = (val) => {
pageSize.value = val;
@ -1282,6 +1433,25 @@ const handleEdit = async (row) => {
createForm.resultDescription = workOrderDetail.results || '';
createForm.needAssignee = !!workOrderDetail.executor;
// 根据工单状态设置进度
// 1: 待派单, 2: 已派单, 3: 执行中, 4: 已完成, 5: 已拒绝
switch (workOrderDetail.status) {
case '1':
createForm.progress = 0;
break;
case '2':
createForm.progress = 25;
break;
case '3':
createForm.progress = 50;
break;
case '4':
createForm.progress = 100;
break;
default:
createForm.progress = 0;
}
// 填充步骤数据从nodes数组中提取并按code排序
if (workOrderDetail.nodes && Array.isArray(workOrderDetail.nodes)) {
// 复制nodes数组并按code升序排序
@ -1343,7 +1513,8 @@ const createForm = reactive({
file: '',
fileList: [],
resultDescription: '',
needAssignee: 'false'
needAssignee: 'false',
progress: 0
});
const createFormRules = {
@ -1473,7 +1644,8 @@ const submitCreate = async () => {
createBy: '',
handlerDept: '',
handler: '',
handlerName: ''
handlerName: '',
progress: createForm.progress || 0
};
// 编辑操作调用updategongdan接口
@ -1493,6 +1665,8 @@ const submitCreate = async () => {
createForm[key] = [{ name: '', intendedPurpose: '', intendedTime: '' }];
} else if (key === 'fileList') {
createForm[key] = [];
} else if (key === 'progress') {
createForm[key] = 0;
} else {
createForm[key] = '';
}
@ -1523,6 +1697,8 @@ const cancelCreate = () => {
createForm[key] = [{ name: '', intendedPurpose: '', intendedTime: '' }];
} else if (key === 'fileList') {
createForm[key] = [];
} else if (key === 'progress') {
createForm[key] = 0;
} else {
createForm[key] = '';
}
@ -1738,10 +1914,6 @@ const handleCloseDetailDialog = () => {
transition: all 0.3s ease;
}
.step-connector.connector-completed {
background: linear-gradient(to bottom, #52c41a, #73d13d);
}
/* 动画效果 */
@keyframes fadeInUp {
from {
@ -2046,46 +2218,7 @@ const handleCloseDetailDialog = () => {
}
/* 导航栏样式 */
.navigation-tabs {
display: flex;
margin-bottom: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
padding: 2px;
}
.nav-tab {
padding: 12px 24px;
cursor: pointer;
transition: all 0.3s ease;
border-radius: 4px;
font-size: 14px;
color: #606266;
border-right: 1px solid #f0f0f0;
flex: 1;
text-align: center;
}
.nav-tab:last-child {
border-right: none;
}
.nav-tab:hover {
color: #409eff;
background-color: #ecf5ff;
}
.nav-tab.active {
background-color: #409eff;
color: #fff;
box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
}
.nav-tab {
cursor: pointer;
user-select: none;
}
/* 导航栏相关样式移除(对应模板已注释) */
/* 弹窗样式 */
.create-dialog {
@ -2566,17 +2699,7 @@ const handleCloseDetailDialog = () => {
}
/* 动画效果 */
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(22, 93, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(22, 93, 255, 0);
}
}
/* 重复的 pulse 动画移除(下方已存在统一定义) */
.custom-steps {
padding: 20px 10px;
@ -2977,17 +3100,7 @@ const handleCloseDetailDialog = () => {
position: relative;
overflow: hidden;
}
.custom-steps::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
z-index: 0;
border-radius: 4px 4px 0 0;
}
/* 去重:自定义步骤条顶部装饰在下方统一块中定义 */
/* 重点跟踪区域样式 */
.tracking-section {
@ -3205,17 +3318,7 @@ const handleCloseDetailDialog = () => {
}
/* 顶部装饰条 */
.custom-steps::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
border-radius: 6px 6px 0 0;
box-shadow: 0 2px 12px rgba(22, 93, 255, 0.2);
}
/* 去重:自定义步骤条顶部装饰重复定义移除 */
/* 背景装饰 */
.custom-steps::after {
@ -3231,30 +3334,10 @@ const handleCloseDetailDialog = () => {
}
/* 左侧装饰 */
.custom-steps::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
border-radius: 6px 6px 0 0;
box-shadow: 0 2px 12px rgba(22, 93, 255, 0.2);
}
/* 去重:重复 before 装饰定义移除 */
/* 右侧装饰 */
.custom-steps::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg, #165dff, #409eff, #69c0ff);
border-radius: 6px 6px 0 0;
box-shadow: 0 2px 12px rgba(22, 93, 255, 0.2);
}
/* 去重:重复 before 装饰定义移除 */
/* 左侧装饰球 */
.custom-steps::before {
@ -3296,13 +3379,299 @@ const handleCloseDetailDialog = () => {
position: relative;
}
/* 重点跟踪区域进度条样式 */
.tracking-progress-container {
padding: 20px;
background-color: #fff;
}
/* 进度条包装器 */
.progress-bar-wrapper {
position: relative;
height: 40px;
margin-bottom: 30px;
display: flex;
align-items: center;
}
/* 进度条背景 */
.progress-bar-background {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 6px;
background-color: #e5e7eb;
border-radius: 3px;
transform: translateY(-50%);
}
/* 进度条填充 */
.progress-bar-fill {
position: absolute;
top: 50%;
left: 0;
height: 6px;
background: linear-gradient(90deg, #00b42a, #95de64);
border-radius: 3px;
transition: width 0.6s ease;
transform: translateY(-50%);
}
/* 进度条节点容器 */
.progress-bar-nodes {
position: relative;
width: 100%;
height: 100%;
}
/* 进度条节点 */
.progress-node {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
/* 节点圆圈 */
.node-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: #fff;
border: 2px solid #e5e7eb;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
z-index: 2;
}
/* 节点图标/数字 */
.node-icon {
font-size: 14px;
font-weight: 600;
color: #6b7280;
}
/* 步骤信息卡片容器 */
.progress-steps-info {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
/* 单个步骤信息卡片 */
.step-info-card {
flex: 1;
min-width: 160px;
max-width: 250px;
padding: 12px;
border-radius: 6px;
border: 1px solid #f0f0f0;
background-color: #fff;
transition: all 0.3s ease;
}
/* 步骤卡片头部 */
.step-header {
display: flex;
align-items: center;
margin-bottom: 8px;
}
/* 步骤数字 */
.step-info-card .step-number {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #e5e7eb;
color: #6b7280;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 600;
margin-right: 6px;
}
/* 步骤名称 */
.step-name {
font-size: 16px;
font-weight: 600;
color: #1f2937;
}
/* 步骤详情 */
.step-details {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 14px;
}
.step-details > div {
display: flex;
align-items: center;
color: #6b7280;
}
.step-details i {
margin-right: 6px;
font-size: 14px;
}
/* 已完成状态样式 - 绿色 */
.step-info-card.completed {
border-color: #00b42a;
background-color: #f6ffed;
}
.step-info-card.completed .step-number {
background-color: #00b42a;
color: white;
}
.progress-node.completed .node-circle {
border-color: #00b42a;
background-color: #fff;
}
.progress-node.completed .node-icon {
background-color: #00b42a;
color: white;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
/* 进行中状态样式 */
.step-info-card.active {
border-color: #165dff;
background-color: #f0f7ff;
box-shadow: 0 4px 12px rgba(22, 93, 255, 0.1);
}
.step-info-card.active .step-number {
background-color: #165dff;
color: white;
}
.progress-node.active .node-circle {
border-color: #165dff;
background-color: #fff;
animation: pulse 2s infinite;
}
.progress-node.active .node-icon {
background-color: #165dff;
color: white;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
/* 待处理状态样式 */
.step-info-card.pending {
border-color: #e5e7eb;
background-color: #fff;
}
/* 失败/逾期状态样式 */
.step-info-card.delayed {
border-color: #ff4d4f;
background-color: #fff2f0;
}
.step-info-card.delayed .step-number {
background-color: #ff4d4f;
color: white;
}
.progress-node.delayed .node-circle {
border-color: #ff4d4f;
background-color: #fff;
}
.progress-node.delayed .node-icon {
background-color: #ff4d4f;
color: white;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
}
/* 脉冲动画 */
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(22, 93, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(22, 93, 255, 0);
}
}
.tracking-progress-timeline .progress-step.completed .step-number {
background-color: #00b42a;
color: white;
}
.tracking-progress-timeline .progress-line.completed {
background-color: #00b42a;
}
.tracking-progress-timeline .progress-step.delayed .step-number {
background-color: #dc2626;
color: white;
}
.tracking-progress-timeline .progress-line.delayed {
background-color: #dc2626;
}
.tracking-progress-timeline .step-name {
font-size: 14px;
font-weight: 500;
color: #1f2329;
margin-bottom: 8px;
text-align: center;
}
.tracking-progress-timeline .step-info {
font-size: 12px;
color: #6b7280;
text-align: center;
}
.tracking-progress-timeline .step-person-time {
margin-bottom: 4px;
}
.tracking-progress-timeline .step-purpose {
margin-top: 4px;
line-height: 1.4;
}
.custom-step:hover {
transform: translateY(-8px);
filter: brightness(1.03);
}
/* 步骤连接线 */
.custom-step:not(:last-child)::after {
/* 步骤连接线 - 默认(进行中) */
.custom-step:not(:last-child):not(.is-wait)::after {
content: '';
position: absolute;
top: 32px;
@ -3314,6 +3683,12 @@ const handleCloseDetailDialog = () => {
box-shadow: 0 2px 8px rgba(22, 93, 255, 0.3);
}
/* 已完成步骤连接线 */
.custom-step.completed:not(:last-child)::after {
background: linear-gradient(90deg, #00b42a 0%, #95de64 100%);
box-shadow: 0 2px 8px rgba(0, 180, 42, 0.3);
}
/* 待处理步骤连接线 */
.custom-step.is-wait:not(:last-child)::after {
background: linear-gradient(90deg, #dcdfe6 0%, #e4e7ed 100%);