gxwebsoft/jczxw-java
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

江河模块修改

Browse Source
This commit is contained in:
shixiaoman
2021-12-02 12:25:32 +08:00
parent 0c9e147c1c
commit 113dabeb89
11 changed files with 840 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/api/ecology/river-statis.js
View File

@@ -21,18 +21,32 @@ const listWaterSiteYoy = function (data) {
const listWaterSiteMonthTotal = function (data) {
return axios.post("/waterFunctionArea/riverStatic/waterSiteMonthTotal",data)
}
//水质达标统计
//单月水质达标统计
const listMonthWaterQualitySandard = function (data) {
return axios.post("/waterFunctionArea/riverStatic/monthWaterQualitySandard",data)
}
//水质综合指数统计
//平均水质达标统计
const listAvgWaterQualitySandard = function (data) {
return axios.post("/waterFunctionArea/riverStatic/avgWaterQualitySandard",data)
}
//单月水质综合指数统计
const listMonthCompositeIndex = function (data) {
return axios.post("/waterFunctionArea/riverStatic/monthCompositeIndex",data)
}
//单月水质综合指数统计
const listAvgCompositeIndex = function (data) {
return axios.post("/waterFunctionArea/riverStatic/avgCompositeIndex",data)
}
const listTargetInfo = function () {
return axios.get("/waterFunctionArea/riverWaterEvaluationStandard",{})
}
export {
autonomyWaterFunctionTotalUrl,
nationalWaterFunctionTotalUrl,
@@ -41,6 +55,8 @@ export {
listWaterSiteYoy,
listWaterSiteMonthTotal,
listMonthWaterQualitySandard,
listMonthCompositeIndex
listMonthCompositeIndex,
listTargetInfo,
listAvgCompositeIndex,
listAvgWaterQualitySandard
}

52
src/views/water/river/statistic/avg-index.vue
View File

@@ -7,8 +7,28 @@
:wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
<a-row>
<a-form-item label="断面名称">
<a-select v-model:value="where.name" allowClear showSearch>
<a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
<a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
<a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
{{ item.sectionName }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="河段名称">
<a-select v-model:value="where.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
<a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="水系名称">
<a-select v-model:value="where.waterSystem" placeholder="请选择水系名称" allowClear showSearch>
<a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="指标名称">
<a-select allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
<a-select-option v-for="item in targetInfoList" :key="item" :value="item">
{{ item }}
</a-select-option>
</a-select>
</a-form-item>
@@ -42,7 +62,8 @@
<script>
import {
listMonthCompositeIndex
listAvgCompositeIndex,
listTargetInfo,
} from "@/api/ecology/river-statis";
import {
listInfo
@@ -103,14 +124,35 @@
sectionInfo: {},
loading: false,
rules: {},
waterBodyList: [],
waterSystemList: [],
targetInfo:{},
targetInfoList:[],
};
},
created() {
listInfo().then((res) => {
if (res.data.code == 0) {
console.log(res.data.data)
this.visibleWater = true;
this.sectionInfo = res.data.data
res.data.data.forEach((m) => {
this.waterSystemList.push(m.waterBody);
this.waterBodyList.push(m.riverSystem);
})
this.waterSystemList = [...new Set(this.waterSystemList)];
this.waterBodyList = [...new Set(this.waterBodyList)];
} else {
this.$message.error(res.data.msg);
}
}),
listTargetInfo().then((res) => {
if (res.data.code == 0) {
console.log(res.data.data)
this.targetInfo = res.data.data
res.data.data.forEach((m) => {
this.targetInfoList.push(m.indicatorName);
})
this.targetInfoList = [...new Set(this.targetInfoList)];
} else {
this.$message.error(res.data.msg);
}
@@ -121,7 +163,7 @@
reload() {
this.loading=true;
this.momData = [];
listMonthCompositeIndex(this.where).then((res) => {
listAvgCompositeIndex(this.where).then((res) => {
console.log(res.data.data);
if (res.data.code == 0) {
this.$message.success(res.data.msg);

52
src/views/water/river/statistic/avg-standard.vue
View File

@@ -7,8 +7,28 @@
:wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
<a-row>
<a-form-item label="断面名称">
<a-select v-model:value="where.name" allowClear showSearch>
<a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
<a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
<a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
{{ item.sectionName }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="河段名称">
<a-select v-model:value="where.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
<a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="水系名称">
<a-select v-model:value="where.waterSystem" placeholder="请选择水系名称" allowClear showSearch>
<a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="指标名称">
<a-select allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
<a-select-option v-for="item in targetInfoList" :key="item" :value="item">
{{ item }}
</a-select-option>
</a-select>
</a-form-item>
@@ -48,7 +68,8 @@
<script>
import {
listMonthWaterQualitySandard
listAvgWaterQualitySandard,
listTargetInfo,
} from "@/api/ecology/river-statis";
import {
listInfo
@@ -111,14 +132,35 @@
sectionInfo: {},
loading: false,
rules: {},
waterBodyList: [],
waterSystemList: [],
targetInfo:{},
targetInfoList:[],
};
},
created() {
listInfo().then((res) => {
if (res.data.code == 0) {
console.log(res.data.data)
this.visibleWater = true;
this.sectionInfo = res.data.data
res.data.data.forEach((m) => {
this.waterSystemList.push(m.waterBody);
this.waterBodyList.push(m.riverSystem);
})
this.waterSystemList = [...new Set(this.waterSystemList)];
this.waterBodyList = [...new Set(this.waterBodyList)];
} else {
this.$message.error(res.data.msg);
}
}),
listTargetInfo().then((res) => {
if (res.data.code == 0) {
console.log(res.data.data)
this.targetInfo = res.data.data
res.data.data.forEach((m) => {
this.targetInfoList.push(m.indicatorName);
})
this.targetInfoList = [...new Set(this.targetInfoList)];
} else {
this.$message.error(res.data.msg);
}
@@ -129,7 +171,7 @@
reload() {
this.loading = true;
this.momData = [];
listMonthWaterQualitySandard(this.where).then((res) => {
listAvgWaterQualitySandard(this.where).then((res) => {
console.log(res.data.data);
if (res.data.code == 0) {
this.$message.success(res.data.msg);

60
src/views/water/river/statistic/base-index.vue
View File

@@ -7,8 +7,28 @@
:wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
<a-row>
<a-form-item label="断面名称">
<a-select v-model:value="where.name" allowClear showSearch>
<a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
<a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
<a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
{{ item.sectionName }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="河段名称">
<a-select v-model:value="where.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
<a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="水系名称">
<a-select v-model:value="where.waterSystem" placeholder="请选择水系名称" allowClear showSearch>
<a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="指标名称">
<a-select allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
<a-select-option v-for="item in targetInfoList" :key="item" :value="item">
{{ item }}
</a-select-option>
</a-select>
</a-form-item>
@@ -18,9 +38,12 @@
<a-form-item label="月份:">
<a-date-picker valueFormat="MM" v-model:value="where.month"></a-date-picker>
</a-form-item> -->
<a-form-item label="查询时间:">
<a-form-item label="开始时间:">
<a-month-picker v-model:value="where.startTime" :disabled-date="disabledDate" />
</a-form-item>
<a-form-item label="结束时间:">
<a-month-picker v-model:value="where.endTime" :disabled-date="disabledDate" />
</a-form-item>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space>
@@ -45,7 +68,8 @@
<script>
import {
listMonthCompositeIndex
listMonthCompositeIndex,
listTargetInfo,
} from "@/api/ecology/river-statis";
import {
listInfo
@@ -70,6 +94,11 @@
dataIndex: 'orderBy',
key: 'orderBy',
},
{
title: '采样时间',
dataIndex: 'monitorTime',
key: 'monitorTime',
},
{
title: "水质综合指数",
children: [{
@@ -106,14 +135,35 @@
sectionInfo: {},
loading: false,
rules: {},
waterBodyList: [],
waterSystemList: [],
targetInfo:{},
targetInfoList:[],
};
},
created() {
listInfo().then((res) => {
if (res.data.code == 0) {
console.log(res.data.data)
this.visibleWater = true;
this.sectionInfo = res.data.data
res.data.data.forEach((m) => {
this.waterSystemList.push(m.waterBody);
this.waterBodyList.push(m.riverSystem);
})
this.waterSystemList = [...new Set(this.waterSystemList)];
this.waterBodyList = [...new Set(this.waterBodyList)];
} else {
this.$message.error(res.data.msg);
}
}),
listTargetInfo().then((res) => {
if (res.data.code == 0) {
console.log(res.data.data)
this.targetInfo = res.data.data
res.data.data.forEach((m) => {
this.targetInfoList.push(m.indicatorName);
})
this.targetInfoList = [...new Set(this.targetInfoList)];
} else {
this.$message.error(res.data.msg);
}

60
src/views/water/river/statistic/base-standard.vue
View File

@@ -7,8 +7,28 @@
:wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
<a-row>
<a-form-item label="断面名称">
<a-select v-model:value="where.name" allowClear showSearch>
<a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
<a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
<a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
{{ item.sectionName }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="河段名称">
<a-select v-model:value="where.riverLakeLibrary" placeholder="请选择河段名称" allowClear showSearch>
<a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="水系名称">
<a-select v-model:value="where.waterSystem" placeholder="请选择水系名称" allowClear showSearch>
<a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="指标名称">
<a-select allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
<a-select-option v-for="item in targetInfoList" :key="item" :value="item">
{{ item }}
</a-select-option>
</a-select>
</a-form-item>
@@ -18,9 +38,12 @@
<a-form-item label="月份:">
<a-date-picker valueFormat="MM" v-model:value="where.month"></a-date-picker>
</a-form-item> -->
<a-form-item label="查询时间:">
<a-form-item label="开始时间:">
<a-month-picker v-model:value="where.startTime" :disabled-date="disabledDate" />
</a-form-item>
<a-form-item label="结束时间:">
<a-month-picker v-model:value="where.endTime" :disabled-date="disabledDate" />
</a-form-item>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space>
@@ -45,7 +68,8 @@
<script>
import {
listMonthWaterQualitySandard
listMonthWaterQualitySandard,
listTargetInfo,
} from "@/api/ecology/river-statis";
import {
listInfo
@@ -80,6 +104,11 @@
dataIndex: 'waterTarget',
key: 'waterTarget',
},
{
title: '采样时间',
dataIndex: 'monitorTime',
key: 'monitorTime',
},
{
title: '水质类别',
dataIndex: 'waterQualityCategory',
@@ -108,14 +137,35 @@
sectionInfo: {},
loading: false,
rules: {},
waterBodyList: [],
waterSystemList: [],
targetInfo:{},
targetInfoList:[],
};
},
created() {
listInfo().then((res) => {
if (res.data.code == 0) {
console.log(res.data.data)
this.visibleWater = true;
this.sectionInfo = res.data.data
res.data.data.forEach((m) => {
this.waterSystemList.push(m.waterBody);
this.waterBodyList.push(m.riverSystem);
})
this.waterSystemList = [...new Set(this.waterSystemList)];
this.waterBodyList = [...new Set(this.waterBodyList)];
} else {
this.$message.error(res.data.msg);
}
}),
listTargetInfo().then((res) => {
if (res.data.code == 0) {
console.log(res.data.data)
this.targetInfo = res.data.data
res.data.data.forEach((m) => {
this.targetInfoList.push(m.indicatorName);
})
this.targetInfoList = [...new Set(this.targetInfoList)];
} else {
this.$message.error(res.data.msg);
}

43
src/views/water/river/statistic/base.vue
View File

@@ -42,8 +42,28 @@
<a-date-picker valueFormat="YYYY-MM-DD 23:59:59" v-model:value="where.timeEnd"></a-date-picker>
</a-form-item>
<a-form-item label="断面名称">
<a-select v-model:value="where.sectionName" allowClear showSearch style="width: 150px;">
<a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
<a-select allow-clear mode="multiple" placeholder="请选择断面名称" v-model:value="where.name">
<a-select-option v-for="item in sectionInfo" :key="item.sectionName" :value="item.sectionName">
{{ item.sectionName }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="河段名称">
<a-select v-model:value="where.riverLakeLibrary" allowClear showSearch>
<a-select-option v-for="item in waterSystemList" :key="item">{{ item }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="水系名称">
<a-select v-model:value="where.waterSystem" allowClear showSearch>
<a-select-option v-for="item in waterBodyList" :key="item">{{ item }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="指标名称">
<a-select allow-clear mode="multiple" placeholder="请选择指标名称" v-model:value="where.targetName">
<a-select-option v-for="item in targetInfoList" :key="item" :value="item">
{{ item }}
</a-select-option>
</a-select>
</a-form-item>
@@ -69,6 +89,9 @@
getRiverBill,
pageRiverUrl
} from "@/api/ecology/river";
import {
listTargetInfo,
} from "@/api/ecology/river-statis";
import {
listInfo
} from "@/api/ecology/water/river-plcae";
@@ -104,6 +127,10 @@
sectionInfo: {},
loading: false,
rules: {},
waterBodyList: [],
waterSystemList: [],
targetInfo:{},
targetInfoList:[],
};
},
mounted() {
@@ -126,6 +153,18 @@
} else {
this.$message.error(res.data.msg);
}
}),
listTargetInfo().then((res) => {
if (res.data.code == 0) {
console.log(res.data.data)
this.targetInfo = res.data.data
res.data.data.forEach((m) => {
this.targetInfoList.push(m.indicatorName);
})
this.targetInfoList = [...new Set(this.targetInfoList)];
} else {
this.$message.error(res.data.msg);
}
})
},
methods: {

43
src/views/water/river/statistic/index.vue
View File

@@ -7,13 +7,13 @@
<a-tab-pane key="base" tab="数据总览">
<base-statistic></base-statistic>
</a-tab-pane>
<a-tab-pane tab="当月水质达标" key="base1">
<a-tab-pane tab="单月水质达标" key="base1">
<month-standard ></month-standard>
</a-tab-pane>
<a-tab-pane tab="平均水质达标" key="base2">
<avg-standard></avg-standard>
</a-tab-pane>
<a-tab-pane tab="当月综合指数" key="base3">
<a-tab-pane tab="单月综合指数" key="base3">
<month-index ></month-index>
</a-tab-pane>
<a-tab-pane tab="平均水质指数" key="base4">
@@ -24,11 +24,33 @@
<a-tab-pane tab="水功能区" key="ccb">
<a-tabs v-model:activeWater="activeWater">
<a-tab-pane tab="自治区级水功能" key="water1">
<auto-statis></auto-statis>
<a-tabs v-model:autoWater="autoWater">
<a-tab-pane tab="自治区级水功能统计" key="auto1">
<auto-statis></auto-statis>
</a-tab-pane>
<a-tab-pane tab="自治区水功能达标率" key="auto2">
<auto-standard></auto-standard>
</a-tab-pane>
<a-tab-pane tab="自治区水功能同比/环比" key="auto3">
<auto-yoy></auto-yoy>
</a-tab-pane>
</a-tabs>
</a-tab-pane>
<a-tab-pane tab="国家级水功能" key="water2">
<national-statis></national-statis>
<a-tabs v-model:nationalWater="nationalWater">
<a-tab-pane tab="国家级水功能统计" key="national">
<national-statis></national-statis>
</a-tab-pane>
<a-tab-pane tab="国家级水功能达标率" key="national2">
<national-standard></national-standard>
</a-tab-pane>
<a-tab-pane tab="国家级水功能同比/环比" key="national3">
<national-yoy></national-yoy>
</a-tab-pane>
</a-tabs>
</a-tab-pane>
</a-tabs>
</a-tab-pane>
<a-tab-pane tab="水站" key="ccd">
@@ -57,6 +79,11 @@
import AvgStandard from "./avg-standard.vue";
import MonthIndex from "./base-index.vue";
import AvgIndex from "./avg-index.vue";
import AutoStandard from "../../water-function-area/statistic/auto-standard.vue";
import AutoYoy from "../../water-function-area/statistic/auto-yoy.vue";
import NationalStandard from "../../water-function-area/statistic/national-standard.vue";
import NationalYoy from "../../water-function-area/statistic/national-yoy.vue";
export default {
name: 'StatisticAirIndex',
components: {
@@ -69,13 +96,19 @@
AvgStandard,
MonthIndex,
AvgIndex,
AutoStandard,
AutoYoy,
NationalStandard,
NationalYoy,
},
data() {
return {
activeKey: 'cca',
active: 'base',
activeWater: 'water1',
activeSite:'site1'
activeSite:'site1',
autoWater:'auto1',
nationalWater:'national'
};
},

134
src/views/water/water-function-area/statistic/auto-standard.vue Normal file
View File

@@ -0,0 +1,134 @@
<!-- 江河水查看数据页面-->
<template>
<div class="ele-body">
<a-card :bordered="false">
<!-- 搜索表单 -->
<a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
<a-row>
<a-form-item label="断面名称">
<a-select v-model:value="where.name" allowClear showSearch>
<a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="起始日期:">
<a-date-picker valueFormat="YYYY-MM-DD" v-model:value="where.startTime"></a-date-picker>
</a-form-item>
<a-form-item label="结束日期:">
<a-date-picker valueFormat="YYYY-MM-DD" v-model:value="where.endTime"></a-date-picker>
</a-form-item>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space>
<a-button type="primary" @click="reload">查询</a-button>
<a-button @click="reset">重置</a-button>
<a-button @click="exportFile">导出Excel</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
<!-- 表格 -->
<a-spin :spinning="loading">
<ele-pro-table ref="table" :datasource="url" :columns="columns" :where="where"
:scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
</ele-pro-table>
</a-spin>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
import {
autonomyWaterFunctionTotalUrl,
} from "@/api/ecology/river-statis";
import {
listInfo
} from "@/api/ecology/water/river-autonomous";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import {
tableColumns
} from "./colums";
import XLSX from "xlsx";
export default {
name: "RiverCollectWater",
components: {},
data() {
return {
data: [],
locale,
datasource: {},
// 表格数据接口
url: autonomyWaterFunctionTotalUrl,
selection: [],
tableColumns,
// 表格列配置
columns: [
...tableColumns,
],
// 表格搜索条件
where: {},
sectionInfo: {},
loading: false,
rules: {},
};
},
mounted() {
this.loading = true;
this.$refs.table.reload({
where: this.where,
});
this.loading = false;
},
created() {
listInfo().then((res) => {
if (res.data.code == 0) {
console.log(res.data.data)
this.visibleWater = true;
this.sectionInfo = res.data.data
} else {
this.$message.error(res.data.msg);
}
})
},
methods: {
/* 刷新表格 */
reload() {
this.loading = true;
console.log(this.where);
this.$refs.table.reload({
where: this.where,
});
console.log(this.url);
this.loading = false;
},
/* 重置搜索 */
reset() {
this.where = {};
this.reload();
},
/* 导出 */
exportFile() {
const columns = this.columns.filter(item => item.dataIndex);
const arr = [];
const th = columns.map((item) => item.title);
arr.push(th);
this.data.forEach((d) => {
const td = columns.map((item) => d[item.dataIndex]);
arr.push(td);
});
let sheet = XLSX.utils.aoa_to_sheet(arr);
this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
}
},
};
</script>
<style scoped lang="less">
</style>

134
src/views/water/water-function-area/statistic/auto-yoy.vue Normal file
View File

@@ -0,0 +1,134 @@
<!-- 江河水查看数据页面-->
<template>
<div class="ele-body">
<a-card :bordered="false">
<!-- 搜索表单 -->
<a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
<a-row>
<a-form-item label="断面名称">
<a-select v-model:value="where.name" allowClear showSearch>
<a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="起始日期:">
<a-date-picker valueFormat="YYYY-MM-DD" v-model:value="where.startTime"></a-date-picker>
</a-form-item>
<a-form-item label="结束日期:">
<a-date-picker valueFormat="YYYY-MM-DD" v-model:value="where.endTime"></a-date-picker>
</a-form-item>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space>
<a-button type="primary" @click="reload">查询</a-button>
<a-button @click="reset">重置</a-button>
<a-button @click="exportFile">导出Excel</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
<!-- 表格 -->
<a-spin :spinning="loading">
<ele-pro-table ref="table" :datasource="url" :columns="columns" :where="where"
:scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
</ele-pro-table>
</a-spin>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
import {
autonomyWaterFunctionTotalUrl,
} from "@/api/ecology/river-statis";
import {
listInfo
} from "@/api/ecology/water/river-autonomous";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import {
tableColumns
} from "./colums";
import XLSX from "xlsx";
export default {
name: "RiverCollectWater",
components: {},
data() {
return {
data: [],
locale,
datasource: {},
// 表格数据接口
url: autonomyWaterFunctionTotalUrl,
selection: [],
tableColumns,
// 表格列配置
columns: [
...tableColumns,
],
// 表格搜索条件
where: {},
sectionInfo: {},
loading: false,
rules: {},
};
},
mounted() {
this.loading = true;
this.$refs.table.reload({
where: this.where,
});
this.loading = false;
},
created() {
listInfo().then((res) => {
if (res.data.code == 0) {
console.log(res.data.data)
this.visibleWater = true;
this.sectionInfo = res.data.data
} else {
this.$message.error(res.data.msg);
}
})
},
methods: {
/* 刷新表格 */
reload() {
this.loading = true;
console.log(this.where);
this.$refs.table.reload({
where: this.where,
});
console.log(this.url);
this.loading = false;
},
/* 重置搜索 */
reset() {
this.where = {};
this.reload();
},
/* 导出 */
exportFile() {
const columns = this.columns.filter(item => item.dataIndex);
const arr = [];
const th = columns.map((item) => item.title);
arr.push(th);
this.data.forEach((d) => {
const td = columns.map((item) => d[item.dataIndex]);
arr.push(td);
});
let sheet = XLSX.utils.aoa_to_sheet(arr);
this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
}
},
};
</script>
<style scoped lang="less">
</style>

134
src/views/water/water-function-area/statistic/national-standard.vue Normal file
View File

@@ -0,0 +1,134 @@
<!-- 江河水查看数据页面-->
<template>
<div class="ele-body">
<a-card :bordered="false">
<!-- 搜索表单 -->
<a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
<a-row>
<a-form-item label="断面名称">
<a-select v-model:value="where.name" allowClear showSearch>
<a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="起始日期:">
<a-date-picker valueFormat="YYYY-MM-DD" v-model:value="where.startTime"></a-date-picker>
</a-form-item>
<a-form-item label="结束日期:">
<a-date-picker valueFormat="YYYY-MM-DD" v-model:value="where.endTime"></a-date-picker>
</a-form-item>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space>
<a-button type="primary" @click="reload">查询</a-button>
<a-button @click="reset">重置</a-button>
<a-button @click="exportFile">导出Excel</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
<!-- 表格 -->
<a-spin :spinning="loading">
<ele-pro-table ref="table" :datasource="url" :columns="columns" :where="where"
:scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
</ele-pro-table>
</a-spin>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
import {
autonomyWaterFunctionTotalUrl,
} from "@/api/ecology/river-statis";
import {
listInfo
} from "@/api/ecology/water/river-autonomous";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import {
tableColumns
} from "./colums";
import XLSX from "xlsx";
export default {
name: "RiverCollectWater",
components: {},
data() {
return {
data: [],
locale,
datasource: {},
// 表格数据接口
url: autonomyWaterFunctionTotalUrl,
selection: [],
tableColumns,
// 表格列配置
columns: [
...tableColumns,
],
// 表格搜索条件
where: {},
sectionInfo: {},
loading: false,
rules: {},
};
},
mounted() {
this.loading = true;
this.$refs.table.reload({
where: this.where,
});
this.loading = false;
},
created() {
listInfo().then((res) => {
if (res.data.code == 0) {
console.log(res.data.data)
this.visibleWater = true;
this.sectionInfo = res.data.data
} else {
this.$message.error(res.data.msg);
}
})
},
methods: {
/* 刷新表格 */
reload() {
this.loading = true;
console.log(this.where);
this.$refs.table.reload({
where: this.where,
});
console.log(this.url);
this.loading = false;
},
/* 重置搜索 */
reset() {
this.where = {};
this.reload();
},
/* 导出 */
exportFile() {
const columns = this.columns.filter(item => item.dataIndex);
const arr = [];
const th = columns.map((item) => item.title);
arr.push(th);
this.data.forEach((d) => {
const td = columns.map((item) => d[item.dataIndex]);
arr.push(td);
});
let sheet = XLSX.utils.aoa_to_sheet(arr);
this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
}
},
};
</script>
<style scoped lang="less">
</style>

134
src/views/water/water-function-area/statistic/national-yoy.vue Normal file
View File

@@ -0,0 +1,134 @@
<!-- 江河水查看数据页面-->
<template>
<div class="ele-body">
<a-card :bordered="false">
<!-- 搜索表单 -->
<a-form :model="where" :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 16 }, sm: { span: 24 } }">
<a-row>
<a-form-item label="断面名称">
<a-select v-model:value="where.name" allowClear showSearch>
<a-select-option v-for="item in sectionInfo" :key="item.sectionName">{{ item.sectionName }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="起始日期:">
<a-date-picker valueFormat="YYYY-MM-DD" v-model:value="where.startTime"></a-date-picker>
</a-form-item>
<a-form-item label="结束日期:">
<a-date-picker valueFormat="YYYY-MM-DD" v-model:value="where.endTime"></a-date-picker>
</a-form-item>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space>
<a-button type="primary" @click="reload">查询</a-button>
<a-button @click="reset">重置</a-button>
<a-button @click="exportFile">导出Excel</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
<!-- 表格 -->
<a-spin :spinning="loading">
<ele-pro-table ref="table" :datasource="url" :columns="columns" :where="where"
:scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
</ele-pro-table>
</a-spin>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
import {
autonomyWaterFunctionTotalUrl,
} from "@/api/ecology/river-statis";
import {
listInfo
} from "@/api/ecology/water/river-autonomous";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import {
tableColumns
} from "./colums";
import XLSX from "xlsx";
export default {
name: "RiverCollectWater",
components: {},
data() {
return {
data: [],
locale,
datasource: {},
// 表格数据接口
url: autonomyWaterFunctionTotalUrl,
selection: [],
tableColumns,
// 表格列配置
columns: [
...tableColumns,
],
// 表格搜索条件
where: {},
sectionInfo: {},
loading: false,
rules: {},
};
},
mounted() {
this.loading = true;
this.$refs.table.reload({
where: this.where,
});
this.loading = false;
},
created() {
listInfo().then((res) => {
if (res.data.code == 0) {
console.log(res.data.data)
this.visibleWater = true;
this.sectionInfo = res.data.data
} else {
this.$message.error(res.data.msg);
}
})
},
methods: {
/* 刷新表格 */
reload() {
this.loading = true;
console.log(this.where);
this.$refs.table.reload({
where: this.where,
});
console.log(this.url);
this.loading = false;
},
/* 重置搜索 */
reset() {
this.where = {};
this.reload();
},
/* 导出 */
exportFile() {
const columns = this.columns.filter(item => item.dataIndex);
const arr = [];
const th = columns.map((item) => item.title);
arr.push(th);
this.data.forEach((d) => {
const td = columns.map((item) => d[item.dataIndex]);
arr.push(td);
});
let sheet = XLSX.utils.aoa_to_sheet(arr);
this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
}
},
};
</script>
<style scoped lang="less">
</style>