2025-09-17 15:53:38 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<div class="inspection-tasks">
|
|
|
|
|
|
<!-- 导航栏 -->
|
2025-09-26 20:32:14 +08:00
|
|
|
|
<!-- <div class="navigation-tabs">
|
2025-09-17 15:53:38 +08:00
|
|
|
|
<div class="nav-tab" @click="handleInspection1">待办事项</div>
|
|
|
|
|
|
<div class="nav-tab" @click="handleInspection2">巡检管理</div>
|
|
|
|
|
|
<div class="nav-tab" @click="handleInspection3">试验管理</div>
|
|
|
|
|
|
<div class="nav-tab active" @click="handleInspection4">报修管理</div>
|
|
|
|
|
|
<div class="nav-tab" @click="handleInspection5">抢修管理</div>
|
|
|
|
|
|
<div class="nav-tab" @click="handleInspection6">工单管理</div>
|
|
|
|
|
|
<div class="nav-tab" @click="handleInspection7">运维组织</div>
|
2025-09-26 20:32:14 +08:00
|
|
|
|
</div> -->
|
2025-09-17 15:53:38 +08:00
|
|
|
|
|
|
|
|
|
|
<!-- 选项卡 -->
|
|
|
|
|
|
<div class="tabs-wrapper">
|
|
|
|
|
|
<div style="display: flex; align-items: center; gap: 10px">
|
|
|
|
|
|
<el-button type="primary" @click="handleInspectionManagement1">报修任务</el-button>
|
|
|
|
|
|
<el-button type="primary" @click="handleInspectionManagement2">报修记录</el-button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 筛选栏 -->
|
|
|
|
|
|
<div class="filter-bar">
|
|
|
|
|
|
<div class="filter-container">
|
2025-09-29 17:17:42 +08:00
|
|
|
|
<div class="filter-item">
|
|
|
|
|
|
<el-input v-model="keyword" placeholder="关键字(单号/内容/报修人/维修人)" clearable @keyup.enter="handleSearch" />
|
|
|
|
|
|
</div>
|
2025-09-17 15:53:38 +08:00
|
|
|
|
<div class="filter-item">
|
|
|
|
|
|
<el-select v-model="taskStatus" placeholder="任务状态">
|
2025-09-23 20:36:47 +08:00
|
|
|
|
<el-option label="待执行" value="1"></el-option>
|
|
|
|
|
|
<el-option label="处理中" value="2"></el-option>
|
|
|
|
|
|
<el-option label="已完成" value="3"></el-option>
|
2025-09-17 15:53:38 +08:00
|
|
|
|
</el-select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="filter-item">
|
|
|
|
|
|
<el-select v-model="priority" placeholder="优先级">
|
2025-09-23 20:36:47 +08:00
|
|
|
|
<el-option label="高优先级" value="1"></el-option>
|
|
|
|
|
|
<el-option label="中优先级" value="2"></el-option>
|
|
|
|
|
|
<el-option label="低优先级" value="3"></el-option>
|
2025-09-17 15:53:38 +08:00
|
|
|
|
</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>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="filter-item">
|
|
|
|
|
|
<el-date-picker
|
|
|
|
|
|
v-model="dateRange"
|
|
|
|
|
|
type="datetimerange"
|
|
|
|
|
|
start-placeholder="开始时间"
|
|
|
|
|
|
end-placeholder="结束时间"
|
|
|
|
|
|
format="YYYY-MM-DD HH:mm"
|
|
|
|
|
|
value-format="YYYY-MM-DD HH:mm"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="filter-actions">
|
2025-09-23 20:36:47 +08:00
|
|
|
|
<el-button type="primary" icon="Search" class="search-btn" @click="handleSearch"> 搜索 </el-button>
|
2025-09-29 17:17:42 +08:00
|
|
|
|
<el-button icon="Refresh" class="create-btn" @click="resetFilters"> 重置 </el-button>
|
2025-09-17 15:53:38 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 统计卡片区域 -->
|
|
|
|
|
|
<div class="statistics-container">
|
|
|
|
|
|
<div class="stat-card">
|
|
|
|
|
|
<div class="stat-info">
|
|
|
|
|
|
<p class="stat-label">本月报修数</p>
|
2025-09-23 20:36:47 +08:00
|
|
|
|
<p class="stat-value">{{ statsLoading ? '加载中...' : statsData.byzbxs }}</p>
|
|
|
|
|
|
<p class="stat-trend up">较上月：{{ statsData.bxsjszzzl }}</p>
|
2025-09-17 15:53:38 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="stat-icon">
|
2025-09-18 19:56:24 +08:00
|
|
|
|
<img src="@/assets/images/baoxiu.png" alt="本月报修数" class="stat-image" />
|
2025-09-17 15:53:38 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="stat-card">
|
|
|
|
|
|
<div class="stat-info">
|
|
|
|
|
|
<p class="stat-label">平均处理时长</p>
|
2025-09-23 20:36:47 +08:00
|
|
|
|
<p class="stat-value">{{ statsLoading ? '加载中...' : statsData.pjclsc }}</p>
|
|
|
|
|
|
<p class="stat-trend down">较上月：{{ statsData.clscjszzzl }}</p>
|
2025-09-17 15:53:38 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="stat-icon">
|
2025-09-18 19:56:24 +08:00
|
|
|
|
<img src="@/assets/images/baoxiushijian.png" alt="平均处理时长" class="stat-image" />
|
2025-09-17 15:53:38 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="stat-card">
|
|
|
|
|
|
<div class="stat-info">
|
|
|
|
|
|
<p class="stat-label">待处理报修</p>
|
2025-09-23 20:36:47 +08:00
|
|
|
|
<p class="stat-value">{{ statsLoading ? '加载中...' : statsData.dclbx }}</p>
|
2025-09-17 15:53:38 +08:00
|
|
|
|
<p class="stat-trend warning">需及时处理</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="stat-icon warning">
|
2025-09-18 19:56:24 +08:00
|
|
|
|
<img src="@/assets/images/weibaoxiu.png" alt="待处理报修" class="stat-image" />
|
2025-09-17 15:53:38 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="stat-card">
|
|
|
|
|
|
<div class="stat-info">
|
|
|
|
|
|
<p class="stat-label">完成率</p>
|
2025-09-23 20:36:47 +08:00
|
|
|
|
<p class="stat-value">{{ statsLoading ? '加载中...' : statsData.wcl }}%</p>
|
|
|
|
|
|
<p class="stat-trend up">{{ statsData.wcljszzzl }}%</p>
|
2025-09-17 15:53:38 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="stat-icon success">
|
2025-09-18 19:56:24 +08:00
|
|
|
|
<img src="@/assets/images/baoxiuwancheng.png" alt="完成率" class="stat-image" />
|
2025-09-17 15:53:38 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 报修记录表格 -->
|
|
|
|
|
|
<div class="table-container">
|
2025-09-23 20:36:47 +08:00
|
|
|
|
<el-table :data="filteredRecords" border style="width: 100%" class="record-table" v-loading="loading" element-loading-text="加载中...">
|
|
|
|
|
|
<el-table-column align="center" prop="reportNo" label="报修单号" min-width="120">
|
|
|
|
|
|
<template #default="scope">{{ scope.row.id }}</template>
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="content" label="报修内容" min-width="200">
|
|
|
|
|
|
<template #default="scope">{{ scope.row.reportInfo }}</template>
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="reporter" label="报修人" min-width="90">
|
|
|
|
|
|
<template #default="scope">{{ scope.row.reportName }}</template>
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="reportTime" label="报修时间" min-width="150">
|
|
|
|
|
|
<template #default="scope">{{ formatDate(scope.row.createTime) }}</template>
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="handler" label="处理人员" min-width="90">
|
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
|
{{ scope.row.sendPersonVo ? scope.row.sendPersonVo.userName : '未分配' }}
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-table-column>
|
2025-09-18 19:56:24 +08:00
|
|
|
|
<el-table-column align="center" prop="status" label="处理状态" min-width="90">
|
2025-09-17 15:53:38 +08:00
|
|
|
|
<template #default="scope">
|
2025-09-23 20:36:47 +08:00
|
|
|
|
<span :class="`status-tag ${getStatusClass(scope.row.status)}`">{{ getStatusText(scope.row.status) }}</span>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="handleTime" label="处理时间" min-width="150">
|
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
|
{{ scope.row.reportFinishTime ? formatDate(scope.row.reportFinishTime) : '--' }}
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
<el-table-column align="center" prop="result" label="维修结果" min-width="180">
|
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
|
{{ scope.row.reportFinal || '--' }}
|
2025-09-17 15:53:38 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
</el-table-column>
|
2025-09-18 19:56:24 +08:00
|
|
|
|
<el-table-column align="center" label="操作" min-width="140">
|
2025-09-17 15:53:38 +08:00
|
|
|
|
<template #default="scope">
|
2025-09-18 19:56:24 +08:00
|
|
|
|
<el-button type="text" class="detail-btn" @click="handleDetail(scope.row)"> 详情 </el-button>
|
2025-09-23 20:36:47 +08:00
|
|
|
|
<el-button type="text" :class="getActionClass(scope.row.status)" @click="handleAction(scope.row)">
|
|
|
|
|
|
{{ getActionText(scope.row.status) }}
|
2025-09-17 15:53:38 +08:00
|
|
|
|
</el-button>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
</el-table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 分页区域 -->
|
|
|
|
|
|
<div class="pagination-section">
|
|
|
|
|
|
<div class="pagination-controls">
|
|
|
|
|
|
<el-pagination
|
|
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
|
|
:current-page="currentPage"
|
|
|
|
|
|
:page-sizes="[7, 15, 20, 30]"
|
|
|
|
|
|
:page-size="pageSize"
|
|
|
|
|
|
layout="prev, pager, next, jumper"
|
|
|
|
|
|
:total="total"
|
|
|
|
|
|
background
|
|
|
|
|
|
>
|
|
|
|
|
|
</el-pagination>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2025-09-23 20:36:47 +08:00
|
|
|
|
|
|
|
|
|
|
<!-- 任务详情弹窗 -->
|
|
|
|
|
|
<el-dialog
|
|
|
|
|
|
v-model="detailDialogVisible"
|
|
|
|
|
|
title="报修任务详情"
|
|
|
|
|
|
width="800px"
|
|
|
|
|
|
:before-close="handleCloseDetailDialog"
|
|
|
|
|
|
class="custom-experiment-dialog"
|
|
|
|
|
|
>
|
|
|
|
|
|
<div v-if="detailData" class="task-detail-container">
|
|
|
|
|
|
<!-- 加载状态骨架屏 -->
|
|
|
|
|
|
<div v-if="isDetailLoading" class="skeleton-loading">
|
|
|
|
|
|
<div class="skeleton-card">
|
|
|
|
|
|
<div class="skeleton-header"></div>
|
|
|
|
|
|
<div class="skeleton-content">
|
|
|
|
|
|
<div class="skeleton-row"></div>
|
|
|
|
|
|
<div class="skeleton-row"></div>
|
|
|
|
|
|
<div class="skeleton-row"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="skeleton-card">
|
|
|
|
|
|
<div class="skeleton-header"></div>
|
|
|
|
|
|
<div class="skeleton-content">
|
|
|
|
|
|
<div class="skeleton-row"></div>
|
|
|
|
|
|
<div class="skeleton-row"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="skeleton-card">
|
|
|
|
|
|
<div class="skeleton-header"></div>
|
|
|
|
|
|
<div class="skeleton-content">
|
|
|
|
|
|
<div class="skeleton-row"></div>
|
|
|
|
|
|
<div class="skeleton-row"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 任务基本信息卡片 -->
|
|
|
|
|
|
<div class="detail-card">
|
|
|
|
|
|
<h3 class="card-title">任务基本信息</h3>
|
|
|
|
|
|
<div class="card-content">
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
|
<span class="info-label">任务ID：</span>
|
|
|
|
|
|
<span class="info-value">{{ detailData.id || '-' }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
|
<span class="info-label">任务名称：</span>
|
|
|
|
|
|
<span class="info-value">{{ detailData.name || '未命名' }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
|
<span class="info-label">任务状态：</span>
|
|
|
|
|
|
<span class="info-value">{{ getStatusText(detailData.status) }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
|
<span class="info-label">任务等级：</span>
|
|
|
|
|
|
<span class="info-value">{{ getPriorityText(detailData.level) }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
|
<span class="info-label">任务类型：</span>
|
|
|
|
|
|
<span class="info-value">{{ detailData.type === '1' ? '硬件故障' : detailData.type === '2' ? '软件故障' : '-' }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
|
<span class="info-label">报修时间：</span>
|
|
|
|
|
|
<span class="info-value">{{ formatDate(detailData.createTime) }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 报修人信息卡片 -->
|
|
|
|
|
|
<div class="detail-card">
|
|
|
|
|
|
<h3 class="card-title">报修人信息</h3>
|
|
|
|
|
|
<div class="card-content">
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
|
<span class="info-label">报修人：</span>
|
|
|
|
|
|
<span class="info-value">{{ detailData.reportName || '-' }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
|
<span class="info-label">联系人：</span>
|
|
|
|
|
|
<span class="info-value">{{ detailData.reportName || '-' }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
|
<span class="info-label">联系电话：</span>
|
|
|
|
|
|
<span class="info-value">{{ detailData.reportPhone || '-' }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
|
<span class="info-label">维修人：</span>
|
|
|
|
|
|
<span class="info-value">{{ detailData.sendPersonVo?.userName || '-' }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 报修详情信息卡片 -->
|
|
|
|
|
|
<div class="detail-card">
|
|
|
|
|
|
<h3 class="card-title">报修详情</h3>
|
|
|
|
|
|
<div class="card-content">
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
|
|
<div class="info-item full-width">
|
|
|
|
|
|
<span class="info-label">故障位置：</span>
|
|
|
|
|
|
<span class="info-value">{{ detailData.position || '-' }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="info-row">
|
|
|
|
|
|
<div class="info-item full-width">
|
|
|
|
|
|
<span class="info-label">详细描述：</span>
|
|
|
|
|
|
<span class="info-value">{{ detailData.reportInfo || '-' }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<!-- 已完成状态的额外信息 -->
|
|
|
|
|
|
<div v-if="detailData.status === '3'" class="info-row">
|
|
|
|
|
|
<div class="info-item">
|
|
|
|
|
|
<span class="info-label">完成时间：</span>
|
|
|
|
|
|
<span class="info-value">{{ formatDate(detailData.completeTime) }}</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 故障图片 -->
|
|
|
|
|
|
<div v-if="detailData.fileUrl && detailData.fileUrl.length > 0" class="detail-card">
|
|
|
|
|
|
<h3 class="card-title">故障图片</h3>
|
|
|
|
|
|
<div class="card-content">
|
|
|
|
|
|
<div class="images-container">
|
|
|
|
|
|
<!-- 将逗号分隔的URL字符串拆分为数组并循环展示 -->
|
|
|
|
|
|
<div v-for="(url, index) in splitImageUrls(detailData.fileUrl)" :key="index" class="image-item">
|
|
|
|
|
|
<img
|
|
|
|
|
|
:src="url"
|
|
|
|
|
|
:alt="`故障图片 ${index + 1}`"
|
|
|
|
|
|
class="detail-image"
|
|
|
|
|
|
@error="handleImageError($event, index)"
|
|
|
|
|
|
style="max-width: 100%; max-height: 200px; border-radius: 4px"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div v-else class="loading-state">
|
|
|
|
|
|
<i class="el-icon-loading el-icon--loading"></i>
|
|
|
|
|
|
<span>加载中...</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<template #footer>
|
|
|
|
|
|
<span class="dialog-footer">
|
|
|
|
|
|
<el-button @click="handleCloseDetailDialog">关闭</el-button>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 跟进任务弹窗 -->
|
|
|
|
|
|
<el-dialog v-model="followDialogVisible" title="跟进任务" width="600px" :before-close="handleCloseFollowDialog" class="beautiful-dialog">
|
|
|
|
|
|
<div class="dialog-content">
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label class="form-label">处理结果</label>
|
|
|
|
|
|
<el-input v-model="reportFinal" type="textarea" :rows="6" placeholder="请输入维修处理结果（5-500字）" maxlength="500" />
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<template #footer>
|
|
|
|
|
|
<span class="dialog-footer">
|
|
|
|
|
|
<el-button @click="handleCloseFollowDialog">取消</el-button>
|
|
|
|
|
|
<el-button type="primary" @click="submitFollow">提交</el-button>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 分配任务弹窗 -->
|
|
|
|
|
|
<el-dialog v-model="assignDialogVisible" title="分配维修人员" width="500px" :before-close="handleCloseAssignDialog" class="beautiful-dialog">
|
|
|
|
|
|
<div class="dialog-content">
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label class="form-label">选择维修人员</label>
|
|
|
|
|
|
<el-select v-model="selectedUserId" placeholder="请选择维修人员" :disabled="loadingUsers">
|
|
|
|
|
|
<el-option v-for="user in usersList" :key="user.id" :label="user.name" :value="user.id" />
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div v-if="loadingUsers" class="loading-hint">加载中...</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<template #footer>
|
|
|
|
|
|
<span class="dialog-footer">
|
|
|
|
|
|
<el-button @click="handleCloseAssignDialog">取消</el-button>
|
|
|
|
|
|
<el-button type="primary" @click="submitAssign">确认分配</el-button>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-dialog>
|
2025-09-17 15:53:38 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
2025-09-23 20:36:47 +08:00
|
|
|
|
import { ref, computed, onMounted } from 'vue';
|
2025-09-17 15:53:38 +08:00
|
|
|
|
import router from '@/router';
|
2025-09-23 20:36:47 +08:00
|
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
|
|
|
import { baoxiulist, baoxiuDetail, baoxiuRecord, updatebaoxiu } from '@/api/zhinengxunjian/baoxiou/index';
|
|
|
|
|
|
import { xunjianUserlist } from '@/api/zhinengxunjian/xunjian';
|
|
|
|
|
|
|
|
|
|
|
|
// 加载状态
|
|
|
|
|
|
const loading = ref(false);
|
|
|
|
|
|
const statsLoading = ref(false);
|
2025-09-17 15:53:38 +08:00
|
|
|
|
|
|
|
|
|
|
// 筛选条件
|
|
|
|
|
|
const taskStatus = ref('');
|
|
|
|
|
|
const priority = ref('');
|
|
|
|
|
|
const executor = ref('');
|
|
|
|
|
|
const dateRange = ref([]);
|
2025-09-29 17:17:42 +08:00
|
|
|
|
const keyword = ref('');
|
2025-09-17 15:53:38 +08:00
|
|
|
|
|
|
|
|
|
|
// 分页相关
|
2025-09-23 20:36:47 +08:00
|
|
|
|
const currentPage = ref(1);
|
2025-09-17 15:53:38 +08:00
|
|
|
|
const pageSize = ref(7);
|
|
|
|
|
|
|
|
|
|
|
|
// 报修记录数据
|
2025-09-23 20:36:47 +08:00
|
|
|
|
const repairRecords = ref([]);
|
|
|
|
|
|
const total = ref(0);
|
|
|
|
|
|
|
|
|
|
|
|
// 统计数据
|
|
|
|
|
|
const statsData = ref({
|
|
|
|
|
|
byzbxs: '0', // 本月报修数
|
|
|
|
|
|
bxsjszzzl: '0%', // 报修及时处理率
|
|
|
|
|
|
pjclsc: '0小时', // 平均处理时长
|
|
|
|
|
|
clscjszzzl: '0%', // 处理时长及时处理率
|
|
|
|
|
|
dclbx: '0', // 待处理报修
|
|
|
|
|
|
wcl: '0%', // 完成率
|
|
|
|
|
|
wcljszzzl: '0%' // 完成率及时处理率
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 初始化加载数据
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
fetchRepairRecords();
|
|
|
|
|
|
fetchStatsData();
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 从接口获取报修记录
|
|
|
|
|
|
const fetchRepairRecords = async () => {
|
|
|
|
|
|
loading.value = true;
|
|
|
|
|
|
try {
|
|
|
|
|
|
// 构建请求参数
|
|
|
|
|
|
const params = {
|
|
|
|
|
|
page: currentPage.value,
|
|
|
|
|
|
limit: pageSize.value,
|
|
|
|
|
|
status: taskStatus.value || undefined,
|
|
|
|
|
|
level: priority.value || undefined
|
|
|
|
|
|
// 可以根据需要添加更多筛选参数
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 调用接口获取数据
|
|
|
|
|
|
const response = await baoxiulist(params);
|
|
|
|
|
|
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
repairRecords.value = response.rows || [];
|
|
|
|
|
|
total.value = response.total || 0;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.error('获取报修记录失败:', response.msg);
|
|
|
|
|
|
// 可以添加错误提示
|
|
|
|
|
|
}
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error('获取报修记录出错:', error);
|
|
|
|
|
|
// 可以添加错误提示
|
|
|
|
|
|
} finally {
|
|
|
|
|
|
loading.value = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
2025-09-17 15:53:38 +08:00
|
|
|
|
|
|
|
|
|
|
// 筛选后的记录
|
|
|
|
|
|
const filteredRecords = computed(() => {
|
2025-09-29 17:17:42 +08:00
|
|
|
|
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))
|
|
|
|
|
|
);
|
2025-09-17 15:53:38 +08:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 搜索处理
|
|
|
|
|
|
const handleSearch = () => {
|
|
|
|
|
|
currentPage.value = 1; // 重置到第一页
|
2025-09-23 20:36:47 +08:00
|
|
|
|
fetchRepairRecords(); // 重新获取数据
|
2025-09-17 15:53:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
|
2025-09-29 17:17:42 +08:00
|
|
|
|
// 重置筛选
|
|
|
|
|
|
const resetFilters = () => {
|
|
|
|
|
|
taskStatus.value = '';
|
|
|
|
|
|
priority.value = '';
|
|
|
|
|
|
executor.value = '';
|
|
|
|
|
|
dateRange.value = [];
|
|
|
|
|
|
keyword.value = '';
|
|
|
|
|
|
currentPage.value = 1;
|
|
|
|
|
|
fetchRepairRecords();
|
|
|
|
|
|
};
|
|
|
|
|
|
|
2025-09-17 15:53:38 +08:00
|
|
|
|
// 分页事件
|
|
|
|
|
|
const handleSizeChange = (val) => {
|
|
|
|
|
|
pageSize.value = val;
|
|
|
|
|
|
currentPage.value = 1;
|
2025-09-23 20:36:47 +08:00
|
|
|
|
fetchRepairRecords();
|
2025-09-17 15:53:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleCurrentChange = (val) => {
|
|
|
|
|
|
currentPage.value = val;
|
2025-09-23 20:36:47 +08:00
|
|
|
|
fetchRepairRecords();
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 详情弹窗相关
|
|
|
|
|
|
const detailDialogVisible = ref(false);
|
|
|
|
|
|
const detailData = ref(null);
|
|
|
|
|
|
const isDetailLoading = ref(false);
|
|
|
|
|
|
|
|
|
|
|
|
// 跟进任务弹窗相关
|
|
|
|
|
|
const followDialogVisible = ref(false);
|
|
|
|
|
|
const currentFollowTaskId = ref('');
|
|
|
|
|
|
const reportFinal = ref('');
|
|
|
|
|
|
|
|
|
|
|
|
// 分配任务弹窗相关
|
|
|
|
|
|
const assignDialogVisible = ref(false);
|
|
|
|
|
|
const currentAssignTaskId = ref('');
|
|
|
|
|
|
const selectedUserId = ref('');
|
|
|
|
|
|
const usersList = ref([]);
|
|
|
|
|
|
const loadingUsers = ref(false);
|
|
|
|
|
|
|
|
|
|
|
|
// 维修类型映射
|
|
|
|
|
|
function mapRepairType(type) {
|
|
|
|
|
|
const typeMap = {
|
|
|
|
|
|
'hardware': '1', // 硬件故障
|
|
|
|
|
|
'software': '2', // 软件故障
|
|
|
|
|
|
'all': '1'
|
|
|
|
|
|
};
|
|
|
|
|
|
return typeMap[type] || '1';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 获取用户列表
|
|
|
|
|
|
const getUsersList = async () => {
|
|
|
|
|
|
loadingUsers.value = true;
|
|
|
|
|
|
try {
|
|
|
|
|
|
const res = await xunjianUserlist();
|
|
|
|
|
|
// 根据接口返回格式，成功码是200，用户数据在rows数组中
|
|
|
|
|
|
if (res.code === 200 && res.rows && Array.isArray(res.rows)) {
|
2025-09-24 16:37:09 +08:00
|
|
|
|
// 映射用户数据，使用userId字段作为唯一标识并转换为字符串以避免大整数精度问题
|
2025-09-23 20:36:47 +08:00
|
|
|
|
usersList.value = res.rows.map((user) => ({
|
2025-09-24 16:37:09 +08:00
|
|
|
|
id: String(user.userId || ''),
|
|
|
|
|
|
name: user.userName || '未知用户'
|
2025-09-23 20:36:47 +08:00
|
|
|
|
}));
|
|
|
|
|
|
} else {
|
|
|
|
|
|
usersList.value = [];
|
|
|
|
|
|
console.error('获取用户列表失败:', res.msg || '未知错误');
|
|
|
|
|
|
}
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error('获取用户列表异常:', error);
|
|
|
|
|
|
usersList.value = [];
|
|
|
|
|
|
} finally {
|
|
|
|
|
|
loadingUsers.value = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 优先级映射 - 1低优先2中优先3高优先
|
|
|
|
|
|
function mapPriorityLevel(priority) {
|
|
|
|
|
|
const levelMap = {
|
|
|
|
|
|
'low': '1', // 低优先
|
|
|
|
|
|
'medium': '2', // 中优先
|
|
|
|
|
|
'high': '3' // 高优先
|
|
|
|
|
|
};
|
|
|
|
|
|
return levelMap[priority] || '2';
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 关闭详情弹窗
|
|
|
|
|
|
const handleCloseDetailDialog = () => {
|
|
|
|
|
|
detailDialogVisible.value = false;
|
|
|
|
|
|
detailData.value = null;
|
2025-09-17 15:53:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 查看详情
|
2025-09-23 20:36:47 +08:00
|
|
|
|
const handleDetail = async (record) => {
|
2025-09-17 15:53:38 +08:00
|
|
|
|
console.log('查看详情:', record);
|
2025-09-23 20:36:47 +08:00
|
|
|
|
isDetailLoading.value = true;
|
|
|
|
|
|
try {
|
|
|
|
|
|
// 调用接口获取详情数据
|
|
|
|
|
|
const response = await baoxiuDetail(record.id);
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
detailData.value = response.data;
|
|
|
|
|
|
detailDialogVisible.value = true;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.error('获取详情失败:', response.msg);
|
|
|
|
|
|
// 可以添加错误提示
|
|
|
|
|
|
}
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error('获取详情出错:', error);
|
|
|
|
|
|
// 可以添加错误提示
|
|
|
|
|
|
} finally {
|
|
|
|
|
|
isDetailLoading.value = false;
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 状态文本映射 - 与图片需求保持一致
|
|
|
|
|
|
const getStatusText = (status) => {
|
|
|
|
|
|
const statusMap = {
|
|
|
|
|
|
'1': '待处理',
|
|
|
|
|
|
'2': '处理中',
|
|
|
|
|
|
'3': '已完成',
|
|
|
|
|
|
'4': '已延期'
|
|
|
|
|
|
};
|
|
|
|
|
|
return statusMap[status] || '未知状态';
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 状态样式映射 - 与其他页面保持一致
|
|
|
|
|
|
const getStatusClass = (status) => {
|
|
|
|
|
|
const classMap = {
|
|
|
|
|
|
'1': 'tag-pending',
|
|
|
|
|
|
'2': 'tag-executing',
|
|
|
|
|
|
'3': 'tag-completed',
|
|
|
|
|
|
'4': 'tag-delayed'
|
|
|
|
|
|
};
|
|
|
|
|
|
return classMap[status] || '';
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 优先级文本映射
|
|
|
|
|
|
const getPriorityText = (level) => {
|
|
|
|
|
|
const levelMap = {
|
|
|
|
|
|
'1': '高优先级',
|
|
|
|
|
|
'2': '中优先级',
|
|
|
|
|
|
'3': '低优先级'
|
|
|
|
|
|
};
|
|
|
|
|
|
return levelMap[level] || '未知优先级';
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 根据状态获取操作文本
|
|
|
|
|
|
const getActionText = (status) => {
|
|
|
|
|
|
const actionMap = {
|
|
|
|
|
|
'1': '处理',
|
|
|
|
|
|
'2': '跟进',
|
|
|
|
|
|
'3': '评价'
|
|
|
|
|
|
};
|
|
|
|
|
|
return actionMap[status] || '操作';
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 根据状态获取操作样式
|
|
|
|
|
|
const getActionClass = (status) => {
|
|
|
|
|
|
const classMap = {
|
|
|
|
|
|
'1': 'process-btn',
|
|
|
|
|
|
'2': 'follow-btn',
|
|
|
|
|
|
'3': 'evaluate-btn'
|
|
|
|
|
|
};
|
|
|
|
|
|
return classMap[status] || '';
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 格式化日期
|
|
|
|
|
|
const formatDate = (dateString) => {
|
|
|
|
|
|
if (!dateString) return '-';
|
|
|
|
|
|
try {
|
|
|
|
|
|
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');
|
|
|
|
|
|
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
return dateString;
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 分割图片URL
|
|
|
|
|
|
const splitImageUrls = (fileUrl) => {
|
|
|
|
|
|
if (!fileUrl) return [];
|
|
|
|
|
|
// 去掉首尾的空格并按逗号分割
|
|
|
|
|
|
const urls = fileUrl.trim().split(',');
|
|
|
|
|
|
return urls.filter((url) => url.trim());
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 处理图片加载错误
|
|
|
|
|
|
const handleImageError = (event, index) => {
|
|
|
|
|
|
event.target.src = '@/assets/images/error-image.png';
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 获取统计数据
|
|
|
|
|
|
const fetchStatsData = async () => {
|
|
|
|
|
|
statsLoading.value = true;
|
|
|
|
|
|
try {
|
|
|
|
|
|
const response = await baoxiuRecord({ projectId: 1 });
|
|
|
|
|
|
if (response.code === 0 || response.code === 200) {
|
|
|
|
|
|
// 确保数据完整性
|
|
|
|
|
|
const data = response.data || {};
|
|
|
|
|
|
statsData.value = {
|
|
|
|
|
|
byzbxs: data.byzbxs || '0',
|
|
|
|
|
|
bxsjszzzl: data.bxsjszzzl || '0%',
|
|
|
|
|
|
pjclsc: data.pjclsc || '0小时',
|
|
|
|
|
|
clscjszzzl: data.clscjszzzl || '0%',
|
|
|
|
|
|
dclbx: data.dclbx || '0',
|
|
|
|
|
|
wcl: data.wcl || '0%',
|
|
|
|
|
|
wcljszzzl: data.wcljszzzl || '0%'
|
|
|
|
|
|
};
|
|
|
|
|
|
} else {
|
|
|
|
|
|
console.error('获取统计数据失败:', response.msg);
|
|
|
|
|
|
}
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error('获取统计数据出错:', error);
|
|
|
|
|
|
} finally {
|
|
|
|
|
|
statsLoading.value = false;
|
|
|
|
|
|
}
|
2025-09-17 15:53:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 处理操作
|
|
|
|
|
|
const handleAction = (record) => {
|
2025-09-23 20:36:47 +08:00
|
|
|
|
console.log('执行操作:', getActionText(record.status), record);
|
|
|
|
|
|
// 根据不同状态执行不同操作
|
|
|
|
|
|
switch (record.status) {
|
|
|
|
|
|
case '1':
|
|
|
|
|
|
// 待执行状态 - 处理任务
|
|
|
|
|
|
handleProcessTask(record);
|
|
|
|
|
|
break;
|
|
|
|
|
|
case '2':
|
|
|
|
|
|
// 处理中状态 - 跟进任务
|
|
|
|
|
|
handleFollowTask(record);
|
|
|
|
|
|
break;
|
|
|
|
|
|
case '3':
|
|
|
|
|
|
// 已完成状态 - 评价任务
|
|
|
|
|
|
handleEvaluateTask(record);
|
|
|
|
|
|
break;
|
|
|
|
|
|
default:
|
|
|
|
|
|
console.log('未知操作');
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 处理任务 - 打开分配弹窗
|
|
|
|
|
|
const handleProcessTask = async (record) => {
|
|
|
|
|
|
console.log('分配任务:', record);
|
|
|
|
|
|
currentAssignTaskId.value = record.id;
|
|
|
|
|
|
selectedUserId.value = '';
|
|
|
|
|
|
|
|
|
|
|
|
// 打开弹窗时获取用户列表
|
|
|
|
|
|
await getUsersList();
|
|
|
|
|
|
if (usersList.value.length === 0) {
|
|
|
|
|
|
ElMessage.error('无可用维修人员，请先配置维修人员信息');
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
assignDialogVisible.value = true;
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 关闭分配弹窗
|
|
|
|
|
|
const handleCloseAssignDialog = () => {
|
|
|
|
|
|
assignDialogVisible.value = false;
|
|
|
|
|
|
selectedUserId.value = '';
|
|
|
|
|
|
currentAssignTaskId.value = '';
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 提交分配结果
|
|
|
|
|
|
const submitAssign = async () => {
|
|
|
|
|
|
try {
|
|
|
|
|
|
if (!currentAssignTaskId.value) {
|
|
|
|
|
|
ElMessage.warning('任务ID不存在');
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (!selectedUserId.value) {
|
|
|
|
|
|
ElMessage.warning('请选择维修人员');
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 1. 查找当前任务的完整数据
|
|
|
|
|
|
const originalTask = repairRecords.value.find((t) => t.id === currentAssignTaskId.value);
|
|
|
|
|
|
if (!originalTask) {
|
|
|
|
|
|
ElMessage.warning('未找到任务完整数据，请刷新重试');
|
|
|
|
|
|
console.error('未找到任务完整数据，任务ID：', currentAssignTaskId.value);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 2. 找到选中的维修人员
|
|
|
|
|
|
const selectedUser = usersList.value.find((u) => u.id === selectedUserId.value);
|
|
|
|
|
|
if (!selectedUser) {
|
|
|
|
|
|
ElMessage.error('未找到选中的维修人员');
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 3. 构造完整的更新参数（与baoxiuguanli保持一致）
|
|
|
|
|
|
const updateData = {
|
|
|
|
|
|
// 任务基础标识
|
|
|
|
|
|
id: currentAssignTaskId.value,
|
|
|
|
|
|
|
|
|
|
|
|
// 状态流转参数
|
|
|
|
|
|
status: '2', // 状态：2=处理中
|
|
|
|
|
|
statusText: '处理中',
|
|
|
|
|
|
|
|
|
|
|
|
// 复用原始任务数据中的所有必要字段
|
|
|
|
|
|
name: originalTask.name || '未命名',
|
|
|
|
|
|
type: mapRepairType(originalTask.type || 'all'),
|
|
|
|
|
|
level: mapPriorityLevel(originalTask.priority || 'medium'),
|
|
|
|
|
|
reportName: originalTask.reportName || '',
|
|
|
|
|
|
reportPhone: originalTask.reportPhone || '',
|
|
|
|
|
|
position: originalTask.position || '',
|
|
|
|
|
|
reportInfo: originalTask.reportInfo || '',
|
|
|
|
|
|
|
|
|
|
|
|
// 维修人员信息
|
|
|
|
|
|
sendPerson: selectedUser.id,
|
|
|
|
|
|
sendPersonName: selectedUser.name,
|
|
|
|
|
|
sendPersonVo: {
|
|
|
|
|
|
id: selectedUser.id,
|
|
|
|
|
|
userName: selectedUser.name
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// 其他必要参数
|
|
|
|
|
|
pageNum: currentPage.value,
|
|
|
|
|
|
pageSize: pageSize.value,
|
|
|
|
|
|
projectId: 1
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const response = await updatebaoxiu(updateData);
|
|
|
|
|
|
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
ElMessage.success('任务已分配');
|
|
|
|
|
|
assignDialogVisible.value = false;
|
|
|
|
|
|
selectedUserId.value = '';
|
|
|
|
|
|
currentAssignTaskId.value = '';
|
|
|
|
|
|
fetchRepairRecords(); // 刷新列表
|
|
|
|
|
|
} else {
|
|
|
|
|
|
const errorMsg = response.msg || '未知错误';
|
|
|
|
|
|
console.error(`分配任务失败: ${errorMsg}`);
|
|
|
|
|
|
ElMessage.error(`分配任务失败：${errorMsg}`);
|
|
|
|
|
|
}
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error('分配任务失败:', error);
|
|
|
|
|
|
ElMessage.error('分配失败，请重试');
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 跟进任务 - 打开弹窗
|
|
|
|
|
|
const handleFollowTask = (record) => {
|
|
|
|
|
|
console.log('跟进任务:', record);
|
|
|
|
|
|
currentFollowTaskId.value = record.id;
|
|
|
|
|
|
reportFinal.value = '';
|
|
|
|
|
|
followDialogVisible.value = true;
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 关闭跟进弹窗
|
|
|
|
|
|
const handleCloseFollowDialog = () => {
|
|
|
|
|
|
followDialogVisible.value = false;
|
|
|
|
|
|
reportFinal.value = '';
|
|
|
|
|
|
currentFollowTaskId.value = '';
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 提交跟进结果
|
|
|
|
|
|
const submitFollow = async () => {
|
|
|
|
|
|
try {
|
|
|
|
|
|
if (!currentFollowTaskId.value) {
|
|
|
|
|
|
ElMessage.warning('任务ID不存在');
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
if (!reportFinal.value.trim()) {
|
|
|
|
|
|
ElMessage.warning('请输入处理结果');
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 1. 查找当前任务的完整数据
|
|
|
|
|
|
const originalTask = repairRecords.value.find((t) => t.id === currentFollowTaskId.value);
|
|
|
|
|
|
if (!originalTask) {
|
|
|
|
|
|
ElMessage.warning('未找到任务完整数据，请刷新重试');
|
|
|
|
|
|
console.error('未找到任务完整数据，任务ID：', currentFollowTaskId.value);
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 2. 生成当前时间作为完成时间
|
|
|
|
|
|
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 reportFinishTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
|
|
|
|
|
|
|
|
|
|
|
// 3. 构造完整的更新参数（与baoxiuguanli保持一致）
|
|
|
|
|
|
const updateData = {
|
|
|
|
|
|
// ① 任务基础标识（必传）
|
|
|
|
|
|
id: currentFollowTaskId.value, // 任务ID（核心主键）
|
|
|
|
|
|
|
|
|
|
|
|
// ② 状态流转参数（必传）
|
|
|
|
|
|
status: '3', // 状态：3=已完成
|
|
|
|
|
|
statusText: '已完成', // 状态文本
|
|
|
|
|
|
reportFinal: reportFinal.value, // 处理结果
|
|
|
|
|
|
reportFinishTime: reportFinishTime, // 完成时间
|
|
|
|
|
|
completeTime: reportFinishTime, // 完成时间（向后兼容字段）
|
|
|
|
|
|
|
|
|
|
|
|
// ③ 复用原始任务数据中的所有必要字段
|
|
|
|
|
|
name: originalTask.name || '未命名', // 任务名称
|
|
|
|
|
|
type: mapRepairType(originalTask.type || 'all'), // 任务类型（映射为后端需要的格式）
|
|
|
|
|
|
level: mapPriorityLevel(originalTask.priority || 'medium'), // 优先级（映射为后端需要的格式）
|
|
|
|
|
|
reportName: originalTask.reportName || '', // 报修人姓名
|
|
|
|
|
|
reportPhone: originalTask.reportPhone || '', // 报修人电话
|
|
|
|
|
|
position: originalTask.position || '', // 故障位置
|
|
|
|
|
|
reportInfo: originalTask.reportInfo || '', // 报修详情
|
|
|
|
|
|
|
|
|
|
|
|
// ④ 维修人员信息（保留原有分配的维修人员）
|
|
|
|
|
|
sendPerson: originalTask.sendPersonVo?.id || '', // 维修人员ID
|
|
|
|
|
|
sendPersonName: originalTask.sendPersonVo?.userName || '', // 维修人员姓名
|
|
|
|
|
|
sendPersonVo: originalTask.sendPersonVo || {}, // 维修人员完整信息
|
|
|
|
|
|
|
|
|
|
|
|
// ⑤ 其他必要参数
|
|
|
|
|
|
pageNum: currentPage.value, // 分页参数
|
|
|
|
|
|
pageSize: pageSize.value,
|
|
|
|
|
|
projectId: 1 // 项目ID
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const response = await updatebaoxiu(updateData);
|
|
|
|
|
|
|
|
|
|
|
|
if (response.code === 200) {
|
|
|
|
|
|
ElMessage.success('处理结果已保存');
|
|
|
|
|
|
followDialogVisible.value = false;
|
|
|
|
|
|
reportFinal.value = '';
|
|
|
|
|
|
currentFollowTaskId.value = '';
|
|
|
|
|
|
fetchRepairRecords(); // 刷新列表
|
|
|
|
|
|
} else {
|
|
|
|
|
|
const errorMsg = response.msg || '未知错误';
|
|
|
|
|
|
console.error(`保存处理结果失败: ${errorMsg}`);
|
|
|
|
|
|
ElMessage.error(`保存处理结果失败：${errorMsg}`);
|
|
|
|
|
|
}
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error('保存处理结果失败:', error);
|
|
|
|
|
|
ElMessage.error('保存失败，请重试');
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 评价任务
|
|
|
|
|
|
const handleEvaluateTask = (record) => {
|
|
|
|
|
|
console.log('评价任务:', record);
|
|
|
|
|
|
// 评价任务的逻辑
|
2025-09-17 15:53:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 导航事件
|
|
|
|
|
|
const handleInspectionManagement1 = () => {
|
2025-09-28 18:54:52 +08:00
|
|
|
|
router.push('/znxj/bxgl/baoxiuguanli');
|
2025-09-17 15:53:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleInspectionManagement2 = () => {
|
2025-09-28 18:54:52 +08:00
|
|
|
|
router.push('/znxj/bxgl/baoxiujilu');
|
2025-09-17 15:53:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const handleInspection1 = () => {
|
2025-09-28 18:54:52 +08:00
|
|
|
|
router.push('/znxj/rili');
|
2025-09-17 15:53:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
const handleInspection2 = () => {
|
2025-09-28 18:54:52 +08:00
|
|
|
|
router.push('/znxj/xjgl/InspectionManagement');
|
2025-09-17 15:53:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
const handleInspection3 = () => {
|
2025-09-28 18:54:52 +08:00
|
|
|
|
router.push('/znxj/sygl/shiyanguanli');
|
2025-09-17 15:53:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
const handleInspection4 = () => {
|
2025-09-28 18:54:52 +08:00
|
|
|
|
router.push('/znxj/bxgl/baoxiuguanli');
|
2025-09-17 15:53:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
const handleInspection5 = () => {
|
2025-09-28 18:54:52 +08:00
|
|
|
|
router.push('/znxj/qxgl/qiangxiuguanli');
|
2025-09-17 15:53:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
const handleInspection6 = () => {
|
2025-09-28 18:54:52 +08:00
|
|
|
|
router.push('/znxj/gdgl/gongdanliebiao');
|
2025-09-17 15:53:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
const handleInspection7 = () => {
|
2025-09-28 18:54:52 +08:00
|
|
|
|
router.push('/znxj/ywzz/renyuanzhuangtai');
|
2025-09-17 15:53:38 +08:00
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
|
.inspection-tasks {
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
background-color: #f5f7fa;
|
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 选项卡样式 */
|
|
|
|
|
|
.tabs-wrapper {
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 筛选栏样式 */
|
|
|
|
|
|
.filter-bar {
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
padding: 16px 24px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.filter-container {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
gap: 16px;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.filter-item {
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.filter-bar .el-select,
|
|
|
|
|
|
.filter-bar .el-date-picker {
|
|
|
|
|
|
width: 180px;
|
|
|
|
|
|
height: 36px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.filter-bar .el-select .el-input__inner,
|
|
|
|
|
|
.filter-bar .el-date-picker .el-input__inner {
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
border-color: #dcdfe6;
|
|
|
|
|
|
transition: all 0.2s ease;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.filter-bar .el-select .el-input__inner:focus,
|
|
|
|
|
|
.filter-bar .el-date-picker .el-input__inner:focus {
|
|
|
|
|
|
border-color: #165dff;
|
|
|
|
|
|
box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.filter-actions {
|
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
gap: 12px;
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-09-23 20:36:47 +08:00
|
|
|
|
.search-btn,
|
2025-09-17 15:53:38 +08:00
|
|
|
|
.create-btn {
|
2025-09-23 20:36:47 +08:00
|
|
|
|
height: 36px;
|
|
|
|
|
|
border-radius: 4px;
|
2025-09-17 15:53:38 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 统计卡片样式 */
|
|
|
|
|
|
.statistics-container {
|
|
|
|
|
|
display: grid;
|
|
|
|
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
|
|
|
|
gap: 20px;
|
|
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stat-card {
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
transition: transform 0.3s ease;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stat-card:hover {
|
|
|
|
|
|
transform: translateY(-3px);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stat-info {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stat-label {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #86909c;
|
|
|
|
|
|
margin: 0 0 8px 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stat-value {
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
color: #1d2129;
|
|
|
|
|
|
margin: 0 0 4px 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stat-trend {
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stat-trend.up {
|
|
|
|
|
|
color: #00b42a;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stat-trend.up::before {
|
|
|
|
|
|
content: '↑';
|
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stat-trend.down {
|
|
|
|
|
|
color: #ff4d4f;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stat-trend.down::before {
|
|
|
|
|
|
content: '↓';
|
|
|
|
|
|
margin-right: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stat-trend.warning {
|
|
|
|
|
|
color: #fa8c16;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.stat-icon {
|
2025-09-18 19:56:24 +08:00
|
|
|
|
width: 55px;
|
|
|
|
|
|
height: 55px;
|
2025-09-17 15:53:38 +08:00
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
background-color: #e8f3ff;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-09-18 19:56:24 +08:00
|
|
|
|
.stat-image {
|
|
|
|
|
|
width: 45px;
|
|
|
|
|
|
height: 45px;
|
|
|
|
|
|
object-fit: contain;
|
2025-09-17 15:53:38 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 表格样式 */
|
|
|
|
|
|
.table-container {
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
padding: 16px;
|
|
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.record-table {
|
|
|
|
|
|
border-collapse: separate;
|
|
|
|
|
|
border-spacing: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.record-table th {
|
|
|
|
|
|
background-color: #f7f8fa;
|
|
|
|
|
|
color: #4e5969;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.record-table td {
|
|
|
|
|
|
color: #1d2129;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2025-09-23 20:36:47 +08:00
|
|
|
|
/* 状态标签样式 - 与其他页面保持一致 */
|
2025-09-17 15:53:38 +08:00
|
|
|
|
.status-tag {
|
2025-09-23 20:36:47 +08:00
|
|
|
|
padding: 4px 10px;
|
|
|
|
|
|
border-radius: 6px;
|
2025-09-17 15:53:38 +08:00
|
|
|
|
font-size: 12px;
|
2025-09-23 20:36:47 +08:00
|
|
|
|
font-weight: 500;
|
2025-09-17 15:53:38 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2025-09-23 20:36:47 +08:00
|
|
|
|
/* 标签状态类 */
|
|
|
|
|
|
.tag-pending {
|
|
|
|
|
|
background-color: #e6f7ff;
|
|
|
|
|
|
color: #1677ff;
|
|
|
|
|
|
border: 1px solid #91d5ff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tag-executing {
|
2025-09-17 15:53:38 +08:00
|
|
|
|
background-color: #fffbe6;
|
2025-09-23 20:36:47 +08:00
|
|
|
|
color: #fa8c16;
|
|
|
|
|
|
border: 1px solid #ffe58f;
|
2025-09-17 15:53:38 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2025-09-23 20:36:47 +08:00
|
|
|
|
.tag-completed {
|
|
|
|
|
|
background-color: #f6ffed;
|
2025-09-17 15:53:38 +08:00
|
|
|
|
color: #52c41a;
|
2025-09-23 20:36:47 +08:00
|
|
|
|
border: 1px solid #b7eb8f;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tag-delayed {
|
|
|
|
|
|
background-color: #fff2f0;
|
|
|
|
|
|
color: #ff4d4f;
|
|
|
|
|
|
border: 1px solid #ffccc7;
|
2025-09-17 15:53:38 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.detail-btn {
|
|
|
|
|
|
color: #165dff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.follow-btn {
|
|
|
|
|
|
color: #fa8c16;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.evaluate-btn {
|
|
|
|
|
|
color: #52c41a;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 分页区域样式 */
|
|
|
|
|
|
.pagination-section {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.pagination-controls .el-pagination {
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.pagination-controls .el-pagination button,
|
|
|
|
|
|
.pagination-controls .el-pagination .el-pager li {
|
|
|
|
|
|
min-width: 36px;
|
|
|
|
|
|
height: 36px;
|
|
|
|
|
|
line-height: 36px;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.pagination-controls .el-pagination .el-pager li.active {
|
|
|
|
|
|
background-color: #165dff;
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 导航栏样式 */
|
|
|
|
|
|
.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;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 响应式设计 */
|
|
|
|
|
|
@media (max-width: 1200px) {
|
|
|
|
|
|
.statistics-container {
|
|
|
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
|
|
.inspection-tasks {
|
|
|
|
|
|
padding: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.filter-container {
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: stretch;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.filter-actions {
|
|
|
|
|
|
margin-left: 0;
|
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.filter-bar .el-select,
|
|
|
|
|
|
.filter-bar .el-date-picker {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.statistics-container {
|
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.table-container {
|
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-09-25 20:03:08 +08:00
|
|
|
|
|
|
|
|
|
|
/* 详情弹窗样式 */
|
2025-09-23 20:36:47 +08:00
|
|
|
|
.custom-experiment-dialog .el-dialog__body {
|
|
|
|
|
|
max-height: 60vh;
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
padding: 24px;
|
|
|
|
|
|
}
|
2025-09-25 20:03:08 +08:00
|
|
|
|
|
|
|
|
|
|
/* 详情卡片样式 */
|
|
|
|
|
|
.detail-card {
|
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
border: 1px solid #f0f2f5;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.card-title {
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
color: #1d2129;
|
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
padding-bottom: 12px;
|
|
|
|
|
|
border-bottom: 2px solid #409eff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.card-content {
|
|
|
|
|
|
padding: 0 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 信息行和信息项样式 */
|
|
|
|
|
|
.info-row {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.info-item {
|
|
|
|
|
|
flex: 0 0 50%;
|
|
|
|
|
|
margin-bottom: 12px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.info-item.full-width {
|
|
|
|
|
|
flex: 0 0 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.info-label {
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
color: #86909c;
|
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
|
min-width: 80px;
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.info-value {
|
|
|
|
|
|
color: #4e5969;
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
word-break: break-all;
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
}
|
2025-09-23 20:36:47 +08:00
|
|
|
|
/* 详情弹窗样式 */
|
|
|
|
|
|
.custom-experiment-dialog {
|
|
|
|
|
|
.detail-content {
|
|
|
|
|
|
max-height: 60vh;
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
|
padding-right: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.detail-section {
|
|
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.section-title {
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
color: #303133;
|
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
padding-bottom: 8px;
|
|
|
|
|
|
border-bottom: 1px solid #f0f2f5;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.detail-grid {
|
|
|
|
|
|
display: grid;
|
|
|
|
|
|
grid-template-columns: repeat(2, 1fr);
|
|
|
|
|
|
gap: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.detail-item {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.detail-label {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #909399;
|
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.detail-value {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #303133;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.detail-textarea {
|
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.detail-text {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #303133;
|
|
|
|
|
|
line-height: 1.6;
|
|
|
|
|
|
word-wrap: break-word;
|
|
|
|
|
|
white-space: pre-wrap;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 多图片展示容器样式 */
|
|
|
|
|
|
.images-container {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
gap: 16px;
|
|
|
|
|
|
margin-top: 12px;
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
background-color: #f9f9f9;
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 单个图片项样式 */
|
|
|
|
|
|
.image-item {
|
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
|
width: 200px; /* 固定宽度 */
|
|
|
|
|
|
height: 160px; /* 固定高度 */
|
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
|
|
|
|
transition: transform 0.3s ease;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.image-item:hover {
|
|
|
|
|
|
transform: scale(1.03);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 图片样式 */
|
|
|
|
|
|
.detail-image {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
object-fit: cover; /* 保持比例填充容器 */
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 图片加载失败样式 */
|
|
|
|
|
|
.detail-image[src=''] {
|
|
|
|
|
|
background-color: #f0f0f0;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
color: #999;
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.no-info {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
color: #909399;
|
|
|
|
|
|
padding: 40px 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
|
|
.custom-experiment-dialog {
|
|
|
|
|
|
width: 90% !important;
|
|
|
|
|
|
|
|
|
|
|
|
.detail-grid {
|
|
|
|
|
|
grid-template-columns: 1fr;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.info-item {
|
|
|
|
|
|
flex: 0 0 100%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.image-item {
|
|
|
|
|
|
width: 140px;
|
|
|
|
|
|
height: 112px;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2025-09-17 15:53:38 +08:00
|
|
|
|
</style>
|
