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.
701 lines
21 KiB
701 lines
21 KiB
<!-- 监督检查工程管理 -->
|
|
<script>
|
|
import dayjs from "dayjs";
|
|
import { regionData, codeToText, TextToCode } from "element-china-area-data";
|
|
import { uploadFileData } from "@/api/system/upload";
|
|
|
|
import {
|
|
getSuperviseEngineeringProblemListData,
|
|
updateSuperviseEngineeringProblemStatusAndData,
|
|
getSuperviseEngineeringProblemDetailsData,
|
|
} from "@/api/dike";
|
|
export default {
|
|
name: "projectManage",
|
|
data() {
|
|
return {
|
|
dealDialogVisible: false,
|
|
checkDialogVisible: false,
|
|
searchTaskName: "",
|
|
searchManageName: "",
|
|
searchProjectName: "",
|
|
currentItem: null,
|
|
engScalOptions: [],
|
|
wagaTypeOptions: [],
|
|
checkDetailData: {},
|
|
levelMap: {
|
|
0: "无",
|
|
1: "一般",
|
|
2: "较重",
|
|
3: "严重",
|
|
},
|
|
paramsData: {
|
|
name: "",
|
|
type: null,
|
|
dikeName: "",
|
|
selectLevel: "",
|
|
selectType: "",
|
|
},
|
|
dealForm: {
|
|
id: "",
|
|
handleRecord: "",
|
|
fileList: [],
|
|
},
|
|
tableData: [], // 检查列表
|
|
pageData: {
|
|
pageNum: 1, // 当前页
|
|
pageSize: 10, // 请求数量
|
|
pageSizes: [10, 20, 50, 100],
|
|
total: 0, // 总数量
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
handleCurrentPageChange(page) {
|
|
this.pageData.pageNum = page;
|
|
this.getTableData();
|
|
},
|
|
handlePageSizeChange(pageSize) {
|
|
this.pageData.pageSize = pageSize;
|
|
this.getTableData();
|
|
},
|
|
// 查看
|
|
handleCheck(row) {
|
|
this.checkDialogVisible = true;
|
|
getSuperviseEngineeringProblemDetailsData(row.id).then((res) => {
|
|
this.checkDetailData = res?.data || {};
|
|
if (this.checkDetailData.problemDto?.siteSituationRecords) {
|
|
this.checkDetailData.problemDto.siteSituationRecordsArr =
|
|
this.checkDetailData.problemDto.siteSituationRecords.split(",");
|
|
}
|
|
if (this.checkDetailData.problemDto?.handleSituationRecords) {
|
|
this.checkDetailData.problemDto.handleSituationRecordsArr =
|
|
this.checkDetailData.problemDto.handleSituationRecords.split(",");
|
|
}
|
|
if (this.checkDetailData.doneTime) {
|
|
this.checkDetailData.showDoneTime = dayjs(
|
|
this.checkDetailData.doneTime
|
|
).format("YYYY年MM月DD日");
|
|
}
|
|
});
|
|
},
|
|
// 跳转编辑页面
|
|
handleEdit(row) {
|
|
this.$router.push({
|
|
path: "supervisionProjectReport",
|
|
query: {
|
|
type: "edit",
|
|
wayId: row.wayId,
|
|
id: row.id,
|
|
},
|
|
});
|
|
},
|
|
handleClose(done) {
|
|
this.dealDialogVisible = false;
|
|
},
|
|
// 确认提交处理表单
|
|
submitDeal() {
|
|
this.$refs.dealForm.validate((valid) => {
|
|
if (valid) {
|
|
updateSuperviseEngineeringProblemStatusAndData({
|
|
id: this.dealForm.id,
|
|
status: "2",
|
|
handleRecord: this.dealForm.handleRecord,
|
|
handleSituationRecords: this.dealForm.fileList.join(","), // 现场情况
|
|
}).then((res) => {
|
|
if (res) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "处理成功",
|
|
});
|
|
this.getTableData();
|
|
this.dealForm.fileList = [];
|
|
this.dealForm.handleRecord = "";
|
|
this.dealForm.id = "";
|
|
this.$refs.dealForm.resetFields();
|
|
this.dealDialogVisible = false;
|
|
}
|
|
});
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
// 跳转报告页面
|
|
handleCheckReport(row) {
|
|
this.$router.push({
|
|
path: "supervisionProjectReportPage",
|
|
query: {
|
|
wayId: row.wayId,
|
|
id: row.id,
|
|
},
|
|
});
|
|
},
|
|
// 类型字典翻译
|
|
problemLevelFormat(level) {
|
|
if (!level) return "";
|
|
let levelMap = {
|
|
0: "无",
|
|
1: "一般",
|
|
2: "较重",
|
|
3: "严重",
|
|
};
|
|
return levelMap[level];
|
|
},
|
|
// 获取列表数据
|
|
getTableData() {
|
|
getSuperviseEngineeringProblemListData({
|
|
data: {
|
|
timeView: {
|
|
timeField: "create_time",
|
|
},
|
|
name: this.searchTaskName || null,
|
|
engineeringManagementUnit: this.searchManageName || null,
|
|
dikeName: this.searchProjectName || null,
|
|
},
|
|
params: {
|
|
orderBy: "create_time",
|
|
sort: "desc",
|
|
},
|
|
pageSize: this.pageData.pageSize,
|
|
pageNum: this.pageData.pageNum,
|
|
}).then((res) => {
|
|
if (res) {
|
|
this.tableData = res.records;
|
|
this.pageData.total = res.total;
|
|
}
|
|
});
|
|
},
|
|
// 重置搜索
|
|
resetSearch() {
|
|
this.searchTaskName = null;
|
|
this.searchManageName = null;
|
|
this.searchProjectName = null;
|
|
this.getTableData();
|
|
},
|
|
// 下发
|
|
handleSendDown(row) {
|
|
this.$confirm("是否确认下发？", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
updateSuperviseEngineeringProblemStatusAndData({
|
|
id: row.id,
|
|
status: "1",
|
|
}).then((res) => {
|
|
if (res) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "下发成功",
|
|
});
|
|
this.getTableData();
|
|
}
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
// 处理-弹窗提交问题详情和图片
|
|
handleDeal(row) {
|
|
this.dealDialogVisible = true;
|
|
this.dealForm.id = row.id;
|
|
},
|
|
// 确认
|
|
handleConfirm(row) {
|
|
this.$confirm("是否确认？", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
updateSuperviseEngineeringProblemStatusAndData({
|
|
id: row.id,
|
|
status: "3",
|
|
}).then((res) => {
|
|
if (res) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "确认成功",
|
|
});
|
|
this.getTableData();
|
|
}
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
// 上传前
|
|
beforeUpload(e) {
|
|
console.log("beforeUpload >>>>> ", e);
|
|
if (this.dealForm.fileList?.length >= 99) {
|
|
this.$message.warning("最多上传99张图片");
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
handleUpload(e) {
|
|
const { file } = e;
|
|
let fData = new FormData();
|
|
fData.append("file", file);
|
|
uploadFileData(fData)
|
|
.then((res) => {
|
|
this.dealForm.fileList.push(res.url);
|
|
})
|
|
.catch((err) => {
|
|
console.log("err >>>>> ", err);
|
|
});
|
|
},
|
|
|
|
formatAdcd(adcd) {
|
|
if (adcd) {
|
|
let provinceCode = adcd.slice(0, 2);
|
|
let cityCode = adcd.slice(2, 4);
|
|
let areaCode = adcd.slice(4, 6);
|
|
if (areaCode != "00") {
|
|
return (
|
|
codeToText[provinceCode] +
|
|
"-" +
|
|
codeToText[provinceCode + cityCode] +
|
|
"-" +
|
|
codeToText[provinceCode + cityCode + areaCode]
|
|
);
|
|
} else if (cityCode != "00") {
|
|
return (
|
|
codeToText[provinceCode] + "-" + codeToText[provinceCode + cityCode]
|
|
);
|
|
} else {
|
|
return codeToText[provinceCode];
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {},
|
|
mounted() {
|
|
// 获取列表数据
|
|
this.getTableData();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="body slider-right">
|
|
<div class="top-title">基础信息管理</div>
|
|
<div class="table-box">
|
|
<span>任务名称：</span>
|
|
<el-input
|
|
class="search-input ml-10"
|
|
v-model="searchTaskName"
|
|
placeholder="请输入名称"
|
|
/>
|
|
<span class="ml-10">管理单位：</span>
|
|
<el-input
|
|
class="search-input ml-10"
|
|
v-model="searchManageName"
|
|
placeholder="请输入"
|
|
/>
|
|
<span class="ml-10">工程对象：</span>
|
|
<el-input
|
|
class="search-input ml-10"
|
|
v-model="searchProjectName"
|
|
placeholder="请输入"
|
|
/>
|
|
<el-button class="search-btn" type="success" @click="getTableData()"
|
|
>搜索</el-button
|
|
>
|
|
<el-button class="search-btn" @click="resetSearch">重置</el-button>
|
|
<el-table class="table mt-16" height="640" :data="tableData" border>
|
|
<el-table-column type="index" align="center" label="序号" width="60" />
|
|
<el-table-column prop="projectName" align="center" label="检查项目" />
|
|
<el-table-column prop="name" align="center" label="任务名称" />
|
|
<el-table-column prop="adcdStart" align="center" label="起点行政区划">
|
|
<template #default="{ row }">{{
|
|
formatAdcd(row.adcdStart)
|
|
}}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="adcdEnd" align="center" label="终点行政区划">
|
|
<template #default="{ row }">{{ formatAdcd(row.adcdEnd) }}</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="dikeName"
|
|
align="center"
|
|
label="工程"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="engineeringManagementUnit"
|
|
align="center"
|
|
label="管理单位"
|
|
/>
|
|
<el-table-column
|
|
prop="content"
|
|
align="center"
|
|
label="检查内容"
|
|
></el-table-column>
|
|
<el-table-column prop="level" align="center" label="问题等级">
|
|
<template slot-scope="scope">
|
|
<span>{{ levelMap[scope.row.level] }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="operate" align="center" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button type="text" size="small" @click="handleCheck(scope.row)"
|
|
>查看</el-button
|
|
>
|
|
<el-button
|
|
type="text"
|
|
size="small"
|
|
v-if="scope.row.status == '0'"
|
|
@click="handleSendDown(scope.row)"
|
|
>下发</el-button
|
|
>
|
|
<el-button
|
|
type="text"
|
|
size="small"
|
|
@click="handleDeal(scope.row)"
|
|
v-else-if="scope.row.status == '1'"
|
|
>处理</el-button
|
|
>
|
|
<el-button
|
|
type="text"
|
|
size="small"
|
|
v-else-if="scope.row.status == '2'"
|
|
@click="handleConfirm(scope.row)"
|
|
>确认</el-button
|
|
>
|
|
<el-button
|
|
type="text"
|
|
:disabled="true"
|
|
size="small"
|
|
v-else-if="scope.row.status == '3'"
|
|
>完成</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
background
|
|
class="pagination"
|
|
style="margin-top: 16px; margin-right: 16px; float: right"
|
|
:current-page="pageData.pageNum"
|
|
:page-sizes="pageData.pageSizes"
|
|
layout="total, prev, pager, next, sizes, jumper"
|
|
:total="pageData.total"
|
|
@size-change="(e) => handlePageSizeChange(e)"
|
|
@current-change="(e) => handleCurrentPageChange(e)"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
|
|
<!-- 处理弹窗 -->
|
|
<el-dialog title="问题处理" :visible.sync="dealDialogVisible" width="680px">
|
|
<el-form ref="dealForm" :model="dealForm" label-width="80px">
|
|
<el-form-item label="问题描述">
|
|
<el-input
|
|
type="textarea"
|
|
:rows="4"
|
|
placeholder="请输入问题描述"
|
|
v-model="dealForm.handleRecord"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="现场情况">
|
|
<div
|
|
class="w-120 h-100 mr-12 mb-12"
|
|
v-for="(item, index) in dealForm.fileList"
|
|
:key="index"
|
|
>
|
|
<el-image
|
|
style="width: 200px; min-height: 100px; height: auto"
|
|
:src="item"
|
|
:preview-src-list="[item]"
|
|
>
|
|
<template #error>
|
|
<div
|
|
class="w-full flex justify-center items-center"
|
|
style="
|
|
height: 100px;
|
|
border: 1px solid #f0f0f0;
|
|
font-style: italic;
|
|
color: #ccc;
|
|
"
|
|
>
|
|
图片加载失败
|
|
</div>
|
|
</template>
|
|
</el-image>
|
|
</div>
|
|
<el-upload
|
|
action="#"
|
|
:http-request="handleUpload"
|
|
:auto-upload="true"
|
|
:before-upload="beforeUpload"
|
|
:showFileList="false"
|
|
accept=".jpg,.png,.jpeg"
|
|
:maxLength="99"
|
|
>
|
|
<el-button type="primary">上传</el-button>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<el-form-item class="flex justify-end">
|
|
<el-button @click="handleClose">取消</el-button>
|
|
<el-button type="primary" @click="submitDeal">提交</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-dialog>
|
|
|
|
<!-- 查看弹窗 -->
|
|
<el-dialog
|
|
title="问题详情"
|
|
:visible.sync="checkDialogVisible"
|
|
width="860px"
|
|
>
|
|
<div class="table-container">
|
|
<!-- 下发和处理状态内容 -->
|
|
<div class="flex">
|
|
<div class="flex-1">
|
|
<div class="flex border-l-t">
|
|
<div class="w-120 p-10 border-b-r label-text">任务名称</div>
|
|
<div class="flex-1 p-10 border-b-r text-center value-text">
|
|
{{ checkDetailData.name }}
|
|
</div>
|
|
</div>
|
|
<div class="flex border-l-t">
|
|
<div class="w-120 p-10 border-b-r label-text">检查时间</div>
|
|
<div class="flex-1 p-10 border-b-r text-center value-text">
|
|
{{ checkDetailData.showDoneTime }}
|
|
</div>
|
|
<div class="w-120 p-10 border-b-r label-text">天气</div>
|
|
<div class="flex-1 p-10 border-b-r text-center value-text">
|
|
{{ checkDetailData.weather }}
|
|
</div>
|
|
</div>
|
|
<div class="flex border-l-t">
|
|
<div class="w-120 p-10 border-b-r label-text">检查人员</div>
|
|
<div class="flex-1 p-10 border-b-r text-center value-text">
|
|
{{ checkDetailData.patrolName }}
|
|
</div>
|
|
</div>
|
|
<div class="flex border-l-t">
|
|
<div class="w-120 p-10 border-b-r label-text">管理单位</div>
|
|
<div class="flex-1 p-10 border-b-r text-center value-text">
|
|
{{ checkDetailData.engineeringManagementUnit }}
|
|
</div>
|
|
<div class="w-120 p-10 border-b-r label-text">堤防名称</div>
|
|
<div class="flex-1 p-10 border-b-r text-center value-text">
|
|
{{ checkDetailData.dikeName }}
|
|
</div>
|
|
</div>
|
|
<div class="flex border-l-t">
|
|
<div class="w-120 p-10 border-b-r label-text">检查项目</div>
|
|
<div class="flex-1 p-10 border-b-r text-center value-text">
|
|
{{
|
|
checkDetailData.problemDto &&
|
|
checkDetailData.problemDto.projectName
|
|
}}
|
|
</div>
|
|
<div class="w-120 p-10 border-b-r label-text">问题等级</div>
|
|
<div class="flex-1 p-10 border-b-r text-center value-text">
|
|
{{
|
|
problemLevelFormat(
|
|
checkDetailData.problemDto &&
|
|
checkDetailData.problemDto.level
|
|
)
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="flex border-l-t">
|
|
<div class="w-120 p-10 border-b-r label-text">检查内容</div>
|
|
<div class="flex-1 p-10 border-b-r value-text">
|
|
{{ checkDetailData.content }}
|
|
</div>
|
|
</div>
|
|
<div class="flex border-l-t">
|
|
<div class="w-120 p-10 border-b-r label-text">问题描述</div>
|
|
<div class="flex-1 p-10 border-b-r value-text">
|
|
{{
|
|
checkDetailData.problemDto &&
|
|
checkDetailData.problemDto.problemDescribe
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="flex border-l-t">
|
|
<div class="w-120 p-10 border-b-r label-text">现场记录情况</div>
|
|
<div class="flex-1 p-10 border-b-r">
|
|
<template v-if="checkDetailData.problemDto">
|
|
<el-image
|
|
v-for="item in checkDetailData.problemDto
|
|
.siteSituationRecordsArr"
|
|
style="width: 200px; min-height: 100px; height: auto"
|
|
:src="item"
|
|
:key="item"
|
|
class="mr-10 mb-10"
|
|
:preview-src-list="[item]"
|
|
></el-image>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div
|
|
class="w-40 flex-shrink-0 border-l-t border-b-r flex justify-center items-center font-12 color-red"
|
|
>
|
|
注：下发和处理状态查看内容
|
|
</div> -->
|
|
</div>
|
|
<!-- 确认状态内容 -->
|
|
<div
|
|
class="flex"
|
|
v-if="
|
|
checkDetailData.problemDto &&
|
|
['2', '3'].includes(checkDetailData.problemDto.status)
|
|
"
|
|
>
|
|
<div class="flex-1">
|
|
<div class="flex border-l-t">
|
|
<div class="w-120 p-10 border-b-r label-text">处理人员</div>
|
|
<div class="flex-1 p-10 border-b-r text-center value-text">
|
|
{{
|
|
checkDetailData.problemDto &&
|
|
checkDetailData.problemDto.handleName
|
|
}}
|
|
</div>
|
|
<div class="w-120 p-10 border-b-r label-text">处理时间</div>
|
|
<div class="flex-1 p-10 border-b-r text-center value-text">
|
|
{{
|
|
checkDetailData.problemDto &&
|
|
checkDetailData.problemDto.handleTime
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="flex border-l-t">
|
|
<div class="w-120 p-10 border-b-r label-text">处理记录</div>
|
|
<div class="flex-1 p-10 border-b-r value-text">
|
|
{{
|
|
checkDetailData.problemDto &&
|
|
checkDetailData.problemDto.handleRecord
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div class="flex border-l-t">
|
|
<div class="w-120 p-10 border-b-r label-text">现场处理情况</div>
|
|
<div class="flex-1 p-10 border-b-r">
|
|
<el-image
|
|
v-for="item in checkDetailData.problemDto
|
|
.handleSituationRecordsArr"
|
|
style="width: 200px; min-height: 100px; height: auto"
|
|
:src="item"
|
|
:key="item"
|
|
class="mr-10 mb-10"
|
|
:preview-src-list="[item]"
|
|
></el-image>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div
|
|
class="w-40 flex-shrink-0 border-l-t border-b-r flex justify-center items-center font-12 color-red"
|
|
>
|
|
注：确认状态内容
|
|
</div> -->
|
|
</div>
|
|
<!-- 完成状态内容 -->
|
|
<div
|
|
class="flex"
|
|
v-if="
|
|
checkDetailData.problemDto &&
|
|
['3'].includes(checkDetailData.problemDto.status)
|
|
"
|
|
>
|
|
<div class="flex-1">
|
|
<div class="flex border-l-t">
|
|
<div class="w-120 p-10 border-b-r label-text">复核人员</div>
|
|
<div class="flex-1 p-10 border-b-r text-center value-text">
|
|
{{
|
|
checkDetailData.problemDto &&
|
|
checkDetailData.problemDto.confirmName
|
|
}}
|
|
</div>
|
|
<div class="w-120 p-10 border-b-r label-text">处理时间</div>
|
|
<div class="flex-1 p-10 border-b-r text-center value-text">
|
|
{{
|
|
checkDetailData.problemDto &&
|
|
checkDetailData.problemDto.confirmTime
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div
|
|
class="w-40 flex-shrink-0 border-l-t border-b-r flex justify-center items-center font-12 color-red"
|
|
>
|
|
完成状态内容
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.body {
|
|
width: 100%;
|
|
min-height: calc(100vh - 56px);
|
|
padding-left: 24px;
|
|
|
|
.top-title {
|
|
height: 40px;
|
|
background-color: white;
|
|
display: flex;
|
|
padding-left: 16px;
|
|
align-items: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.table-box {
|
|
width: 100%;
|
|
min-height: calc(100vh - 56px - 64px);
|
|
margin-top: 24px;
|
|
padding: 16px;
|
|
background-color: white;
|
|
|
|
.top-search {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.table {
|
|
height: calc(680px - 34px);
|
|
}
|
|
}
|
|
.search-input {
|
|
width: 202px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.search-btn {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.warning-time {
|
|
color: red;
|
|
}
|
|
|
|
.label-text {
|
|
color: #999;
|
|
}
|
|
.value-text {
|
|
color: #333;
|
|
}
|
|
|
|
.w-40 {
|
|
width: 40px;
|
|
}
|
|
.w-120 {
|
|
width: 120px;
|
|
}
|
|
.border-l-t {
|
|
border-left: 1px solid #f0f0f0;
|
|
border-top: 1px solid #f0f0f0;
|
|
}
|
|
.border-b-r {
|
|
border-bottom: 1px solid #f0f0f0;
|
|
border-right: 1px solid #f0f0f0;
|
|
}
|
|
.color-red {
|
|
color: red;
|
|
}
|
|
}
|
|
</style>
|
|
|