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

fix: 添加水雨情信息

sy-water-data-board-ui
panyuyi 1 year ago
parent
c0dc64a715
commit
a2179cb0a7
3 changed files with 709 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. 3
      src/views/sluice/runManage/waterRainReport/index.vue
  2. 344
      src/views/sluice/runManage/waterRainReport/testReportDetails/index.vue
  3. 362
      src/views/sluice/runManage/waterRainReport/testReportManage/index.vue

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

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

344
src/views/sluice/runManage/waterRainReport/testReportDetails/index.vue
View File

@ -0,0 +1,344 @@
<!-- 水雨情测报页面 -->
<template>
<div class="patrol-manage-page">
<div class="top-title">水闸信息</div>
<div class="table-box">
<div class="top-search">
<span>区域选择：</span>
<el-select v-model="dikeType" placeholder="请选择">
<!-- <el-option
v-for="item in dikeTypeList"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
>
</el-option> -->
</el-select>
<span class="ml-12">水闸标识：</span>
<el-select v-model="dikeType" placeholder="请选择">
<el-option
v-for="item in dikeTypeList"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
>
</el-option>
</el-select>
<el-button
class="!ml-10"
type="success"
@click="getTableData(searchInput)"
>搜索</el-button
>
<el-button @click="resetSearch()">重置</el-button>
</div>
<el-table class="mt-16" height="625" :data="tableData" border>
<el-table-column type="index" align="center" label="序号" width="80" />
<el-table-column prop="dikeName" align="center" label="水闸名称" />
<el-table-column prop="dikeCode" align="center" label="水闸代码" />
<el-table-column prop="dikeLength" align="center" label="水闸标识" />
<el-table-column prop="dikeType" align="center" label="区域" />
<el-table-column prop="project" align="center" label="管理机构" />
<el-table-column prop="operate" align="center" label="操作">
<template slot-scope="scope">
<el-button @click="handleCheck(scope.row)" type="text" size="small"
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
background
class="pagination"
style="margin-top: 16px; margin-right: 16px; float: right"
:current-page="pageData.pageNum"
:page-sizes="pageData.pageSizes"
layout="total, prev, pager, next, sizes, jumper"
:total="pageData.total"
@size-change="getTableData()"
>
</el-pagination>
</div>
<!-- 弹窗 -->
<el-dialog
title="标题"
@close="dialogVisible = false"
:visible.sync="dialogVisible"
width="520px"
>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
>
<el-form-item
label-width="120px"
label="日常巡查项目"
prop="checkings[0].xcId"
>
<el-select
filterable
remote
:remote-method="(query) => handleGetRemoteProjectListData(0, query)"
@focus="handleGetRemoteProjectListData(0, '')"
v-model="ruleForm.checkings[0].xcId"
placeholder="请选择"
>
<el-option
v-for="item in projectList0"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label-width="120px"
label="定期巡查项目"
prop="checkings[1].xcId"
>
<el-select
filterable
remote
:remote-method="(query) => handleGetRemoteProjectListData(1, query)"
@focus="handleGetRemoteProjectListData(1, '')"
v-model="ruleForm.checkings[1].xcId"
placeholder="请选择"
>
<el-option
v-for="item in projectList1"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label-width="120px"
label="特别巡查项目"
prop="checkings[2].xcId"
>
<el-select
filterable
remote
:remote-method="(query) => handleGetRemoteProjectListData(2, query)"
@focus="handleGetRemoteProjectListData(2, '')"
v-model="ruleForm.checkings[2].xcId"
placeholder="请选择"
>
<el-option
v-for="item in projectList2"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="resetForm">取 消</el-button>
<el-button size="mini" type="primary" @click="submitForm"
>保存</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
import { getDikeProjectList, postProjectChecking } from "@/api/dike";
import { postDFInspectionProjectList } from "@/api/management";
export default {
data() {
return {
dialogVisible: false,
pageData: {
pageNum: 1,
pageSize: 10,
total: 0,
},
searchInput: "",
dikeTypeList: [
{
label: "全部",
value: "",
},
], // 水闸类型列表
dikeType: "",
tableData: [],
ruleForm: {
dikeCode: "",
checkings: [
{
type: 0,
label: "日常检查",
xcId: "",
},
{
type: 1,
label: "定期检查",
xcId: "",
},
{
type: 2,
label: "特别检查",
xcId: "",
},
],
},
projectList0: [], // 对应type===0的日常巡查项目
projectList1: [], // 对应type===1的日常巡查项目
projectList2: [], // 对应type===2的日常巡查项目
rules: {
["checkings[0].xcId"]: [
{ required: true, message: "请选择", trigger: "change" },
],
["checkings[1].xcId"]: [
{ required: true, message: "请选择", trigger: "change" },
],
["checkings[2].xcId"]: [
{ required: true, message: "请选择", trigger: "change" },
],
},
};
},
created() {
this.getDicts("embankment_type").then((response) => {
this.dikeTypeList = response.data;
});
},
mounted() {
this.getTableData();
},
methods: {
// 获取列表信息
getTableData() {
getDikeProjectList({
pageNum: this.pageData.pageNum,
pageSize: this.pageData.pageSize,
data: {
dikeType: this.dikeType || "",
dikeName: this.searchInput || "",
},
}).then((res) => {
if (res) {
this.tableData = res.records;
this.pageData.total = res.total;
}
});
},
// 重置搜索条件
resetSearch() {
this.searchInput = "";
this.dikeType = "";
this.getTableData();
},
handleGoPlan(row) {
this.$router.push({
path: "inspectionPlan",
query: {
dikeCode: row.dikeCode,
dikeName: row.dikeName,
},
});
},
handleGoRecord(row) {
this.$router.push({
path: "inspectionRecords",
query: {
dikeCode: row.dikeCode,
dikeName: row.dikeName,
},
});
},
// 请求项目列表
initProjectList(type, query) {
postDFInspectionProjectList({
data: {
timeView: {
timeField: "create_time",
},
type,
},
cv: {
name: "name",
type: "like",
value: query,
},
pageSize: 20,
pageNum: 1,
}).then((res) => {
if (res) {
this[`projectList${type}`] = res.records;
}
});
},
// 请求项目列表数据
handleGetRemoteProjectListData(type, query) {
this.initProjectList(type, query);
},
// 查看详情
handleCheck(row) {
// this.initProjectList();
// this.dialogVisible = true;
// this.ruleForm.dikeCode = row.dikeCode;
},
resetForm() {
this.$refs.ruleForm.resetFields();
this.dialogVisible = false;
},
submitForm() {
console.log("表单 >>> ", this.ruleForm);
this.$refs.ruleForm.validate((valid) => {
if (valid) {
postProjectChecking(this.ruleForm).then((res) => {
console.log("res >>>>> ", res);
if (res?.success) {
this.$message.success("配置成功");
this.dialogVisible = false;
}
});
}
});
},
},
};
</script>
<style scoped lang="scss">
.patrol-manage-page {
width: 100%;
min-height: calc(100vh - 56px);
padding-left: 24px;
.top-title {
height: 40px;
background-color: white;
display: flex;
padding-left: 16px;
align-items: center;
font-weight: 600;
}
.table-box {
width: 100%;
min-height: calc(100vh - 56px - 64px);
margin-top: 24px;
padding: 16px;
background-color: white;
.top-search {
margin-bottom: 8px;
.search-input {
width: 202px;
margin-right: 10px;
}
}
.table {
height: calc(680px - 34px);
}
}
}
</style>

362
src/views/sluice/runManage/waterRainReport/testReportManage/index.vue
View File

@ -0,0 +1,362 @@
<!-- 水雨情测报页面 -->
<template>
<div class="patrol-manage-page">
<div class="top-title">水雨情测报</div>
<div class="table-box">
<div class="top-search">
<span>起/终点所在地：</span>
<el-select v-model="dikeType" placeholder="请选择">
<!-- <el-option
v-for="item in dikeTypeList"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
>
</el-option> -->
</el-select>
<span> - </span>
<el-select v-model="dikeType" placeholder="请选择">
<!-- <el-option
v-for="item in dikeTypeList"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
>
</el-option> -->
</el-select>
<span class="ml-12">水闸类型：</span>
<el-select v-model="dikeType" placeholder="请选择">
<el-option
v-for="item in dikeTypeList"
:key="item.dictValue"
:label="item.dictLabel"
:value="item.dictValue"
>
</el-option>
</el-select>
<el-button
class="!ml-10"
type="success"
@click="getTableData(searchInput)"
>搜索</el-button
>
<el-button @click="resetSearch()">重置</el-button>
</div>
<el-table class="mt-16" height="625" :data="tableData" border>
<el-table-column type="index" align="center" label="序号" width="80" />
<el-table-column prop="dikeName" align="center" label="水闸名称" />
<!-- <el-table-column prop="dikeCode" align="center" label="水闸代码" /> -->
<el-table-column prop="dikeLength" align="center" label="水闸长度" />
<el-table-column prop="dikeType" align="center" label="水闸型式" />
<el-table-column prop="project" align="center" label="工程任务" />
<el-table-column prop="waterHeight" align="center" label="水位高度" />
<el-table-column prop="rainValue" align="center" label="雨量监测" />
<el-table-column prop="operate" align="center" label="操作">
<template slot-scope="scope">
<el-button @click="handleCheck(scope.row)" type="text" size="small"
>查看</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
background
class="pagination"
style="margin-top: 16px; margin-right: 16px; float: right"
:current-page="pageData.pageNum"
:page-sizes="pageData.pageSizes"
layout="total, prev, pager, next, sizes, jumper"
:total="pageData.total"
@size-change="getTableData()"
>
</el-pagination>
</div>
<!-- 弹窗 -->
<el-dialog
title="巡查项目配置"
@close="dialogVisible = false"
:visible.sync="dialogVisible"
width="520px"
>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="100px"
>
<el-form-item
label-width="120px"
label="日常巡查项目"
prop="checkings[0].xcId"
>
<el-select
filterable
remote
:remote-method="(query) => handleGetRemoteProjectListData(0, query)"
@focus="handleGetRemoteProjectListData(0, '')"
v-model="ruleForm.checkings[0].xcId"
placeholder="请选择"
>
<el-option
v-for="item in projectList0"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label-width="120px"
label="定期巡查项目"
prop="checkings[1].xcId"
>
<el-select
filterable
remote
:remote-method="(query) => handleGetRemoteProjectListData(1, query)"
@focus="handleGetRemoteProjectListData(1, '')"
v-model="ruleForm.checkings[1].xcId"
placeholder="请选择"
>
<el-option
v-for="item in projectList1"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item
label-width="120px"
label="特别巡查项目"
prop="checkings[2].xcId"
>
<el-select
filterable
remote
:remote-method="(query) => handleGetRemoteProjectListData(2, query)"
@focus="handleGetRemoteProjectListData(2, '')"
v-model="ruleForm.checkings[2].xcId"
placeholder="请选择"
>
<el-option
v-for="item in projectList2"
:label="item.name"
:value="item.id"
:key="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="resetForm">取 消</el-button>
<el-button size="mini" type="primary" @click="submitForm"
>保存</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
import { getDikeProjectList, postProjectChecking } from "@/api/dike";
import { postDFInspectionProjectList } from "@/api/management";
export default {
data() {
return {
dialogVisible: false,
pageData: {
pageNum: 1,
pageSize: 10,
total: 0,
},
searchInput: "",
dikeTypeList: [
{
label: "全部",
value: "",
},
], // 水闸类型列表
dikeType: "",
tableData: [],
ruleForm: {
dikeCode: "",
checkings: [
{
type: 0,
label: "日常检查",
xcId: "",
},
{
type: 1,
label: "定期检查",
xcId: "",
},
{
type: 2,
label: "特别检查",
xcId: "",
},
],
},
projectList0: [], // 对应type===0的日常巡查项目
projectList1: [], // 对应type===1的日常巡查项目
projectList2: [], // 对应type===2的日常巡查项目
rules: {
["checkings[0].xcId"]: [
{ required: true, message: "请选择", trigger: "change" },
],
["checkings[1].xcId"]: [
{ required: true, message: "请选择", trigger: "change" },
],
["checkings[2].xcId"]: [
{ required: true, message: "请选择", trigger: "change" },
],
},
};
},
created() {
this.getDicts("embankment_type").then((response) => {
this.dikeTypeList = response.data;
});
},
mounted() {
this.getTableData();
},
methods: {
// 获取列表信息
getTableData() {
getDikeProjectList({
pageNum: this.pageData.pageNum,
pageSize: this.pageData.pageSize,
data: {
dikeType: this.dikeType || "",
dikeName: this.searchInput || "",
},
}).then((res) => {
if (res) {
this.tableData = res.records;
this.pageData.total = res.total;
}
});
},
// 重置搜索条件
resetSearch() {
this.searchInput = "";
this.dikeType = "";
this.getTableData();
},
handleGoPlan(row) {
this.$router.push({
path: "inspectionPlan",
query: {
dikeCode: row.dikeCode,
dikeName: row.dikeName,
},
});
},
handleGoRecord(row) {
this.$router.push({
path: "inspectionRecords",
query: {
dikeCode: row.dikeCode,
dikeName: row.dikeName,
},
});
},
// 请求项目列表
initProjectList(type, query) {
postDFInspectionProjectList({
data: {
timeView: {
timeField: "create_time",
},
type,
},
cv: {
name: "name",
type: "like",
value: query,
},
pageSize: 20,
pageNum: 1,
}).then((res) => {
if (res) {
this[`projectList${type}`] = res.records;
}
});
},
// 请求项目列表数据
handleGetRemoteProjectListData(type, query) {
this.initProjectList(type, query);
},
// 配置项目
handleCheck(row) {
// this.initProjectList();
// this.dialogVisible = true;
// this.ruleForm.dikeCode = row.dikeCode;
this.$router.push({
path: "testReportDetails",
query: {
id: row.id,
},
});
},
resetForm() {
this.$refs.ruleForm.resetFields();
this.dialogVisible = false;
},
submitForm() {
console.log("表单 >>> ", this.ruleForm);
this.$refs.ruleForm.validate((valid) => {
if (valid) {
postProjectChecking(this.ruleForm).then((res) => {
console.log("res >>>>> ", res);
if (res?.success) {
this.$message.success("配置成功");
this.dialogVisible = false;
}
});
}
});
},
},
};
</script>
<style scoped lang="scss">
.patrol-manage-page {
width: 100%;
min-height: calc(100vh - 56px);
padding-left: 24px;
.top-title {
height: 40px;
background-color: white;
display: flex;
padding-left: 16px;
align-items: center;
font-weight: 600;
}
.table-box {
width: 100%;
min-height: calc(100vh - 56px - 64px);
margin-top: 24px;
padding: 16px;
background-color: white;
.top-search {
margin-bottom: 8px;
.search-input {
width: 202px;
margin-right: 10px;
}
}
.table {
height: calc(680px - 34px);
}
}
}
</style>
Write Preview
Loading…
Cancel
Save