Compare commits
8 Commits
5274168aa0
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| de9bf3d2b7 | |||
| b6fabc0c4c | |||
| 0022ca0d01 | |||
| fe0ffbdf11 | |||
| 7645cba791 | |||
| f58efb0e08 | |||
| db9e2e55ea | |||
| 6079814962 |
@ -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 = '/'
|
||||
|
||||
@ -365,9 +365,9 @@ export const getStepStatusText = (status: string | number): string => {
|
||||
const statusMap: Record<string, string> = {
|
||||
'1': '待执行',
|
||||
'2': '执行中',
|
||||
'3': '已完成',
|
||||
'3': '失败',
|
||||
'4': '已延期',
|
||||
'5': '失败'
|
||||
'5': '已完成'
|
||||
};
|
||||
return statusMap[statusStr] || '未知状态';
|
||||
};
|
||||
|
||||
@ -22,18 +22,38 @@
|
||||
</div>
|
||||
|
||||
<!-- 搜索和筛选区 -->
|
||||
<div class="search-filter">
|
||||
<transition :enter-active-class="'el-zoom-in-center'" :leave-active-class="'el-zoom-out-center'">
|
||||
<div v-show="showSearch" class="search-filter">
|
||||
<div class="search-container">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="搜索班组名称或编号"
|
||||
class="search-input"
|
||||
suffix-icon="el-icon-search"
|
||||
@keyup.enter="handleSearch"
|
||||
></el-input>
|
||||
<el-button type="primary" class="new-team-btn" @click="handleCreateTeam"> <i class="el-icon-plus"></i> 新增班组 </el-button>
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item label="班组名称" prop="teamName">
|
||||
<el-input v-model="queryParams.teamName" placeholder="请输入班组名称" clearable @keyup.enter="handleQuery"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="负责区域" prop="region">
|
||||
<el-input v-model="queryParams.region" placeholder="请输入负责区域" clearable @keyup.enter="handleQuery"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="组长" prop="leader">
|
||||
<el-input v-model="queryParams.leader" placeholder="请输入组长姓名" clearable @keyup.enter="handleQuery"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
|
||||
<el-option label="正常运行" value="正常运行"></el-option>
|
||||
<el-option label="人员紧张" value="人员紧张"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px">
|
||||
<el-button type="primary" class="new-team-btn" @click="handleCreateTeam"> <i class="el-icon-plus"></i> 新增班组 </el-button>
|
||||
<right-toolbar v-model:show-search="showSearch" @query-table="handleQuery"></right-toolbar>
|
||||
</div>
|
||||
|
||||
<!-- 班组卡片和图表区域 -->
|
||||
<div class="team-cards-section">
|
||||
@ -177,13 +197,35 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick, reactive, toRefs } from 'vue';
|
||||
import router from '@/router';
|
||||
import * as echarts from 'echarts'; // 导入ECharts
|
||||
import renwuImage from '@/assets/images/renwu.png';
|
||||
import { getCurrentInstance } from 'vue';
|
||||
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
|
||||
import router from '@/router';
|
||||
import * as echarts from 'echarts'; // 导入ECharts
|
||||
import renwuImage from '@/assets/images/renwu.png';
|
||||
import { getCurrentInstance } from 'vue';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
|
||||
// 搜索条件
|
||||
const searchKeyword = ref('');
|
||||
const showSearch = ref(true);
|
||||
const queryFormRef = ref();
|
||||
|
||||
// 搜索参数
|
||||
const data = reactive({
|
||||
queryParams: {
|
||||
teamName: '',
|
||||
region: '',
|
||||
leader: '',
|
||||
status: ''
|
||||
}
|
||||
});
|
||||
const { queryParams } = toRefs(data);
|
||||
|
||||
// 班组数据
|
||||
const rawTeamData = ref([
|
||||
@ -251,12 +293,24 @@ const total = ref(rawTeamData.value.length);
|
||||
const filteredTeams = computed(() => {
|
||||
let teams = [...rawTeamData.value];
|
||||
|
||||
if (searchKeyword.value) {
|
||||
const keyword = searchKeyword.value.toLowerCase();
|
||||
teams = teams.filter(
|
||||
(team) =>
|
||||
team.name.toLowerCase().includes(keyword) || team.region.toLowerCase().includes(keyword) || team.leader.toLowerCase().includes(keyword)
|
||||
);
|
||||
// 使用queryParams进行过滤
|
||||
if (queryParams.value.teamName) {
|
||||
const keyword = queryParams.value.teamName.toLowerCase();
|
||||
teams = teams.filter((team) => team.name.toLowerCase().includes(keyword));
|
||||
}
|
||||
|
||||
if (queryParams.value.region) {
|
||||
const keyword = queryParams.value.region.toLowerCase();
|
||||
teams = teams.filter((team) => team.region.toLowerCase().includes(keyword));
|
||||
}
|
||||
|
||||
if (queryParams.value.leader) {
|
||||
const keyword = queryParams.value.leader.toLowerCase();
|
||||
teams = teams.filter((team) => team.leader.toLowerCase().includes(keyword));
|
||||
}
|
||||
|
||||
if (queryParams.value.status) {
|
||||
teams = teams.filter((team) => team.status === queryParams.value.status);
|
||||
}
|
||||
|
||||
return teams;
|
||||
@ -295,6 +349,19 @@ const handleSearch = () => {
|
||||
currentPage.value = 1; // 重置到第一页
|
||||
};
|
||||
|
||||
// 执行搜索
|
||||
const handleQuery = () => {
|
||||
currentPage.value = 1;
|
||||
};
|
||||
|
||||
// 重置搜索
|
||||
const resetQuery = () => {
|
||||
if (queryFormRef.value) {
|
||||
queryFormRef.value.resetFields();
|
||||
}
|
||||
currentPage.value = 1;
|
||||
};
|
||||
|
||||
// 分页事件
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val;
|
||||
|
||||
@ -23,29 +23,30 @@
|
||||
<div class="filter-bar">
|
||||
<div class="filter-container">
|
||||
<div class="filter-item">
|
||||
<el-select v-model="taskStatus" placeholder="任务状态">
|
||||
<el-option label="待执行" value="pending"></el-option>
|
||||
<el-option label="执行中" value="executing"></el-option>
|
||||
<el-option label="已延期" value="delayed"></el-option>
|
||||
<el-option label="已完成" value="completed"></el-option>
|
||||
<el-input v-model="searchParams.keyword" placeholder="关键字(名称/报修人/维修人)" clearable @keyup.enter="handleSearch" />
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="searchParams.taskStatus" placeholder="任务状态">
|
||||
<el-option label="待处理" value="1"></el-option>
|
||||
<el-option label="处理中" value="2"></el-option>
|
||||
<el-option label="已完成" value="3"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="planType" placeholder="全部计划">
|
||||
<el-option label="每日巡检计划" value="daily"></el-option>
|
||||
<el-option label="每周巡检计划" value="weekly"></el-option>
|
||||
<el-option label="每月巡检计划" value="monthly"></el-option>
|
||||
<el-select v-model="searchParams.type" placeholder="报修类型">
|
||||
<el-option label="硬件故障" value="1"></el-option>
|
||||
<el-option label="软件故障" value="2"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="executor" placeholder="执行人">
|
||||
<el-option label="张明" value="zhangming"></el-option>
|
||||
<el-option label="李华" value="lihua"></el-option>
|
||||
<el-option label="王强" value="wangqiang"></el-option>
|
||||
<el-select v-model="searchParams.sendPerson" placeholder="执行人">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-actions">
|
||||
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
|
||||
|
||||
<el-button type="primary" icon="Plus" class="create-btn" @click="handleCreateTask"> 手动创建任务 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
@ -388,12 +389,19 @@ import { baoxiulist, baoxiuDetail, updatebaoxiu, addbaoxiu } from '@/api/zhineng
|
||||
import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian';
|
||||
import { ElMessage, ElLoading } from 'element-plus';
|
||||
// 激活的选项卡
|
||||
const activeTab = ref('task');
|
||||
const activeTab = ref('all');
|
||||
|
||||
// 筛选条件
|
||||
const taskStatus = ref('');
|
||||
const planType = ref('');
|
||||
const executor = ref('');
|
||||
// 统一搜索参数对象
|
||||
const searchParams = ref({
|
||||
keyword: '',
|
||||
taskStatus: '',
|
||||
type: '',
|
||||
sendPerson: ''
|
||||
});
|
||||
|
||||
// 执行人列表相关
|
||||
const usersList = ref([]);
|
||||
const loadingUsers = ref(false);
|
||||
|
||||
// 详情弹窗相关
|
||||
const detailDialogVisible = ref(false);
|
||||
@ -423,17 +431,46 @@ const assignTaskRules = {
|
||||
};
|
||||
const assignTaskFormRef = ref(null);
|
||||
|
||||
// 获取用户列表
|
||||
async function getUsersList() {
|
||||
loadingUsers.value = true;
|
||||
try {
|
||||
const res = await xunjianUserlist();
|
||||
// 根据接口返回格式，成功码是200，用户数据在rows数组中
|
||||
if (res.code === 200 && res.rows && Array.isArray(res.rows)) {
|
||||
// 映射用户数据，使用userId字段作为唯一标识并转换为字符串以避免大整数精度问题
|
||||
usersList.value = res.rows.map((user) => ({
|
||||
id: String(user.userId || ''),
|
||||
name: user.userName || '未知用户'
|
||||
}));
|
||||
} else {
|
||||
usersList.value = [];
|
||||
console.error('获取用户列表失败:', res.msg || '未知错误');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户列表异常:', error);
|
||||
usersList.value = [];
|
||||
} finally {
|
||||
loadingUsers.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 获取报修任务列表
|
||||
defineExpose({ getTaskList });
|
||||
async function getTaskList() {
|
||||
loading.value = true;
|
||||
try {
|
||||
// 确保用户列表已加载
|
||||
if (usersList.value.length === 0) {
|
||||
await getUsersList();
|
||||
}
|
||||
|
||||
const res = await baoxiulist({
|
||||
pageNum: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
status: taskStatus.value,
|
||||
type: planType.value,
|
||||
executor: executor.value
|
||||
status: searchParams.value.taskStatus || undefined,
|
||||
type: searchParams.value.type || undefined,
|
||||
sendPerson: searchParams.value.sendPerson || undefined,
|
||||
keyword: searchParams.value.keyword
|
||||
});
|
||||
|
||||
if (res.code === 200 && res.rows) {
|
||||
@ -580,12 +617,24 @@ const statusOrder = {
|
||||
|
||||
// 分页处理后的数据（含排序）
|
||||
const pagedTasks = computed(() => {
|
||||
// 先按状态排序
|
||||
const sortedTasks = [...tasks.value].sort((a, b) => {
|
||||
return statusOrder[a.status] - statusOrder[b.status];
|
||||
});
|
||||
// 先关键词过滤
|
||||
let filtered = [...tasks.value];
|
||||
if (searchParams.value.keyword && searchParams.value.keyword.trim()) {
|
||||
const kw = searchParams.value.keyword.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);
|
||||
@ -622,33 +671,6 @@ const createTaskRules = {
|
||||
contactPhone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
|
||||
};
|
||||
|
||||
// 用户列表（维修人）
|
||||
const usersList = ref([]);
|
||||
const loadingUsers = ref(false);
|
||||
|
||||
// 获取用户列表
|
||||
const getUsersList = async () => {
|
||||
loadingUsers.value = true;
|
||||
try {
|
||||
const res = await xunjianUserlist();
|
||||
// 根据接口返回格式，成功码是200，用户数据在rows数组中
|
||||
if (res.code === 200 && res.rows && Array.isArray(res.rows)) {
|
||||
// 映射用户数据，使用userId字段作为唯一标识并转换为字符串以避免大整数精度问题
|
||||
usersList.value = res.rows.map((user) => ({
|
||||
id: String(user.userId || ''),
|
||||
name: user.userName || '未知用户'
|
||||
}));
|
||||
} else {
|
||||
usersList.value = [];
|
||||
console.error('获取用户列表失败:', res.msg || '未知错误');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户列表异常:', error);
|
||||
usersList.value = [];
|
||||
} finally {
|
||||
loadingUsers.value = false;
|
||||
}
|
||||
};
|
||||
const isSubmitting = ref(false); // 防止重复提交的状态标记
|
||||
|
||||
// 创建任务
|
||||
|
||||
@ -23,25 +23,34 @@
|
||||
<!-- 筛选栏 -->
|
||||
<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>
|
||||
<el-option label="待处理" value="1"></el-option>
|
||||
<el-option label="处理中" value="2"></el-option>
|
||||
<el-option label="已完成" value="3"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="priority" placeholder="优先级">
|
||||
<el-option label="高优先级" value="1"></el-option>
|
||||
<el-option label="低优先级" value="1"></el-option>
|
||||
<el-option label="中优先级" value="2"></el-option>
|
||||
<el-option label="低优先级" value="3"></el-option>
|
||||
<el-option label="高优先级" value="3"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="executor" placeholder="处理人员">
|
||||
<el-option label="全部人员" value="all"></el-option>
|
||||
<el-option label="李阳" value="liyang"></el-option>
|
||||
<el-option label="张明" value="zhangming"></el-option>
|
||||
<el-select v-model="executor" placeholder="处理人员" :loading="loadingUsers">
|
||||
<el-option label="全部人员" value=""></el-option>
|
||||
<el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="repairType" placeholder="报修类型">
|
||||
<el-option label="全部类型" value=""></el-option>
|
||||
<el-option label="硬件故障" value="1"></el-option>
|
||||
<el-option label="软件故障" value="2"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@ -56,6 +65,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>
|
||||
@ -378,7 +388,13 @@ const statsLoading = ref(false);
|
||||
const taskStatus = ref('');
|
||||
const priority = ref('');
|
||||
const executor = ref('');
|
||||
const repairType = ref('');
|
||||
const dateRange = ref([]);
|
||||
const keyword = ref('');
|
||||
|
||||
// 执行人列表相关
|
||||
const usersList = ref([]);
|
||||
const loadingUsers = ref(false);
|
||||
|
||||
// 分页相关
|
||||
const currentPage = ref(1);
|
||||
@ -403,6 +419,7 @@ const statsData = ref({
|
||||
onMounted(() => {
|
||||
fetchRepairRecords();
|
||||
fetchStatsData();
|
||||
getUsersList();
|
||||
});
|
||||
|
||||
// 从接口获取报修记录
|
||||
@ -411,11 +428,13 @@ const fetchRepairRecords = async () => {
|
||||
try {
|
||||
// 构建请求参数
|
||||
const params = {
|
||||
page: currentPage.value,
|
||||
limit: pageSize.value,
|
||||
pageNum: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
status: taskStatus.value || undefined,
|
||||
level: priority.value || undefined
|
||||
// 可以根据需要添加更多筛选参数
|
||||
level: priority.value || undefined,
|
||||
executor: executor.value || undefined,
|
||||
type: repairType.value || undefined,
|
||||
keyword: keyword.value.trim() || undefined
|
||||
};
|
||||
|
||||
// 调用接口获取数据
|
||||
@ -438,8 +457,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 +472,18 @@ const handleSearch = () => {
|
||||
fetchRepairRecords(); // 重新获取数据
|
||||
};
|
||||
|
||||
// 重置筛选
|
||||
const resetFilters = () => {
|
||||
taskStatus.value = '';
|
||||
priority.value = '';
|
||||
executor.value = '';
|
||||
repairType.value = '';
|
||||
dateRange.value = [];
|
||||
keyword.value = '';
|
||||
currentPage.value = 1;
|
||||
fetchRepairRecords();
|
||||
};
|
||||
|
||||
// 分页事件
|
||||
const handleSizeChange = (val) => {
|
||||
pageSize.value = val;
|
||||
@ -474,8 +510,6 @@ const reportFinal = ref('');
|
||||
const assignDialogVisible = ref(false);
|
||||
const currentAssignTaskId = ref('');
|
||||
const selectedUserId = ref('');
|
||||
const usersList = ref([]);
|
||||
const loadingUsers = ref(false);
|
||||
|
||||
// 维修类型映射
|
||||
function mapRepairType(type) {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -190,7 +190,8 @@
|
||||
}
|
||||
|
||||
/* 步骤状态样式 - 已完成 */
|
||||
.task-detail-container .step-status.status-completed {
|
||||
.task-detail-container .step-status.status-completed,
|
||||
.task-detail-container .step-status.tag-completed {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
border: 1px solid #b7eb8f;
|
||||
@ -203,6 +204,20 @@
|
||||
border: 1px solid #ffccc7;
|
||||
}
|
||||
|
||||
/* 步骤状态样式 - 未完成 */
|
||||
.task-detail-container .step-status.status-unknown {
|
||||
background-color: #f5f5f5;
|
||||
color: #999;
|
||||
border: 1px solid #d9d9d9;
|
||||
}
|
||||
|
||||
/* 步骤状态样式 - 失败 */
|
||||
.task-detail-container .step-status.status-failed {
|
||||
background-color: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
border: 1px solid #ffccc7;
|
||||
}
|
||||
|
||||
/* 通用状态颜色样式 */
|
||||
.status-pending {
|
||||
color: #e6a23c;
|
||||
|
||||
@ -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>
|
||||
@ -34,8 +37,8 @@
|
||||
<div class="filter-item">
|
||||
<el-select v-model="workOrderStatus" placeholder="全部状态" clearable>
|
||||
<el-option label="全部状态" value="all"></el-option>
|
||||
<el-option label="已接单" value="accepted"></el-option>
|
||||
<el-option label="待处理" value="pending"></el-option>
|
||||
<el-option label="待派单" value="pending"></el-option>
|
||||
<el-option label="已派单" value="accepted"></el-option>
|
||||
<el-option label="执行中" value="executing"></el-option>
|
||||
<el-option label="已完成" value="completed"></el-option>
|
||||
</el-select>
|
||||
@ -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>
|
||||
@ -372,7 +376,7 @@
|
||||
<div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
|
||||
</div>
|
||||
<div class="step-status" :class="getStatusClass(node.status)">
|
||||
{{ node.status === '2' ? '未完成' : '已完成' }}
|
||||
{{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -454,21 +458,12 @@ import { ElMessageBox } from 'element-plus';
|
||||
const activeTab = ref('list');
|
||||
|
||||
// 筛选条件
|
||||
const keyword = ref('');
|
||||
const workOrderType = ref('all');
|
||||
const workOrderStatus = ref('all');
|
||||
const priority = ref('all');
|
||||
const createDate = ref('');
|
||||
|
||||
// 优先级转类名
|
||||
const mapPriorityToClass = (priority) => {
|
||||
const priorityMap = {
|
||||
1: 'high',
|
||||
2: 'medium',
|
||||
3: 'low'
|
||||
};
|
||||
return priorityMap[priority] || 'low';
|
||||
};
|
||||
|
||||
// 工单数据
|
||||
const rawTableData = ref([]);
|
||||
|
||||
@ -486,6 +481,9 @@ const fetchWorkOrderList = async () => {
|
||||
pageSize: pageSize.value
|
||||
};
|
||||
|
||||
// 调试输出，检查参数是否正确
|
||||
console.log('请求参数:', params);
|
||||
|
||||
const response = await gongdanlist(params);
|
||||
|
||||
if (response.code === 200 && response.rows) {
|
||||
@ -517,6 +515,38 @@ const fetchWorkOrderList = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 类型映射函数 - 页面类型转接口code
|
||||
const mapTypeToTypeCode = (type) => {
|
||||
const typeMap = {
|
||||
'maintenance': 1, // 维护保养
|
||||
'inspection': 2, // 检查检测
|
||||
'installation': 3, // 安装调试
|
||||
'upgrade': 4 // 升级改造
|
||||
};
|
||||
return typeMap[type] || null;
|
||||
};
|
||||
|
||||
// 状态映射函数 - 页面状态转接口code
|
||||
const mapStatusToStatusCode = (status) => {
|
||||
const statusMap = {
|
||||
'pending': 1, // 待派单
|
||||
'accepted': 2, // 已派单
|
||||
'executing': 3, // 执行中
|
||||
'completed': 4 // 已完成
|
||||
};
|
||||
return statusMap[status] || null;
|
||||
};
|
||||
|
||||
// 优先级映射函数 - 页面优先级转接口code
|
||||
const mapPriorityToLevelCode = (priority) => {
|
||||
const priorityMap = {
|
||||
'high': 3, // 高
|
||||
'medium': 2, // 中
|
||||
'low': 1 // 低
|
||||
};
|
||||
return priorityMap[priority] || null;
|
||||
};
|
||||
|
||||
// 类型映射函数 - 页面类型转接口code
|
||||
const mapTypeToCode = (type) => {
|
||||
const typeMap = {
|
||||
@ -604,10 +634,83 @@ 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);
|
||||
});
|
||||
|
||||
// 获取类型标签样式
|
||||
@ -652,10 +755,10 @@ const getStatusClass = (status) => {
|
||||
// 处理可能的数字输入
|
||||
const statusStr = status?.toString() || '';
|
||||
const statusClassMap = {
|
||||
'1': 'status-pending',
|
||||
'2': 'status-delayed',
|
||||
'3': 'status-executing',
|
||||
'4': 'status-completed'
|
||||
'1': 'status-pending', // 待执行 - 蓝色
|
||||
'2': 'status-unknown', // 未完成 - 灰色
|
||||
'3': 'status-failed', // 失败 - 红色
|
||||
'4': 'status-completed' // 已完成 - 绿色
|
||||
};
|
||||
return statusClassMap[statusStr] || 'status-unknown';
|
||||
};
|
||||
@ -690,19 +793,27 @@ const getStepStatusText = (status) => {
|
||||
|
||||
const handleSearch = () => {
|
||||
currentPage.value = 1; // 重置到第一页
|
||||
fetchWorkOrderList(); // 重新获取数据
|
||||
fetchWorkOrderList(); // 触发API请求获取数据
|
||||
};
|
||||
|
||||
// 重置筛选
|
||||
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 +1650,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 {
|
||||
|
||||
@ -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>
|
||||
@ -36,8 +39,8 @@
|
||||
<div class="filter-item">
|
||||
<el-select v-model="workOrderStatus" placeholder="全部状态" clearable>
|
||||
<el-option label="全部状态" value="all"></el-option>
|
||||
<el-option label="待派单" value="accepted"></el-option>
|
||||
<el-option label="待处理" value="pending"></el-option>
|
||||
<el-option label="待派单" value="pending"></el-option>
|
||||
<el-option label="已派单" value="accepted"></el-option>
|
||||
<el-option label="执行中" value="executing"></el-option>
|
||||
<el-option label="已完成" value="completed"></el-option>
|
||||
</el-select>
|
||||
@ -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>
|
||||
@ -430,7 +434,7 @@
|
||||
<div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
|
||||
</div>
|
||||
<div class="step-status" :class="getStatusClass(node.status)">
|
||||
{{ node.status === '2' ? '未完成' : '已完成' }}
|
||||
{{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
|
||||
</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');
|
||||
@ -701,10 +706,10 @@ const getStatusClass = (status) => {
|
||||
// 处理可能的数字输入
|
||||
const statusStr = status?.toString() || '';
|
||||
const statusClassMap = {
|
||||
'1': 'status-pending',
|
||||
'2': 'status-delayed',
|
||||
'3': 'status-executing',
|
||||
'4': 'status-completed'
|
||||
'1': 'status-pending', // 待执行 - 蓝色
|
||||
'2': 'status-unknown', // 未执行 - 灰色
|
||||
'3': 'status-failed', // 失败 - 红色
|
||||
'4': 'status-completed' // 已完成 - 绿色
|
||||
};
|
||||
return statusClassMap[statusStr] || 'status-unknown';
|
||||
};
|
||||
@ -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 = '';
|
||||
@ -775,10 +792,10 @@ const pagedTableData = computed(() => {
|
||||
let statusText = '';
|
||||
switch (workOrderStatus.value) {
|
||||
case 'accepted':
|
||||
statusText = '已接单';
|
||||
statusText = '已派单';
|
||||
break;
|
||||
case 'pending':
|
||||
statusText = '待处理';
|
||||
statusText = '待派单';
|
||||
break;
|
||||
case 'executing':
|
||||
statusText = '执行中';
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
@ -30,25 +33,16 @@
|
||||
<el-option label="已完成" value="completed"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<el-select v-model="planType" placeholder="全部计划">
|
||||
<el-option label="全部计划" value="all"></el-option>
|
||||
<el-option label="每日巡检计划" value="daily"></el-option>
|
||||
<el-option label="每周巡检计划" value="weekly"></el-option>
|
||||
<el-option label="每月巡检计划" value="monthly"></el-option>
|
||||
<el-option label="每季度巡检计划" value="quarterly"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="executor" placeholder="执行人">
|
||||
<el-option label="全部人员" value="all"></el-option>
|
||||
<el-option label="张明" value="zhangming"></el-option>
|
||||
<el-option label="李华" value="lihua"></el-option>
|
||||
<el-option label="王强" value="wangqiang"></el-option>
|
||||
<el-select v-model="sendPerson" placeholder="维修人" :loading="loadingUsers">
|
||||
<el-option label="全部维修人" value="all"></el-option>
|
||||
<el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id"></el-option>
|
||||
</el-select>
|
||||
</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>
|
||||
@ -423,9 +417,10 @@ import router from '@/router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { qiangxiuDetail, qiangxiulist, addqiangxiu, updateqiangxiu } from '@/api/zhinengxunjian/qiangxiu';
|
||||
import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian';
|
||||
const taskStatus = ref('all');
|
||||
const taskStatus = ref('');
|
||||
const planType = ref('all');
|
||||
const executor = ref('all');
|
||||
const sendPerson = ref('all');
|
||||
const keyword = ref('');
|
||||
// 任务数据 - 添加了更多字段以展示滚动效果
|
||||
const tasks = ref([]);
|
||||
// 分页相关
|
||||
@ -458,6 +453,16 @@ const handleSearch = () => {
|
||||
getTaskList(); // 调用接口获取数据
|
||||
};
|
||||
|
||||
// 重置筛选
|
||||
const resetFilters = () => {
|
||||
taskStatus.value = 'all';
|
||||
planType.value = 'all';
|
||||
sendPerson.value = 'all';
|
||||
keyword.value = '';
|
||||
currentPage.value = 1;
|
||||
getTaskList();
|
||||
};
|
||||
|
||||
// 创建紧急抢修任务弹窗相关
|
||||
const createTaskDialogVisible = ref(false);
|
||||
const createTaskFormRef = ref(null); // 表单引用
|
||||
@ -972,12 +977,13 @@ const handleSaveResult = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 状态映射辅助函数
|
||||
// 状态映射辅助函数 - 严格匹配JSON数据中的status字段
|
||||
function mapStatusToKey(status) {
|
||||
const statusMap = {
|
||||
'1': 'pending', // 待处理
|
||||
'2': 'executing', // 处理中
|
||||
'3': 'completed' // 已完成
|
||||
'3': 'completed', // 已完成
|
||||
'4': 'delayed' // 已延期
|
||||
};
|
||||
return statusMap[status] || 'pending';
|
||||
}
|
||||
@ -1068,31 +1074,51 @@ async function getTaskList() {
|
||||
// 构建请求参数，包含筛选条件
|
||||
const requestParams = {
|
||||
projectId: 1,
|
||||
pageNum: currentPage.value,
|
||||
pageSize: pageSize.value
|
||||
pageNum: parseInt(currentPage.value, 10),
|
||||
pageSize: parseInt(pageSize.value, 10)
|
||||
};
|
||||
|
||||
// 添加任务状态筛选条件
|
||||
// 添加任务状态筛选条件 - 严格匹配JSON数据中的status字段
|
||||
if (taskStatus.value && taskStatus.value !== 'all') {
|
||||
requestParams.status = taskStatus.value;
|
||||
// 状态映射：pending -> 1(待处理), executing -> 2(处理中), completed -> 3(已完成), delayed -> 4(已延期)
|
||||
const statusMap = {
|
||||
'pending': '1',
|
||||
'executing': '2',
|
||||
'completed': '3',
|
||||
'delayed': '4'
|
||||
};
|
||||
requestParams.status = String(statusMap[taskStatus.value] || taskStatus.value);
|
||||
}
|
||||
|
||||
// 添加计划类型筛选条件
|
||||
// 添加故障类型筛选条件 - 严格匹配JSON数据中的type字段
|
||||
if (planType.value && planType.value !== 'all') {
|
||||
requestParams.planType = planType.value;
|
||||
// 类型映射：electric -> 1(电力故障), device -> 2(设备故障), software -> 3(软件故障), network -> 4(网络故障), environment -> 5(环境问题)
|
||||
const typeMap = {
|
||||
'electric': '1',
|
||||
'device': '2',
|
||||
'software': '3',
|
||||
'network': '4',
|
||||
'environment': '5'
|
||||
};
|
||||
requestParams.type = String(typeMap[planType.value] || planType.value);
|
||||
}
|
||||
|
||||
// 添加执行人筛选条件
|
||||
if (executor.value && executor.value !== 'all') {
|
||||
requestParams.executor = executor.value;
|
||||
// 添加维修人员筛选条件 - 严格匹配JSON数据中的sendPerson字段
|
||||
if (sendPerson.value && sendPerson.value !== 'all' && sendPerson.value !== '') {
|
||||
// 转换为数字类型以匹配API期望的格式
|
||||
requestParams.sendPerson = parseInt(sendPerson.value, 10);
|
||||
}
|
||||
|
||||
// 添加关键词搜索条件
|
||||
if (keyword.value && keyword.value.trim()) {
|
||||
requestParams.keyword = keyword.value.trim();
|
||||
}
|
||||
|
||||
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),
|
||||
@ -1100,30 +1126,49 @@ async function getTaskList() {
|
||||
leftLineClass: getLeftLineClass(item.status, item.level),
|
||||
priorityClass: getPriorityClass(item.level),
|
||||
priority: getPriorityText(item.level),
|
||||
// 修复报修时间字段名，使用与模板一致的createTime
|
||||
// 严格匹配JSON数据中的createTime字段
|
||||
createTime: formatDate(item.createTime),
|
||||
// 修复报修人字段，使用reportName
|
||||
// 严格匹配JSON数据中的reportName字段
|
||||
reporter: item.reportName || '未知报修人',
|
||||
// 修复维修人字段，从sendPersonVo对象中获取用户名
|
||||
maintainer: item.sendPersonVo?.userName || '未分配',
|
||||
// 严格匹配JSON数据中的sendPerson和sendPersonVo字段
|
||||
maintainer: item.sendPersonVo?.userName || (item.sendPerson ? `用户ID: ${item.sendPerson}` : '未分配'),
|
||||
|
||||
completeTime: item.reportFinishTime ? formatDate(item.reportFinishTime) : '',
|
||||
actionText: getActionText(item.status),
|
||||
actionClass: getActionClass(item.status),
|
||||
reportInfo: item.reportInfo,
|
||||
position: item.position,
|
||||
fileUrl: item.fileUrl,
|
||||
reportInfo: item.reportInfo || '',
|
||||
position: item.position || '',
|
||||
fileUrl: item.fileUrl || '',
|
||||
|
||||
reportPhone: item.reportPhone || '',
|
||||
type: item.type || '',
|
||||
// 保留原始数据用于详情查看
|
||||
sendPersonVo: item.sendPersonVo,
|
||||
faultType: getFaultTypeText(item.type),
|
||||
// 保留expectedTime字段用于任务修改
|
||||
expectedTime: item.expectedTime || '',
|
||||
// 添加needSupport字段，确保从API返回数据中获取实际值
|
||||
needSupport: item.support || ''
|
||||
// 严格匹配JSON数据中的expectedTime字段
|
||||
expectedTime: item.expectedTime ? formatDate(item.expectedTime) : '',
|
||||
// 严格匹配JSON数据中的support字段
|
||||
needSupport: item.support || '',
|
||||
// 添加额外的原始字段用于筛选和展示
|
||||
sendPerson: item.sendPerson,
|
||||
level: item.level,
|
||||
createBy: item.createBy
|
||||
}));
|
||||
|
||||
// 关键词过滤
|
||||
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;
|
||||
if (res.total !== undefined) {
|
||||
total.value = kw ? filtered.length : res.total;
|
||||
} else {
|
||||
total.value = filtered.length;
|
||||
}
|
||||
} else {
|
||||
tasks.value = [];
|
||||
total.value = 0;
|
||||
@ -1153,6 +1198,7 @@ function getFaultTypeText(type) {
|
||||
// 初始化时调用接口获取数据
|
||||
setTimeout(() => {
|
||||
getTaskList();
|
||||
getUsersList(); // 获取用户列表用于维修人筛选
|
||||
}, 0);
|
||||
</script>
|
||||
|
||||
@ -1578,7 +1624,8 @@ setTimeout(() => {
|
||||
.detail-value {
|
||||
flex: 1;
|
||||
color: #4e5969;
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.task-result {
|
||||
@ -1595,13 +1642,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 +1746,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 +1763,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 +1796,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 +1824,9 @@ setTimeout(() => {
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
flex: 0 0 70px;
|
||||
flex: 0 0 85px;
|
||||
color: #86909c;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
|
||||
@ -19,9 +19,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 (默认隐藏) -->
|
||||
<!-- 筛选栏 -->
|
||||
<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>
|
||||
@ -36,10 +39,9 @@
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="executor" placeholder="抢修人员">
|
||||
<el-select v-model="executor" placeholder="抢修人员" :loading="loadingUsers">
|
||||
<el-option label="全部人员" value="all"></el-option>
|
||||
<el-option label="李明" value="liming"></el-option>
|
||||
<el-option label="王伟" value="wangwei"></el-option>
|
||||
<el-option v-for="user in executors" :key="user.userId" :label="user.userName" :value="user.userId"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@ -54,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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -64,7 +67,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 +80,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 +104,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 +369,7 @@ const priority = ref('');
|
||||
const executor = ref('');
|
||||
const dateRange = ref([]);
|
||||
const showFilter = ref(false);
|
||||
const keyword = ref('');
|
||||
|
||||
// 表单验证规则
|
||||
const assignTaskRules = {
|
||||
@ -415,19 +425,58 @@ const getTaskList = async () => {
|
||||
try {
|
||||
isLoading.value = true;
|
||||
|
||||
// 构建查询参数
|
||||
// 构建查询参数，严格匹配JSON数据结构
|
||||
const params = {
|
||||
projectId: 1,
|
||||
pageNum: currentPage.value,
|
||||
pageSize: pageSize.value
|
||||
};
|
||||
|
||||
// 添加任务状态筛选条件 - 严格匹配JSON数据中的status字段
|
||||
if (taskStatus.value && taskStatus.value !== 'all') {
|
||||
// 状态映射：pending -> 1(待处理), processing -> 2(处理中), completed -> 3(已完成)
|
||||
const statusMap = {
|
||||
'pending': '1',
|
||||
'processing': '2',
|
||||
'completed': '3'
|
||||
};
|
||||
params.status = statusMap[taskStatus.value] || taskStatus.value;
|
||||
}
|
||||
|
||||
// 添加紧急程度筛选条件 - 严格匹配JSON数据中的level字段
|
||||
if (priority.value && priority.value !== 'all') {
|
||||
// 优先级映射：normal -> 1(常规), urgent -> 2(紧急), fatal -> 3(致命)
|
||||
const priorityMap = {
|
||||
'normal': '1',
|
||||
'urgent': '2',
|
||||
'fatal': '3'
|
||||
};
|
||||
params.level = priorityMap[priority.value] || priority.value;
|
||||
}
|
||||
|
||||
// 添加维修人员筛选条件 - 严格匹配JSON数据中的sendPerson字段
|
||||
if (executor.value && executor.value !== 'all') {
|
||||
// 确保用户ID为字符串类型，与接口期望格式一致
|
||||
params.sendPerson = executor.value.toString();
|
||||
}
|
||||
|
||||
// 添加时间范围筛选条件
|
||||
if (dateRange.value && dateRange.value.length === 2) {
|
||||
params.startTime = dateRange.value[0];
|
||||
params.endTime = dateRange.value[1];
|
||||
}
|
||||
|
||||
// 添加关键词搜索条件
|
||||
if (keyword.value && keyword.value.trim()) {
|
||||
params.keyword = keyword.value.trim();
|
||||
}
|
||||
|
||||
// 调用接口获取数据
|
||||
const res = await qiangxiulist(params);
|
||||
|
||||
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 +503,17 @@ 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 +645,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 || '未知错误'}`);
|
||||
@ -609,7 +686,7 @@ const getStatisticsData = async () => {
|
||||
|
||||
// 初始化数据
|
||||
const initData = async () => {
|
||||
await Promise.all([getTaskList(), getStatisticsData()]);
|
||||
await Promise.all([getTaskList(), getStatisticsData(), getUsersList()]);
|
||||
};
|
||||
|
||||
// 组件挂载时初始化数据
|
||||
@ -649,6 +726,27 @@ const selectedExecutor = ref('');
|
||||
const executors = ref([]);
|
||||
const assignLoading = ref(false);
|
||||
|
||||
// 获取用户列表函数
|
||||
const getUsersList = async () => {
|
||||
try {
|
||||
loadingUsers.value = true;
|
||||
const res = await xunjianUserlist();
|
||||
if (res && res.code === 200) {
|
||||
// 过滤无效数据+统一userId为字符串
|
||||
executors.value = (res.rows || [])
|
||||
.filter((item) => item.userId && item.userName)
|
||||
.map((item) => ({
|
||||
userId: item.userId.toString(), // 使用userId字段
|
||||
userName: item.userName || '未知用户'
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取用户列表失败:', error);
|
||||
} finally {
|
||||
loadingUsers.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 跟进弹窗相关
|
||||
const followDialogVisible = ref(false);
|
||||
const reportFinal = ref('');
|
||||
@ -732,16 +830,8 @@ const handleAction = (record) => {
|
||||
const handleAssign = async (record) => {
|
||||
currentRecord.value = { ...record };
|
||||
try {
|
||||
const res = await xunjianUserlist();
|
||||
if (res && res.code === 200) {
|
||||
// 过滤无效数据+统一userId为字符串
|
||||
executors.value = (res.rows || [])
|
||||
.filter((item) => item.userId && item.userName)
|
||||
.map((item) => ({
|
||||
userId: item.userId.toString(), // 使用userId字段
|
||||
userName: item.userName || '未知用户'
|
||||
}));
|
||||
}
|
||||
// 重新获取用户列表以确保最新数据
|
||||
await getUsersList();
|
||||
} catch (error) {
|
||||
console.error('获取人员列表失败:', error);
|
||||
ElMessage.error('获取人员列表失败，请稍后重试');
|
||||
@ -1122,7 +1212,7 @@ const handleInspectionManagement2 = () => {
|
||||
}
|
||||
|
||||
.stat-trend.warning {
|
||||
color: #fa8c16;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
@ -1210,39 +1300,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 +1357,10 @@ const handleInspectionManagement2 = () => {
|
||||
color: #fa8c16;
|
||||
}
|
||||
|
||||
.evaluate-btn {
|
||||
color: #52c41a;
|
||||
}
|
||||
|
||||
/* 分页区域样式 */
|
||||
.pagination-section {
|
||||
display: flex;
|
||||
|
||||
@ -443,9 +443,6 @@ const handleInspectionManagement3 = () => {
|
||||
margin-bottom: 16px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* */
|
||||
|
||||
/* 内容容器样式 */
|
||||
.content-container {
|
||||
display: flex;
|
||||
|
||||
@ -24,18 +24,26 @@
|
||||
<!-- 4. 筛选和操作区域（与试验系统filter-and-actions结构一致） -->
|
||||
<div class="filter-and-actions">
|
||||
<div class="filters">
|
||||
<el-select v-model="filterStatus" placeholder="巡检状态" clearable>
|
||||
<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>
|
||||
<el-option label="需关注" value="attention"></el-option>
|
||||
<el-option label="有问题" value="problem"></el-option>
|
||||
<el-option label="已批准" value="1"></el-option>
|
||||
<el-option label="进行中" value="2"></el-option>
|
||||
<el-option label="已完成" value="3"></el-option>
|
||||
<el-option label="未通过" value="4"></el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="filterType" placeholder="巡检类型" clearable>
|
||||
<el-select v-model="filterType" placeholder="实验对象类型" clearable>
|
||||
<el-option label="全部类型" value="all"></el-option>
|
||||
<el-option label="数据库" value="database"></el-option>
|
||||
<el-option label="服务器" value="server"></el-option>
|
||||
<el-option label="网络设备" value="network"></el-option>
|
||||
<el-option label="安全试验" value="1"></el-option>
|
||||
<el-option label="网络实验" value="2"></el-option>
|
||||
<el-option label="性能试验" value="3"></el-option>
|
||||
<el-option label="其他试验" value="4"></el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="filterManager" placeholder="负责人" clearable>
|
||||
<el-option label="全部负责人" value="all"></el-option>
|
||||
<el-option v-for="user in userList" :key="user.value" :label="user.label" :value="user.value" />
|
||||
</el-select>
|
||||
|
||||
<el-date-picker
|
||||
@ -49,7 +57,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" class="search-btn" @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,8 +590,10 @@ const activeTab = ref('plan'); // 默认为"巡检计划"
|
||||
const timeRange = ref('month'); // 统计时间范围：月/周/日
|
||||
|
||||
// 2. 筛选条件
|
||||
const keyword = ref('');
|
||||
const filterStatus = ref('all');
|
||||
const filterType = ref('all');
|
||||
const filterManager = ref('all');
|
||||
const dateRange = ref([]);
|
||||
|
||||
// 分页参数
|
||||
@ -600,8 +611,14 @@ const fetchExperimentData = async () => {
|
||||
const queryParams = {
|
||||
projectId: 1,
|
||||
pageSize: pageSize.value,
|
||||
pageNum: currentPage.value
|
||||
// 其他参数...
|
||||
pageNum: currentPage.value,
|
||||
// 根据筛选条件构建查询参数
|
||||
keyword: keyword.value || undefined,
|
||||
testStatus: filterStatus.value === 'all' ? undefined : filterStatus.value,
|
||||
testObject: filterType.value === 'all' ? undefined : filterType.value,
|
||||
personCharge: filterManager.value === 'all' ? undefined : filterManager.value,
|
||||
beginTime: dateRange.value.length > 0 ? dateRange.value[0] : undefined,
|
||||
endTime: dateRange.value.length > 0 ? dateRange.value[1] : undefined
|
||||
};
|
||||
|
||||
const response = await shiyanlist(queryParams);
|
||||
@ -628,6 +645,23 @@ const fetchExperimentData = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 搜索与重置（当前数据主要来自接口，保留前端筛选入口）
|
||||
const handleSearch = () => {
|
||||
// 可根据项目需要将 keyword/filter 传给接口；当前保持页内刷新
|
||||
currentPage.value = 1;
|
||||
fetchExperimentData();
|
||||
};
|
||||
|
||||
const resetFilters = () => {
|
||||
keyword.value = '';
|
||||
filterStatus.value = 'all';
|
||||
filterType.value = 'all';
|
||||
filterManager.value = 'all';
|
||||
dateRange.value = [];
|
||||
currentPage.value = 1;
|
||||
fetchExperimentData();
|
||||
};
|
||||
|
||||
// 辅助方法
|
||||
const getTestObjectText = (type) => {
|
||||
const typeMap = {
|
||||
@ -717,15 +751,6 @@ const handleInspectionManagement2 = () => {
|
||||
const handleInspectionManagement3 = () => {
|
||||
router.push('/znxj/sygl/shiyanjilu');
|
||||
};
|
||||
// 10. 方法：切换功能选项卡
|
||||
const switchTab = (tab) => {
|
||||
activeTab.value = tab;
|
||||
// 实际应用中需根据选项卡加载对应数据
|
||||
if (tab === 'record') {
|
||||
// 加载统计数据
|
||||
updateStatData(timeRange.value);
|
||||
}
|
||||
};
|
||||
|
||||
// 11. 方法：更新统计数据（根据时间范围）
|
||||
const updateStatData = (range) => {
|
||||
@ -786,12 +811,6 @@ const getRecordStatusText = (status) => {
|
||||
return statusMap[status] || '';
|
||||
};
|
||||
|
||||
// 进度条颜色
|
||||
const getProgressColor = (status) => {
|
||||
const colorMap = { 'drafted': '#ccc', 'in-progress': '#3b82f6', 'completed': '#10b981', 'paused': '#9e9e9e' };
|
||||
return colorMap[status] || '#ccc';
|
||||
};
|
||||
|
||||
// 18. 新增实验记录弹窗相关
|
||||
const showRecordDialog = ref(false);
|
||||
const saveLoading = ref(false); // 保存加载状态
|
||||
@ -1104,21 +1123,6 @@ const handleEditRecord = async (row) => {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
// 添加新步骤
|
||||
const addStep = () => {
|
||||
formData.value.steps.push({ name: '', intendedPurpose: '', intendedTime: '' });
|
||||
};
|
||||
|
||||
// 删除步骤
|
||||
const deleteStep = (index) => {
|
||||
// 确保至少保留一个步骤
|
||||
if (formData.value.steps.length <= 1) {
|
||||
ElMessage.warning('至少需要保留一个步骤');
|
||||
return;
|
||||
}
|
||||
// 从数组中删除指定索引的步骤
|
||||
formData.value.steps.splice(index, 1);
|
||||
};
|
||||
|
||||
// 添加新设备
|
||||
const addEquipment = () => {
|
||||
@ -1214,19 +1218,6 @@ const formatDate = (dateString) => {
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
};
|
||||
|
||||
// 日期时间格式化函数
|
||||
const formatDateTime = (dateString) => {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -1237,41 +1228,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 {
|
||||
|
||||
@ -23,18 +23,21 @@
|
||||
<!-- 筛选和操作区域 -->
|
||||
<div class="filter-and-actions">
|
||||
<div class="filters">
|
||||
<el-select v-model="filterStatus" placeholder="巡检状态" clearable>
|
||||
<el-input v-model="keyword" placeholder="关键字(计划名/编号)" clearable @keyup.enter="handleSearch" style="width: 220px" />
|
||||
<el-select v-model="status" placeholder="试验状态" clearable>
|
||||
<el-option label="全部状态" value="all"></el-option>
|
||||
<el-option label="正常" value="normal"></el-option>
|
||||
<el-option label="需关注" value="attention"></el-option>
|
||||
<el-option label="有问题" value="problem"></el-option>
|
||||
<el-option label="待执行" value="1"></el-option>
|
||||
<el-option label="执行中" value="2"></el-option>
|
||||
<el-option label="已完成" value="3"></el-option>
|
||||
<el-option label="失败" value="4"></el-option>
|
||||
</el-select>
|
||||
|
||||
<el-select v-model="filterType" placeholder="巡检类型" clearable>
|
||||
<el-select v-model="filterType" placeholder="实验对象类型" clearable>
|
||||
<el-option label="全部类型" value="all"></el-option>
|
||||
<el-option label="数据库" value="database"></el-option>
|
||||
<el-option label="服务器" value="server"></el-option>
|
||||
<el-option label="网络设备" value="network"></el-option>
|
||||
<el-option label="安全试验" value="1"></el-option>
|
||||
<el-option label="网络实验" value="2"></el-option>
|
||||
<el-option label="性能试验" value="3"></el-option>
|
||||
<el-option label="其他试验" value="4"></el-option>
|
||||
</el-select>
|
||||
|
||||
<el-date-picker
|
||||
@ -47,7 +50,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,17 +136,17 @@
|
||||
<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' }"
|
||||
>
|
||||
<div class="record-header">
|
||||
<h3 class="record-title">{{ record.taskName || '试验任务' }}</h3>
|
||||
<h3 class="record-title">{{ record.taskName || record.testPlan?.planName || '试验任务' }}</h3>
|
||||
<p class="record-date">
|
||||
开始时间
|
||||
{{ formatDate(record.beginTime) }}
|
||||
<span class="record-time">计划完成时间: {{ record.planFinishTime ? formatDate(record.planFinishTime) : '未知' }}</span>
|
||||
<span class="record-time">计划完成时间: {{ record.endTime ? formatDate(record.endTime) : '未知' }}</span>
|
||||
</p>
|
||||
<span class="status-tag" :class="getStatusClass(record.status)">
|
||||
{{ getStatusText(record.status) }}
|
||||
@ -170,11 +174,11 @@
|
||||
<!-- 试验结果 -->
|
||||
<div class="test-result" :class="{ 'failure-analysis': record.status === 'failed' }">
|
||||
<h4 class="result-title">
|
||||
{{ record.status === '3' ? '失败原因分析' : '试验结果' }}
|
||||
{{ record.status === '4' ? '失败原因分析' : '试验结果' }}
|
||||
</h4>
|
||||
|
||||
<p class="result-content">
|
||||
{{ record.status === '3' ? record.failReason || '未提供失败原因' : record.testFinal || '试验未完成，未提供详细结果' }}
|
||||
{{ record.status === '4' ? record.failReason || '未提供失败原因' : record.testFinal || '试验未完成，未提供详细结果' }}
|
||||
</p>
|
||||
|
||||
<p class="result-details" v-if="record.status !== 'failed'">
|
||||
@ -183,7 +187,7 @@
|
||||
</p>
|
||||
|
||||
<!-- 改进建议（仅失败时显示） -->
|
||||
<div class="improvement-suggestion" v-if="record.status === 'failed' && record.faileTips">
|
||||
<div class="improvement-suggestion" v-if="record.status === '4' && record.faileTips">
|
||||
<i class="fas fa-lightbulb"></i>
|
||||
<p>建议: {{ record.faileTips }}</p>
|
||||
</div>
|
||||
@ -358,7 +362,7 @@
|
||||
<div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
|
||||
</div>
|
||||
<div class="step-status" :class="getStatusClass(node.status)">
|
||||
{{ node.status === '2' ? '未完成' : '已完成' }}
|
||||
{{ node.status === '2' ? '未完成' : node.status === '3' ? '失败' : '已完成' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -396,7 +400,8 @@ import { syrenwulist, syrenwujilu, syrenwuDetail } from '@/api/zhinengxunjian/sh
|
||||
const activeTab = ref('record'); // 默认显示"试验记录"
|
||||
|
||||
// 2. 筛选条件
|
||||
const filterStatus = ref('all');
|
||||
const keyword = ref('');
|
||||
const status = ref('all');
|
||||
const filterType = ref('all');
|
||||
const dateRange = ref([]);
|
||||
|
||||
@ -430,18 +435,33 @@ const currentPage = ref(1);
|
||||
const pageSize = ref(20);
|
||||
const totalRecords = ref(0);
|
||||
|
||||
// 7. 方法：获取试验记录数据
|
||||
// 7. 方法：获取试验记录数据，根据提供的JSON数据结构优化参数
|
||||
const getTestRecords = async () => {
|
||||
try {
|
||||
const response = await syrenwulist({
|
||||
// 构建与JSON数据结构匹配的查询参数
|
||||
const queryParams = {
|
||||
projectId: 1,
|
||||
page: currentPage.value,
|
||||
size: pageSize.value
|
||||
});
|
||||
pageNum: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
// 筛选条件
|
||||
keyword: keyword.value || undefined,
|
||||
status: status.value === 'all' ? undefined : status.value,
|
||||
testObject: filterType.value === 'all' ? undefined : filterType.value,
|
||||
beginTime: dateRange.value.length > 0 ? dateRange.value[0] : undefined,
|
||||
endTime: dateRange.value.length > 0 ? dateRange.value[1] : undefined
|
||||
};
|
||||
|
||||
const response = await syrenwulist(queryParams);
|
||||
console.log('syrenwulist API响应:', response);
|
||||
|
||||
if (response && response.code === 200 && response.rows) {
|
||||
testRecords.value = response.rows;
|
||||
// 处理返回的数据，确保ID是字符串避免大整数精度问题
|
||||
testRecords.value = response.rows.map((item) => ({
|
||||
...item,
|
||||
id: String(item.id), // 强制转换为字符串
|
||||
// 处理personInfo字段，确保与页面显示匹配
|
||||
personInfo: item.person || item.persons?.[0] || null
|
||||
}));
|
||||
totalRecords.value = response.total;
|
||||
}
|
||||
} catch (error) {
|
||||
@ -449,6 +469,53 @@ const getTestRecords = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
// 前端过滤后的试验记录，与JSON数据结构匹配
|
||||
const filteredTestRecords = computed(() => {
|
||||
let data = [...testRecords.value];
|
||||
|
||||
// 关键字过滤 - 匹配planName/planCode/负责人姓名
|
||||
if (keyword.value && keyword.value.trim()) {
|
||||
const kw = keyword.value.trim();
|
||||
data = data.filter((rec) => {
|
||||
return (
|
||||
(rec.planName && rec.planName.includes(kw)) ||
|
||||
(rec.planCode && rec.planCode.includes(kw)) ||
|
||||
(rec.personInfo?.userName && rec.personInfo.userName.includes(kw)) ||
|
||||
(rec.id && String(rec.id).includes(kw))
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// 状态过滤 - 匹配返回数据中的status字段
|
||||
if (status.value !== 'all') {
|
||||
data = data.filter((rec) => rec.status === status.value);
|
||||
}
|
||||
|
||||
// 类型过滤
|
||||
if (filterType.value !== 'all') {
|
||||
data = data.filter((rec) => rec.testObject === filterType.value);
|
||||
}
|
||||
|
||||
return data;
|
||||
});
|
||||
|
||||
// 搜索与重置
|
||||
const handleSearch = () => {
|
||||
// 重置为第一页并重新获取数据
|
||||
currentPage.value = 1;
|
||||
getTestRecords();
|
||||
};
|
||||
|
||||
const resetFilters = () => {
|
||||
keyword.value = '';
|
||||
status.value = 'all';
|
||||
filterType.value = 'all';
|
||||
dateRange.value = [];
|
||||
currentPage.value = 1;
|
||||
// 重置后重新获取数据
|
||||
getTestRecords();
|
||||
};
|
||||
|
||||
// 8. 方法：获取统计数据
|
||||
const getStatisticsData = async () => {
|
||||
try {
|
||||
@ -558,14 +625,13 @@ const getProgressColor = (status) => {
|
||||
return colorMap[status] || '#e5e7eb';
|
||||
};
|
||||
|
||||
// 15. 辅助方法：获取状态文本
|
||||
// 15. 辅助方法：获取状态文本 - 根据返回数据更新状态映射
|
||||
const getStatusText = (status) => {
|
||||
const statusMap = {
|
||||
'1': '待执行',
|
||||
'4': '执行中',
|
||||
'2': '已延期',
|
||||
'5': '已完成',
|
||||
'3': '失败',
|
||||
'2': '执行中',
|
||||
'3': '已完成',
|
||||
'4': '失败',
|
||||
'completed': '已完成',
|
||||
'failed': '失败',
|
||||
'paused': '已延期',
|
||||
@ -594,14 +660,13 @@ const getTaskStatusText = (status) => {
|
||||
return statusMap[status] || '未知状态';
|
||||
};
|
||||
|
||||
// 17. 辅助方法：获取状态类名
|
||||
// 17. 辅助方法：获取状态类名 - 根据返回数据更新状态类映射
|
||||
const getStatusClass = (status) => {
|
||||
const classMap = {
|
||||
'1': 'tag-pending', // 待执行
|
||||
'4': 'tag-executing', // 执行中
|
||||
'2': 'tag-delayed', // 已延期
|
||||
'5': 'tag-completed', // 已完成
|
||||
'3': 'status-failed', // 失败
|
||||
'2': 'tag-executing', // 执行中
|
||||
'3': 'tag-completed', // 已完成
|
||||
'4': 'status-failed', // 失败
|
||||
'completed': 'tag-completed',
|
||||
'failed': 'status-failed',
|
||||
'paused': 'tag-delayed',
|
||||
@ -715,41 +780,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 {
|
||||
@ -864,6 +895,12 @@ onMounted(async () => {
|
||||
border-color: #b7eb8f;
|
||||
}
|
||||
|
||||
.tag-incomplete {
|
||||
background-color: #f5f5f5;
|
||||
color: #999;
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
|
||||
/* 保留原有的部分样式以确保兼容性 */
|
||||
.status-in-progress {
|
||||
background-color: #fffbe6;
|
||||
|
||||
@ -24,24 +24,19 @@
|
||||
<!-- 筛选栏 -->
|
||||
<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>
|
||||
<el-option label="执行中" value="4"></el-option>
|
||||
<el-option label="已延期" value="2"></el-option>
|
||||
|
||||
<el-option label="已完成" value="5"></el-option>
|
||||
<el-option label="失败" value="3"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="planType" placeholder="全部计划">
|
||||
<el-option label="每日巡检计划" value="1"></el-option>
|
||||
<!-- 对应接口testPlanId -->
|
||||
<el-option label="每周巡检计划" value="2"></el-option>
|
||||
<el-option label="每月巡检计划" value="3"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="filter-item">
|
||||
<el-select v-model="executor" placeholder="执行人">
|
||||
<el-option label="全部人员" value="all"></el-option>
|
||||
@ -50,6 +45,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>
|
||||
@ -372,7 +368,7 @@
|
||||
<div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
|
||||
</div>
|
||||
<div class="step-status" :class="getStatusClass(node.status)">
|
||||
{{ node.status === '2' ? '未完成' : '已完成' }}
|
||||
{{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -479,6 +475,7 @@ const loading = ref(false);
|
||||
// 筛选条件（与接口参数对应）
|
||||
const taskStatus = ref(''); // 任务状态：1=待执行，2=暂停（已延期），3=失败，4=执行中，5=已完成
|
||||
const planType = ref(''); // 关联计划ID：1=每日，2=每周，3=每月
|
||||
const keyword = ref(''); // 关键词
|
||||
|
||||
/**
|
||||
* 将节点数据按模块分组
|
||||
@ -548,10 +545,11 @@ const getStatusClass = (status) => {
|
||||
// 处理可能的数字输入
|
||||
const statusStr = status?.toString() || '';
|
||||
const statusClassMap = {
|
||||
'1': 'status-pending',
|
||||
'2': 'status-delayed',
|
||||
'3': 'status-executing',
|
||||
'4': 'status-completed'
|
||||
'1': 'status-pending', // 待执行
|
||||
'2': 'status-unknown', // 未完成 - 灰色
|
||||
'3': 'status-failed', // 失败 - 红色
|
||||
'4': 'status-executing', // 执行中
|
||||
'5': 'status-completed' // 已完成 - 绿色
|
||||
};
|
||||
return statusClassMap[statusStr] || 'status-unknown';
|
||||
};
|
||||
@ -586,7 +584,7 @@ const getStepStatusText = (status) => {
|
||||
const statusMap = {
|
||||
'1': '待执行',
|
||||
'2': '执行中',
|
||||
'3': '已完成',
|
||||
'3': '失败',
|
||||
'4': '已延期'
|
||||
};
|
||||
return statusMap[statusStr] || '未知状态';
|
||||
@ -700,14 +698,14 @@ const getExperimentPlanList = async () => {
|
||||
const getTaskList = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
// 1. 构造接口请求参数（严格匹配createDept结构）
|
||||
// 1. 构造接口请求参数（严格匹配返回的JSON数据结构）
|
||||
const requestParams = {
|
||||
pageNum: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
projectId: 1, // 项目ID（必需字段，需从全局状态/路由获取真实值）
|
||||
status: taskStatus.value || undefined, // 任务状态（为空不传递）
|
||||
testPlanId: planType.value || undefined, // 关联计划ID（筛选条件）
|
||||
person: executor.value === 'all' ? undefined : executor.value // 执行人ID（筛选条件）
|
||||
projectId: 1, // 项目ID（必需字段）
|
||||
status: taskStatus.value || undefined, // 任务状态（对应JSON中的status字段）
|
||||
testPlanId: planType.value || undefined, // 关联计划ID（对应JSON中的testPlanId字段）
|
||||
person: executor.value === 'all' ? undefined : executor.value // 执行人ID（对应JSON中的person字段）
|
||||
};
|
||||
|
||||
// 2. 调用接口（已引入的syrenwulist函数）
|
||||
@ -716,8 +714,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 = [];
|
||||
@ -749,9 +757,9 @@ const mapApiToView = (apiData) => {
|
||||
result: '-'
|
||||
},
|
||||
'2': {
|
||||
statusText: '已延期',
|
||||
statusText: '未完成',
|
||||
cardClass: 'card-delayed',
|
||||
tagClass: 'tag-delayed',
|
||||
tagClass: 'status-unknown',
|
||||
actionText: '重新安排',
|
||||
actionClass: 'reschedule-btn',
|
||||
result: '-'
|
||||
@ -759,7 +767,7 @@ const mapApiToView = (apiData) => {
|
||||
'3': {
|
||||
statusText: '失败',
|
||||
cardClass: 'card-failed',
|
||||
tagClass: 'tag-failed',
|
||||
tagClass: 'status-failed',
|
||||
actionText: '重新执行',
|
||||
actionClass: 'reschedule-btn',
|
||||
result: '失败',
|
||||
@ -833,6 +841,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 +865,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 +929,16 @@ const handleSearch = () => {
|
||||
getTaskList();
|
||||
};
|
||||
|
||||
// 重置筛选条件
|
||||
const resetFilters = () => {
|
||||
taskStatus.value = '';
|
||||
planType.value = '';
|
||||
executor.value = 'all';
|
||||
keyword.value = '';
|
||||
currentPage.value = 1;
|
||||
getTaskList();
|
||||
};
|
||||
|
||||
/**
|
||||
* 每页条数变化
|
||||
* @param {number} val - 新的每页条数
|
||||
@ -1098,9 +1116,9 @@ const handleAction = async (task) => {
|
||||
case '3': // 失败 → 重试（状态改为1）
|
||||
updateParams.status = '1';
|
||||
// 清空失败相关字段，使用适合各字段数据类型的默认值
|
||||
updateParams.failReason = '';
|
||||
updateParams.failTime = ''; // 时间类型字段使用null
|
||||
updateParams.failPhase = ''; // 整数类型字段使用0
|
||||
updateParams.failReason = null;
|
||||
updateParams.failTime = null; // 时间类型字段使用null
|
||||
updateParams.failPhase = null; // 整数类型字段使用0
|
||||
|
||||
// 将失败的步骤状态改回2（未完成）
|
||||
if (taskDetails.nodes && Array.isArray(taskDetails.nodes)) {
|
||||
@ -1582,6 +1600,12 @@ const getTaskStatusClass = (status) => {
|
||||
border-color: #ffccc7;
|
||||
}
|
||||
|
||||
.tag-incomplete {
|
||||
background-color: #f5f5f5;
|
||||
color: #999;
|
||||
border-color: #d9d9d9;
|
||||
}
|
||||
|
||||
.task-details {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@ -1862,10 +1886,14 @@ const getTaskStatusClass = (status) => {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.status-failed {
|
||||
.status-unknown {
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.status-failed {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 1200px) {
|
||||
.task-cards {
|
||||
|
||||
@ -145,7 +145,7 @@
|
||||
</div> -->
|
||||
<div>
|
||||
<div class="flex justify-between text-sm mb-1">
|
||||
<span class="text-gray-600">解决效率</span>
|
||||
<span class="text-gray-600">问题解决效率</span>
|
||||
<span class="font-medium text-gray-800">{{ timelinessRate }}%</span>
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
|
||||
@ -394,7 +394,7 @@ const initPieChart = () => {
|
||||
},
|
||||
data: [
|
||||
{ value: completionRate.value, name: '巡检完成率', itemStyle: { color: '#409eff' } },
|
||||
{ value: timelinessRate.value, name: '解决效率', itemStyle: { color: '#67c23a' } }
|
||||
{ value: timelinessRate.value, name: '问题解决效率', itemStyle: { color: '#67c23a' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
@ -434,12 +434,12 @@ const fetchDashboardData = async () => {
|
||||
// 根据时间范围确定type参数：1是月，2是周，3是日
|
||||
let type;
|
||||
if (timeRange.value === 'month') {
|
||||
type = 1;
|
||||
type = 3;
|
||||
} else if (timeRange.value === 'week') {
|
||||
type = 2;
|
||||
} else {
|
||||
// day
|
||||
type = 3;
|
||||
type = 1;
|
||||
}
|
||||
|
||||
// 构建查询参数
|
||||
@ -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 {
|
||||
|
||||
@ -23,26 +23,25 @@
|
||||
<!-- 筛选栏 -->
|
||||
<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>
|
||||
<el-option label="执行中" value="executing"></el-option>
|
||||
<el-option label="已延期" value="delayed"></el-option>
|
||||
<el-option label="已完成" value="completed"></el-option>
|
||||
<el-option label="待处理" value="1"></el-option>
|
||||
<el-option label="处理中" value="3"></el-option>
|
||||
<el-option label="已完成" value="4"></el-option>
|
||||
<el-option label="已延期" value="2"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="planType" placeholder="全部计划">
|
||||
<el-option label="每日巡检计划" value="daily"></el-option>
|
||||
<el-option label="每周巡检计划" value="weekly"></el-option>
|
||||
<el-option label="每月巡检计划" value="monthly"></el-option>
|
||||
<el-select v-model="executor" placeholder="执行人" :disabled="loadingUsers">
|
||||
<el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-input v-model="executor" placeholder="执行人"></el-input>
|
||||
</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>
|
||||
@ -387,7 +386,7 @@
|
||||
<div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
|
||||
</div>
|
||||
<div class="step-status" :class="getStatusClass(node.status)">
|
||||
{{ node.status === '2' ? '未完成' : '已完成' }}
|
||||
{{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -429,11 +428,17 @@ 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('');
|
||||
|
||||
// 执行人列表相关
|
||||
const usersList = ref([]);
|
||||
const loadingUsers = ref(false);
|
||||
|
||||
// 任务数据 - 初始为空数组，通过API获取
|
||||
const tasks = ref([]);
|
||||
@ -462,9 +467,9 @@ const getStatusClass = (status) => {
|
||||
const statusStr = status?.toString() || '';
|
||||
const statusClassMap = {
|
||||
'1': 'status-pending',
|
||||
'2': 'status-delayed',
|
||||
'3': 'status-executing',
|
||||
'4': 'status-completed'
|
||||
'2': 'status-unknown', // 未完成状态显示为灰色
|
||||
'3': 'status-failed', // 失败状态显示为红色
|
||||
'4': 'status-completed' // 已完成状态显示为绿色
|
||||
};
|
||||
return statusClassMap[statusStr] || 'status-unknown';
|
||||
};
|
||||
@ -543,16 +548,17 @@ 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,
|
||||
status: taskStatus.value || undefined,
|
||||
planType: planType.value || undefined,
|
||||
personId: executor.value || undefined,
|
||||
keyword: keyword.value.trim() || undefined
|
||||
};
|
||||
|
||||
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 +609,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);
|
||||
@ -623,6 +632,7 @@ const getTaskList = async () => {
|
||||
// 页面加载时获取数据
|
||||
onMounted(() => {
|
||||
getTaskList();
|
||||
getUsersList();
|
||||
});
|
||||
|
||||
// 分页相关
|
||||
@ -809,7 +819,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'
|
||||
@ -874,11 +884,13 @@ const planList = ref([]);
|
||||
|
||||
// 获取负责人列表
|
||||
const getUsersList = async () => {
|
||||
loadingUsers.value = true;
|
||||
try {
|
||||
const response = await xunjianUserlist();
|
||||
// 适配新接口格式：检查code为200且rows为数组
|
||||
const userRows = response.code === 200 && response.rows && Array.isArray(response.rows) ? response.rows : [];
|
||||
|
||||
// 更新userList变量（用于创建任务弹窗）
|
||||
userList.value = userRows
|
||||
.filter((item) => item && typeof item === 'object')
|
||||
.map((item) => ({
|
||||
@ -886,12 +898,27 @@ const getUsersList = async () => {
|
||||
value: String(item.userId || '') // 使用userId作为唯一标识
|
||||
}));
|
||||
|
||||
// 同时更新usersList变量（用于筛选栏）
|
||||
usersList.value = userRows
|
||||
.filter((item) => item && typeof item === 'object')
|
||||
.map((item) => ({
|
||||
id: String(item.userId || ''),
|
||||
name: item.userName || '未知用户'
|
||||
}));
|
||||
|
||||
// 空数据处理
|
||||
if (userList.value.length === 0) {
|
||||
userList.value = [{ label: '默认用户', value: 'default' }];
|
||||
}
|
||||
if (usersList.value.length === 0) {
|
||||
usersList.value = [{ id: 'default', name: '默认用户' }];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取负责人列表失败:', error);
|
||||
userList.value = [{ label: '默认用户', value: 'default' }];
|
||||
usersList.value = [{ id: 'default', name: '默认用户' }];
|
||||
} finally {
|
||||
loadingUsers.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
@ -1045,7 +1072,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 +1099,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,
|
||||
@ -1463,166 +1483,6 @@ const handleAction = async (task) => {
|
||||
}
|
||||
}
|
||||
|
||||
/* 任务详情弹窗样式 */
|
||||
.task-detail-container {
|
||||
max-height: 600px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 步骤条展示样式 */
|
||||
.step-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12px;
|
||||
padding: 12px;
|
||||
background-color: #fafafa;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.step-item:hover {
|
||||
background-color: #f5f7fa;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-color: #409eff;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 12px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.step-name {
|
||||
font-weight: 500;
|
||||
color: #1d2129;
|
||||
margin-bottom: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.step-purpose {
|
||||
color: #606266;
|
||||
margin-bottom: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.step-time,
|
||||
.step-finish-time,
|
||||
.step-remark {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.step-status {
|
||||
padding: 4px 12px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 步骤状态样式 */
|
||||
.step-status.status-pending {
|
||||
background-color: #e6f7ff;
|
||||
color: #1677ff;
|
||||
border: 1px solid #91d5ff;
|
||||
}
|
||||
|
||||
.step-status.status-executing {
|
||||
background-color: #fffbe6;
|
||||
color: #fa8c16;
|
||||
border: 1px solid #ffe58f;
|
||||
}
|
||||
|
||||
.step-status.status-completed {
|
||||
background-color: #f6ffed;
|
||||
color: #52c41a;
|
||||
border: 1px solid #b7eb8f;
|
||||
}
|
||||
|
||||
.step-status.status-delayed {
|
||||
background-color: #fff2f0;
|
||||
color: #ff4d4f;
|
||||
border: 1px solid #ffccc7;
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
background-color: #fafafa;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin: 0 0 16px 0;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid #409eff;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.info-item.full-width {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #303133;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.fail-reason {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.no-info {
|
||||
color: #909399;
|
||||
font-style: italic;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.loading-details {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/* 状态颜色样式 */
|
||||
.status-pending {
|
||||
color: #e6a23c;
|
||||
|
||||
@ -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>
|
||||
@ -36,8 +39,8 @@
|
||||
<div class="filter-item">
|
||||
<el-select v-model="workOrderStatus" placeholder="全部状态" clearable>
|
||||
<el-option label="全部状态" value="all"></el-option>
|
||||
<el-option label="待派单" value="accepted"></el-option>
|
||||
<el-option label="待处理" value="pending"></el-option>
|
||||
<el-option label="待派单" value="pending"></el-option>
|
||||
<el-option label="已派单" value="accepted"></el-option>
|
||||
<el-option label="执行中" value="executing"></el-option>
|
||||
<el-option label="已完成" value="completed"></el-option>
|
||||
</el-select>
|
||||
@ -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">
|
||||
<!-- 进度条设计 -->
|
||||
<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-person-time">预期时间：{{ formatDateTime(step.intendedTime) }}</div>
|
||||
</template>
|
||||
<div class="step-content">预期目的：{{ step.intendedPurpose || '-' }}</div>
|
||||
<div class="step-time">
|
||||
<i class="el-icon-time"></i>
|
||||
预期时间：{{ formatDateTime(step.intendedTime) }}
|
||||
</div>
|
||||
</template>
|
||||
</el-step>
|
||||
</template>
|
||||
</el-steps>
|
||||
<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>
|
||||
@ -445,7 +475,7 @@
|
||||
<div v-if="node.remark" class="step-remark">备注：{{ node.remark }}</div>
|
||||
</div>
|
||||
<div class="step-status" :class="getStatusClass(node.status)">
|
||||
{{ node.status === '2' ? '未完成' : '已完成' }}
|
||||
{{ node.status === '2' ? '未执行' : node.status === '3' ? '失败' : '已完成' }}
|
||||
</div>
|
||||
<!-- 连接线 -->
|
||||
<div v-if="index < detailData.nodes.length - 1" class="step-connector" :class="{ 'connector-completed': node.status !== '2' }"></div>
|
||||
@ -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 = '';
|
||||
@ -862,10 +1003,10 @@ const pagedTableData = computed(() => {
|
||||
let statusText = '';
|
||||
switch (workOrderStatus.value) {
|
||||
case 'accepted':
|
||||
statusText = '已接单';
|
||||
statusText = '已派单';
|
||||
break;
|
||||
case 'pending':
|
||||
statusText = '待处理';
|
||||
statusText = '待派单';
|
||||
break;
|
||||
case 'executing':
|
||||
statusText = '执行中';
|
||||
@ -949,10 +1090,10 @@ const getStatusClass = (status) => {
|
||||
// 处理可能的数字输入
|
||||
const statusStr = status?.toString() || '';
|
||||
const statusClassMap = {
|
||||
'1': 'status-pending',
|
||||
'2': 'status-delayed',
|
||||
'3': 'status-executing',
|
||||
'4': 'status-completed'
|
||||
'1': 'status-pending', // 待执行 - 蓝色
|
||||
'2': 'status-unknown', // 未执行 - 灰色
|
||||
'3': 'status-failed', // 失败 - 红色
|
||||
'4': 'status-completed' // 已完成 - 绿色
|
||||
};
|
||||
return statusClassMap[statusStr] || 'status-unknown';
|
||||
};
|
||||
@ -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%);
|
||||
|
||||
Reference in New Issue
Block a user