You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
511 lines
14 KiB
511 lines
14 KiB
<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"
|
|
:max-height="tableHeight"
|
|
border
|
|
stripe
|
|
>
|
|
<el-table-column
|
|
label="序号"
|
|
type="index"
|
|
width="60"
|
|
align="center"
|
|
:index="table_index"
|
|
/>
|
|
<el-table-column
|
|
label="巡检任务"
|
|
align="left"
|
|
prop="inspectionTaskName"
|
|
width="620"
|
|
header-align="center"
|
|
/>
|
|
<!-- 站名列：汇聚门户聚合数据下展示 -->
|
|
<el-table-column
|
|
v-if="$store.getters.fromPortal"
|
|
label="站名"
|
|
align="center"
|
|
prop="stationName"
|
|
min-width="100"
|
|
show-overflow-tooltip
|
|
/>
|
|
<el-table-column
|
|
label="巡检开始时间"
|
|
align="center"
|
|
prop="inspectionStartTime"
|
|
width="190"
|
|
/>
|
|
<el-table-column
|
|
label="巡检结束时间"
|
|
align="center"
|
|
prop="inspectionEndTime"
|
|
width="190"
|
|
/>
|
|
<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, 'docx')"
|
|
: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;
|
|
const url = row.filePath;
|
|
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));
|
|
// 汇聚态：记录点击的报告所属站，详情接口按此站代理
|
|
sessionStorage.setItem("reportStationCode", info.stationCode || "");
|
|
this.$router.push({
|
|
name: this.$route.meta.patrolWorkspace
|
|
? "InspectionWorkspaceReportDetail"
|
|
: "patrolReportDetail",
|
|
query: {
|
|
lineId: info.lineId,
|
|
filter: info.filter,
|
|
reportType: info.filter,
|
|
stationCode: info.stationCode || undefined,
|
|
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-right: 0 !important;
|
|
border-bottom: 0 !important;
|
|
border-color: transparent !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: transparent !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: #012773 !important;
|
|
border-right-color: transparent !important;
|
|
border-bottom-color: #acb5e3 !important;
|
|
}
|
|
|
|
.card-page ::v-deep .el-table th.el-table__cell .cell {
|
|
color: #ffffff !important;
|
|
white-space: nowrap !important;
|
|
}
|
|
|
|
.card-page ::v-deep .el-table td.el-table__cell {
|
|
background: transparent !important;
|
|
border-right-color: transparent !important;
|
|
border-bottom-color: #acb5e3 !important;
|
|
color: #000000 !important;
|
|
}
|
|
|
|
.card-page ::v-deep .el-table__body-wrapper,
|
|
.card-page ::v-deep .el-table__footer-wrapper,
|
|
.card-page ::v-deep .el-table__fixed-right {
|
|
border-right: 0 !important;
|
|
border-bottom: 0 !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 {
|
|
border: 1px solid transparent !important;
|
|
background: linear-gradient(180deg, #397bff 0%, #0c0c8a 100%) !important;
|
|
background-image: linear-gradient(180deg, #397bff 0%, #0c0c8a 100%) !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.task-toolbar-btn:hover,
|
|
.task-toolbar-btn:focus {
|
|
border-color: transparent !important;
|
|
color: #43c0ff !important;
|
|
opacity: 0.9;
|
|
}
|
|
</style>
|