8 changed files with 1267 additions and 27 deletions
Split View
Diff Options
-
+8 -0src/api/inspectionDataManage/inspectionReporter.js
-
+14 -3src/lang/index.js
-
+1 -0src/layout/components/Sidebar/Item.vue
-
+21 -0src/router/index.js
-
+2 -1src/store/modules/app.js
-
+486 -0src/views/cards/patrolReport/InspectionReporter.vue
-
+696 -0src/views/cards/patrolReport/patrolReportDetail.vue
-
+39 -23src/views/cards/taskSummary/inspectionTask.vue
+ 8
- 0
src/api/inspectionDataManage/inspectionReporter.js
View File
+ 14
- 3
src/lang/index.js
View File
+ 1
- 0
src/layout/components/Sidebar/Item.vue
View File
+ 21
- 0
src/router/index.js
View File
+ 2
- 1
src/store/modules/app.js
View File
+ 486
- 0
src/views/cards/patrolReport/InspectionReporter.vue
View File
| @ -0,0 +1,486 @@ | |||
| <template> | |||
| <CardBox | |||
| class="card-page" | |||
| :showTitle="false" | |||
| > | |||
| <div class="page-container"> | |||
| <el-form | |||
| :model="queryParams" | |||
| ref="queryForm" | |||
| :inline="true" | |||
| label-width="90px" | |||
| > | |||
| <el-form-item label="巡视任务" prop="inspectionTaskName"> | |||
| <el-input | |||
| v-model="queryParams.inspectionTaskName" | |||
| placeholder="请输入巡视任务" | |||
| clearable | |||
| @keyup.enter.native="handleQuery" | |||
| /> | |||
| </el-form-item> | |||
| <el-form-item label="审核时间"> | |||
| <el-date-picker | |||
| v-model="dateRange" | |||
| size="small" | |||
| style="width: 240px" | |||
| value-format="yyyy-MM-dd" | |||
| type="daterange" | |||
| :picker-options="dateRangePickerOptions" | |||
| range-separator="-" | |||
| start-placeholder="开始日期" | |||
| end-placeholder="结束日期" | |||
| :clearable="true" | |||
| popper-class="card-date-editor" | |||
| ></el-date-picker> | |||
| </el-form-item> | |||
| <el-form-item> | |||
| <el-button | |||
| class="task-toolbar-btn" | |||
| type="primary" | |||
| icon="el-icon-search" | |||
| size="mini" | |||
| @click="handleQuery" | |||
| >搜索</el-button | |||
| > | |||
| <el-button | |||
| class="task-toolbar-btn" | |||
| type="primary" | |||
| icon="el-icon-refresh" | |||
| size="mini" | |||
| @click="resetQuery" | |||
| >重置</el-button | |||
| > | |||
| </el-form-item> | |||
| </el-form> | |||
| <div class="table-card" ref="tableCardRef"> | |||
| <el-table | |||
| class="card-table" | |||
| v-loading="loading" | |||
| :data="dataList" | |||
| :height="tableHeight" | |||
| border | |||
| stripe | |||
| > | |||
| <el-table-column | |||
| label="序号" | |||
| type="index" | |||
| width="50" | |||
| align="center" | |||
| :index="table_index" | |||
| /> | |||
| <el-table-column | |||
| label="巡视任务" | |||
| align="left" | |||
| prop="inspectionTaskName" | |||
| width="700" | |||
| header-align="center" | |||
| /> | |||
| <el-table-column | |||
| label="巡视开始时间" | |||
| align="center" | |||
| prop="inspectionStartTime" | |||
| /> | |||
| <el-table-column | |||
| label="巡视结束时间" | |||
| align="center" | |||
| prop="inspectionEndTime" | |||
| /> | |||
| <el-table-column label="审核人" align="center" prop="checkPerson" /> | |||
| <el-table-column label="审核时间" align="center" prop="checkTime" /> | |||
| <el-table-column label="操作" align="center"> | |||
| <template slot-scope="scope"> | |||
| <el-button | |||
| size="mini" | |||
| type="primary" | |||
| @click="lookReporter(scope.row)" | |||
| >查看</el-button | |||
| > | |||
| <el-button | |||
| size="mini" | |||
| type="primary" | |||
| @click="ftpImageViewUrl(scope.row, 'xls')" | |||
| :disabled="isLock" | |||
| >导出</el-button | |||
| > | |||
| </template> | |||
| </el-table-column> | |||
| </el-table> | |||
| <CardPagination | |||
| ref="paginationRef" | |||
| v-show="total > 0" | |||
| :total="total" | |||
| :page.sync="queryParams.pageNum" | |||
| :limit.sync="queryParams.pageSize" | |||
| @pagination="getList" | |||
| /> | |||
| </div> | |||
| </div> | |||
| </CardBox> | |||
| </template> | |||
| <script> | |||
| import { listPatrolReport } from "@/api/inspectionDataManage/inspectionReporter"; | |||
| import CardPagination from "../components/CardPagination/index.vue"; | |||
| import debounce from "lodash.debounce"; | |||
| import CardBox from "../components/cardBox.vue"; | |||
| import { mapState } from "vuex"; | |||
| export default { | |||
| name: "InspectionReporter", | |||
| dicts: ["patrol_type", "device_type"], | |||
| components: { CardPagination, CardBox }, | |||
| data() { | |||
| return { | |||
| isLock: false, | |||
| // 遮罩层 | |||
| loading: true, | |||
| // 总条数 | |||
| total: 0, | |||
| // 数据 | |||
| dataList: [], | |||
| //时间范围 | |||
| dateRange: [], | |||
| dateRangePickerOptions: { | |||
| disabledDate(selectDate) { | |||
| return new Date().getTime() < selectDate.getTime(); | |||
| }, | |||
| }, | |||
| // 查询参数 | |||
| queryParams: { | |||
| pageNum: 1, | |||
| pageSize: 20, | |||
| inspectionTaskName: null, | |||
| areaName: null, | |||
| areaType: null, | |||
| deviceType: null, | |||
| type: null, | |||
| }, | |||
| // table 高度 | |||
| tableHeight: null, | |||
| }; | |||
| }, | |||
| computed: { | |||
| ...mapState("app", ["systemParams"]), | |||
| }, | |||
| async created() { | |||
| // 防抖 | |||
| this.setTableHeight = debounce(this.setTableHeight, 300); | |||
| window.addEventListener("resize", this.setTableHeight); | |||
| // 先加载系统参数 | |||
| if (!this.systemParams || Object.keys(this.systemParams).length === 0) { | |||
| try { | |||
| await this.$store.dispatch("app/getSystemParams"); | |||
| console.log("系统参数加载成功:", this.systemParams); | |||
| console.log("FTP地址:", this.systemParams?.ftpViewAddress); | |||
| } catch (error) { | |||
| console.error("加载系统参数失败:", error); | |||
| this.$modal.msgWarning("加载系统配置失败，请刷新页面重试"); | |||
| } | |||
| } | |||
| // 从 sessionStorage 恢复状态 | |||
| const savedState = sessionStorage.getItem("inspectionReporterState"); | |||
| if (savedState && this.$route.query.from === "back") { | |||
| try { | |||
| const state = JSON.parse(savedState); | |||
| if (state.queryParams) { | |||
| this.queryParams = { ...this.queryParams, ...state.queryParams }; | |||
| } | |||
| if (state.dateRange && state.dateRange.length === 2) { | |||
| this.dateRange = state.dateRange; | |||
| } | |||
| // 清除 sessionStorage，避免重复使用 | |||
| sessionStorage.removeItem("inspectionReporterState"); | |||
| } catch (e) { | |||
| console.error("恢复状态失败", e); | |||
| } | |||
| } | |||
| // 加载列表数据 | |||
| await this.getList(); | |||
| }, | |||
| mounted() { | |||
| this.setTableHeight(); | |||
| }, | |||
| destroyed() { | |||
| if (this.setTableHeight.cancel) { | |||
| this.setTableHeight.cancel(); | |||
| } | |||
| window.removeEventListener("resize", this.setTableHeight); | |||
| }, | |||
| methods: { | |||
| table_index(index) { | |||
| return ( | |||
| (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1 | |||
| ); | |||
| }, | |||
| ftpImageViewUrl(row, suffix) { | |||
| // 添加安全检查 | |||
| if (!this.systemParams || !this.systemParams.ftpViewAddress) { | |||
| this.$modal.msgWarning("系统配置未加载，请稍后重试"); | |||
| console.error("systemParams为空:", this.systemParams); | |||
| return; | |||
| } | |||
| console.log("使用FTP地址:", this.systemParams.ftpViewAddress); | |||
| if (row.filePath) { | |||
| var fileName = row.filePath.split(".")[0]; | |||
| const url = this.systemParams.ftpViewAddress + fileName + "." + suffix; | |||
| console.log("导出URL:", url); | |||
| const a = document.createElement("a"); | |||
| a.setAttribute("href", url); | |||
| a.setAttribute("target", "_blank"); | |||
| a.click(); | |||
| } else { | |||
| this.isLock = true; | |||
| this.getList(() => { | |||
| var it = this.dataList.find((item) => { | |||
| return item.lineId == row.lineId; | |||
| }); | |||
| if (it && it.filePath) { | |||
| const url = this.systemParams.ftpViewAddress + it.filePath; | |||
| console.log("导出URL:", url); | |||
| const a = document.createElement("a"); | |||
| a.setAttribute("href", url); | |||
| a.setAttribute("target", "_blank"); | |||
| a.click(); | |||
| this.isLock = false; | |||
| } else { | |||
| this.isLock = true; | |||
| this.$modal.msgWarning("巡视报告正在生成，请稍后"); | |||
| } | |||
| }); | |||
| } | |||
| }, | |||
| setTableHeight() { | |||
| if (this.$refs.tableCardRef) { | |||
| const pagination = this.$refs.paginationRef; | |||
| const paginationHeight = | |||
| pagination && pagination.$el ? pagination.$el.offsetHeight : 0; | |||
| this.tableHeight = Math.max( | |||
| this.$refs.tableCardRef.clientHeight - paginationHeight, | |||
| 160 | |||
| ); | |||
| } | |||
| }, | |||
| /** 获取数据列表 */ | |||
| getList(callback) { | |||
| this.loading = true; | |||
| const params = {}; | |||
| for (const key in this.queryParams) { | |||
| if (Object.hasOwnProperty.call(this.queryParams, key)) { | |||
| const element = this.queryParams[key]; | |||
| if (element) { | |||
| params[key] = element; | |||
| } | |||
| } | |||
| } | |||
| // 拍摄时间筛选范围 | |||
| if (this.dateRange && this.dateRange.length === 2) { | |||
| params.cycleStartTime = this.dateRange[0]; | |||
| params.cycleEndTime = this.dateRange[1]; | |||
| } | |||
| listPatrolReport(params) | |||
| .then((response) => { | |||
| this.dataList = response.rows; | |||
| this.total = response.total; | |||
| this.loading = false; | |||
| this.$nextTick(this.setTableHeight); | |||
| if (callback) { | |||
| callback(); | |||
| } | |||
| }) | |||
| .catch((error) => { | |||
| this.loading = false; | |||
| console.error("获取列表失败:", error); | |||
| // this.$modal.msgError("获取列表失败"); | |||
| }); | |||
| }, | |||
| /** 搜索按钮操作 */ | |||
| handleQuery() { | |||
| this.queryParams.pageNum = 1; | |||
| this.getList(); | |||
| }, | |||
| /** 重置按钮操作 */ | |||
| resetQuery() { | |||
| this.queryParams = { | |||
| pageNum: 1, | |||
| pageSize: 20, | |||
| inspectionTaskName: null, | |||
| areaName: null, | |||
| areaType: null, | |||
| deviceType: null, | |||
| type: null, | |||
| }; | |||
| this.dateRange = []; | |||
| this.resetForm("queryForm"); | |||
| this.handleQuery(); | |||
| }, | |||
| // 查看报告 | |||
| lookReporter(info) { | |||
| // 保存当前页面的状态到 sessionStorage | |||
| const currentState = { | |||
| queryParams: { ...this.queryParams }, | |||
| dateRange: | |||
| this.dateRange && this.dateRange.length > 0 | |||
| ? [...this.dateRange] | |||
| : [], | |||
| }; | |||
| sessionStorage.setItem( | |||
| "inspectionReporterState", | |||
| JSON.stringify(currentState) | |||
| ); | |||
| sessionStorage.setItem("reportLineId", JSON.stringify(info.lineId)); | |||
| sessionStorage.setItem("reportType", JSON.stringify(info.filter)); | |||
| this.$router.push({ | |||
| name: "patrolReportDetail", | |||
| query: { | |||
| lineId: info.lineId, | |||
| filter: info.filter, | |||
| reportType: info.filter, | |||
| fromPage: "InspectionReporter", | |||
| fromComponent: "InspectionReporter", | |||
| }, | |||
| }); | |||
| }, | |||
| // 重置表单 | |||
| resetForm(formName) { | |||
| if (this.$refs[formName]) { | |||
| this.$refs[formName].resetFields(); | |||
| } | |||
| }, | |||
| }, | |||
| }; | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .page-container { | |||
| height: 100%; | |||
| display: flex; | |||
| flex-direction: column; | |||
| min-height: 0; | |||
| overflow: hidden; | |||
| } | |||
| .card-page { | |||
| height: 100%; | |||
| min-height: 0; | |||
| overflow: hidden; | |||
| } | |||
| .query-card { | |||
| margin-bottom: 15px; | |||
| ::v-deep .el-form-item { | |||
| margin-bottom: 0; | |||
| } | |||
| } | |||
| .table-card { | |||
| flex: 1; | |||
| height: 0; | |||
| min-height: 0; | |||
| overflow: hidden; | |||
| ::v-deep .el-card__body { | |||
| height: 100%; | |||
| } | |||
| } | |||
| .card-page ::v-deep .card-table, | |||
| .card-page ::v-deep .el-table { | |||
| width: 100% !important; | |||
| background: transparent !important; | |||
| color: #000000; | |||
| border-color: rgba(64, 146, 255, 0.95) !important; | |||
| } | |||
| .card-page ::v-deep .el-table::before, | |||
| .card-page ::v-deep .el-table::after, | |||
| .card-page ::v-deep .el-table--border::after, | |||
| .card-page ::v-deep .el-table--group::after { | |||
| background-color: rgba(64, 146, 255, 0.95) !important; | |||
| } | |||
| .card-page ::v-deep .el-table__header-wrapper, | |||
| .card-page ::v-deep .el-table__fixed-header-wrapper, | |||
| .card-page ::v-deep .el-table__body-wrapper, | |||
| .card-page ::v-deep .el-table__fixed, | |||
| .card-page ::v-deep .el-table__fixed-right, | |||
| .card-page ::v-deep .el-table__empty-block { | |||
| background: transparent !important; | |||
| background-color: transparent !important; | |||
| } | |||
| .card-page ::v-deep .el-table th.el-table__cell { | |||
| background: #06347f !important; | |||
| border-color: rgba(64, 146, 255, 0.95) !important; | |||
| } | |||
| .card-page ::v-deep .el-table th.el-table__cell .cell { | |||
| color: #ffffff !important; | |||
| } | |||
| .card-page ::v-deep .el-table td.el-table__cell { | |||
| background: transparent !important; | |||
| border-color: #c7d7f4 !important; | |||
| color: #000000 !important; | |||
| } | |||
| .card-page ::v-deep .el-table td.el-table__cell .cell { | |||
| color: #000000 !important; | |||
| font-weight: 500; | |||
| } | |||
| .card-page ::v-deep .el-table__row { | |||
| background: #e4edfc !important; | |||
| } | |||
| .card-page ::v-deep .el-table__row--striped td.el-table__cell { | |||
| background: #d7e4f8 !important; | |||
| } | |||
| .card-page ::v-deep .el-table__body tr:hover > td.el-table__cell { | |||
| background: #c5d9f6 !important; | |||
| } | |||
| .card-page ::v-deep .el-table__body-wrapper { | |||
| overflow-y: auto; | |||
| overflow-x: hidden; | |||
| scrollbar-width: none; | |||
| -ms-overflow-style: none; | |||
| } | |||
| .card-page ::v-deep .el-table__body-wrapper::-webkit-scrollbar { | |||
| width: 0; | |||
| height: 0; | |||
| display: none; | |||
| } | |||
| .task-toolbar-btn, | |||
| .card-page ::v-deep .el-table .el-button--primary { | |||
| border: 1px solid transparent !important; | |||
| background: | |||
| linear-gradient(#01016b, #01016b) padding-box, | |||
| linear-gradient(135deg, #3988ff, #0351c6) border-box !important; | |||
| color: #43c0ff !important; | |||
| } | |||
| .task-toolbar-btn:hover, | |||
| .task-toolbar-btn:focus, | |||
| .card-page ::v-deep .el-table .el-button--primary:hover, | |||
| .card-page ::v-deep .el-table .el-button--primary:focus { | |||
| border-color: transparent !important; | |||
| color: #43c0ff !important; | |||
| opacity: 0.9; | |||
| } | |||
| </style> | |||
+ 696
- 0
src/views/cards/patrolReport/patrolReportDetail.vue
View File
| @ -0,0 +1,696 @@ | |||
| <template> | |||
| <CardBox | |||
| class="card-page report-bg" | |||
| :showTitle="false" | |||
| > | |||
| <div class="report-toolbar"> | |||
| <el-button | |||
| class="report-back-btn" | |||
| type="primary" | |||
| icon="el-icon-back" | |||
| size="mini" | |||
| @click="backPage" | |||
| >返回</el-button> | |||
| </div> | |||
| <el-table | |||
| class="report-table" | |||
| border | |||
| :data="pointInfo.headerInfoList" | |||
| :show-header="false" | |||
| :span-method="headerSpan" | |||
| > | |||
| <el-table-column prop="title1" label=""> | |||
| <template slot-scope="scope"> | |||
| <span class="header-title">{{ scope.row.title1 }}</span> | |||
| </template> | |||
| </el-table-column> | |||
| <el-table-column prop="info1" label=""> </el-table-column> | |||
| <el-table-column prop="title2" label=""> | |||
| <template slot-scope="scope"> | |||
| <span class="header-title">{{ scope.row.title2 }}</span> | |||
| </template> | |||
| </el-table-column> | |||
| <el-table-column prop="info2" label=""> </el-table-column> | |||
| </el-table> | |||
| <!-- 缺陷点位汇总 - 按任务分组 --> | |||
| <div | |||
| style="margin-top: 10px" | |||
| v-if=" | |||
| pointInfo.errorPointsByTask && | |||
| Object.keys(pointInfo.errorPointsByTask).length > 0 | |||
| " | |||
| > | |||
| <div class="point-info-title">缺陷结果数量汇总</div> | |||
| <div | |||
| v-for="(taskPoints, taskName) in pointInfo.errorPointsByTask" | |||
| :key="'error_' + taskName" | |||
| class="task-group" | |||
| > | |||
| <div | |||
| class="task-group-title" | |||
| v-if="shouldShowTaskName(taskName, 'error')" | |||
| > | |||
| 任务名称：{{ taskName }} | |||
| </div> | |||
| <el-table class="report-table" border stripe :data="getPaginatedData('error', taskName)"> | |||
| <el-table-column | |||
| prop="code" | |||
| label="编号" | |||
| align="center" | |||
| width="80" | |||
| ></el-table-column> | |||
| <el-table-column | |||
| prop="area" | |||
| label="区域" | |||
| align="center" | |||
| ></el-table-column> | |||
| <el-table-column | |||
| prop="pointName" | |||
| label="点位" | |||
| align="center" | |||
| ></el-table-column> | |||
| <el-table-column | |||
| prop="inspectionResults" | |||
| label="巡视结果" | |||
| align="center" | |||
| ></el-table-column> | |||
| <el-table-column prop="inspectionImg" label="巡视图像" align="center"> | |||
| <template slot-scope="scope"> | |||
| <div class="inspection-img-wrap"> | |||
| <!-- 直接使用原来的 inspectionImg，让 AsyncImage 自己处理 --> | |||
| <AsyncImage | |||
| class="inspection-img" | |||
| fit="contain" | |||
| :src="scope.row.inspectionImg" | |||
| @click="lookImageDetail(scope.row.inspectionImg)" | |||
| ></AsyncImage> | |||
| </div> | |||
| </template> | |||
| </el-table-column> | |||
| </el-table> | |||
| <!-- 分页组件 --> | |||
| <div | |||
| class="pagination-wrap" | |||
| v-if="getTotalCount('error', taskName) > pageSize" | |||
| > | |||
| <el-pagination | |||
| background | |||
| small | |||
| layout="total, prev, pager, next" | |||
| :total="getTotalCount('error', taskName)" | |||
| :page-size="pageSize" | |||
| :current-page.sync="currentPageMap[`error_${taskName}`]" | |||
| @current-change="() => $forceUpdate()" | |||
| > | |||
| </el-pagination> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 正常点位汇总 - 按任务分组 --> | |||
| <div | |||
| style="margin-top: 10px" | |||
| v-if=" | |||
| pointInfo.normalPointsByTask && | |||
| Object.keys(pointInfo.normalPointsByTask).length > 0 | |||
| " | |||
| > | |||
| <div class="point-info-title">正常结果数量汇总</div> | |||
| <div | |||
| v-for="(taskPoints, taskName) in pointInfo.normalPointsByTask" | |||
| :key="'normal_' + taskName" | |||
| class="task-group" | |||
| > | |||
| <div | |||
| class="task-group-title" | |||
| v-if="shouldShowTaskName(taskName, 'normal')" | |||
| > | |||
| 任务名称：{{ taskName }} | |||
| </div> | |||
| <el-table class="report-table" border stripe :data="getPaginatedData('normal', taskName)"> | |||
| <el-table-column | |||
| prop="code" | |||
| label="编号" | |||
| align="center" | |||
| width="80" | |||
| ></el-table-column> | |||
| <el-table-column | |||
| prop="area" | |||
| label="区域" | |||
| align="center" | |||
| ></el-table-column> | |||
| <el-table-column | |||
| prop="pointName" | |||
| label="点位" | |||
| align="center" | |||
| ></el-table-column> | |||
| <el-table-column | |||
| prop="inspectionResults" | |||
| label="巡视结果" | |||
| align="center" | |||
| ></el-table-column> | |||
| <el-table-column prop="inspectionImg" label="巡视图像" align="center"> | |||
| <template slot-scope="scope"> | |||
| <div class="inspection-img-wrap"> | |||
| <!-- 直接使用原来的 inspectionImg，让 AsyncImage 自己处理 --> | |||
| <AsyncImage | |||
| class="inspection-img" | |||
| fit="contain" | |||
| :src="scope.row.inspectionImg" | |||
| @click="lookImageDetail(scope.row.inspectionImg)" | |||
| ></AsyncImage> | |||
| </div> | |||
| </template> | |||
| </el-table-column> | |||
| </el-table> | |||
| <!-- 分页组件 --> | |||
| <div | |||
| class="pagination-wrap" | |||
| v-if="getTotalCount('normal', taskName) > pageSize" | |||
| > | |||
| <el-pagination | |||
| background | |||
| small | |||
| layout="total, prev, pager, next" | |||
| :total="getTotalCount('normal', taskName)" | |||
| :page-size="pageSize" | |||
| :current-page.sync="currentPageMap[`normal_${taskName}`]" | |||
| @current-change="() => $forceUpdate()" | |||
| > | |||
| </el-pagination> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <el-dialog | |||
| title="图片预览" | |||
| :visible.sync="showPreviewImages" | |||
| :close-on-click-modal="false" | |||
| :close-on-press-escape="false" | |||
| :destroy-on-close="true" | |||
| custom-class="card-dialog card-page" | |||
| width="70%" | |||
| append-to-body | |||
| > | |||
| <ImagePreview | |||
| v-if="showPreviewImages" | |||
| :imageUrls="showImgesUrls" | |||
| :selectImgPosition="previewImagePos" | |||
| :showTemperatureTool="false" | |||
| /> | |||
| </el-dialog> | |||
| </CardBox> | |||
| </template> | |||
| <script> | |||
| import ImagePreview from "@/views/cards/components/ImagePreview/index.vue"; | |||
| import AsyncImage from "@/components/AsyncImage/index.vue"; | |||
| import { getPatrolReportShaoxing } from "@/api/inspectionDataManage/inspectionReporter"; | |||
| import CardBox from "../components/cardBox.vue"; | |||
| export default { | |||
| name: "PatrolReportDetail", | |||
| components: { AsyncImage, ImagePreview, CardBox }, | |||
| data() { | |||
| return { | |||
| lineId: null, | |||
| reportType: 0, | |||
| showPreviewImages: false, | |||
| showImgesUrls: [], | |||
| previewImagePos: 0, | |||
| reportInfo: {}, | |||
| pointInfo: {}, | |||
| code: "", | |||
| returnState: {}, | |||
| urlFrom: "", | |||
| // 分页配置 | |||
| pageSize: 20, | |||
| currentPageMap: {}, | |||
| // 原始数据缓存 | |||
| originalDataCache: { | |||
| error: {}, | |||
| normal: {}, | |||
| }, | |||
| }; | |||
| }, | |||
| created() { | |||
| this.lineId = this.$route.query.lineId; | |||
| this.urlFrom = | |||
| this.$route.query.fromComponent || this.$route.query.fromPage; | |||
| this.reportType = | |||
| this.$route.query.reportType ?? this.$route.query.filter; | |||
| if (!this.lineId) { | |||
| this.lineId = JSON.parse(sessionStorage.getItem("reportLineId")); | |||
| } | |||
| if ( | |||
| this.reportType === undefined || | |||
| this.reportType === null || | |||
| this.reportType === "" | |||
| ) { | |||
| const savedReportType = sessionStorage.getItem("reportType"); | |||
| this.reportType = savedReportType ? JSON.parse(savedReportType) : 0; | |||
| } | |||
| this.getDetail(); | |||
| if ( | |||
| this.urlFrom === "InspectionTask" || | |||
| this.urlFrom === "inspectionTask" | |||
| ) { | |||
| const savedState = sessionStorage.getItem("inspectionTaskState"); | |||
| if (savedState) { | |||
| console.log("已保存巡检任务页面状态，返回时会自动恢复"); | |||
| } | |||
| } | |||
| }, | |||
| methods: { | |||
| getDetail() { | |||
| if (!this.lineId) { | |||
| return; | |||
| } | |||
| let url = ""; | |||
| if (this.urlFrom == "InspectionTask") { | |||
| url = `taskStatus`; | |||
| } else { | |||
| url = `report`; | |||
| } | |||
| getPatrolReportShaoxing(url, this.lineId, this.reportType || 0).then((res) => { | |||
| // Some deployments return detail as a JSON string; normalize it before grouping. | |||
| const report = res && res.data ? res.data : res; | |||
| if (report && typeof report.detail === "string") { | |||
| try { | |||
| report.detail = JSON.parse(report.detail); | |||
| } catch (error) { | |||
| console.warn("巡视报告详情解析失败", error); | |||
| } | |||
| } | |||
| this.reportInfo = report || {}; | |||
| this.pointInfo = this.getPointInfo(); | |||
| this.code = res.code; | |||
| // 初始化分页 | |||
| this.initPagination(); | |||
| }).catch((error) => { | |||
| this.reportInfo = {}; | |||
| this.pointInfo = {}; | |||
| console.error("获取巡视报告详情失败", error); | |||
| this.$modal && this.$modal.msgError("巡视报告详情加载失败"); | |||
| }); | |||
| }, | |||
| getPointInfo() { | |||
| const headerInfoList = [ | |||
| { | |||
| title1: "换流站", | |||
| info1: this.reportInfo.stationName, | |||
| title2: "", | |||
| info2: "", | |||
| }, | |||
| { | |||
| title1: "审核人", | |||
| info1: this.reportInfo.checkPerson, | |||
| title2: "审核时间", | |||
| info2: this.reportInfo.checkTime, | |||
| }, | |||
| { | |||
| title1: "巡视开始时间", | |||
| info1: this.reportInfo.inspectionStartTime, | |||
| title2: "巡视结束时间", | |||
| info2: this.reportInfo.inspectionEndTime, | |||
| }, | |||
| { | |||
| title1: "巡视任务", | |||
| info1: this.reportInfo.inspectionTaskName, | |||
| title2: "巡视统计", | |||
| info2: this.reportInfo.patrolStatistics, | |||
| }, | |||
| { | |||
| title1: "巡视结论", | |||
| info1: this.reportInfo.description, | |||
| title2: "", | |||
| info2: "", | |||
| }, | |||
| ]; | |||
| const errorPointsByTask = {}; | |||
| const normalPointsByTask = {}; | |||
| if (this.reportInfo.detail) { | |||
| // 处理缺陷点位 | |||
| if (this.reportInfo.detail.缺陷) { | |||
| this.reportInfo.detail.缺陷.forEach((taskGroup) => { | |||
| Object.keys(taskGroup).forEach((taskName) => { | |||
| const points = taskGroup[taskName]; | |||
| if (points && points.length > 0) { | |||
| if (!errorPointsByTask[taskName]) { | |||
| errorPointsByTask[taskName] = []; | |||
| } | |||
| points.forEach((point) => { | |||
| if (point.inspectionImg) { | |||
| point.inspectionImgList = [point.inspectionImg]; | |||
| } else { | |||
| point.inspectionImgList = []; | |||
| } | |||
| errorPointsByTask[taskName].push(point); | |||
| }); | |||
| } | |||
| }); | |||
| }); | |||
| } | |||
| // 处理正常点位 | |||
| if (this.reportInfo.detail.正常) { | |||
| this.reportInfo.detail.正常.forEach((taskGroup) => { | |||
| Object.keys(taskGroup).forEach((taskName) => { | |||
| const points = taskGroup[taskName]; | |||
| if (points && points.length > 0) { | |||
| if (!normalPointsByTask[taskName]) { | |||
| normalPointsByTask[taskName] = []; | |||
| } | |||
| points.forEach((point) => { | |||
| if (point.inspectionImg) { | |||
| point.inspectionImgList = point.inspectionImg.split(","); | |||
| } else { | |||
| point.inspectionImgList = []; | |||
| } | |||
| normalPointsByTask[taskName].push(point); | |||
| }); | |||
| } | |||
| }); | |||
| }); | |||
| } | |||
| } else { | |||
| // 兼容旧数据结构 | |||
| const errorPointsList = []; | |||
| const normalPointsList = []; | |||
| if (this.reportInfo.info) { | |||
| this.reportInfo.info.forEach((element) => { | |||
| element.inspectionImgList = []; | |||
| if (element.inspectionImg) { | |||
| element.inspectionImgList = element.inspectionImg.split(","); | |||
| } | |||
| if (element.pointStatus == "正常") { | |||
| normalPointsList.push(element); | |||
| } else if (element.pointStatus == "缺陷") { | |||
| errorPointsList.push(element); | |||
| } | |||
| }); | |||
| } | |||
| const groupByTask = (list) => { | |||
| const grouped = {}; | |||
| list.forEach((item) => { | |||
| const taskName = item.taskName || "未分类任务"; | |||
| if (!grouped[taskName]) { | |||
| grouped[taskName] = []; | |||
| } | |||
| grouped[taskName].push(item); | |||
| }); | |||
| return grouped; | |||
| }; | |||
| Object.assign(errorPointsByTask, groupByTask(errorPointsList)); | |||
| Object.assign(normalPointsByTask, groupByTask(normalPointsList)); | |||
| } | |||
| // 缓存原始数据用于分页 | |||
| Object.keys(errorPointsByTask).forEach((taskName) => { | |||
| this.originalDataCache.error[taskName] = [ | |||
| ...errorPointsByTask[taskName], | |||
| ]; | |||
| }); | |||
| Object.keys(normalPointsByTask).forEach((taskName) => { | |||
| this.originalDataCache.normal[taskName] = [ | |||
| ...normalPointsByTask[taskName], | |||
| ]; | |||
| }); | |||
| return { | |||
| headerInfoList, | |||
| errorPointsByTask, | |||
| normalPointsByTask, | |||
| errorPointsList: Object.values(errorPointsByTask).flat(), | |||
| normalPointsList: Object.values(normalPointsByTask).flat(), | |||
| }; | |||
| }, | |||
| initPagination() { | |||
| const errorTasks = Object.keys(this.pointInfo.errorPointsByTask || {}); | |||
| const normalTasks = Object.keys(this.pointInfo.normalPointsByTask || {}); | |||
| [...errorTasks, ...normalTasks].forEach((task) => { | |||
| const type = errorTasks.includes(task) ? "error" : "normal"; | |||
| const key = `${type}_${task}`; | |||
| if (!this.currentPageMap[key]) { | |||
| this.currentPageMap[key] = 1; | |||
| } | |||
| }); | |||
| }, | |||
| getTotalCount(type, taskName) { | |||
| return this.originalDataCache[type][taskName]?.length || 0; | |||
| }, | |||
| getPaginatedData(type, taskName) { | |||
| const key = `${type}_${taskName}`; | |||
| const currentPage = this.currentPageMap[key] || 1; | |||
| const allData = this.originalDataCache[type][taskName] || []; | |||
| const start = (currentPage - 1) * this.pageSize; | |||
| const end = start + this.pageSize; | |||
| return allData.slice(start, end); | |||
| }, | |||
| shouldShowTaskName(taskName, type) { | |||
| let taskCount = 0; | |||
| if (type === "error") { | |||
| taskCount = Object.keys(this.pointInfo.errorPointsByTask || {}).length; | |||
| } else if (type === "normal") { | |||
| taskCount = Object.keys(this.pointInfo.normalPointsByTask || {}).length; | |||
| } | |||
| if (taskCount === 1 && taskName === this.reportInfo.inspectionTaskName) { | |||
| return false; | |||
| } | |||
| return true; | |||
| }, | |||
| handleClose(done) { | |||
| this.$emit("update:visible", false); | |||
| }, | |||
| headerSpan({ row, column, rowIndex, columnIndex }) { | |||
| if (rowIndex === 0) { | |||
| if (columnIndex === 1) { | |||
| return [1, 3]; | |||
| } | |||
| } | |||
| }, | |||
| lookImageDetail(imgUrl) { | |||
| this.previewImagePos = 0; | |||
| this.showImgesUrls = [imgUrl]; | |||
| this.showPreviewImages = true; | |||
| }, | |||
| backPage() { | |||
| const fromComponent = | |||
| this.$route.query.fromComponent || this.urlFrom || "inspectionTask"; | |||
| let targetRoute = {}; | |||
| if (fromComponent === "InspectionReporter") { | |||
| targetRoute = { | |||
| name: "PatrolReport", | |||
| }; | |||
| } else { | |||
| targetRoute = { | |||
| name: "InspectionTaskSummary", | |||
| }; | |||
| } | |||
| this.$router.replace({ | |||
| ...targetRoute, | |||
| query: { from: "back" }, | |||
| }); | |||
| sessionStorage.removeItem("reportLineId"); | |||
| sessionStorage.removeItem("reportType"); | |||
| }, | |||
| }, | |||
| }; | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| ::v-deep .content { | |||
| overflow: scroll; | |||
| } | |||
| ::v-deep .el-table__body-wrapper { | |||
| max-height: 450px; | |||
| overflow-y: scroll; | |||
| } | |||
| .report-bg { | |||
| height: 100%; | |||
| overflow: hidden; | |||
| } | |||
| .report-toolbar { | |||
| display: flex; | |||
| justify-content: flex-start; | |||
| margin-bottom: 12px; | |||
| } | |||
| .report-back-btn { | |||
| border: 1px solid transparent !important; | |||
| background: | |||
| linear-gradient(#01016b, #01016b) padding-box, | |||
| linear-gradient(135deg, #3988ff, #0351c6) border-box !important; | |||
| color: #43c0ff !important; | |||
| } | |||
| .header-title { | |||
| font-weight: bold; | |||
| } | |||
| .point-info-title { | |||
| font-size: 20px; | |||
| text-align: center; | |||
| padding: 10px; | |||
| } | |||
| .task-group { | |||
| margin-top: 20px; | |||
| &:first-of-type { | |||
| margin-top: 0; | |||
| } | |||
| .task-group-title { | |||
| font-size: 14px; | |||
| padding: 8px 0; | |||
| margin-bottom: 10px; | |||
| } | |||
| } | |||
| .inspection-img-wrap { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| .inspection-img { | |||
| width: 60px; | |||
| height: 60px; | |||
| cursor: pointer; | |||
| } | |||
| .inspection-btn { | |||
| cursor: pointer; | |||
| display: block; | |||
| padding-bottom: 20px; | |||
| } | |||
| } | |||
| .pagination-wrap { | |||
| margin-top: 15px; | |||
| display: flex; | |||
| justify-content: flex-end; | |||
| } | |||
| // 分页组件样式覆盖 - 正常页码白色，当前页蓝色 | |||
| ::v-deep .el-pagination { | |||
| .btn-prev, | |||
| .btn-next, | |||
| .el-pager li { | |||
| background-color: transparent; | |||
| color: #ffffff; | |||
| font-weight: normal; | |||
| &:not(.disabled):hover { | |||
| color: #40e5f0; | |||
| } | |||
| } | |||
| .el-pager li.active { | |||
| color: #40e5f0; | |||
| background-color: transparent; | |||
| cursor: default; | |||
| &:hover { | |||
| color: #40e5f0; | |||
| } | |||
| } | |||
| .el-pager li.disabled, | |||
| .btn-prev.disabled, | |||
| .btn-next.disabled { | |||
| color: #7f8c9a; | |||
| } | |||
| } | |||
| ::v-deep .el-table { | |||
| width: 100% !important; | |||
| background: #edf4ff !important; | |||
| color: #17345f; | |||
| border-color: #6f9ed8 !important; | |||
| } | |||
| ::v-deep .el-table::before, | |||
| ::v-deep .el-table::after, | |||
| ::v-deep .el-table--border::after, | |||
| ::v-deep .el-table--group::after { | |||
| background-color: #6f9ed8 !important; | |||
| } | |||
| ::v-deep .el-table__header-wrapper, | |||
| ::v-deep .el-table__body-wrapper, | |||
| ::v-deep .el-table__empty-block { | |||
| background: transparent !important; | |||
| background-color: transparent !important; | |||
| } | |||
| ::v-deep .el-table th.el-table__cell { | |||
| background: #0b3d89 !important; | |||
| border-color: #6f9ed8 !important; | |||
| } | |||
| ::v-deep .el-table th.el-table__cell .cell { | |||
| color: #ffffff !important; | |||
| } | |||
| ::v-deep .el-table td.el-table__cell { | |||
| background: #edf4ff !important; | |||
| border-color: #a9c4e8 !important; | |||
| color: #17345f !important; | |||
| } | |||
| ::v-deep .el-table td.el-table__cell .cell { | |||
| color: #17345f !important; | |||
| } | |||
| .card-page.report-bg ::v-deep .el-table__body .el-table__row, | |||
| .card-page.report-bg ::v-deep .el-table__body .el-table__row td.el-table__cell { | |||
| background: #edf4ff !important; | |||
| } | |||
| .card-page.report-bg ::v-deep .el-table__body .el-table__row--striped, | |||
| .card-page.report-bg ::v-deep .el-table__body .el-table__row--striped td.el-table__cell { | |||
| background: #dce9fa !important; | |||
| } | |||
| .card-page.report-bg ::v-deep .el-table__body tr:hover > td.el-table__cell { | |||
| background: #c8dcf5 !important; | |||
| } | |||
| ::v-deep .el-table__body-wrapper, | |||
| ::v-deep .content { | |||
| scrollbar-width: none; | |||
| -ms-overflow-style: none; | |||
| } | |||
| ::v-deep .el-table__body-wrapper::-webkit-scrollbar, | |||
| ::v-deep .content::-webkit-scrollbar { | |||
| width: 0; | |||
| height: 0; | |||
| display: none; | |||
| } | |||
| </style> | |||