ljf
/
shuili-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

水闸动态检测接口完成

sy-water-data-board-ui
hejunjie 1 year ago
parent
e3a58a8205
commit
44dcff6d97
14 changed files with 2340 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 38
      src/api/management/sluice.js
  2. 16
      src/api/sluice/index.js
  3. 3
      src/views/sluice/runManage/dispatch/index.vue
  4. 157
      src/views/sluice/runManage/dispatch/plan/components/edit.vue
  5. 317
      src/views/sluice/runManage/dispatch/plan/index.vue
  6. 120
      src/views/sluice/runManage/dispatch/record/components/edit.vue
  7. 293
      src/views/sluice/runManage/dispatch/record/index.vue
  8. 222
      src/views/sluice/runManage/dispatch/utilize/index.vue
  9. 3
      src/views/sluice/runManage/monitoring/index.vue
  10. 257
      src/views/sluice/runManage/monitoring/sluice/index.vue
  11. 208
      src/views/sluice/runManage/monitoring/sluice/manage/components/edit.vue
  12. 367
      src/views/sluice/runManage/monitoring/sluice/manage/index.vue
  13. 120
      src/views/sluice/runManage/monitoring/sluice/record/components/edit.vue
  14. 219
      src/views/sluice/runManage/monitoring/sluice/record/index.vue

38
src/api/management/sluice.js
View File

@ -1,6 +1,44 @@
// 水闸相关接口
import request from '@/utils/request'
// 水闸动态监测列表
export function postSZDevice(data) {
return request({
url: '/run/sz/device',
method: 'post',
data
})
}
// 水闸动态监测列表
export function postSZDeviceList(data) {
return request({
url: '/run/sz/device/list',
method: 'post',
data
})
}
// 查询水闸动态检测设备详情
export function getSZDevice(id) {
return request({
url: `/run/sz/device/${id}`,
method: 'get'
})
}
// 查询水闸动态检测设备详情
export function delSZDevice(id) {
return request({
url: `/run/sz/device/${id}`,
method: 'delete'
})
}
// 修改水闸动态检测设备
export function putSZDevice(data) {
return request({
url: `/run/sz/device/`,
method: 'put',
data
})
}
// 巡查项目管理-巡视检查列表
export function postSZInspectionProjectList(data) {
return request({

16
src/api/sluice/index.js
View File

@ -9,6 +9,22 @@ export function getSluiceProjectList(data) {
data
})
}
// 水闸动态检测设备记录
export function getRunSzDeviceRecord(data) {
return request({
url: `/run/sz/device/record`,
method: 'post',
data
})
}
// 查询水闸动态检测设备记录列表
export function getRunSzDeviceRecordList(data) {
return request({
url: `/run/sz/device/record/list`,
method: 'post',
data
})
}
// 获取维修养护工程列表
export function getSluiceYhProjectList(data) {

3
src/views/sluice/runManage/dispatch/index.vue
View File

@ -0,0 +1,3 @@
<template >
<router-view />
</template>

157
src/views/sluice/runManage/dispatch/plan/components/edit.vue
View File

@ -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>

317
src/views/sluice/runManage/dispatch/plan/index.vue
View File

@ -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>

120
src/views/sluice/runManage/dispatch/record/components/edit.vue
View File

@ -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>

293
src/views/sluice/runManage/dispatch/record/index.vue
View File

@ -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>

222
src/views/sluice/runManage/dispatch/utilize/index.vue
View File

@ -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>

3
src/views/sluice/runManage/monitoring/index.vue
View File

@ -0,0 +1,3 @@
<template >
<router-view />
</template>

257
src/views/sluice/runManage/monitoring/sluice/index.vue
View File

@ -0,0 +1,257 @@
<!-- 调度运用管理-水闸 -->
<script>
import {getDicts} from "@/api/management";
import { getAreasData } from "@/api/areas/index";
import { getSluiceProjectList } 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() {
getSluiceProjectList({
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;
});
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>

208
src/views/sluice/runManage/monitoring/sluice/manage/components/edit.vue
View File

@ -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>

367
src/views/sluice/runManage/monitoring/sluice/manage/index.vue
View File

@ -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>

120
src/views/sluice/runManage/monitoring/sluice/record/components/edit.vue
View File

@ -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>

219
src/views/sluice/runManage/monitoring/sluice/record/index.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save