chenhaojie
1 year ago
28 changed files with 3445 additions and 720 deletions
@ -0,0 +1,3 @@ |
|||
<template > |
|||
<router-view /> |
|||
</template> |
|||
@ -0,0 +1,157 @@ |
|||
<script> |
|||
|
|||
export default { |
|||
name: "Edit", |
|||
props: { |
|||
model: { |
|||
type: Object, |
|||
default: null |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
ruleForm: { |
|||
sluice: '', |
|||
plan: '', |
|||
sponsor: '', |
|||
code: '', |
|||
responsibility: '', |
|||
programme: '', |
|||
drawing: '' |
|||
}, |
|||
rules: { |
|||
sluice: [ |
|||
{ required: true, message: "请输入闸门名称", trigger: "blur" }, |
|||
], |
|||
plan: [ |
|||
{ required: true, message: "请输入计划名称", trigger: "blur" }, |
|||
], |
|||
sponsor: [ |
|||
{ required: true, message: "请选择主管单位", trigger: "blur" }, |
|||
], |
|||
code: [ |
|||
{ required: true, message: "请输入注册编码", trigger: "blur" }, |
|||
], |
|||
responsibility: [ |
|||
{ required: true, message: "请选择三个责任人", trigger: "blur" }, |
|||
], |
|||
}, |
|||
fileList: [] |
|||
} |
|||
}, |
|||
methods: { |
|||
handlePreview(file) { |
|||
console.log(file); |
|||
}, |
|||
handleExceed(files, fileList) { |
|||
this.$message.warning(`当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`); |
|||
}, |
|||
beforeRemove(file, fileList) { |
|||
return this.$confirm(`确定移除 ${ file.name }？`); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div style="display:flex; flex-direction: column"> |
|||
<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" |
|||
:disabled="!!model && model.eventType !== 'edit'" |
|||
ref="ruleForm" |
|||
label-width="100px" |
|||
> |
|||
<el-col :span="24"> |
|||
<el-form-item label-width="120px" label="水闸名称" prop="sluice"> |
|||
<el-input style="width: 202px" v-model="ruleForm.sluice" placeholder="请输入水闸名称"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="计划名称" prop="plan"> |
|||
<el-input style="width: 202px" v-model="ruleForm.plan" placeholder="请输入计划名称"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="主管单位" prop="sponsor"> |
|||
<el-input style="width: 202px" v-model="ruleForm.sponsor"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="注册编码" prop="code"> |
|||
<el-input style="width: 202px" v-model="ruleForm.code" placeholder="请输入注册编码"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="三个责任人" prop="responsibility"> |
|||
<el-input style="width: 202px" v-model="ruleForm.responsibility"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<el-col :span="24"> |
|||
<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-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="调度方案" prop="programme"> |
|||
<el-upload |
|||
class="upload-demo" |
|||
action="https://jsonplaceholder.typicode.com/posts/" |
|||
:on-preview="handlePreview" |
|||
:before-remove="beforeRemove" |
|||
multiple |
|||
accept=".doc, .docx, .pdf, .png, .jpg" |
|||
:limit="5" |
|||
:on-exceed="handleExceed" |
|||
:auto-upload="false" |
|||
:file-list="fileList"> |
|||
<el-button size="small" type="primary">点击上传</el-button> |
|||
<div slot="tip" class="el-upload__tip">只能上传doc/docx/pdf/png/JPG文件，且不能超过50m</div> |
|||
</el-upload> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="水闸建设图纸" prop="drawing"> |
|||
<el-upload |
|||
class="upload-demo" |
|||
action="https://jsonplaceholder.typicode.com/posts/" |
|||
:on-preview="handlePreview" |
|||
:before-remove="beforeRemove" |
|||
accept=".pdf, .png, .jpg" |
|||
multiple |
|||
:limit="5" |
|||
:on-exceed="handleExceed" |
|||
:auto-upload="false" |
|||
:file-list="fileList"> |
|||
<el-button size="small" type="primary">点击上传</el-button> |
|||
<div slot="tip" class="el-upload__tip">只能上传pdf/png/JPG文件，且不能超过50m</div> |
|||
</el-upload> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,317 @@ |
|||
<!-- 巡查项目管理-水闸 --> |
|||
<script> |
|||
import Edit from './components/edit.vue' |
|||
import { |
|||
getDicts, |
|||
postSZInspectionProjectList, |
|||
postSZInspectionProject, |
|||
putSZInspectionProject, |
|||
deleteSZInspectionProject, |
|||
getSZInspectionProject, |
|||
} from "@/api/management"; |
|||
export default { |
|||
name: "record", |
|||
components: { |
|||
Edit |
|||
}, |
|||
data() { |
|||
return { |
|||
searchForm: { |
|||
code: '', |
|||
name: '', |
|||
status: '', |
|||
plan: '' |
|||
}, |
|||
dialog: { |
|||
title: '新增水闸调度方案', |
|||
dom: '', |
|||
visible: false |
|||
}, |
|||
mdl: null, |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
// 表格筛选 |
|||
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); |
|||
}); |
|||
}, |
|||
// 重置搜索 |
|||
resetSearch() { |
|||
if (!this.$refs['searchForm']) return |
|||
this.$refs['searchForm'].resetFields() |
|||
this.searchTableList(); |
|||
}, |
|||
// 新增巡查内容 |
|||
handleAdd() { |
|||
this.dialog.title = '新增水闸调度方案' |
|||
this.dialog.dom = 'Edit' |
|||
this.dialog.visible = true |
|||
}, |
|||
handleCheck(row) { |
|||
this.dialog.title = '查看水闸调度方案' |
|||
this.dialog.dom = 'Edit' |
|||
this.mdl = {...row} |
|||
this.dialog.visible = true |
|||
}, |
|||
handleEdit(row) { |
|||
this.dialog.title = '编辑水闸调度方案' |
|||
this.dialog.dom = 'Edit' |
|||
this.mdl = {...row, eventType: 'edit'} |
|||
this.dialog.visible = true |
|||
}, |
|||
handleDelete(row) { |
|||
this.dialog.dom = 'Edit' |
|||
this.mdl = {...row} |
|||
this.dialog.visible = true |
|||
}, |
|||
// 保存巡查项目 |
|||
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 { |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 关闭dialog |
|||
closeDialog() { |
|||
this.dialog.visible = false |
|||
this.mdl = null |
|||
}, |
|||
// 获取列表数据 |
|||
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(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="slider-right"> |
|||
<div class="top-title">水闸操作记录</div> |
|||
<div class="table-box"> |
|||
<el-form inline :model="searchForm" ref="searchForm" class="demo-ruleForm"> |
|||
<el-form-item label="注册编码:" prop="gate"> |
|||
<el-input v-model="searchForm.code" class="search-input" placeholder="请输入注册编码"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="计划名称:" prop="instruct"> |
|||
<el-input v-model="searchForm.plan" class="search-input" placeholder="请输入计划名称"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="水闸名称:" prop="number"> |
|||
<el-input v-model="searchForm.name" class="search-input" placeholder="请输入水闸名称"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="审批状态:" prop="number"> |
|||
<el-input v-model="searchForm.status" class="search-input"></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button class="search-btn" type="success" @click="searchTableList()">查询</el-button> |
|||
<el-button @click="resetSearch()">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-button |
|||
class="search-btn" |
|||
style="margin-right: 16px; margin-bottom: 8px; float: right" |
|||
type="success" |
|||
@click="handleAdd()" |
|||
>新增</el-button |
|||
> |
|||
<el-table height="625" :data="tableData" border style="width: 100%"> |
|||
<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 prop="center" align="center" label="计划名称"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="水闸名称"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="三个责任人"> |
|||
</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="handleCheck(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>查看</el-button |
|||
> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
@click="handleEdit(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="handleDelete(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" |
|||
@current-change="(e) => handleCurrentPageChange(e)" |
|||
@size-change="(e) => handlePageSizeChange(e)" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
<el-dialog |
|||
:title="dialog.title" |
|||
@close="closeDialog" |
|||
:visible.sync="dialog.visible" |
|||
width="50%" |
|||
> |
|||
<component :is="dialog.dom" :model="mdl"></component> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button size="mini" @click="closeDialog">取 消</el-button> |
|||
<el-button size="mini" type="primary" @click="submitForm('ruleForm')" |
|||
>保存</el-button |
|||
> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.top-title { |
|||
height: 50px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
background-color: white; |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,120 @@ |
|||
<script> |
|||
|
|||
export default { |
|||
name: "Edit", |
|||
props: { |
|||
model: { |
|||
type: Object, |
|||
default: null |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
ruleForm: { |
|||
name: '', |
|||
number: '', |
|||
control: '', |
|||
instruct: '', |
|||
leftTrunk: '', |
|||
rightTrunk: '', |
|||
upstream: '', |
|||
downstream: '', |
|||
opening: '', |
|||
time: '' |
|||
}, |
|||
rules: { |
|||
name: [ |
|||
{ required: true, message: "请输入闸门名称", trigger: "blur" }, |
|||
], |
|||
control: [ |
|||
{ required: true, message: "请输入控制水位", trigger: "blur" }, |
|||
], |
|||
leftTrunk: [ |
|||
{ required: true, message: "请输入左干", trigger: "blur" }, |
|||
], |
|||
rightTrunk: [ |
|||
{ required: true, message: "请输入右干", trigger: "blur" }, |
|||
], |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<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" |
|||
:disabled="!!model" |
|||
ref="ruleForm" |
|||
label-width="100px" |
|||
> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="闸门" prop="name"> |
|||
<el-input style="width: 202px" v-model="ruleForm.name"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="闸号" prop="number"> |
|||
<el-input style="width: 202px" v-model="ruleForm.number"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="控制水位" prop="control"> |
|||
<el-input style="width: 202px" v-model="ruleForm.control"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="指令号" prop="instruct"> |
|||
<el-input style="width: 202px" v-model="ruleForm.instruct"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="左干" prop="leftTrunk"> |
|||
<el-input style="width: 202px" v-model="ruleForm.leftTrunk"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="右干" prop="rightTrunk"> |
|||
<el-input style="width: 202px" v-model="ruleForm.rightTrunk"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="上游水位" prop="upstream"> |
|||
<el-input style="width: 202px" v-model="ruleForm.upstream"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="下游水位" prop="downstream"> |
|||
<el-input style="width: 202px" v-model="ruleForm.downstream"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="开度" prop="opening"> |
|||
<el-input style="width: 202px" v-model="ruleForm.opening"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="时间" prop="time"> |
|||
<el-input style="width: 202px" v-model="ruleForm.time"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,293 @@ |
|||
<!-- 巡查项目管理-水闸 --> |
|||
<script> |
|||
import Edit from './components/edit.vue' |
|||
import { |
|||
getDicts, |
|||
postSZInspectionProjectList, |
|||
postSZInspectionProject, |
|||
putSZInspectionProject, |
|||
deleteSZInspectionProject, |
|||
getSZInspectionProject, |
|||
} from "@/api/management"; |
|||
export default { |
|||
name: "record", |
|||
components: { |
|||
Edit |
|||
}, |
|||
data() { |
|||
return { |
|||
searchForm: { |
|||
gate: '', |
|||
instruct: '', |
|||
number: '' |
|||
}, |
|||
dialog: { |
|||
title: '新增操作记录', |
|||
dom: '', |
|||
visible: false |
|||
}, |
|||
mdl: null, |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
// 表格筛选 |
|||
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); |
|||
}); |
|||
}, |
|||
// 重置搜索 |
|||
resetSearch() { |
|||
if (!this.$refs['searchForm']) return |
|||
this.$refs['searchForm'].resetFields() |
|||
this.searchTableList(); |
|||
}, |
|||
// 新增巡查内容 |
|||
handleAdd() { |
|||
this.dialog.dom = 'Edit' |
|||
this.dialog.visible = true |
|||
}, |
|||
handleCheck(row) { |
|||
this.dialog.dom = 'Edit' |
|||
this.mdl = {...row} |
|||
this.dialog.visible = true |
|||
}, |
|||
// 保存巡查项目 |
|||
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() { |
|||
this.dialog.visible = false |
|||
this.mdl = null |
|||
}, |
|||
// 获取列表数据 |
|||
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(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="slider-right"> |
|||
<div class="top-title">水闸操作记录</div> |
|||
<div class="table-box"> |
|||
<el-form inline :model="searchForm" ref="searchForm" class="demo-ruleForm"> |
|||
<el-form-item label="闸门:" prop="gate"> |
|||
<el-input v-model="searchForm.gate" class="search-input" placeholder="请输入闸门"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="指令号:" prop="instruct"> |
|||
<el-input v-model="searchForm.instruct" class="search-input" placeholder="请输入指令号"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="闸号:" prop="number"> |
|||
<el-input v-model="searchForm.number" class="search-input" placeholder="请输入闸号"></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button class="search-btn" type="success" @click="searchTableList()">查询</el-button> |
|||
<el-button @click="resetSearch()">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-button |
|||
class="search-btn" |
|||
style="margin-right: 16px; margin-bottom: 8px; float: right" |
|||
type="success" |
|||
@click="handleAdd()" |
|||
>新增</el-button |
|||
> |
|||
<el-table height="625" :data="tableData" border style="width: 100%"> |
|||
<el-table-column type="index" align="center" label="序号"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="闸门" min-width="150"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="指令号" min-width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="控制水位（m）" min-width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="左干（m³/s）" min-width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="右干（m³/s）" min-width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="上游水位（m）" min-width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="下游水位（m）" min-width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="闸号" min-width="150"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="操作人" min-width="120"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="监护人" min-width="120"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
min-width="200" |
|||
prop="createTime" |
|||
align="center" |
|||
sortable |
|||
label="创建时间" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
min-width="200" |
|||
prop="updateTime" |
|||
align="center" |
|||
sortable |
|||
label="更新时间" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column prop="address" align="center" label="操作" fixed="right"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
@click="handleCheck(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
> |
|||
查看 |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination |
|||
background |
|||
class="pagination" |
|||
style="margin-top: 16px; margin-right: 16px; float: right" |
|||
:current-page="pageData.pageNum" |
|||
:page-sizes="pageData.pageSizes" |
|||
layout="total, prev, pager, next, sizes, jumper" |
|||
:total="pageData.total" |
|||
@current-change="(e) => handleCurrentPageChange(e)" |
|||
@size-change="(e) => handlePageSizeChange(e)" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
<el-dialog |
|||
:title="dialog.title" |
|||
@close="closeDialog" |
|||
:visible.sync="dialog.visible" |
|||
width="50%" |
|||
> |
|||
<component :is="dialog.dom" :model="mdl"></component> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button size="mini" @click="closeDialog">取 消</el-button> |
|||
<el-button size="mini" type="primary" @click="submitForm('ruleForm')" |
|||
>保存</el-button |
|||
> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.top-title { |
|||
height: 50px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
background-color: white; |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,222 @@ |
|||
<!-- 调度运用管理-水闸 --> |
|||
<script> |
|||
import { |
|||
getDicts, |
|||
postSZInspectionProjectList, |
|||
} from "@/api/management"; |
|||
import { |
|||
getRunSzDeviceRecord |
|||
} from "@/api/sluice"; |
|||
export default { |
|||
name: "utilize", |
|||
data() { |
|||
return { |
|||
searchInput: "", |
|||
searchType: 3, |
|||
examType: [], // 检查类型 |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleGoPlan(row) { |
|||
this.$router.push({ |
|||
path: "plan", |
|||
query: { id: row.id }, |
|||
}); |
|||
}, |
|||
handleGoRecord(row) { |
|||
this.$router.push({ |
|||
path: "record", |
|||
query: { id: row.id }, |
|||
}); |
|||
}, |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
// 表格筛选 |
|||
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); |
|||
}); |
|||
}, |
|||
// 获取列表数据 |
|||
getTableData() { |
|||
(this.searchInput = ""), |
|||
(this.searchType = 3), |
|||
getRunSzDeviceRecord({ |
|||
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) => { |
|||
this.examType = res.data; |
|||
}); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="slider-right"> |
|||
<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-table height="625" :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 prop="name" align="center" label="水闸名代码"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="管理单位"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="行政主管部门"> |
|||
</el-table-column> |
|||
<el-table-column prop="createTime" align="center" label="最近巡查回见"> |
|||
</el-table-column> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
@click="handleGoPlan(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
>计划管理</el-button |
|||
> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
@click="handleGoRecord(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" |
|||
@current-change="(e) => handleCurrentPageChange(e)" |
|||
@size-change="(e) => handlePageSizeChange(e)" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.top-title { |
|||
height: 50px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
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; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,3 @@ |
|||
<template > |
|||
<router-view /> |
|||
</template> |
|||
@ -0,0 +1,258 @@ |
|||
<!-- 调度运用管理-水闸 --> |
|||
<script> |
|||
import {getDicts} from "@/api/management"; |
|||
import { getAreasData } from "@/api/areas/index"; |
|||
import { getRunProjectList } from "@/api/sluice/index"; |
|||
let that |
|||
export default { |
|||
name: "sluice", |
|||
data() { |
|||
return { |
|||
searchForm: { |
|||
adcd: '', |
|||
wagaType: -1, |
|||
wagaName: '' |
|||
}, |
|||
searchInput: "", |
|||
searchType: 3, |
|||
sluiceType: [], // 检查类型 |
|||
areasOptions: [], // 检查类型 |
|||
adcdOptions: [], // 检查类型 |
|||
areasOptionProps: { |
|||
emitPath: false, |
|||
checkStrictly: true, //选择任意一级 |
|||
}, |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
}; |
|||
}, |
|||
created() { |
|||
that = this |
|||
}, |
|||
filters: { |
|||
// 过滤类型 |
|||
filterSluice (price) { |
|||
const data = that.sluiceType.filter((res) => res.dictValue == price) |
|||
return data[0] ? data[0].dictLabel : '/' |
|||
}, |
|||
// 过滤区域 |
|||
filterAdcd (price) { |
|||
let name = '' |
|||
if (that.adcdOptions.filter((res) => res.id == price)[0]) { |
|||
name = that.adcdOptions.filter((res) => res.id == price)[0].name |
|||
} |
|||
return name |
|||
} |
|||
}, |
|||
methods: { |
|||
handleGoManage(row) { |
|||
this.$router.push({ |
|||
path: "manage", |
|||
query: { wagaCode: row.wagaCode }, |
|||
}); |
|||
}, |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
search() { |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
// 重置搜索 |
|||
resetSearch() { |
|||
this.pageData.pageNum = 1; |
|||
if (!this.$refs['searchForm']) return |
|||
this.$refs['searchForm'].resetFields() |
|||
this.getTableData(); |
|||
}, |
|||
// 获取列表数据 |
|||
getTableData() { |
|||
getRunProjectList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
adcd: this.searchForm.adcd, |
|||
wagaType: this.searchForm.wagaType == -1 ? "" : this.searchForm.wagaType, |
|||
wagaName: this.searchForm.wagaName |
|||
}, |
|||
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; |
|||
} |
|||
}); |
|||
}, |
|||
// 获取地区树数据 |
|||
getTreeData() { |
|||
getAreasData().then((items) => { |
|||
this.adcdOptions = items.data |
|||
if (items?.data) { |
|||
let res = []; |
|||
let getChildren = (res, pid) => { |
|||
for (const i of items.data) { |
|||
if (i.parentid === pid) { |
|||
const newItem = { |
|||
label: i.name, |
|||
value: i.id, |
|||
}; |
|||
if (i.layer != 3) newItem.children = []; |
|||
res.push(newItem); |
|||
getChildren(newItem.children, newItem.value); |
|||
} |
|||
} |
|||
}; |
|||
getChildren(res, items.data[0].parentid); |
|||
this.areasOptions = res; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
async mounted () { |
|||
// 获取水闸类型 |
|||
getDicts("sluice_type").then((res) => { |
|||
this.sluiceType = res.data; |
|||
}); |
|||
console.log(123) |
|||
await this.getTreeData(); |
|||
// 获取列表数据 |
|||
await this.getTableData(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="slider-right"> |
|||
<div class="top-title">基础信息管理</div> |
|||
<div class="table-box"> |
|||
<el-form inline :model="searchForm" ref="searchForm" class="demo-ruleForm"> |
|||
<el-form-item label="区域选择:" prop="adcd"> |
|||
<el-cascader |
|||
:options="areasOptions" |
|||
v-model="searchForm.adcd" |
|||
:props="areasOptionProps" |
|||
placeholder="请选择" |
|||
clearable |
|||
size="small" |
|||
> |
|||
</el-cascader> |
|||
</el-form-item> |
|||
<el-form-item label="水闸类型:" prop="wagaType"> |
|||
<el-select v-model="searchForm.wagaType" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in sluiceType" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="item.id" |
|||
></el-option> |
|||
<el-option label="全部" :value="-1"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="水闸名称:" prop="wagaName"> |
|||
<el-input v-model="searchForm.wagaName" class="search-input" placeholder="请输入水闸名称"></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button class="search-btn" type="success" @click="search()">查询</el-button> |
|||
<el-button @click="resetSearch()">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table height="625" :data="tableData" border> |
|||
<el-table-column type="index" align="center" label="序号" width="100"> |
|||
</el-table-column> |
|||
<el-table-column prop="wagaCode" align="center" label="水闸编码"> |
|||
</el-table-column> |
|||
<el-table-column prop="wagaName" align="center" label="水闸名称"> |
|||
</el-table-column> |
|||
<el-table-column prop="waterAdministrativeDepartment" align="center" label="水闸类型"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.waterAdministrativeDepartment | filterSluice }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="区域"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.adcd | filterAdcd }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="engineeringManagementUnit" align="center" label="管理机构"> |
|||
</el-table-column> |
|||
<el-table-column prop="address" align="center" label="操作"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
@click="handleGoManage(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" |
|||
@current-change="(e) => handleCurrentPageChange(e)" |
|||
@size-change="(e) => handlePageSizeChange(e)" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.top-title { |
|||
height: 50px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
background-color: white; |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,208 @@ |
|||
<script> |
|||
import { getDicts, getSZDevice } from "@/api/management"; |
|||
export default { |
|||
name: "Edit", |
|||
props: { |
|||
model: { |
|||
type: Object, |
|||
default: null |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
xcDeviceType:[], |
|||
xcWarnningType:[], |
|||
xcWarnningLevelType:[], |
|||
sluiceType:[], |
|||
ruleForm: { |
|||
type: '', |
|||
name: '', |
|||
deviceId: '', |
|||
message: '', |
|||
warningType: '', |
|||
warningLevel: '', |
|||
reportInterval: '', |
|||
minThreshold: 0, |
|||
maxThreshold: 0, |
|||
}, |
|||
rules: { |
|||
type: [ |
|||
{ required: true, message: "请选择设备类型", trigger: "blur" }, |
|||
], |
|||
name: [ |
|||
{ required: true, message: "请选择设备名称", trigger: "blur" }, |
|||
], |
|||
message: [ |
|||
{ required: true, message: "请输入设备信息", trigger: "blur" }, |
|||
], |
|||
reportInterval: [ |
|||
{ required: true, message: "请输入自动预警上报间隔", trigger: "blur" }, |
|||
], |
|||
Threshold: [ |
|||
{ validator: this.validateThresholds }, |
|||
], |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
validateThresholds(rule, value, callback) { |
|||
if (this.ruleForm.minThreshold > this.ruleForm.maxThreshold) { |
|||
callback(new Error('最小阈值必须小于最大阈值')); |
|||
} else { |
|||
callback() |
|||
} |
|||
}, |
|||
submitForm(callback) { |
|||
this.$refs.ruleForm.validate((valid) => { |
|||
if (valid) { |
|||
callback({ |
|||
...this.ruleForm |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
async mounted() { |
|||
// 获取预警类型 |
|||
getDicts("xc_warnning_type").then((res) => { |
|||
this.xcWarnningType = res.data; |
|||
}); |
|||
// 获取预警级别 |
|||
getDicts("xc_warnning_level").then((res) => { |
|||
this.xcWarnningLevelType = res.data; |
|||
}); |
|||
// 获取设备类型 |
|||
getDicts("xc_device_type").then((res) => { |
|||
this.xcDeviceType = res.data; |
|||
}); |
|||
if (this.model) { |
|||
const data = await getSZDevice(this.model.id) |
|||
this.ruleForm.type = data.data.type + '' |
|||
this.ruleForm.name = data.data.name |
|||
this.ruleForm.deviceId = data.data.deviceId |
|||
this.ruleForm.message = data.data.message |
|||
this.ruleForm.warningType = data.data.warningType |
|||
this.ruleForm.warningLevel = data.data.warningLevel |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div style="display:flex; flex-direction: column"> |
|||
<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" |
|||
:disabled="!!model && model.eventType !== 'edit'" |
|||
ref="ruleForm" |
|||
label-width="100px" |
|||
> |
|||
<el-col :span="24"> |
|||
<el-form-item label-width="120px" label="设备类型" prop="name"> |
|||
<el-select v-model="ruleForm.type" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in xcDeviceType" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="设备名称" prop="name"> |
|||
<el-input style="width: 202px" v-model="ruleForm.name" placeholder="请输入"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="设备id" prop="number"> |
|||
<el-input disabled style="width: 202px" v-model="ruleForm.deviceId"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<el-form-item label-width="120px" label="设备信息" prop="message"> |
|||
<el-input |
|||
style="width: 502px" |
|||
v-model="ruleForm.message" |
|||
type="textarea" |
|||
resize="none" |
|||
rows="3" |
|||
placeholder="请输入" |
|||
maxlength="30" |
|||
></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="预警类型" prop="warningType"> |
|||
<el-select v-model="ruleForm.warningType" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in xcWarnningType" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="预警级别" prop="warningLevel"> |
|||
<el-select v-model="ruleForm.warningLevel" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in xcWarnningLevelType" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="24"> |
|||
<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-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="200px" label="自动预警上报间隔（分钟）" prop="reportInterval"> |
|||
<el-input style="width: 202px" v-model="ruleForm.reportInterval"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="预警阈值" prop="Threshold"> |
|||
<el-col :span="8"> |
|||
<el-form-item label-width="30px" label=">="> |
|||
<el-input style="width: 100px" v-model="ruleForm.minThreshold"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="8"> |
|||
<el-form-item label-width="32px" label="<="> |
|||
<el-input style="width: 100px" v-model="ruleForm.maxThreshold"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,367 @@ |
|||
<!-- 巡查项目管理-水闸 --> |
|||
<script> |
|||
import Edit from './components/edit.vue' |
|||
import { |
|||
getDicts, |
|||
postSZDeviceList, |
|||
postSZDevice, |
|||
putSZDevice, |
|||
delSZDevice |
|||
} from "@/api/management"; |
|||
let that |
|||
export default { |
|||
name: "manage", |
|||
components: { |
|||
Edit |
|||
}, |
|||
data() { |
|||
return { |
|||
xcWarnningType: [], |
|||
xcWarnningLevelType: [], |
|||
xcDeviceType: [], |
|||
searchForm: { |
|||
type: -1, |
|||
warningLevel: '', |
|||
name: '' |
|||
}, |
|||
dialog: { |
|||
title: '新增操作记录', |
|||
dom: '', |
|||
visible: false |
|||
}, |
|||
mdl: null, |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
search() { |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
handleRecord(row) { |
|||
this.$router.push({ |
|||
path: "record", |
|||
query: {id: row.id}, |
|||
}); |
|||
}, |
|||
// 重置搜索 |
|||
resetSearch() { |
|||
this.pageData.pageNum = 1; |
|||
if (!this.$refs['searchForm']) return |
|||
this.$refs['searchForm'].resetFields() |
|||
this.getTableData(); |
|||
}, |
|||
// 新增巡查内容 |
|||
handleAdd() { |
|||
this.dialog.dom = 'Edit' |
|||
this.dialog.visible = true |
|||
}, |
|||
handleCheck(row) { |
|||
this.dialog.dom = 'Edit' |
|||
this.mdl = {...row} |
|||
this.dialog.visible = true |
|||
}, |
|||
handleEdit(row) { |
|||
this.dialog.dom = 'Edit' |
|||
this.mdl = { |
|||
eventType: 'edit', |
|||
...row |
|||
} |
|||
this.dialog.visible = true |
|||
}, |
|||
async handleDelete(row) { |
|||
await delSZDevice(row.id) |
|||
this.$message.success('删除成功') |
|||
this.getTableData() |
|||
}, |
|||
// 保存巡查项目 |
|||
submitForm () { |
|||
this.$refs.component.submitForm(async (from) => { |
|||
if (this.mdl) { |
|||
await putSZDevice({ |
|||
id: this.mdl.id, |
|||
...from, |
|||
wagaCode: this.$route.query.wagaCode |
|||
}) |
|||
this.closeDialog() |
|||
this.getTableData() |
|||
} else { |
|||
await postSZDevice({ |
|||
...from, |
|||
wagaCode: this.$route.query.wagaCode |
|||
}) |
|||
this.$message.success('新增成功') |
|||
this.closeDialog() |
|||
this.getTableData() |
|||
} |
|||
}) |
|||
|
|||
}, |
|||
// 关闭dialog |
|||
closeDialog() { |
|||
this.dialog.visible = false |
|||
this.mdl = null |
|||
}, |
|||
// 获取列表数据 |
|||
getTableData() { |
|||
postSZDeviceList({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
type: this.searchForm.type === -1 ? '' : this.searchForm.type, |
|||
name: this.searchForm.name, |
|||
wagaCode: this.$route.query.wagaCode |
|||
}, |
|||
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; |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
created() { |
|||
that = this |
|||
}, |
|||
filters: { |
|||
// 过滤预警类型 |
|||
filterwarnningType (price) { |
|||
const data = that.xcWarnningType.filter((res) => res.dictValue == price) |
|||
return data[0] ? data[0].dictLabel : '/' |
|||
}, |
|||
// 过滤预警级别 |
|||
filterwarnningLevel (price) { |
|||
const data = that.xcWarnningLevelType.filter((res) => res.dictValue == price) |
|||
return data[0] ? data[0].dictLabel : '/' |
|||
}, |
|||
// 过滤设备级别 |
|||
filterdeviceType (price) { |
|||
const data = that.xcDeviceType.filter((res) => res.dictValue == price) |
|||
return data[0] ? data[0].dictLabel : '/' |
|||
} |
|||
}, |
|||
async mounted() { |
|||
// 获取预警类型 |
|||
getDicts("xc_warnning_type").then((res) => { |
|||
this.xcWarnningType = res.data; |
|||
}); |
|||
// 获取预警级别 |
|||
getDicts("xc_warnning_level").then((res) => { |
|||
this.xcWarnningLevelType = res.data; |
|||
}); |
|||
// 获取设备类型 |
|||
getDicts("xc_device_type").then((res) => { |
|||
this.xcDeviceType = res.data; |
|||
}); |
|||
// 获取列表数据 |
|||
await this.getTableData(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="slider-right"> |
|||
<div class="top-title">水闸动态监测管理</div> |
|||
<div class="table-box"> |
|||
<el-form inline :model="searchForm" ref="searchForm" class="demo-ruleForm"> |
|||
<el-form-item label="设备类型:" prop="type"> |
|||
<el-select v-model="searchForm.type" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in xcDeviceType" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="item.id" |
|||
></el-option> |
|||
<el-option label="全部" :value="-1"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="预警级别:" prop="warningLevel"> |
|||
<el-select v-model="searchForm.warningLevel" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in xcWarnningLevelType" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="item.id" |
|||
></el-option> |
|||
<el-option label="全部" :value="-1"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="设备名称:" prop="name"> |
|||
<el-input v-model="searchForm.name" class="search-input" placeholder="请输入设备名称"></el-input> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button class="search-btn" type="success" @click="search()">查询</el-button> |
|||
<el-button @click="resetSearch()">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-button |
|||
class="search-btn" |
|||
style="margin-right: 16px; margin-bottom: 8px; float: right" |
|||
type="success" |
|||
@click="handleAdd()" |
|||
>新增 |
|||
</el-button |
|||
> |
|||
<el-table height="625" :data="tableData" border style="width: 100%"> |
|||
<el-table-column type="index" align="center" label="序号"> |
|||
</el-table-column> |
|||
<el-table-column prop="name" align="center" label="设备名称"> |
|||
</el-table-column> |
|||
<el-table-column prop="type" align="center" label="设备类型"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.type | filterdeviceType }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="warningType" align="center" label="预警类型"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.warningType | filterwarnningType }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="warningLevel" align="center" label="预警等级"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.warningLevel | filterwarnningLevel }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column |
|||
min-width="200" |
|||
prop="createTime" |
|||
align="center" |
|||
sortable |
|||
label="预警时间" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column prop="address" align="center" label="操作" min-width="200"> |
|||
<template slot-scope="scope"> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
@click="handleCheck(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
> |
|||
查看 |
|||
</el-button> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
@click="handleEdit(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
> |
|||
编辑 |
|||
</el-button> |
|||
<el-button |
|||
style="margin-right: 16px" |
|||
@click="handleRecord(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="handleDelete(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" |
|||
@current-change="(e) => handleCurrentPageChange(e)" |
|||
@size-change="(e) => handlePageSizeChange(e)" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
<el-dialog |
|||
:title="dialog.title" |
|||
@close="closeDialog" |
|||
:visible.sync="dialog.visible" |
|||
width="50%" |
|||
> |
|||
<component v-if="dialog.visible" :is="dialog.dom" ref="component" :model="mdl"></component> |
|||
<div slot="footer" class="dialog-footer"> |
|||
<el-button size="mini" @click="closeDialog">取 消</el-button> |
|||
<el-button size="mini" type="primary" @click="submitForm" |
|||
>保存 |
|||
</el-button |
|||
> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.top-title { |
|||
height: 50px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
background-color: white; |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,120 @@ |
|||
<script> |
|||
|
|||
export default { |
|||
name: "Edit", |
|||
props: { |
|||
model: { |
|||
type: Object, |
|||
default: null |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
ruleForm: { |
|||
name: '', |
|||
number: '', |
|||
control: '', |
|||
instruct: '', |
|||
leftTrunk: '', |
|||
rightTrunk: '', |
|||
upstream: '', |
|||
downstream: '', |
|||
opening: '', |
|||
time: '' |
|||
}, |
|||
rules: { |
|||
name: [ |
|||
{ required: true, message: "请输入闸门名称", trigger: "blur" }, |
|||
], |
|||
control: [ |
|||
{ required: true, message: "请输入控制水位", trigger: "blur" }, |
|||
], |
|||
leftTrunk: [ |
|||
{ required: true, message: "请输入左干", trigger: "blur" }, |
|||
], |
|||
rightTrunk: [ |
|||
{ required: true, message: "请输入右干", trigger: "blur" }, |
|||
], |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div> |
|||
<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" |
|||
:disabled="!!model" |
|||
ref="ruleForm" |
|||
label-width="100px" |
|||
> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="闸门" prop="name"> |
|||
<el-input style="width: 202px" v-model="ruleForm.name"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="闸号" prop="number"> |
|||
<el-input style="width: 202px" v-model="ruleForm.number"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="控制水位" prop="control"> |
|||
<el-input style="width: 202px" v-model="ruleForm.control"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="指令号" prop="instruct"> |
|||
<el-input style="width: 202px" v-model="ruleForm.instruct"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="左干" prop="leftTrunk"> |
|||
<el-input style="width: 202px" v-model="ruleForm.leftTrunk"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="右干" prop="rightTrunk"> |
|||
<el-input style="width: 202px" v-model="ruleForm.rightTrunk"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="上游水位" prop="upstream"> |
|||
<el-input style="width: 202px" v-model="ruleForm.upstream"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="下游水位" prop="downstream"> |
|||
<el-input style="width: 202px" v-model="ruleForm.downstream"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="开度" prop="opening"> |
|||
<el-input style="width: 202px" v-model="ruleForm.opening"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="12"> |
|||
<el-form-item label-width="120px" label="时间" prop="time"> |
|||
<el-input style="width: 202px" v-model="ruleForm.time"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-form> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="scss"> |
|||
|
|||
</style> |
|||
@ -0,0 +1,219 @@ |
|||
<!-- 巡查项目管理-水闸 --> |
|||
<script> |
|||
import { |
|||
getRunSzDeviceRecordList |
|||
} from "@/api/sluice"; |
|||
import { |
|||
getDicts |
|||
} from "@/api/management"; |
|||
let that = this |
|||
export default { |
|||
name: "record", |
|||
data() { |
|||
return { |
|||
xcWarnningType: [], |
|||
xcWarnningLevelType: [], |
|||
searchForm: { |
|||
warningType: -1, |
|||
warningLevel: -1, |
|||
warningTime: null, |
|||
}, |
|||
mdl: null, |
|||
tableData: [], // 检查列表 |
|||
pageData: { |
|||
pageNum: 1, // 当前页 |
|||
pageSize: 10, // 请求数量 |
|||
pageSizes: [10, 20, 50, 100], |
|||
total: 0, // 总数量 |
|||
}, |
|||
}; |
|||
}, |
|||
methods: { |
|||
handleCurrentPageChange(page) { |
|||
this.pageData.pageNum = page; |
|||
this.getTableData(); |
|||
}, |
|||
handlePageSizeChange(pageSize) { |
|||
this.pageData.pageSize = pageSize; |
|||
this.getTableData(); |
|||
}, |
|||
search() { |
|||
console.log(this.searchForm) |
|||
this.pageData.pageNum = 1; |
|||
this.getTableData(); |
|||
}, |
|||
// 重置搜索 |
|||
resetSearch() { |
|||
this.pageData.pageNum = 1; |
|||
if (!this.$refs['searchForm']) return |
|||
this.$refs['searchForm'].resetFields() |
|||
this.getTableData(); |
|||
}, |
|||
// 获取列表数据 |
|||
getTableData() { |
|||
getRunSzDeviceRecordList({ |
|||
data: { |
|||
warningLevel: this.searchForm.warningLevel === -1 ? '' : this.searchForm.warningLevel, |
|||
warningType: this.searchForm.warningType === -1 ? '' : this.searchForm.warningType, |
|||
warningEndTime: this.searchForm.warningTime[0] ? this.searchForm.warningTime[0] : '', |
|||
warningStartTime: this.searchForm.warningTime[1] ? this.searchForm.warningTime[1] : '', |
|||
}, |
|||
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); |
|||
}); |
|||
}, |
|||
}, |
|||
created() { |
|||
that = this |
|||
}, |
|||
filters: { |
|||
// 过滤预警类型 |
|||
filterwarnningType (price) { |
|||
const data = that.xcWarnningType.filter((res) => res.dictValue == price) |
|||
return data[0] ? data[0].dictLabel : '/' |
|||
}, |
|||
// 过滤预警级别 |
|||
filterwarnningLevel (price) { |
|||
const data = that.xcWarnningLevelType.filter((res) => res.dictValue == price) |
|||
return data[0] ? data[0].dictLabel : '/' |
|||
} |
|||
}, |
|||
async mounted() { |
|||
// 获取预警类型 |
|||
getDicts("xc_warnning_type").then((res) => { |
|||
this.xcWarnningType = res.data; |
|||
}); |
|||
// 获取预警级别 |
|||
getDicts("xc_warnning_level").then((res) => { |
|||
this.xcWarnningLevelType = res.data; |
|||
}); |
|||
// 获取列表数据 |
|||
await this.getTableData(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="slider-right"> |
|||
<div class="top-title">水闸动态监测历史记录</div> |
|||
<div class="table-box"> |
|||
<el-form inline :model="searchForm" ref="searchForm" class="demo-ruleForm"> |
|||
<el-form-item label="预警类型:" prop="warningType"> |
|||
<el-select v-model="searchForm.warningType" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in xcWarnningType" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="item.id" |
|||
></el-option> |
|||
<el-option label="全部" :value="-1"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="预警级别:" prop="warningLevel"> |
|||
<el-select v-model="searchForm.warningLevel" placeholder="请选择"> |
|||
<el-option |
|||
v-for="item in xcWarnningLevelType" |
|||
:label="item.dictLabel" |
|||
:value="item.dictValue" |
|||
:key="item.id" |
|||
></el-option> |
|||
<el-option label="全部" :value="-1"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="预警时间:" prop="warningTime"> |
|||
<el-time-picker |
|||
is-range |
|||
v-model="searchForm.warningTime" |
|||
value-format="timestamp" |
|||
range-separator="·" |
|||
start-placeholder="开始时间" |
|||
end-placeholder="结束时间" |
|||
placeholder="选择时间范围"> |
|||
</el-time-picker> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button class="search-btn" type="success" @click="search()">查询</el-button> |
|||
<el-button @click="resetSearch()">重置</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-table height="625" :data="tableData" border style="width: 100%"> |
|||
<el-table-column type="index" align="center" label="序号"> |
|||
</el-table-column> |
|||
<el-table-column prop="warningType" align="center" label="预警类型"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.warningType | filterwarnningType }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="warningLevel" align="center" label="预警等级"> |
|||
<template slot-scope="scope"> |
|||
{{ scope.row.warningLevel | filterwarnningLevel }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column prop="warningData" align="center" label="预警数据"> |
|||
</el-table-column> |
|||
<el-table-column prop="warningTime" align="center" label="预警时间"> |
|||
</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" |
|||
@current-change="(e) => handleCurrentPageChange(e)" |
|||
@size-change="(e) => handlePageSizeChange(e)" |
|||
> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped lang="less"> |
|||
.top-title { |
|||
height: 50px; |
|||
background-color: white; |
|||
display: flex; |
|||
padding-left: 16px; |
|||
align-items: center; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.table-box { |
|||
width: 100%; |
|||
height: calc(100% - 50px - 24px); |
|||
margin-top: 24px; |
|||
padding: 16px; |
|||
background-color: white; |
|||
|
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,352 @@ |
|||
<template> |
|||
<div class="report-page"> |
|||
<div class="sticky-top flex justify-between"> |
|||
<el-button type="primary" @click="handleDownPdf">下载报告</el-button> |
|||
<el-button @click="$router.go(-1)">返回</el-button> |
|||
</div> |
|||
<div class="flex justify-center mt-16"> |
|||
<div class="p-20" ref="pdfRef"> |
|||
<div class="table-box border-l-t font-14"> |
|||
<div class="text-center font-16 border-b-r p-10"> |
|||
{{ formData.name }} |
|||
</div> |
|||
<div class="flex border-l-t w-full"> |
|||
<div class="flex flex-1"> |
|||
<div class="label border-b-r p-10 w-100">巡查时间</div> |
|||
<div class="value border-b-r flex-1 p-10"> |
|||
{{ formData.startTime }}-{{ formData.doneTime }} |
|||
</div> |
|||
</div> |
|||
<div class="flex flex-1"> |
|||
<div class="label border-b-r p-10 w-100">天气</div> |
|||
<div class="value border-b-r flex-1 p-10"> |
|||
{{ formData.weather || "-" }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="flex border-l-t w-full"> |
|||
<div class="flex flex-1"> |
|||
<div class="label border-b-r p-10 w-100">检查人员</div> |
|||
<div class="value border-b-r flex-1 p-10"> |
|||
{{ formData.patrolName || "-" }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="flex border-l-t w-full"> |
|||
<div class="flex flex-1"> |
|||
<div class="label border-b-r p-10 w-100">管理单位</div> |
|||
<div class="value border-b-r flex-1 p-10"> |
|||
{{ formData.engineeringManagementUnit }} |
|||
</div> |
|||
</div> |
|||
<div class="flex flex-1"> |
|||
<div class="label border-b-r p-10 w-100">水闸名称</div> |
|||
<div class="value border-b-r flex-1 p-10"> |
|||
{{ formData.wagaName || "-" }} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="flex border-l-t w-full"> |
|||
<div |
|||
class="flex-1 border-b-r p-10 w-full flex justify-center items-center" |
|||
> |
|||
检查内容 |
|||
</div> |
|||
<div class="w-300"> |
|||
<div class="label border-b-r p-6 text-center">问题等级</div> |
|||
<div class="flex flex-shrink-0"> |
|||
<div class="flex-1 border-b-r p-6 text-center">无</div> |
|||
<div class="flex-1 border-b-r p-6 text-center">一般</div> |
|||
<div class="flex-1 border-b-r p-6 text-center">较重</div> |
|||
<div class="flex-1 border-b-r p-6 text-center">严重</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="border-l-t w-full"> |
|||
<div v-for="(item, index) in problemList" :key="index" class="flex"> |
|||
<div class="w-p-10 border-b-r"> |
|||
<div class="flex items-center p-10">{{ item.projectName }}</div> |
|||
</div> |
|||
<div class="w-p-90"> |
|||
<div |
|||
v-for="(item2, index2) in item.children" |
|||
:key="index2 + '0'" |
|||
class="w-full flex" |
|||
> |
|||
<div class="flex-1 border-b-r p-10">{{ item2.content }}</div> |
|||
<div class="w-300 flex flex-shrink-0"> |
|||
<div |
|||
class="flex-1 border-b-r p-10 flex justify-center items-center" |
|||
> |
|||
<i class="el-icon-check" v-if="item2.level === '0'"></i> |
|||
</div> |
|||
<div |
|||
class="flex-1 border-b-r p-10 flex justify-center items-center" |
|||
> |
|||
<i class="el-icon-check" v-if="item2.level === '1'"></i> |
|||
</div> |
|||
<div |
|||
class="flex-1 border-b-r p-10 flex justify-center items-center" |
|||
> |
|||
<i class="el-icon-check" v-if="item2.level === '2'"></i> |
|||
</div> |
|||
<div |
|||
class="flex-1 border-b-r p-10 flex justify-center items-center" |
|||
> |
|||
<i class="el-icon-check" v-if="item2.level === '3'"></i> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="border-l-t w-full"> |
|||
<div class="flex"> |
|||
<div class="w-p-10 border-b-r"> |
|||
<div class="flex items-center p-10">问题描述</div> |
|||
</div> |
|||
<div class="w-p-90 border-b-r p-10"> |
|||
{{ |
|||
formData.describeTotal && formData.describeTotal.slice(0, -1) |
|||
}} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="border-l-t w-full"> |
|||
<div class="flex"> |
|||
<div class="w-p-10 border-b-r"> |
|||
<div class="flex items-center p-10">现场记录情况</div> |
|||
</div> |
|||
<div class="w-p-90 border-b-r p-10"> |
|||
<el-image |
|||
v-for="item in formData.pictures" |
|||
:src="item" |
|||
style="width: auto" |
|||
class="mb-10 mr-10" |
|||
:preview-src-list="[item]" |
|||
> |
|||
<template #error> |
|||
<div |
|||
class="w-full flex justify-center items-center" |
|||
style=" |
|||
height: 100px; |
|||
border: 1px solid #f0f0f0; |
|||
font-style: italic; |
|||
color: #ccc; |
|||
padding: 10px; |
|||
" |
|||
> |
|||
图片加载失败 |
|||
</div> |
|||
</template> |
|||
</el-image> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="w-full" style="height: 200px"> |
|||
<!-- 占位 --> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import html2canvas from "html2canvas"; |
|||
import { jsPDF } from "jspdf"; |
|||
import { |
|||
getEnableSuperviseWayData, |
|||
getSuperviseEngineeringReportDetailsData, |
|||
} from "@/api/sluice"; |
|||
|
|||
import { Loading } from "element-ui"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
problemList: [], |
|||
formData: {}, |
|||
loadingInstance: null, |
|||
}; |
|||
}, |
|||
created() { |
|||
this.initData(); |
|||
}, |
|||
methods: { |
|||
// 初始化数据 |
|||
async initData() { |
|||
const enableData = await getEnableSuperviseWayData({ |
|||
wayId: this.$route.query.wayId, |
|||
}); |
|||
if (enableData) { |
|||
let list = []; |
|||
enableData.data?.itemList?.forEach((item, index) => { |
|||
if (index === 0) { |
|||
list.push({ |
|||
id: item.id, |
|||
projectId: item.projectId, |
|||
projectName: item.projectName, |
|||
problemDescribe: "", |
|||
siteSituationRecords: "", |
|||
siteSituationRecordsArr: [], |
|||
children: [{ ...item, level: null }], |
|||
}); |
|||
} else { |
|||
let exitItem = list.find((v) => v.projectId === item.projectId); |
|||
if (!exitItem) { |
|||
list.push({ |
|||
id: item.id, |
|||
projectId: item.projectId, |
|||
projectName: item.projectName, |
|||
problemDescribe: "", |
|||
siteSituationRecords: "", |
|||
siteSituationRecordsArr: [], |
|||
children: [{ ...item, level: null }], |
|||
}); |
|||
} else { |
|||
exitItem.children.push({ |
|||
...item, |
|||
level: null, |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
this.problemList = list; |
|||
console.log("this.problemList >>>>> ", this.problemList); |
|||
} |
|||
|
|||
const detailRes = await getSuperviseEngineeringReportDetailsData( |
|||
this.$route.query.id |
|||
); |
|||
if (detailRes?.data && this.problemList.length) { |
|||
const { data } = detailRes; |
|||
this.formData = { ...data }; |
|||
this.formData.problemList = []; |
|||
this.formData.pictures = []; |
|||
// 产品说描述拼接一起 |
|||
this.formData.describeTotal = ""; |
|||
const { engineeringList, problemList } = data; |
|||
this.problemList.forEach((item) => { |
|||
let exitItem = engineeringList.find( |
|||
(v) => v.projectId === item.projectId |
|||
); |
|||
if (exitItem) { |
|||
item.newId = item.id === exitItem.id ? null : exitItem.id; |
|||
item.problemDescribe = exitItem.problemDescribe; |
|||
if (item.problemDescribe) { |
|||
this.formData.describeTotal += item.problemDescribe + "，"; |
|||
} |
|||
item.siteSituationRecords = exitItem.siteSituationRecords; |
|||
item.siteSituationRecordsArr = exitItem.siteSituationRecords |
|||
? exitItem.siteSituationRecords.split(",") |
|||
: []; |
|||
if (item.siteSituationRecordsArr.length > 0) { |
|||
this.formData.pictures.push(...item.siteSituationRecordsArr); |
|||
} |
|||
item.children.forEach((item2) => { |
|||
let exitItem2 = problemList.find( |
|||
(v) => v.projectItemId === item2.id |
|||
); |
|||
if (exitItem2) { |
|||
item2.level = exitItem2.level; |
|||
item2.newId = item2.id === exitItem2.id ? null : exitItem2.id; |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
// 下载报告 |
|||
handleDownPdf() { |
|||
this.loadingInstance = Loading.service({ |
|||
lock: true, |
|||
text: "正在生成PDF中...", |
|||
spinner: "el-icon-loading", |
|||
background: "rgba(0, 0, 0, 0.7)", |
|||
}); |
|||
// A4纸pdf宽高 |
|||
const PDF_W = 592.28; |
|||
const PDF_H = 841.89; |
|||
html2canvas(this.$refs.pdfRef, { |
|||
useCORS: true, |
|||
scale: 2, |
|||
}) |
|||
.then((canvas) => { |
|||
const width = canvas.width; |
|||
const height = canvas.height; |
|||
const pageHeight = (width / PDF_W) * PDF_H; |
|||
let leftHeight = height; |
|||
let position = 0; |
|||
var pageData = canvas.toDataURL("image/jpeg", 1.0); |
|||
|
|||
const imgWidth = PDF_W; |
|||
const imgHeight = (PDF_W / width) * height; |
|||
|
|||
let pdf = new jsPDF(undefined, "pt", "a4"); |
|||
if (height < pageHeight) { |
|||
pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight); |
|||
} else { |
|||
while (leftHeight > 0) { |
|||
pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight); |
|||
leftHeight -= pageHeight; |
|||
position -= PDF_H; |
|||
if (leftHeight > 0) { |
|||
pdf.addPage(); |
|||
} |
|||
} |
|||
} |
|||
let save = pdf.save("demo.pdf"); |
|||
this.loadingInstance.close(); |
|||
}) |
|||
.catch((e) => { |
|||
console.log("e >>>>> ", e); |
|||
this.loadingInstance.close(); |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.report-page { |
|||
background-color: #fff; |
|||
height: 100%; |
|||
overflow: auto; |
|||
.table-box { |
|||
width: 1184px; |
|||
} |
|||
.sticky-top { |
|||
position: sticky; |
|||
top: 0; |
|||
background-color: #fff; |
|||
padding: 10px 24px; |
|||
} |
|||
} |
|||
.border-l-t { |
|||
border-left: 1px solid #ccc; |
|||
border-top: 1px solid #ccc; |
|||
} |
|||
.border-b-r { |
|||
border-bottom: 1px solid #ccc; |
|||
border-right: 1px solid #ccc; |
|||
} |
|||
.w-100 { |
|||
width: 100px; |
|||
} |
|||
.w-300 { |
|||
width: 300px; |
|||
} |
|||
.w-p-10 { |
|||
width: 10%; |
|||
} |
|||
.w-p-50 { |
|||
width: 50%; |
|||
} |
|||
.w-p-40 { |
|||
width: 40%; |
|||
} |
|||
.w-p-60 { |
|||
width: 60%; |
|||
} |
|||
.w-p-90 { |
|||
width: 90%; |
|||
} |
|||
</style> |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue