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

市级饮用水页面框架

Browse Source
This commit is contained in:
庞东林
2021-12-09 16:34:51 +08:00
parent 93692924f5
commit 77ae7e4124
9 changed files with 785 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/water/drinking-water/statistic/city/base.vue
View File

@@ -23,6 +23,12 @@
:scroll="{ x: 'max-content' }"
@done="(d) => (data = d.data)"
>
<template #footer>
<div class="footer">
饮用水源水质监测累积月份统计样品数：10个
</div>
</template>
<template #waterCode="{ text, record }">
<span>
{{
@@ -87,6 +93,7 @@ export default {
},
data() {
return {
current:0,
data: [],
locale,
bill: {},
@@ -180,6 +187,7 @@ export default {
};
this.reload();
},
exportFile() {
const columns = [...tableColumns];
const arr = [];
@@ -197,4 +205,7 @@ export default {
</script>
<style scoped lang="less">
.footer{
text-align: right;
}
</style>

40
src/views/water/drinking-water/statistic/city/index.vue
View File

@@ -13,16 +13,18 @@
<a-tab-pane tab="超标评价" key="base4">
<city-over-standard :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeCity=='base4'"></city-over-standard>
</a-tab-pane>
<a-tab-pane tab="水质类别" key="base2" :visiable="activeCity=='base2'">
<city-water-quality></city-water-quality>
<a-tab-pane tab="水质类别" key="base2" >
<city-water-quality :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeCity=='base2'"></city-water-quality>
</a-tab-pane>
<a-tab-pane tab="达标率" key="base6" :visiable="activeCity=='base6'">
<city-month-standard></city-month-standard>
<a-tab-pane tab="水质统计" key="base7" >
<water-quality-count :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeCity=='base7'"></water-quality-count>
</a-tab-pane>
<a-tab-pane tab="综合指数" key="base5" :visiable="activeCity=='base5'">
<city-avg-index></city-avg-index>
<a-tab-pane tab="水质达标情况" key="base8" >
<water-quality-up :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeCity=='base8'"></water-quality-up>
</a-tab-pane>
<a-tab-pane tab="备用水源营养指数" key="base5">
<water-nutritional :searchForm="searchForm" :filterKeys="filterKeys" @search="changeSearch" @changeFilter="changeFilter" :visiable="activeCity=='base5'"></water-nutritional>
</a-tab-pane>
</a-tabs>
</div>
@@ -40,13 +42,19 @@
// 报送情况说明
import cityAppraise from "./situation.vue"
// 取水量
import cityWaterWithdrawal from "../city/waterCount.vue"
import cityWaterWithdrawal from "./waterCount.vue"
// 超标评价
import cityOverStandard from '../city/overStandard.vue'
import cityOverStandard from './overStandard.vue'
// 水质类别
import cityWaterQuality from "./waterQuality.vue"
// 水质统计
import waterQualityCount from "./waterQualityCount.vue";
// 水质达标情况
import waterQualityUp from "./waterQualityUp.vue";
//综合营养指数
import waterNutritional from "./waterNutritional.vue"
import cityWaterQuality from "../cityWaterQuality.vue"
import cityAvgIndex from "../city-avg-index.vue"
import cityMonthStandard from "../city-base-standard.vue"
@@ -57,10 +65,10 @@
BaseStatistic,
cityAppraise,
cityWaterQuality,
cityAvgIndex,
cityMonthStandard,
waterQualityCount,
waterQualityUp,
waterNutritional,
cityWaterWithdrawal,
cityOverStandard
},
data() {

76
src/views/water/drinking-water/statistic/city/situation.vue
View File

@@ -22,12 +22,12 @@
<template #enumber="{ text, record ,index }">
<div class="editable-cell">
<div v-if="editableData[index] && editableData[index].edable=='index3'" class="editable-cell-input-wrapper">
<a-input v-model:value="editableData[index]['index3']" @pressEnter="save(index)" />
<a-input class="edit-input" v-model:value="editableData[index]['index3']" @pressEnter="save(index)" />
<check-outlined class="editable-cell-icon-check" @click="save(index)" />
</div>
<div v-else class="editable-cell-text-wrapper">
{{ text || ' ' }}
<edit-outlined class="editable-cell-icon" @click="edit(record,index,'index3')" />
{{ text || ' ' }}
<edit-outlined class="editable-cell-icon" @click="edit(record,index,'index3')" />
</div>
</div>
</template>
@@ -35,7 +35,7 @@
<template #wnumber="{ text, record ,index }">
<div class="editable-cell">
<div v-if="editableData[index] && editableData[index].edable=='index4'" class="editable-cell-input-wrapper">
<a-input v-model:value="editableData[index]['index4']" @pressEnter="save(index)" />
<a-input class="edit-input" v-model:value="editableData[index]['index4']" @pressEnter="save(index)" />
<check-outlined class="editable-cell-icon-check" @click="save(index)" />
</div>
<div v-else class="editable-cell-text-wrapper">
@@ -48,7 +48,7 @@
<template #desc="{ text, record ,index }">
<div class="editable-cell">
<div v-if="editableData[index] && editableData[index].edable=='index6'" class="editable-cell-input-wrapper">
<a-input v-model:value="editableData[index]['index6']" @pressEnter="save(index)" />
<a-input class="edit-input" v-model:value="editableData[index]['index6']" @pressEnter="save(index)" />
<check-outlined class="editable-cell-icon-check" @click="save(index)" />
</div>
<div v-else class="editable-cell-text-wrapper">
@@ -61,7 +61,7 @@
<template #remark="{ text, record ,index }">
<div class="editable-cell">
<div v-if="editableData[index] && editableData[index].edable=='remark'" class="editable-cell-input-wrapper">
<a-input v-model:value="editableData[index]['remark']" @pressEnter="save(index)" />
<a-textarea class="edit-input" v-model:value="editableData[index]['remark']" @pressEnter="save(index)" />
<check-outlined class="editable-cell-icon-check" @click="save(index)" />
</div>
<div v-else class="editable-cell-text-wrapper">
@@ -134,20 +134,7 @@ export default {
{title:"类型",dataIndex:"waterSourceProperty",},
{title:"监测时间",dataIndex:"reportTime"},
// {title:"监测时间",dataIndex:"reportTime",customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").format("YYYY/MM/DD")},
{title:"应当监测项目个数",dataIndex:'index1',filters:[
{
text: '61',
value: '61',
},
{
text: '63',
value: '63',
},
{
text: '64',
value: '64',
},
]},
{title:"应当监测项目个数",dataIndex:'index1'},
{title:"未测个数",dataIndex:"index2",},
{title:"独立分析项目个数",dataIndex:"index3",
slots: {
@@ -228,6 +215,39 @@ export default {
/* 刷新表格 */
reload() {
this.getPageData()
this.columns[6].filters = []
if(this.where.drinkingWaterAnalyse.waterSourceType ==1 ){
// 地表水
this.columns[6].filters = [
{
text: '61',
value: '61',
},
{
text: '63',
value: '63',
},
{
text: '64',
value: '64',
},
]
}
if(this.where.drinkingWaterAnalyse.waterSourceType ==2 ){
// 地下水
this.columns[6].filters = [
{
text: '39',
value: '39',
},
{
text: '94',
value: '94',
}
]
}
// this.$refs.table.reload({
// where: this.where,
// });
@@ -249,7 +269,7 @@ export default {
const arr = [];
const th = columns.map((item) => item.title);
arr.push(th);
this.data.forEach((d) => {
this.datasource.forEach((d) => {
const td = columns.map((item) => d[item.dataIndex]);
arr.push(td);
});
@@ -261,4 +281,18 @@ export default {
</script>
<style scoped lang="less">
.editable-cell-input-wrapper{
display: flex;
align-items: center;
.edit-input{
margin-right: 5px;
width: 200px;
}
}
.editable-cell-text-wrapper{
display: flex;
align-items: center;
}
</style>

160
src/views/water/drinking-water/statistic/city/waterNutritional.vue Normal file
View File

@@ -0,0 +1,160 @@
<template>
<div class="ele-body">
<a-card :bordered="false">
<!-- 搜索表单 -->
<search
:searchForm="searchForm"
:filterKeys="filterKeys"
@search="searchData"
@exportFile="exportFile"
@filterColumns="changeFilter"
:visiable="visiable"
:loading="loading"
/>
<!-- 表格 -->
<ele-pro-table
v-model:selection="selectionList"
ref="table"
row-key="drinkingWaterId"
:datasource="datasource"
:columns="columns"
:where="where"
:scroll="{ x: 'max-content' }"
@done="(d) => (data = d.data)"
>
</ele-pro-table>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
import XLSX from "xlsx";
import {
waterNutritionalData
} from "@/api/ecology/new-drinking-water";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import Search from "./../components/search.vue";
export default {
name: "waterQuality",
components: {
Search
},
props:{
// 表格搜索条件
searchForm:{
typeof:Object,
default: function () {
return {}
},
},
filterKeys:{
typeof:Object,
default: function () {
return []
},
},
visiable:{
typeof:Boolean
}
},
data() {
return {
data: [],
locale,
bill: {},
// 表格数据接口
datasource:{},
selection: [],
columns:[
{title:"监测时间",dataIndex:"city",},
{title:"类别",dataIndex:"place",},
{title:"点位名称",dataIndex:"sourceWaterName",},
{title:"水质类别",dataIndex:"waterSourceProperty",},
{title: "级别", dataIndex: ""},
{title: "综合营养指数", dataIndex: ""},
],
// 表格列配置
// 表格搜索条件
where: {
checked: 1,
},
// 表格选中数据
selectionList: [],
loading:false
};
},
mounted() {
},
methods: {
// 获取列表数据
getPageData(){
this.loading = true;
waterNutritionalData(this.where).then(res=>{
this.loading = false;
if(res.data.code){
this.$message.error(res.data.msg);
this.datasource = []
}else{
this.datasource = res.data.data
}
}).catch(()=>{
this.loading = false;
})
},
JumpFieldClick(record, column) {
console.log(column.dataIndex)
},
// 执行搜索
searchData(data){
this.where = data;
this.$emit("search", this.where);
this.reload();
},
/* 刷新表格 */
reload() {
this.getPageData()
// this.$refs.table.reload({
// where: this.where,
// });
},
/* 重置搜索 */
reset() {
this.where = {
checked: 1,
};
this.reload();
},
exportFile() {
const columns = [
...this.columns,
];
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>

165
src/views/water/drinking-water/statistic/city/waterQuality.vue Normal file
View File

@@ -0,0 +1,165 @@
<template>
<div class="ele-body">
<a-card :bordered="false">
<!-- 搜索表单 -->
<search
:searchForm="searchForm"
:filterKeys="filterKeys"
@search="searchData"
@exportFile="exportFile"
@filterColumns="changeFilter"
:visiable="visiable"
:loading="loading"
/>
<!-- 表格 -->
<ele-pro-table
v-model:selection="selectionList"
ref="table"
row-key="drinkingWaterId"
:datasource="datasource"
:columns="columns"
:where="where"
:scroll="{ x: 'max-content' }"
@done="(d) => (data = d.data)"
>
</ele-pro-table>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
import XLSX from "xlsx";
import {
waterQualityData
} from "@/api/ecology/new-drinking-water";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import Search from "./../components/search.vue";
export default {
name: "waterQuality",
components: {
Search
},
props:{
// 表格搜索条件
searchForm:{
typeof:Object,
default: function () {
return {}
},
},
filterKeys:{
typeof:Object,
default: function () {
return []
},
},
visiable:{
typeof:Boolean
}
},
data() {
return {
data: [],
locale,
bill: {},
// 表格数据接口
datasource:{},
selection: [],
columns:[
{title:"城市名称",dataIndex:"city",},
{title:"水源地名称",dataIndex:"place",},
{title:"期数",dataIndex:"sourceWaterName",},
{title:"水源地性质",dataIndex:"waterSourceProperty",},
{title:"断面水质",align: 'center',children: [
{title: "本月", dataIndex: ""},
{title: "上月", dataIndex: ""},
{title: "去年同期", dataIndex: ""},
]
},
{title:"主要污染指标",dataIndex:"",},
],
// 表格列配置
// 表格搜索条件
where: {
checked: 1,
},
// 表格选中数据
selectionList: [],
loading:false
};
},
mounted() {
},
methods: {
// 获取列表数据
getPageData(){
this.loading = true;
waterQualityData(this.where).then(res=>{
this.loading = false;
if(res.data.code){
this.$message.error(res.data.msg);
this.datasource = []
}else{
this.datasource = res.data.data
}
}).catch(()=>{
this.loading = false;
})
},
JumpFieldClick(record, column) {
console.log(column.dataIndex)
},
// 执行搜索
searchData(data){
this.where = data;
this.$emit("search", this.where);
this.reload();
},
/* 刷新表格 */
reload() {
this.getPageData()
// this.$refs.table.reload({
// where: this.where,
// });
},
/* 重置搜索 */
reset() {
this.where = {
checked: 1,
};
this.reload();
},
exportFile() {
const columns = [
...this.columns,
];
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>

160
src/views/water/drinking-water/statistic/city/waterQualityCount.vue Normal file
View File

@@ -0,0 +1,160 @@
<!--水质统计-->
<template>
<div class="ele-body">
<a-card :bordered="false">
<!-- 搜索表单 -->
<search
:searchForm="searchForm"
:filterKeys="filterKeys"
@search="searchData"
@exportFile="exportFile"
@filterColumns="changeFilter"
:visiable="visiable"
:loading="loading"
/>
<!-- 表格 -->
<ele-pro-table
v-model:selection="selectionList"
ref="table"
row-key="drinkingWaterId"
:datasource="datasource"
:columns="columns"
:where="where"
:scroll="{ x: 'max-content' }"
@done="(d) => (data = d.data)"
>
</ele-pro-table>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
import XLSX from "xlsx";
import {
waterQualityCountData
} from "@/api/ecology/new-drinking-water";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import Search from "./../components/search.vue";
export default {
name: "waterQualityCount",
components: {
Search
},
props:{
// 表格搜索条件
searchForm:{
typeof:Object,
default: function () {
return {}
},
},
filterKeys:{
typeof:Object,
default: function () {
return []
},
},
visiable:{
typeof:Boolean
}
},
data() {
return {
data: [],
locale,
bill: {},
// 表格数据接口
datasource:{},
selection: [],
columns:[
{title:"年份",dataIndex:"city",},
{title:"指标",dataIndex:"place",},
{title:"平均值",dataIndex:"sourceWaterName",},
{title:"最大值",dataIndex:"waterSourceProperty",},
{title:"最小值",dataIndex:"",},
],
// 表格列配置
// 表格搜索条件
where: {
checked: 1,
},
// 表格选中数据
selectionList: [],
loading:false
};
},
mounted() {
},
methods: {
// 获取列表数据
getPageData(){
this.loading = true;
waterQualityCountData(this.where).then(res=>{
this.loading = false;
if(res.data.code){
this.$message.error(res.data.msg);
this.datasource = []
}else{
this.datasource = res.data.data
}
}).catch(()=>{
this.loading = false;
})
},
JumpFieldClick(record, column) {
console.log(column.dataIndex)
},
// 执行搜索
searchData(data){
this.where = data;
this.$emit("search", this.where);
this.reload();
},
/* 刷新表格 */
reload() {
this.getPageData()
// this.$refs.table.reload({
// where: this.where,
// });
},
/* 重置搜索 */
reset() {
this.where = {
checked: 1,
};
this.reload();
},
exportFile() {
const columns = [
...this.columns,
];
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>

166
src/views/water/drinking-water/statistic/city/waterQualityUp.vue Normal file
View File

@@ -0,0 +1,166 @@
<template>
<div class="ele-body">
<a-card :bordered="false">
<!-- 搜索表单 -->
<search
:searchForm="searchForm"
:filterKeys="filterKeys"
@search="searchData"
@exportFile="exportFile"
@filterColumns="changeFilter"
:visiable="visiable"
:loading="loading"
/>
<!-- 表格 -->
<ele-pro-table
v-model:selection="selectionList"
ref="table"
row-key="drinkingWaterId"
:datasource="datasource"
:columns="columns"
:where="where"
:scroll="{ x: 'max-content' }"
@done="(d) => (data = d.data)"
>
</ele-pro-table>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
import XLSX from "xlsx";
import {
waterQualityUpData
} from "@/api/ecology/new-drinking-water";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import Search from "./../components/search.vue";
export default {
name: "waterQuality",
components: {
Search
},
props:{
// 表格搜索条件
searchForm:{
typeof:Object,
default: function () {
return {}
},
},
filterKeys:{
typeof:Object,
default: function () {
return []
},
},
visiable:{
typeof:Boolean
}
},
data() {
return {
data: [],
locale,
bill: {},
// 表格数据接口
datasource:{},
selection: [],
columns:[
{title:"断面名称",dataIndex:"city",},
{title:"时间",dataIndex:"place",},
{title:"水质目标",dataIndex:"sourceWaterName",},
{title:"水质类别",dataIndex:"waterSourceProperty",},
{title: "达标情况", dataIndex: ""},
{title: "达标率", dataIndex: ""},
// {title:"达标情况",align: 'center',children: [
// {title: "达标情况", dataIndex: ""},
// {title: "达标率", dataIndex: ""},
// {title: "去年同期", dataIndex: ""},
// ]
// },
],
// 表格列配置
// 表格搜索条件
where: {
checked: 1,
},
// 表格选中数据
selectionList: [],
loading:false
};
},
mounted() {
},
methods: {
// 获取列表数据
getPageData(){
this.loading = true;
waterQualityUpData(this.where).then(res=>{
this.loading = false;
if(res.data.code){
this.$message.error(res.data.msg);
this.datasource = []
}else{
this.datasource = res.data.data
}
}).catch(()=>{
this.loading = false;
})
},
JumpFieldClick(record, column) {
console.log(column.dataIndex)
},
// 执行搜索
searchData(data){
this.where = data;
this.$emit("search", this.where);
this.reload();
},
/* 刷新表格 */
reload() {
this.getPageData()
// this.$refs.table.reload({
// where: this.where,
// });
},
/* 重置搜索 */
reset() {
this.where = {
checked: 1,
};
this.reload();
},
exportFile() {
const columns = [
...this.columns,
];
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>

23
src/views/water/drinking-water/statistic/components/search.vue
View File

@@ -192,11 +192,14 @@ export default {
this.where = this.searchForm;
this.filter = filterColumns.map((item) => item.dataIndex);
this.columnsKey = [...this.filter]
// 生成复选框
this.newCloumns = [...filterColumns];
// 缓存复选框
this.oldCloumns = [...filterColumns];
// this.$emit("buildColumns", filterColumns);
// 根据父级传回来需要去掉勾的值映射到复选框
this.initFilter(this.filterKeys);
// 将父级回传的搜索条件上传父级进行页面搜索
this.emitData(true)
},
@@ -205,7 +208,7 @@ export default {
emitData(val){
// if(val && this.where.startTime && this.where.endTime){
if(val){
this.$emit("search", this.where);
this.searchData();
}
},
@@ -234,10 +237,18 @@ export default {
this.newCloumns = newCloumns;
},
reset() {
this.where = {};
this.where = {
checked: 1,
limit: 10,
page: 1,
drinkingWaterAnalyse:{
regionLevel: this.where.drinkingWaterAnalyse.regionLevel
}
}
this.searchData();
},
searchData() {
this.where.filter = [...this.filter]
this.$emit("search", this.where);
},
exportFile() {
@@ -254,9 +265,11 @@ export default {
handleOk() {
this.visible = false;
this.oldCloumns = [...this.newCloumns];
// 选中的所有项
// console.log(this.columnsKey)
// 得到没有选中的项，然后在表头将没选中项去除
let filterKey = []
this.columnsKey.forEach(key=>{
if(this.filter.indexOf(key) == -1){
filterKey.push(key)
@@ -264,6 +277,8 @@ export default {
})
this.$emit("filterColumns", filterKey);
// this.$emit("selectKeys", this.columnsKey);
},
},
};