16 changed files with 1463 additions and 1688 deletions
@ -0,0 +1,251 @@ |
|||
<!-- 监督检查工程管理 --> |
|||
<script> |
|||
import { getEnableSuperviseWayData } from "@/api/sluice"; |
|||
export default { |
|||
name: "projectReport", |
|||
data() { |
|||
return { |
|||
activeName: "", |
|||
formData: [], |
|||
}; |
|||
}, |
|||
computed: { |
|||
// 进度条 |
|||
calcStep() { |
|||
if (this.formData.length) { |
|||
let sum = this.formData.reduce((prev, cur) => { |
|||
return prev + cur.children.length; |
|||
}, 0); |
|||
let hasDoneLevel = this.formData.reduce((prev, cur) => { |
|||
return ( |
|||
prev + |
|||
cur.children.reduce((prev2, cur2) => { |
|||
return prev2 + (cur2.level ? 1 : 0); |
|||
}, 0) |
|||
); |
|||
}, 0); |
|||
console.log("hasDoneLevel >>>>> ", hasDoneLevel); |
|||
return Math.floor((hasDoneLevel / sum) * 100); |
|||
} else { |
|||
return 0; |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 获取启用的方法配置项 |
|||
getEnableSuperviseWayData() { |
|||
getEnableSuperviseWayData().then((res) => { |
|||
console.log(res); |
|||
let list = []; |
|||
res.data?.itemList?.forEach((item, index) => { |
|||
if (index === 0) { |
|||
list.push({ |
|||
projectId: item.projectId, |
|||
projectName: item.projectName, |
|||
problemDescribe: "", |
|||
children: [{ ...item, level: null }], |
|||
}); |
|||
} else { |
|||
let exitItem = list.find((v) => v.projectId === item.projectId); |
|||
if (!exitItem) { |
|||
list.push({ |
|||
projectId: item.projectId, |
|||
projectName: item.projectName, |
|||
problemDescribe: "", |
|||
children: [{ ...item, level: null }], |
|||
}); |
|||
} else { |
|||
exitItem.children.push({ |
|||
...item, |
|||
level: null, |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
this.formData = list; |
|||
this.activeName = list[0]?.projectId || ""; |
|||
}); |
|||
}, |
|||
handleSave() { |
|||
console.log("保存"); |
|||
}, |
|||
handleSubmit() { |
|||
if (this.calcStep < 100) { |
|||
this.$message.warning("检查进度未达到100%,请检查"); |
|||
return; |
|||
} |
|||
}, |
|||
}, |
|||
created() { |
|||
this.getEnableSuperviseWayData(); |
|||
}, |
|||
mounted() {}, |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body slider-right"> |
|||
<div class="top-title">工程问题上报</div> |
|||
<div class="table-box"> |
|||
<template v-if="formData.length"> |
|||
<div class="step-box"> |
|||
<div |
|||
class="bar" |
|||
:style="{ |
|||
left: `-${100 - calcStep}%`, |
|||
backgroundColor: `rgb(${255 - (255 * calcStep) / 100},${ |
|||
0 + (255 * calcStep) / 100 |
|||
},0)`, |
|||
}" |
|||
></div> |
|||
<div style="position: relative; z-index: 1" class="pl-4 font-14"> |
|||
检查进度 {{ calcStep }}% |
|||
</div> |
|||
</div> |
|||
<el-tabs v-model="activeName" type="card"> |
|||
<el-tab-pane |
|||
v-for="item in formData" |
|||
:key="item.id" |
|||
:label="item.projectName" |
|||
:name="item.projectId" |
|||
class="question-box" |
|||
> |
|||
<div |
|||
class="question-row w-full" |
|||
v-for="item2 in item.children" |
|||
:key="item2.id" |
|||
> |
|||
<div class="flex"> |
|||
<div class="question-col flex-shrink-0">问题</div> |
|||
<div class="question-col flex-1"> |
|||
{{ item2.content }} |
|||
<el-tooltip class="tooltip" effect="dark" placement="left"> |
|||
<div slot="content"> |
|||
<div>一般:{{ item2.sameGrade || " " }};</div> |
|||
<div>较重:{{ item2.heavyGrade || " " }};</div> |
|||
<div>严重:{{ item2.seriousGrade || " " }};</div> |
|||
</div> |
|||
<span>提示</span> |
|||
</el-tooltip> |
|||
</div> |
|||
</div> |
|||
<div class="question-select"> |
|||
<el-button |
|||
:type="item2.level === '0' ? 'primary' : ''" |
|||
@click="item2.level = '0'" |
|||
>无</el-button |
|||
> |
|||
<el-button |
|||
:type="item2.level === '1' ? 'primary' : ''" |
|||
@click="item2.level = '1'" |
|||
>一般</el-button |
|||
> |
|||
<el-button |
|||
:type="item2.level === '2' ? 'primary' : ''" |
|||
@click="item2.level = '2'" |
|||
>较重</el-button |
|||
> |
|||
<el-button |
|||
:type="item2.level === '3' ? 'primary' : ''" |
|||
@click="item2.level = '3'" |
|||
>严重</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
<div class="question-row w-full"> |
|||
<div class="question-col flex-shrink-0">描述</div> |
|||
<div class="question-col flex-1"> |
|||
<el-input |
|||
type="textarea" |
|||
v-model="item.problemDescribe" |
|||
:rows="4" |
|||
placeholder="请输入内容" |
|||
/> |
|||
</div> |
|||
</div> |
|||
<div class="question-row w-full"> |
|||
<div class="question-col flex-shrink-0">照片</div> |
|||
<div class="question-col flex-1">上传照片</div> |
|||
</div> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
<div class="mt-30 flex justify-end"> |
|||
<el-button class="mr-12" @click="handleSave">保存</el-button> |
|||
<el-button type="primary" @click="handleSubmit">提交</el-button> |
|||
</div> |
|||
</template> |
|||
<div v-else class="font-14 pt-20">-暂无数据-</div> |
|||
</div> |
|||
</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; |
|||
.step-box { |
|||
position: relative; |
|||
height: 32px; |
|||
width: 120px; |
|||
background-color: #f0f0f0; |
|||
border: 1px solid #333; |
|||
border-radius: 2px; |
|||
float: right; |
|||
display: flex; |
|||
align-items: center; |
|||
overflow: hidden; |
|||
.bar { |
|||
position: absolute; |
|||
top: 0; |
|||
left: -50%; |
|||
z-index: 0; |
|||
height: 100%; |
|||
width: 100%; |
|||
background-color: #1890ff; |
|||
border-radius: 2px; |
|||
transition: 0.5s all; |
|||
} |
|||
} |
|||
|
|||
.question-box { |
|||
border: 1px solid #f0f0f0; |
|||
.question-row { |
|||
.question-col { |
|||
position: relative; |
|||
padding: 10px; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
&:not(:last-child) { |
|||
border-right: 1px solid #f0f0f0; |
|||
} |
|||
.tooltip { |
|||
position: absolute; |
|||
top: 2px; |
|||
right: 2px; |
|||
} |
|||
} |
|||
.question-select { |
|||
padding: 10px; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
@ -0,0 +1,432 @@ |
|||
<!-- 监督检查任务新增 --> |
|||
<script> |
|||
import dayjs from "dayjs"; |
|||
import { |
|||
putDFPreventionControlPlan, |
|||
deleteDFMaintenancePlan, |
|||
postDFNewPreventionControlPlan, |
|||
postDFPreventionControlPlanList, |
|||
listUser, |
|||
} from "@/api/management"; |
|||
import { |
|||
getEnableSuperviseWayData, |
|||
getRunProjectList, |
|||
addNewSuperviseWayTasksData, |
|||
getSuperviseWayTaskDetailsData, |
|||
putSuperviseWayTaskDetailsData, |
|||
} from "@/api/sluice"; |
|||
|
|||
export default { |
|||
name: "tasksDetails", |
|||
data() { |
|||
return { |
|||
searchDikeName: "", |
|||
paramsData: { |
|||
name: "", |
|||
type: null, |
|||
dikeName: "", |
|||
selectLevel: "", |
|||
selectType: "", |
|||
}, |
|||
dialogVisible: false, |
|||
prohibitEditing: false, |
|||
enableSupervisionWayData: [], //启用中的检查项 |
|||
personnelList: [], // 人员列表 |
|||
projectList: [], // 工程列表 |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
ruleForm: { |
|||
name: "", |
|||
wagaCode: "", |
|||
wagaName: "", |
|||
patrolName: "", |
|||
patrolUid: "", |
|||
startTime: "", |
|||
doneTime: "", |
|||
content: "", |
|||
wayId: "", |
|||
}, |
|||
rules: { |
|||
name: [ |
|||
{ required: true, message: "请输入名称", trigger: "blur" }, |
|||
{ max: 20, message: "名称最长为20个字符", trigger: "blur" }, |
|||
], |
|||
wagaCode: [ |
|||
{ required: true, message: "请选择水闸", trigger: "change" }, |
|||
], |
|||
doneTime: [ |
|||
{ required: true, message: "请选择时间", trigger: "change" }, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
computed: { |
|||
// 计算巡查人员 |
|||
computedPatrolId: { |
|||
get() { |
|||
return this.ruleForm.patrolUid?.split(",")?.filter((v) => !!v) || []; |
|||
}, |
|||
set(val) { |
|||
this.ruleForm.patrolUid = val.join(","); |
|||
this.ruleForm.patrolName = this.personnelList |
|||
.filter((v) => val.includes(v.id)) |
|||
.map((v) => v.nickName) |
|||
.join(","); |
|||
}, |
|||
}, |
|||
// 计算wagaCode |
|||
computedWagaCode: { |
|||
get() { |
|||
return this.ruleForm.wagaCode?.split(",")?.filter((v) => !!v) || []; |
|||
}, |
|||
set(val) { |
|||
this.ruleForm.wagaCode = val.join(","); |
|||
this.ruleForm.wagaName = this.projectList |
|||
.filter((v) => val.includes(v.wagaCode)) |
|||
.map((v) => v.wagaName) |
|||
.join(","); |
|||
}, |
|||
}, |
|||
// 计算时间差 |
|||
computedTimes: { |
|||
get() { |
|||
return [this.ruleForm.startTime || "", this.ruleForm.doneTime || ""]; |
|||
}, |
|||
set(val) { |
|||
this.ruleForm.startTime = val[0] ? val[0] + " 00:00:00" : ""; |
|||
this.ruleForm.doneTime = val[1] ? val[1] + " 23:59:59" : ""; |
|||
}, |
|||
}, |
|||
// 计算任务工时 |
|||
computedTaskTimes() { |
|||
if (this.ruleForm.startTime && this.ruleForm.doneTime) { |
|||
return ( |
|||
dayjs(this.ruleForm.doneTime).diff( |
|||
dayjs(this.ruleForm.startTime), |
|||
"day" |
|||
) + 1 |
|||
); |
|||
} |
|||
return ""; |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 获取详情 |
|||
getDetails() { |
|||
getSuperviseWayTaskDetailsData(this.$route.query.id).then((res) => { |
|||
if (res) { |
|||
this.ruleForm = res.data; |
|||
this.ruleForm.wayId = res.data?.wayId; |
|||
} |
|||
}); |
|||
}, |
|||
// 打开新增弹窗 |
|||
openAddDialog() {}, |
|||
// 搜索用户 |
|||
searchUser(e = null) { |
|||
listUser({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "nickName", |
|||
type: "like", |
|||
value: e, |
|||
}, |
|||
pageSize: 100, |
|||
pageNum: 1, |
|||
}).then((res) => { |
|||
this.personnelList = res.records; |
|||
}); |
|||
}, |
|||
// 重置校验 |
|||
resetForm(formName) { |
|||
this.$refs[formName].resetFields(); |
|||
this.dialogVisible = false; |
|||
}, |
|||
// 关闭dialog |
|||
handleClose(ruleForm = "ruleForm") { |
|||
console.log("关闭"); |
|||
this.$refs[ruleForm].resetFields(); |
|||
this.ruleForm = { |
|||
wagaCode: [], |
|||
dikeName: "", |
|||
name: "", |
|||
type: "", |
|||
instruction: "", |
|||
month: "", |
|||
details: [], |
|||
cycleType: "", |
|||
isReminder: true, |
|||
selectUser: [], |
|||
otherConfig: { |
|||
selectUser: [], |
|||
week: "", |
|||
day: "", |
|||
}, |
|||
week: 1, |
|||
date: 1, |
|||
reminderTime: "", |
|||
}; |
|||
}, |
|||
// 获取启用中的检查项数据 |
|||
getTableData() { |
|||
getEnableSuperviseWayData().then((res) => { |
|||
if (res) { |
|||
this.ruleForm.wayId = res.data?.id; |
|||
this.enableSupervisionWayData = res.data?.itemList || []; |
|||
} |
|||
}); |
|||
}, |
|||
// 获取工程列表 |
|||
getProjectList() { |
|||
getRunProjectList({ |
|||
data: { |
|||
pageNum: this.pageData.pageNum, |
|||
pageSize: this.pageData.pageSize, |
|||
wagaName: "", |
|||
}, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.projectList = res.records; |
|||
} |
|||
}); |
|||
}, |
|||
// 删除 |
|||
handleDel(row) { |
|||
console.log("row >>>>> ", row); |
|||
}, |
|||
// 提交表单 |
|||
handleSubmit() { |
|||
this.$refs.ruleForm.validate((valid) => { |
|||
if (valid) { |
|||
// 提交表单,二次确认 |
|||
this.$confirm("确认提交吗?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning", |
|||
}) |
|||
.then(() => { |
|||
if (this.$route.query.id) { |
|||
// 编辑 |
|||
putSuperviseWayTaskDetailsData( |
|||
this.ruleForm, |
|||
this.$route.query.id |
|||
).then((res) => { |
|||
if (res) { |
|||
this.$message({ |
|||
message: "提交成功", |
|||
type: "success", |
|||
}); |
|||
this.$router.go(-1); |
|||
} |
|||
}); |
|||
} else { |
|||
// 新增 |
|||
addNewSuperviseWayTasksData(this.ruleForm).then((res) => { |
|||
if (res) { |
|||
this.$message({ |
|||
message: "提交成功", |
|||
type: "success", |
|||
}); |
|||
this.$router.go(-1); |
|||
} |
|||
}); |
|||
} |
|||
}) |
|||
.catch(() => { |
|||
// 取消提交 |
|||
this.$message({ |
|||
type: "info", |
|||
message: "已取消提交", |
|||
}); |
|||
}); |
|||
} else { |
|||
console.log("error submit!!"); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
created() { |
|||
this.getProjectList(); |
|||
this.searchUser(); |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData(); |
|||
if (this.$route.query.id) { |
|||
this.getDetails(); |
|||
} |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body slider-right"> |
|||
<div class="top-title">基础信息管理</div> |
|||
<div class="content-box"> |
|||
<div class="flex justify-between mb-12"> |
|||
<el-button |
|||
style="width: 120px" |
|||
type="primary" |
|||
@click="handleSubmit" |
|||
size="small" |
|||
>确认</el-button |
|||
> |
|||
<el-button @click="$router.go(-1)" size="small">返回</el-button> |
|||
</div> |
|||
<div class="title">新增/编辑检查项</div> |
|||
<div class="font-14"> |
|||
<el-form |
|||
:model="ruleForm" |
|||
:rules="rules" |
|||
ref="ruleForm" |
|||
label-width="100px" |
|||
> |
|||
<el-form-item label-width="120px" label="检查任务名称" prop="name"> |
|||
<el-input |
|||
style="width: 240px" |
|||
v-model="ruleForm.name" |
|||
placeholder="请输入" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="水闸名称" prop="wagaCode"> |
|||
<el-select |
|||
style="width: 240px" |
|||
multiple |
|||
v-model="computedWagaCode" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in projectList" |
|||
:key="item.id" |
|||
:label="item.wagaName" |
|||
:value="item.wagaCode" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
<span class="ml-24">水闸代码</span> |
|||
<el-input |
|||
style="width: 240px" |
|||
class="ml-12" |
|||
:value="ruleForm.wagaCode" |
|||
placeholder="请选择" |
|||
:disabled="true" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label-width="120px" |
|||
label="开始结束时间" |
|||
prop="doneTime" |
|||
> |
|||
<el-date-picker |
|||
v-model="computedTimes" |
|||
type="daterange" |
|||
style="width: 240px" |
|||
value-format="yyyy-MM-dd" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
> |
|||
</el-date-picker> |
|||
<span class="ml-24">任务工时</span> |
|||
<el-input |
|||
style="width: 240px" |
|||
class="ml-12" |
|||
:value="computedTaskTimes" |
|||
placeholder="请选择开始结束时间" |
|||
:disabled="true" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="检查人员" prop="patrolUid"> |
|||
<el-select |
|||
style="width: 240px" |
|||
v-model="computedPatrolId" |
|||
multiple |
|||
filterable |
|||
remote |
|||
:remote-method="searchUser" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in personnelList" |
|||
:key="item.id" |
|||
:label="item.nickName" |
|||
:value="item.id" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="检查任务背景" prop="content"> |
|||
<el-input |
|||
v-model="ruleForm.content" |
|||
type="textarea" |
|||
:rows="5" |
|||
placeholder=" 请输入" |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table |
|||
style="margin-bottom: 22px" |
|||
max-height="330" |
|||
:data="enableSupervisionWayData" |
|||
border |
|||
> |
|||
<el-table-column |
|||
type="index" |
|||
align="center" |
|||
label="序号" |
|||
width="50" |
|||
/> |
|||
<el-table-column |
|||
width="300" |
|||
prop="projectName" |
|||
align="center" |
|||
label="检查部位" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column prop="content" align="center" label="检查内容"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</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; |
|||
} |
|||
|
|||
.content-box { |
|||
width: 100%; |
|||
min-height: calc(100vh - 56px - 64px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
background-color: white; |
|||
.title { |
|||
font-size: 16px; |
|||
font-weight: 700; |
|||
margin-bottom: 12px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
Loading…
Reference in new issue