潘裕艺
1 year ago
21 changed files with 4776 additions and 843 deletions
@ -0,0 +1,193 @@ |
|||
<!-- 水雨情监测页面 --> |
|||
<template> |
|||
<div class="patrol-manage-page"> |
|||
<div class="top-title">水雨情监测</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>监测时间：</span> |
|||
<el-date-picker |
|||
v-model="searchDateArr" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
value-format="yyyy-MM-DD" |
|||
> |
|||
</el-date-picker> |
|||
<span class="ml-12">水位高度：</span> |
|||
<el-input |
|||
class="search-input" |
|||
v-model="searchWaterLevel" |
|||
placeholder="请输入数字" |
|||
></el-input> |
|||
<el-button class="!ml-10" type="success" @click="getTableData()" |
|||
>搜索</el-button |
|||
> |
|||
<el-button @click="resetSearch()">重置</el-button> |
|||
</div> |
|||
<el-table class="mt-16" height="625" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="80" /> |
|||
<el-table-column prop="dikeName" align="center" label="堤防名称" /> |
|||
<el-table-column prop="dikeGrad" align="center" label="堤防级别"> |
|||
<template #default="{ row }">{{ |
|||
getDikeGrad(row.dikeGrad) |
|||
}}</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dikeType" align="center" label="堤防类别" /> |
|||
<el-table-column prop="dikeLen" align="center" label="堤防长度" /> |
|||
<el-table-column prop="project" align="center" label="起/终点所在地" /> |
|||
<el-table-column |
|||
prop="engineeringManagementUnit" |
|||
align="center" |
|||
label="工程管理单位" |
|||
/> |
|||
<el-table-column prop="operate" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<!-- <el-button type="text" size="small">处置</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="getTableData()" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getAreasData } from "@/api/areas/index"; |
|||
import { regionData, codeToText, TextToCode } from "element-china-area-data"; |
|||
|
|||
import { getDikeWaterRainRecordsList, postProjectChecking } from "@/api/dike"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
searchDateArr: [], |
|||
searchWaterLevel: null, |
|||
pageData: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
total: 0, |
|||
}, |
|||
dikeTypeList: [], // 堤防类型列表 |
|||
dikeGradList: [], // 堤防级别列表 |
|||
tableData: [], |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("embankment_level").then((response) => { |
|||
this.dikeGradList = response.data; |
|||
}); |
|||
this.getDicts("embankment_type").then((response) => { |
|||
this.dikeTypeList = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.getTableData(); |
|||
this.getTreeData(); |
|||
}, |
|||
methods: { |
|||
// 获取列表信息 |
|||
getTableData() { |
|||
getDikeWaterRainRecordsList({ |
|||
pageNum: this.pageData.pageNum, |
|||
pageSize: this.pageData.pageSize, |
|||
data: { |
|||
dikeCode: this.$route.query.dikeCode, |
|||
startTime: this.searchDateArr[0] |
|||
? this.searchDateArr[0] + " 00:00:00" |
|||
: "", |
|||
endTime: this.searchDateArr[1] |
|||
? this.searchDateArr[1] + " 23:59:59" |
|||
: "", |
|||
waterLevel: this.searchWaterLevel || null, |
|||
}, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records; |
|||
this.pageData.total = res.total; |
|||
} |
|||
}); |
|||
}, |
|||
// 重置搜索条件 |
|||
resetSearch() { |
|||
this.searchDikeName = ""; |
|||
this.getTableData(); |
|||
}, |
|||
|
|||
// 获取地区树数据 |
|||
getTreeData() { |
|||
getAreasData().then((items) => { |
|||
if (items?.data) { |
|||
let res = []; |
|||
let getChildren = (res, pid) => { |
|||
for (const i of items.data) { |
|||
if (i.parentid === pid) { |
|||
const newItem = { |
|||
label: i.name, |
|||
value: i.id, |
|||
}; |
|||
if (i.layer != 3) newItem.children = []; |
|||
res.push(newItem); |
|||
getChildren(newItem.children, newItem.value); |
|||
} |
|||
} |
|||
}; |
|||
getChildren(res, items.data[0].parentid); |
|||
this.areasOptions = res; |
|||
} |
|||
}); |
|||
}, |
|||
getDikeGrad(key) { |
|||
return ( |
|||
this.dikeGradList?.filter((v) => v.dictValue === key)?.[0]?.dictLabel || |
|||
key |
|||
); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.patrol-manage-page { |
|||
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; |
|||
|
|||
.search-input { |
|||
width: 202px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,228 @@ |
|||
<!-- 水雨情智能分析页面 --> |
|||
<template> |
|||
<div class="patrol-manage-page"> |
|||
<div class="top-title">水雨情智能分析</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>起/终点所在地：</span> |
|||
<el-cascader |
|||
:options="areasOptions" |
|||
v-model="paramsData.startArea" |
|||
:props="areasOptionProps" |
|||
placeholder="请选择" |
|||
clearable |
|||
size="small" |
|||
> |
|||
</el-cascader> |
|||
<span>-</span> |
|||
<el-cascader |
|||
:options="areasOptions" |
|||
v-model="paramsData.endArea" |
|||
:props="areasOptionProps" |
|||
placeholder="请选择" |
|||
clearable |
|||
size="small" |
|||
> |
|||
</el-cascader> |
|||
|
|||
<span class="ml-12">堤防名称：</span> |
|||
<el-input |
|||
class="search-input" |
|||
v-model="searchDikeName" |
|||
placeholder="请输入" |
|||
></el-input> |
|||
<el-button class="!ml-10" type="success" @click="getTableData()" |
|||
>搜索</el-button |
|||
> |
|||
<el-button @click="resetSearch()">重置</el-button> |
|||
</div> |
|||
<el-table class="mt-16" height="625" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="80" /> |
|||
<el-table-column prop="dikeName" align="center" label="堤防名称" /> |
|||
<el-table-column prop="dikeGrad" align="center" label="堤防级别"> |
|||
<template #default="{ row }">{{ |
|||
getDikeGrad(row.dikeGrad) |
|||
}}</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dikeType" align="center" label="堤防类别" /> |
|||
<el-table-column prop="dikeLen" align="center" label="堤防长度" /> |
|||
<el-table-column prop="project" align="center" label="起/终点所在地" /> |
|||
<el-table-column |
|||
prop="engineeringManagementUnit" |
|||
align="center" |
|||
label="工程管理单位" |
|||
/> |
|||
<el-table-column prop="operate" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<!-- <el-button type="text" size="small">处置</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="getTableData()" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getAreasData } from "@/api/areas/index"; |
|||
import { regionData, codeToText, TextToCode } from "element-china-area-data"; |
|||
|
|||
import { getDikeWaterRainProjectList } from "@/api/dike"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
areasOptionProps: { |
|||
emitPath: false, |
|||
checkStrictly: true, //选择任意一级 |
|||
}, |
|||
pageData: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
total: 0, |
|||
}, |
|||
paramsData: { |
|||
startArea: "", |
|||
endArea: "", |
|||
dikeGrad: "", |
|||
dikeName: "", |
|||
}, |
|||
areasOptions: [], |
|||
searchDikeName: "", |
|||
dikeTypeList: [], // 堤防类型列表 |
|||
dikeGradList: [], // 堤防级别列表 |
|||
tableData: [], |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("embankment_level").then((response) => { |
|||
this.dikeGradList = response.data; |
|||
}); |
|||
this.getDicts("embankment_type").then((response) => { |
|||
this.dikeTypeList = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.getTableData(); |
|||
this.getTreeData(); |
|||
}, |
|||
methods: { |
|||
// 获取列表信息 |
|||
getTableData() { |
|||
getDikeWaterRainProjectList({ |
|||
pageNum: this.pageData.pageNum, |
|||
pageSize: this.pageData.pageSize, |
|||
data: { |
|||
dikeType: this.dikeType || "", |
|||
dikeName: this.searchDikeName || "", |
|||
}, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records; |
|||
this.pageData.total = res.total; |
|||
} |
|||
}); |
|||
}, |
|||
// 重置搜索条件 |
|||
resetSearch() { |
|||
this.searchDikeName = ""; |
|||
this.getTableData(); |
|||
}, |
|||
// 水雨情监测 |
|||
handleGoReport(row) { |
|||
this.$router.push({ |
|||
path: "inspectionPlan", |
|||
query: { |
|||
dikeCode: row.dikeCode, |
|||
dikeName: row.dikeName, |
|||
}, |
|||
}); |
|||
}, |
|||
// 智能分析 |
|||
handleGoAnalyse(row) { |
|||
this.$router.push({ |
|||
path: "inspectionRecords", |
|||
query: { |
|||
dikeCode: row.dikeCode, |
|||
dikeName: row.dikeName, |
|||
}, |
|||
}); |
|||
}, |
|||
// 获取地区树数据 |
|||
getTreeData() { |
|||
getAreasData().then((items) => { |
|||
if (items?.data) { |
|||
let res = []; |
|||
let getChildren = (res, pid) => { |
|||
for (const i of items.data) { |
|||
if (i.parentid === pid) { |
|||
const newItem = { |
|||
label: i.name, |
|||
value: i.id, |
|||
}; |
|||
if (i.layer != 3) newItem.children = []; |
|||
res.push(newItem); |
|||
getChildren(newItem.children, newItem.value); |
|||
} |
|||
} |
|||
}; |
|||
getChildren(res, items.data[0].parentid); |
|||
this.areasOptions = res; |
|||
} |
|||
}); |
|||
}, |
|||
getDikeGrad(key) { |
|||
return ( |
|||
this.dikeGradList?.filter((v) => v.dictValue === key)?.[0]?.dictLabel || |
|||
key |
|||
); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.patrol-manage-page { |
|||
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; |
|||
|
|||
.search-input { |
|||
width: 202px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,3 @@ |
|||
<template> |
|||
<router-view /> |
|||
</template> |
|||
@ -0,0 +1,84 @@ |
|||
<template> |
|||
<div class="body slider-right"> |
|||
<div class="top-title">基础信息管理</div> |
|||
<div class="method-details-page"> |
|||
<div class="flex justify-between items-center"> |
|||
<el-button type="primary">{{ |
|||
fileUrl ? "重新上传" : "上传文件" |
|||
}}</el-button> |
|||
<span v-if="editTitle"> |
|||
<el-input class="input" v-model="title"></el-input> |
|||
<i |
|||
class="el-icon-check cursor-pointer ml-4 font-16" |
|||
style="color: #409eff" |
|||
@click="editTitle = !editTitle" |
|||
></i> |
|||
</span> |
|||
<span v-else |
|||
>{{ title }} |
|||
<i |
|||
class="el-icon-edit cursor-pointer ml-4 font-16" |
|||
style="color: #409eff" |
|||
@click="editTitle = !editTitle" |
|||
></i |
|||
></span> |
|||
<el-button @click="$router.go(-1)">返回</el-button> |
|||
</div> |
|||
<div class="pdf-preview"> |
|||
<object |
|||
v-if="fileUrl" |
|||
class="pdf-box" |
|||
:data="fileUrl" |
|||
type="application/pdf" |
|||
></object> |
|||
<div v-else style="color: #333">暂无文件，请上传</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
fileUrl: "", //http://gateway.product.dev.com:30115/data-platform-ui/objs/http://minio:9000/data-platform-protocol-model/20240229/11b754af7aef4dc6bff17d5e0bcd919e.pdf |
|||
editTitle: false, |
|||
title: "标题", |
|||
}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.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; |
|||
} |
|||
.method-details-page { |
|||
margin-top: 20px; |
|||
background-color: #fff; |
|||
padding: 20px; |
|||
height: calc(100% - 56px); |
|||
.pdf-preview { |
|||
height: calc(100% - 50px); |
|||
margin-top: 20px; |
|||
.pdf-box { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
.input { |
|||
width: 200px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,257 @@ |
|||
<!-- 监督检查办法管理-水闸 --> |
|||
<script> |
|||
import { |
|||
putDFPreventionControlPlan, |
|||
deleteDFMaintenancePlan, |
|||
postDFNewPreventionControlPlan, |
|||
getDFPreventionControlPlan, |
|||
listUser, |
|||
} from "@/api/management"; |
|||
import { listDikeInfo } from "@/api/yg/dikeInfo"; |
|||
import { getSuperviseWayList } from "@/api/sluice"; |
|||
|
|||
export default { |
|||
name: "InspectionItems", |
|||
data() { |
|||
return { |
|||
paramsData: { |
|||
name: "", |
|||
type: null, |
|||
dikeName: "", |
|||
selectLevel: "", |
|||
selectType: "", |
|||
}, |
|||
dialogVisible: false, |
|||
prohibitEditing: false, |
|||
dikeTypeList: [], |
|||
personnelList: [], // 人员列表 |
|||
patrolType: [], // 提醒周期类型 |
|||
workMonth: [], // 工作月份 |
|||
embankmentList: [], //水闸列表 |
|||
controlType: [], // 防治类型 |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
}; |
|||
}, |
|||
watch: { |
|||
dialogVisible(newVal, oldVal) { |
|||
if (oldVal) { |
|||
this.prohibitEditing = false; |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 跳转新增页面 |
|||
addMethod() { |
|||
this.$router.push("methodManageDetails"); |
|||
}, |
|||
// 删除对应防治计划 |
|||
deleteTableItem(row) { |
|||
deleteDFMaintenancePlan(row.id).then((res) => { |
|||
this.getTableData(); |
|||
this.$message.success("删除成功"); |
|||
}); |
|||
}, |
|||
// 删除对应工作内容 |
|||
deleteWorkTableItem(id) { |
|||
const index = this.workTable.findIndex((item) => item.id === id); |
|||
if (index !== -1) { |
|||
this.workTable.splice(index, 1); |
|||
} |
|||
}, |
|||
// 获取列表数据 |
|||
getTableData() { |
|||
getSuperviseWayList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value: this.name, |
|||
}, |
|||
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.name = ""; |
|||
this.selectStatus = "2"; |
|||
this.getTableData(); |
|||
}, |
|||
// 获取水闸列表信息 |
|||
getEmbData() { |
|||
listDikeInfo({ |
|||
pageNum: 1, |
|||
pageSize: 20, |
|||
ids: null, |
|||
data: { |
|||
embankmentName: null, |
|||
endStationNumber: null, |
|||
embankmentType: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sort: "desc", |
|||
}, |
|||
}).then((res) => { |
|||
this.embankmentList = res?.records || []; |
|||
}); |
|||
}, |
|||
// 跳转办法配置 |
|||
handleToItemsList(row) { |
|||
this.$router.push({ |
|||
path: "methodsItemsList", |
|||
query: { |
|||
id: row.id, |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
created() { |
|||
this.getDicts("embankment_type").then((response) => { |
|||
this.dikeTypeList = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData(); |
|||
this.getEmbData(); |
|||
this.getDicts("dh_jh_type").then((res) => { |
|||
this.controlType = res.data; |
|||
}); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body slider-right"> |
|||
<div class="top-title">基础信息管理</div> |
|||
<div class="table-box"> |
|||
<el-button |
|||
class="search-btn" |
|||
style="margin-right: 16px; margin-bottom: 8px; float: right" |
|||
type="success" |
|||
@click="addMethod()" |
|||
>添加</el-button |
|||
> |
|||
<el-table class="table" height="640" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="60" /> |
|||
<el-table-column prop="name" align="center" label="名称" /> |
|||
<el-table-column prop="createTime" align="center" label="发布时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="updateTime" align="center" label="更新时间" /> |
|||
<el-table-column |
|||
prop="status" |
|||
align="center" |
|||
sortable |
|||
label="当前状态" |
|||
/> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="small">编辑</el-button> |
|||
<el-button type="text" size="small">预览</el-button> |
|||
<el-button type="text" size="small">导出</el-button> |
|||
<el-button type="text" size="small">复制</el-button> |
|||
<el-button |
|||
type="text" |
|||
size="small" |
|||
@click="handleToItemsList(scope.row)" |
|||
>配置数据项</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="getTableData()" |
|||
> |
|||
</el-pagination> |
|||
</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; |
|||
|
|||
.top-search { |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 202px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
} |
|||
} |
|||
|
|||
.search-btn { |
|||
margin-left: 10px; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/deep/.el-input__count { |
|||
height: 15px; |
|||
line-height: 15px; |
|||
margin-right: 10px; |
|||
margin-bottom: -4px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,186 @@ |
|||
<template> |
|||
<div class="body slider-right"> |
|||
<div class="top-title">基础信息管理</div> |
|||
<div class="method-details-page"> |
|||
<div class="flex justify-between items-center"> |
|||
<span v-if="editTitle"> |
|||
<el-input class="input" v-model="title"></el-input> |
|||
<i |
|||
class="el-icon-check cursor-pointer ml-4 font-16" |
|||
style="color: #409eff" |
|||
@click="editTitle = !editTitle" |
|||
></i> |
|||
</span> |
|||
<span v-else |
|||
>{{ title }} |
|||
<i |
|||
class="el-icon-edit cursor-pointer ml-4 font-16" |
|||
style="color: #409eff" |
|||
@click="editTitle = !editTitle" |
|||
></i |
|||
></span> |
|||
<el-button @click="$router.go(-1)" size="small">返回</el-button> |
|||
</div> |
|||
<div class="flex items-center mt-12"> |
|||
<span class="flex-shrink-0 font-14">内容检索</span> |
|||
<el-input |
|||
style="width: 180px; margin-left: 12px" |
|||
v-model="searchVal" |
|||
placeholder="请输入" |
|||
/> |
|||
<el-button type="primary" size="small" class="!ml-10">检索</el-button> |
|||
</div> |
|||
<div class="table-box"> |
|||
<el-row class="item-row"> |
|||
<el-col :span="2"> |
|||
<div class="item-row-content">序号</div> |
|||
</el-col> |
|||
<el-col :span="3"> |
|||
<div class="item-row-content">检查项目</div> |
|||
</el-col> |
|||
<el-col :span="11"> |
|||
<div class="item-row-content">问题描述</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="item-row-content item-row-content2"> |
|||
<div class="title-1">问题等级</div> |
|||
<div class="flex w-full title-2"> |
|||
<div class="flex-1 text-center items-center pt-4 pb-4"> |
|||
一般 |
|||
</div> |
|||
<div class="flex-1 text-center items-center pt-4 pb-4"> |
|||
较重 |
|||
</div> |
|||
<div class="flex-1 text-center items-center pt-4 pb-4"> |
|||
严重 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="2"> |
|||
<div class="item-row-content">操作</div> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row class="item-row" v-for="(item, index) in list" :key="item"> |
|||
<el-col :span="2"> |
|||
<div class="item-row-content">2</div> |
|||
</el-col> |
|||
<el-col :span="3"> |
|||
<div class="item-row-content">12122</div> |
|||
</el-col> |
|||
<el-col :span="11"> |
|||
<div class="item-row-content"> |
|||
<div>这是内容</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<div class="item-row-content item-row-content2"> |
|||
<div class="flex w-full title-2 h-full"> |
|||
<div class="flex-1 text-center items-center pt-4 pb-4"> |
|||
一般 |
|||
</div> |
|||
<div class="flex-1 text-center items-center pt-4 pb-4"> |
|||
较重 |
|||
</div> |
|||
<div class="flex-1 text-center items-center pt-4 pb-4"> |
|||
严重 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="2"> |
|||
<div class="item-row-content"> |
|||
<el-button type="text" v-if="index == 0">添加</el-button> |
|||
<el-button type="text" v-else>修改</el-button> |
|||
<el-button type="text">删除</el-button> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
editTitle: false, |
|||
title: "标题", |
|||
searchVal: "", |
|||
list: [ |
|||
{ |
|||
pro: "项目A", |
|||
questions: ["问题描述111"], |
|||
questionLevel: { |
|||
1: "实例1", |
|||
2: "实例2 ", |
|||
3: "实例3", |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
created() {}, |
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.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; |
|||
} |
|||
.method-details-page { |
|||
margin-top: 20px; |
|||
background-color: #fff; |
|||
padding: 20px; |
|||
height: calc(100% - 56px); |
|||
.table-box { |
|||
border: 1px solid #ccc; |
|||
border-radius: 4px; |
|||
margin-top: 12px; |
|||
.item-row { |
|||
display: flex; |
|||
.el-col { |
|||
box-sizing: border-box; |
|||
} |
|||
.item-row-content { |
|||
padding: 10px; |
|||
border: 1px solid #ccc; |
|||
height: 100%; |
|||
} |
|||
.item-row-content2 { |
|||
padding: 0; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
.title-1 { |
|||
width: 100%; |
|||
padding: 4px; |
|||
text-align: center; |
|||
border-bottom: 1px solid #ccc; |
|||
} |
|||
.title-2 { |
|||
border-top: 1px solid #ccc; |
|||
& > *:nth-of-type(2) { |
|||
border-left: 2px solid #ccc; |
|||
border-right: 2px solid #ccc; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.input { |
|||
width: 200px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,162 @@ |
|||
<template> |
|||
<div class="body slider-right"> |
|||
<div class="top-title">基础信息管理</div> |
|||
<div class="items-list-page"> |
|||
<div class="pl-20 pr-20 pt-20 flex justify-between"> |
|||
<el-button type="primary" @click="handleAddNew">新增项目</el-button> |
|||
<el-button @click="$router.go(-1)">返回</el-button> |
|||
</div> |
|||
<div class="items-list-box"> |
|||
<div |
|||
v-for="item in listData" |
|||
:key="item.id" |
|||
class="items-list-item" |
|||
@click="handleToItemsSetting" |
|||
> |
|||
<div class="font-14 font-bold">{{ item.name }}</div> |
|||
<div class="font-12 mt-12">2024-2-29 17:30:59</div> |
|||
<i class="el-icon-error font-14 del-btn" @click.stop="() => {}"></i> |
|||
</div> |
|||
<div |
|||
v-if="!listData || !listData.length" |
|||
style="color: #333" |
|||
class="text-center pt-30" |
|||
> |
|||
-暂无数据- |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 弹窗 --> |
|||
<el-dialog |
|||
title="新增项目" |
|||
@close="handleClose" |
|||
:visible.sync="showAddDialog" |
|||
:close-on-click-modal="false" |
|||
width="640px" |
|||
> |
|||
<el-form |
|||
:model="ruleForm" |
|||
:rules="rules" |
|||
ref="ruleForm" |
|||
label-width="60px" |
|||
class="" |
|||
> |
|||
<el-form-item label="名称" prop="name"> |
|||
<el-input v-model="ruleForm.name"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
|
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button size="mini" @click="handleClose()">取 消</el-button> |
|||
<el-button size="mini" type="primary" @click="submitForm()" |
|||
>保存</el-button |
|||
> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
showAddDialog: false, |
|||
listData: [], |
|||
ruleForm: { |
|||
name: "", |
|||
}, |
|||
rules: { |
|||
name: [{ required: true, message: "请输入项目名称", trigger: "blur" }], |
|||
}, |
|||
}; |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
handleAddNew() { |
|||
this.showAddDialog = true; |
|||
}, |
|||
handleClose() { |
|||
this.$refs.ruleForm.resetFields(); |
|||
this.showAddDialog = false; |
|||
}, |
|||
submitForm() { |
|||
this.$refs.ruleForm.validate((valid) => { |
|||
if (valid) { |
|||
this.listData.push({ |
|||
id: Math.random() * 10, |
|||
name: this.ruleForm.name, |
|||
}); |
|||
this.$refs.ruleForm.resetFields(); |
|||
this.showAddDialog = false; |
|||
} |
|||
}); |
|||
}, |
|||
handleToItemsSetting() { |
|||
console.log("??????"); |
|||
this.$router.push({ |
|||
path: "methodsItemsDetails", |
|||
query: {}, |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.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; |
|||
} |
|||
.items-list-page { |
|||
margin-top: 20px; |
|||
background-color: #fff; |
|||
height: calc(100% - 56px); |
|||
} |
|||
.input { |
|||
width: 200px; |
|||
} |
|||
.items-list-box { |
|||
display: grid; |
|||
padding: 16px 20px 24px; |
|||
overflow-y: auto; |
|||
transition: all 0.5s; |
|||
grid-template-columns: repeat(auto-fill, 240px); |
|||
grid-template-rows: repeat(auto-fill, 160px); |
|||
gap: 16px; |
|||
.items-list-item { |
|||
position: relative; |
|||
width: 240px; |
|||
height: 160px; |
|||
padding: 20px; |
|||
border: 1px solid #eee; |
|||
border-radius: 10px; |
|||
cursor: pointer; |
|||
&:hover { |
|||
box-shadow: 0 0 10px #eee; |
|||
.del-btn { |
|||
display: block; |
|||
} |
|||
} |
|||
|
|||
.del-btn { |
|||
display: none; |
|||
position: absolute; |
|||
font-size: 24px; |
|||
z-index: 1; |
|||
right: -8px; |
|||
top: -8px; |
|||
font-weight: 600; |
|||
color: #999; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,793 @@ |
|||
<!-- 监督检查办法管理-堤防 --> |
|||
<script> |
|||
import { |
|||
putDFPreventionControlPlan, |
|||
deleteDFMaintenancePlan, |
|||
postDFNewPreventionControlPlan, |
|||
postDFPreventionControlPlanList, |
|||
getDFPreventionControlPlan, |
|||
listUser, |
|||
} from "@/api/management"; |
|||
import { listDikeInfo } from "@/api/yg/dikeInfo"; |
|||
|
|||
export default { |
|||
name: "InspectionItems", |
|||
data() { |
|||
return { |
|||
searchDikeName: "", |
|||
paramsData: { |
|||
name: "", |
|||
type: null, |
|||
dikeName: "", |
|||
selectLevel: "", |
|||
selectType: "", |
|||
}, |
|||
dialogVisible: false, |
|||
prohibitEditing: false, |
|||
dikeTypeList: [], |
|||
personnelList: [], // 人员列表 |
|||
patrolType: [], // 提醒周期类型 |
|||
workMonth: [], // 工作月份 |
|||
embankmentList: [], //堤防列表 |
|||
dikeLevel: [], // 堤防级别列表 |
|||
controlType: [], // 防治类型 |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
ruleForm: { |
|||
dikeCode: "", |
|||
dikeName: "", |
|||
name: "", |
|||
type: "", |
|||
instruction: "", |
|||
month: "", |
|||
details: [], |
|||
cycleType: "", |
|||
frequency: "", |
|||
operators: [], |
|||
isReminder: 1, |
|||
otherConfig: { |
|||
selectUser: [], |
|||
week: "", |
|||
day: "", |
|||
}, |
|||
reminderTime: "", |
|||
}, |
|||
rules: { |
|||
dikeCode: [ |
|||
{ required: true, message: "请选择堤防名称", trigger: "blur" }, |
|||
], |
|||
name: [ |
|||
{ required: true, message: "请输入防治计划名称", trigger: "blur" }, |
|||
{ max: 100, message: "名称最长为100个字符", trigger: "blur" }, |
|||
], |
|||
type: [ |
|||
{ required: true, message: "请选择防治类型", trigger: "change" }, |
|||
], |
|||
instruction: [ |
|||
{ required: true, message: "请输入防治说明", trigger: "change" }, |
|||
], |
|||
month: [ |
|||
{ required: true, message: "请选择工作月份", trigger: "change" }, |
|||
], |
|||
cycleType: [ |
|||
{ required: true, message: "请选择提醒日期", trigger: "change" }, |
|||
], |
|||
frequency: [ |
|||
{ required: true, message: "请输入次数", trigger: "change" }, |
|||
], |
|||
"otherConfig.selectUser": [ |
|||
{ required: true, message: "请选择责任人", trigger: "change" }, |
|||
], |
|||
"otherConfig.week": [ |
|||
{ required: true, message: "请选择星期", trigger: "change" }, |
|||
], |
|||
"otherConfig.day": [ |
|||
{ required: true, message: "请输入", trigger: "change" }, |
|||
], |
|||
reminderTime: [ |
|||
{ required: true, message: "请选择提醒时间", trigger: "change" }, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
watch: { |
|||
dialogVisible(newVal, oldVal) { |
|||
if (oldVal) { |
|||
this.prohibitEditing = false; |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 获取堤防等级 |
|||
resolveDikeGrad(dikeGrad) { |
|||
return ( |
|||
this.dikeLevel.find((v) => v.dictValue === dikeGrad)?.dictLabel || |
|||
dikeGrad |
|||
); |
|||
}, |
|||
// 获取堤防类型 |
|||
resolveDikeType(dikeType) { |
|||
return ( |
|||
this.dikeTypeList.find((v) => v.dictValue == dikeType)?.dictLabel || |
|||
dikeType |
|||
); |
|||
}, |
|||
// 获取防治类型 |
|||
resolveType(type) { |
|||
return ( |
|||
this.controlType.find((v) => v.dictValue == type)?.dictLabel || type |
|||
); |
|||
}, |
|||
// 打开新增弹窗 |
|||
openAddDialog() { |
|||
// // 获取字典数据 |
|||
// this.getDicts("xc_w_month").then((res) => { |
|||
// this.workMonth = res.data; |
|||
// }); |
|||
// this.getDicts("xs_cycle_type").then((res) => { |
|||
// this.patrolType = res.data; |
|||
// }); |
|||
// if (this.ruleForm.details.length <= 0) { |
|||
// this.ruleForm.details.push({ |
|||
// constructionDate: "", |
|||
// jobContent: "", |
|||
// planDays: 0, |
|||
// }); |
|||
// } |
|||
// this.dialogVisible = true; |
|||
// setTimeout(() => { |
|||
// this.$refs.ruleForm.resetFields(); |
|||
// }, 0); |
|||
}, |
|||
// 删除对应防治计划 |
|||
deleteTableItem(row) { |
|||
deleteDFMaintenancePlan(row.id).then((res) => { |
|||
this.getTableData(); |
|||
this.$message.success("删除成功"); |
|||
}); |
|||
}, |
|||
// 删除对应工作内容 |
|||
deleteWorkTableItem(id) { |
|||
const index = this.workTable.findIndex((item) => item.id === id); |
|||
if (index !== -1) { |
|||
this.workTable.splice(index, 1); |
|||
} |
|||
}, |
|||
// 搜索用户 |
|||
searchUser(e) { |
|||
listUser({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "nickName", |
|||
type: "like", |
|||
value: e, |
|||
}, |
|||
pageSize: 100, |
|||
pageNum: 1, |
|||
}).then((res) => { |
|||
this.personnelList = res.records; |
|||
}); |
|||
}, |
|||
// 查看或编辑计划详情 |
|||
viewOrEditPlanDetails(row, edit = false) { |
|||
if (!edit) { |
|||
this.prohibitEditing = true; |
|||
} |
|||
getDFPreventionControlPlan(row.id).then((res) => { |
|||
this.dialogVisible = true; |
|||
setTimeout(() => { |
|||
this.ruleForm = res.data; |
|||
this.ruleForm.reminderCycle = res.data.instruction + res.data.month; |
|||
}, 30); |
|||
}); |
|||
}, |
|||
changeOtherConfigSelectUser(idsArr) { |
|||
if (idsArr?.length) { |
|||
this.ruleForm.operators = |
|||
this.personnelList |
|||
.filter((v) => idsArr.includes(v.nickName)) |
|||
?.map((v) => ({ |
|||
name: v.nickName, |
|||
uid: v.id, |
|||
})) || []; |
|||
} else { |
|||
this.ruleForm.operators = []; |
|||
} |
|||
}, |
|||
// 保存维修计划 |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
this.ruleForm.cycleType = parseFloat(this.ruleForm.cycleType); |
|||
this.ruleForm.frequency = parseFloat(this.ruleForm.frequency); |
|||
this.ruleForm.month = parseFloat(this.ruleForm.month); |
|||
if (this.ruleForm.id) { |
|||
putDFPreventionControlPlan(this.ruleForm).then(() => { |
|||
this.getTableData(); |
|||
this.dialogVisible = false; |
|||
this.$message({ |
|||
message: "保存成功", |
|||
type: "success", |
|||
}); |
|||
}); |
|||
} else { |
|||
postDFNewPreventionControlPlan(this.ruleForm).then(() => { |
|||
console.log("保存成功"); |
|||
this.getTableData(); |
|||
this.dialogVisible = false; |
|||
this.$message({ |
|||
message: "保存成功", |
|||
type: "success", |
|||
}); |
|||
}); |
|||
} |
|||
} else { |
|||
console.log("校验不通过"); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 重置校验 |
|||
resetForm(formName) { |
|||
this.$refs[formName].resetFields(); |
|||
this.dialogVisible = false; |
|||
}, |
|||
// 关闭dialog |
|||
handleClose(ruleForm = "ruleForm") { |
|||
console.log("关闭"); |
|||
this.$refs[ruleForm].resetFields(); |
|||
this.ruleForm = { |
|||
dikeCode: "", |
|||
dikeName: "", |
|||
name: "", |
|||
type: "", |
|||
instruction: "", |
|||
month: "", |
|||
details: [], |
|||
cycleType: "", |
|||
isReminder: true, |
|||
selectUser: [], |
|||
otherConfig: { |
|||
selectUser: [], |
|||
week: "", |
|||
day: "", |
|||
}, |
|||
week: 1, |
|||
date: 1, |
|||
reminderTime: "", |
|||
}; |
|||
}, |
|||
// 添加工作项 |
|||
addWorkItem() { |
|||
this.ruleForm.details.push({ |
|||
jobContent: "", |
|||
constructionDate: "", |
|||
planDays: "", |
|||
}); |
|||
}, |
|||
// 获取列表数据 |
|||
getTableData() { |
|||
postDFPreventionControlPlanList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
name: this.paramsData.name, |
|||
type: this.paramsData.type, |
|||
dikeName: this.paramsData.dikeName, |
|||
dikeGrad: this.paramsData.dikeGrad, |
|||
dikeType: this.paramsData.dikeType, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value: this.name, |
|||
}, |
|||
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.name = ""; |
|||
this.selectStatus = "2"; |
|||
this.getTableData(); |
|||
}, |
|||
// 打开地图 |
|||
handleOpenMap() {}, |
|||
// 打开详情 |
|||
handleOpenDetail() {}, |
|||
// 获取堤防列表信息 |
|||
getEmbData() { |
|||
listDikeInfo({ |
|||
pageNum: 1, |
|||
pageSize: 20, |
|||
ids: null, |
|||
data: { |
|||
embankmentName: null, |
|||
endStationNumber: null, |
|||
embankmentType: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sort: "desc", |
|||
}, |
|||
}).then((res) => { |
|||
this.embankmentList = res?.records || []; |
|||
}); |
|||
}, |
|||
handleChangeDike(value) { |
|||
console.log("value >>>>> ", value); |
|||
this.ruleForm.name = this.ruleForm.dikeCode; |
|||
let res = this.embankmentList.find((v) => v.dikeCode === value); |
|||
console.log("res >>>>> ", res); |
|||
this.ruleForm.dikeName = res?.dikeName; |
|||
// this.dikeDetailsDialog.id = res?.id || '' |
|||
}, |
|||
// 删除 |
|||
handleDel(row) { |
|||
console.log("row >>>>> ", row); |
|||
}, |
|||
}, |
|||
created() { |
|||
this.getDicts("embankment_type").then((response) => { |
|||
this.dikeTypeList = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData(); |
|||
this.getEmbData(); |
|||
this.getDicts("embankment_level").then((res) => { |
|||
this.dikeLevel = res.data; |
|||
}); |
|||
this.getDicts("dh_jh_type").then((res) => { |
|||
this.controlType = res.data; |
|||
}); |
|||
}, |
|||
}; |
|||
</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="searchDikeName" |
|||
placeholder="请输入名称" |
|||
/> |
|||
<span class="ml-10">管理单位：</span> |
|||
<el-input |
|||
class="search-input ml-10" |
|||
v-model="searchDikeName" |
|||
placeholder="请输入" |
|||
/> |
|||
<span class="ml-10">工程对象：</span> |
|||
<el-input |
|||
class="search-input ml-10" |
|||
v-model="searchDikeName" |
|||
placeholder="请输入" |
|||
/> |
|||
<el-button class="search-btn" type="success">搜索</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="name" align="center" label="检查任务" /> |
|||
<el-table-column prop="createTime" align="center" label="创建时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="updateTime" align="center" label="更新时间" /> |
|||
<el-table-column prop="unit" align="center" label="管理单位" /> |
|||
<el-table-column |
|||
prop="status" |
|||
align="center" |
|||
sortable |
|||
label="当前状态" |
|||
/> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="small">编辑</el-button> |
|||
<el-button type="text" size="small" @click="handleDel(scope.row)" |
|||
>删除</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="getTableData()" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
<!-- 弹窗 --> |
|||
<el-dialog |
|||
title="新增/编辑防治计划" |
|||
@close="handleClose" |
|||
:visible.sync="dialogVisible" |
|||
:close-on-click-modal="false" |
|||
width="720px" |
|||
> |
|||
<div style="display: flex; margin-bottom: 16px"> |
|||
<div |
|||
style=" |
|||
width: 5px; |
|||
height: 16px; |
|||
background-color: #31a08e; |
|||
margin-right: 8px; |
|||
" |
|||
></div> |
|||
<span style="font-weight: 600">基础信息</span> |
|||
</div> |
|||
<el-form |
|||
:model="ruleForm" |
|||
:rules="rules" |
|||
ref="ruleForm" |
|||
label-width="100px" |
|||
> |
|||
<el-form-item label-width="120px" label="堤防名称" prop="dikeCode"> |
|||
<!-- <el-input style="width: 202px;" v-model="ruleForm.dikeCode" placeholder="请输入" :disabled="prohibitEditing" /> --> |
|||
<el-select |
|||
v-model="ruleForm.dikeCode" |
|||
placeholder="请选择" |
|||
@change="handleChangeDike" |
|||
:disabled="prohibitEditing" |
|||
> |
|||
<el-option |
|||
v-for="item in embankmentList" |
|||
:label="item.dikeName" |
|||
:value="item.dikeCode" |
|||
:key="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
<el-button |
|||
:disabled="!ruleForm.dikeCode" |
|||
class="!m-6" |
|||
type="success" |
|||
size="small" |
|||
@click="handleOpenDetail" |
|||
>详情</el-button |
|||
> |
|||
<el-button |
|||
:disabled="!ruleForm.dikeCode" |
|||
class="!ml-6" |
|||
type="success" |
|||
size="small" |
|||
@click="handleOpenMap" |
|||
>打开地图</el-button |
|||
> |
|||
</el-form-item> |
|||
<div style="display: flex"> |
|||
<el-form-item label-width="120px" label="防治计划名称" prop="name"> |
|||
<el-input |
|||
style="width: 202px" |
|||
v-model="ruleForm.name" |
|||
placeholder="请输入" |
|||
:disabled="prohibitEditing" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="防治类型" prop="type"> |
|||
<el-select |
|||
v-model="ruleForm.type" |
|||
placeholder="请选择" |
|||
:disabled="prohibitEditing" |
|||
> |
|||
<el-option |
|||
v-for="item in controlType" |
|||
:key="item.id" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item label-width="120px" label="防治说明" prop="instruction"> |
|||
<el-input |
|||
v-model="ruleForm.instruction" |
|||
type="textarea" |
|||
placeholder=" 请输入" |
|||
:disabled="prohibitEditing" |
|||
/> |
|||
</el-form-item> |
|||
<div style="display: flex; margin-bottom: 16px"> |
|||
<div |
|||
style=" |
|||
width: 5px; |
|||
height: 16px; |
|||
background-color: #31a08e; |
|||
margin-right: 8px; |
|||
" |
|||
></div> |
|||
<span style="font-weight: 600">工作内容</span> |
|||
</div> |
|||
<el-form-item label-width="120px" label="工作月份" prop="month"> |
|||
<el-select |
|||
v-model="ruleForm.month" |
|||
placeholder="请选择" |
|||
:disabled="prohibitEditing" |
|||
> |
|||
<el-option |
|||
v-for="item in workMonth" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="item.id" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-table |
|||
style="margin-bottom: 22px" |
|||
max-height="330" |
|||
:data="ruleForm.details" |
|||
border |
|||
> |
|||
<el-table-column |
|||
type="index" |
|||
align="center" |
|||
label="序号" |
|||
width="50" |
|||
/> |
|||
<el-table-column prop="jobContent" align="center" label="工作内容"> |
|||
<template slot-scope="scope"> |
|||
<el-input |
|||
v-model="scope.row.jobContent" |
|||
placeholder="请输入工作内容" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="constructionDate" |
|||
align="center" |
|||
label="施工日期" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-input |
|||
v-model="scope.row.constructionDate" |
|||
placeholder="请输入施工日期" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="planDays" |
|||
align="center" |
|||
label="计划工日" |
|||
width="80" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-input |
|||
v-model="scope.row.planDays" |
|||
placeholder="请输入计划工日" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="操作" width="100"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
style="margin-right: 9px" |
|||
type="text" |
|||
size="small" |
|||
@click="addWorkItem" |
|||
>添加</el-button |
|||
> |
|||
<el-popconfirm |
|||
confirm-button-text="确定" |
|||
cancel-button-text="取消" |
|||
icon="el-icon-info" |
|||
icon-color="red" |
|||
title="确定删除吗？" |
|||
@confirm="deleteWorkTableItem(scope.row.id)" |
|||
> |
|||
<el-button |
|||
v-if="ruleForm.details.length > 1" |
|||
style="color: red" |
|||
type="text" |
|||
size="small" |
|||
slot="reference" |
|||
>删除</el-button |
|||
> |
|||
</el-popconfirm> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div style="display: flex"> |
|||
<el-form-item label-width="120px" label="提醒周期" prop="frequency"> |
|||
<el-input |
|||
style="width: 90px" |
|||
v-model="ruleForm.frequency" |
|||
placeholder="请输入" |
|||
/> |
|||
/次 |
|||
</el-form-item> |
|||
<el-form-item label-width="10px" prop="cycleType"> |
|||
<el-select |
|||
style="width: 90px" |
|||
v-model="ruleForm.cycleType" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in patrolType" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
/日期 |
|||
</el-form-item> |
|||
<el-form-item |
|||
label-width="100px" |
|||
label="责任人" |
|||
prop="otherConfig.selectUser" |
|||
> |
|||
<el-select |
|||
v-model="ruleForm.otherConfig.selectUser" |
|||
multiple |
|||
filterable |
|||
remote |
|||
:remote-method="searchUser" |
|||
value-key="id" |
|||
placeholder="请输入关键词搜索用户" |
|||
prop="selectUser" |
|||
@change="changeOtherConfigSelectUser" |
|||
> |
|||
<el-option |
|||
v-for="item in personnelList" |
|||
:key="item.id" |
|||
:label="item.nickName" |
|||
:value="item.nickName" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</div> |
|||
<div style="display: flex"> |
|||
<el-form-item label-width="120px" label="消息提醒" prop="isReminder"> |
|||
<el-switch |
|||
v-model="ruleForm.isReminder" |
|||
:active-value="1" |
|||
:inactive-value="0" |
|||
active-color="#31a08e" |
|||
inactive-color="#dcdfe6" |
|||
> |
|||
</el-switch> |
|||
</el-form-item> |
|||
<div style="display: flex; flex-direction: column"> |
|||
<el-form-item |
|||
v-if="ruleForm.isReminder && ruleForm.cycleType === '1'" |
|||
label-width="120px" |
|||
label="提醒时间" |
|||
prop="otherConfig.week" |
|||
> |
|||
<el-radio-group v-model="ruleForm.otherConfig.week"> |
|||
<el-radio :label="1">星期一</el-radio> |
|||
<el-radio :label="2">星期二</el-radio> |
|||
<el-radio :label="3">星期三</el-radio> |
|||
<el-radio :label="4">星期四</el-radio> |
|||
<el-radio :label="5">星期五</el-radio> |
|||
<el-radio :label="6">星期六</el-radio> |
|||
<el-radio :label="7">星期日</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item |
|||
v-if="ruleForm.isReminder && ruleForm.cycleType === '0'" |
|||
label-width="120px" |
|||
label="提醒时间" |
|||
prop="otherConfig.day" |
|||
> |
|||
<div> |
|||
每月<el-input |
|||
style="width: 202px" |
|||
v-model="ruleForm.otherConfig.day" |
|||
/>号 |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label-width="120px" |
|||
:label="ruleForm.cycleType === '2' ? '提醒时间' : ''" |
|||
prop="reminderTime" |
|||
> |
|||
<el-time-picker |
|||
v-model="ruleForm.reminderTime" |
|||
value-format="yyyy-MM-dd hh:mm:ss" |
|||
placeholder="选择时间" |
|||
/> |
|||
</el-form-item> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button size="mini" @click="resetForm('ruleForm')">取 消</el-button> |
|||
<el-button |
|||
v-if="!prohibitEditing" |
|||
size="mini" |
|||
type="primary" |
|||
@click="submitForm('ruleForm')" |
|||
>保存</el-button |
|||
> |
|||
</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; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/deep/.el-input__count { |
|||
height: 15px; |
|||
line-height: 15px; |
|||
margin-right: 10px; |
|||
margin-bottom: -4px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,826 @@ |
|||
<!-- 监督检查办法管理-堤防 --> |
|||
<script> |
|||
import { |
|||
putDFPreventionControlPlan, |
|||
deleteDFMaintenancePlan, |
|||
postDFNewPreventionControlPlan, |
|||
postDFPreventionControlPlanList, |
|||
getDFPreventionControlPlan, |
|||
listUser, |
|||
} from "@/api/management"; |
|||
import { listDikeInfo } from "@/api/yg/dikeInfo"; |
|||
|
|||
export default { |
|||
name: "InspectionItems", |
|||
data() { |
|||
return { |
|||
searchDikeName: "", |
|||
paramsData: { |
|||
name: "", |
|||
type: null, |
|||
dikeName: "", |
|||
selectLevel: "", |
|||
selectType: "", |
|||
}, |
|||
showMoreFilter: false, |
|||
dialogVisible: false, |
|||
prohibitEditing: false, |
|||
dikeTypeList: [], |
|||
personnelList: [], // 人员列表 |
|||
patrolType: [], // 提醒周期类型 |
|||
workMonth: [], // 工作月份 |
|||
embankmentList: [], //堤防列表 |
|||
dikeLevel: [], // 堤防级别列表 |
|||
controlType: [], // 防治类型 |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
ruleForm: { |
|||
dikeCode: "", |
|||
dikeName: "", |
|||
name: "", |
|||
type: "", |
|||
instruction: "", |
|||
month: "", |
|||
details: [], |
|||
cycleType: "", |
|||
frequency: "", |
|||
operators: [], |
|||
isReminder: 1, |
|||
otherConfig: { |
|||
selectUser: [], |
|||
week: "", |
|||
day: "", |
|||
}, |
|||
reminderTime: "", |
|||
}, |
|||
rules: { |
|||
dikeCode: [ |
|||
{ required: true, message: "请选择堤防名称", trigger: "blur" }, |
|||
], |
|||
name: [ |
|||
{ required: true, message: "请输入防治计划名称", trigger: "blur" }, |
|||
{ max: 100, message: "名称最长为100个字符", trigger: "blur" }, |
|||
], |
|||
type: [ |
|||
{ required: true, message: "请选择防治类型", trigger: "change" }, |
|||
], |
|||
instruction: [ |
|||
{ required: true, message: "请输入防治说明", trigger: "change" }, |
|||
], |
|||
month: [ |
|||
{ required: true, message: "请选择工作月份", trigger: "change" }, |
|||
], |
|||
cycleType: [ |
|||
{ required: true, message: "请选择提醒日期", trigger: "change" }, |
|||
], |
|||
frequency: [ |
|||
{ required: true, message: "请输入次数", trigger: "change" }, |
|||
], |
|||
"otherConfig.selectUser": [ |
|||
{ required: true, message: "请选择责任人", trigger: "change" }, |
|||
], |
|||
"otherConfig.week": [ |
|||
{ required: true, message: "请选择星期", trigger: "change" }, |
|||
], |
|||
"otherConfig.day": [ |
|||
{ required: true, message: "请输入", trigger: "change" }, |
|||
], |
|||
reminderTime: [ |
|||
{ required: true, message: "请选择提醒时间", trigger: "change" }, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
watch: { |
|||
dialogVisible(newVal, oldVal) { |
|||
if (oldVal) { |
|||
this.prohibitEditing = false; |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 获取堤防等级 |
|||
resolveDikeGrad(dikeGrad) { |
|||
return ( |
|||
this.dikeLevel.find((v) => v.dictValue === dikeGrad)?.dictLabel || |
|||
dikeGrad |
|||
); |
|||
}, |
|||
// 获取堤防类型 |
|||
resolveDikeType(dikeType) { |
|||
return ( |
|||
this.dikeTypeList.find((v) => v.dictValue == dikeType)?.dictLabel || |
|||
dikeType |
|||
); |
|||
}, |
|||
// 获取防治类型 |
|||
resolveType(type) { |
|||
return ( |
|||
this.controlType.find((v) => v.dictValue == type)?.dictLabel || type |
|||
); |
|||
}, |
|||
// 打开新增弹窗 |
|||
openAddDialog() { |
|||
// // 获取字典数据 |
|||
// this.getDicts("xc_w_month").then((res) => { |
|||
// this.workMonth = res.data; |
|||
// }); |
|||
// this.getDicts("xs_cycle_type").then((res) => { |
|||
// this.patrolType = res.data; |
|||
// }); |
|||
// if (this.ruleForm.details.length <= 0) { |
|||
// this.ruleForm.details.push({ |
|||
// constructionDate: "", |
|||
// jobContent: "", |
|||
// planDays: 0, |
|||
// }); |
|||
// } |
|||
// this.dialogVisible = true; |
|||
// setTimeout(() => { |
|||
// this.$refs.ruleForm.resetFields(); |
|||
// }, 0); |
|||
}, |
|||
// 删除对应防治计划 |
|||
deleteTableItem(row) { |
|||
deleteDFMaintenancePlan(row.id).then((res) => { |
|||
this.getTableData(); |
|||
this.$message.success("删除成功"); |
|||
}); |
|||
}, |
|||
// 删除对应工作内容 |
|||
deleteWorkTableItem(id) { |
|||
const index = this.workTable.findIndex((item) => item.id === id); |
|||
if (index !== -1) { |
|||
this.workTable.splice(index, 1); |
|||
} |
|||
}, |
|||
// 搜索用户 |
|||
searchUser(e) { |
|||
listUser({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "nickName", |
|||
type: "like", |
|||
value: e, |
|||
}, |
|||
pageSize: 100, |
|||
pageNum: 1, |
|||
}).then((res) => { |
|||
this.personnelList = res.records; |
|||
}); |
|||
}, |
|||
// 查看或编辑计划详情 |
|||
viewOrEditPlanDetails(row, edit = false) { |
|||
if (!edit) { |
|||
this.prohibitEditing = true; |
|||
} |
|||
getDFPreventionControlPlan(row.id).then((res) => { |
|||
this.dialogVisible = true; |
|||
setTimeout(() => { |
|||
this.ruleForm = res.data; |
|||
this.ruleForm.reminderCycle = res.data.instruction + res.data.month; |
|||
}, 30); |
|||
}); |
|||
}, |
|||
changeOtherConfigSelectUser(idsArr) { |
|||
if (idsArr?.length) { |
|||
this.ruleForm.operators = |
|||
this.personnelList |
|||
.filter((v) => idsArr.includes(v.nickName)) |
|||
?.map((v) => ({ |
|||
name: v.nickName, |
|||
uid: v.id, |
|||
})) || []; |
|||
} else { |
|||
this.ruleForm.operators = []; |
|||
} |
|||
}, |
|||
// 保存维修计划 |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
this.ruleForm.cycleType = parseFloat(this.ruleForm.cycleType); |
|||
this.ruleForm.frequency = parseFloat(this.ruleForm.frequency); |
|||
this.ruleForm.month = parseFloat(this.ruleForm.month); |
|||
if (this.ruleForm.id) { |
|||
putDFPreventionControlPlan(this.ruleForm).then(() => { |
|||
this.getTableData(); |
|||
this.dialogVisible = false; |
|||
this.$message({ |
|||
message: "保存成功", |
|||
type: "success", |
|||
}); |
|||
}); |
|||
} else { |
|||
postDFNewPreventionControlPlan(this.ruleForm).then(() => { |
|||
console.log("保存成功"); |
|||
this.getTableData(); |
|||
this.dialogVisible = false; |
|||
this.$message({ |
|||
message: "保存成功", |
|||
type: "success", |
|||
}); |
|||
}); |
|||
} |
|||
} else { |
|||
console.log("校验不通过"); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 重置校验 |
|||
resetForm(formName) { |
|||
this.$refs[formName].resetFields(); |
|||
this.dialogVisible = false; |
|||
}, |
|||
// 关闭dialog |
|||
handleClose(ruleForm = "ruleForm") { |
|||
console.log("关闭"); |
|||
this.$refs[ruleForm].resetFields(); |
|||
this.ruleForm = { |
|||
dikeCode: "", |
|||
dikeName: "", |
|||
name: "", |
|||
type: "", |
|||
instruction: "", |
|||
month: "", |
|||
details: [], |
|||
cycleType: "", |
|||
isReminder: true, |
|||
selectUser: [], |
|||
otherConfig: { |
|||
selectUser: [], |
|||
week: "", |
|||
day: "", |
|||
}, |
|||
week: 1, |
|||
date: 1, |
|||
reminderTime: "", |
|||
}; |
|||
}, |
|||
// 添加工作项 |
|||
addWorkItem() { |
|||
this.ruleForm.details.push({ |
|||
jobContent: "", |
|||
constructionDate: "", |
|||
planDays: "", |
|||
}); |
|||
}, |
|||
// 获取列表数据 |
|||
getTableData() { |
|||
postDFPreventionControlPlanList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
name: this.paramsData.name, |
|||
type: this.paramsData.type, |
|||
dikeName: this.paramsData.dikeName, |
|||
dikeGrad: this.paramsData.dikeGrad, |
|||
dikeType: this.paramsData.dikeType, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value: this.name, |
|||
}, |
|||
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.name = ""; |
|||
this.selectStatus = "2"; |
|||
this.getTableData(); |
|||
}, |
|||
// 打开地图 |
|||
handleOpenMap() {}, |
|||
// 打开详情 |
|||
handleOpenDetail() {}, |
|||
// 获取堤防列表信息 |
|||
getEmbData() { |
|||
listDikeInfo({ |
|||
pageNum: 1, |
|||
pageSize: 20, |
|||
ids: null, |
|||
data: { |
|||
embankmentName: null, |
|||
endStationNumber: null, |
|||
embankmentType: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sort: "desc", |
|||
}, |
|||
}).then((res) => { |
|||
this.embankmentList = res?.records || []; |
|||
}); |
|||
}, |
|||
handleChangeDike(value) { |
|||
console.log("value >>>>> ", value); |
|||
this.ruleForm.name = this.ruleForm.dikeCode; |
|||
let res = this.embankmentList.find((v) => v.dikeCode === value); |
|||
console.log("res >>>>> ", res); |
|||
this.ruleForm.dikeName = res?.dikeName; |
|||
// this.dikeDetailsDialog.id = res?.id || '' |
|||
}, |
|||
// 删除 |
|||
handleDel(row) { |
|||
console.log("row >>>>> ", row); |
|||
}, |
|||
}, |
|||
created() { |
|||
this.getDicts("embankment_type").then((response) => { |
|||
this.dikeTypeList = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
// // 获取列表数据 |
|||
// this.getTableData(); |
|||
// this.getEmbData(); |
|||
// this.getDicts("embankment_level").then((res) => { |
|||
// this.dikeLevel = res.data; |
|||
// }); |
|||
// this.getDicts("dh_jh_type").then((res) => { |
|||
// this.controlType = res.data; |
|||
// }); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body slider-right"> |
|||
<div class="top-title">基础信息管理</div> |
|||
<div class="table-box"> |
|||
<div class="flex items-start"> |
|||
<div |
|||
class="flex flex-col filter-list" |
|||
:class="{ 'show-more': showMoreFilter }" |
|||
> |
|||
<div> |
|||
<span>任务名称：</span> |
|||
<el-input |
|||
class="search-input ml-10" |
|||
v-model="searchDikeName" |
|||
placeholder="请输入名称" |
|||
/> |
|||
<span class="ml-10">管理单位：</span> |
|||
<el-input |
|||
class="search-input ml-10" |
|||
v-model="searchDikeName" |
|||
placeholder="请输入" |
|||
/> |
|||
<span class="ml-10">工程对象：</span> |
|||
<el-input |
|||
class="search-input ml-10" |
|||
v-model="searchDikeName" |
|||
placeholder="请输入" |
|||
/> |
|||
</div> |
|||
<div class="mt-12"> |
|||
<span class="">检查项目：</span> |
|||
<el-input |
|||
class="search-input ml-10" |
|||
v-model="searchDikeName" |
|||
placeholder="请输入" |
|||
/> |
|||
<span class="ml-10">问题等级：</span> |
|||
<el-input |
|||
class="search-input ml-10" |
|||
v-model="searchDikeName" |
|||
placeholder="请输入" |
|||
/> |
|||
<span class="ml-10">操作状态：</span> |
|||
<el-input |
|||
class="search-input ml-10" |
|||
v-model="searchDikeName" |
|||
placeholder="请输入" |
|||
/> |
|||
</div> |
|||
<span>展开</span> |
|||
</div> |
|||
<el-button class="search-btn" type="success">搜索</el-button> |
|||
</div> |
|||
<el-table class="table mt-16" height="600" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="60" /> |
|||
<el-table-column prop="name" align="center" label="任务名称" /> |
|||
<el-table-column prop="area" align="center" label="行政区划" /> |
|||
<el-table-column prop="dikeName" align="center" label="工程" /> |
|||
<el-table-column prop="unit" align="center" label="管理单位" /> |
|||
<el-table-column prop="dikeName" align="center" label="检查项目" /> |
|||
<el-table-column prop="dikeName" align="center" label="检查内容" /> |
|||
<el-table-column prop="dikeName" align="center" label="问题等级" /> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="small">查看</el-button> |
|||
<el-button type="text" size="small" @click="handleDel(scope.row)" |
|||
>下发</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="getTableData()" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
<!-- 弹窗 --> |
|||
<el-dialog |
|||
title="新增/编辑防治计划" |
|||
@close="handleClose" |
|||
:visible.sync="dialogVisible" |
|||
:close-on-click-modal="false" |
|||
width="720px" |
|||
> |
|||
<div style="display: flex; margin-bottom: 16px"> |
|||
<div |
|||
style=" |
|||
width: 5px; |
|||
height: 16px; |
|||
background-color: #31a08e; |
|||
margin-right: 8px; |
|||
" |
|||
></div> |
|||
<span style="font-weight: 600">基础信息</span> |
|||
</div> |
|||
<el-form |
|||
:model="ruleForm" |
|||
:rules="rules" |
|||
ref="ruleForm" |
|||
label-width="100px" |
|||
> |
|||
<el-form-item label-width="120px" label="堤防名称" prop="dikeCode"> |
|||
<!-- <el-input style="width: 202px;" v-model="ruleForm.dikeCode" placeholder="请输入" :disabled="prohibitEditing" /> --> |
|||
<el-select |
|||
v-model="ruleForm.dikeCode" |
|||
placeholder="请选择" |
|||
@change="handleChangeDike" |
|||
:disabled="prohibitEditing" |
|||
> |
|||
<el-option |
|||
v-for="item in embankmentList" |
|||
:label="item.dikeName" |
|||
:value="item.dikeCode" |
|||
:key="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
<el-button |
|||
:disabled="!ruleForm.dikeCode" |
|||
class="!m-6" |
|||
type="success" |
|||
size="small" |
|||
@click="handleOpenDetail" |
|||
>详情</el-button |
|||
> |
|||
<el-button |
|||
:disabled="!ruleForm.dikeCode" |
|||
class="!ml-6" |
|||
type="success" |
|||
size="small" |
|||
@click="handleOpenMap" |
|||
>打开地图</el-button |
|||
> |
|||
</el-form-item> |
|||
<div style="display: flex"> |
|||
<el-form-item label-width="120px" label="防治计划名称" prop="name"> |
|||
<el-input |
|||
style="width: 202px" |
|||
v-model="ruleForm.name" |
|||
placeholder="请输入" |
|||
:disabled="prohibitEditing" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="防治类型" prop="type"> |
|||
<el-select |
|||
v-model="ruleForm.type" |
|||
placeholder="请选择" |
|||
:disabled="prohibitEditing" |
|||
> |
|||
<el-option |
|||
v-for="item in controlType" |
|||
:key="item.id" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item label-width="120px" label="防治说明" prop="instruction"> |
|||
<el-input |
|||
v-model="ruleForm.instruction" |
|||
type="textarea" |
|||
placeholder=" 请输入" |
|||
:disabled="prohibitEditing" |
|||
/> |
|||
</el-form-item> |
|||
<div style="display: flex; margin-bottom: 16px"> |
|||
<div |
|||
style=" |
|||
width: 5px; |
|||
height: 16px; |
|||
background-color: #31a08e; |
|||
margin-right: 8px; |
|||
" |
|||
></div> |
|||
<span style="font-weight: 600">工作内容</span> |
|||
</div> |
|||
<el-form-item label-width="120px" label="工作月份" prop="month"> |
|||
<el-select |
|||
v-model="ruleForm.month" |
|||
placeholder="请选择" |
|||
:disabled="prohibitEditing" |
|||
> |
|||
<el-option |
|||
v-for="item in workMonth" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="item.id" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-table |
|||
style="margin-bottom: 22px" |
|||
max-height="330" |
|||
:data="ruleForm.details" |
|||
border |
|||
> |
|||
<el-table-column |
|||
type="index" |
|||
align="center" |
|||
label="序号" |
|||
width="50" |
|||
/> |
|||
<el-table-column prop="jobContent" align="center" label="工作内容"> |
|||
<template slot-scope="scope"> |
|||
<el-input |
|||
v-model="scope.row.jobContent" |
|||
placeholder="请输入工作内容" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="constructionDate" |
|||
align="center" |
|||
label="施工日期" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-input |
|||
v-model="scope.row.constructionDate" |
|||
placeholder="请输入施工日期" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="planDays" |
|||
align="center" |
|||
label="计划工日" |
|||
width="80" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-input |
|||
v-model="scope.row.planDays" |
|||
placeholder="请输入计划工日" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="操作" width="100"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
style="margin-right: 9px" |
|||
type="text" |
|||
size="small" |
|||
@click="addWorkItem" |
|||
>添加</el-button |
|||
> |
|||
<el-popconfirm |
|||
confirm-button-text="确定" |
|||
cancel-button-text="取消" |
|||
icon="el-icon-info" |
|||
icon-color="red" |
|||
title="确定删除吗？" |
|||
@confirm="deleteWorkTableItem(scope.row.id)" |
|||
> |
|||
<el-button |
|||
v-if="ruleForm.details.length > 1" |
|||
style="color: red" |
|||
type="text" |
|||
size="small" |
|||
slot="reference" |
|||
>删除</el-button |
|||
> |
|||
</el-popconfirm> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div style="display: flex"> |
|||
<el-form-item label-width="120px" label="提醒周期" prop="frequency"> |
|||
<el-input |
|||
style="width: 90px" |
|||
v-model="ruleForm.frequency" |
|||
placeholder="请输入" |
|||
/> |
|||
/次 |
|||
</el-form-item> |
|||
<el-form-item label-width="10px" prop="cycleType"> |
|||
<el-select |
|||
style="width: 90px" |
|||
v-model="ruleForm.cycleType" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in patrolType" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
/日期 |
|||
</el-form-item> |
|||
<el-form-item |
|||
label-width="100px" |
|||
label="责任人" |
|||
prop="otherConfig.selectUser" |
|||
> |
|||
<el-select |
|||
v-model="ruleForm.otherConfig.selectUser" |
|||
multiple |
|||
filterable |
|||
remote |
|||
:remote-method="searchUser" |
|||
value-key="id" |
|||
placeholder="请输入关键词搜索用户" |
|||
prop="selectUser" |
|||
@change="changeOtherConfigSelectUser" |
|||
> |
|||
<el-option |
|||
v-for="item in personnelList" |
|||
:key="item.id" |
|||
:label="item.nickName" |
|||
:value="item.nickName" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</div> |
|||
<div style="display: flex"> |
|||
<el-form-item label-width="120px" label="消息提醒" prop="isReminder"> |
|||
<el-switch |
|||
v-model="ruleForm.isReminder" |
|||
:active-value="1" |
|||
:inactive-value="0" |
|||
active-color="#31a08e" |
|||
inactive-color="#dcdfe6" |
|||
> |
|||
</el-switch> |
|||
</el-form-item> |
|||
<div style="display: flex; flex-direction: column"> |
|||
<el-form-item |
|||
v-if="ruleForm.isReminder && ruleForm.cycleType === '1'" |
|||
label-width="120px" |
|||
label="提醒时间" |
|||
prop="otherConfig.week" |
|||
> |
|||
<el-radio-group v-model="ruleForm.otherConfig.week"> |
|||
<el-radio :label="1">星期一</el-radio> |
|||
<el-radio :label="2">星期二</el-radio> |
|||
<el-radio :label="3">星期三</el-radio> |
|||
<el-radio :label="4">星期四</el-radio> |
|||
<el-radio :label="5">星期五</el-radio> |
|||
<el-radio :label="6">星期六</el-radio> |
|||
<el-radio :label="7">星期日</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item |
|||
v-if="ruleForm.isReminder && ruleForm.cycleType === '0'" |
|||
label-width="120px" |
|||
label="提醒时间" |
|||
prop="otherConfig.day" |
|||
> |
|||
<div> |
|||
每月<el-input |
|||
style="width: 202px" |
|||
v-model="ruleForm.otherConfig.day" |
|||
/>号 |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label-width="120px" |
|||
:label="ruleForm.cycleType === '2' ? '提醒时间' : ''" |
|||
prop="reminderTime" |
|||
> |
|||
<el-time-picker |
|||
v-model="ruleForm.reminderTime" |
|||
value-format="yyyy-MM-dd hh:mm:ss" |
|||
placeholder="选择时间" |
|||
/> |
|||
</el-form-item> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button size="mini" @click="resetForm('ruleForm')">取 消</el-button> |
|||
<el-button |
|||
v-if="!prohibitEditing" |
|||
size="mini" |
|||
type="primary" |
|||
@click="submitForm('ruleForm')" |
|||
>保存</el-button |
|||
> |
|||
</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); |
|||
} |
|||
} |
|||
|
|||
.filter-list { |
|||
transition: all 0.5s; |
|||
height: 40px; |
|||
overflow: hidden; |
|||
} |
|||
.search-input { |
|||
width: 202px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.search-btn { |
|||
margin-left: 10px; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/deep/.el-input__count { |
|||
height: 15px; |
|||
line-height: 15px; |
|||
margin-right: 10px; |
|||
margin-bottom: -4px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,421 @@ |
|||
<!-- 监督检查办法管理-堤防 --> |
|||
<script> |
|||
import { |
|||
putDFPreventionControlPlan, |
|||
deleteDFMaintenancePlan, |
|||
postDFNewPreventionControlPlan, |
|||
postDFPreventionControlPlanList, |
|||
getDFPreventionControlPlan, |
|||
listUser, |
|||
} from "@/api/management"; |
|||
import { listDikeInfo } from "@/api/yg/dikeInfo"; |
|||
|
|||
export default { |
|||
name: "InspectionItems", |
|||
data() { |
|||
return { |
|||
paramsData: { |
|||
name: "", |
|||
type: null, |
|||
dikeName: "", |
|||
selectLevel: "", |
|||
selectType: "", |
|||
}, |
|||
dialogVisible: false, |
|||
prohibitEditing: false, |
|||
dikeTypeList: [], |
|||
personnelList: [], // 人员列表 |
|||
patrolType: [], // 提醒周期类型 |
|||
workMonth: [], // 工作月份 |
|||
embankmentList: [], //堤防列表 |
|||
dikeLevel: [], // 堤防级别列表 |
|||
controlType: [], // 防治类型 |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
ruleForm: { |
|||
dikeCode: "", |
|||
dikeName: "", |
|||
name: "", |
|||
type: "", |
|||
instruction: "", |
|||
month: "", |
|||
details: [], |
|||
cycleType: "", |
|||
frequency: "", |
|||
operators: [], |
|||
isReminder: 1, |
|||
otherConfig: { |
|||
selectUser: [], |
|||
week: "", |
|||
day: "", |
|||
}, |
|||
reminderTime: "", |
|||
}, |
|||
rules: { |
|||
dikeCode: [ |
|||
{ required: true, message: "请选择堤防名称", trigger: "blur" }, |
|||
], |
|||
name: [ |
|||
{ required: true, message: "请输入防治计划名称", trigger: "blur" }, |
|||
{ max: 100, message: "名称最长为100个字符", trigger: "blur" }, |
|||
], |
|||
type: [ |
|||
{ required: true, message: "请选择防治类型", trigger: "change" }, |
|||
], |
|||
instruction: [ |
|||
{ required: true, message: "请输入防治说明", trigger: "change" }, |
|||
], |
|||
month: [ |
|||
{ required: true, message: "请选择工作月份", trigger: "change" }, |
|||
], |
|||
cycleType: [ |
|||
{ required: true, message: "请选择提醒日期", trigger: "change" }, |
|||
], |
|||
frequency: [ |
|||
{ required: true, message: "请输入次数", trigger: "change" }, |
|||
], |
|||
"otherConfig.selectUser": [ |
|||
{ required: true, message: "请选择责任人", trigger: "change" }, |
|||
], |
|||
"otherConfig.week": [ |
|||
{ required: true, message: "请选择星期", trigger: "change" }, |
|||
], |
|||
"otherConfig.day": [ |
|||
{ required: true, message: "请输入", trigger: "change" }, |
|||
], |
|||
reminderTime: [ |
|||
{ required: true, message: "请选择提醒时间", trigger: "change" }, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
watch: { |
|||
dialogVisible(newVal, oldVal) { |
|||
if (oldVal) { |
|||
this.prohibitEditing = false; |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 获取堤防等级 |
|||
resolveDikeGrad(dikeGrad) { |
|||
return ( |
|||
this.dikeLevel.find((v) => v.dictValue === dikeGrad)?.dictLabel || |
|||
dikeGrad |
|||
); |
|||
}, |
|||
// 获取堤防类型 |
|||
resolveDikeType(dikeType) { |
|||
return ( |
|||
this.dikeTypeList.find((v) => v.dictValue == dikeType)?.dictLabel || |
|||
dikeType |
|||
); |
|||
}, |
|||
// 获取防治类型 |
|||
resolveType(type) { |
|||
return ( |
|||
this.controlType.find((v) => v.dictValue == type)?.dictLabel || type |
|||
); |
|||
}, |
|||
// 打开新增弹窗 |
|||
openAddDialog() { |
|||
// // 获取字典数据 |
|||
// this.getDicts("xc_w_month").then((res) => { |
|||
// this.workMonth = res.data; |
|||
// }); |
|||
// this.getDicts("xs_cycle_type").then((res) => { |
|||
// this.patrolType = res.data; |
|||
// }); |
|||
// if (this.ruleForm.details.length <= 0) { |
|||
// this.ruleForm.details.push({ |
|||
// constructionDate: "", |
|||
// jobContent: "", |
|||
// planDays: 0, |
|||
// }); |
|||
// } |
|||
// this.dialogVisible = true; |
|||
// setTimeout(() => { |
|||
// this.$refs.ruleForm.resetFields(); |
|||
// }, 0); |
|||
}, |
|||
// 删除对应防治计划 |
|||
deleteTableItem(row) { |
|||
deleteDFMaintenancePlan(row.id).then((res) => { |
|||
this.getTableData(); |
|||
this.$message.success("删除成功"); |
|||
}); |
|||
}, |
|||
// 删除对应工作内容 |
|||
deleteWorkTableItem(id) { |
|||
const index = this.workTable.findIndex((item) => item.id === id); |
|||
if (index !== -1) { |
|||
this.workTable.splice(index, 1); |
|||
} |
|||
}, |
|||
// 搜索用户 |
|||
searchUser(e) { |
|||
listUser({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "nickName", |
|||
type: "like", |
|||
value: e, |
|||
}, |
|||
pageSize: 100, |
|||
pageNum: 1, |
|||
}).then((res) => { |
|||
this.personnelList = res.records; |
|||
}); |
|||
}, |
|||
// 查看或编辑计划详情 |
|||
viewOrEditPlanDetails(row, edit = false) { |
|||
if (!edit) { |
|||
this.prohibitEditing = true; |
|||
} |
|||
getDFPreventionControlPlan(row.id).then((res) => { |
|||
this.dialogVisible = true; |
|||
setTimeout(() => { |
|||
this.ruleForm = res.data; |
|||
this.ruleForm.reminderCycle = res.data.instruction + res.data.month; |
|||
}, 30); |
|||
}); |
|||
}, |
|||
changeOtherConfigSelectUser(idsArr) { |
|||
if (idsArr?.length) { |
|||
this.ruleForm.operators = |
|||
this.personnelList |
|||
.filter((v) => idsArr.includes(v.nickName)) |
|||
?.map((v) => ({ |
|||
name: v.nickName, |
|||
uid: v.id, |
|||
})) || []; |
|||
} else { |
|||
this.ruleForm.operators = []; |
|||
} |
|||
}, |
|||
// 保存维修计划 |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
this.ruleForm.cycleType = parseFloat(this.ruleForm.cycleType); |
|||
this.ruleForm.frequency = parseFloat(this.ruleForm.frequency); |
|||
this.ruleForm.month = parseFloat(this.ruleForm.month); |
|||
if (this.ruleForm.id) { |
|||
putDFPreventionControlPlan(this.ruleForm).then(() => { |
|||
this.getTableData(); |
|||
this.dialogVisible = false; |
|||
this.$message({ |
|||
message: "保存成功", |
|||
type: "success", |
|||
}); |
|||
}); |
|||
} else { |
|||
postDFNewPreventionControlPlan(this.ruleForm).then(() => { |
|||
console.log("保存成功"); |
|||
this.getTableData(); |
|||
this.dialogVisible = false; |
|||
this.$message({ |
|||
message: "保存成功", |
|||
type: "success", |
|||
}); |
|||
}); |
|||
} |
|||
} else { |
|||
console.log("校验不通过"); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 重置校验 |
|||
resetForm(formName) { |
|||
this.$refs[formName].resetFields(); |
|||
this.dialogVisible = false; |
|||
}, |
|||
// 关闭dialog |
|||
handleClose(ruleForm = "ruleForm") { |
|||
console.log("关闭"); |
|||
this.$refs[ruleForm].resetFields(); |
|||
this.ruleForm = { |
|||
dikeCode: "", |
|||
dikeName: "", |
|||
name: "", |
|||
type: "", |
|||
instruction: "", |
|||
month: "", |
|||
details: [], |
|||
cycleType: "", |
|||
isReminder: true, |
|||
selectUser: [], |
|||
otherConfig: { |
|||
selectUser: [], |
|||
week: "", |
|||
day: "", |
|||
}, |
|||
week: 1, |
|||
date: 1, |
|||
reminderTime: "", |
|||
}; |
|||
}, |
|||
// 添加工作项 |
|||
addWorkItem() { |
|||
this.ruleForm.details.push({ |
|||
jobContent: "", |
|||
constructionDate: "", |
|||
planDays: "", |
|||
}); |
|||
}, |
|||
// 获取列表数据 |
|||
getTableData() { |
|||
postDFPreventionControlPlanList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
name: this.paramsData.name, |
|||
type: this.paramsData.type, |
|||
dikeName: this.paramsData.dikeName, |
|||
dikeGrad: this.paramsData.dikeGrad, |
|||
dikeType: this.paramsData.dikeType, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value: this.name, |
|||
}, |
|||
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.name = ""; |
|||
this.selectStatus = "2"; |
|||
this.getTableData(); |
|||
}, |
|||
// 打开地图 |
|||
handleOpenMap() {}, |
|||
// 打开详情 |
|||
handleOpenDetail() {}, |
|||
// 获取堤防列表信息 |
|||
getEmbData() { |
|||
listDikeInfo({ |
|||
pageNum: 1, |
|||
pageSize: 20, |
|||
ids: null, |
|||
data: { |
|||
embankmentName: null, |
|||
endStationNumber: null, |
|||
embankmentType: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sort: "desc", |
|||
}, |
|||
}).then((res) => { |
|||
this.embankmentList = res?.records || []; |
|||
}); |
|||
}, |
|||
handleChangeDike(value) { |
|||
console.log("value >>>>> ", value); |
|||
this.ruleForm.name = this.ruleForm.dikeCode; |
|||
let res = this.embankmentList.find((v) => v.dikeCode === value); |
|||
console.log("res >>>>> ", res); |
|||
this.ruleForm.dikeName = res?.dikeName; |
|||
// this.dikeDetailsDialog.id = res?.id || '' |
|||
}, |
|||
}, |
|||
created() { |
|||
this.getDicts("embankment_type").then((response) => { |
|||
this.dikeTypeList = response.data; |
|||
}); |
|||
}, |
|||
mounted() {}, |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body slider-right"> |
|||
<div class="top-title">统计分析</div> |
|||
<div class="table-box"></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; |
|||
|
|||
.top-search { |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 202px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
} |
|||
} |
|||
|
|||
.search-btn { |
|||
margin-left: 10px; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/deep/.el-input__count { |
|||
height: 15px; |
|||
line-height: 15px; |
|||
margin-right: 10px; |
|||
margin-bottom: -4px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,794 @@ |
|||
<!-- 监督检查办法管理-堤防 --> |
|||
<script> |
|||
import { |
|||
putDFPreventionControlPlan, |
|||
deleteDFMaintenancePlan, |
|||
postDFNewPreventionControlPlan, |
|||
postDFPreventionControlPlanList, |
|||
getDFPreventionControlPlan, |
|||
listUser, |
|||
} from "@/api/management"; |
|||
import { listDikeInfo } from "@/api/yg/dikeInfo"; |
|||
|
|||
export default { |
|||
name: "InspectionItems", |
|||
data() { |
|||
return { |
|||
searchDikeName: "", |
|||
paramsData: { |
|||
name: "", |
|||
type: null, |
|||
dikeName: "", |
|||
selectLevel: "", |
|||
selectType: "", |
|||
}, |
|||
dialogVisible: false, |
|||
prohibitEditing: false, |
|||
dikeTypeList: [], |
|||
personnelList: [], // 人员列表 |
|||
patrolType: [], // 提醒周期类型 |
|||
workMonth: [], // 工作月份 |
|||
embankmentList: [], //堤防列表 |
|||
dikeLevel: [], // 堤防级别列表 |
|||
controlType: [], // 防治类型 |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
ruleForm: { |
|||
dikeCode: "", |
|||
dikeName: "", |
|||
name: "", |
|||
type: "", |
|||
instruction: "", |
|||
month: "", |
|||
details: [], |
|||
cycleType: "", |
|||
frequency: "", |
|||
operators: [], |
|||
isReminder: 1, |
|||
otherConfig: { |
|||
selectUser: [], |
|||
week: "", |
|||
day: "", |
|||
}, |
|||
reminderTime: "", |
|||
}, |
|||
rules: { |
|||
dikeCode: [ |
|||
{ required: true, message: "请选择堤防名称", trigger: "blur" }, |
|||
], |
|||
name: [ |
|||
{ required: true, message: "请输入防治计划名称", trigger: "blur" }, |
|||
{ max: 100, message: "名称最长为100个字符", trigger: "blur" }, |
|||
], |
|||
type: [ |
|||
{ required: true, message: "请选择防治类型", trigger: "change" }, |
|||
], |
|||
instruction: [ |
|||
{ required: true, message: "请输入防治说明", trigger: "change" }, |
|||
], |
|||
month: [ |
|||
{ required: true, message: "请选择工作月份", trigger: "change" }, |
|||
], |
|||
cycleType: [ |
|||
{ required: true, message: "请选择提醒日期", trigger: "change" }, |
|||
], |
|||
frequency: [ |
|||
{ required: true, message: "请输入次数", trigger: "change" }, |
|||
], |
|||
"otherConfig.selectUser": [ |
|||
{ required: true, message: "请选择责任人", trigger: "change" }, |
|||
], |
|||
"otherConfig.week": [ |
|||
{ required: true, message: "请选择星期", trigger: "change" }, |
|||
], |
|||
"otherConfig.day": [ |
|||
{ required: true, message: "请输入", trigger: "change" }, |
|||
], |
|||
reminderTime: [ |
|||
{ required: true, message: "请选择提醒时间", trigger: "change" }, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
watch: { |
|||
dialogVisible(newVal, oldVal) { |
|||
if (oldVal) { |
|||
this.prohibitEditing = false; |
|||
} |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 获取堤防等级 |
|||
resolveDikeGrad(dikeGrad) { |
|||
return ( |
|||
this.dikeLevel.find((v) => v.dictValue === dikeGrad)?.dictLabel || |
|||
dikeGrad |
|||
); |
|||
}, |
|||
// 获取堤防类型 |
|||
resolveDikeType(dikeType) { |
|||
return ( |
|||
this.dikeTypeList.find((v) => v.dictValue == dikeType)?.dictLabel || |
|||
dikeType |
|||
); |
|||
}, |
|||
// 获取防治类型 |
|||
resolveType(type) { |
|||
return ( |
|||
this.controlType.find((v) => v.dictValue == type)?.dictLabel || type |
|||
); |
|||
}, |
|||
// 打开新增弹窗 |
|||
openAddDialog() { |
|||
// // 获取字典数据 |
|||
// this.getDicts("xc_w_month").then((res) => { |
|||
// this.workMonth = res.data; |
|||
// }); |
|||
// this.getDicts("xs_cycle_type").then((res) => { |
|||
// this.patrolType = res.data; |
|||
// }); |
|||
// if (this.ruleForm.details.length <= 0) { |
|||
// this.ruleForm.details.push({ |
|||
// constructionDate: "", |
|||
// jobContent: "", |
|||
// planDays: 0, |
|||
// }); |
|||
// } |
|||
// this.dialogVisible = true; |
|||
// setTimeout(() => { |
|||
// this.$refs.ruleForm.resetFields(); |
|||
// }, 0); |
|||
}, |
|||
// 删除对应防治计划 |
|||
deleteTableItem(row) { |
|||
deleteDFMaintenancePlan(row.id).then((res) => { |
|||
this.getTableData(); |
|||
this.$message.success("删除成功"); |
|||
}); |
|||
}, |
|||
// 删除对应工作内容 |
|||
deleteWorkTableItem(id) { |
|||
const index = this.workTable.findIndex((item) => item.id === id); |
|||
if (index !== -1) { |
|||
this.workTable.splice(index, 1); |
|||
} |
|||
}, |
|||
// 搜索用户 |
|||
searchUser(e) { |
|||
listUser({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "nickName", |
|||
type: "like", |
|||
value: e, |
|||
}, |
|||
pageSize: 100, |
|||
pageNum: 1, |
|||
}).then((res) => { |
|||
this.personnelList = res.records; |
|||
}); |
|||
}, |
|||
// 查看或编辑计划详情 |
|||
viewOrEditPlanDetails(row, edit = false) { |
|||
if (!edit) { |
|||
this.prohibitEditing = true; |
|||
} |
|||
getDFPreventionControlPlan(row.id).then((res) => { |
|||
this.dialogVisible = true; |
|||
setTimeout(() => { |
|||
this.ruleForm = res.data; |
|||
this.ruleForm.reminderCycle = res.data.instruction + res.data.month; |
|||
}, 30); |
|||
}); |
|||
}, |
|||
changeOtherConfigSelectUser(idsArr) { |
|||
if (idsArr?.length) { |
|||
this.ruleForm.operators = |
|||
this.personnelList |
|||
.filter((v) => idsArr.includes(v.nickName)) |
|||
?.map((v) => ({ |
|||
name: v.nickName, |
|||
uid: v.id, |
|||
})) || []; |
|||
} else { |
|||
this.ruleForm.operators = []; |
|||
} |
|||
}, |
|||
// 保存维修计划 |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
this.ruleForm.cycleType = parseFloat(this.ruleForm.cycleType); |
|||
this.ruleForm.frequency = parseFloat(this.ruleForm.frequency); |
|||
this.ruleForm.month = parseFloat(this.ruleForm.month); |
|||
if (this.ruleForm.id) { |
|||
putDFPreventionControlPlan(this.ruleForm).then(() => { |
|||
this.getTableData(); |
|||
this.dialogVisible = false; |
|||
this.$message({ |
|||
message: "保存成功", |
|||
type: "success", |
|||
}); |
|||
}); |
|||
} else { |
|||
postDFNewPreventionControlPlan(this.ruleForm).then(() => { |
|||
console.log("保存成功"); |
|||
this.getTableData(); |
|||
this.dialogVisible = false; |
|||
this.$message({ |
|||
message: "保存成功", |
|||
type: "success", |
|||
}); |
|||
}); |
|||
} |
|||
} else { |
|||
console.log("校验不通过"); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 重置校验 |
|||
resetForm(formName) { |
|||
this.$refs[formName].resetFields(); |
|||
this.dialogVisible = false; |
|||
}, |
|||
// 关闭dialog |
|||
handleClose(ruleForm = "ruleForm") { |
|||
console.log("关闭"); |
|||
this.$refs[ruleForm].resetFields(); |
|||
this.ruleForm = { |
|||
dikeCode: "", |
|||
dikeName: "", |
|||
name: "", |
|||
type: "", |
|||
instruction: "", |
|||
month: "", |
|||
details: [], |
|||
cycleType: "", |
|||
isReminder: true, |
|||
selectUser: [], |
|||
otherConfig: { |
|||
selectUser: [], |
|||
week: "", |
|||
day: "", |
|||
}, |
|||
week: 1, |
|||
date: 1, |
|||
reminderTime: "", |
|||
}; |
|||
}, |
|||
// 添加工作项 |
|||
addWorkItem() { |
|||
this.ruleForm.details.push({ |
|||
jobContent: "", |
|||
constructionDate: "", |
|||
planDays: "", |
|||
}); |
|||
}, |
|||
// 获取列表数据 |
|||
getTableData() { |
|||
postDFPreventionControlPlanList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
name: this.paramsData.name, |
|||
type: this.paramsData.type, |
|||
dikeName: this.paramsData.dikeName, |
|||
dikeGrad: this.paramsData.dikeGrad, |
|||
dikeType: this.paramsData.dikeType, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value: this.name, |
|||
}, |
|||
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.name = ""; |
|||
this.selectStatus = "2"; |
|||
this.getTableData(); |
|||
}, |
|||
// 打开地图 |
|||
handleOpenMap() {}, |
|||
// 打开详情 |
|||
handleOpenDetail() {}, |
|||
// 获取堤防列表信息 |
|||
getEmbData() { |
|||
listDikeInfo({ |
|||
pageNum: 1, |
|||
pageSize: 20, |
|||
ids: null, |
|||
data: { |
|||
embankmentName: null, |
|||
endStationNumber: null, |
|||
embankmentType: null, |
|||
}, |
|||
// 排序方式 |
|||
params: { |
|||
// 按哪个字段排序 |
|||
orderBy: "create_time", |
|||
// desc降序，升序asc |
|||
sort: "desc", |
|||
}, |
|||
}).then((res) => { |
|||
this.embankmentList = res?.records || []; |
|||
}); |
|||
}, |
|||
handleChangeDike(value) { |
|||
console.log("value >>>>> ", value); |
|||
this.ruleForm.name = this.ruleForm.dikeCode; |
|||
let res = this.embankmentList.find((v) => v.dikeCode === value); |
|||
console.log("res >>>>> ", res); |
|||
this.ruleForm.dikeName = res?.dikeName; |
|||
// this.dikeDetailsDialog.id = res?.id || '' |
|||
}, |
|||
// 删除 |
|||
handleDel(row) { |
|||
console.log("row >>>>> ", row); |
|||
}, |
|||
}, |
|||
created() { |
|||
this.getDicts("embankment_type").then((response) => { |
|||
this.dikeTypeList = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData(); |
|||
this.getEmbData(); |
|||
this.getDicts("embankment_level").then((res) => { |
|||
this.dikeLevel = res.data; |
|||
}); |
|||
this.getDicts("dh_jh_type").then((res) => { |
|||
this.controlType = res.data; |
|||
}); |
|||
}, |
|||
}; |
|||
</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="searchDikeName" |
|||
placeholder="请输入名称" |
|||
/> |
|||
<span class="ml-10">管理单位：</span> |
|||
<el-input |
|||
class="search-input ml-10" |
|||
v-model="searchDikeName" |
|||
placeholder="请输入" |
|||
/> |
|||
<el-button class="search-btn" type="success">搜索</el-button> |
|||
<el-button |
|||
class="search-btn" |
|||
style="margin-right: 16px; margin-bottom: 8px; float: right" |
|||
type="success" |
|||
@click="openAddDialog()" |
|||
>添加</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="name" align="center" label="检查任务" /> |
|||
<el-table-column prop="createTime" align="center" label="创建时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="updateTime" align="center" label="更新时间" /> |
|||
<el-table-column prop="unit" align="center" label="管理单位" /> |
|||
<el-table-column |
|||
prop="status" |
|||
align="center" |
|||
sortable |
|||
label="当前状态" |
|||
/> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button type="text" size="small">编辑</el-button> |
|||
<el-button type="text" size="small" @click="handleDel(scope.row)" |
|||
>删除</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="getTableData()" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
<!-- 弹窗 --> |
|||
<el-dialog |
|||
title="新增/编辑防治计划" |
|||
@close="handleClose" |
|||
:visible.sync="dialogVisible" |
|||
:close-on-click-modal="false" |
|||
width="720px" |
|||
> |
|||
<div style="display: flex; margin-bottom: 16px"> |
|||
<div |
|||
style=" |
|||
width: 5px; |
|||
height: 16px; |
|||
background-color: #31a08e; |
|||
margin-right: 8px; |
|||
" |
|||
></div> |
|||
<span style="font-weight: 600">基础信息</span> |
|||
</div> |
|||
<el-form |
|||
:model="ruleForm" |
|||
:rules="rules" |
|||
ref="ruleForm" |
|||
label-width="100px" |
|||
> |
|||
<el-form-item label-width="120px" label="堤防名称" prop="dikeCode"> |
|||
<!-- <el-input style="width: 202px;" v-model="ruleForm.dikeCode" placeholder="请输入" :disabled="prohibitEditing" /> --> |
|||
<el-select |
|||
v-model="ruleForm.dikeCode" |
|||
placeholder="请选择" |
|||
@change="handleChangeDike" |
|||
:disabled="prohibitEditing" |
|||
> |
|||
<el-option |
|||
v-for="item in embankmentList" |
|||
:label="item.dikeName" |
|||
:value="item.dikeCode" |
|||
:key="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
<el-button |
|||
:disabled="!ruleForm.dikeCode" |
|||
class="!m-6" |
|||
type="success" |
|||
size="small" |
|||
@click="handleOpenDetail" |
|||
>详情</el-button |
|||
> |
|||
<el-button |
|||
:disabled="!ruleForm.dikeCode" |
|||
class="!ml-6" |
|||
type="success" |
|||
size="small" |
|||
@click="handleOpenMap" |
|||
>打开地图</el-button |
|||
> |
|||
</el-form-item> |
|||
<div style="display: flex"> |
|||
<el-form-item label-width="120px" label="防治计划名称" prop="name"> |
|||
<el-input |
|||
style="width: 202px" |
|||
v-model="ruleForm.name" |
|||
placeholder="请输入" |
|||
:disabled="prohibitEditing" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="防治类型" prop="type"> |
|||
<el-select |
|||
v-model="ruleForm.type" |
|||
placeholder="请选择" |
|||
:disabled="prohibitEditing" |
|||
> |
|||
<el-option |
|||
v-for="item in controlType" |
|||
:key="item.id" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item label-width="120px" label="防治说明" prop="instruction"> |
|||
<el-input |
|||
v-model="ruleForm.instruction" |
|||
type="textarea" |
|||
placeholder=" 请输入" |
|||
:disabled="prohibitEditing" |
|||
/> |
|||
</el-form-item> |
|||
<div style="display: flex; margin-bottom: 16px"> |
|||
<div |
|||
style=" |
|||
width: 5px; |
|||
height: 16px; |
|||
background-color: #31a08e; |
|||
margin-right: 8px; |
|||
" |
|||
></div> |
|||
<span style="font-weight: 600">工作内容</span> |
|||
</div> |
|||
<el-form-item label-width="120px" label="工作月份" prop="month"> |
|||
<el-select |
|||
v-model="ruleForm.month" |
|||
placeholder="请选择" |
|||
:disabled="prohibitEditing" |
|||
> |
|||
<el-option |
|||
v-for="item in workMonth" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="item.id" |
|||
/> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-table |
|||
style="margin-bottom: 22px" |
|||
max-height="330" |
|||
:data="ruleForm.details" |
|||
border |
|||
> |
|||
<el-table-column |
|||
type="index" |
|||
align="center" |
|||
label="序号" |
|||
width="50" |
|||
/> |
|||
<el-table-column prop="jobContent" align="center" label="工作内容"> |
|||
<template slot-scope="scope"> |
|||
<el-input |
|||
v-model="scope.row.jobContent" |
|||
placeholder="请输入工作内容" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="constructionDate" |
|||
align="center" |
|||
label="施工日期" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-input |
|||
v-model="scope.row.constructionDate" |
|||
placeholder="请输入施工日期" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="planDays" |
|||
align="center" |
|||
label="计划工日" |
|||
width="80" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<el-input |
|||
v-model="scope.row.planDays" |
|||
placeholder="请输入计划工日" |
|||
/> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="操作" width="100"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
style="margin-right: 9px" |
|||
type="text" |
|||
size="small" |
|||
@click="addWorkItem" |
|||
>添加</el-button |
|||
> |
|||
<el-popconfirm |
|||
confirm-button-text="确定" |
|||
cancel-button-text="取消" |
|||
icon="el-icon-info" |
|||
icon-color="red" |
|||
title="确定删除吗？" |
|||
@confirm="deleteWorkTableItem(scope.row.id)" |
|||
> |
|||
<el-button |
|||
v-if="ruleForm.details.length > 1" |
|||
style="color: red" |
|||
type="text" |
|||
size="small" |
|||
slot="reference" |
|||
>删除</el-button |
|||
> |
|||
</el-popconfirm> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div style="display: flex"> |
|||
<el-form-item label-width="120px" label="提醒周期" prop="frequency"> |
|||
<el-input |
|||
style="width: 90px" |
|||
v-model="ruleForm.frequency" |
|||
placeholder="请输入" |
|||
/> |
|||
/次 |
|||
</el-form-item> |
|||
<el-form-item label-width="10px" prop="cycleType"> |
|||
<el-select |
|||
style="width: 90px" |
|||
v-model="ruleForm.cycleType" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in patrolType" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
/日期 |
|||
</el-form-item> |
|||
<el-form-item |
|||
label-width="100px" |
|||
label="责任人" |
|||
prop="otherConfig.selectUser" |
|||
> |
|||
<el-select |
|||
v-model="ruleForm.otherConfig.selectUser" |
|||
multiple |
|||
filterable |
|||
remote |
|||
:remote-method="searchUser" |
|||
value-key="id" |
|||
placeholder="请输入关键词搜索用户" |
|||
prop="selectUser" |
|||
@change="changeOtherConfigSelectUser" |
|||
> |
|||
<el-option |
|||
v-for="item in personnelList" |
|||
:key="item.id" |
|||
:label="item.nickName" |
|||
:value="item.nickName" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</div> |
|||
<div style="display: flex"> |
|||
<el-form-item label-width="120px" label="消息提醒" prop="isReminder"> |
|||
<el-switch |
|||
v-model="ruleForm.isReminder" |
|||
:active-value="1" |
|||
:inactive-value="0" |
|||
active-color="#31a08e" |
|||
inactive-color="#dcdfe6" |
|||
> |
|||
</el-switch> |
|||
</el-form-item> |
|||
<div style="display: flex; flex-direction: column"> |
|||
<el-form-item |
|||
v-if="ruleForm.isReminder && ruleForm.cycleType === '1'" |
|||
label-width="120px" |
|||
label="提醒时间" |
|||
prop="otherConfig.week" |
|||
> |
|||
<el-radio-group v-model="ruleForm.otherConfig.week"> |
|||
<el-radio :label="1">星期一</el-radio> |
|||
<el-radio :label="2">星期二</el-radio> |
|||
<el-radio :label="3">星期三</el-radio> |
|||
<el-radio :label="4">星期四</el-radio> |
|||
<el-radio :label="5">星期五</el-radio> |
|||
<el-radio :label="6">星期六</el-radio> |
|||
<el-radio :label="7">星期日</el-radio> |
|||
</el-radio-group> |
|||
</el-form-item> |
|||
<el-form-item |
|||
v-if="ruleForm.isReminder && ruleForm.cycleType === '0'" |
|||
label-width="120px" |
|||
label="提醒时间" |
|||
prop="otherConfig.day" |
|||
> |
|||
<div> |
|||
每月<el-input |
|||
style="width: 202px" |
|||
v-model="ruleForm.otherConfig.day" |
|||
/>号 |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label-width="120px" |
|||
:label="ruleForm.cycleType === '2' ? '提醒时间' : ''" |
|||
prop="reminderTime" |
|||
> |
|||
<el-time-picker |
|||
v-model="ruleForm.reminderTime" |
|||
value-format="yyyy-MM-dd hh:mm:ss" |
|||
placeholder="选择时间" |
|||
/> |
|||
</el-form-item> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button size="mini" @click="resetForm('ruleForm')">取 消</el-button> |
|||
<el-button |
|||
v-if="!prohibitEditing" |
|||
size="mini" |
|||
type="primary" |
|||
@click="submitForm('ruleForm')" |
|||
>保存</el-button |
|||
> |
|||
</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; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/deep/.el-input__count { |
|||
height: 15px; |
|||
line-height: 15px; |
|||
margin-right: 10px; |
|||
margin-bottom: -4px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,193 @@ |
|||
<!-- 水雨情监测页面 --> |
|||
<template> |
|||
<div class="patrol-manage-page"> |
|||
<div class="top-title">水雨情监测</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>监测时间：</span> |
|||
<el-date-picker |
|||
v-model="searchDateArr" |
|||
type="daterange" |
|||
range-separator="至" |
|||
start-placeholder="开始日期" |
|||
end-placeholder="结束日期" |
|||
value-format="yyyy-MM-DD" |
|||
> |
|||
</el-date-picker> |
|||
<span class="ml-12">水位高度：</span> |
|||
<el-input |
|||
class="search-input" |
|||
v-model="searchWaterLevel" |
|||
placeholder="请输入数字" |
|||
></el-input> |
|||
<el-button class="!ml-10" type="success" @click="getTableData()" |
|||
>搜索</el-button |
|||
> |
|||
<el-button @click="resetSearch()">重置</el-button> |
|||
</div> |
|||
<el-table class="mt-16" height="625" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="80" /> |
|||
<el-table-column prop="wagaName" align="center" label="水闸名称" /> |
|||
<el-table-column prop="wagaGrad" align="center" label="水闸级别"> |
|||
<template #default="{ row }">{{ |
|||
getDikeGrad(row.wagaGrad) |
|||
}}</template> |
|||
</el-table-column> |
|||
<el-table-column prop="wagaType" align="center" label="水闸类别" /> |
|||
<el-table-column prop="wagaLen" align="center" label="水闸长度" /> |
|||
<el-table-column prop="project" align="center" label="起/终点所在地" /> |
|||
<el-table-column |
|||
prop="engineeringManagementUnit" |
|||
align="center" |
|||
label="工程管理单位" |
|||
/> |
|||
<el-table-column prop="operate" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<!-- <el-button type="text" size="small">处置</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="getTableData()" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getAreasData } from "@/api/areas/index"; |
|||
import { regionData, codeToText, TextToCode } from "element-china-area-data"; |
|||
|
|||
import { getSluiceWaterRainRecordsList } from "@/api/sluice"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
searchDateArr: [], |
|||
searchWaterLevel: null, |
|||
pageData: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
total: 0, |
|||
}, |
|||
wagaTypeList: [], // 水闸类型列表 |
|||
wagaGradList: [], // 水闸级别列表 |
|||
tableData: [], |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("embankment_level").then((response) => { |
|||
this.wagaGradList = response.data; |
|||
}); |
|||
this.getDicts("embankment_type").then((response) => { |
|||
this.wagaTypeList = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.getTableData(); |
|||
this.getTreeData(); |
|||
}, |
|||
methods: { |
|||
// 获取列表信息 |
|||
getTableData() { |
|||
getSluiceWaterRainRecordsList({ |
|||
pageNum: this.pageData.pageNum, |
|||
pageSize: this.pageData.pageSize, |
|||
data: { |
|||
wagaCode: this.$route.query.wagaCode, |
|||
startTime: this.searchDateArr[0] |
|||
? this.searchDateArr[0] + " 00:00:00" |
|||
: "", |
|||
endTime: this.searchDateArr[1] |
|||
? this.searchDateArr[1] + " 23:59:59" |
|||
: "", |
|||
waterLevel: this.searchWaterLevel || null, |
|||
}, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records; |
|||
this.pageData.total = res.total; |
|||
} |
|||
}); |
|||
}, |
|||
// 重置搜索条件 |
|||
resetSearch() { |
|||
this.searchDikeName = ""; |
|||
this.getTableData(); |
|||
}, |
|||
|
|||
// 获取地区树数据 |
|||
getTreeData() { |
|||
getAreasData().then((items) => { |
|||
if (items?.data) { |
|||
let res = []; |
|||
let getChildren = (res, pid) => { |
|||
for (const i of items.data) { |
|||
if (i.parentid === pid) { |
|||
const newItem = { |
|||
label: i.name, |
|||
value: i.id, |
|||
}; |
|||
if (i.layer != 3) newItem.children = []; |
|||
res.push(newItem); |
|||
getChildren(newItem.children, newItem.value); |
|||
} |
|||
} |
|||
}; |
|||
getChildren(res, items.data[0].parentid); |
|||
this.areasOptions = res; |
|||
} |
|||
}); |
|||
}, |
|||
getDikeGrad(key) { |
|||
return ( |
|||
this.wagaGradList?.filter((v) => v.dictValue === key)?.[0]?.dictLabel || |
|||
key |
|||
); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.patrol-manage-page { |
|||
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; |
|||
|
|||
.search-input { |
|||
width: 202px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,228 @@ |
|||
<!-- 水雨情智能分析页面 --> |
|||
<template> |
|||
<div class="patrol-manage-page"> |
|||
<div class="top-title">水雨情智能分析</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>起/终点所在地：</span> |
|||
<el-cascader |
|||
:options="areasOptions" |
|||
v-model="paramsData.startArea" |
|||
:props="areasOptionProps" |
|||
placeholder="请选择" |
|||
clearable |
|||
size="small" |
|||
> |
|||
</el-cascader> |
|||
<span>-</span> |
|||
<el-cascader |
|||
:options="areasOptions" |
|||
v-model="paramsData.endArea" |
|||
:props="areasOptionProps" |
|||
placeholder="请选择" |
|||
clearable |
|||
size="small" |
|||
> |
|||
</el-cascader> |
|||
|
|||
<span class="ml-12">堤防名称：</span> |
|||
<el-input |
|||
class="search-input" |
|||
v-model="searchDikeName" |
|||
placeholder="请输入" |
|||
></el-input> |
|||
<el-button class="!ml-10" type="success" @click="getTableData()" |
|||
>搜索</el-button |
|||
> |
|||
<el-button @click="resetSearch()">重置</el-button> |
|||
</div> |
|||
<el-table class="mt-16" height="625" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="80" /> |
|||
<el-table-column prop="dikeName" align="center" label="堤防名称" /> |
|||
<el-table-column prop="dikeGrad" align="center" label="堤防级别"> |
|||
<template #default="{ row }">{{ |
|||
getDikeGrad(row.dikeGrad) |
|||
}}</template> |
|||
</el-table-column> |
|||
<el-table-column prop="dikeType" align="center" label="堤防类别" /> |
|||
<el-table-column prop="dikeLen" align="center" label="堤防长度" /> |
|||
<el-table-column prop="project" align="center" label="起/终点所在地" /> |
|||
<el-table-column |
|||
prop="engineeringManagementUnit" |
|||
align="center" |
|||
label="工程管理单位" |
|||
/> |
|||
<el-table-column prop="operate" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<!-- <el-button type="text" size="small">处置</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="getTableData()" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getAreasData } from "@/api/areas/index"; |
|||
import { regionData, codeToText, TextToCode } from "element-china-area-data"; |
|||
|
|||
import { getDikeWaterRainProjectList } from "@/api/dike"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
areasOptionProps: { |
|||
emitPath: false, |
|||
checkStrictly: true, //选择任意一级 |
|||
}, |
|||
pageData: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
total: 0, |
|||
}, |
|||
paramsData: { |
|||
startArea: "", |
|||
endArea: "", |
|||
dikeGrad: "", |
|||
dikeName: "", |
|||
}, |
|||
areasOptions: [], |
|||
searchDikeName: "", |
|||
dikeTypeList: [], // 堤防类型列表 |
|||
dikeGradList: [], // 堤防级别列表 |
|||
tableData: [], |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("embankment_level").then((response) => { |
|||
this.dikeGradList = response.data; |
|||
}); |
|||
this.getDicts("embankment_type").then((response) => { |
|||
this.dikeTypeList = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.getTableData(); |
|||
this.getTreeData(); |
|||
}, |
|||
methods: { |
|||
// 获取列表信息 |
|||
getTableData() { |
|||
getDikeWaterRainProjectList({ |
|||
pageNum: this.pageData.pageNum, |
|||
pageSize: this.pageData.pageSize, |
|||
data: { |
|||
dikeType: this.dikeType || "", |
|||
dikeName: this.searchDikeName || "", |
|||
}, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records; |
|||
this.pageData.total = res.total; |
|||
} |
|||
}); |
|||
}, |
|||
// 重置搜索条件 |
|||
resetSearch() { |
|||
this.searchDikeName = ""; |
|||
this.getTableData(); |
|||
}, |
|||
// 水雨情监测 |
|||
handleGoReport(row) { |
|||
this.$router.push({ |
|||
path: "inspectionPlan", |
|||
query: { |
|||
dikeCode: row.dikeCode, |
|||
dikeName: row.dikeName, |
|||
}, |
|||
}); |
|||
}, |
|||
// 智能分析 |
|||
handleGoAnalyse(row) { |
|||
this.$router.push({ |
|||
path: "inspectionRecords", |
|||
query: { |
|||
dikeCode: row.dikeCode, |
|||
dikeName: row.dikeName, |
|||
}, |
|||
}); |
|||
}, |
|||
// 获取地区树数据 |
|||
getTreeData() { |
|||
getAreasData().then((items) => { |
|||
if (items?.data) { |
|||
let res = []; |
|||
let getChildren = (res, pid) => { |
|||
for (const i of items.data) { |
|||
if (i.parentid === pid) { |
|||
const newItem = { |
|||
label: i.name, |
|||
value: i.id, |
|||
}; |
|||
if (i.layer != 3) newItem.children = []; |
|||
res.push(newItem); |
|||
getChildren(newItem.children, newItem.value); |
|||
} |
|||
} |
|||
}; |
|||
getChildren(res, items.data[0].parentid); |
|||
this.areasOptions = res; |
|||
} |
|||
}); |
|||
}, |
|||
getDikeGrad(key) { |
|||
return ( |
|||
this.dikeGradList?.filter((v) => v.dictValue === key)?.[0]?.dictLabel || |
|||
key |
|||
); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.patrol-manage-page { |
|||
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; |
|||
|
|||
.search-input { |
|||
width: 202px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -1,344 +0,0 @@ |
|||
<!-- 水雨情测报页面 --> |
|||
<template> |
|||
<div class="patrol-manage-page"> |
|||
<div class="top-title">水闸信息</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>区域选择：</span> |
|||
<el-select v-model="dikeType" placeholder="请选择"> |
|||
<!-- <el-option |
|||
v-for="item in dikeTypeList" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> --> |
|||
</el-select> |
|||
<span class="ml-12">水闸标识：</span> |
|||
<el-select v-model="dikeType" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in dikeTypeList" |
|||
:key="item.dictValue" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
> |
|||
</el-option> |
|||
</el-select> |
|||
<el-button |
|||
class="!ml-10" |
|||
type="success" |
|||
@click="getTableData(searchInput)" |
|||
>搜索</el-button |
|||
> |
|||
<el-button @click="resetSearch()">重置</el-button> |
|||
</div> |
|||
<el-table class="mt-16" height="625" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="80" /> |
|||
<el-table-column prop="dikeName" align="center" label="水闸名称" /> |
|||
<el-table-column prop="dikeCode" align="center" label="水闸代码" /> |
|||
<el-table-column prop="dikeLength" align="center" label="水闸标识" /> |
|||
<el-table-column prop="dikeType" align="center" label="区域" /> |
|||
<el-table-column prop="project" align="center" label="管理机构" /> |
|||
<el-table-column prop="operate" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="handleCheck(scope.row)" type="text" size="small" |
|||
>查看</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="getTableData()" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
|
|||
<!-- 弹窗 --> |
|||
<el-dialog |
|||
title="标题" |
|||
@close="dialogVisible = false" |
|||
:visible.sync="dialogVisible" |
|||
width="520px" |
|||
> |
|||
<el-form |
|||
:model="ruleForm" |
|||
:rules="rules" |
|||
ref="ruleForm" |
|||
label-width="100px" |
|||
> |
|||
<el-form-item |
|||
label-width="120px" |
|||
label="日常巡查项目" |
|||
prop="checkings[0].xcId" |
|||
> |
|||
<el-select |
|||
filterable |
|||
remote |
|||
:remote-method="(query) => handleGetRemoteProjectListData(0, query)" |
|||
@focus="handleGetRemoteProjectListData(0, '')" |
|||
v-model="ruleForm.checkings[0].xcId" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in projectList0" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
:key="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label-width="120px" |
|||
label="定期巡查项目" |
|||
prop="checkings[1].xcId" |
|||
> |
|||
<el-select |
|||
filterable |
|||
remote |
|||
:remote-method="(query) => handleGetRemoteProjectListData(1, query)" |
|||
@focus="handleGetRemoteProjectListData(1, '')" |
|||
v-model="ruleForm.checkings[1].xcId" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in projectList1" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
:key="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label-width="120px" |
|||
label="特别巡查项目" |
|||
prop="checkings[2].xcId" |
|||
> |
|||
<el-select |
|||
filterable |
|||
remote |
|||
:remote-method="(query) => handleGetRemoteProjectListData(2, query)" |
|||
@focus="handleGetRemoteProjectListData(2, '')" |
|||
v-model="ruleForm.checkings[2].xcId" |
|||
placeholder="请选择" |
|||
> |
|||
<el-option |
|||
v-for="item in projectList2" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
:key="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button size="mini" @click="resetForm">取 消</el-button> |
|||
<el-button size="mini" type="primary" @click="submitForm" |
|||
>保存</el-button |
|||
> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getDikeProjectList, postProjectChecking } from "@/api/dike"; |
|||
import { postDFInspectionProjectList } from "@/api/management"; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
dialogVisible: false, |
|||
pageData: { |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
total: 0, |
|||
}, |
|||
searchInput: "", |
|||
dikeTypeList: [ |
|||
{ |
|||
label: "全部", |
|||
value: "", |
|||
}, |
|||
], // 水闸类型列表 |
|||
dikeType: "", |
|||
tableData: [], |
|||
ruleForm: { |
|||
dikeCode: "", |
|||
checkings: [ |
|||
{ |
|||
type: 0, |
|||
label: "日常检查", |
|||
xcId: "", |
|||
}, |
|||
{ |
|||
type: 1, |
|||
label: "定期检查", |
|||
xcId: "", |
|||
}, |
|||
{ |
|||
type: 2, |
|||
label: "特别检查", |
|||
xcId: "", |
|||
}, |
|||
], |
|||
}, |
|||
projectList0: [], // 对应type===0的日常巡查项目 |
|||
projectList1: [], // 对应type===1的日常巡查项目 |
|||
projectList2: [], // 对应type===2的日常巡查项目 |
|||
rules: { |
|||
["checkings[0].xcId"]: [ |
|||
{ required: true, message: "请选择", trigger: "change" }, |
|||
], |
|||
["checkings[1].xcId"]: [ |
|||
{ required: true, message: "请选择", trigger: "change" }, |
|||
], |
|||
["checkings[2].xcId"]: [ |
|||
{ required: true, message: "请选择", trigger: "change" }, |
|||
], |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.getDicts("embankment_type").then((response) => { |
|||
this.dikeTypeList = response.data; |
|||
}); |
|||
}, |
|||
mounted() { |
|||
this.getTableData(); |
|||
}, |
|||
methods: { |
|||
// 获取列表信息 |
|||
getTableData() { |
|||
getDikeProjectList({ |
|||
pageNum: this.pageData.pageNum, |
|||
pageSize: this.pageData.pageSize, |
|||
data: { |
|||
dikeType: this.dikeType || "", |
|||
dikeName: this.searchInput || "", |
|||
}, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records; |
|||
this.pageData.total = res.total; |
|||
} |
|||
}); |
|||
}, |
|||
// 重置搜索条件 |
|||
resetSearch() { |
|||
this.searchInput = ""; |
|||
this.dikeType = ""; |
|||
this.getTableData(); |
|||
}, |
|||
handleGoPlan(row) { |
|||
this.$router.push({ |
|||
path: "inspectionPlan", |
|||
query: { |
|||
dikeCode: row.dikeCode, |
|||
dikeName: row.dikeName, |
|||
}, |
|||
}); |
|||
}, |
|||
handleGoRecord(row) { |
|||
this.$router.push({ |
|||
path: "inspectionRecords", |
|||
query: { |
|||
dikeCode: row.dikeCode, |
|||
dikeName: row.dikeName, |
|||
}, |
|||
}); |
|||
}, |
|||
// 请求项目列表 |
|||
initProjectList(type, query) { |
|||
postDFInspectionProjectList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
type, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value: query, |
|||
}, |
|||
pageSize: 20, |
|||
pageNum: 1, |
|||
}).then((res) => { |
|||
if (res) { |
|||
this[`projectList${type}`] = res.records; |
|||
} |
|||
}); |
|||
}, |
|||
// 请求项目列表数据 |
|||
handleGetRemoteProjectListData(type, query) { |
|||
this.initProjectList(type, query); |
|||
}, |
|||
// 查看详情 |
|||
handleCheck(row) { |
|||
// this.initProjectList(); |
|||
// this.dialogVisible = true; |
|||
// this.ruleForm.dikeCode = row.dikeCode; |
|||
}, |
|||
resetForm() { |
|||
this.$refs.ruleForm.resetFields(); |
|||
this.dialogVisible = false; |
|||
}, |
|||
submitForm() { |
|||
console.log("表单 >>> ", this.ruleForm); |
|||
this.$refs.ruleForm.validate((valid) => { |
|||
if (valid) { |
|||
postProjectChecking(this.ruleForm).then((res) => { |
|||
console.log("res >>>>> ", res); |
|||
if (res?.success) { |
|||
this.$message.success("配置成功"); |
|||
this.dialogVisible = false; |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.patrol-manage-page { |
|||
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; |
|||
|
|||
.search-input { |
|||
width: 202px; |
|||
margin-right: 10px; |
|||
} |
|||
} |
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue