饮用水统计分析-原始数据 板块 提交

This commit is contained in:
710356044
2021-11-26 21:53:30 +08:00
parent 07f7cf6b66
commit 9d999dbe13
13 changed files with 1987 additions and 32 deletions

View File

@@ -0,0 +1,387 @@
<template>
<div class="ele-body">
<a-card :bordered="false">
<a-form
:model="where"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
>
<a-row>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="年份:">
<a-select v-model:value="where.year" allow-clear show-search>
<a-select-option
v-for="(item) in yearOptions"
: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-space>
<a-button type="primary" @click="reload">查询</a-button>
<a-button @click="reset">重置</a-button>
<!-- <a-button @click="exportData" type="primary">按年份导出</a-button> -->
</a-space>
</a-col>
</a-row>
<a-row>
</a-row>
</a-form>
<a-modal
v-model:visible="showNYear"
:title="'批量复制'"
:confirm-loading="loading"
:body-style="{ paddingBottom: '8px' }"
@ok="copyBatch"
>
<a-form
ref="form"
:model="form"
:rules="rules"
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
>
<a-form-item label="新年份" name="nYear">
<a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050" />
</a-form-item>
</a-form>
</a-modal>
<a-modal
v-model:visible="showEdit"
:title="form.drinkingWaterDictId !== undefined ? '修改' : '添加'"
:confirm-loading="loading"
:width="800"
:body-style="{ paddingBottom: '8px' }"
@ok="save"
>
<a-form
ref="form"
:model="form"
:rules="rules"
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
>
<a-form-item label="年份" name="year">
<a-input-number v-model:value="form.year" :min="1970" :max="2050" />
</a-form-item>
<a-form-item label="县" name="county">
<a-input v-model:value="form.county" placeholder="请输入县名称" allow-clear />
</a-form-item>
<a-form-item label="水源地名称" name="waterSourceName">
<a-input v-model:value="form.waterSourceName" placeholder="请输入水源地名称" allow-clear />
</a-form-item>
<a-form-item label="水源类型1地表水、2地下水" name="waterSourceType">
<a-input v-model:value="form.waterSourceType" placeholder="请输入水源类型1或者2" allow-clear />
</a-form-item>
</a-form>
</a-modal>
<!-- 表格 -->
<ele-pro-table
v-model:selection="selectionList"
ref="table"
row-key="drinkingWaterDictId"
:datasource="url"
:columns="columns"
:where="where"
:scroll="{ x: 'max-content' }"
@done="(d) => (data = d.data)"
>
<template #toolbar>
<a-space>
<a-button @click="openEdit" type="primary">新增</a-button>
<a-dropdown>
<template #overlay>
<a-menu @click="setCYear">
<a-menu-item v-for="item in yearOptions" :key="item.value">
{{ item.label }}
</a-menu-item>
</a-menu>
</template>
<a-button>
批量复制
<DownOutlined/>
</a-button>
</a-dropdown>
<a-popconfirm
:disabled="selectionList.length == 0"
:title="`确认删除${selectionList.length}条数据吗?`"
ok-text="Yes"
cancel-text="No"
@confirm="removeBatch"
>
<a-button
:disabled="selectionList.length == 0"
type="primary"
ghost
danger
>删除
</a-button>
</a-popconfirm>
</a-space>
</template>
<template #action="{ record }">
<a-space>
<a-button
@click="openEdit(record)"
type="primary"
shape="round"
size="small"
>修改</a-button
>
<a-popconfirm
:title="`确认删除这条数据吗?`"
ok-text="Yes"
cancel-text="No"
@confirm="remove(record)"
>
<a-button type="primary" danger shape="round" size="small"
>删除</a-button
>
</a-popconfirm>
</a-space>
</template>
</ele-pro-table>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
// import _ from "lodash";
import {
pageCountyBottomDictUrl,
saveDrinkingWaterCountyBottomDict,
removeDrinkingWaterCountyBottomDict,
removeBatchDrinkingWaterCountyBottomDict,
updateDrinkingWaterCountyBottomDict,
// verifyDrinkingWaterDict,
// getDrinkingWaterDict
getCountyBottomColumnOptions,
copyBatchCountyBottomPlace
} from "@/api/ecology/drinking-water-dict";
// import moment from "moment";
import {DownOutlined} from '@ant-design/icons-vue';
import XLSX from "xlsx";
export default {
name: "DrinkWaterDict",
components: {DownOutlined},
data() {
return {
data: [],
// 表格数据接口
url: pageCountyBottomDictUrl,
selection: [],
// 表格列配置
columns: [
{title: "年份",
dataIndex: "year",
sorter: true,
},
{ title: "县",
dataIndex: "county",
sorter: true,
},
{ title: "水源地名称",
dataIndex: "waterSourceName",
sorter: true,
},
{
title: "水源类型",
dataIndex: "waterSourceType",
sorter: true,
customRender: ({text})=> text == 1?"地表水":"地下水"
},
{
title: "操作",
key: "action",
width: 150,
align: "center",
fixed: "right",
slots: {
customRender: "action",
},
},
],
// 表格搜索条件
where: {
sort: "sectionCode",
},
// 表格选中数据
selectionList: [],
// 是否显示编辑弹窗
showEdit: false,
// 表单数据
form: {},
loading: false,
rules: {
// year: [{required: true, message: '请输入年份'}],
// sourceWaterName:[{required: true,message: '请选择水源名称'}],
// longitude: [{required: true,message: '请输入经度',},],
// latitude: [{required: true,message: '请输入纬度',},],
},
yearOptions: [],
showNYear:false,
cYear: undefined,
nYear:undefined,
};
},
mounted() {
this.getOptions();
},
methods: {
/* 刷新表格 */
reload() {
this.$refs.table.reload({
where: this.where,
});
},
/* 重置搜索 */
reset() {
this.where = {};
this.reload();
},
/* 打开编辑弹窗 */
openEdit(row) {
// cloneRecord.mi
this.form = Object.assign({}, row);
this.showEdit = true;
this.$nextTick(() => {
this.$refs.form.clearValidate(); // 清除表单验证信息
});
},
async save() {
await this.$refs.form.validate();
const hide = this.$message.loading('请求中..', 0);
const form = this.form;
console.log(form);
if (form.drinkingWaterDictId) {
updateDrinkingWaterCountyBottomDict(form)
.then((res) => {
if (res.data.code == 0) {
this.showEdit = false;
this.$message.success(res.data.msg);
this.reload();
} else {
this.$message.error(res.data.msg);
}
})
.catch((error) => {
this.$message.error(error.message);
})
.finally(() => {
hide();
});
} else {
saveDrinkingWaterCountyBottomDict(form)
.then((res) => {
if (res.data.code == 0) {
this.showEdit = false;
this.$message.success(res.data.msg);
this.reload();
} else {
this.$message.error(res.data.msg);
}
})
.catch((error) => {
this.$message.error(error.message);
})
.finally(() => {
hide();
});
}
},
/* 删除单个 */
remove(row) {
const hide = this.$message.loading('请求中..', 0);
removeDrinkingWaterCountyBottomDict(row.drinkingWaterDictId).then((res) => {
hide();
if (res.data.code === 0) {
this.$message.success(res.data.msg);
this.reload();
} else {
this.$message.error(res.data.msg);
}
}).catch(e => {
hide();
this.$message.error(e.message);
})
},
/* 批量删除 */
removeBatch() {
const hide = this.$message.loading('请求中..', 0);
const ids = this.selectionList.map((item) => item.drinkingWaterDictId);
removeBatchDrinkingWaterCountyBottomDict(ids).then((res) => {
if (res.data.code === 0) {
this.$message.success(res.data.msg);
this.reload();
} else {
this.$message.error(res.data.msg);
}
}).catch(e => {
this.$message.error(e.message);
}).finally(() => {
hide();
})
},
getOptions(){
getCountyBottomColumnOptions("year").then(res => {
console.log(res)
if (res.data.code == 0) {
this.yearOptions = res.data.data.map(item => {
return {
label: item,
value: item
}
})
}
})
},
setCYear(e){
this.cYear = e.key;
this.showNYear = true;
},
copyBatch(){
const hide = this.$message.loading('请求中..', 0);
copyBatchCountyBottomPlace({cyear:Number(this.cYear),nyear:this.nYear}).then(res=>{
if (res.data.code === 0) {
this.$message.success(res.data.msg);
this.reload();
this.getOptions();
} else {
this.$message.error(res.data.msg);
}
this.showNYear = false;
}).catch(e => {
this.$message.error(e.message);
}).finally(() => {
hide();
})
},
exportData(){
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);
});
console.log(arr);
let sheet = XLSX.utils.aoa_to_sheet(arr);
console.log(arr);
this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
}
},
};
</script>
<style scoped lang="less">
</style>

View File

@@ -0,0 +1,386 @@
<template>
<div class="ele-body">
<a-card :bordered="false">
<a-form
:model="where"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
>
<a-row>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="年份:">
<a-select v-model:value="where.year" allow-clear show-search>
<a-select-option
v-for="(item) in yearOptions"
: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-space>
<a-button type="primary" @click="reload">查询</a-button>
<a-button @click="reset">重置</a-button>
<a-button @click="exportData" type="primary">按年份导出</a-button>
</a-space>
</a-col>
</a-row>
<a-row>
</a-row>
</a-form>
<a-modal
v-model:visible="showNYear"
:title="'批量复制'"
:confirm-loading="loading"
:body-style="{ paddingBottom: '8px' }"
@ok="copyBatch"
>
<a-form
ref="form"
:model="form"
:rules="rules"
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
>
<a-form-item label="新年份" name="nYear">
<a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050" />
</a-form-item>
</a-form>
</a-modal>
<a-modal
v-model:visible="showEdit"
:title="form.drinkingWaterDictId !== undefined ? '修改' : '添加'"
:confirm-loading="loading"
:width="800"
:body-style="{ paddingBottom: '8px' }"
@ok="save"
>
<a-form
ref="form"
:model="form"
:rules="rules"
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
>
<a-form-item label="年份" name="year">
<a-input-number v-model:value="form.year" :min="1970" :max="2050" />
</a-form-item>
<a-form-item label="县" name="county">
<a-input v-model:value="form.county" placeholder="请输入县名称" allow-clear />
</a-form-item>
<a-form-item label="水源地名称" name="waterSourceName">
<a-input v-model:value="form.waterSourceName" placeholder="请输入水源地名称" allow-clear />
</a-form-item>
<a-form-item label="饮用水类型1在用、2备用" name="drinkingWaterType">
<a-input v-model:value="form.drinkingWaterType" placeholder="请输入饮用水类型1或者2" allow-clear />
</a-form-item>
</a-form>
</a-modal>
<!-- 表格 -->
<ele-pro-table
v-model:selection="selectionList"
ref="table"
row-key="drinkingWaterDictId"
:datasource="url"
:columns="columns"
:where="where"
:scroll="{ x: 'max-content' }"
@done="(d) => (data = d.data)"
>
<template #toolbar>
<a-space>
<a-button @click="openEdit" type="primary">新增</a-button>
<a-dropdown>
<template #overlay>
<a-menu @click="setCYear">
<a-menu-item v-for="item in yearOptions" :key="item.value">
{{ item.label }}
</a-menu-item>
</a-menu>
</template>
<a-button>
批量复制
<DownOutlined/>
</a-button>
</a-dropdown>
<a-popconfirm
:disabled="selectionList.length == 0"
:title="`确认删除${selectionList.length}条数据吗?`"
ok-text="Yes"
cancel-text="No"
@confirm="removeBatch"
>
<a-button
:disabled="selectionList.length == 0"
type="primary"
ghost
danger
>删除
</a-button>
</a-popconfirm>
</a-space>
</template>
<template #action="{ record }">
<a-space>
<a-button
@click="openEdit(record)"
type="primary"
shape="round"
size="small"
>修改</a-button
>
<a-popconfirm
:title="`确认删除这条数据吗?`"
ok-text="Yes"
cancel-text="No"
@confirm="remove(record)"
>
<a-button type="primary" danger shape="round" size="small"
>删除</a-button
>
</a-popconfirm>
</a-space>
</template>
</ele-pro-table>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
// import _ from "lodash";
import {
pageCountyDictUrl,
saveDrinkingWaterCountyDict,
removeDrinkingWaterCountyDict,
removeBatchDrinkingWaterCountyDict,
updateDrinkingWaterCountyDict,
// verifyDrinkingWaterDict,
// getDrinkingWaterDict
getCountyColumnOptions,
copyBatchCountyPlace
} from "@/api/ecology/drinking-water-dict";
// import moment from "moment";
import {DownOutlined} from '@ant-design/icons-vue';
import XLSX from "xlsx";
export default {
name: "DrinkWaterDict",
components: {DownOutlined},
data() {
return {
data: [],
// 表格数据接口
url: pageCountyDictUrl,
selection: [],
// 表格列配置
columns: [
{title: "年份",
dataIndex: "year",
sorter: true,
},
{ title: "县",
dataIndex: "county",
sorter: true,
},
{ title: "水源地名称",
dataIndex: "waterSourceName",
sorter: true,
},
{
title: "饮用水类型",
dataIndex: "drinkingWaterType",
sorter: true,
customRender: ({text})=> text == 1?"在用":"备用"
},
{
title: "操作",
key: "action",
width: 150,
align: "center",
fixed: "right",
slots: {
customRender: "action",
},
},
],
// 表格搜索条件
where: {
// sort: "sectionCode",
},
// 表格选中数据
selectionList: [],
// 是否显示编辑弹窗
showEdit: false,
// 表单数据
form: {},
loading: false,
rules: {
// year: [{required: true, message: '请输入年份'}],
// sourceWaterName:[{required: true,message: '请选择水源名称'}],
// longitude: [{required: true,message: '请输入经度',},],
// latitude: [{required: true,message: '请输入纬度',},],
},
yearOptions: [],
showNYear:false,
cYear: undefined,
nYear:undefined,
};
},
mounted() {
this.getOptions();
},
methods: {
/* 刷新表格 */
reload() {
this.$refs.table.reload({
where: this.where,
});
},
/* 重置搜索 */
reset() {
this.where = {};
this.reload();
},
/* 打开编辑弹窗 */
openEdit(row) {
// cloneRecord.mi
this.form = Object.assign({}, row);
this.showEdit = true;
this.$nextTick(() => {
this.$refs.form.clearValidate(); // 清除表单验证信息
});
},
async save() {
await this.$refs.form.validate();
const hide = this.$message.loading('请求中..', 0);
const form = this.form;
console.log(form);
if (form.drinkingWaterDictId) {
updateDrinkingWaterCountyDict(form)
.then((res) => {
if (res.data.code == 0) {
this.showEdit = false;
this.$message.success(res.data.msg);
this.reload();
} else {
this.$message.error(res.data.msg);
}
})
.catch((error) => {
this.$message.error(error.message);
})
.finally(() => {
hide();
});
} else {
saveDrinkingWaterCountyDict(form)
.then((res) => {
if (res.data.code == 0) {
this.showEdit = false;
this.$message.success(res.data.msg);
this.reload();
} else {
this.$message.error(res.data.msg);
}
})
.catch((error) => {
this.$message.error(error.message);
})
.finally(() => {
hide();
});
}
},
/* 删除单个 */
remove(row) {
const hide = this.$message.loading('请求中..', 0);
removeDrinkingWaterCountyDict(row.drinkingWaterDictId).then((res) => {
hide();
if (res.data.code === 0) {
this.$message.success(res.data.msg);
this.reload();
} else {
this.$message.error(res.data.msg);
}
}).catch(e => {
hide();
this.$message.error(e.message);
})
},
/* 批量删除 */
removeBatch() {
const hide = this.$message.loading('请求中..', 0);
const ids = this.selectionList.map((item) => item.drinkingWaterDictId);
removeBatchDrinkingWaterCountyDict(ids).then((res) => {
if (res.data.code === 0) {
this.$message.success(res.data.msg);
this.reload();
} else {
this.$message.error(res.data.msg);
}
}).catch(e => {
this.$message.error(e.message);
}).finally(() => {
hide();
})
},
getOptions(){
getCountyColumnOptions("year").then(res => {
console.log(res)
if (res.data.code == 0) {
this.yearOptions = res.data.data.map(item => {
return {
label: item,
value: item
}
})
}
})
},
setCYear(e){
this.cYear = e.key;
this.showNYear = true;
},
copyBatch(){
const hide = this.$message.loading('请求中..', 0);
copyBatchCountyPlace({cyear:Number(this.cYear),nyear:this.nYear}).then(res=>{
if (res.data.code === 0) {
this.$message.success(res.data.msg);
this.reload();
this.getOptions();
} else {
this.$message.error(res.data.msg);
}
this.showNYear = false;
}).catch(e => {
this.$message.error(e.message);
}).finally(() => {
hide();
})
},
exportData(){
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);
});
console.log(arr);
let sheet = XLSX.utils.aoa_to_sheet(arr);
console.log(arr);
this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
}
},
};
</script>
<style scoped lang="less">
</style>

View File

@@ -2,9 +2,18 @@
<div class="ele-body">
<a-card :bordered="false">
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="place" tab="点位信息">
<a-tab-pane key="place" tab="市级字典">
<place></place>
</a-tab-pane>
<a-tab-pane key="countyTopWater" tab="县级地表水字典">
<countyTopWaterDict></countyTopWaterDict>
</a-tab-pane>
<a-tab-pane key="countyBottomWater" tab="县级地下水字典">
<countyBottomWaterDict></countyBottomWaterDict>
</a-tab-pane>
<a-tab-pane key="village" tab="农村字典">
<villageDict></villageDict>
</a-tab-pane>
<!-- <a-tab-pane key="standard" tab="标准限值">
<leq-level></leq-level>
</a-tab-pane> -->
@@ -22,13 +31,17 @@
*/
// import LeqLevel from "./surface-water"
import Place from "./place"
import countyTopWaterDict from "./countyTopWaterDict.vue"
import countyBottomWaterDict from "./countyBottomWaterDict.vue"
import villageDict from "./villageDict.vue"
export default {
name: 'DrinkingWaterDictIndex',
components: {
// LeqLevel,
Place
Place,
countyTopWaterDict,
countyBottomWaterDict,
villageDict
},
data() {
return {

View File

@@ -309,10 +309,10 @@ export default {
form: {},
loading: false,
rules: {
year: [{required: true, message: '请输入年份'}],
sourceWaterName:[{required: true,message: '请选择水源名称'}],
longitude: [{required: true,message: '请输入经度',},],
latitude: [{required: true,message: '请输入纬度',},],
// year: [{required: true, message: '请输入年份'}],
// sourceWaterName:[{required: true,message: '请选择水源名称'}],
// longitude: [{required: true,message: '请输入经度',},],
// latitude: [{required: true,message: '请输入纬度',},],
},
yearOptions: [],
showNYear:false,

View File

@@ -0,0 +1,383 @@
<template>
<div class="ele-body">
<a-card :bordered="false">
<a-form
:model="where"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
>
<a-row>
<a-col :lg="6" :md="12" :sm="24" :xs="24">
<a-form-item label="年份:">
<a-select v-model:value="where.year" allow-clear show-search>
<a-select-option
v-for="(item) in yearOptions"
: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-space>
<a-button type="primary" @click="reload">查询</a-button>
<a-button @click="reset">重置</a-button>
<a-button @click="exportData" type="primary">按年份导出</a-button>
</a-space>
</a-col>
</a-row>
<a-row>
</a-row>
</a-form>
<a-modal
v-model:visible="showNYear"
:title="'批量复制'"
:confirm-loading="loading"
:body-style="{ paddingBottom: '8px' }"
@ok="copyBatch"
>
<a-form
ref="form"
:model="form"
:rules="rules"
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
>
<a-form-item label="新年份" name="nYear">
<a-input-number id="inputNumber" v-model:value="nYear" :min="1970" :max="2050" />
</a-form-item>
</a-form>
</a-modal>
<a-modal
v-model:visible="showEdit"
:title="form.drinkingWaterDictId !== undefined ? '修改' : '添加'"
:confirm-loading="loading"
:width="800"
:body-style="{ paddingBottom: '8px' }"
@ok="save"
>
<a-form
ref="form"
:model="form"
:rules="rules"
:label-col="{ md: { span: 6 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 18 }, sm: { span: 24 } }"
>
<a-form-item label="县" name="county">
<a-input v-model:value="form.county" placeholder="请输入县名称" allow-clear />
</a-form-item>
<a-form-item label="水源地名称" name="waterSourceName">
<a-input v-model:value="form.waterSourceName" placeholder="请输入水源地名称" allow-clear />
</a-form-item>
<a-form-item label="饮用水类型1在用、2备用" name="drinkingWaterType">
<a-input v-model:value="form.drinkingWaterType" placeholder="请输入饮用水类型1或者2" allow-clear />
</a-form-item>
</a-form>
</a-modal>
<!-- 表格 -->
<ele-pro-table
v-model:selection="selectionList"
ref="table"
row-key="drinkingWaterDictId"
:datasource="url"
:columns="columns"
:where="where"
:scroll="{ x: 'max-content' }"
@done="(d) => (data = d.data)"
>
<template #toolbar>
<a-space>
<a-button @click="openEdit" type="primary">新增</a-button>
<a-dropdown>
<template #overlay>
<a-menu @click="setCYear">
<a-menu-item v-for="item in yearOptions" :key="item.value">
{{ item.label }}
</a-menu-item>
</a-menu>
</template>
<a-button>
批量复制
<DownOutlined/>
</a-button>
</a-dropdown>
<a-popconfirm
:disabled="selectionList.length == 0"
:title="`确认删除${selectionList.length}条数据吗?`"
ok-text="Yes"
cancel-text="No"
@confirm="removeBatch"
>
<a-button
:disabled="selectionList.length == 0"
type="primary"
ghost
danger
>删除
</a-button>
</a-popconfirm>
</a-space>
</template>
<template #action="{ record }">
<a-space>
<a-button
@click="openEdit(record)"
type="primary"
shape="round"
size="small"
>修改</a-button
>
<a-popconfirm
:title="`确认删除这条数据吗?`"
ok-text="Yes"
cancel-text="No"
@confirm="remove(record)"
>
<a-button type="primary" danger shape="round" size="small"
>删除</a-button
>
</a-popconfirm>
</a-space>
</template>
</ele-pro-table>
</a-card>
</div>
<!-- 编辑弹窗 -->
</template>
<script>
// import _ from "lodash";
import {
pageDictUrl,
saveDrinkingWaterDict,
removeDrinkingWaterDict,
removeBatchDrinkingWaterDict,
updateDrinkingWaterDict,
// verifyDrinkingWaterDict,
// getDrinkingWaterDict
getColumnOptions,
copyBatchPlace
} from "@/api/ecology/drinking-water-dict";
// import moment from "moment";
import {DownOutlined} from '@ant-design/icons-vue';
import XLSX from "xlsx";
export default {
name: "DrinkWaterDict",
components: {DownOutlined},
data() {
return {
data: [],
// 表格数据接口
url: pageDictUrl,
selection: [],
// 表格列配置
columns: [
{title: "县",
dataIndex: "county",
sorter: true,
},
{title: "水源地名称",
dataIndex: "waterSourceName",
sorter: true,
},
{title: "饮用水类型1在用、2备用",
dataIndex: "drinkingWaterType",
sorter: true,
},
{
title: "饮用水类型",
dataIndex: "drinkingWaterType",
sorter: true,
customRender: ({text})=> text == 1?"在用":"备用"
},
{
title: "操作",
key: "action",
width: 150,
align: "center",
fixed: "right",
slots: {
customRender: "action",
},
},
],
// 表格搜索条件
where: {
sort: "sectionCode",
},
// 表格选中数据
selectionList: [],
// 是否显示编辑弹窗
showEdit: false,
// 表单数据
form: {},
loading: false,
rules: {
// year: [{required: true, message: '请输入年份'}],
// sourceWaterName:[{required: true,message: '请选择水源名称'}],
// longitude: [{required: true,message: '请输入经度',},],
// latitude: [{required: true,message: '请输入纬度',},],
},
yearOptions: [],
showNYear:false,
cYear: undefined,
nYear:undefined,
};
},
mounted() {
this.getOptions();
},
methods: {
/* 刷新表格 */
reload() {
this.$refs.table.reload({
where: this.where,
});
},
/* 重置搜索 */
reset() {
this.where = {};
this.reload();
},
/* 打开编辑弹窗 */
openEdit(row) {
// cloneRecord.mi
this.form = Object.assign({}, row);
this.showEdit = true;
this.$nextTick(() => {
this.$refs.form.clearValidate(); // 清除表单验证信息
});
},
async save() {
await this.$refs.form.validate();
const hide = this.$message.loading('请求中..', 0);
const form = this.form;
if (form.drinkingWaterDictId) {
updateDrinkingWaterDict(form)
.then((res) => {
if (res.data.code == 0) {
this.showEdit = false;
this.$message.success(res.data.msg);
this.reload();
} else {
this.$message.error(res.data.msg);
}
})
.catch((error) => {
this.$message.error(error.message);
})
.finally(() => {
hide();
});
} else {
saveDrinkingWaterDict(form)
.then((res) => {
if (res.data.code == 0) {
this.showEdit = false;
this.$message.success(res.data.msg);
this.reload();
} else {
this.$message.error(res.data.msg);
}
})
.catch((error) => {
this.$message.error(error.message);
})
.finally(() => {
hide();
});
}
},
/* 删除单个 */
remove(row) {
const hide = this.$message.loading('请求中..', 0);
removeDrinkingWaterDict(row.drinkingWaterDictId).then((res) => {
hide();
if (res.data.code === 0) {
this.$message.success(res.data.msg);
this.reload();
} else {
this.$message.error(res.data.msg);
}
}).catch(e => {
hide();
this.$message.error(e.message);
})
},
/* 批量删除 */
removeBatch() {
const hide = this.$message.loading('请求中..', 0);
const ids = this.selectionList.map((item) => item.drinkingWaterDictId);
removeBatchDrinkingWaterDict(ids).then((res) => {
if (res.data.code === 0) {
this.$message.success(res.data.msg);
this.reload();
} else {
this.$message.error(res.data.msg);
}
}).catch(e => {
this.$message.error(e.message);
}).finally(() => {
hide();
})
},
getOptions(){
getColumnOptions("year").then(res => {
console.log(res)
if (res.data.code == 0) {
this.yearOptions = res.data.data.map(item => {
return {
label: item,
value: item
}
})
}
})
},
setCYear(e){
this.cYear = e.key;
this.showNYear = true;
},
copyBatch(){
const hide = this.$message.loading('请求中..', 0);
copyBatchPlace({cyear:Number(this.cYear),nyear:this.nYear}).then(res=>{
if (res.data.code === 0) {
this.$message.success(res.data.msg);
this.reload();
this.getOptions();
} else {
this.$message.error(res.data.msg);
}
this.showNYear = false;
}).catch(e => {
this.$message.error(e.message);
}).finally(() => {
hide();
})
},
exportData(){
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);
});
console.log(arr);
let sheet = XLSX.utils.aoa_to_sheet(arr);
console.log(arr);
this.$util.exportSheet(XLSX, sheet, new Date().getTime().toString());
}
},
};
</script>
<style scoped lang="less">
</style>

View File

@@ -76,9 +76,9 @@
>
<template #waterCode="{text,record}">
<span >
<span>
{{
record.reportTime==null?text="":
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="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"
@@ -110,19 +110,11 @@ import { tableColumns } from "./colums";
// import moment from "moment";
// import utils from "./utils";
// const columns =tableColumns;
// {
// title: "创建人",
// dataIndex: "username",
// sorter: true,
// },
export default {
name: "DrinkingWaterBase",
components: {},
data() {
return {
data: [],
@@ -203,7 +195,7 @@ export default {
// },
/* 刷新表格 */
reload() {
this.$refs.table.reload({
where: this.where,
});

View File

@@ -1,5 +1,13 @@
import moment from "moment"
//市级数据总览表格
const tableColumns = [
{ title: "省份", dataIndex: "province", sorter: true, },
{ title: "省份代码", dataIndex: "provinceCode", sorter: true, },
{ title: "城市名称", dataIndex: "city", sorter: true, },
{ title: "城市代码", dataIndex: "cityCode", sorter: true, },
{ title: "重点城市区分", dataIndex: "keyCity", sorter: true, },
{ title: "南北方城市", dataIndex: "cityOrientation", sorter: true, },
{ title: "断面名称", dataIndex: "place", sorter: true, },
{ title: "断面代码", dataIndex: "sectionCode", sorter: true, },
{ title: "水源名称", dataIndex: "sourceWaterName", sorter: true, },
@@ -142,5 +150,245 @@ const tableColumns = [
{ title: "1,1,1-三氯乙烷(mg/L)", dataIndex: "c2h3cl3_111", sorter: true, },
{ title: "1,1,2-三氯乙烷(mg/L)", dataIndex: "c2h3cl3_112", sorter: true, },
];
export { tableColumns }
export { tableColumns }
//县级数据总览表格
const tableColumns2 = [
{ title: "省份", dataIndex: "province", sorter: true, },
{ title: "省份代码", dataIndex: "provinceCode", sorter: true, },
{ title: "城市名称", dataIndex: "city", sorter: true, },
{ title: "城市代码", dataIndex: "cityCode", sorter: true, },
// { title: "重点城市区分", dataIndex: "keyCity", sorter: true, },
{title:"县域名称",dataIndex:"county",sorter:true},
{title:"县域代码",dataIndex:"county",sorter:true},
// { title: "南北方城市", dataIndex: "cityOrientation", sorter: true, },
{ title: "断面名称", dataIndex: "place", sorter: true, },
// { title: "断面代码", dataIndex: "sectionCode", sorter: true, },
{ title: "水源名称", dataIndex: "sourceWaterName", sorter: true, },
{ title: "所属水系", dataIndex: "subordinateWater", sorter: true, },
{ title: "水源地性质", dataIndex: "waterSourceProperty", sorter: true, },
{ title: "取水点经度", dataIndex: "longitude", sorter: true, },
{ title: "取水点纬度", dataIndex: "latitude", sorter: true, },
{ title: "本月取水量", dataIndex: "waterWithdrawal", sorter: true, },
{ title: "采样时间", dataIndex: "reportTime", sorter: true, customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").format("YYYY/MM/DD")},
{ title: "水期代码", dataIndex: "waterPhaseCode",sorter: true,
slots:{customRender:'waterCode' }
},
{ title: "水温", dataIndex: "waterTemperature", sorter: true, },
// {title: "采样时间",dataIndex: "monitorTime",sorter: true,},
{ title: "pH(无量纲)", dataIndex: "ph", sorter: true, },
{ title: "溶解氧", dataIndex: "dissolvedOxygen", sorter: true, },
{ title: "高锰酸盐指数", dataIndex: "permanganateIndex", sorter: true, },
{ title: "化学需氧量", dataIndex: "cod", sorter: true, },
{ title: "五日生化需氧量", dataIndex: "fiveDayBod", sorter: true, },
{ title: "氨氮", dataIndex: "ammonia", sorter: true, },
{ title: "总磷", dataIndex: "totalPhosphorus", sorter: true, },
{ title: "总氮", dataIndex: "totalNitrogen", sorter: true, },
{ title: "铜", dataIndex: "cu", sorter: true, },
{ title: "锌", dataIndex: "zn", sorter: true, },
{ title: "氟化物", dataIndex: "fluoride", sorter: true, },
{ title: "硒", dataIndex: "se", sorter: true, },
{ title: "砷", dataIndex: "as", sorter: true, },
{ title: "汞", dataIndex: "hg", sorter: true, },
{ title: "镉", dataIndex: "cd", sorter: true, },
{ title: "铬(六价)", dataIndex: "cr", sorter: true, },
{ title: "铅", dataIndex: "pb", sorter: true, },
{ title: "氰化物", dataIndex: "cyanide", sorter: true, },
{ title: "挥发酚", dataIndex: "volatilePhenol", sorter: true, },
{ title: "石油类", dataIndex: "petro", sorter: true, },
{ title: "阴离子表面活性剂", dataIndex: "anionicSurfactant", sorter: true, },
{ title: "硫化物", dataIndex: "sulfide", sorter: true, },
{ title: "粪大肠菌群(MPN/L)", dataIndex: "fecalColiforms", sorter: true, },
{ title: "硫酸盐", dataIndex: "sulfate", sorter: true, },
{ title: "氯化物", dataIndex: "chloride", sorter: true, },
{ title: "硝酸盐氮", dataIndex: "nitrateNitrogen", sorter: true, },
{ title: "铁", dataIndex: "fe", sorter: true, },
{ title: "锰", dataIndex: "mn", sorter: true, },
{ title: "三氯甲烷", dataIndex: "chcl3", sorter: true, },
{ title: "四氯化碳", dataIndex: "ccl4", sorter: true, },
{ title: "三溴甲烷", dataIndex: "chbr3", sorter: true, },
{ title: "二氯甲烷", dataIndex: "ch2cl2", sorter: true, },
{ title: "12-二氯乙烷", dataIndex: "c2h4cl2", sorter: true, },
{ title: "环氧氯丙烷", dataIndex: "c3h5clO", sorter: true, },
{ title: "氯乙烯", dataIndex: "c2h3cl", sorter: true, },
{ title: "11-二氯乙烯", dataIndex: "c2h2cl211", sorter: true, },
{ title: "12-二氯乙烯", dataIndex: "c2h2cl212", sorter: true, },
{ title: "三氯乙烯", dataIndex: "c2hcl3", sorter: true, },
{ title: "四氯乙烯", dataIndex: "c2cl4", sorter: true, },
{ title: "氯丁二烯", dataIndex: "c4h5cl", sorter: true, },
{ title: "六氯丁二烯", dataIndex: "c4cl6", sorter: true, },
{ title: "苯乙烯", dataIndex: "c8h8", sorter: true, },
{ title: "甲醛", dataIndex: "ch2o", sorter: true, },
{ title: "乙醛", dataIndex: "c2h4o", sorter: true, },
{ title: "丙烯醛", dataIndex: "c3h4o", sorter: true, },
{ title: "三氯乙醛", dataIndex: "c2hcl3o", sorter: true, },
{ title: "苯", dataIndex: "c6h6", sorter: true, },
{ title: "甲苯", dataIndex: "c7h8", sorter: true, },
{ title: "乙苯", dataIndex: "c8h10Ethylbenzene", sorter: true, },
{ title: "二甲苯", dataIndex: "c8h10Dimethylbenzene", sorter: true, },
{ title: "异丙苯", dataIndex: "c9h12", sorter: true, },
{ title: "氯苯", dataIndex: "c6h5cl", sorter: true, },
{ title: "12-二氯苯", dataIndex: "c6h4cl212", sorter: true, },
{ title: "14-二氯苯", dataIndex: "c6h4cl214", sorter: true, },
{ title: "三氯苯", dataIndex: "c6h3cl3", sorter: true, },
{ title: "四氯苯", dataIndex: "c6h2cl4", sorter: true, },
{ title: "六氯苯", dataIndex: "c6cl6", sorter: true, },
{ title: "硝基苯", dataIndex: "c6h5no2", sorter: true, },
{ title: "二硝基苯", dataIndex: "c6h4n2o4", sorter: true, },
{ title: "24-二硝基甲苯", dataIndex: "c7h6n2o4", sorter: true, },
{ title: "246-三硝基甲苯", dataIndex: "c7h5o6n3", sorter: true, },
{ title: "硝基氯苯", dataIndex: "c6h4clno2", sorter: true, },
{ title: "24-二硝基氯苯 ", dataIndex: "c6h3cln2o4", sorter: true, },
{ title: "24-二氯苯酚", dataIndex: "c6h4cl2o", sorter: true, },
{ title: "246-三氯苯酚", dataIndex: "c6h3cl3o", sorter: true, },
{ title: "五氯酚", dataIndex: "c6hcl5o", sorter: true, },
{ title: "苯胺", dataIndex: "c6h7n", sorter: true, },
{ title: "联苯胺", dataIndex: "c6h4nh22", sorter: true, },
{ title: "丙烯酰胺", dataIndex: "c3h5no", sorter: true, },
{ title: "丙烯腈", dataIndex: "c3h3n", sorter: true, },
{ title: "邻苯二甲酸二丁酯", dataIndex: "c16h22o4", sorter: true, },
{ title: "邻苯二甲酸二2-乙基已基)酯", dataIndex: "c16h35o4p", sorter: true, },
{ title: "水合肼", dataIndex: "n2h4h2o", sorter: true, },
{ title: "四乙基铅", dataIndex: "c8h20pd", sorter: true, },
{ title: "吡啶", dataIndex: "c5h5n", sorter: true, },
{ title: "松节油", dataIndex: "turpentine", sorter: true, },
{ title: "苦味酸", dataIndex: "c6h3n3o7", sorter: true, },
{ title: "丁基黄原酸", dataIndex: "butylXanthogenAcid", sorter: true, },
{ title: "活性氯", dataIndex: "activeChlorine", sorter: true, },
{ title: "滴滴涕", dataIndex: "c14h9cl5", sorter: true, },
{ title: "林丹", dataIndex: "c6h6cl6", sorter: true, },
{ title: "环氧七氯", dataIndex: "c10h5cl7O", sorter: true, },
{ title: "对硫磷", dataIndex: "c10h14no5ps", sorter: true, },
{ title: "甲基对硫磷", dataIndex: "c8h10o5nps", sorter: true, },
{ title: "马拉硫磷", dataIndex: "c10h19o6ps2", sorter: true, },
{ title: "乐果", dataIndex: "c5h12no3ps2", sorter: true, },
{ title: "敌敌畏", dataIndex: "c4h7cl2o4p", sorter: true, },
{ title: "敌百虫", dataIndex: "c4h8cl3o4p", sorter: true, },
{ title: "内吸磷", dataIndex: "c8h19o3ps2", sorter: true, },
{ title: "百菌清", dataIndex: "c8cl4n2", sorter: true, },
{ title: "甲萘威", dataIndex: "c12h11no2", sorter: true, },
{ title: "溴氰菊酯", dataIndex: "c22h19br2no3", sorter: true, },
{ title: "阿特拉津", dataIndex: "c8h14cln5", sorter: true, },
{ title: "苯并(a)芘 ", dataIndex: "c20h12", sorter: true, },
{ title: "甲基汞", dataIndex: "ch3hg", sorter: true, },
{ title: "多氯联苯", dataIndex: "c12h10Xclx", sorter: true, },
{ title: "微囊藻毒素-LR", dataIndex: "微囊藻毒素-LR", sorter: true, },
{ title: "黄磷", dataIndex: "p4", sorter: true, },
{ title: "钼", dataIndex: "mo", sorter: true, },
{ title: "钴", dataIndex: "co", sorter: true, },
{ title: "铍", dataIndex: "be", sorter: true, },
{ title: "硼", dataIndex: "b", sorter: true, },
{ title: "锑", dataIndex: "sb", sorter: true, },
{ title: "镍", dataIndex: "ni", sorter: true, },
{ title: "钡", dataIndex: "ba", sorter: true, },
{ title: "钒", dataIndex: "v", sorter: true, },
{ title: "钛", dataIndex: "ti", sorter: true, },
{ title: "铊", dataIndex: "tl", sorter: true, },
{ title: "六价铬", dataIndex: "cr6", sorter: true, },
{ title: "邻二氯苯", dataIndex: "odcb", sorter: true, },
{ title: "对二氯苯", dataIndex: "pdcp", sorter: true, },
{ title: "苯并(a)芘", dataIndex: "bap", sorter: true, },
{ title: "苯并(b)荧蒽", dataIndex: "bbfa", sorter: true, },
{ title: "磷酸盐", dataIndex: "phosphate", sorter: true, },
{ title: "急性毒性", dataIndex: "acuteToxicity", sorter: true, },
{ title: "余氯", dataIndex: "residualChlorine", sorter: true, },
{ title: "六六六", dataIndex: "c6h6cl6666", sorter: true, },
{ title: "2,4,6-三氯酚", dataIndex: "c6h3cl3o246", sorter: true, },
//新增
{ title: "叶绿素mg/m3)", dataIndex: "chlorophyll", sorter: true, },
{ title: "透明度cm", dataIndex: "transparency", sorter: true, },
{ title: "总α放射性", dataIndex: "totalAlphaRadioactivity", sorter: true, },
{ title: "总β放射性", dataIndex: "totalBetaRadioactivity", sorter: true, },
{ title: "1,1,1-三氯乙烷(mg/L)", dataIndex: "c2h3cl3_111", sorter: true, },
{ title: "1,1,2-三氯乙烷(mg/L)", dataIndex: "c2h3cl3_112", sorter: true, },
];
export { tableColumns2 }
//农村数据总览表格
const tableColumns3=[
// {title:"断面代码",dataIndex:"sectionCode",sorter:true},
{title: "省",dataIndex: "province",sorter: true,},
{title: "省份代码", dataIndex: "provinceCode", sorter: true, },
{title: "市",dataIndex: "city",sorter: true,},
{ title: "城市代码", dataIndex: "cityCode", sorter: true, },
{ title: "重点城市区分", dataIndex: "keyCity", sorter: true, },
{ title: "南北方城市", dataIndex: "cityOrientation", sorter: true, },
// {title: "城区",dataIndex: "城区",sorter: true,},
// {title: "县(区)",dataIndex: "county",sorter: true,},
// {title: "乡镇",dataIndex: "township",sorter: true,},
// {title: "村",dataIndex: "village",sorter: true,},
{title: "点位名称",dataIndex: "place",sorter: true,},
{ title: "断面代码", dataIndex: "sectionCode", sorter: true, },
{ title: "所属水系", dataIndex: "subordinateWater", sorter: true, },
{ title: "水源地性质", dataIndex: "waterSourceProperty", sorter: true, },
{ title: "本月取水量", dataIndex: "waterWithdrawal", sorter: true, },
{title: "监测时间",dataIndex: "monitorTime",sorter: true,customRender: ({text}) => moment(text, "YYYY/MM/DD HH:mm:ss").format("YYYY/MM/DD")},
{ title: "水期代码", dataIndex: "waterPhaseCode",sorter: true,
slots:{customRender:'waterCode' }
},
// {title: "湖库(是/否)",dataIndex: "lakeLibraryFlag",sorter: true,},
// {title: "必测村庄(是/否) ",dataIndex: "mustTestVillagesFlag",sorter: true,},
{title: "经度(°)",dataIndex: "longitude",sorter: true,},
{title: "纬度(°)",dataIndex: "latitude",sorter: true,},
{title: "服务人口数量(人)",dataIndex: "numberServingPopulation",sorter: true,},
{title: "日供水规模(吨)",dataIndex: "dailyWaterSupplyScale",sorter: true,},
{title: "水温(℃)",dataIndex: "waterTemperature",sorter: true,},
{title: "pH(mg/L)",dataIndex: "ph",sorter: true,},
{title: "溶解氧(mg/L)",dataIndex: "dissolvedOxygen",sorter: true,},
{title: "高锰酸盐指数(mg/L)",dataIndex: "permanganateIndex",sorter: true,},
{title: "五日生化需氧量(mg/L)",dataIndex: "fiveDayBod",sorter: true,},
{title: "氨氮(mg/L)",dataIndex: "ammonia",sorter: true,},
{title: "总磷 (mg/L)",dataIndex: "totalPhosphorus",sorter: true,},
{title: "总氮 (mg/L)",dataIndex: "totalNitrogen",sorter: true,},
{title: "铜 (mg/L)",dataIndex: "cu",sorter: true,},
{title: "锌 (mg/L)",dataIndex: "zn",sorter: true,},
{title: "氟化物(mg/L)",dataIndex: "fluoride",sorter: true,},
{title: "硒 (mg/L)",dataIndex: "se",sorter: true,},
{title: "砷 (mg/L)",dataIndex: "as",sorter: true,},
{title: "汞 (mg/L)",dataIndex: "hg",sorter: true,},
{title: "镉 (mg/L)",dataIndex: "cd",sorter: true,},
{title: "铬(六价)(mg/L)",dataIndex: "cr",sorter: true,},
{title: "铅 (mg/L)",dataIndex: "pb",sorter: true,},
{title: "氰化物 (mg/L)",dataIndex: "cyanide",sorter: true,},
{title: "挥发酚 (mg/L)",dataIndex: "volatilePhenol",sorter: true,},
{title: "石油类 (mg/L)",dataIndex: "petro",sorter: true,},
{title: "阴离子表面活性剂 (mg/L)",dataIndex: "anionicSurfactant",sorter: true,},
{title: "硫化物 (mg/L)",dataIndex: "sulfide",sorter: true,},
{title: "粪大肠菌群(个/L)",dataIndex: "fecalColiforms",sorter: true,},
{title: "硫酸盐 (mg/L)",dataIndex: "sulfate",sorter: true,},
{title: "氯化物 (mg/L)",dataIndex: "chloride",sorter: true,},
{title: "硝酸盐氮 (mg/L)",dataIndex: "nitrateNitrogen",sorter: true,},
{title: "铁 (mg/L)",dataIndex: "fe",sorter: true,},
{title: "锰 (mg/L)",dataIndex: "mn",sorter: true,},
{title: "水质类别",dataIndex: "waterQualityCategory",sorter: true,},
{title: "特征污染物监测项目名称",dataIndex: "characteristicPollutantMonitoringProjectName",sorter: true,},
{title: "特征污染物监测数值(mg/L)",dataIndex: "characteristicPollutantMonitoringValue",sorter: true,},
{title: "色(mg/L)",dataIndex: "color",sorter: true,},
{title: "嗅和味",dataIndex: "smellAndTaste",sorter: true,},
{title: "浊度",dataIndex: "turbidity",sorter: true,},
{title: "肉眼可见物",dataIndex: "visibleNakedEye",sorter: true,},
{title: "总硬度(mg/L)",dataIndex: "totalHardness",sorter: true,},
{title: "溶解性总固体(mg/L)",dataIndex: "totalDissolvedSolids",sorter: true,},
{title: "铝(mg/L)",dataIndex: "ai",sorter: true,},
{title: "耗氧量(mg/L)",dataIndex: "oxygenConsumption",sorter: true,},
{title: "硝酸盐(mg/L)",dataIndex: "nitrate",sorter: true,},
{title: "亚硝酸盐(mg/L)",dataIndex: "nitrite",sorter: true,},
{title: "钠(mg/L)",dataIndex: "na",sorter: true,},
{title: "碘化物(mg/L)",dataIndex: "lodide",sorter: true,},
{title: "总大肠菌群(个/L)",dataIndex: "totalColiform",sorter: true,},
{title: "菌落总数(CFU/mL)",dataIndex: "totalNumberColonies",sorter: true,},
{title: "三氯甲烷μg/L",dataIndex: "chcl3",sorter: true,},
{title: "四氯化碳 μg/L",dataIndex: "ccl4",sorter: true,},
{title: "苯 μg/L",dataIndex: "c6h6",sorter: true,},
{title: "甲苯 μg/L",dataIndex: "c7h8",sorter: true,},
{title: "总α放射性(Bq/L)",dataIndex: "totalAlphaRadioactivity",sorter: true,},
{title: "总β放射性(Bq/L)",dataIndex: "totalBetaRadioactivity",sorter: true,},
{title: "备注",dataIndex: "remark",sorter: true,},
];
export {
tableColumns3
}

View File

@@ -0,0 +1,228 @@
<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-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-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)"
>
<template #waterCode="{text,record}">
<span >
{{
record.reportTime==null? text="":
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="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>
</template>
</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 {
pageDrinkingWaterCountyStatisticUrl,
// 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 { tableColumns2 } from "./colums";
// import moment from "moment";
// import utils from "./utils";
// const columns =tableColumns;
export default {
name: "DrinkingWaterBase",
components: {},
data() {
return {
data: [],
locale,
bill: {},
// 表格数据接口
url: pageDrinkingWaterCountyStatisticUrl,
selection: [],
columns:[
// {
// title: "水期代码",
// dataIndex: "waterPhaseCode",
// sorter: true,
// slots:{customRender:'waterCode' }
// },
...tableColumns2,
],
// 表格列配置
// 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 = [
...tableColumns2,
];
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

@@ -4,11 +4,12 @@
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="city" tab="市级">
<a-tabs v-model:active="activeCity">
<a-tab-pane key="city" tab="数据总览">
<a-tab-pane tab="数据总览" key="city" >
<base-statistic></base-statistic>
</a-tab-pane>
<a-tab-pane tab="超标评价" key="base1">
<function-bill ref="functionWater"></function-bill>
<!-- <function-bill ref="functionWater"></function-bill> -->
</a-tab-pane>
<a-tab-pane tab="水质类别" key="base2">
<function-bill ref="functionWater"></function-bill>
@@ -17,8 +18,8 @@
</a-tab-pane>
<a-tab-pane key="county" tab="县级">
<a-tabs v-model:active="activeCounty">
<a-tab-pane key="County" tab="数据总览">
<base-statistic></base-statistic>
<a-tab-pane tab="数据总览" key="County">
<county-data></county-data>
</a-tab-pane>
<a-tab-pane tab="超标评价" key="base1">
<function-bill ref="functionWater"></function-bill>
@@ -33,8 +34,8 @@
</a-tab-pane> -->
<a-tab-pane key="village" tab="农村">
<a-tabs v-model:active="activeVillage">
<a-tab-pane key="village" tab="数据总览">
<base-statistic></base-statistic>
<a-tab-pane tab="数据总览" key="village">
<village></village>
</a-tab-pane>
<a-tab-pane tab="超标评价" key="base1">
<function-bill ref="functionWater"></function-bill>
@@ -56,6 +57,8 @@
*
*/
import BaseStatistic from "./base.vue";
import countyData from "./countyData.vue"
import village from "./villageData.vue"
// import QuarterStatistic from "./quarter.vue";
// import Compare from "./compare.vue"
// import AverageStatistic from "./average.vue"
@@ -64,6 +67,8 @@
name: 'DrinkWaterCollectIndex',
components: {
BaseStatistic,
countyData,
village
// QuarterStatistic,
// Compare,
// AverageStatistic

View File

@@ -0,0 +1,228 @@
<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-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-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
<a-space>
<a-button type="primary" @click="reload">查询3</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)"
>
<template #waterCode="{text,record}">
<span >
{{
record.monitorTime==null? text="":
record.monitorTime.substr(5,2)=="01" || record.monitorTime.substr(5,2) == "02" ||record.monitorTime.substr(5,2) == "03" ||record.monitorTime.substr(5,2)=="12"
? text="K":
record.monitorTime.substr(5,2)=="04" || record.monitorTime.substr(5,2) == "05" ||record.monitorTime.substr(5,2)=="10"||record.monitorTime.substr(5,2)=="11"
? text="P":
record.monitorTime.substr(5,2)=="06" || record.monitorTime.substr(5,2) == "07" ||record.monitorTime.substr(5,2)=="08"||record.monitorTime.substr(5,2)=="09"
? text="F":text="无采样时间"
}}
</span>
</template>
</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 {
pageDrinkingWaterVillageStatisticUrl,
// getColumnOptions
} from "@/api/ecology/drinking-water-village";
// import pageDictUrl from "@/api/ecology/drinking-water-dict"
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import { tableColumns3 } from "./colums";
// import moment from "moment";
// import utils from "./utils";
// const columns =tableColumns;
export default {
name: "DrinkingWaterBase",
components: {},
data() {
return {
data: [],
locale,
bill: {},
// 表格数据接口
url: pageDrinkingWaterVillageStatisticUrl,
selection: [],
columns:[
// {
// title: "水期代码",
// dataIndex: "waterPhaseCode",
// sorter: true,
// slots:{customRender:'waterCode' }
// },
...tableColumns3,
],
// 表格列配置
// 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 = [
...tableColumns3,
];
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>