饮用水前端页面更新(参数和接口需要修改)

This commit is contained in:
710356044
2021-11-30 14:45:46 +08:00
parent c96991618b
commit 72d9573629
17 changed files with 1612 additions and 293 deletions

View File

@@ -0,0 +1,163 @@
<!-- 江河水查看数据页面-->
<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-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>
<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="momData" :columns="columns" :where="where" :scroll="{ x: 'max-content' }"
@done="(d) => (data = d.data)">
</ele-pro-table>
</a-spin>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
import {
listMonthCompositeIndex
} from "@/api/ecology/river-statis";
import {
listInfo
} from "@/api/ecology/water/river-plcae";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import XLSX from "xlsx";
export default {
name: "RiverCollectWater",
components: {},
data() {
return {
data: [],
momData: [],
datasource: {},
columns: [{
title: '断面名称',
dataIndex: 'sectionName',
key: 'sectionName',
},
{
title: '水质综合指数排名',
dataIndex: 'orderBy',
key: 'orderBy',
},
{
title: "水质综合指数",
children: [{
title: "本月综合指数",
dataIndex: "baseIndex"
},
{
title: "上月综合指数",
dataIndex: "momIndex"
},
{
title: "上年同期指数",
dataIndex: "yoyIndex"
},
]
},
{
title: "水质综合指数变化率",
children: [{
title: "上月",
dataIndex: "momRateChange"
},
{
title: "上年同期",
dataIndex: "yoyRateChange"
},
]
},
],
locale,
bill: {},
selection: [],
where: {},
sectionInfo: {},
loading: false,
rules: {},
};
},
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;
this.momData = [];
listMonthCompositeIndex(this.where).then((res) => {
console.log(res.data.data);
if (res.data.code == 0) {
this.$message.success(res.data.msg);
res.data.data.forEach((m) => {
this.momData.push(m);
})
} else {
this.$message.error(res.data.msg);
}
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>

View File

@@ -0,0 +1,168 @@
<!-- 当月水质目标-->
<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" v-model:value="where.year"></a-date-picker>
</a-form-item>
<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-month-picker v-model:value="where.startTime" :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>
<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="momData" :columns="columns" :where="where"
:scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
</ele-pro-table>
</a-spin>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
import {
listMonthWaterQualitySandard
} from "@/api/ecology/river-statis";
import {
listInfo
} from "@/api/ecology/water/river-plcae";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import XLSX from "xlsx";
export default {
name: "RiverCollectWater",
components: {},
data() {
return {
data: [],
momData: [],
datasource: {},
columns: [{
title: '断面类型',
dataIndex: 'sectionType',
key: 'sectionType',
},
{
title: '断面名称',
dataIndex: 'sectionName',
key: 'sectionName',
},
{
title: '考核城市',
dataIndex: 'city',
key: 'city',
},
{
title: '考核目标',
dataIndex: 'waterTarget',
key: 'waterTarget',
},
{
title: '水质类别',
dataIndex: 'waterQualityCategory',
key: 'waterQualityCategory',
},
{
title: '水质评价',
dataIndex: 'waterQualityEvaluate',
key: 'waterQualityEvaluate',
},
{
title: '上期水质类别',
dataIndex: 'waterQualityCategoryMom',
key: 'waterQualityCategoryMom',
},
{
title: '去年同期水质类别',
dataIndex: 'waterQualityCategoryYoy',
key: 'waterQualityCategoryYoy',
},
],
locale,
bill: {},
selection: [],
where: {},
sectionInfo: {},
loading: false,
rules: {},
};
},
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;
this.momData = [];
listMonthWaterQualitySandard(this.where).then((res) => {
console.log(res.data.data);
if (res.data.code == 0) {
this.$message.success(res.data.msg);
res.data.data.forEach((m) => {
this.momData.push(m);
})
} else {
this.$message.error(res.data.msg);
}
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>

View File

@@ -8,50 +8,7 @@
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
> >
<a-row> <a-row>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="区域等级:">
<a-select v-model:value="where.regionLevel" allowClear showSearch>
<a-select-option
v-for="(item) in regionLevelOptions"
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="测点名称:">
<a-select v-model:value="where.place" allowClear showSearch>
<a-select-option
v-for="(item) in palceOptions"
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="路段:">
<a-select v-model:value="where.road" allowClear showSearch>
<a-select-option
v-for="(item) in roadOptions"
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="城区">
<a-select v-model:value="where.area" allowClear showSearch>
<a-select-option
v-for="(item) in areaOptions"
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }"> <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space> <a-space>

View File

@@ -9,49 +9,59 @@
> >
<a-row> <a-row>
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="区域等级:"> <a-form-item label="水源类型:">
<a-select v-model:value="where.regionLevel" allowClear showSearch> <a-select v-model:value="where.waterSourceType" allowClear showSearch>
<a-select-option <a-select-option :value="'地表水'">地表水</a-select-option>
v-for="(item) in regionLevelOptions" <a-select-option :value="'地下水'">地下水</a-select-option>
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="测点名称:"> <a-form-item label="水源状态:">
<a-select v-model:value="where.place" allowClear showSearch> <a-select v-model:value="where.waterSourceType" allowClear showSearch>
<a-select-option <a-select-option :value="'在用'">在用</a-select-option>
v-for="(item) in palceOptions" <a-select-option :value="'备用'">备用</a-select-option>
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-form-item label="上报时间:">
<a-range-picker separator="~" v-model:value="reportTimeScope" />
</a-form-item>
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="路段:"> <a-form-item label="市级名称:">
<a-select v-model:value="where.road" allowClear showSearch> <a-select v-model:value="where.city" allowClear showSearch>
<a-select-option <a-select-option :value="'1'">1</a-select-option>
v-for="(item) in roadOptions" <a-select-option :value="'2'">2</a-select-option>
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="城区"> <a-form-item label="县级名称:">
<a-select v-model:value="where.area" allowClear showSearch> <a-select
<a-select-option mode="tags"
v-for="(item) in areaOptions" :size="size"
:key="item.value" placeholder="选择县级名称 "
>{{ item.label }}</a-select-option style="width: 200px"
@change="handleChange"
v-model:value="where.county"
> >
<!-- <a-select-option
v-for="item in sourceWaterName"
:key="item.value"
>{{ item.label }}
</a-select-option> -->
<a-select-option :value="'1'">1</a-select-option>
<a-select-option :value="'2'">2</a-select-option>
<a-select-option :value="'3'">3</a-select-option>
<a-select-option :value="'4'">4</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }"> <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space> <a-space>
@@ -74,18 +84,27 @@
:scroll="{ x: 'max-content' }" :scroll="{ x: 'max-content' }"
@done="(d) => (data = d.data)" @done="(d) => (data = d.data)"
> >
<template #waterCode="{text,record}"> <template #waterCode="{ text, record }">
<span> <span>
{{ {{
record.reportTime==null?text="": record.reportTime == null
record.reportTime.substr(5,2)=="01" || record.reportTime.substr(5,2) == "02" ||record.reportTime.substr(5,2) == "03" ||record.reportTime.substr(5,2)=="12" ? (text = "")
? text="K": : record.reportTime.substr(5, 2) == "01" ||
record.reportTime.substr(5,2)=="04" || record.reportTime.substr(5,2) == "05" ||record.reportTime.substr(5,2)=="10"||record.reportTime.substr(5,2)=="11" record.reportTime.substr(5, 2) == "02" ||
? text="P": record.reportTime.substr(5, 2) == "03" ||
record.reportTime.substr(5,2)=="06" || record.reportTime.substr(5,2) == "07" ||record.reportTime.substr(5,2)=="08"||record.reportTime.substr(5,2)=="09" record.reportTime.substr(5, 2) == "12"
? text="F":text="无采样时间" ? (text = "K")
: record.reportTime.substr(5, 2) == "04" ||
record.reportTime.substr(5, 2) == "05" ||
record.reportTime.substr(5, 2) == "10" ||
record.reportTime.substr(5, 2) == "11"
? (text = "P")
: record.reportTime.substr(5, 2) == "06" ||
record.reportTime.substr(5, 2) == "07" ||
record.reportTime.substr(5, 2) == "08" ||
record.reportTime.substr(5, 2) == "09"
? (text = "F")
: (text = "无采样时间")
}} }}
</span> </span>
</template> </template>
@@ -102,7 +121,6 @@ import XLSX from "xlsx";
import { import {
pageDrinkingWaterStatisticUrl, pageDrinkingWaterStatisticUrl,
// getColumnOptions // getColumnOptions
} from "@/api/ecology/drinking-water"; } from "@/api/ecology/drinking-water";
// import pageDictUrl from "@/api/ecology/drinking-water-dict" // import pageDictUrl from "@/api/ecology/drinking-water-dict"
import locale from "ant-design-vue/es/date-picker/locale/zh_CN"; import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
@@ -114,7 +132,6 @@ export default {
name: "DrinkingWaterBase", name: "DrinkingWaterBase",
components: {}, components: {},
data() { data() {
return { return {
data: [], data: [],
@@ -123,7 +140,7 @@ export default {
// 表格数据接口 // 表格数据接口
url: pageDrinkingWaterStatisticUrl, url: pageDrinkingWaterStatisticUrl,
selection: [], selection: [],
columns:[ columns: [
// { // {
// title: "水期代码", // title: "水期代码",
// dataIndex: "waterPhaseCode", // dataIndex: "waterPhaseCode",
@@ -133,9 +150,6 @@ export default {
...tableColumns, ...tableColumns,
], ],
// 表格列配置 // 表格列配置
// palceOptions: [], // palceOptions: [],
@@ -155,7 +169,7 @@ export default {
}, },
methods: { methods: {
JumpFieldClick(record, column) { JumpFieldClick(record, column) {
console.log(column.dataIndex) console.log(column.dataIndex);
}, },
/**获取下来框数据 */ /**获取下来框数据 */
@@ -195,7 +209,6 @@ export default {
// }, // },
/* 刷新表格 */ /* 刷新表格 */
reload() { reload() {
this.$refs.table.reload({ this.$refs.table.reload({
where: this.where, where: this.where,
}); });
@@ -208,9 +221,7 @@ export default {
this.reload(); this.reload();
}, },
exportFile() { exportFile() {
const columns = [ const columns = [...tableColumns];
...tableColumns,
];
const arr = []; const arr = [];
const th = columns.map((item) => item.title); const th = columns.map((item) => item.title);
arr.push(th); arr.push(th);

View File

@@ -8,50 +8,24 @@
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
> >
<a-row> <a-row>
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="区域等级:"> <a-form-item label="水源类型:">
<a-select v-model:value="where.regionLevel" allowClear showSearch> <a-select
<a-select-option v-model:value="where.waterSourceType"
v-for="(item) in regionLevelOptions" allowClear
:key="item.value" showSearch
>{{ item.label }}</a-select-option
> >
<a-select-option :value="'地表水'">地表水</a-select-option>
<a-select-option :value="'地下水'">地下水</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="测点名称:"> <a-form-item label="上报时间:">
<a-select v-model:value="where.place" allowClear showSearch> <a-range-picker separator="~" v-model:value="reportTimeScope" />
<a-select-option
v-for="(item) in palceOptions"
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select>
</a-form-item> </a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="路段:">
<a-select v-model:value="where.road" allowClear showSearch>
<a-select-option
v-for="(item) in roadOptions"
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="城区">
<a-select v-model:value="where.area" allowClear showSearch>
<a-select-option
v-for="(item) in areaOptions"
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }"> <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space> <a-space>

View File

@@ -0,0 +1,185 @@
<template>
<div class="ele-body">
<a-card :bordered="false">
<!-- 搜索表单 -->
<a-form
:model="where"
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
>
<a-row>
<a-form-item label="时间:">
<a-range-picker separator="~" v-model:value="reportTimeScope" />
</a-form-item>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="水源名称:">
<a-select
mode="tags"
:size="size"
placeholder="未选择"
style="width: 200px"
@change="handleChange"
v-model:value="where.sourceWaterName"
>
<!-- <a-select-option
v-for="item in sourceWaterName"
:key="item.value"
>{{ item.label }}
</a-select-option> -->
<a-select-option :value="'1'">1</a-select-option>
<a-select-option :value="'2'">2</a-select-option>
<a-select-option :value="'3'">3</a-select-option>
<a-select-option :value="'4'">4</a-select-option>
</a-select>
</a-form-item>
</a-col>
<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>
<!-- 表格 -->
<ele-pro-table
v-model:selection="selectionList"
ref="table"
row-key="drinkingWaterId"
:datasource="url"
:columns="columns"
:where="where"
:scroll="{ x: 'max-content' }"
@done="(d) => (data = d.data)"
>
</ele-pro-table>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
// import _ from "lodash";
import XLSX from "xlsx";
// import { pageRoadNoiseUrl, getColumnOptions } from "@/api/ecology/noise/road-sound";
import {
pageDrinkingWaterStatisticUrl,
// getColumnOptions
} from "@/api/ecology/drinking-water";
// import pageDictUrl from "@/api/ecology/drinking-water-dict"
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import { tableColumns } from "./colums";
// import moment from "moment";
// import utils from "./utils";
// const columns =tableColumns;
export default {
name: "DrinkingWaterBase",
components: {},
data() {
return {
data: [],
locale,
bill: {},
// 表格数据接口
url: pageDrinkingWaterStatisticUrl,
selection: [],
columns: [
{title: "水源名称",dataIndex: "sourceWaterName",sorter: true,},
{title: "取水量",dataIndex: "waterWithdrawal",sorter: true,},
],
// 表格列配置
// palceOptions: [],
// areaOptions: [],
// roadOptions: [],
regionLevelOptions: [],
// 表格搜索条件
where: {
checked: 1,
},
// 表格选中数据
selectionList: [],
};
},
mounted() {
// this.loadOptionData();
},
methods: {
JumpFieldClick(record, column) {
console.log(column.dataIndex);
},
/**获取下来框数据 */
// loadOptionData() {
// getColumnOptions("place").then((res) => {
// this.palceOptions = res.data.data.map((item) => {
// return {
// label: item,
// value: item,
// };
// });
// });
// getColumnOptions("area").then((res) => {
// this.areaOptions = res.data.data.map((item) => {
// return {
// label: item,
// value: item,
// };
// });
// });
// getColumnOptions("road").then((res) => {
// this.roadOptions = res.data.data.map((item) => {
// return {
// label: item,
// value: item,
// };
// });
// });
// getColumnOptions("region_level").then((res) => {
// this.regionLevelOptions = res.data.data.map((item) => {
// return {
// label: item,
// value: item,
// };
// });
// });
// },
/* 刷新表格 */
reload() {
this.$refs.table.reload({
where: this.where,
});
},
/* 重置搜索 */
reset() {
this.where = {
checked: 1,
};
this.reload();
},
exportFile() {
const columns = [...tableColumns];
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>

View File

@@ -0,0 +1,163 @@
<!-- 江河水查看数据页面-->
<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-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>
<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="momData" :columns="columns" :where="where" :scroll="{ x: 'max-content' }"
@done="(d) => (data = d.data)">
</ele-pro-table>
</a-spin>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
import {
listMonthCompositeIndex
} from "@/api/ecology/river-statis";
import {
listInfo
} from "@/api/ecology/water/river-plcae";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import XLSX from "xlsx";
export default {
name: "RiverCollectWater",
components: {},
data() {
return {
data: [],
momData: [],
datasource: {},
columns: [{
title: '断面名称',
dataIndex: 'sectionName',
key: 'sectionName',
},
{
title: '水质综合指数排名',
dataIndex: 'orderBy',
key: 'orderBy',
},
{
title: "水质综合指数",
children: [{
title: "本月综合指数",
dataIndex: "baseIndex"
},
{
title: "上月综合指数",
dataIndex: "momIndex"
},
{
title: "上年同期指数",
dataIndex: "yoyIndex"
},
]
},
{
title: "水质综合指数变化率",
children: [{
title: "上月",
dataIndex: "momRateChange"
},
{
title: "上年同期",
dataIndex: "yoyRateChange"
},
]
},
],
locale,
bill: {},
selection: [],
where: {},
sectionInfo: {},
loading: false,
rules: {},
};
},
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;
this.momData = [];
listMonthCompositeIndex(this.where).then((res) => {
console.log(res.data.data);
if (res.data.code == 0) {
this.$message.success(res.data.msg);
res.data.data.forEach((m) => {
this.momData.push(m);
})
} else {
this.$message.error(res.data.msg);
}
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>

View File

@@ -0,0 +1,168 @@
<!-- 当月水质目标-->
<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" v-model:value="where.year"></a-date-picker>
</a-form-item>
<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-month-picker v-model:value="where.startTime" :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>
<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="momData" :columns="columns" :where="where"
:scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
</ele-pro-table>
</a-spin>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
import {
listMonthWaterQualitySandard
} from "@/api/ecology/river-statis";
import {
listInfo
} from "@/api/ecology/water/river-plcae";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import XLSX from "xlsx";
export default {
name: "RiverCollectWater",
components: {},
data() {
return {
data: [],
momData: [],
datasource: {},
columns: [{
title: '断面类型',
dataIndex: 'sectionType',
key: 'sectionType',
},
{
title: '断面名称',
dataIndex: 'sectionName',
key: 'sectionName',
},
{
title: '考核城市',
dataIndex: 'city',
key: 'city',
},
{
title: '考核目标',
dataIndex: 'waterTarget',
key: 'waterTarget',
},
{
title: '水质类别',
dataIndex: 'waterQualityCategory',
key: 'waterQualityCategory',
},
{
title: '水质评价',
dataIndex: 'waterQualityEvaluate',
key: 'waterQualityEvaluate',
},
{
title: '上期水质类别',
dataIndex: 'waterQualityCategoryMom',
key: 'waterQualityCategoryMom',
},
{
title: '去年同期水质类别',
dataIndex: 'waterQualityCategoryYoy',
key: 'waterQualityCategoryYoy',
},
],
locale,
bill: {},
selection: [],
where: {},
sectionInfo: {},
loading: false,
rules: {},
};
},
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;
this.momData = [];
listMonthWaterQualitySandard(this.where).then((res) => {
console.log(res.data.data);
if (res.data.code == 0) {
this.$message.success(res.data.msg);
res.data.data.forEach((m) => {
this.momData.push(m);
})
} else {
this.$message.error(res.data.msg);
}
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>

View File

@@ -8,50 +8,59 @@
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
> >
<a-row> <a-row>
<!-- <a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="区域等级:"> <a-form-item label="水源类型:">
<a-select v-model:value="where.regionLevel" allowClear showSearch> <a-select v-model:value="where.waterSourceType" allowClear showSearch>
<a-select-option <a-select-option :value="'地表水'">地表水</a-select-option>
v-for="(item) in regionLevelOptions" <a-select-option :value="'地下水'">地下水</a-select-option>
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="测点名称:"> <a-form-item label="水源状态:">
<a-select v-model:value="where.place" allowClear showSearch> <a-select v-model:value="where.waterSourceType" allowClear showSearch>
<a-select-option <a-select-option :value="'在用'">在用</a-select-option>
v-for="(item) in palceOptions" <a-select-option :value="'备用'">备用</a-select-option>
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-form-item label="上报时间:">
<a-range-picker separator="~" v-model:value="reportTimeScope" />
</a-form-item>
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="路段:"> <a-form-item label="市级名称:">
<a-select v-model:value="where.road" allowClear showSearch> <a-select v-model:value="where.city" allowClear showSearch>
<a-select-option <a-select-option :value="'1'">1</a-select-option>
v-for="(item) in roadOptions" <a-select-option :value="'2'">2</a-select-option>
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="城区"> <a-form-item label="县级名称:">
<a-select v-model:value="where.area" allowClear showSearch> <a-select
<a-select-option mode="tags"
v-for="(item) in areaOptions" :size="size"
:key="item.value" placeholder="选择县级名称 "
>{{ item.label }}</a-select-option style="width: 200px"
@change="handleChange"
v-model:value="where.county"
> >
<!-- <a-select-option
v-for="item in sourceWaterName"
:key="item.value"
>{{ item.label }}
</a-select-option> -->
<a-select-option :value="'1'">1</a-select-option>
<a-select-option :value="'2'">2</a-select-option>
<a-select-option :value="'3'">3</a-select-option>
<a-select-option :value="'4'">4</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> --> </a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }"> <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space> <a-space>

View File

@@ -8,50 +8,22 @@
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
> >
<a-row> <a-row>
<!-- <a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="区域等级:"> <a-form-item label="水源类型:">
<a-select v-model:value="where.regionLevel" allowClear showSearch> <a-select
<a-select-option v-model:value="where.waterSourceType"
v-for="(item) in regionLevelOptions" allowClear
:key="item.value" showSearch
>{{ item.label }}</a-select-option
> >
<a-select-option :value="'地表水'">地表水</a-select-option>
<a-select-option :value="'地下水'">地下水</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="测点名称:"> <a-form-item label="上报时间:">
<a-select v-model:value="where.place" allowClear showSearch> <a-range-picker separator="~" v-model:value="reportTimeScope" />
<a-select-option
v-for="(item) in palceOptions"
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select>
</a-form-item> </a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="路段:">
<a-select v-model:value="where.road" allowClear showSearch>
<a-select-option
v-for="(item) in roadOptions"
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="城区">
<a-select v-model:value="where.area" allowClear showSearch>
<a-select-option
v-for="(item) in areaOptions"
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select>
</a-form-item>
</a-col> -->
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }"> <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space> <a-space>

View File

@@ -0,0 +1,185 @@
<template>
<div class="ele-body">
<a-card :bordered="false">
<!-- 搜索表单 -->
<a-form
:model="where"
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
>
<a-row>
<a-form-item label="时间:">
<a-range-picker separator="~" v-model:value="reportTimeScope" />
</a-form-item>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="水源名称:">
<a-select
mode="tags"
:size="size"
placeholder="未选择"
style="width: 200px"
@change="handleChange"
v-model:value="where.sourceWaterName"
>
<!-- <a-select-option
v-for="item in sourceWaterName"
:key="item.value"
>{{ item.label }}
</a-select-option> -->
<a-select-option :value="'1'">1</a-select-option>
<a-select-option :value="'2'">2</a-select-option>
<a-select-option :value="'3'">3</a-select-option>
<a-select-option :value="'4'">4</a-select-option>
</a-select>
</a-form-item>
</a-col>
<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>
<!-- 表格 -->
<ele-pro-table
v-model:selection="selectionList"
ref="table"
row-key="drinkingWaterId"
:datasource="url"
:columns="columns"
:where="where"
:scroll="{ x: 'max-content' }"
@done="(d) => (data = d.data)"
>
</ele-pro-table>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
// import _ from "lodash";
import XLSX from "xlsx";
// import { pageRoadNoiseUrl, getColumnOptions } from "@/api/ecology/noise/road-sound";
import {
pageDrinkingWaterStatisticUrl,
// getColumnOptions
} from "@/api/ecology/drinking-water";
// import pageDictUrl from "@/api/ecology/drinking-water-dict"
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import { tableColumns } from "./colums";
// import moment from "moment";
// import utils from "./utils";
// const columns =tableColumns;
export default {
name: "DrinkingWaterBase",
components: {},
data() {
return {
data: [],
locale,
bill: {},
// 表格数据接口
url: pageDrinkingWaterStatisticUrl,
selection: [],
columns: [
{title: "水源名称",dataIndex: "sourceWaterName",sorter: true,},
{title: "取水量",dataIndex: "waterWithdrawal",sorter: true,},
],
// 表格列配置
// palceOptions: [],
// areaOptions: [],
// roadOptions: [],
regionLevelOptions: [],
// 表格搜索条件
where: {
checked: 1,
},
// 表格选中数据
selectionList: [],
};
},
mounted() {
// this.loadOptionData();
},
methods: {
JumpFieldClick(record, column) {
console.log(column.dataIndex);
},
/**获取下来框数据 */
// loadOptionData() {
// getColumnOptions("place").then((res) => {
// this.palceOptions = res.data.data.map((item) => {
// return {
// label: item,
// value: item,
// };
// });
// });
// getColumnOptions("area").then((res) => {
// this.areaOptions = res.data.data.map((item) => {
// return {
// label: item,
// value: item,
// };
// });
// });
// getColumnOptions("road").then((res) => {
// this.roadOptions = res.data.data.map((item) => {
// return {
// label: item,
// value: item,
// };
// });
// });
// getColumnOptions("region_level").then((res) => {
// this.regionLevelOptions = res.data.data.map((item) => {
// return {
// label: item,
// value: item,
// };
// });
// });
// },
/* 刷新表格 */
reload() {
this.$refs.table.reload({
where: this.where,
});
},
/* 重置搜索 */
reset() {
this.where = {
checked: 1,
};
this.reload();
},
exportFile() {
const columns = [...tableColumns];
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>

View File

@@ -8,17 +8,24 @@
<base-statistic></base-statistic> <base-statistic></base-statistic>
</a-tab-pane> </a-tab-pane>
<a-tab-pane tab="报送情况说明表" key="base1"> <a-tab-pane tab="报送情况说明表" key="base1">
<!-- <function-bill ref="functionWater"></function-bill> -->
<city-appraise></city-appraise> <city-appraise></city-appraise>
</a-tab-pane> </a-tab-pane>
<!-- <a-tab-pane tab="水质类别" key="base2">
<city-water-quality></city-water-quality>
</a-tab-pane> -->
<a-tab-pane tab="取水量统计" key="base3"> <a-tab-pane tab="取水量统计" key="base3">
<!-- <city-water-quality></city-water-quality> --> <city-water-withdrawal></city-water-withdrawal>
</a-tab-pane>
<a-tab-pane tab="水质类别" key="base2">
<city-water-quality></city-water-quality>
</a-tab-pane>
<a-tab-pane tab="达标率" key="base6">
<city-month-standard></city-month-standard>
</a-tab-pane>
<a-tab-pane tab="综合指数" key="base5">
<city-avg-index></city-avg-index>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
</a-tab-pane> </a-tab-pane>
<a-tab-pane key="county" tab="县级"> <a-tab-pane key="county" tab="县级">
<a-tabs v-model:active="activeCounty"> <a-tabs v-model:active="activeCounty">
<a-tab-pane tab="监测数据报送表" key="County"> <a-tab-pane tab="监测数据报送表" key="County">
@@ -27,14 +34,21 @@
<a-tab-pane tab="报送情况说明表" key="base1"> <a-tab-pane tab="报送情况说明表" key="base1">
<county-appraise></county-appraise> <county-appraise></county-appraise>
</a-tab-pane> </a-tab-pane>
<!-- <a-tab-pane tab="水质类别" key="base2"> <a-tab-pane tab="取水量统计" key="base3">
<county-water-withdrawal></county-water-withdrawal>
</a-tab-pane>
<a-tab-pane tab="水质类别" key="base2">
<county-water-quality></county-water-quality> <county-water-quality></county-water-quality>
</a-tab-pane> --> </a-tab-pane>
<a-tab-pane tab="达标率" key="base6">
<county-month-standard></county-month-standard>
</a-tab-pane>
<a-tab-pane tab="综合指数" key="base5">
<county-avg-index></county-avg-index>
</a-tab-pane>
</a-tabs> </a-tabs>
</a-tab-pane> </a-tab-pane>
<!-- <a-tab-pane key="quarter" tab="季度报告">
<quarter-statistic></quarter-statistic>
</a-tab-pane> -->
<a-tab-pane key="village" tab="农村"> <a-tab-pane key="village" tab="农村">
<a-tabs v-model:active="activeVillage"> <a-tabs v-model:active="activeVillage">
<a-tab-pane tab="数据总览" key="village"> <a-tab-pane tab="数据总览" key="village">
@@ -46,6 +60,12 @@
<a-tab-pane tab="水质类别" key="base2"> <a-tab-pane tab="水质类别" key="base2">
<village-water-quality></village-water-quality> <village-water-quality></village-water-quality>
</a-tab-pane> </a-tab-pane>
<a-tab-pane tab="达标率" key="base6">
<village-month-standard></village-month-standard>
</a-tab-pane>
<a-tab-pane tab="综合指数" key="base5">
<village-avg-index></village-avg-index>
</a-tab-pane>
</a-tabs> </a-tabs>
</a-tab-pane> </a-tab-pane>
</a-tabs> </a-tabs>
@@ -59,15 +79,24 @@
* *
* *
*/ */
import BaseStatistic from "./cityDate.vue"; import BaseStatistic from "./cityDate.vue"
import countyData from "./countyData.vue" import countyData from "./countyData.vue"
import village from "./villageData.vue" import village from "./villageData.vue"
import cityAppraise from "./cityAppraise.vue" import cityAppraise from "./cityAppraise.vue"
import countyAppraise from "./countyAppraise.vue" import countyAppraise from "./countyAppraise.vue"
import villageAppraise from "./villageAppraise.vue" import villageAppraise from "./villageAppraise.vue"
// import cityWaterQuality from "./cityWaterQuality.vue" import cityWaterQuality from "./cityWaterQuality.vue"
// import countyWaterQuality from "./countyWaterQuality.vue" import countyWaterQuality from "./countyWaterQuality.vue"
import villageWaterQuality from "./villageWaterQuality.vue" import villageWaterQuality from "./villageWaterQuality.vue"
import cityAvgIndex from "./city-avg-index.vue"
import countyAvgIndex from "./county-avg-index.vue"
import villageAvgIndex from "./village-avg-index.vue"
import cityMonthStandard from "./city-base-standard.vue"
import countyMonthStandard from "./county-base-standard.vue"
import villageMonthStandard from "./village-base-standard.vue"
import cityWaterWithdrawal from "./cityWaterWithdrawal.vue"
import countyWaterWithdrawal from "./countyWaterWithdrawal.vue"
// import QuarterStatistic from "./quarter.vue"; // import QuarterStatistic from "./quarter.vue";
// import Compare from "./compare.vue" // import Compare from "./compare.vue"
// import AverageStatistic from "./average.vue" // import AverageStatistic from "./average.vue"
@@ -81,9 +110,17 @@
cityAppraise, cityAppraise,
countyAppraise, countyAppraise,
villageAppraise, villageAppraise,
// cityWaterQuality, cityWaterQuality,
// countyWaterQuality, countyWaterQuality,
villageWaterQuality villageWaterQuality,
cityAvgIndex,
countyAvgIndex,
villageAvgIndex,
cityMonthStandard,
countyMonthStandard,
villageMonthStandard,
cityWaterWithdrawal,
countyWaterWithdrawal
// QuarterStatistic, // QuarterStatistic,
// Compare, // Compare,
// AverageStatistic // AverageStatistic

View File

@@ -0,0 +1,163 @@
<!-- 江河水查看数据页面-->
<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-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>
<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="momData" :columns="columns" :where="where" :scroll="{ x: 'max-content' }"
@done="(d) => (data = d.data)">
</ele-pro-table>
</a-spin>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
import {
listMonthCompositeIndex
} from "@/api/ecology/river-statis";
import {
listInfo
} from "@/api/ecology/water/river-plcae";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import XLSX from "xlsx";
export default {
name: "RiverCollectWater",
components: {},
data() {
return {
data: [],
momData: [],
datasource: {},
columns: [{
title: '断面名称',
dataIndex: 'sectionName',
key: 'sectionName',
},
{
title: '水质综合指数排名',
dataIndex: 'orderBy',
key: 'orderBy',
},
{
title: "水质综合指数",
children: [{
title: "本月综合指数",
dataIndex: "baseIndex"
},
{
title: "上月综合指数",
dataIndex: "momIndex"
},
{
title: "上年同期指数",
dataIndex: "yoyIndex"
},
]
},
{
title: "水质综合指数变化率",
children: [{
title: "上月",
dataIndex: "momRateChange"
},
{
title: "上年同期",
dataIndex: "yoyRateChange"
},
]
},
],
locale,
bill: {},
selection: [],
where: {},
sectionInfo: {},
loading: false,
rules: {},
};
},
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;
this.momData = [];
listMonthCompositeIndex(this.where).then((res) => {
console.log(res.data.data);
if (res.data.code == 0) {
this.$message.success(res.data.msg);
res.data.data.forEach((m) => {
this.momData.push(m);
})
} else {
this.$message.error(res.data.msg);
}
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>

View File

@@ -0,0 +1,168 @@
<!-- 当月水质目标-->
<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" v-model:value="where.year"></a-date-picker>
</a-form-item>
<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-month-picker v-model:value="where.startTime" :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>
<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="momData" :columns="columns" :where="where"
:scroll="{ x: 'max-content' }" @done="(d) => (data = d.data)">
</ele-pro-table>
</a-spin>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
import {
listMonthWaterQualitySandard
} from "@/api/ecology/river-statis";
import {
listInfo
} from "@/api/ecology/water/river-plcae";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import XLSX from "xlsx";
export default {
name: "RiverCollectWater",
components: {},
data() {
return {
data: [],
momData: [],
datasource: {},
columns: [{
title: '断面类型',
dataIndex: 'sectionType',
key: 'sectionType',
},
{
title: '断面名称',
dataIndex: 'sectionName',
key: 'sectionName',
},
{
title: '考核城市',
dataIndex: 'city',
key: 'city',
},
{
title: '考核目标',
dataIndex: 'waterTarget',
key: 'waterTarget',
},
{
title: '水质类别',
dataIndex: 'waterQualityCategory',
key: 'waterQualityCategory',
},
{
title: '水质评价',
dataIndex: 'waterQualityEvaluate',
key: 'waterQualityEvaluate',
},
{
title: '上期水质类别',
dataIndex: 'waterQualityCategoryMom',
key: 'waterQualityCategoryMom',
},
{
title: '去年同期水质类别',
dataIndex: 'waterQualityCategoryYoy',
key: 'waterQualityCategoryYoy',
},
],
locale,
bill: {},
selection: [],
where: {},
sectionInfo: {},
loading: false,
rules: {},
};
},
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;
this.momData = [];
listMonthWaterQualitySandard(this.where).then((res) => {
console.log(res.data.data);
if (res.data.code == 0) {
this.$message.success(res.data.msg);
res.data.data.forEach((m) => {
this.momData.push(m);
})
} else {
this.$message.error(res.data.msg);
}
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>

View File

@@ -52,6 +52,24 @@
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> --> </a-col> -->
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="水源类型:">
<a-select
v-model:value="where.waterSourceType"
allowClear
showSearch
>
<a-select-option :value="'地表水'">地表水</a-select-option>
<a-select-option :value="'地下水'">地下水</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-form-item label="上报时间:">
<a-range-picker separator="~" v-model:value="reportTimeScope" />
</a-form-item>
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }"> <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space> <a-space>
@@ -74,7 +92,6 @@
:scroll="{ x: 'max-content' }" :scroll="{ x: 'max-content' }"
@done="(d) => (data = d.data)" @done="(d) => (data = d.data)"
> >
</ele-pro-table> </ele-pro-table>
</a-card> </a-card>
</div> </div>
@@ -88,7 +105,6 @@ import XLSX from "xlsx";
import { import {
pageDrinkingWaterVillageStatisticUrl, pageDrinkingWaterVillageStatisticUrl,
// getColumnOptions // getColumnOptions
} from "@/api/ecology/drinking-water-village"; } from "@/api/ecology/drinking-water-village";
// import pageDictUrl from "@/api/ecology/drinking-water-dict" // import pageDictUrl from "@/api/ecology/drinking-water-dict"
import locale from "ant-design-vue/es/date-picker/locale/zh_CN"; import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
@@ -100,7 +116,6 @@ export default {
name: "DrinkingWaterBase", name: "DrinkingWaterBase",
components: {}, components: {},
data() { data() {
return { return {
data: [], data: [],
@@ -109,24 +124,23 @@ export default {
// 表格数据接口 // 表格数据接口
url: pageDrinkingWaterVillageStatisticUrl, url: pageDrinkingWaterVillageStatisticUrl,
selection: [], selection: [],
columns:[ columns: [
{title:"城市名称",dataIndex:"city",}, { title: "城市名称", dataIndex: "city" },
{title:"水源地名称",dataIndex:"place",}, { title: "水源地名称", dataIndex: "place" },
{title:"取水量万m3",dataIndex:"waterWithdrawal",}, { title: "取水量万m3", dataIndex: "waterWithdrawal" },
{title:"超标水源地取水量",dataIndex:"",}, { title: "超标水源地取水量", dataIndex: "" },
{title:"超标项目",dataIndex:"",}, { title: "超标项目", dataIndex: "" },
{title:"水源地性质",dataIndex:"waterSourceProperty",}, { title: "水源地性质", dataIndex: "waterSourceProperty" },
], ],
// 表格列配置 // 表格列配置
// palceOptions: [], // palceOptions: [],
// areaOptions: [], // areaOptions: [],
// roadOptions: [], // roadOptions: [],
regionLevelOptions: [], regionLevelOptions: [],
reportTimeScope: [],
// 表格搜索条件 // 表格搜索条件
where: { where: {
checked: 1, checked: 1,
@@ -140,7 +154,7 @@ export default {
}, },
methods: { methods: {
JumpFieldClick(record, column) { JumpFieldClick(record, column) {
console.log(column.dataIndex) console.log(column.dataIndex);
}, },
/**获取下来框数据 */ /**获取下来框数据 */
@@ -180,7 +194,6 @@ export default {
// }, // },
/* 刷新表格 */ /* 刷新表格 */
reload() { reload() {
this.$refs.table.reload({ this.$refs.table.reload({
where: this.where, where: this.where,
}); });
@@ -193,9 +206,7 @@ export default {
this.reload(); this.reload();
}, },
exportFile() { exportFile() {
const columns = [ const columns = [...tableColumns3];
...tableColumns3,
];
const arr = []; const arr = [];
const th = columns.map((item) => item.title); const th = columns.map((item) => item.title);
arr.push(th); arr.push(th);

View File

@@ -52,6 +52,19 @@
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> --> </a-col> -->
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="水源类型:">
<a-select v-model:value="where.waterSourceType" allowClear showSearch>
<a-select-option :value="'地表水'">地表水</a-select-option>
<a-select-option :value="'地下水'">地下水</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-form-item label="上报时间:">
<a-range-picker separator="~" v-model:value="reportTimeScope" />
</a-form-item>
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }"> <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space> <a-space>
@@ -133,7 +146,7 @@ export default {
], ],
reportTimeScope: [],
// 表格列配置 // 表格列配置

View File

@@ -8,50 +8,22 @@
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }" :wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
> >
<a-row> <a-row>
<!-- <a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="区域等级:"> <a-form-item label="水源类型:">
<a-select v-model:value="where.regionLevel" allowClear showSearch> <a-select
<a-select-option v-model:value="where.waterSourceType"
v-for="(item) in regionLevelOptions" allowClear
:key="item.value" showSearch
>{{ item.label }}</a-select-option
> >
<a-select-option :value="'地表水'">地表水</a-select-option>
<a-select-option :value="'地下水'">地下水</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="测点名称:"> <a-form-item label="监测时间:">
<a-select v-model:value="where.place" allowClear showSearch> <a-range-picker separator="~" v-model:value="reportTimeScope" />
<a-select-option
v-for="(item) in palceOptions"
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select>
</a-form-item> </a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="路段:">
<a-select v-model:value="where.road" allowClear showSearch>
<a-select-option
v-for="(item) in roadOptions"
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select>
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="城区">
<a-select v-model:value="where.area" allowClear showSearch>
<a-select-option
v-for="(item) in areaOptions"
:key="item.value"
>{{ item.label }}</a-select-option
>
</a-select>
</a-form-item>
</a-col> -->
<a-col :lg="6" :md="12" :sm="24" :xs="24"> <a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }"> <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space> <a-space>