50 changed files with 5537 additions and 21 deletions
@ -0,0 +1,226 @@ |
|||
// 堤防相关接口
|
|||
import request from '@/utils/request' |
|||
|
|||
// 巡查计划管理-获取人员信息
|
|||
// export function getPersonnelInformation(id) {
|
|||
// return request({
|
|||
// url: `/system/user/${id}`,
|
|||
// method: 'get',
|
|||
// })
|
|||
// }
|
|||
|
|||
// 巡查项目管理-巡视检查列表
|
|||
export function postDFInspectionProjectList(data) { |
|||
return request({ |
|||
url: '/run/df/checking/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-巡视检查详情
|
|||
export function getDFInspectionProject(id) { |
|||
return request({ |
|||
url: `/run/df/checking/${id}`, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-新增巡视检查
|
|||
export function postDFInspectionProject(data) { |
|||
return request({ |
|||
url: '/run/df/checking', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-修改巡视检查
|
|||
export function putDFInspectionProject(data) { |
|||
return request({ |
|||
url: '/run/df/checking', |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-删除巡视检查
|
|||
export function deleteDFInspectionProject(id) { |
|||
return request({ |
|||
url: `/run/df/checking/${id}`, |
|||
method: 'delete' |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-巡查计划列表
|
|||
export function postDFInspectionPlanlist(data) { |
|||
return request({ |
|||
url: '/run/df/plan/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-巡查计划详情
|
|||
export function getDFInspectionPlan(id) { |
|||
return request({ |
|||
url: `/run/df/plan/${id}`, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-新增巡查计划
|
|||
export function postDFInspectionPlan(data) { |
|||
return request({ |
|||
url: '/run/df/plan', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-更新巡查计划
|
|||
export function putDFInspectionPlan(data) { |
|||
return request({ |
|||
url: '/run/df/plan', |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-删除巡查计划
|
|||
export function deleteDFInspectionPlan(id) { |
|||
return request({ |
|||
url: `/run/df/plan/${id}`, |
|||
method: 'delete', |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-巡查点位设置
|
|||
export function postDFInspectionRoute(id, data) { |
|||
return request({ |
|||
url: `/run/df/plan/points/${id}`, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-获取巡查点位
|
|||
export function getDFInspectionRoute(id) { |
|||
return request({ |
|||
url: `/run/df/plan/points/${id}`, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
// 巡查记录-巡查记录列表
|
|||
export function postDFInspectionRecordsList(data) { |
|||
return request({ |
|||
url: '/run/df/record/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查记录-新增巡查记录
|
|||
export function postDFInspectionRecords(data) { |
|||
return request({ |
|||
url: '/run/df/record', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查记录-巡查记录轨迹列表
|
|||
export function postDFInspectionRecordsTrajectoryList(data) { |
|||
return request({ |
|||
url: '/run/df/trace/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 维修计划管理-维修计划列表
|
|||
export function postDFMaintenancePlanList(data) { |
|||
return request({ |
|||
url: '/run/df/yh/plan/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 维修计划管理-维修计划详情
|
|||
export function getDFMaintenancePlan(id) { |
|||
return request({ |
|||
url: `/run/df/yh/plan/${id}`, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
// 维修计划管理-新增维修计划
|
|||
export function postDFMaintenancePlan(data) { |
|||
return request({ |
|||
url: '/run/df/yh/plan', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 维修计划管理-更新维修计划
|
|||
export function putDFMaintenancePlan(data) { |
|||
return request({ |
|||
url: '/run/df/yh/plan', |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 维修计划管理-删除维修计划
|
|||
export function deleteDFMaintenancePlan(id) { |
|||
return request({ |
|||
url: `/run/df/yh/plan/${id}`, |
|||
method: 'delete' |
|||
}) |
|||
} |
|||
|
|||
// 维修记录-维修记录列表
|
|||
export function postDFMaintenanceRecordsList(data) { |
|||
return request({ |
|||
url: '/run/df/yh/record/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 维修记录-维修记录详情
|
|||
export function getDFMaintenanceRecords(id) { |
|||
return request({ |
|||
url: `/run/df/yh/record/${id}`, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
// 维修记录-新增维修记录
|
|||
export function postDFMaintenanceRecords(data) { |
|||
return request({ |
|||
url: '/run/df/yh/record', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 维修记录-更新维修记录
|
|||
export function putDFMaintenanceRecords(data) { |
|||
return request({ |
|||
url: '/run/df/yh/record', |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 维修记录-删除维修记录
|
|||
export function deleteDFMaintenanceRecords(id) { |
|||
return request({ |
|||
url: `/run/df/yh/record/${id}`, |
|||
method: 'delete' |
|||
}) |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
export * from './dike' |
|||
export * from './reservoir' |
|||
export * from './sluice' |
|||
export { getDicts } from '../system/dict/data' |
|||
export { listUser } from '../system/user' |
|||
@ -0,0 +1 @@ |
|||
// 水库相关接口
|
|||
@ -0,0 +1,218 @@ |
|||
// 水闸相关接口
|
|||
import request from '@/utils/request' |
|||
|
|||
// 巡查项目管理-巡视检查列表
|
|||
export function postSZInspectionProjectList(data) { |
|||
return request({ |
|||
url: '/run/sz/checking/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-巡视检查详情
|
|||
export function getSZInspectionProject(id) { |
|||
return request({ |
|||
url: `/run/sz/checking/${id}`, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-新增巡视检查
|
|||
export function postSZInspectionProject(data) { |
|||
return request({ |
|||
url: '/run/sz/checking', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-修改巡视检查
|
|||
export function putSZInspectionProject(data) { |
|||
return request({ |
|||
url: '/run/sz/checking', |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查项目管理-删除巡视检查
|
|||
export function deleteSZInspectionProject(id) { |
|||
return request({ |
|||
url: `/run/sz/checking/${id}`, |
|||
method: 'delete' |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-巡查计划列表
|
|||
export function postSZInspectionPlanlist(data) { |
|||
return request({ |
|||
url: '/run/sz/plan/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-巡查计划详情
|
|||
export function getSZInspectionPlan(id) { |
|||
return request({ |
|||
url: `/run/sz/plan/${id}`, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-新增巡查计划
|
|||
export function postSZInspectionPlan(data) { |
|||
return request({ |
|||
url: '/run/sz/plan', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-更新巡查计划
|
|||
export function putSZInspectionPlan(data) { |
|||
return request({ |
|||
url: '/run/sz/plan', |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-删除巡查计划
|
|||
export function deleteSZInspectionPlan(id) { |
|||
return request({ |
|||
url: `/run/sz/plan/${id}`, |
|||
method: 'delete', |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-巡查点位设置
|
|||
export function postSZInspectionRoute(id, data) { |
|||
return request({ |
|||
url: `/run/sz/plan/points/${id}`, |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查计划管理-获取巡查点位
|
|||
export function getSZInspectionRoute(id) { |
|||
return request({ |
|||
url: `/run/sz/plan/points/${id}`, |
|||
method: 'get', |
|||
}) |
|||
} |
|||
|
|||
// 巡查记录-巡查记录列表
|
|||
export function postSZInspectionRecordsList(data) { |
|||
return request({ |
|||
url: '/run/sz/record/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查记录-新增巡查记录
|
|||
export function postSZInspectionRecords(data) { |
|||
return request({ |
|||
url: '/run/sz/record', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 巡查记录-巡查记录轨迹列表
|
|||
export function postSZInspectionRecordsTrajectoryList(data) { |
|||
return request({ |
|||
url: '/run/sz/trace/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 维修计划管理-维修计划列表
|
|||
export function postSZMaintenancePlanList(data) { |
|||
return request({ |
|||
url: '/run/sz/yh/plan/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 维修计划管理-维修计划详情
|
|||
export function getSZMaintenancePlan(id) { |
|||
return request({ |
|||
url: `/run/sz/yh/plan/${id}`, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
// 维修计划管理-新增维修计划
|
|||
export function postSZMaintenancePlan(data) { |
|||
return request({ |
|||
url: '/run/sz/yh/plan', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 维修计划管理-更新维修计划
|
|||
export function putSZMaintenancePlan(data) { |
|||
return request({ |
|||
url: '/run/sz/yh/plan', |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 维修计划管理-删除维修计划
|
|||
export function deleteSZMaintenancePlan(id) { |
|||
return request({ |
|||
url: `/run/sz/yh/plan/${id}`, |
|||
method: 'delete' |
|||
}) |
|||
} |
|||
|
|||
// 维修记录-维修记录列表
|
|||
export function postSZMaintenanceRecordsList(data) { |
|||
return request({ |
|||
url: '/run/sz/yh/record/list', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 维修记录-维修记录详情
|
|||
export function getSZMaintenanceRecords(id) { |
|||
return request({ |
|||
url: `/run/sz/yh/record/${id}`, |
|||
method: 'get' |
|||
}) |
|||
} |
|||
|
|||
// 维修记录-新增维修记录
|
|||
export function postSZMaintenanceRecords(data) { |
|||
return request({ |
|||
url: '/run/sz/yh/record', |
|||
method: 'post', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 维修记录-更新维修记录
|
|||
export function putSZMaintenanceRecords(data) { |
|||
return request({ |
|||
url: '/run/sz/yh/record', |
|||
method: 'put', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
// 维修记录-删除维修记录
|
|||
export function deleteSZMaintenanceRecords(id) { |
|||
return request({ |
|||
url: `/run/sz/yh/record/${id}`, |
|||
method: 'delete' |
|||
}) |
|||
} |
|||
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 354 B |
|
After Width: | Height: | Size: 980 B |
@ -0,0 +1,19 @@ |
|||
const state = { |
|||
/** |
|||
* selectTab = 0 水库运行管理； |
|||
* selectTab = 1 水闸运行管理； |
|||
* selectTab = 2 堤防运行管理； |
|||
*/ |
|||
selectTab: 0 |
|||
} |
|||
const mutations = { |
|||
SET_SELECT_TAB: (state, select) => { |
|||
state.selectTab = select |
|||
} |
|||
} |
|||
|
|||
export default { |
|||
namespaced: true, |
|||
state, |
|||
mutations, |
|||
} |
|||
@ -0,0 +1,3 @@ |
|||
<template > |
|||
<router-view /> |
|||
</template> |
|||
@ -0,0 +1,399 @@ |
|||
<!-- 巡查项目管理-堤防 --> |
|||
<script> |
|||
import { getDicts, postDFInspectionProjectList, postDFInspectionProject, putDFInspectionProject, deleteDFInspectionProject, getDFInspectionProject } from '@/api/management' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
data() { |
|||
return { |
|||
searchInput: '', |
|||
searchType: 3, |
|||
dialogVisible: false, |
|||
ContentType: '', |
|||
firstType: [], // 一级检查内容类型 |
|||
secondType: [], // 二级检查内容类型 |
|||
examType: [], // 检查类型 |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0 // 总数量 |
|||
}, |
|||
ruleForm: { |
|||
name: '', |
|||
type: '', |
|||
checkContentType: '', |
|||
items: [ |
|||
], |
|||
}, |
|||
rules: { |
|||
name: [ |
|||
{ required: true, message: '请输入巡视检查名称', trigger: 'blur' }, |
|||
{ max: 50, message: '名称最长为50个字符', trigger: 'blur' } |
|||
], |
|||
type: [ |
|||
{ required: true, message: '请选择巡查类型', trigger: 'change' } |
|||
], |
|||
checkContentType: [ |
|||
{ required: true, message: '请选择巡视检查内容', trigger: 'change' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 表格筛选 |
|||
searchTableList() { |
|||
postDFInspectionProjectList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
type: this.searchType == 3 ? '' : this.searchType |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value: this.searchInput |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records |
|||
this.pageData.total = res.total |
|||
} |
|||
console.log('🚀表格数据🚀', res) |
|||
}) |
|||
}, |
|||
// 编辑巡查项目 |
|||
editTableItem(row) { |
|||
getDFInspectionProject(row.id).then((res) => { |
|||
console.log('🚀res🚀', res.data) |
|||
this.ruleForm = res.data |
|||
this.ruleForm.checkContentType = res.data.items[0].parts[0] |
|||
getDicts(res.data.items[0].parts[0]).then((res) => { |
|||
this.secondType = res.data |
|||
console.log('🚀一级🚀', res.data) |
|||
}) |
|||
this.ruleForm.items.forEach(element => { |
|||
getDicts(element.parts[1]).then((res) => { |
|||
this.$set(element, 'third', res.data) |
|||
}) |
|||
}); |
|||
this.dialogVisible = true |
|||
console.log('🚀this.ruleForm🚀', this.ruleForm) |
|||
}) |
|||
}, |
|||
// 删除对应巡查项目 |
|||
deleteTableItem(row) { |
|||
deleteDFInspectionProject(row.id).then((res) => { |
|||
this.getTableData() |
|||
this.$message.success('删除成功'); |
|||
}) |
|||
}, |
|||
// 新增巡查内容 |
|||
addPatrolItem(checkContentType) { |
|||
console.log('🚀checkContentType🚀', checkContentType) |
|||
this.ruleForm.items.push( |
|||
{ |
|||
content: '', |
|||
parts: [checkContentType, '', ''] |
|||
} |
|||
) |
|||
}, |
|||
// 删除对应巡查内容 |
|||
deletePatrolItem(index) { |
|||
this.ruleForm.items.splice(index, 1) |
|||
}, |
|||
// 改变一级巡视检查内容 |
|||
changeContentType(dictValue) { |
|||
getDicts(dictValue).then((res) => { |
|||
this.secondType = res.data |
|||
console.log('🚀一级🚀', res.data) |
|||
}) |
|||
this.ruleForm.items = [ |
|||
{ |
|||
content: '', |
|||
parts: [this.ruleForm.checkContentType] |
|||
} |
|||
] |
|||
}, |
|||
// 改变二级巡视检查内容 |
|||
changeSecondType(row) { |
|||
getDicts(row.parts[1]).then((res) => { |
|||
row.parts[2] = '' |
|||
this.$set(row, 'third', res.data) |
|||
}) |
|||
}, |
|||
// 改变三级巡视检查内容 |
|||
changeThirdType(row) { |
|||
let value = row.third.find(item => item.dictValue == row.parts[2]).remark |
|||
if (value) { |
|||
row.content = value |
|||
} |
|||
}, |
|||
// 保存巡查项目 |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
console.log(this.ruleForm); |
|||
if (this.ruleForm.id) { |
|||
putDFInspectionProject(this.ruleForm).then(() => { |
|||
this.getTableData() |
|||
this.dialogVisible = false |
|||
this.$message.success('更新成功'); |
|||
}) |
|||
} else { |
|||
postDFInspectionProject(this.ruleForm).then(() => { |
|||
this.getTableData() |
|||
this.dialogVisible = false |
|||
this.$message.success('添加成功'); |
|||
}) |
|||
} |
|||
} else { |
|||
console.log('校验不通过'); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 关闭dialog |
|||
closeDialog(ruleForm = 'ruleForm') { |
|||
console.log('触发关闭dialog', ruleForm); |
|||
this.$refs[ruleForm].resetFields(); |
|||
this.ruleForm = { |
|||
name: '', |
|||
type: '', |
|||
checkContentType: '', |
|||
items: [ |
|||
{ |
|||
content: '', |
|||
parts: ['', '', ''] |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
// 获取列表数据 |
|||
getTableData() { |
|||
this.searchInput = '', |
|||
this.searchType = 3, |
|||
postDFInspectionProjectList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like" |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records |
|||
this.pageData.total = res.total |
|||
} |
|||
console.log('🚀表格数据🚀', res) |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData() |
|||
// 获取巡查类型 |
|||
getDicts('xs_classfy').then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
res.data.forEach(element => { |
|||
element.dictValue = Number(element.dictValue) |
|||
}); |
|||
console.log('🚀res.data🚀', res.data) |
|||
this.examType = res.data |
|||
} |
|||
}) |
|||
// 获取一级数据 |
|||
getDicts('df_xs_c_classfy').then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
this.firstType = res.data |
|||
} |
|||
}) |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body"> |
|||
<div class="top-title"> |
|||
基础信息管理 |
|||
</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>巡视检查名称：</span> |
|||
<el-input class="search-input" v-model="searchInput" placeholder="请输入巡视检查名称" /> |
|||
<span>巡查类型：</span> |
|||
<el-select v-model="searchType" placeholder="请选择"> |
|||
<el-option v-for="item in examType" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option> |
|||
<el-option label="全部" :value="3"></el-option> |
|||
</el-select> |
|||
<el-button class="search-btn" type="success" @click="searchTableList()">搜索</el-button> |
|||
</div> |
|||
<el-button class="search-btn" style=" margin-right: 16px;margin-bottom: 8px; float: right;" type="success" |
|||
@click="dialogVisible = true">添加</el-button> |
|||
<el-table class="table" height="640" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="100"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="巡视检查名称"> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="巡查类型"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="examType.length > 0 && scope.row.type !== null">{{ examType.find(item => item.dictValue == |
|||
scope.row.type).dictLabel || |
|||
'' |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="createTime" align="center" sortable label="创建时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="updateTime" align="center" sortable label="更新时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button style=" margin-right: 16px;" @click="editTableItem(scope.row)" type="text" |
|||
size="small">编辑</el-button> |
|||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red" |
|||
title="确定删除吗？" @confirm="deleteTableItem(scope.row)"> |
|||
<el-button style="color: red;" type="text" size="small" slot="reference">删除</el-button> |
|||
</el-popconfirm> |
|||
</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="closeDialog" :visible.sync="dialogVisible" width="50%"> |
|||
<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" class="demo-ruleForm"> |
|||
<el-form-item label-width="120px" label="巡视检查名称" prop="name"> |
|||
<el-input style="width: 202px;" v-model="ruleForm.name"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="巡查类型" prop="type"> |
|||
<el-select v-model="ruleForm.type" placeholder="请选择巡查类型"> |
|||
<el-option v-for="item in examType" :label="item.dictLabel" :value="item.dictValue" |
|||
:key="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="巡视检查内容" prop="checkContentType"> |
|||
<el-select v-model="ruleForm.checkContentType" @change="changeContentType(ruleForm.checkContentType)" |
|||
placeholder="请选择巡视检查内容"> |
|||
<el-option v-for="item in firstType" :label="item.dictLabel" :value="item.dictValue" |
|||
:key="item.id"></el-option> |
|||
<el-option label="其他" value="2"></el-option> |
|||
</el-select> |
|||
<span style="margin-left: 8px; color: red;">注意：切换选项后检查内容将会清空！</span> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table class="table" height="350" :data="ruleForm.items" border> |
|||
<el-table-column type="index" align="center" label="序号" center width="80"> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="检查项目和内容" v-if="ruleForm.checkContentType != '2'"> |
|||
<template slot-scope="scope"> |
|||
<el-select v-model="scope.row.parts[1]" @change="changeSecondType(scope.row)" placeholder="请选择检查项目和内容"> |
|||
<el-option v-for="item in secondType" :label="item.dictLabel" :value="item.dictValue" |
|||
:key="item.id"></el-option> |
|||
</el-select> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="检查部位" v-if="ruleForm.checkContentType != '2'"> |
|||
<template slot-scope="scope"> |
|||
<el-select v-model="scope.row.parts[2]" v-if="scope.row.third" @change="changeThirdType(scope.row)" |
|||
placeholder="请选择检查部位"> |
|||
<el-option v-for="item in scope.row.third" :label="item.dictLabel" :value="item.dictValue" |
|||
:key="item.id"></el-option> |
|||
</el-select> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" prop="inspectionContent" label="检查内容"> |
|||
<template slot-scope="scope"> |
|||
<el-input maxlength="500" v-model="scope.row.content"></el-input> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button style="margin-right: 8px;" |
|||
v-if="scope.$index == ruleForm.items.length - 1 && ruleForm.items.length < 50" |
|||
@click="addPatrolItem(ruleForm.checkContentType)" type="text" size="small">添加</el-button> |
|||
<el-popconfirm v-if="ruleForm.items.length >= 2" confirm-button-text='确定' cancel-button-text='取消' |
|||
icon="el-icon-info" icon-color="red" title="确定删除吗？" @confirm="deletePatrolItem(scope.$index)"> |
|||
<el-button slot="reference" style="color: red;" type="text" size="small">删除</el-button> |
|||
</el-popconfirm> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button size="mini" @click="dialogVisible = false">取 消</el-button> |
|||
<el-button 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); |
|||
margin-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 { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.search-btn { |
|||
margin-left: 10px; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
|
|||
; |
|||
} |
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,22 @@ |
|||
<!-- 巡查项目管理-水库 --> |
|||
<script> |
|||
export default { |
|||
name: '', |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
水库 |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
@ -0,0 +1,399 @@ |
|||
<!-- 巡查项目管理-水闸 --> |
|||
<script> |
|||
import { getDicts, postSZInspectionProjectList, postSZInspectionProject, putSZInspectionProject, deleteSZInspectionProject, getSZInspectionProject } from '@/api/management' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
data() { |
|||
return { |
|||
searchInput: '', |
|||
searchType: 3, |
|||
dialogVisible: false, |
|||
ContentType: '', |
|||
firstType: [], // 一级检查内容类型 |
|||
secondType: [], // 二级检查内容类型 |
|||
examType: [], // 检查类型 |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0 // 总数量 |
|||
}, |
|||
ruleForm: { |
|||
name: '', |
|||
type: '', |
|||
checkContentType: '', |
|||
items: [ |
|||
], |
|||
}, |
|||
rules: { |
|||
name: [ |
|||
{ required: true, message: '请输入巡视检查名称', trigger: 'blur' }, |
|||
{ max: 50, message: '名称最长为50个字符', trigger: 'blur' } |
|||
], |
|||
type: [ |
|||
{ required: true, message: '请选择巡查类型', trigger: 'change' } |
|||
], |
|||
checkContentType: [ |
|||
{ required: true, message: '请选择巡视检查内容', trigger: 'change' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 表格筛选 |
|||
searchTableList() { |
|||
postSZInspectionProjectList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
type: this.searchType == 3 ? '' : this.searchType |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value: this.searchInput |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records |
|||
this.pageData.total = res.total |
|||
} |
|||
console.log('🚀表格数据🚀', res) |
|||
}) |
|||
}, |
|||
// 编辑巡查项目 |
|||
editTableItem(row) { |
|||
getSZInspectionProject(row.id).then((res) => { |
|||
console.log('🚀res🚀', res.data) |
|||
this.ruleForm = res.data |
|||
this.ruleForm.checkContentType = res.data.items[0].parts[0] |
|||
getDicts(res.data.items[0].parts[0]).then((res) => { |
|||
this.secondType = res.data |
|||
console.log('🚀一级🚀', res.data) |
|||
}) |
|||
this.ruleForm.items.forEach(element => { |
|||
getDicts(element.parts[1]).then((res) => { |
|||
this.$set(element, 'third', res.data) |
|||
}) |
|||
}); |
|||
this.dialogVisible = true |
|||
console.log('🚀this.ruleForm🚀', this.ruleForm) |
|||
}) |
|||
}, |
|||
// 删除对应巡查项目 |
|||
deleteTableItem(row) { |
|||
deleteSZInspectionProject(row.id).then((res) => { |
|||
this.getTableData() |
|||
this.$message.success('删除成功'); |
|||
}) |
|||
}, |
|||
// 新增巡查内容 |
|||
addPatrolItem(checkContentType) { |
|||
console.log('🚀checkContentType🚀', checkContentType) |
|||
this.ruleForm.items.push( |
|||
{ |
|||
content: '', |
|||
parts: [checkContentType, '', ''] |
|||
} |
|||
) |
|||
}, |
|||
// 删除对应巡查内容 |
|||
deletePatrolItem(index) { |
|||
this.ruleForm.items.splice(index, 1) |
|||
}, |
|||
// 改变一级巡视检查内容 |
|||
changeContentType(dictValue) { |
|||
getDicts(dictValue).then((res) => { |
|||
this.secondType = res.data |
|||
console.log('🚀一级🚀', res.data) |
|||
}) |
|||
this.ruleForm.items = [ |
|||
{ |
|||
content: '', |
|||
parts: [this.ruleForm.checkContentType] |
|||
} |
|||
] |
|||
}, |
|||
// 改变二级巡视检查内容 |
|||
changeSecondType(row) { |
|||
getDicts(row.parts[1]).then((res) => { |
|||
console.log('🚀二级🚀', res.data) |
|||
row.parts[2] = '' |
|||
this.$set(row, 'third', res.data) |
|||
}) |
|||
}, |
|||
// 改变三级巡视检查内容 |
|||
changeThirdType(row) { |
|||
let value = row.third.find(item => item.dictValue == row.parts[2]).remark |
|||
if (value) { |
|||
row.content = value |
|||
} |
|||
}, |
|||
// 保存巡查项目 |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
console.log(this.ruleForm); |
|||
if (this.ruleForm.id) { |
|||
putSZInspectionProject(this.ruleForm).then(() => { |
|||
this.getTableData() |
|||
this.dialogVisible = false |
|||
this.$message.success('更新成功'); |
|||
}) |
|||
} else { |
|||
postSZInspectionProject(this.ruleForm).then(() => { |
|||
this.getTableData() |
|||
this.dialogVisible = false |
|||
this.$message.success('添加成功'); |
|||
}) |
|||
} |
|||
} else { |
|||
console.log('校验不通过'); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 关闭dialog |
|||
closeDialog(ruleForm = 'ruleForm') { |
|||
console.log('触发关闭dialog', ruleForm); |
|||
this.$refs[ruleForm].resetFields(); |
|||
this.ruleForm = { |
|||
name: '', |
|||
type: '', |
|||
checkContentType: '', |
|||
items: [ |
|||
{ |
|||
content: '', |
|||
parts: ['', '', ''] |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
// 获取列表数据 |
|||
getTableData() { |
|||
this.searchInput = '', |
|||
this.searchType = 3, |
|||
postSZInspectionProjectList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like" |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records |
|||
this.pageData.total = res.total |
|||
} |
|||
console.log('🚀表格数据🚀', res) |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData() |
|||
// 获取巡查类型 |
|||
getDicts('xs_classfy').then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
res.data.forEach(element => { |
|||
element.dictValue = Number(element.dictValue) |
|||
}); |
|||
console.log('🚀res.data🚀', res.data) |
|||
this.examType = res.data |
|||
} |
|||
}) |
|||
// 获取一级数据 |
|||
getDicts('df_xs_c_classfy').then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
this.firstType = res.data |
|||
} |
|||
}) |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body"> |
|||
<div class="top-title"> |
|||
基础信息管理 |
|||
</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>巡视检查名称：</span> |
|||
<el-input class="search-input" v-model="searchInput" placeholder="请输入巡视检查名称" /> |
|||
<span>巡查类型：</span> |
|||
<el-select v-model="searchType" placeholder="请选择"> |
|||
<el-option v-for="item in examType" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option> |
|||
<el-option label="全部" :value="3"></el-option> |
|||
</el-select> |
|||
<el-button class="search-btn" type="success" @click="searchTableList()">搜索</el-button> |
|||
</div> |
|||
<el-button class="search-btn" style=" margin-right: 16px;margin-bottom: 8px; float: right;" type="success" |
|||
@click="dialogVisible = true">添加</el-button> |
|||
<el-table class="table" height="640" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="100"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="巡视检查名称"> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="巡查类型"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="examType.length > 0 && scope.row.type !== null">{{ examType.find(item => item.dictValue == |
|||
scope.row.type).dictLabel || |
|||
'' |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="createTime" align="center" sortable label="创建时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="updateTime" align="center" sortable label="更新时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button style=" margin-right: 16px;" @click="editTableItem(scope.row)" type="text" |
|||
size="small">编辑</el-button> |
|||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red" |
|||
title="确定删除吗？" @confirm="deleteTableItem(scope.row)"> |
|||
<el-button style="color: red;" type="text" size="small" slot="reference">删除</el-button> |
|||
</el-popconfirm> |
|||
</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="closeDialog" :visible.sync="dialogVisible" width="50%"> |
|||
<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" class="demo-ruleForm"> |
|||
<el-form-item label-width="120px" label="巡视检查名称" prop="name"> |
|||
<el-input style="width: 202px;" v-model="ruleForm.name"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="巡查类型" prop="type"> |
|||
<el-select v-model="ruleForm.type" placeholder="请选择巡查类型"> |
|||
<el-option v-for="item in examType" :label="item.dictLabel" :value="item.dictValue" |
|||
:key="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="巡视检查内容" prop="checkContentType"> |
|||
<el-select v-model="ruleForm.checkContentType" @change="changeContentType(ruleForm.checkContentType)" |
|||
placeholder="请选择巡视检查内容"> |
|||
<el-option v-for="item in firstType" :label="item.dictLabel" :value="item.dictValue" |
|||
:key="item.id"></el-option> |
|||
<el-option label="其他" value="2"></el-option> |
|||
</el-select> |
|||
<span style="margin-left: 8px; color: red;">注意：切换选项后检查内容将会清空！</span> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table class="table" height="350" :data="ruleForm.items" border> |
|||
<el-table-column type="index" align="center" label="序号" center width="80"> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="检查项目和内容" v-if="ruleForm.checkContentType != '2'"> |
|||
<template slot-scope="scope"> |
|||
<el-select v-model="scope.row.parts[1]" @change="changeSecondType(scope.row)" placeholder="请选择检查项目和内容"> |
|||
<el-option v-for="item in secondType" :label="item.dictLabel" :value="item.dictValue" |
|||
:key="item.id"></el-option> |
|||
</el-select> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" label="检查部位" v-if="ruleForm.checkContentType != '2'"> |
|||
<template slot-scope="scope"> |
|||
<el-select v-model="scope.row.parts[2]" @change="changeThirdType(scope.row)" placeholder="请选择检查部位"> |
|||
<el-option v-for="item in scope.row.third" :label="item.dictLabel" :value="item.dictValue" |
|||
:key="item.id"></el-option> |
|||
</el-select> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column align="center" prop="inspectionContent" label="检查内容"> |
|||
<template slot-scope="scope"> |
|||
<el-input maxlength="500" v-model="scope.row.content"></el-input> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button style="margin-right: 8px;" |
|||
v-if="scope.$index == ruleForm.items.length - 1 && ruleForm.items.length < 50" |
|||
@click="addPatrolItem(ruleForm.checkContentType)" type="text" size="small">添加</el-button> |
|||
<el-popconfirm v-if="ruleForm.items.length >= 2" confirm-button-text='确定' cancel-button-text='取消' |
|||
icon="el-icon-info" icon-color="red" title="确定删除吗？" @confirm="deletePatrolItem(scope.$index)"> |
|||
<el-button slot="reference" style="color: red;" type="text" size="small">删除</el-button> |
|||
</el-popconfirm> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button size="mini" @click="dialogVisible = false">取 消</el-button> |
|||
<el-button 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); |
|||
margin-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 { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.search-btn { |
|||
margin-left: 10px; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
|
|||
; |
|||
} |
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,29 @@ |
|||
<!-- 巡查项目管理 --> |
|||
<script> |
|||
import Dike from './Dike.vue' |
|||
import Reservoir from './Reservoir.vue' |
|||
import Sluice from './Sluice.vue' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
components: { |
|||
Reservoir, // 水库 |
|||
Sluice, // 水闸 |
|||
Dike, // 堤防 |
|||
}, |
|||
computed: { |
|||
selectTab() { |
|||
return this.$store.state.topTab.selectTab |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<Reservoir v-if="selectTab == 0"></Reservoir> |
|||
<Sluice v-if="selectTab == 1"></Sluice> |
|||
<Dike v-if="selectTab == 2"></Dike> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
@ -0,0 +1,397 @@ |
|||
<!-- 巡查计划管理-堤防 --> |
|||
<script> |
|||
import { getDicts, postDFInspectionPlanlist, postDFInspectionPlan, putDFInspectionPlan, postDFInspectionProjectList, getDFInspectionPlan, deleteDFInspectionPlan, listUser } from '@/api/management' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
data() { |
|||
return { |
|||
searchInput: '', |
|||
dialogVisible: false, |
|||
patrolType: [], // 巡查周期类型 |
|||
personnelList: [], // 人员列表 |
|||
examType: [], // 检查类型 |
|||
tableData: [], // 检查列表 |
|||
patrolTableData: [], // 巡查项目列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0 // 总数量 |
|||
}, |
|||
ruleForm: { |
|||
name: '', |
|||
type: '', |
|||
xcId: '', |
|||
frequency: '', |
|||
cycleType: '', |
|||
reminderTime: '', |
|||
selectUser: [], |
|||
operators: [], |
|||
otherConfig: { |
|||
week: '', |
|||
time: '' |
|||
} |
|||
}, |
|||
rules: { |
|||
name: [ |
|||
{ required: true, message: '请输入计划名称', trigger: 'blur' }, |
|||
{ max: 50, message: '名称最长为50个字符', trigger: 'blur' } |
|||
], |
|||
type: [ |
|||
{ required: true, message: '请选择巡查类型', trigger: 'change' } |
|||
], |
|||
xcId: [ |
|||
{ required: true, message: '请选择巡查项目名称', trigger: 'change' } |
|||
], |
|||
selectUser: [ |
|||
{ required: true, message: '请选择巡查人员', trigger: 'change' } |
|||
], |
|||
cycleType: [ |
|||
{ required: true, message: '请选择巡查周期', trigger: 'change' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 编辑巡查项目 |
|||
editTableItem(row) { |
|||
getDFInspectionPlan(row.id).then((res) => { |
|||
// 遍历用户数据让select组件渲染选项 |
|||
if (res.data.otherConfig.selectUser) { |
|||
this.personnelList = [] |
|||
res.data.otherConfig.selectUser.forEach(element => { |
|||
listUser({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "nickName", |
|||
type: "like", |
|||
value: element.nickName |
|||
}, |
|||
pageSize: 10, |
|||
pageNum: 1 |
|||
}).then((res) => { |
|||
this.personnelList.push(res.records[0]) |
|||
}) |
|||
}); |
|||
} |
|||
this.ruleForm = res.data |
|||
this.ruleForm.type = res.data.type.toString() |
|||
if (res.data.cycleType) { |
|||
this.ruleForm.cycleType = res.data.cycleType.toString() |
|||
} |
|||
this.changePatrolType(res.data, false) |
|||
this.dialogVisible = true |
|||
}) |
|||
}, |
|||
// 删除对应巡查项目 |
|||
deleteTableItem(row) { |
|||
deleteDFInspectionPlan(row.id).then((res) => { |
|||
this.getTableData() |
|||
this.$message.success('删除成功'); |
|||
}) |
|||
}, |
|||
// 路线设置 |
|||
routeSetting(row) { |
|||
this.$router.push({ |
|||
path: '/patrolRouteSettings', |
|||
query: { id: row.id, name: row.name, editor: true } |
|||
}) |
|||
}, |
|||
// 保存巡查项目 |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
let user = [] |
|||
this.ruleForm.otherConfig.selectUser.forEach(element => { |
|||
let a = { |
|||
name: element.nickName, |
|||
uid: element.id |
|||
} |
|||
user.push(a) |
|||
}); |
|||
this.ruleForm.operators = user |
|||
if (this.ruleForm.id) { |
|||
putDFInspectionPlan(this.ruleForm).then((res) => { |
|||
this.getTableData() |
|||
this.dialogVisible = false |
|||
this.$message.success('更新成功'); |
|||
}) |
|||
} else { |
|||
postDFInspectionPlan(this.ruleForm).then((res) => { |
|||
this.getTableData() |
|||
this.dialogVisible = false |
|||
this.$message.success('添加成功'); |
|||
}) |
|||
} |
|||
} else { |
|||
console.log('校验不通过'); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 更改巡查类型 |
|||
changePatrolType(ruleForm, reset) { |
|||
if (reset) { |
|||
this.$set(ruleForm, 'xcId', '') |
|||
} |
|||
postDFInspectionProjectList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
type: ruleForm.type |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like" |
|||
}, |
|||
pageSize: 999, |
|||
pageNum: 1 |
|||
}).then((res) => { |
|||
this.patrolTableData = res.records |
|||
}) |
|||
}, |
|||
// 搜索用户 |
|||
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 |
|||
}) |
|||
}, |
|||
// 关闭dialog |
|||
closeDialog(ruleForm = 'ruleForm') { |
|||
console.log('触发关闭dialog', ruleForm); |
|||
this.$refs[ruleForm].resetFields(); |
|||
this.patrolTableData = [] |
|||
this.ruleForm = { |
|||
name: '', |
|||
type: '', |
|||
xcId: '', |
|||
frequency: '', |
|||
cycleType: '', |
|||
reminderTime: '', |
|||
operators: [], |
|||
otherConfig: { |
|||
week: '', |
|||
time: '', |
|||
selectUser: [], |
|||
} |
|||
} |
|||
}, |
|||
// 获取数据 |
|||
getTableData(search) { |
|||
postDFInspectionPlanlist({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
} |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value: search |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records |
|||
this.pageData.total = res.total |
|||
} |
|||
console.log('🚀res1🚀', res) |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData() |
|||
getDicts('xs_classfy').then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
res.data.forEach(element => { |
|||
element.dictValue = element.dictValue |
|||
}); |
|||
this.examType = res.data |
|||
} |
|||
}) |
|||
getDicts('xs_cycle_type').then((res) => { |
|||
console.log('🚀res.data🚀', res.data) |
|||
this.patrolType = res.data |
|||
}) |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body"> |
|||
<div class="top-title"> |
|||
基础信息管理 |
|||
</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>计划名称：</span> |
|||
<el-input class="search-input" v-model="searchInput" placeholder="请输入计划名称" /> |
|||
<el-button class="search-btn" type="success" @click="getTableData(searchInput)">搜索</el-button> |
|||
</div> |
|||
<el-button class="search-btn" style=" margin-right: 16px;margin-bottom: 8px; float: right;" type="success" |
|||
@click="dialogVisible = true">添加</el-button> |
|||
<el-table class="table" height="640" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="100" /> |
|||
<el-table-column prop="name" align="center" label="计划名称" /> |
|||
<el-table-column align="center" label="巡查类型"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="examType.length > 0">{{ examType.find(item => item.dictValue == scope.row.type).dictLabel || |
|||
'' |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="createTime" align="center" sortable label="最近巡查时间" /> |
|||
<el-table-column prop="createTime" align="center" sortable label="创建时间" /> |
|||
<el-table-column prop="updateTime" align="center" sortable label="更新时间" /> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button style=" margin-right: 16px;" @click="editTableItem(scope.row)" type="text" |
|||
size="small">编辑</el-button> |
|||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red" |
|||
title="确定删除吗？" @confirm="deleteTableItem(scope.row)"> |
|||
<el-button style="color: red;margin-right: 16px;" type="text" size="small" slot="reference">删除</el-button> |
|||
</el-popconfirm> |
|||
<el-button @click="routeSetting(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="closeDialog" :visible.sync="dialogVisible" width="50%"> |
|||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"> |
|||
<el-form-item label-width="120px" label="计划名称" prop="name"> |
|||
<el-input style="width: 202px;" v-model="ruleForm.name"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="巡查类型" prop="type"> |
|||
<el-select v-model="ruleForm.type" placeholder="请选择巡查类型" @change="changePatrolType(ruleForm, true)"> |
|||
<el-option v-for="item in examType" :label="item.dictLabel" :value="item.dictValue" |
|||
:key="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="巡查项目名称" prop="xcId"> |
|||
<el-select v-model="ruleForm.xcId" placeholder="请选择巡查项目名称"> |
|||
<el-option v-for="item in patrolTableData" :label="item.name" :value="item.id" :key="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="ruleForm.type == 0" label-width="120px" label="巡查周期" prop="cycleType"> |
|||
<el-input style="width: 202px;" v-model="ruleForm.frequency"></el-input> |
|||
/次 |
|||
<el-select 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 v-else label-width="120px" label="检查日期" prop="reminderTime"> |
|||
<el-date-picker v-model="ruleForm.otherConfig.time" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="消息提醒" prop="reminderTime"> |
|||
<el-radio-group v-if="ruleForm.cycleType == 1 && ruleForm.type == 0" 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-time-picker v-if="ruleForm.cycleType != 2 && ruleForm.type == 0" v-model="ruleForm.reminderTime" |
|||
value-format="yyyy-MM-dd hh:mm:ss" placeholder="请选择时间点" /> |
|||
<el-date-picker v-if="ruleForm.cycleType == 2 || ruleForm.type != 0" v-model="ruleForm.reminderTime" |
|||
value-format="yyyy-MM-dd hh:mm:ss" type="datetime" placeholder="选择日期时间" /> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="责任人" prop="operators"> |
|||
<el-select v-model="ruleForm.otherConfig.selectUser" multiple filterable remote :remote-method="searchUser" |
|||
value-key="id" placeholder="请输入关键词搜索用户" prop="selectUser"> |
|||
<el-option v-for="item in personnelList" :key="item.id" :label="item.nickName" :value="item"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button size="mini" @click="dialogVisible = false">取 消</el-button> |
|||
<el-button 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); |
|||
margin-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 { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.search-btn { |
|||
margin-left: 10px; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
|
|||
; |
|||
} |
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,22 @@ |
|||
<!-- 巡查计划管理-水库 --> |
|||
<script> |
|||
export default { |
|||
name: '', |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
水库 |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
@ -0,0 +1,399 @@ |
|||
<!-- 巡查计划管理-水闸 --> |
|||
<script> |
|||
import { getDicts, postSZInspectionPlanlist, postSZInspectionPlan, putSZInspectionPlan, postSZInspectionProjectList, getSZInspectionPlan, deleteSZInspectionPlan, listUser } from '@/api/management' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
data() { |
|||
return { |
|||
searchInput: '', |
|||
dialogVisible: false, |
|||
patrolType: [], // 巡查周期类型 |
|||
personnelList: [], // 人员列表 |
|||
examType: [], // 检查类型 |
|||
tableData: [], // 检查列表 |
|||
patrolTableData: [], // 巡查项目列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0 // 总数量 |
|||
}, |
|||
ruleForm: { |
|||
name: '', |
|||
type: '', |
|||
xcId: '', |
|||
frequency: '', |
|||
cycleType: '', |
|||
reminderTime: '', |
|||
selectUser: [], |
|||
operators: [], |
|||
otherConfig: { |
|||
week: '', |
|||
time: '' |
|||
} |
|||
}, |
|||
rules: { |
|||
name: [ |
|||
{ required: true, message: '请输入计划名称', trigger: 'blur' }, |
|||
{ max: 50, message: '名称最长为50个字符', trigger: 'blur' } |
|||
], |
|||
type: [ |
|||
{ required: true, message: '请选择巡查类型', trigger: 'change' } |
|||
], |
|||
xcId: [ |
|||
{ required: true, message: '请选择巡查项目名称', trigger: 'change' } |
|||
], |
|||
selectUser: [ |
|||
{ required: true, message: '请选择巡查人员', trigger: 'change' } |
|||
], |
|||
cycleType: [ |
|||
{ required: true, message: '请选择巡查周期', trigger: 'change' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 编辑巡查项目 |
|||
editTableItem(row) { |
|||
getSZInspectionPlan(row.id).then((res) => { |
|||
// 遍历用户数据让select组件渲染选项 |
|||
if (res.data.otherConfig.selectUser) { |
|||
this.personnelList = [] |
|||
res.data.otherConfig.selectUser.forEach(element => { |
|||
listUser({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "nickName", |
|||
type: "like", |
|||
value: element.nickName |
|||
}, |
|||
pageSize: 10, |
|||
pageNum: 1 |
|||
}).then((res) => { |
|||
this.personnelList.push(res.records[0]) |
|||
}) |
|||
}); |
|||
} |
|||
this.ruleForm = res.data |
|||
this.ruleForm.type = res.data.type.toString() |
|||
if (res.data.cycleType) { |
|||
this.ruleForm.cycleType = res.data.cycleType.toString() |
|||
} |
|||
this.changePatrolType(res.data, false) |
|||
this.dialogVisible = true |
|||
}) |
|||
}, |
|||
// 删除对应巡查项目 |
|||
deleteTableItem(row) { |
|||
deleteSZInspectionPlan(row.id).then((res) => { |
|||
this.getTableData() |
|||
this.$message.success('删除成功'); |
|||
}) |
|||
}, |
|||
// 路线设置 |
|||
routeSetting(row) { |
|||
this.$router.push({ |
|||
path: '/patrolRouteSettings', |
|||
query: { id: row.id, name: row.name, editor: true } |
|||
}) |
|||
}, |
|||
// 保存巡查项目 |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
let user = [] |
|||
this.ruleForm.otherConfig.selectUser.forEach(element => { |
|||
let a = { |
|||
name: element.nickName, |
|||
uid: element.id |
|||
} |
|||
user.push(a) |
|||
}); |
|||
this.ruleForm.operators = user |
|||
if (this.ruleForm.id) { |
|||
putSZInspectionPlan(this.ruleForm).then((res) => { |
|||
this.getTableData() |
|||
this.dialogVisible = false |
|||
this.$message.success('更新成功'); |
|||
}) |
|||
} else { |
|||
postSZInspectionPlan(this.ruleForm).then((res) => { |
|||
this.getTableData() |
|||
this.dialogVisible = false |
|||
this.$message.success('添加成功'); |
|||
}) |
|||
} |
|||
} else { |
|||
console.log('校验不通过'); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 更改巡查类型 |
|||
changePatrolType(ruleForm, clear) { |
|||
if (clear) { |
|||
console.log('清空'); |
|||
this.ruleForm.frequency = '' |
|||
this.ruleForm.cycleType = '' |
|||
this.ruleForm.otherConfig.time = '' |
|||
this.$set(ruleForm, 'xcId', '') |
|||
} |
|||
postSZInspectionProjectList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
type: ruleForm.type |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like" |
|||
}, |
|||
pageSize: 999, |
|||
pageNum: 1 |
|||
}).then((res) => { |
|||
this.patrolTableData = res.records |
|||
}) |
|||
}, |
|||
// 搜索用户 |
|||
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 |
|||
}) |
|||
}, |
|||
// 关闭dialog |
|||
closeDialog(ruleForm = 'ruleForm') { |
|||
this.$refs[ruleForm].resetFields(); |
|||
this.ruleForm = { |
|||
name: '', |
|||
type: '', |
|||
xcId: '', |
|||
frequency: '', |
|||
cycleType: '', |
|||
reminderTime: '', |
|||
operators: [], |
|||
otherConfig: { |
|||
week: '', |
|||
time: '', |
|||
selectUser: [], |
|||
} |
|||
} |
|||
this.patrolTableData = [] |
|||
}, |
|||
// 获取数据 |
|||
getTableData(search) { |
|||
postSZInspectionPlanlist({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
} |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value: search |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records |
|||
this.pageData.total = res.total |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData() |
|||
getDicts('xs_classfy').then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
res.data.forEach(element => { |
|||
element.dictValue = element.dictValue |
|||
}); |
|||
this.examType = res.data |
|||
} |
|||
}) |
|||
getDicts('xs_cycle_type').then((res) => { |
|||
console.log('🚀res.data🚀', res.data) |
|||
this.patrolType = res.data |
|||
}) |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body"> |
|||
<div class="top-title"> |
|||
基础信息管理 |
|||
</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>计划名称：</span> |
|||
<el-input class="search-input" v-model="searchInput" placeholder="请输入计划名称" /> |
|||
<el-button class="search-btn" type="success" @click="getTableData(searchInput)">搜索</el-button> |
|||
</div> |
|||
<el-button class="search-btn" style=" margin-right: 16px;margin-bottom: 8px; float: right;" type="success" |
|||
@click="dialogVisible = true">添加</el-button> |
|||
<el-table class="table" height="640" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="100" /> |
|||
<el-table-column prop="name" align="center" label="计划名称" /> |
|||
<el-table-column align="center" label="巡查类型"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="examType.length > 0">{{ examType.find(item => item.dictValue == scope.row.type).dictLabel || |
|||
'' |
|||
}}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="createTime" align="center" sortable label="最近巡查时间" /> |
|||
<el-table-column prop="createTime" align="center" sortable label="创建时间" /> |
|||
<el-table-column prop="updateTime" align="center" sortable label="更新时间" /> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button style=" margin-right: 16px;" @click="editTableItem(scope.row)" type="text" |
|||
size="small">编辑</el-button> |
|||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red" |
|||
title="确定删除吗？" @confirm="deleteTableItem(scope.row)"> |
|||
<el-button style="color: red;margin-right: 16px;" type="text" size="small" slot="reference">删除</el-button> |
|||
</el-popconfirm> |
|||
<el-button @click="routeSetting(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="closeDialog" :visible.sync="dialogVisible" width="50%"> |
|||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm"> |
|||
<el-form-item label-width="120px" label="计划名称" prop="name"> |
|||
<el-input style="width: 202px;" v-model="ruleForm.name"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="巡查类型" prop="type"> |
|||
<el-select v-model="ruleForm.type" placeholder="请选择巡查类型" @change="changePatrolType(ruleForm, true)"> |
|||
<el-option v-for="item in examType" :label="item.dictLabel" :value="item.dictValue" |
|||
:key="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="巡查项目名称" prop="xcId"> |
|||
<el-select v-model="ruleForm.xcId" placeholder="请选择巡查项目名称"> |
|||
<el-option v-for="item in patrolTableData" :label="item.name" :value="item.id" :key="item.id"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="ruleForm.type == 0" label-width="120px" label="巡查周期" prop="cycleType"> |
|||
<el-input style="width: 202px;" v-model="ruleForm.frequency"></el-input> |
|||
/次 |
|||
<el-select 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 v-else label-width="120px" label="检查日期" prop="reminderTime"> |
|||
<el-date-picker v-model="ruleForm.otherConfig.time" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="消息提醒" prop="reminderTime"> |
|||
<el-radio-group v-if="ruleForm.cycleType == 1 && ruleForm.type == 0" 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-time-picker v-if="ruleForm.cycleType != 2 && ruleForm.type == 0" v-model="ruleForm.reminderTime" |
|||
value-format="yyyy-MM-dd hh:mm:ss" placeholder="请选择时间点" /> |
|||
<el-date-picker v-if="ruleForm.cycleType == 2 || ruleForm.type != 0" v-model="ruleForm.reminderTime" |
|||
value-format="yyyy-MM-dd hh:mm:ss" type="datetime" placeholder="选择日期时间" /> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="责任人" prop="operators"> |
|||
<el-select v-model="ruleForm.otherConfig.selectUser" multiple filterable remote :remote-method="searchUser" |
|||
value-key="id" placeholder="请输入关键词搜索用户" prop="selectUser"> |
|||
<el-option v-for="item in personnelList" :key="item.id" :label="item.nickName" :value="item"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button size="mini" @click="dialogVisible = false">取 消</el-button> |
|||
<el-button 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); |
|||
margin-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 { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.search-btn { |
|||
margin-left: 10px; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
|
|||
; |
|||
} |
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,29 @@ |
|||
<!-- 巡查计划管理 --> |
|||
<script> |
|||
import Dike from './Dike.vue' |
|||
import Reservoir from './Reservoir.vue' |
|||
import Sluice from './Sluice.vue' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
components: { |
|||
Reservoir, // 水库 |
|||
Sluice, // 水闸 |
|||
Dike, // 堤防 |
|||
}, |
|||
computed: { |
|||
selectTab() { |
|||
return this.$store.state.topTab.selectTab |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<Reservoir v-if="selectTab == 0"></Reservoir> |
|||
<Sluice v-if="selectTab == 1"></Sluice> |
|||
<Dike v-if="selectTab == 2"></Dike> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
@ -0,0 +1,170 @@ |
|||
<!-- 巡查记录-堤防 --> |
|||
<script> |
|||
import { postDFInspectionRecordsList, } from '@/api/management' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
data() { |
|||
return { |
|||
searchInput: '', |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0 // 总数量 |
|||
}, |
|||
} |
|||
}, |
|||
methods: { |
|||
// 路线设置 |
|||
routeSetting(row) { |
|||
console.log('🚀row🚀', row) |
|||
this.$router.push({ |
|||
path: '/patrolRouteSettings', |
|||
query: { name: row.name, editor: false,id:row.id } |
|||
}) |
|||
}, |
|||
getTableData(search) { |
|||
postDFInspectionRecordsList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
} |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value: search |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records |
|||
this.pageData.total = res.total |
|||
} |
|||
console.log('🚀列表数据🚀', res) |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData() |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body"> |
|||
<div class="top-title"> |
|||
基础信息管理 |
|||
</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>巡检记录：</span> |
|||
<el-input class="search-input" v-model="searchInput" placeholder="请输入巡检记录" /> |
|||
<el-button class="search-btn" type="success" @click="getTableData(searchInput)">搜索</el-button> |
|||
</div> |
|||
<el-table class="table" height="690" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="100" /> |
|||
<el-table-column prop="name" align="center" label="巡检记录" /> |
|||
<el-table-column align="center" label="有无异常"> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.status != 0" style="display: flex; justify-content: center; flex-wrap: wrap;"> |
|||
<div v-if="scope.row.parts" class="normal">正常</div> |
|||
<div v-else v-for="item in scope.row.parts" class="abnormal">{{ item }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="operatorName" align="center" label="巡查人员" /> |
|||
<el-table-column prop="status" align="center" label="状态"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.status === 0 ? '检查中' : '已完成' }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="routeSetting(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> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.body { |
|||
width: 100%; |
|||
min-height: calc(100vh - 56px); |
|||
margin-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 { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.search-btn { |
|||
margin-left: 10px; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
|
|||
; |
|||
} |
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
|
|||
.normal { |
|||
width: 40px; |
|||
border-radius: 5px; |
|||
background-color: #ebf7f5; |
|||
color: #36b29e; |
|||
} |
|||
|
|||
.abnormal { |
|||
width: 40px; |
|||
border-radius: 5px; |
|||
background-color: #feebeb; |
|||
color: #d9001b; |
|||
margin-right: 10px; |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,22 @@ |
|||
<!-- 巡查记录-水库 --> |
|||
<script> |
|||
export default { |
|||
name: '', |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
水库 |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
@ -0,0 +1,170 @@ |
|||
<!-- 巡查记录-水闸 --> |
|||
<script> |
|||
import { postSZInspectionRecordsList, } from '@/api/management' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
data() { |
|||
return { |
|||
searchInput: '', |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0 // 总数量 |
|||
}, |
|||
} |
|||
}, |
|||
methods: { |
|||
// 路线设置 |
|||
routeSetting(row) { |
|||
console.log('🚀row🚀', row) |
|||
this.$router.push({ |
|||
path: '/patrolRouteSettings', |
|||
query: { name: row.name, editor: false, id: row.id } |
|||
}) |
|||
}, |
|||
getTableData(search) { |
|||
postSZInspectionRecordsList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
} |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value: search |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records |
|||
this.pageData.total = res.total |
|||
} |
|||
console.log('🚀列表数据🚀', res) |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData() |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body"> |
|||
<div class="top-title"> |
|||
基础信息管理 |
|||
</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>巡检记录：</span> |
|||
<el-input class="search-input" v-model="searchInput" placeholder="请输入巡检记录" /> |
|||
<el-button class="search-btn" type="success" @click="getTableData(searchInput)">搜索</el-button> |
|||
</div> |
|||
<el-table class="table" height="690" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="100" /> |
|||
<el-table-column prop="name" align="center" label="巡检记录" /> |
|||
<el-table-column align="center" label="有无异常"> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.status != 0" style="display: flex; justify-content: center; flex-wrap: wrap;"> |
|||
<div v-if="scope.row.parts" class="normal">正常</div> |
|||
<div v-else v-for="item in scope.row.parts" class="abnormal">{{ item }}</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="operatorName" align="center" label="巡查人员" /> |
|||
<el-table-column prop="status" align="center" label="状态"> |
|||
<template slot-scope="scope"> |
|||
<span>{{ scope.row.status === 0 ? '检查中' : '已完成' }}</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="routeSetting(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> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.body { |
|||
width: 100%; |
|||
min-height: calc(100vh - 56px); |
|||
margin-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 { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.search-btn { |
|||
margin-left: 10px; |
|||
background-color: #37b29e; |
|||
border: none; |
|||
|
|||
&:hover { |
|||
background-color: #5ac6b9; |
|||
} |
|||
|
|||
&:active { |
|||
background-color: #2b8070; |
|||
} |
|||
|
|||
; |
|||
} |
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
|
|||
.normal { |
|||
width: 40px; |
|||
border-radius: 5px; |
|||
background-color: #ebf7f5; |
|||
color: #36b29e; |
|||
} |
|||
|
|||
.abnormal { |
|||
width: 40px; |
|||
border-radius: 5px; |
|||
background-color: #feebeb; |
|||
color: #d9001b; |
|||
margin-right: 10px; |
|||
margin-bottom: 10px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,29 @@ |
|||
<!-- 巡查记录 --> |
|||
<script> |
|||
import Dike from './Dike.vue' |
|||
import Reservoir from './Reservoir.vue' |
|||
import Sluice from './Sluice.vue' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
components: { |
|||
Reservoir, // 水库 |
|||
Sluice, // 水闸 |
|||
Dike, // 堤防 |
|||
}, |
|||
computed: { |
|||
selectTab() { |
|||
return this.$store.state.topTab.selectTab |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<Reservoir v-if="selectTab == 0"></Reservoir> |
|||
<Sluice v-if="selectTab == 1"></Sluice> |
|||
<Dike v-if="selectTab == 2"></Dike> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
@ -0,0 +1,65 @@ |
|||
<!-- 巡查路线设置-堤防 --> |
|||
<script> |
|||
import GaoDeMap from "./components/GaoDeMap.vue" |
|||
export default { |
|||
name: '', |
|||
components: { |
|||
GaoDeMap |
|||
}, |
|||
data() { |
|||
return { |
|||
selectTab: 'first' |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body"> |
|||
<div class="top-title"> |
|||
基础信息管理 |
|||
</div> |
|||
<div class="map-box"> |
|||
<el-tabs v-model="selectTab" class="tab"> |
|||
<el-tab-pane style="padding: 0px 16px;" label="电子地图" name="first"> |
|||
<GaoDeMap :type="'DF'" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="平面图" name="second">平面图</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.body { |
|||
width: 100%; |
|||
min-height: calc(100vh - 56px); |
|||
|
|||
.top-title { |
|||
height: 40px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.map-box { |
|||
background-color: #fff; |
|||
border-radius: 8px; |
|||
min-height: calc(100vh - 56px - 40px - 48px); |
|||
margin: 24px; |
|||
|
|||
.tab { |
|||
/deep/.el-tabs__nav { |
|||
.el-tabs__item:first-of-type { |
|||
margin-left: 16px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,22 @@ |
|||
<!-- 巡查路线设置-水库 --> |
|||
<script> |
|||
export default { |
|||
name: '', |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
水库 |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
@ -0,0 +1,65 @@ |
|||
<!-- 巡查路线设置-水闸 --> |
|||
<script> |
|||
import GaoDeMap from "./components/GaoDeMap.vue" |
|||
export default { |
|||
name: '', |
|||
components: { |
|||
GaoDeMap |
|||
}, |
|||
data() { |
|||
return { |
|||
selectTab: 'first' |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body"> |
|||
<div class="top-title"> |
|||
基础信息管理 |
|||
</div> |
|||
<div class="map-box"> |
|||
<el-tabs v-model="selectTab" class="tab"> |
|||
<el-tab-pane style="padding: 0px 16px;" label="电子地图" name="first"> |
|||
<GaoDeMap :type="'SZ'" /> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="平面图" name="second">平面图</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.body { |
|||
width: 100%; |
|||
min-height: calc(100vh - 56px); |
|||
|
|||
.top-title { |
|||
height: 40px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.map-box { |
|||
background-color: #fff; |
|||
border-radius: 8px; |
|||
min-height: calc(100vh - 56px - 40px - 48px); |
|||
margin: 24px; |
|||
|
|||
.tab { |
|||
/deep/.el-tabs__nav { |
|||
.el-tabs__item:first-of-type { |
|||
margin-left: 16px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,414 @@ |
|||
<!-- 巡查记录抽屉 --> |
|||
<script> |
|||
export default { |
|||
name: '', |
|||
props: { |
|||
drawerVisible: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
tableData: [ |
|||
{ content: '张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
{ content: '张三', photos: '编辑', delete: '删除' }, |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
handleSpanMethod({ row, column, rowIndex, columnIndex }) { |
|||
if (columnIndex === 0) { |
|||
if (rowIndex < 4 || (rowIndex > 4 && rowIndex < 9) || (rowIndex > 8 && rowIndex < 11) || (rowIndex > 10 && rowIndex < 13) || (rowIndex > 12 && rowIndex < 18)) { |
|||
if (rowIndex === 0 || rowIndex === 5 || rowIndex === 9 || rowIndex === 11 || rowIndex === 13) { |
|||
return { |
|||
rowspan: [4, 4, 2, 2, 5][[0, 5, 9, 11, 13].indexOf(rowIndex)], |
|||
colspan: 1 |
|||
}; |
|||
} else { |
|||
return { |
|||
rowspan: 0, |
|||
colspan: 0 |
|||
}; |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<div class="masking" :class="drawerVisible ? 'masking-in' : ''"> |
|||
<div class="close-btn" @click="$emit('close-drawer'); |
|||
"> |
|||
<i class="el-icon-arrow-right"></i> |
|||
</div> |
|||
<div class="drawer-title"> |
|||
<span>巡查记录</span> |
|||
</div> |
|||
<div class="center-table"> |
|||
<el-table :data="tableData" height="636" style="width: 100%" :span-method="handleSpanMethod" |
|||
header-cell-class-name="table-header-cell"> |
|||
<el-table-column align="center" class="first-column" label="工程部位" width="264"> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.$index == 0"> |
|||
<div class="box1"> |
|||
<div class="item1">一、堤身</div> |
|||
<div class="item2">堤顶</div> |
|||
<div class="item3">堤坡</div> |
|||
<div class="item4">迎水坡</div> |
|||
<div class="item5">背水坡</div> |
|||
<div class="item6">护坡结构</div> |
|||
<div class="item7">堤脚</div> |
|||
</div> |
|||
</div> |
|||
<div v-if="scope.$index == 4">二、护坡地和堤防工程保护范围</div> |
|||
<div v-if="scope.$index == 5"> |
|||
<div class="box2"> |
|||
<div class="item1">三、堤岸防护工程</div> |
|||
<div class="item2">坡式</div> |
|||
<div class="item3">墙式</div> |
|||
<div class="item4">护脚</div> |
|||
<div class="item5">滩岸</div> |
|||
</div> |
|||
</div> |
|||
<div v-if="scope.$index == 9"> |
|||
<div class="box3"> |
|||
<div class="item1">四、防渗排水设施</div> |
|||
<div class="item2">防渗设施</div> |
|||
<div class="item3">排水设施</div> |
|||
</div> |
|||
</div> |
|||
<div v-if="scope.$index == 11"> |
|||
<div class="box3"> |
|||
<div class="item1">五、交叉建筑物及接连段</div> |
|||
<div class="item2">连接段</div> |
|||
<div class="item3">交叉建筑物</div> |
|||
</div> |
|||
</div> |
|||
<div v-if="scope.$index == 13"> |
|||
<div class="box4"> |
|||
<div class="item1">六、管理设施</div> |
|||
<div class="item2">观测设施</div> |
|||
<div class="item3">交通通信设施</div> |
|||
<div class="item4">信息化设施</div> |
|||
<div class="item5">标识标牌</div> |
|||
<div class="item6">管理房</div> |
|||
</div> |
|||
</div> |
|||
<div v-if="scope.$index == 18">七、生物防护工程</div> |
|||
<div v-if="scope.$index == 19">八、其他</div> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="content" align="center" class-name="column-item" label="检查内容" min-width="200" /> |
|||
<el-table-column v-if="!this.$route.query.editor" prop="photos" align="center" class-name="column-item" |
|||
label="打卡图片" width="150" /> |
|||
<el-table-column v-if="!this.$route.query.editor" align="center" class-name="column-item" label="检查记录"> |
|||
<el-table-column prop="isNormal" align="center" class-name="column-item" label="是否正常" width="150" /> |
|||
<el-table-column prop="problems" align="center" class-name="column-item" label="存在问题" width="150" /> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.masking { |
|||
position: absolute; |
|||
top: 0; |
|||
width: 50%; |
|||
height: 100%; |
|||
left: 120%; |
|||
z-index: 2; |
|||
background-color: #fff; |
|||
transition: left 0.5s ease-in-out; |
|||
box-shadow: -8px 0px 38px 0px rgba(0, 0, 0, 0.6); |
|||
|
|||
.close-btn { |
|||
width: 32px; |
|||
height: 32px; |
|||
position: absolute; |
|||
top: 48px; |
|||
left: -16px; |
|||
background-color: #fff; |
|||
border: 1px solid #DCDCDC; |
|||
border-radius: 50%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
cursor: pointer; |
|||
|
|||
i { |
|||
color: #36b29e; |
|||
} |
|||
} |
|||
|
|||
.drawer-title { |
|||
width: 100%; |
|||
height: 64px; |
|||
line-height: 64px; |
|||
padding-left: 16px; |
|||
border-bottom: 1px solid #e7e7e7; |
|||
} |
|||
|
|||
.center-table { |
|||
padding: 16px; |
|||
|
|||
|
|||
.box1 { |
|||
height: 352x; |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 88px); |
|||
grid-template-rows: repeat(8, 44px); |
|||
|
|||
.item1 { |
|||
grid-row: 1 / 9; |
|||
grid-column: 1; |
|||
line-height: 352px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-right: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item2 { |
|||
grid-row: 1/3; |
|||
grid-column: 2/ 4; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-bottom: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item3 { |
|||
grid-row: 3/7; |
|||
grid-column: 2; |
|||
line-height: 176px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-right: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item4 { |
|||
line-height: 44px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-bottom: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item5 { |
|||
line-height: 44px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-bottom: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item6 { |
|||
grid-row: 7/5; |
|||
grid-column: 3; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
} |
|||
|
|||
|
|||
.item7 { |
|||
grid-row: 9/7; |
|||
grid-column: 2/4; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-top: 1px solid #f4f9f7; |
|||
} |
|||
} |
|||
|
|||
.box2 { |
|||
height: 352px; |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 88px); |
|||
grid-template-rows: repeat(8, 44px); |
|||
|
|||
.item1 { |
|||
grid-row: 1 / 9; |
|||
grid-column: 1/3; |
|||
line-height: 352px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-right: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item2 { |
|||
grid-row: 1/3; |
|||
grid-column: 3; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-bottom: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item3 { |
|||
grid-row: 3/5; |
|||
grid-column: 3; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-bottom: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item4 { |
|||
grid-row: 5/7; |
|||
grid-column: 3; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-bottom: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item5 { |
|||
grid-row: 7/9; |
|||
grid-column: 3; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
} |
|||
} |
|||
|
|||
.box3 { |
|||
height: 176px; |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 88px); |
|||
grid-template-rows: repeat(8, 44px); |
|||
|
|||
.item1 { |
|||
grid-row: 1 / 5; |
|||
grid-column: 1/3; |
|||
line-height: 176px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-right: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item2 { |
|||
grid-row: 1/3; |
|||
grid-column: 3; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-bottom: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item3 { |
|||
grid-row: 3/5; |
|||
grid-column: 3; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
} |
|||
} |
|||
|
|||
.box4 { |
|||
height: 440px; |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 88px); |
|||
grid-template-rows: repeat(8, 44px); |
|||
|
|||
.item1 { |
|||
grid-row: 1 / 10; |
|||
grid-column: 1/3; |
|||
line-height: 440px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-right: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item2 { |
|||
grid-row: 1/3; |
|||
grid-column: 3; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
border-bottom: 1px solid #f4f9f7; |
|||
} |
|||
|
|||
.item3 { |
|||
grid-row: 3/5; |
|||
grid-column: 3; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
} |
|||
|
|||
.item4 { |
|||
grid-row: 5/7; |
|||
grid-column: 3; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
} |
|||
|
|||
.item5 { |
|||
grid-row: 7/9; |
|||
grid-column: 3; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
} |
|||
|
|||
.item6 { |
|||
grid-row: 9/11; |
|||
grid-column: 3; |
|||
line-height: 88px; |
|||
justify-content: center; |
|||
align-content: center; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.masking-in { |
|||
left: 50%; |
|||
} |
|||
|
|||
/deep/.el-table__body tr td { |
|||
padding: 0; |
|||
height: 88px !important; |
|||
} |
|||
|
|||
/deep/ .cell { |
|||
padding: 0 !important; |
|||
} |
|||
|
|||
/deep/.column-item { |
|||
padding-left: 10px !important; |
|||
} |
|||
|
|||
/deep/.column-item .cell { |
|||
padding: 18; |
|||
max-height: 70px !important; |
|||
overflow: auto; |
|||
} |
|||
|
|||
/deep/.table-header-cell { |
|||
background-color: #fff !important; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,365 @@ |
|||
<!-- 高德地图 --> |
|||
<template> |
|||
<div> |
|||
<div id="container" @mouseenter="showTooltip = true" @mouseout="showTooltip = false" |
|||
@mousemove="updateTooltipPosition"> |
|||
<div class="tooltip" v-if="showTooltip" :style="{ top: tooltipTop + 'px', left: tooltipLeft + 'px' }"> |
|||
左键选点，双击结束绘制，右键取消绘制 |
|||
</div> |
|||
<el-button class="open-drawer-btn" size="mini" @click="drawerVisible = true">展开抽屉</el-button> |
|||
<Drawer :drawer-visible="drawerVisible" @close-drawer="drawerVisible = false"></Drawer> |
|||
</div> |
|||
<div class="box"> |
|||
<el-button size="mini" @click="addPoint = true"> |
|||
<svg-icon icon-class="icon-line" /> |
|||
绘制线路</el-button> |
|||
<el-button :disabled="checkpoints.length < 1" style="width: 29px; padding: 7px;" size="mini" |
|||
@click="clearLine"><svg-icon icon-class="icon-clear" /></el-button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import AMapLoader from "@amap/amap-jsapi-loader"; |
|||
import { postDFInspectionRoute, postSZInspectionRoute, getDFInspectionRoute, getSZInspectionRoute, postDFInspectionRecordsTrajectoryList, postSZInspectionRecordsTrajectoryList } from '@/api/management' |
|||
import Drawer from './Drawer.vue' |
|||
export default { |
|||
name: "map-view", |
|||
props: { |
|||
type: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}, |
|||
components: { Drawer }, |
|||
data() { |
|||
return { |
|||
drawerVisible: false, //抽屉开关 |
|||
addPoint: false, //是否允许添加点位 |
|||
showTooltip: false, //展示鼠标提示 |
|||
addSum: 0, |
|||
tooltipLeft: 0, |
|||
tooltipTop: 0, |
|||
checkpoints: [ |
|||
// { |
|||
// name: '检查点1', |
|||
// location: [113.431415, 23.104388] |
|||
// }, |
|||
// { |
|||
// name: '检查点2', |
|||
// location: [113.432021, 23.1038] |
|||
// }, |
|||
// { |
|||
// name: '检查点3', |
|||
// location: [113.431747, 23.102794] |
|||
// } |
|||
], |
|||
AMap: {}, |
|||
}; |
|||
}, |
|||
mounted() { |
|||
this.initAMap(); |
|||
}, |
|||
unmounted() { |
|||
this.map?.destroy(); |
|||
}, |
|||
methods: { |
|||
// 获取鼠标位置 |
|||
updateTooltipPosition(event) { |
|||
this.tooltipLeft = event.clientX - 296 + 15; |
|||
this.tooltipTop = event.clientY - 174; |
|||
}, |
|||
// 渲染线段 |
|||
renderedPolyline() { |
|||
this.map.remove(this.map.getAllOverlays('polyline')); |
|||
if (this.checkpoints.length > 1) { |
|||
const polyline = new this.AMap.Polyline({ |
|||
path: this.checkpoints.map((checkpoint) => checkpoint.location), |
|||
strokeColor: "#37E4FF", |
|||
strokeWeight: 4, |
|||
strokeOpacity: 1, |
|||
bubble: true |
|||
}); |
|||
polyline.setMap(this.map); |
|||
} |
|||
}, |
|||
// 添加点位 |
|||
addCheckpoint(name, location) { |
|||
const icon = new this.AMap.Icon({ |
|||
size: new this.AMap.Size(20, 20), |
|||
image: require('@/assets/image/map-point.png'), |
|||
imageSize: new AMap.Size(20, 20), |
|||
anchor: 'center', |
|||
}) |
|||
const marker = new this.AMap.Marker({ |
|||
position: location, |
|||
title: name, |
|||
icon, |
|||
anchor: 'bottom-center', |
|||
bubble: true, |
|||
label: { content: name, direction: 'top' }, |
|||
}); |
|||
marker.on("mouseover", () => { |
|||
this.showTooltip = true |
|||
}), |
|||
marker.on("mouseout", () => { |
|||
this.showTooltip = true |
|||
}), |
|||
marker.setMap(this.map); |
|||
this.checkpoints.push({ name, location, marker }); |
|||
this.renderedPolyline() |
|||
}, |
|||
// 修改选中点位 |
|||
selectCheckpoint(checkpoint) { |
|||
const icon = new this.AMap.Icon({ |
|||
size: new this.AMap.Size(20, 20), |
|||
image: require('@/assets/image/map-point.png'), |
|||
imageSize: new AMap.Size(20, 20), |
|||
anchor: 'center', |
|||
}) |
|||
this.map.setCenter(checkpoint.location); |
|||
this.map.setZoom(18) |
|||
this.checkpoints.forEach((cp) => { |
|||
const marker = cp.marker; |
|||
if (cp === checkpoint) { |
|||
marker.setIcon('https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'); |
|||
} else { |
|||
marker.setIcon(icon); |
|||
} |
|||
}); |
|||
}, |
|||
// 清空路线 |
|||
clearLine() { |
|||
// this.removeLastCheckpoint(); |
|||
this.addSum = 0 |
|||
this.checkpoints.forEach((checkpoint) => { |
|||
checkpoint.marker.setMap(null); // 将每个点位的 marker 从地图上移除 |
|||
}); |
|||
this.checkpoints = []; // 清空 checkpoints 数组 |
|||
this.renderedPolyline() // 清空连线 |
|||
this.saveInspectionRoute() // 保存 |
|||
}, |
|||
// 删除最后一个点位 |
|||
removeLastCheckpoint() { |
|||
const lastCheckpoint = this.checkpoints.pop(); |
|||
const marker = lastCheckpoint.marker; |
|||
marker.setMap(null); |
|||
this.renderedPolyline() |
|||
}, |
|||
// 保存巡查路线 |
|||
saveInspectionRoute() { |
|||
let data = [] |
|||
this.checkpoints.forEach(element => { |
|||
let a = { |
|||
longitude: element.location[0], |
|||
latitude: element.location[1] |
|||
} |
|||
data.push(a) |
|||
}); |
|||
switch (this.type) { |
|||
case 'DF': |
|||
postDFInspectionRoute(this.$route.query.id, data).then((res) => { |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success' |
|||
}); |
|||
}) |
|||
break; |
|||
|
|||
case 'SZ': |
|||
postSZInspectionRoute(this.$route.query.id, data).then((res) => { |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success' |
|||
}); |
|||
}) |
|||
break; |
|||
|
|||
default: |
|||
console.log('未选中'); |
|||
break; |
|||
} |
|||
}, |
|||
// 加载地图 |
|||
initAMap() { |
|||
AMapLoader.load({ |
|||
key: "67533ae78bf28afc2a3da3d10d308fa1", // 申请好的Web端开发者Key，首次调用 load 时必填 |
|||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 |
|||
plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 |
|||
}) |
|||
.then((AMap) => { |
|||
this.AMap = AMap |
|||
var satellite = new AMap.TileLayer.Satellite() // 创建卫星图层 |
|||
this.map = new AMap.Map("container", { |
|||
// 设置地图容器id |
|||
viewMode: "3D", // 是否为3D地图模式 |
|||
zoom: 18, // 初始化地图级别 |
|||
doubleClickZoom: false, // 禁用双击放大 |
|||
layers: [ |
|||
satellite, |
|||
], |
|||
center: [113.43094, 23.10346], // 初始化地图中心点位置 |
|||
}); |
|||
|
|||
// 在地图加载完成后执行操作 |
|||
this.map.on("complete", () => { |
|||
console.log('🚀地图加载完毕🚀') |
|||
if (this.$route.query.editor) { |
|||
// 添加点位 |
|||
switch (this.type) { |
|||
case 'DF': |
|||
getDFInspectionRoute(this.$route.query.id).then((res) => { |
|||
res.data.forEach((element, index) => { |
|||
this.addCheckpoint("检查点" + (index + 1), [element.longitude, element.latitude]) |
|||
}); |
|||
}) |
|||
break; |
|||
|
|||
case 'SZ': |
|||
getSZInspectionRoute(this.$route.query.id).then((res) => { |
|||
res.data.forEach((element, index) => { |
|||
this.addCheckpoint("检查点" + (index + 1), [element.longitude, element.latitude]) |
|||
}); |
|||
}) |
|||
break; |
|||
|
|||
default: |
|||
console.log('未选中'); |
|||
break; |
|||
} |
|||
} else { |
|||
switch (this.type) { |
|||
case 'DF': |
|||
postDFInspectionRecordsTrajectoryList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
recordId: this.$route.query.id |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
}, |
|||
pageSize: 100, |
|||
pageNum: 1 |
|||
}).then((res) => { |
|||
console.log('🚀res🚀', res) |
|||
res.records.forEach((element, index) => { |
|||
this.addCheckpoint("检查点" + (index + 1), [element.longitude, element.latitude]) |
|||
}); |
|||
}) |
|||
break; |
|||
|
|||
case 'SZ': |
|||
postSZInspectionRecordsTrajectoryList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
recordId: this.$route.query.id |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
}, |
|||
pageSize: 100, |
|||
pageNum: 1 |
|||
}).then((res) => { |
|||
console.log('🚀res🚀', res) |
|||
res.records.forEach((element, index) => { |
|||
this.addCheckpoint("检查点" + (index + 1), [element.longitude, element.latitude]) |
|||
}); |
|||
}) |
|||
break; |
|||
|
|||
default: |
|||
console.log('未选中'); |
|||
break; |
|||
} |
|||
} |
|||
// 给点位添加连接线 |
|||
if (this.checkpoints.length > 1) { |
|||
this.renderedPolyline() |
|||
} |
|||
}); |
|||
if (this.$route.query.editor) { |
|||
// 点击添加检查点 |
|||
this.map.on('click', (e) => { |
|||
if (this.addPoint) { |
|||
this.addSum++ |
|||
const { lng, lat } = e.lnglat; |
|||
const name = `检查点${this.checkpoints.length + 1}`; |
|||
this.addCheckpoint(name, [lng, lat]); |
|||
} else { |
|||
this.$message({ |
|||
message: '请先点击绘制线路', |
|||
type: 'warning' |
|||
}); |
|||
} |
|||
}); |
|||
// 双击保存 |
|||
this.map.on('dblclick', () => { |
|||
if (this.addPoint) { |
|||
this.addSum = 0 |
|||
this.saveInspectionRoute() |
|||
console.log('双击保存', this.checkpoints); |
|||
this.addPoint = false |
|||
} |
|||
}); |
|||
// 右键取消保存 |
|||
this.map.on('rightclick', () => { |
|||
for (let i = 0; i < this.addSum; i++) { |
|||
this.removeLastCheckpoint() |
|||
} |
|||
this.addSum = 0 |
|||
}) |
|||
} |
|||
}) |
|||
.catch((e) => { |
|||
console.log(e); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
#container { |
|||
width: 100%; |
|||
height: calc(100vh - 56px - 40px - 48px - 70px); |
|||
position: relative; |
|||
|
|||
.open-drawer-btn { |
|||
position: fixed; |
|||
top: 125px; |
|||
right: 40px; |
|||
} |
|||
} |
|||
|
|||
.tooltip { |
|||
position: absolute; |
|||
z-index: 1; |
|||
background: rgba(0, 0, 0, 0.6); |
|||
border-radius: 4px; |
|||
padding: 8px 12px; |
|||
font-size: 12px; |
|||
color: #fff; |
|||
} |
|||
|
|||
.box { |
|||
position: absolute; |
|||
top: 10px; |
|||
left: 26px; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
z-index: 9; |
|||
} |
|||
|
|||
/deep/.amap-marker-label { |
|||
background-color: rgba(0, 0, 0, 0.6); |
|||
border: none; |
|||
border-radius: 2px; |
|||
color: #fff; |
|||
font-size: 12px; |
|||
padding: 4px 8px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,34 @@ |
|||
<!-- 巡查路线设置 --> |
|||
<script> |
|||
import Dike from './Dike.vue' |
|||
import Reservoir from './Reservoir.vue' |
|||
import Sluice from './Sluice.vue' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
components: { |
|||
Reservoir, // 水库 |
|||
Sluice, // 水闸 |
|||
Dike, // 堤防 |
|||
}, |
|||
computed: { |
|||
selectTab() { |
|||
return this.$store.state.topTab.selectTab |
|||
}, |
|||
}, |
|||
watch: { |
|||
selectTab(newVal, oldVal) { |
|||
this.$router.push(this.$route.query.editor ? '/inspectionPlan' : '/inspectionRecords') |
|||
} |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<Reservoir v-if="selectTab == 0"></Reservoir> |
|||
<Sluice v-if="selectTab == 1"></Sluice> |
|||
<Dike v-if="selectTab == 2"></Dike> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
@ -0,0 +1,3 @@ |
|||
<template > |
|||
<router-view /> |
|||
</template> |
|||
@ -0,0 +1,380 @@ |
|||
<!-- 维修计划管理-堤防 --> |
|||
<script> |
|||
import { putDFMaintenancePlan, deleteDFMaintenancePlan, postDFMaintenancePlan, postDFMaintenancePlanList, getDFMaintenancePlan } from '@/api/management' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
data() { |
|||
return { |
|||
searchInput: '', |
|||
dialogVisible: false, |
|||
prohibitEditing: false, |
|||
dikeLevel: [ |
|||
{ |
|||
id: 1, |
|||
label: '全部', |
|||
value: 1 |
|||
}, |
|||
{ |
|||
id: 2, |
|||
label: '一级', |
|||
value: 2 |
|||
}, |
|||
{ |
|||
id: 3, |
|||
label: '二级', |
|||
value: 3 |
|||
}, |
|||
{ |
|||
id: 4, |
|||
label: '三级', |
|||
value: 4 |
|||
}, |
|||
{ |
|||
id: 5, |
|||
label: '四级', |
|||
value: 5 |
|||
}, |
|||
{ |
|||
id: 6, |
|||
label: '五级及以下', |
|||
value: 6 |
|||
}, |
|||
], // 堤防级别列表 |
|||
embankmentList: [ |
|||
{ |
|||
label: '堤防1', |
|||
value: '1', |
|||
id: '1', |
|||
}, |
|||
{ |
|||
label: '堤防2', |
|||
value: '2', |
|||
id: '2', |
|||
}, |
|||
{ |
|||
label: '堤防3', |
|||
value: '3', |
|||
id: '3', |
|||
} |
|||
], // 堤防名称列表 |
|||
searchLevel: 1, // 筛选堤防级别 |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0 // 总数量 |
|||
}, |
|||
ruleForm: { |
|||
dikeCode: '', |
|||
name: '', |
|||
planTime: '', |
|||
nationalSupplement: 0, |
|||
selfSupplement: 0, |
|||
budget: 0, |
|||
location: '', |
|||
content: '', |
|||
}, |
|||
rules: { |
|||
dikeCode: [ |
|||
{ required: true, message: '请选择堤防名称', trigger: 'blur' } |
|||
], |
|||
name: [ |
|||
{ required: true, message: '请输入维养计划名称', trigger: 'blur' }, |
|||
{ max: 100, message: '名称最长为100个字符', trigger: 'blur' } |
|||
], |
|||
planTime: [ |
|||
{ required: true, message: '请选计划时间', trigger: 'change' } |
|||
], |
|||
nationalSupplement: [ |
|||
{ required: true, message: '请输入资金', trigger: 'change' } |
|||
], |
|||
selfSupplement: [ |
|||
{ required: true, message: '请输入资金', trigger: 'change' } |
|||
], |
|||
location: [ |
|||
{ required: true, message: '请输入具体地点', trigger: 'change' } |
|||
], |
|||
content: [ |
|||
{ required: true, message: '请输入维修养护内容', trigger: 'change' } |
|||
], |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
dialogVisible(newVal, oldVal) { |
|||
if (oldVal) { |
|||
this.prohibitEditing = false |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 删除对应维修计划 |
|||
deleteTableItem(row) { |
|||
deleteDFMaintenancePlan(row.id).then((res) => { |
|||
console.log('🚀res🚀', res) |
|||
this.getTableData() |
|||
this.$message.success('删除成功'); |
|||
}) |
|||
}, |
|||
// 查看或编辑计划详情 |
|||
viewOrEditPlanDetails(row, edit = false) { |
|||
if (!edit) { |
|||
this.prohibitEditing = true |
|||
} |
|||
getDFMaintenancePlan(row.id).then((res) => { |
|||
console.log('🚀res🚀', res) |
|||
this.ruleForm = res.data |
|||
this.ruleForm.budget = res.data.nationalSupplement + res.data.selfSupplement |
|||
this.dialogVisible = true |
|||
}) |
|||
}, |
|||
// 保存维修计划 |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
if (this.ruleForm.id) { |
|||
putDFMaintenancePlan(this.ruleForm).then(() => { |
|||
this.getTableData() |
|||
this.dialogVisible = false |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success' |
|||
}) |
|||
}) |
|||
} else { |
|||
postDFMaintenancePlan(this.ruleForm).then(() => { |
|||
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 |
|||
closeDialog(ruleForm = 'ruleForm') { |
|||
console.log('触发关闭dialog', ruleForm); |
|||
this.$refs[ruleForm].resetFields(); |
|||
this.ruleForm = { |
|||
dikeCode: '', |
|||
name: '', |
|||
planTime: '', |
|||
nationalSupplement: 0, |
|||
selfSupplement: 0, |
|||
location: '', |
|||
budget: 0, |
|||
content: '', |
|||
} |
|||
}, |
|||
// 计算预算 |
|||
calculateBudget() { |
|||
this.ruleForm.budget = Number(this.ruleForm.selfSupplement) + Number(this.ruleForm.nationalSupplement) |
|||
}, |
|||
// 获取数据 |
|||
getTableData(value = '') { |
|||
postDFMaintenancePlanList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records |
|||
this.pageData.total = res.total |
|||
} |
|||
console.log('🚀表格数据🚀', res) |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData() |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body"> |
|||
<div class="top-title"> |
|||
基础信息管理 |
|||
</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>维养计划名称：</span> |
|||
<el-input class="search-input" v-model="searchInput" placeholder="请输入维养计划名称" /> |
|||
<span>堤防级别：</span> |
|||
<el-select v-model="searchLevel" placeholder="请选择"> |
|||
<el-option v-for="item in dikeLevel" :label="item.label" :value="item.value" :key="item.id"></el-option> |
|||
</el-select> |
|||
<el-button class="search-btn" type="success" @click="getTableData(searchInput)">搜索</el-button> |
|||
</div> |
|||
<el-button class="search-btn" style=" margin-right: 16px;margin-bottom: 8px; float: right;" type="success" |
|||
@click="dialogVisible = true">添加</el-button> |
|||
<el-table class="table" height="640" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="100" /> |
|||
<el-table-column prop="name" align="center" label="维养计划名称" /> |
|||
<el-table-column prop="" align="center" label="堤防级别" /> |
|||
<el-table-column prop="location" align="center" label="具体地点" /> |
|||
<el-table-column prop="content" align="center" label="维修养护内容" /> |
|||
<el-table-column prop="nationalSupplement" align="center" label="国补" /> |
|||
<el-table-column prop="selfSupplement" align="center" label="自筹" /> |
|||
<el-table-column prop="createTime" align="center" sortable label="创建时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="updateTime" align="center" sortable label="更新时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="viewOrEditPlanDetails(scope.row)" type="text" size="small">查看</el-button> |
|||
<el-button @click="viewOrEditPlanDetails(scope.row, true)" type="text" size="small">编辑</el-button> |
|||
<el-button style=" margin-right: 9px;" type="text" size="small">记录</el-button> |
|||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red" |
|||
title="确定删除吗？" @confirm="deleteTableItem(scope.row)"> |
|||
<el-button style="color: red;" type="text" size="small" slot="reference">删除</el-button> |
|||
</el-popconfirm> |
|||
</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="closeDialog" :visible.sync="dialogVisible" width="38%"> |
|||
<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" class="demo-ruleForm"> |
|||
<el-form-item label-width="120px" label="堤防名称" prop="dikeCode"> |
|||
<el-select v-model="ruleForm.dikeCode" placeholder="请选择" @change="ruleForm.name = ruleForm.dikeCode" |
|||
:disabled="prohibitEditing"> |
|||
<el-option v-for="item in embankmentList" :label="item.label" :value="item.value" :key="item.id"></el-option> |
|||
</el-select> |
|||
<el-button button class="search-btn" type="success" size="small">详情</el-button> |
|||
<el-button button class="search-btn" type="success" size="small">打开地图</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="planTime"> |
|||
<el-date-picker v-model="ruleForm.planTime" type="month" placeholder="选择月" :disabled="prohibitEditing" |
|||
value-format="yy-MM-dd"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</div> |
|||
<div style="display: flex;"> |
|||
<el-form-item label-width="120px" label="国补资金" prop="nationalSupplement"> |
|||
<el-input style="width: 79px;" v-model="ruleForm.nationalSupplement" type="number" @input="calculateBudget()" |
|||
placeholder="请输入" :disabled="prohibitEditing" /> 万元 |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="自筹资金" prop="selfSupplement"> |
|||
<el-input style="width: 79px;" v-model="ruleForm.selfSupplement" type="number" @input="calculateBudget()" |
|||
placeholder="请输入" :disabled="prohibitEditing" /> 万元 |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="项目预算"> |
|||
<el-input style="width: 79px;" v-model="ruleForm.budget" disabled /> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item label-width="120px" label="具体地点" prop="location"> |
|||
<el-input style="width: 542px;" :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit |
|||
v-model="ruleForm.location" placeholder="请输入" :disabled="prohibitEditing" /> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="维修养护内容" prop="content"> |
|||
<el-input style="width: 542px;" :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit |
|||
v-model="ruleForm.content" placeholder="请输入" :disabled="prohibitEditing" /> |
|||
</el-form-item> |
|||
</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); |
|||
margin-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 { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
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,22 @@ |
|||
<!-- 维修计划管理-水库 --> |
|||
<script> |
|||
export default { |
|||
name: '', |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
水库 |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
@ -0,0 +1,376 @@ |
|||
<!-- 维修计划管理-水闸 --> |
|||
<script> |
|||
import { putSZMaintenancePlan, deleteSZMaintenancePlan, postSZMaintenancePlan, postSZMaintenancePlanList, getSZMaintenancePlan } from '@/api/management' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
data() { |
|||
return { |
|||
searchInput: '', |
|||
dialogVisible: false, |
|||
prohibitEditing: false, |
|||
dikeLevel: [ |
|||
{ |
|||
id: 1, |
|||
label: '全部', |
|||
value: 1 |
|||
}, |
|||
{ |
|||
id: 2, |
|||
label: '一级', |
|||
value: 2 |
|||
}, |
|||
{ |
|||
id: 3, |
|||
label: '二级', |
|||
value: 3 |
|||
}, |
|||
{ |
|||
id: 4, |
|||
label: '三级', |
|||
value: 4 |
|||
}, |
|||
{ |
|||
id: 5, |
|||
label: '四级', |
|||
value: 5 |
|||
}, |
|||
{ |
|||
id: 6, |
|||
label: '五级及以下', |
|||
value: 6 |
|||
}, |
|||
], // 堤防级别列表 |
|||
embankmentList: [ |
|||
{ |
|||
label: '堤防1', |
|||
value: '1', |
|||
id: '1', |
|||
}, |
|||
{ |
|||
label: '堤防2', |
|||
value: '2', |
|||
id: '2', |
|||
}, |
|||
{ |
|||
label: '堤防3', |
|||
value: '3', |
|||
id: '3', |
|||
} |
|||
], // 堤防名称列表 |
|||
searchLevel: 1, // 筛选堤防级别 |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0 // 总数量 |
|||
}, |
|||
ruleForm: { |
|||
dikeCode: '', |
|||
name: '', |
|||
planTime: '', |
|||
nationalSupplement: 0, |
|||
selfSupplement: 0, |
|||
budget: 0, |
|||
location: '', |
|||
content: '', |
|||
wagaCode: 'b' |
|||
}, |
|||
rules: { |
|||
dikeCode: [ |
|||
{ required: true, message: '请选择堤防名称', trigger: 'blur' } |
|||
], |
|||
name: [ |
|||
{ required: true, message: '请输入维养计划名称', trigger: 'blur' }, |
|||
{ max: 100, message: '名称最长为100个字符', trigger: 'blur' } |
|||
], |
|||
planTime: [ |
|||
{ required: true, message: '请选计划时间', trigger: 'change' } |
|||
], |
|||
nationalSupplement: [ |
|||
{ required: true, message: '请输入资金', trigger: 'change' } |
|||
], |
|||
selfSupplement: [ |
|||
{ required: true, message: '请输入资金', trigger: 'change' } |
|||
], |
|||
location: [ |
|||
{ required: true, message: '请输入具体地点', trigger: 'change' } |
|||
], |
|||
content: [ |
|||
{ required: true, message: '请输入维修养护内容', trigger: 'change' } |
|||
], |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
dialogVisible(newVal, oldVal) { |
|||
if (oldVal) { |
|||
this.prohibitEditing = false |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 删除对应维修计划 |
|||
deleteTableItem(row) { |
|||
deleteSZMaintenancePlan(row.id).then((res) => { |
|||
console.log('🚀res🚀', res) |
|||
this.getTableData() |
|||
this.$message.success('删除成功'); |
|||
}) |
|||
}, |
|||
// 查看或编辑计划详情 |
|||
viewOrEditPlanDetails(row, edit = false) { |
|||
if (!edit) { |
|||
this.prohibitEditing = true |
|||
} |
|||
getSZMaintenancePlan(row.id).then((res) => { |
|||
console.log('🚀res🚀', res) |
|||
this.ruleForm = res.data |
|||
this.ruleForm.budget = res.data.nationalSupplement + res.data.selfSupplement |
|||
this.dialogVisible = true |
|||
}) |
|||
}, |
|||
// 保存维修计划 |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
if (this.ruleForm.id) { |
|||
putSZMaintenancePlan(this.ruleForm).then(() => { |
|||
this.getTableData() |
|||
this.dialogVisible = false |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success' |
|||
}) |
|||
}) |
|||
} else { |
|||
postSZMaintenancePlan(this.ruleForm).then(() => { |
|||
this.getTableData() |
|||
this.dialogVisible = false |
|||
this.$message({ |
|||
message: '保存成功', |
|||
type: 'success' |
|||
}) |
|||
}) |
|||
} |
|||
} else { |
|||
console.log('校验不通过'); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 关闭dialog |
|||
closeDialog(ruleForm = 'ruleForm') { |
|||
console.log('触发关闭dialog', ruleForm); |
|||
this.$refs[ruleForm].resetFields(); |
|||
this.ruleForm = { |
|||
dikeCode: '', |
|||
name: '', |
|||
planTime: '', |
|||
nationalSupplement: 0, |
|||
selfSupplement: 0, |
|||
location: '', |
|||
budget: 0, |
|||
content: '', |
|||
wagaCode: 'b' |
|||
} |
|||
}, |
|||
// 计算预算 |
|||
calculateBudget() { |
|||
this.ruleForm.budget = Number(this.ruleForm.selfSupplement) + Number(this.ruleForm.nationalSupplement) |
|||
}, |
|||
// 获取数据 |
|||
getTableData(value = '') { |
|||
postSZMaintenancePlanList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records |
|||
this.pageData.total = res.total |
|||
} |
|||
console.log('🚀表格数据🚀', res) |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData() |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body"> |
|||
<div class="top-title"> |
|||
基础信息管理 |
|||
</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>维养计划名称：</span> |
|||
<el-input class="search-input" v-model="searchInput" placeholder="请输入维养计划名称" /> |
|||
<span>堤防级别：</span> |
|||
<el-select v-model="searchLevel" placeholder="请选择"> |
|||
<el-option v-for="item in dikeLevel" :label="item.label" :value="item.value" :key="item.id"></el-option> |
|||
</el-select> |
|||
<el-button class="search-btn" type="success" @click="getTableData(searchInput)">搜索</el-button> |
|||
</div> |
|||
<el-button class="search-btn" style=" margin-right: 16px;margin-bottom: 8px; float: right;" type="success" |
|||
@click="dialogVisible = true">添加</el-button> |
|||
<el-table class="table" height="640" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="100" /> |
|||
<el-table-column prop="name" align="center" label="维养计划名称" /> |
|||
<el-table-column prop="" align="center" label="堤防级别" /> |
|||
<el-table-column prop="location" align="center" label="具体地点" /> |
|||
<el-table-column prop="content" align="center" label="维修养护内容" /> |
|||
<el-table-column prop="nationalSupplement" align="center" label="国补" /> |
|||
<el-table-column prop="selfSupplement" align="center" label="自筹" /> |
|||
<el-table-column prop="createTime" align="center" sortable label="创建时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="updateTime" align="center" sortable label="更新时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="viewOrEditPlanDetails(scope.row)" type="text" size="small">查看</el-button> |
|||
<el-button @click="viewOrEditPlanDetails(scope.row, true)" type="text" size="small">编辑</el-button> |
|||
<el-button style=" margin-right: 9px;" type="text" size="small">记录</el-button> |
|||
<el-popconfirm confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" icon-color="red" |
|||
title="确定删除吗？" @confirm="deleteTableItem(scope.row)"> |
|||
<el-button style="color: red;" type="text" size="small" slot="reference">删除</el-button> |
|||
</el-popconfirm> |
|||
</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="closeDialog" :visible.sync="dialogVisible" width="38%"> |
|||
<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" class="demo-ruleForm"> |
|||
<el-form-item label-width="120px" label="堤防名称" prop="dikeCode"> |
|||
<el-select v-model="ruleForm.dikeCode" placeholder="请选择" @change="ruleForm.name = ruleForm.dikeCode" |
|||
:disabled="prohibitEditing"> |
|||
<el-option v-for="item in embankmentList" :label="item.label" :value="item.value" :key="item.id"></el-option> |
|||
</el-select> |
|||
<el-button button class="search-btn" type="success" size="small">详情</el-button> |
|||
<el-button button class="search-btn" type="success" size="small">打开地图</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="planTime"> |
|||
<el-date-picker v-model="ruleForm.planTime" type="month" placeholder="选择月" :disabled="prohibitEditing" |
|||
value-format="yy-MM-dd"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</div> |
|||
<div style="display: flex;"> |
|||
<el-form-item label-width="120px" label="国补资金" prop="nationalSupplement"> |
|||
<el-input style="width: 79px;" v-model="ruleForm.nationalSupplement" type="number" @input="calculateBudget()" |
|||
placeholder="请输入" :disabled="prohibitEditing" /> 万元 |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="自筹资金" prop="selfSupplement"> |
|||
<el-input style="width: 79px;" v-model="ruleForm.selfSupplement" type="number" @input="calculateBudget()" |
|||
placeholder="请输入" :disabled="prohibitEditing" /> 万元 |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="项目预算"> |
|||
<el-input style="width: 79px;" v-model="ruleForm.budget" disabled /> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item label-width="120px" label="具体地点" prop="location"> |
|||
<el-input style="width: 542px;" :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit |
|||
v-model="ruleForm.location" placeholder="请输入" :disabled="prohibitEditing" /> |
|||
</el-form-item> |
|||
<el-form-item label-width="120px" label="维修养护内容" prop="content"> |
|||
<el-input style="width: 542px;" :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit |
|||
v-model="ruleForm.content" placeholder="请输入" :disabled="prohibitEditing" /> |
|||
</el-form-item> |
|||
</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); |
|||
margin-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 { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
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,29 @@ |
|||
<!-- 维修计划管理 --> |
|||
<script> |
|||
import Dike from './Dike.vue' |
|||
import Reservoir from './Reservoir.vue' |
|||
import Sluice from './Sluice.vue' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
components: { |
|||
Reservoir, // 水库 |
|||
Sluice, // 水闸 |
|||
Dike, // 堤防 |
|||
}, |
|||
computed: { |
|||
selectTab() { |
|||
return this.$store.state.topTab.selectTab |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<Reservoir v-if="selectTab == 0"></Reservoir> |
|||
<Sluice v-if="selectTab == 1"></Sluice> |
|||
<Dike v-if="selectTab == 2"></Dike> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
@ -0,0 +1,507 @@ |
|||
<!-- 维修记录-堤防 --> |
|||
<script> |
|||
import { putDFMaintenanceRecords, deleteDFMaintenanceRecords, postDFMaintenanceRecords, postDFMaintenanceRecordsList, getDFMaintenanceRecords, getDicts, postDFMaintenancePlanList, getDFMaintenancePlan, listUser } from '@/api/management' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
data() { |
|||
return { |
|||
searchInput: '', |
|||
dialogVisible: false, |
|||
prohibitEditing: false, |
|||
statusList: [], // 状态列表 |
|||
personnelList: [], // 用户列表 |
|||
planData: { |
|||
dikeCode: '', |
|||
planTime: '', |
|||
nationalSupplement: '', |
|||
selfSupplement: '', |
|||
budget: '', |
|||
location: '', |
|||
content: '' |
|||
}, // 计划信息 |
|||
planList: [], |
|||
embankmentList: [ |
|||
{ |
|||
label: '堤防1', |
|||
value: '1', |
|||
id: '1', |
|||
}, |
|||
{ |
|||
label: '堤防2', |
|||
value: '2', |
|||
id: '2', |
|||
}, |
|||
{ |
|||
label: '堤防3', |
|||
value: '3', |
|||
id: '3', |
|||
} |
|||
], // 堤防名称列表 |
|||
selectStatus: '2', // 选中筛选状态 |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0 // 总数量 |
|||
}, |
|||
ruleForm: { |
|||
name: '', |
|||
planId: '', |
|||
before: '', |
|||
middle: '', |
|||
after: '', |
|||
maintenanceFunds: 0, |
|||
operators: [], |
|||
selectUser: [], |
|||
implement: '', |
|||
remark: '', |
|||
status: 0, |
|||
}, |
|||
rules: { |
|||
planId: [ |
|||
{ required: true, message: '请输入维养计划名称', trigger: 'blur' } |
|||
], |
|||
before: [ |
|||
{ required: true, message: '请输入维修养护前', trigger: 'blur' } |
|||
], |
|||
middle: [ |
|||
{ required: true, message: '请输入维修养护过程', trigger: 'blur' } |
|||
], |
|||
after: [ |
|||
{ required: true, message: '请输入维修养护结束后', trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
dialogVisible(newVal, oldVal) { |
|||
if (oldVal) { |
|||
this.prohibitEditing = false |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 删除对应维修记录 |
|||
deleteTableItem(row) { |
|||
deleteDFMaintenanceRecords(row.id).then((res) => { |
|||
console.log('🚀res🚀', res) |
|||
this.getTableData() |
|||
this.$message.success('删除成功'); |
|||
}) |
|||
}, |
|||
// 查看或编辑记录详情 |
|||
viewOrEditPlanDetails(row, edit = false) { |
|||
if (!edit) { |
|||
this.prohibitEditing = true |
|||
} |
|||
getDFMaintenanceRecords(row.id).then((res) => { |
|||
// 遍历用户数据让select组件渲染选项 |
|||
if (res.data.operators) { |
|||
this.personnelList = [] |
|||
res.data.operators.forEach(element => { |
|||
listUser({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "nickName", |
|||
type: "like", |
|||
value: element.name |
|||
}, |
|||
pageSize: 10, |
|||
pageNum: 1 |
|||
}).then((res) => { |
|||
this.personnelList.push(res.records[0]) |
|||
}) |
|||
}); |
|||
} |
|||
this.ruleForm = res.data |
|||
// 渲染选中项 |
|||
this.ruleForm.selectUser = [] |
|||
res.data.operators.forEach(element => { |
|||
let a = { |
|||
id: element.uid, |
|||
lebel: element.name |
|||
} |
|||
this.ruleForm.selectUser.push(a) |
|||
}); |
|||
this.dialogVisible = true |
|||
}) |
|||
}, |
|||
// 保存维修记录 |
|||
submitForm(formName, confirm = false) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
let user = [] |
|||
this.ruleForm.selectUser.forEach(element => { |
|||
let a = { |
|||
name: element.nickName, |
|||
uid: element.id |
|||
} |
|||
user.push(a) |
|||
}); |
|||
console.log('🚀user🚀', user) |
|||
this.ruleForm.operators = user |
|||
if (confirm) { |
|||
this.ruleForm.status = 1 |
|||
} |
|||
this.ruleForm.maintenanceFunds = Number(this.ruleForm.maintenanceFunds) |
|||
if (this.ruleForm.id) { |
|||
putDFMaintenanceRecords(this.ruleForm).then(() => { |
|||
this.getTableData() |
|||
this.dialogVisible = false |
|||
this.$message({ |
|||
message: confirm ? '确认成功' : '保存成功', |
|||
type: 'success' |
|||
}) |
|||
}) |
|||
} else { |
|||
postDFMaintenanceRecords(this.ruleForm).then(() => { |
|||
this.getTableData() |
|||
this.dialogVisible = false |
|||
this.$message({ |
|||
message: confirm ? '确认成功' : '保存成功', |
|||
type: 'success' |
|||
}) |
|||
}) |
|||
} |
|||
} else { |
|||
console.log('校验不通过'); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 搜索计划 |
|||
searchPlan(value) { |
|||
postDFMaintenancePlanList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value |
|||
}, |
|||
pageSize: 100, |
|||
pageNum: 1 |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.planList = res.records |
|||
} |
|||
}) |
|||
}, |
|||
// 改变选中计划 |
|||
changeSelectPlan() { |
|||
getDFMaintenancePlan(this.ruleForm.planId).then((res) => { |
|||
if (res.data) { |
|||
this.ruleForm.name = res.data.name |
|||
this.planData = res.data |
|||
this.planData.budget = res.data.nationalSupplement + res.data.selfSupplement |
|||
} |
|||
}) |
|||
}, |
|||
// 搜索用户 |
|||
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 |
|||
console.log('🚀用户数据🚀', res) |
|||
console.log('🚀用户数据🚀', this.ruleForm.operators) |
|||
}) |
|||
}, |
|||
// 关闭dialog |
|||
closeDialog(ruleForm = 'ruleForm') { |
|||
console.log('触发关闭dialog', ruleForm); |
|||
this.$refs[ruleForm].resetFields(); |
|||
this.ruleForm = { |
|||
name: '', |
|||
planId: '', |
|||
before: '', |
|||
middle: '', |
|||
after: '', |
|||
maintenanceFunds: 0, |
|||
operators: [], |
|||
implement: '', |
|||
remark: '', |
|||
status: 0, |
|||
} |
|||
}, |
|||
// 获取数据 |
|||
getTableData(value = '') { |
|||
postDFMaintenanceRecordsList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records |
|||
this.pageData.total = res.total |
|||
} |
|||
console.log('🚀表格数据🚀', res) |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData() |
|||
// 获取状态字典 |
|||
getDicts('xs_record_status').then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
this.statusList = res.data |
|||
} |
|||
}) |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body"> |
|||
<div class="top-title"> |
|||
基础信息管理 |
|||
</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>维养计划名称：</span> |
|||
<el-input class="search-input" v-model="searchInput" placeholder="请输入维养计划名称" /> |
|||
<span>状态：</span> |
|||
<el-select v-model="selectStatus" placeholder="请选择"> |
|||
<el-option label="全部" value="2" /> |
|||
<el-option v-for="item in statusList" :label="item.dictLabel" :value="item.dictValue" |
|||
:key="item.id"></el-option> |
|||
</el-select> |
|||
<el-button class="search-btn" type="success" @click="getTableData(searchInput)">搜索</el-button> |
|||
</div> |
|||
<el-button class="search-btn" style=" margin-right: 16px;margin-bottom: 8px; float: right;" type="success" |
|||
@click="dialogVisible = true">添加</el-button> |
|||
<el-table class="table" height="640" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="100" /> |
|||
<el-table-column prop="name" align="center" label="维养计划名称" /> |
|||
<el-table-column prop="before" align="center" label="维修养护前" /> |
|||
<el-table-column prop="middle" align="center" label="维修养护过程" /> |
|||
<el-table-column prop="after" align="center" label="维修养护结束后" /> |
|||
<el-table-column prop="maintenanceFunds" align="center" label="维修养护费用" /> |
|||
<el-table-column prop="status" align="center" label="状态"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.status == '0'" class="is-save">已保存</span> |
|||
<span v-else class="is-confirm">已确认</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="createTime" align="center" sortable label="创建时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="updateTime" align="center" sortable label="更新时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="viewOrEditPlanDetails(scope.row)" type="text" size="small">查看</el-button> |
|||
<el-button @click="viewOrEditPlanDetails(scope.row, true)" type="text" v-if="!scope.row.status" |
|||
size="small">编辑</el-button> |
|||
<el-popconfirm v-if="!scope.row.status" confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" |
|||
icon-color="red" title="确定删除吗？" @confirm="deleteTableItem(scope.row)"> |
|||
<el-button style="color: red; margin-left: 10px;" type="text" size="small" slot="reference">删除</el-button> |
|||
</el-popconfirm> |
|||
</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="closeDialog" :visible.sync="dialogVisible" width="40%"> |
|||
<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" class="demo-ruleForm"> |
|||
<el-form-item label-width="130px" label="维养计划名称" prop="planId"> |
|||
<el-select v-model="ruleForm.planId" filterable remote :remote-method="searchPlan" placeholder="请输入" |
|||
@change="changeSelectPlan" :disabled="prohibitEditing"> |
|||
<el-option v-for="item in planList" :key="item.id" :label="item.name" :value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-button button class="search-btn" type="success" size="small">详情</el-button> |
|||
<el-button button class="search-btn" type="success" size="small">打开地图</el-button> |
|||
</el-form-item> |
|||
<div style="display: flex;"> |
|||
<el-form-item label-width="130px" label="堤防名称"> |
|||
<el-input v-model="planData.dikeCode" disabled /> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="计划时间"> |
|||
<el-date-picker v-model="planData.planTime" type="month" disabled> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</div> |
|||
<div style="display: flex;"> |
|||
<el-form-item label-width="130px" label="国补资金"> |
|||
<div style="display: flex;"> |
|||
<el-input v-model="planData.nationalSupplement" type="number" disabled style="margin-right: 5px;" /> |
|||
<div style="width: 50px;">万元</div> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item label-width="90px" label="自筹资金"> |
|||
<div style="display: flex;"> |
|||
<el-input v-model="planData.selfSupplement" type="number" disabled style="margin-right: 5px;" /> |
|||
<div style="width: 50px;">万元</div> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item label-width="90px" label="项目预算"> |
|||
<el-input v-model="planData.budget" disabled /> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item label-width="130px" label="具体地点"> |
|||
<el-input :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit v-model="planData.location" |
|||
disabled /> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="维修养护内容"> |
|||
<el-input :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit v-model="planData.content" |
|||
disabled /> |
|||
</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="130px" label="维修养护前" prop="before"> |
|||
<el-input v-model="ruleForm.before" placeholder="请输入" style="width: 202px;" :disabled="prohibitEditing" /> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="维修养护过程" prop="middle"> |
|||
<el-input v-model="ruleForm.middle" placeholder="请输入" style="width: 202px;" :disabled="prohibitEditing" /> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="维修养护结束后" prop="after"> |
|||
<el-input v-model="ruleForm.after" placeholder="请输入" style="width: 202px;" :disabled="prohibitEditing" /> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="维修养护费用" prop="maintenanceFunds"> |
|||
<el-input v-model="ruleForm.maintenanceFunds" placeholder="请输入" style="width: 165px;" type="number" |
|||
:disabled="prohibitEditing" /> 万元 |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="养护人员" prop="operators"> |
|||
<!-- <el-input v-model="ruleForm.operators" placeholder="请输入" style="width: 202px;" /> --> |
|||
<el-select v-model="ruleForm.selectUser" multiple filterable remote :remote-method="searchUser" value-key="id" |
|||
:disabled="prohibitEditing" placeholder="请输入关键词搜索用户" prop="selectUser"> |
|||
<el-option v-for="item in personnelList" :key="item.id" :label="item.nickName" :value="item"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="落实情况" prop="implement"> |
|||
<el-input :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit |
|||
v-model="ruleForm.implement" placeholder="请输入" :disabled="prohibitEditing" /> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="备注" prop="remark"> |
|||
<el-input :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit v-model="ruleForm.remark" |
|||
placeholder="请输入" :disabled="prohibitEditing" /> |
|||
</el-form-item> |
|||
</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> |
|||
<el-button v-if="this.ruleForm.status == 0 && prohibitEditing" size="mini" type="primary" |
|||
@click="submitForm('ruleForm', true)">确认</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.body { |
|||
width: 100%; |
|||
min-height: calc(100vh - 56px); |
|||
margin-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 { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
|
|||
.is-confirm { |
|||
background-color: #ebf7f5; |
|||
border-radius: 4px; |
|||
color: #36b29e; |
|||
padding: 0px 6px; |
|||
} |
|||
|
|||
.is-save { |
|||
background-color: #f8f9fb; |
|||
border: 1px solid #bfbfbf; |
|||
border-radius: 4px; |
|||
color: #bfbfbf; |
|||
padding: 0px 6px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.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,22 @@ |
|||
<!-- 维修记录-水库 --> |
|||
<script> |
|||
export default { |
|||
name: '', |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
水库 |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
@ -0,0 +1,507 @@ |
|||
<!-- 维修记录-水闸 --> |
|||
<script> |
|||
import { putSZMaintenanceRecords, deleteSZMaintenanceRecords, postSZMaintenanceRecords, postSZMaintenanceRecordsList, getSZMaintenanceRecords, getDicts, postSZMaintenancePlanList, getSZMaintenancePlan, listUser } from '@/api/management' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
data() { |
|||
return { |
|||
searchInput: '', |
|||
dialogVisible: false, |
|||
prohibitEditing: false, |
|||
statusList: [], // 状态列表 |
|||
personnelList: [], // 用户列表 |
|||
planData: { |
|||
dikeCode: '', |
|||
planTime: '', |
|||
nationalSupplement: '', |
|||
selfSupplement: '', |
|||
budget: '', |
|||
location: '', |
|||
content: '' |
|||
}, // 计划信息 |
|||
planList: [], |
|||
embankmentList: [ |
|||
{ |
|||
label: '堤防1', |
|||
value: '1', |
|||
id: '1', |
|||
}, |
|||
{ |
|||
label: '堤防2', |
|||
value: '2', |
|||
id: '2', |
|||
}, |
|||
{ |
|||
label: '堤防3', |
|||
value: '3', |
|||
id: '3', |
|||
} |
|||
], // 堤防名称列表 |
|||
selectStatus: '2', // 选中筛选状态 |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0 // 总数量 |
|||
}, |
|||
ruleForm: { |
|||
name: '', |
|||
planId: '', |
|||
before: '', |
|||
middle: '', |
|||
after: '', |
|||
maintenanceFunds: 0, |
|||
operators: [], |
|||
selectUser: [], |
|||
implement: '', |
|||
remark: '', |
|||
status: 0, |
|||
}, |
|||
rules: { |
|||
planId: [ |
|||
{ required: true, message: '请输入维养计划名称', trigger: 'blur' } |
|||
], |
|||
before: [ |
|||
{ required: true, message: '请输入维修养护前', trigger: 'blur' } |
|||
], |
|||
middle: [ |
|||
{ required: true, message: '请输入维修养护过程', trigger: 'blur' } |
|||
], |
|||
after: [ |
|||
{ required: true, message: '请输入维修养护结束后', trigger: 'blur' } |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
dialogVisible(newVal, oldVal) { |
|||
if (oldVal) { |
|||
this.prohibitEditing = false |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
// 删除对应维修记录 |
|||
deleteTableItem(row) { |
|||
deleteSZMaintenanceRecords(row.id).then((res) => { |
|||
console.log('🚀res🚀', res) |
|||
this.getTableData() |
|||
this.$message.success('删除成功'); |
|||
}) |
|||
}, |
|||
// 查看或编辑记录详情 |
|||
viewOrEditPlanDetails(row, edit = false) { |
|||
if (!edit) { |
|||
this.prohibitEditing = true |
|||
} |
|||
getSZMaintenanceRecords(row.id).then((res) => { |
|||
// 遍历用户数据让select组件渲染选项 |
|||
if (res.data.operators) { |
|||
this.personnelList = [] |
|||
res.data.operators.forEach(element => { |
|||
listUser({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "nickName", |
|||
type: "like", |
|||
value: element.name |
|||
}, |
|||
pageSize: 10, |
|||
pageNum: 1 |
|||
}).then((res) => { |
|||
this.personnelList.push(res.records[0]) |
|||
}) |
|||
}); |
|||
} |
|||
this.ruleForm = res.data |
|||
// 渲染选中项 |
|||
this.ruleForm.selectUser = [] |
|||
res.data.operators.forEach(element => { |
|||
let a = { |
|||
id: element.uid, |
|||
lebel: element.name |
|||
} |
|||
this.ruleForm.selectUser.push(a) |
|||
}); |
|||
this.dialogVisible = true |
|||
}) |
|||
}, |
|||
// 保存维修记录 |
|||
submitForm(formName, confirm = false) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
let user = [] |
|||
this.ruleForm.selectUser.forEach(element => { |
|||
let a = { |
|||
name: element.nickName, |
|||
uid: element.id |
|||
} |
|||
user.push(a) |
|||
}); |
|||
console.log('🚀user🚀', user) |
|||
this.ruleForm.operators = user |
|||
if (confirm) { |
|||
this.ruleForm.status = 1 |
|||
} |
|||
this.ruleForm.maintenanceFunds = Number(this.ruleForm.maintenanceFunds) |
|||
if (this.ruleForm.id) { |
|||
putSZMaintenanceRecords(this.ruleForm).then(() => { |
|||
this.getTableData() |
|||
this.dialogVisible = false |
|||
this.$message({ |
|||
message: confirm ? '确认成功' : '保存成功', |
|||
type: 'success' |
|||
}) |
|||
}) |
|||
} else { |
|||
postSZMaintenanceRecords(this.ruleForm).then(() => { |
|||
this.getTableData() |
|||
this.dialogVisible = false |
|||
this.$message({ |
|||
message: confirm ? '确认成功' : '保存成功', |
|||
type: 'success' |
|||
}) |
|||
}) |
|||
} |
|||
} else { |
|||
console.log('校验不通过'); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 搜索计划 |
|||
searchPlan(value) { |
|||
postSZMaintenancePlanList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value |
|||
}, |
|||
pageSize: 100, |
|||
pageNum: 1 |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.planList = res.records |
|||
} |
|||
}) |
|||
}, |
|||
// 改变选中计划 |
|||
changeSelectPlan() { |
|||
getSZMaintenancePlan(this.ruleForm.planId).then((res) => { |
|||
if (res.data) { |
|||
this.ruleForm.name = res.data.name |
|||
this.planData = res.data |
|||
this.planData.budget = res.data.nationalSupplement + res.data.selfSupplement |
|||
} |
|||
}) |
|||
}, |
|||
// 搜索用户 |
|||
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 |
|||
console.log('🚀用户数据🚀', res) |
|||
console.log('🚀用户数据🚀', this.ruleForm.operators) |
|||
}) |
|||
}, |
|||
// 关闭dialog |
|||
closeDialog(ruleForm = 'ruleForm') { |
|||
console.log('触发关闭dialog', ruleForm); |
|||
this.$refs[ruleForm].resetFields(); |
|||
this.ruleForm = { |
|||
name: '', |
|||
planId: '', |
|||
before: '', |
|||
middle: '', |
|||
after: '', |
|||
maintenanceFunds: 0, |
|||
operators: [], |
|||
implement: '', |
|||
remark: '', |
|||
status: 0, |
|||
} |
|||
}, |
|||
// 获取数据 |
|||
getTableData(value = '') { |
|||
postSZMaintenanceRecordsList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time" |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "name", |
|||
type: "like", |
|||
value |
|||
}, |
|||
pageSize: this.pageData.pageSize, |
|||
pageNum: this.pageData.pageNum |
|||
}).then((res) => { |
|||
if (res) { |
|||
this.tableData = res.records |
|||
this.pageData.total = res.total |
|||
} |
|||
console.log('🚀表格数据🚀', res) |
|||
}) |
|||
} |
|||
}, |
|||
mounted() { |
|||
// 获取列表数据 |
|||
this.getTableData() |
|||
// 获取状态字典 |
|||
getDicts('xs_record_status').then((res) => { |
|||
if (res.data && Array.isArray(res.data)) { |
|||
this.statusList = res.data |
|||
} |
|||
}) |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="body"> |
|||
<div class="top-title"> |
|||
基础信息管理 |
|||
</div> |
|||
<div class="table-box"> |
|||
<div class="top-search"> |
|||
<span>维养计划名称：</span> |
|||
<el-input class="search-input" v-model="searchInput" placeholder="请输入维养计划名称" /> |
|||
<span>状态：</span> |
|||
<el-select v-model="selectStatus" placeholder="请选择"> |
|||
<el-option label="全部" value="2" /> |
|||
<el-option v-for="item in statusList" :label="item.dictLabel" :value="item.dictValue" |
|||
:key="item.id"></el-option> |
|||
</el-select> |
|||
<el-button class="search-btn" type="success" @click="getTableData(searchInput)">搜索</el-button> |
|||
</div> |
|||
<el-button class="search-btn" style=" margin-right: 16px;margin-bottom: 8px; float: right;" type="success" |
|||
@click="dialogVisible = true">添加</el-button> |
|||
<el-table class="table" height="640" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="100" /> |
|||
<el-table-column prop="name" align="center" label="维养计划名称" /> |
|||
<el-table-column prop="before" align="center" label="维修养护前" /> |
|||
<el-table-column prop="middle" align="center" label="维修养护过程" /> |
|||
<el-table-column prop="after" align="center" label="维修养护结束后" /> |
|||
<el-table-column prop="maintenanceFunds" align="center" label="维修养护费用" /> |
|||
<el-table-column prop="status" align="center" label="状态"> |
|||
<template slot-scope="scope"> |
|||
<span v-if="scope.row.status == '0'" class="is-save">已保存</span> |
|||
<span v-else class="is-confirm">已确认</span> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="createTime" align="center" sortable label="创建时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="updateTime" align="center" sortable label="更新时间"> |
|||
</el-table-column> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button @click="viewOrEditPlanDetails(scope.row)" type="text" size="small">查看</el-button> |
|||
<el-button @click="viewOrEditPlanDetails(scope.row, true)" type="text" v-if="!scope.row.status" |
|||
size="small">编辑</el-button> |
|||
<el-popconfirm v-if="!scope.row.status" confirm-button-text='确定' cancel-button-text='取消' icon="el-icon-info" |
|||
icon-color="red" title="确定删除吗？" @confirm="deleteTableItem(scope.row)"> |
|||
<el-button style="color: red; margin-left: 10px;" type="text" size="small" slot="reference">删除</el-button> |
|||
</el-popconfirm> |
|||
</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="closeDialog" :visible.sync="dialogVisible" width="40%"> |
|||
<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" class="demo-ruleForm"> |
|||
<el-form-item label-width="130px" label="维养计划名称" prop="planId"> |
|||
<el-select v-model="ruleForm.planId" filterable remote :remote-method="searchPlan" placeholder="请输入" |
|||
@change="changeSelectPlan" :disabled="prohibitEditing"> |
|||
<el-option v-for="item in planList" :key="item.id" :label="item.name" :value="item.id"> |
|||
</el-option> |
|||
</el-select> |
|||
<el-button button class="search-btn" type="success" size="small">详情</el-button> |
|||
<el-button button class="search-btn" type="success" size="small">打开地图</el-button> |
|||
</el-form-item> |
|||
<div style="display: flex;"> |
|||
<el-form-item label-width="130px" label="堤防名称"> |
|||
<el-input v-model="planData.dikeCode" disabled /> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="计划时间"> |
|||
<el-date-picker v-model="planData.planTime" type="month" disabled> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
</div> |
|||
<div style="display: flex;"> |
|||
<el-form-item label-width="130px" label="国补资金"> |
|||
<div style="display: flex;"> |
|||
<el-input v-model="planData.nationalSupplement" type="number" disabled style="margin-right: 5px;" /> |
|||
<div style="width: 50px;">万元</div> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item label-width="90px" label="自筹资金"> |
|||
<div style="display: flex;"> |
|||
<el-input v-model="planData.selfSupplement" type="number" disabled style="margin-right: 5px;" /> |
|||
<div style="width: 50px;">万元</div> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item label-width="90px" label="项目预算"> |
|||
<el-input v-model="planData.budget" disabled /> |
|||
</el-form-item> |
|||
</div> |
|||
<el-form-item label-width="130px" label="具体地点"> |
|||
<el-input :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit v-model="planData.location" |
|||
disabled /> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="维修养护内容"> |
|||
<el-input :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit v-model="planData.content" |
|||
disabled /> |
|||
</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="130px" label="维修养护前" prop="before"> |
|||
<el-input v-model="ruleForm.before" placeholder="请输入" style="width: 202px;" :disabled="prohibitEditing" /> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="维修养护过程" prop="middle"> |
|||
<el-input v-model="ruleForm.middle" placeholder="请输入" style="width: 202px;" :disabled="prohibitEditing" /> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="维修养护结束后" prop="after"> |
|||
<el-input v-model="ruleForm.after" placeholder="请输入" style="width: 202px;" :disabled="prohibitEditing" /> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="维修养护费用" prop="maintenanceFunds"> |
|||
<el-input v-model="ruleForm.maintenanceFunds" placeholder="请输入" style="width: 165px;" type="number" |
|||
:disabled="prohibitEditing" /> 万元 |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="养护人员" prop="operators"> |
|||
<!-- <el-input v-model="ruleForm.operators" placeholder="请输入" style="width: 202px;" /> --> |
|||
<el-select v-model="ruleForm.selectUser" multiple filterable remote :remote-method="searchUser" value-key="id" |
|||
:disabled="prohibitEditing" placeholder="请输入关键词搜索用户" prop="selectUser"> |
|||
<el-option v-for="item in personnelList" :key="item.id" :label="item.nickName" :value="item"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="落实情况" prop="implement"> |
|||
<el-input :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit |
|||
v-model="ruleForm.implement" placeholder="请输入" :disabled="prohibitEditing" /> |
|||
</el-form-item> |
|||
<el-form-item label-width="130px" label="备注" prop="remark"> |
|||
<el-input :autosize="{ minRows: 5 }" type="textarea" maxlength="500" show-word-limit v-model="ruleForm.remark" |
|||
placeholder="请输入" :disabled="prohibitEditing" /> |
|||
</el-form-item> |
|||
</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> |
|||
<el-button v-if="this.ruleForm.status == 0 && prohibitEditing" size="mini" type="primary" |
|||
@click="submitForm('ruleForm', true)">确认</el-button> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.body { |
|||
width: 100%; |
|||
min-height: calc(100vh - 56px); |
|||
margin-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 { |
|||
display: flex; |
|||
align-items: center; |
|||
margin-bottom: 8px; |
|||
|
|||
.search-input { |
|||
width: 300px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
.table { |
|||
height: calc(680px - 34px); |
|||
|
|||
.is-confirm { |
|||
background-color: #ebf7f5; |
|||
border-radius: 4px; |
|||
color: #36b29e; |
|||
padding: 0px 6px; |
|||
} |
|||
|
|||
.is-save { |
|||
background-color: #f8f9fb; |
|||
border: 1px solid #bfbfbf; |
|||
border-radius: 4px; |
|||
color: #bfbfbf; |
|||
padding: 0px 6px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.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,29 @@ |
|||
<!-- 维修记录 --> |
|||
<script> |
|||
import Dike from './Dike.vue' |
|||
import Reservoir from './Reservoir.vue' |
|||
import Sluice from './Sluice.vue' |
|||
export default { |
|||
name: 'InspectionItems', |
|||
components: { |
|||
Reservoir, // 水库 |
|||
Sluice, // 水闸 |
|||
Dike, // 堤防 |
|||
}, |
|||
computed: { |
|||
selectTab() { |
|||
return this.$store.state.topTab.selectTab |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<Reservoir v-if="selectTab == 0"></Reservoir> |
|||
<Sluice v-if="selectTab == 1"></Sluice> |
|||
<Dike v-if="selectTab == 2"></Dike> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"></style> |
|||
Loading…
Reference in new issue