Guoyan
/
ops-management-platform-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

水环境污染演变开发

environment_dev
wbc 3 days ago
parent
de8a5f6757
commit
c68ff0d0d1
22 changed files with 1311 additions and 276 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/layouts/local/dashboard/analysis/components/VisitAnalysis.vue
  2. 10
      src/views/achievement/achievementType/api.ts
  3. 30
      src/views/achievement/achievementType/index.vue
  4. 32
      src/views/achievement/achievementType/secondTab.vue
  5. 10
      src/views/achievement/goalDistrict/api.ts
  6. 133
      src/views/achievement/goalDistrict/index.vue
  7. 10
      src/views/achievement/goalTimes/api.ts
  8. 130
      src/views/achievement/goalTimes/index.vue
  9. 10
      src/views/pollution/manage/manage.api.ts
  10. 24
      src/views/pollution/manage/table.vue
  11. 8
      src/views/water/waterEnvironment/fourAxis.vue
  12. 6
      src/views/water/waterEnvironment/index.vue
  13. 2
      src/views/water/waterEnvironment/singerAxis.vue
  14. 2
      src/views/water/waterEnvironment/singerBar.vue
  15. 342
      src/views/water/waterPollution/fourAxis.vue
  16. 45
      src/views/water/waterPollution/index.vue
  17. 350
      src/views/water/waterPollution/mutiBar.vue
  18. 266
      src/views/water/waterPollution/threeAxis.vue
  19. 167
      src/views/water/waterPollution/twoBar.vue
  20. 2
      src/views/演示使用自行删除/gitee/index.vue
  21. 2
      src/views/演示使用自行删除/visit/pages/loginLine.vue
  22. 2
      vite.config.ts

2
src/layouts/local/dashboard/analysis/components/VisitAnalysis.vue
View File

@ -25,7 +25,7 @@
},
xAxis: {
type: 'category',
boundaryGap: false,
boundaryGap: true,
data: [...new Array(18)].map((_item, index) => `${index + 6}:00`),
splitLine: {
show: true,

10
src/views/achievement/achievementType/api.ts
View File

@ -0,0 +1,10 @@
import { defHttp } from '@/utils/http/axios';
enum Api {
list = '/evr/project/getInfoList',
}
export function list(params?: any) {
return defHttp.get({ url: Api.list, params });
}

30
src/views/achievement/achievementType/index.vue
View File

@ -3,21 +3,23 @@
<div style="margin: 20px; border-radius: 10px; background: #fff">
<div class="tabBox">
<a-tabs v-model:activeKey="activeKey" size="large">
<a-tab-pane key="1" tab="城镇污水及配套工程">
<secondTab :loading="loading" />
<a-tab-pane key="城镇污水处理及配套" tab="城镇污水处理及配套">
<secondTab :loading="loading" type="城镇污水处理及配套"/>
</a-tab-pane>
<a-tab-pane key="2" tab="河道整治">
<secondTab :loading="loading" />
<a-tab-pane key="河道整治" tab="河道整治">
<secondTab :loading="loading" type="河道整治" />
</a-tab-pane>
<a-tab-pane key="3" tab="农业农村面源污染治理">
<secondTab :loading="loading" />
<a-tab-pane key="农业农村面源污染治理" tab="农业农村面源污染治理">
<secondTab :loading="loading" type="农业农村面源污染治理" />
</a-tab-pane>
<a-tab-pane key="4" tab="引用水源地保护建设">
<secondTab :loading="loading" />
<a-tab-pane key="饮用水源地保护建设" tab="饮用水源地保护建设">
<secondTab :loading="loading" type="饮用水源地保护建设"/>
</a-tab-pane>
<a-tab-pane key="5" tab="内源治理"> <secondTab :loading="loading" /> </a-tab-pane>
<a-tab-pane key="6" tab="水资源综合利用及调度">
<secondTab :loading="loading" />
<a-tab-pane key="内源治理" tab="内源治理">
<secondTab :loading="loading" type="内源治理" />
</a-tab-pane>
<a-tab-pane key="水资源综合利用及调度" tab="水资源综合利用及调度">
<secondTab :loading="loading" type="水资源综合利用及调度"/>
</a-tab-pane>
</a-tabs>
</div>
@ -29,8 +31,12 @@
import { ref } from 'vue';
import { PageWrapper } from '@/components/Page';
import secondTab from './secondTab.vue';
import {list} from './api'
// const tabChange = async(key) =>{
// const res = await list({projectTypeList:key})
const activeKey = ref<String>('1');
// }
const activeKey = ref<String>('城镇污水处理及配套');
const loading = ref(false);
</script>
<style lang="less">

32
src/views/achievement/achievementType/secondTab.vue
View File

@ -77,7 +77,7 @@
import { watch, ref, Ref, watchEffect } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { Card } from 'ant-design-vue';
import {list } from './api'
const subTab = ref<String>('a');
const props = defineProps({
loading: Boolean,
@ -89,29 +89,39 @@
type: String as PropType<string>,
default: '300px',
},
type:{
type: String as any,
default:'城镇污水处理及配套'
}
});
const getInfo = () =>{
const res = list({projectTypeList:props.type})
console.log(res)
}
getInfo()
const dataSource1 = ref([]);
const columns1 = [
{
dataIndex: 'date',
key: 'date',
dataIndex: 'projectDate',
key: 'projectDate',
title: '项目时期',
width: 200,
},
{
dataIndex: 'name',
key: 'name',
dataIndex: 'projectName',
key: 'projectName',
title: '项目名称',
},
{
dataIndex: 'technology',
key: 'technology',
title: '技术',
dataIndex: 'projectTech',
key: 'projectTech',
title: '水环境保护治理技术',
},
{
dataIndex: 'technologyInfo',
key: 'technologyInfo',
title: '技术详情',
dataIndex: 'techName',
key: 'techName',
title: '技术名称',
},
];
const dataSource2 = ref([]);

10
src/views/achievement/goalDistrict/api.ts
View File

@ -0,0 +1,10 @@
import { defHttp } from '@/utils/http/axios';
enum Api {
list = '/evr/area/getList',
}
export function list(params?: any) {
return defHttp.get({ url: Api.list, params });
}

133
src/views/achievement/goalDistrict/index.vue
View File

@ -2,17 +2,12 @@
<PageWrapper dense>
<div style="margin: 1%; padding: 1%; border-radius: 10px; background: #fff">
<span>控制区：</span>
<a-cascader
v-model:value="district"
:options="districtOptions"
placeholder="请选择"
change-on-select
@change="districtChange"
/>
<a-input v-model:value="district" style="width:180px"></a-input>
<a-button type="primary" @click="search" style="margin-left: 20px;">查询</a-button>
<div v-for="(i, index) in goalDistrictInfo" style="margin: 20px 0" :key="index">
<div style="margin: 10px">{{ i.msg }}</div>
<div style="margin: 10px">{{ i.description }}</div>
<div>
<a-table :dataSource="i.list" :columns="columns" :pagination="false" bordered />
<a-table :dataSource="i.areaInfo" :columns="columns" :pagination="false" bordered />
</div>
</div>
</div>
@ -22,116 +17,18 @@
<script setup lang="ts">
import { ref } from 'vue';
import { PageWrapper } from '@/components/Page';
import {list} from './api'
//地区
const district = ref<any>([]);
const district = ref('');
const districtOptions = ref([
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
]);
const districtChange = () => {
console.log(district.value);
};
const goalDistrictInfo = [
{
msg: '1996-2000：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
list: [
{
district: '1995',
river: '100',
cross: '80',
goal: '80%',
thirdFive: '30',
fourthFive: '20',
fifthFive: '67%',
},
],
},
{
msg: '1996-2000：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
list: [
{
district: '1995',
river: '100',
cross: '80',
goal: '80%',
thirdFive: '30',
fourthFive: '20',
fifthFive: '67%',
},
{
district: '1995',
river: '100',
cross: '80',
goal: '80%',
thirdFive: '30',
fourthFive: '20',
fifthFive: '67%',
},
],
},
{
msg: '1996-2000：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
list: [
{
district: '1995',
river: '100',
cross: '80',
goal: '80%',
thirdFive: '30',
fourthFive: '20',
fifthFive: '67%',
},
{
district: '1995',
river: '100',
cross: '80',
goal: '80%',
thirdFive: '30',
fourthFive: '20',
fifthFive: '67%',
},
{
district: '1995',
river: '100',
cross: '80',
goal: '80%',
thirdFive: '30',
fourthFive: '20',
fifthFive: '67%',
},
],
},
];
const search = async() =>{
const res = await list({district:district.value})
goalDistrictInfo.value = res
console.log(res)
}
const goalDistrictInfo = ref([
])
const columns = [
{
@ -152,8 +49,8 @@
title: '水体',
},
{
dataIndex: 'cross',
key: 'cross',
dataIndex: 'controlSection',
key: 'controlSection',
title: '控制断面',
},
{

10
src/views/achievement/goalTimes/api.ts
View File

@ -0,0 +1,10 @@
import { defHttp } from '@/utils/http/axios';
enum Api {
list = '/evr/project/getInvestmentStats',
}
export function list(params?: any) {
return defHttp.get({ url: Api.list, params });
}

130
src/views/achievement/goalTimes/index.vue
View File

@ -1,11 +1,11 @@
<template>
<PageWrapper dense>
<div style="margin: 1%; padding: 1%; border-radius: 10px; background: #fff">
<div v-for="(i, index) in goalTimesMsg" style="margin: 20px 0 20px 20px" :key="index">{{
<div v-for="(i, index) in description" style="margin: 20px 0 20px 20px" :key="index">{{
i
}}</div>
<div>
<a-table :dataSource="goalTimeList" :columns="columns" :pagination="false" />
<a-table :dataSource="projectInfo" :columns="columns" :pagination="false" />
</div>
</div>
</PageWrapper>
@ -14,14 +14,8 @@
<script setup lang="ts">
import { ref } from 'vue';
import { PageWrapper } from '@/components/Page';
const goalTimesMsg = [
'1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
'1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
'1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
'1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
'1995年：建成100座城镇污水处理厂，完成核心截污工程，完成鄞州区河道截污疏浚工程，完成首南底泥疏浚一期工程',
];
import {list} from './api'
const description = ref([])
const columns = [
{
@ -29,21 +23,6 @@
key: 'date',
title: '时期',
},
// {
// dataIndex: 'planProject',
// key: 'planProject',
// title: '规划项目',
// },
// {
// dataIndex: 'actualProject',
// key: 'actualProject',
// title: '实际实施项目',
// },
// {
// dataIndex: 'projectPercent',
// key: 'projectPercent',
// title: '实施率',
// },
{
dataIndex: 'planInvest',
key: 'planInvest',
@ -57,101 +36,18 @@
{
dataIndex: 'investPercent',
key: 'investPercent',
title: '完成投资率',
title: '完成投资率%',
},
];
const goalTimeList = ref([
{
date: '1995',
planProject: '100',
actualProject: '80',
projectPercent: '80%',
planInvest: '30',
actualInvest: '20',
investPercent: '67%',
},
{
date: '1995',
planProject: '100',
actualProject: '80',
projectPercent: '80%',
planInvest: '30',
actualInvest: '20',
investPercent: '67%',
},
{
date: '1995',
planProject: '100',
actualProject: '80',
projectPercent: '80%',
planInvest: '30',
actualInvest: '20',
investPercent: '67%',
},
{
date: '1995',
planProject: '100',
actualProject: '80',
projectPercent: '80%',
planInvest: '30',
actualInvest: '20',
investPercent: '67%',
},
{
date: '1995',
planProject: '100',
actualProject: '80',
projectPercent: '80%',
planInvest: '30',
actualInvest: '20',
investPercent: '67%',
},
{
date: '1995',
planProject: '100',
actualProject: '80',
projectPercent: '80%',
planInvest: '30',
actualInvest: '20',
investPercent: '67%',
},
{
date: '1995',
planProject: '100',
actualProject: '80',
projectPercent: '80%',
planInvest: '30',
actualInvest: '20',
investPercent: '67%',
},
{
date: '1995',
planProject: '100',
actualProject: '80',
projectPercent: '80%',
planInvest: '30',
actualInvest: '20',
investPercent: '67%',
},
{
date: '1995',
planProject: '100',
actualProject: '80',
projectPercent: '80%',
planInvest: '30',
actualInvest: '20',
investPercent: '67%',
},
{
date: '1995',
planProject: '100',
actualProject: '80',
projectPercent: '80%',
planInvest: '30',
actualInvest: '20',
investPercent: '67%',
},
const projectInfo = ref([
]);
const getInfo = async() =>{
const res = await list()
description.value = res.description
projectInfo.value = res.projectInfo
console.log(res)
}
getInfo()
</script>
<style lang="less">
.tabBox {

10
src/views/pollution/manage/manage.api.ts
View File

@ -1,10 +1,11 @@
import { ID, IDS, PageQuery, commonExport } from '@/api/base';
import {commonExport } from '@/api/base';
import { defHttp } from '@/utils/http/axios';
enum Api {
root = '/evr/project',
list = '/evr/project/list',
export = '/evr/project/export',
listUpload = '/evr/excel/uploadProjectInfo',
}
@ -31,3 +32,10 @@ export function update(data: any) {
export function removeByIds(ids: any) {
return defHttp.deleteWithMsg<void>({ url: `${Api.root}/${ids.join(',')}` });
}
export function listUpload(params: any) {
return defHttp.post({
url: Api.listUpload,
headers: { 'Content-Type': 'multipart/form-data' },
params,
});
}

24
src/views/pollution/manage/table.vue
View File

@ -3,7 +3,14 @@
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleAdd">新增</a-button>
<a-button type="primary" @click="handleImport">导入</a-button>
<a-upload
name="file"
:before-upload="beforeUpload"
@change="importChange"
:showUploadList="false"
>
<a-button type="primary"> 导入 </a-button>
</a-upload>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column && record && column.key === 'action'">
@ -37,7 +44,7 @@
<script setup lang="ts">
import { PageWrapper } from '@/components/Page';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { list, removeByIds } from './manage.api.ts';
import { list, removeByIds, listUpload } from './manage.api.ts';
import { formSchemas, columns } from './manage.data';
import { IconEnum } from '@/enums/appEnum';
import { useGo } from '@/hooks/web/usePage';
@ -84,7 +91,18 @@
await removeByIds([record.id]);
await reload();
}
//导入
const beforeUpload = async (file: any) => {
console.log(file);
const params = {
file: file,
};
await listUpload(params);
return false;
};
const importChange = () => {
reload();
};
// 前往审批记录页面
const go = useGo();
</script>

8
src/views/water/waterEnvironment/secondTab.vue → src/views/water/waterEnvironment/fourAxis.vue
View File

@ -76,7 +76,7 @@
},
xAxis: {
type: 'category',
boundaryGap: false,
boundaryGap: true,
data: ['"1995"', '"1996"', '"1997"', '"1998"', '"1999"','"2000"', '"2001"', '"2002"', '"2003"', '"2004"'],
},
yAxis: {
@ -126,7 +126,7 @@
},
xAxis: {
type: 'category',
boundaryGap: false,
boundaryGap: true,
data: ['"1995"', '"1996"', '"1997"', '"1998"', '"1999"','"2000"', '"2001"', '"2002"', '"2003"', '"2004"'],
},
yAxis: {
@ -176,7 +176,7 @@
},
xAxis: {
type: 'category',
boundaryGap: false,
boundaryGap: true,
data: ['"1995"', '"1996"', '"1997"', '"1998"', '"1999"','"2000"', '"2001"', '"2002"', '"2003"', '"2004"'],
},
yAxis: {
@ -226,7 +226,7 @@
},
xAxis: {
type: 'category',
boundaryGap: false,
boundaryGap: true,
data: ['"1995"', '"1996"', '"1997"', '"1998"', '"1999"','"2000"', '"2001"', '"2002"', '"2003"', '"2004"'],
},
yAxis: {

6
src/views/water/waterEnvironment/index.vue
View File

@ -4,13 +4,13 @@
<div class="tabBox">
<a-tabs v-model:activeKey="activeKey" size="large">
<a-tab-pane key="1" tab="水质变化">
<secondTab :loading="loading" :title="secondTabTitle1"/>
<fourAxis :loading="loading" :title="secondTabTitle1"/>
</a-tab-pane>
<a-tab-pane key="2" tab="富营养状况变化">
<singerAxis :loading="loading" />
</a-tab-pane>
<a-tab-pane key="3" tab="蓝藻水华变化">
<secondTab :loading="loading":title="secondTabTitle3" />
<fourAxis :loading="loading":title="secondTabTitle3" />
</a-tab-pane>
<a-tab-pane key="4" tab="河流水质变化" >
<singerBar :loading="loading" />
@ -24,7 +24,7 @@
<script setup lang="ts">
import { ref } from 'vue';
import { PageWrapper } from '@/components/Page';
import secondTab from './secondTab.vue';
import fourAxis from './fourAxis.vue';
import singerAxis from './singerAxis.vue';
import singerBar from './singerBar.vue';

2
src/views/water/waterEnvironment/singerAxis.vue
View File

@ -44,7 +44,7 @@
},
xAxis: {
type: 'category',
boundaryGap: false,
boundaryGap: true,
data: [
'"1995"',
'"1996"',

2
src/views/water/waterEnvironment/singerBar.vue
View File

@ -43,7 +43,7 @@
},
xAxis: {
type: 'category',
boundaryGap: false,
boundaryGap: true,
data: [
'"1995"',
'"1996"',

342
src/views/water/waterPollution/fourAxis.vue
View File

@ -0,0 +1,342 @@
<template>
<div class="tabBox">
<div class="md:flex enter-y">
<div class="md:w-1/2 w-full">
<Card :title="title[0]" :loading="loading">
<div ref="chartRef1" :style="{ width, height }"></div>
</Card>
</div>
<div class="md:w-1/2 w-full">
<Card :title="title[1]" :loading="loading">
<div ref="chartRef2" :style="{ width, height }"></div>
</Card>
</div>
</div>
<div class="md:flex enter-y">
<div class="md:w-1/2 w-full">
<Card :title="title[2]" :loading="loading">
<div ref="chartRef3" :style="{ width, height }"></div>
</Card>
</div>
<div class="md:w-1/2 w-full">
<Card :title="title[3]" :loading="loading">
<div ref="chartRef4" :style="{ width, height }"></div>
</Card>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { watch, ref, Ref, watchEffect } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { Card } from 'ant-design-vue';
const subTab = ref<String>('a');
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
title: {
type: String as PropType<any>,
default: '300px',
},
});
const chartRef1 = ref<HTMLDivElement | null>(null);
const chartRef2 = ref<HTMLDivElement | null>(null);
const chartRef3 = ref<HTMLDivElement | null>(null);
const chartRef4 = ref<HTMLDivElement | null>(null);
const setOptions1 = useECharts(chartRef1 as Ref<HTMLDivElement>).setOptions;
const setOptions2 = useECharts(chartRef2 as Ref<HTMLDivElement>).setOptions;
const setOptions3 = useECharts(chartRef3 as Ref<HTMLDivElement>).setOptions;
const setOptions4 = useECharts(chartRef4 as Ref<HTMLDivElement>).setOptions;
watch(
() => subTab.value,
() => {
setOptions1({
tooltip: {
trigger: 'axis',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ['COD/10', 'NH3-N', 'TN', 'TP'],
},
xAxis: {
type: 'category',
boundaryGap: true,
data: [
'"1995"',
'"1996"',
'"1997"',
'"1998"',
'"1999"',
'"2000"',
'"2001"',
'"2002"',
'"2003"',
'"2004"',
],
},
yAxis: {
type: 'value',
name: '排放量/吨', // 单位说明文本
nameLocation: 'end', // 文本位置（start/center/end）
nameTextStyle: {
color: '#666',
fontSize: 12,
align: 'left', // 文本对齐方向
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
},
},
series: [
{
name: 'COD/10',
data: [90, 200, 150, 80, 70, 78, 123, 29, 45, 99],
type: 'line',
itemStyle: {},
},
{
name: 'NH3-N',
data: [132, 23, 42, 88, 66, 77, 99, 111, 122, 133],
type: 'line',
itemStyle: {},
},
{
name: 'TN',
data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
type: 'line',
itemStyle: {},
},
{
name: 'TP',
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
type: 'line',
itemStyle: {},
},
],
});
setOptions2({
tooltip: {
trigger: 'axis',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ['COD', 'NH3-N', 'TN', 'TP'],
},
xAxis: {
type: 'category',
boundaryGap: true,
data: [
'"1995"',
'"1996"',
'"1997"',
'"1998"',
'"1999"',
'"2000"',
'"2001"',
'"2002"',
'"2003"',
'"2004"',
],
},
yAxis: {
type: 'value',
name: '汇入量/吨', // 单位说明文本
nameLocation: 'end', // 文本位置（start/center/end）
nameTextStyle: {
color: '#666',
fontSize: 12,
align: 'left', // 文本对齐方向
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
},
},
series: [
{
name: 'COD',
data: [90, 200, 150, 80, 70, 78, 123, 29, 45, 99],
type: 'line',
itemStyle: {},
},
{
name: 'NH3-N',
data: [132, 23, 42, 88, 66, 77, 99, 111, 122, 133],
type: 'line',
itemStyle: {},
},
{
name: 'TN',
data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
type: 'line',
itemStyle: {},
},
{
name: 'TP',
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
type: 'line',
itemStyle: {},
},
],
});
setOptions3({
tooltip: {
trigger: 'axis',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ['COD','NH3-N','TN', 'TP'],
},
xAxis: {
type: 'category',
boundaryGap: true,
data: [
'"1995"',
'"1996"',
'"1997"',
'"1998"',
'"1999"',
'"2000"',
'"2001"',
'"2002"',
'"2003"',
'"2004"',
],
},
yAxis: {
type: 'value',
name: '生产量/吨', // 单位说明文本
nameLocation: 'end', // 文本位置（start/center/end）
nameTextStyle: {
color: '#666',
fontSize: 12,
align: 'left', // 文本对齐方向
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
},
},
series: [
{
name: 'COD',
data: [90, 200, 150, 80, 70, 78, 123, 29, 45, 99],
type: 'line',
itemStyle: {},
},
{
name: 'NH3-N',
data: [132, 23, 42, 88, 66, 77, 99, 111, 122, 133],
type: 'line',
itemStyle: {},
},
{
name: 'TN',
data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
type: 'line',
itemStyle: {},
},
{
name: 'TP',
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
type: 'line',
itemStyle: {},
},
],
});
setOptions4({
tooltip: {
trigger: 'axis',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ['COD','NH3-N','TN', 'TP'],
},
xAxis: {
type: 'category',
boundaryGap: true,
data: [
'"1995"',
'"1996"',
'"1997"',
'"1998"',
'"1999"',
'"2000"',
'"2001"',
'"2002"',
'"2003"',
'"2004"',
],
},
yAxis: {
type: 'value',
name: '汇入量/吨', // 单位说明文本
nameLocation: 'end', // 文本位置（start/center/end）
nameTextStyle: {
color: '#666',
fontSize: 12,
align: 'left', // 文本对齐方向
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
},
},
series: [
{
name: 'COD',
data: [90, 200, 150, 80, 70, 78, 123, 29, 45, 99],
type: 'line',
itemStyle: {},
},
{
name: 'NH3-N',
data: [132, 23, 42, 88, 66, 77, 99, 111, 122, 133],
type: 'line',
itemStyle: {},
},
{
name: 'TN',
data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
type: 'line',
itemStyle: {},
},
{
name: 'TP',
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
type: 'line',
itemStyle: {},
},
],
});
},
{ immediate: true },
);
</script>
<style lang="less">
.tabBox {
margin: 20px;
}
.mutiTable {
margin: 20px 0;
}
</style>

45
src/views/water/waterPollution/index.vue
View File

@ -0,0 +1,45 @@
<template>
<PageWrapper dense>
<div style="margin: 20px; border-radius: 10px; background: #fff">
<div class="tabBox">
<a-tabs v-model:activeKey="activeKey" size="large">
<a-tab-pane key="1" tab="污染源负荷变化">
<twoBar :loading="loading" />
</a-tab-pane>
<a-tab-pane key="2" tab="点源污染变化">
<threeAxis :loading="loading" />
</a-tab-pane>
<a-tab-pane key="3" tab="面源污染变化">
<fourAxis :loading="loading" :title="secondTabTitle1" />
</a-tab-pane>
<a-tab-pane key="4" tab="污染负荷汇入变化">
<mutiBar :loading="loading" />
</a-tab-pane>
</a-tabs>
</div>
</div>
</PageWrapper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { PageWrapper } from '@/components/Page';
import twoBar from './twoBar.vue';
import threeAxis from './threeAxis.vue';
import fourAxis from './fourAxis.vue';
import mutiBar from './mutiBar.vue';
const activeKey = ref<String>('1');
const loading = ref(false);
const secondTabTitle1 = ['农业农村面源污染负荷排放量变化趋势', '农业农村面源污染汇入量变化趋势', '城市面源产生量变化趋势', '城市面源汇入量变化趋势'];
</script>
<style lang="less">
.tabBox {
margin: 20px;
}
.title {
margin: 10px 0;
font-size: 20px;
font-weight: 550;
}
</style>

350
src/views/water/waterPollution/mutiBar.vue
View File

@ -0,0 +1,350 @@
<template>
<div class="tabBox">
<div class="md:flex enter-y">
<div class="md:w-1/2 w-full">
<Card title="1988年" :loading="loading">
<div ref="chartRef1" :style="{ width, height }"></div>
</Card>
</div>
<div class="md:w-1/2 w-full">
<Card title="2000年" :loading="loading">
<div ref="chartRef2" :style="{ width, height }"></div>
</Card>
</div>
</div>
<div class="md:flex enter-y">
<div class="md:w-1/2 w-full">
<Card title="2005年" :loading="loading">
<div ref="chartRef3" :style="{ width, height }"></div>
</Card>
</div>
<div class="md:w-1/2 w-full">
<Card title="2020年" :loading="loading">
<div ref="chartRef4" :style="{ width, height }"></div>
</Card>
</div>
</div>
<div>
<Card title="污染负荷构成特征变化" :loading="loading">
<div ref="chartRef5" :style="{ width, height }"></div>
</Card>
</div>
</div>
</template>
<script setup lang="ts">
import { watch, ref, Ref, watchEffect } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { Card } from 'ant-design-vue';
const subTab = ref<String>('a');
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
});
const chartRef1 = ref<HTMLDivElement | null>(null);
const setOptions1 = useECharts(chartRef1 as Ref<HTMLDivElement>).setOptions;
const chartRef2 = ref<HTMLDivElement | null>(null);
const setOptions2 = useECharts(chartRef2 as Ref<HTMLDivElement>).setOptions;
const chartRef3 = ref<HTMLDivElement | null>(null);
const setOptions3 = useECharts(chartRef3 as Ref<HTMLDivElement>).setOptions;
const chartRef4 = ref<HTMLDivElement | null>(null);
const setOptions4 = useECharts(chartRef4 as Ref<HTMLDivElement>).setOptions;
const chartRef5 = ref<HTMLDivElement | null>(null);
const setOptions5 = useECharts(chartRef5 as Ref<HTMLDivElement>).setOptions;
watch(
() => subTab.value,
() => {
setOptions1({
tooltip: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ['未收集点源', '城市面源', '农业农村面源'],
},
xAxis: {
type: 'category',
boundaryGap: true,
data: ['COD', 'TN', 'TP'],
},
yAxis: {
type: 'value',
name: '污染负荷率', // 单位说明文本
nameLocation: 'end', // 文本位置（start/center/end）
nameTextStyle: {
color: '#666',
fontSize: 12,
align: 'left', // 文本对齐方向
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
},
},
series: [
{
name: '未收集点源',
data: [90, 200, 150],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: '城市面源',
data: [78, 123, 29],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: '农业农村面源',
data: [100, 100, 100],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
],
});
setOptions2({
tooltip: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ['污水处理厂尾水', '未收集点源', '城市面源', '农业农村面源'],
},
xAxis: {
type: 'category',
boundaryGap: true,
data: ['COD', 'TN', 'TP'],
},
yAxis: {
type: 'value',
name: '污染负荷率', // 单位说明文本
nameLocation: 'end', // 文本位置（start/center/end）
nameTextStyle: {
color: '#666',
fontSize: 12,
align: 'left', // 文本对齐方向
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
},
},
series: [
{
name: '污水处理厂尾水',
data: [90, 200, 150, 99],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: '未收集点源',
data: [78, 123, 29, 99],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: '城市面源',
data: [100, 100, 100, 99],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: '农业农村面源',
data: [100, 100, 100, 99],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
],
});
setOptions3({
tooltip: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ['污水处理厂尾水', '未收集点源', '城市面源', '农业农村面源'],
},
xAxis: {
type: 'category',
boundaryGap: true,
data: ['COD', 'TN', 'TP'],
},
yAxis: {
type: 'value',
name: '污染负荷率', // 单位说明文本
nameLocation: 'end', // 文本位置（start/center/end）
nameTextStyle: {
color: '#666',
fontSize: 12,
align: 'left', // 文本对齐方向
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
},
},
series: [
{
name: '污水处理厂尾水',
data: [90, 200, 150, 99],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: '未收集点源',
data: [78, 123, 29, 99],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: '城市面源',
data: [100, 100, 100, 99],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: '农业农村面源',
data: [100, 100, 100, 99],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
],
});
setOptions4({
tooltip: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ['污水处理厂尾水', '未收集点源', '城市面源', '农业农村面源'],
},
xAxis: {
type: 'category',
boundaryGap: true,
data: ['COD', 'TN', 'TP'],
},
yAxis: {
type: 'value',
name: '污染负荷率', // 单位说明文本
nameLocation: 'end', // 文本位置（start/center/end）
nameTextStyle: {
color: '#666',
fontSize: 12,
align: 'left', // 文本对齐方向
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
},
},
series: [
{
name: '污水处理厂尾水',
data: [90, 200, 150, 99],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: '未收集点源',
data: [78, 123, 29, 99],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: '城市面源',
data: [100, 100, 100, 99],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: '农业农村面源',
data: [100, 100, 100, 99],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
],
});
setOptions5({
tooltip: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ['2000', '2005', '2020'],
},
xAxis: {
type: 'category',
boundaryGap: true,
data: ['XX区', 'XX区', 'XX区', 'XX区', 'XX区'],
},
yAxis: {
type: 'value',
name: '污染负荷率', // 单位说明文本
nameLocation: 'end', // 文本位置（start/center/end）
nameTextStyle: {
color: '#666',
fontSize: 12,
align: 'left', // 文本对齐方向
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
},
},
series: [
{
name: '2000',
data: [90, 200, 150,66,77],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: '2005',
data: [78, 123, 29,55,99],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: '2020',
data: [100, 100, 100,88,111],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
],
});
},
{ immediate: true },
);
</script>
<style lang="less">
.tabBox {
margin: 20px;
}
</style>

266
src/views/water/waterPollution/threeAxis.vue
View File

@ -0,0 +1,266 @@
<template>
<div class="tabBox">
<div class="md:flex enter-y">
<div class="md:w-1/3 w-full">
<Card title="污染负荷产生量变化趋势" :loading="loading">
<div ref="chartRef1" :style="{ width, height }"></div>
</Card>
</div>
<div class="md:w-1/3 w-full">
<Card title="污染负荷削减量变化趋势" :loading="loading">
<div ref="chartRef2" :style="{ width, height }"></div>
</Card>
</div>
<div class="md:w-1/3 w-full">
<Card title="污染环境负荷变化趋势" :loading="loading">
<div ref="chartRef3" :style="{ width, height }"></div>
</Card>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { watch, ref, Ref, watchEffect } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { Card } from 'ant-design-vue';
const subTab = ref<String>('a');
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
title: {
type: String as PropType<any>,
default: '300px',
},
});
const chartRef1 = ref<HTMLDivElement | null>(null);
const chartRef2 = ref<HTMLDivElement | null>(null);
const chartRef3 = ref<HTMLDivElement | null>(null);
const setOptions1 = useECharts(chartRef1 as Ref<HTMLDivElement>).setOptions;
const setOptions2 = useECharts(chartRef2 as Ref<HTMLDivElement>).setOptions;
const setOptions3 = useECharts(chartRef3 as Ref<HTMLDivElement>).setOptions;
watch(
() => subTab.value,
() => {
setOptions1({
tooltip: {
trigger: 'axis',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ['COD', 'NH3-N', 'TN', 'TP'],
},
xAxis: {
type: 'category',
boundaryGap: true,
data: [
'"1995"',
'"1996"',
'"1997"',
'"1998"',
'"1999"',
'"2000"',
'"2001"',
'"2002"',
'"2003"',
'"2004"',
],
},
yAxis: {
type: 'value',
name: '生产量/吨', // 单位说明文本
nameLocation: 'end', // 文本位置（start/center/end）
nameTextStyle: {
color: '#666',
fontSize: 12,
align: 'left', // 文本对齐方向
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
},
},
series: [
{
name: 'COD/10',
data: [90, 200, 150, 80, 70, 78, 123, 29, 45, 99],
type: 'line',
itemStyle: {},
},
{
name: 'NH3-N',
data: [132, 23, 42, 88, 66, 77, 99, 111, 122, 133],
type: 'line',
itemStyle: {},
},
{
name: 'TN',
data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
type: 'line',
itemStyle: {},
},
{
name: 'TP',
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
type: 'line',
itemStyle: {},
},
],
});
setOptions2({
tooltip: {
trigger: 'axis',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ['COD', 'NH3-N', 'TN', 'TP'],
},
xAxis: {
type: 'category',
boundaryGap: true,
data: [
'"1995"',
'"1996"',
'"1997"',
'"1998"',
'"1999"',
'"2000"',
'"2001"',
'"2002"',
'"2003"',
'"2004"',
],
},
yAxis: {
type: 'value',
name: '削减量/吨', // 单位说明文本
nameLocation: 'end', // 文本位置（start/center/end）
nameTextStyle: {
color: '#666',
fontSize: 12,
align: 'left', // 文本对齐方向
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
},
},
series: [
{
name: 'COD',
data: [90, 200, 150, 80, 70, 78, 123, 29, 45, 99],
type: 'line',
itemStyle: {},
},
{
name: 'NH3-N',
data: [132, 23, 42, 88, 66, 77, 99, 111, 122, 133],
type: 'line',
itemStyle: {},
},
{
name: 'TN',
data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
type: 'line',
itemStyle: {},
},
{
name: 'TP',
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
type: 'line',
itemStyle: {},
},
],
});
setOptions3({
tooltip: {
trigger: 'axis',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ['COD', 'NH3-N', 'TN', 'TP'],
},
xAxis: {
type: 'category',
boundaryGap: true,
data: [
'"1995"',
'"1996"',
'"1997"',
'"1998"',
'"1999"',
'"2000"',
'"2001"',
'"2002"',
'"2003"',
'"2004"',
],
},
yAxis: {
type: 'value',
name: '变化量/吨', // 单位说明文本
nameLocation: 'end', // 文本位置（start/center/end）
nameTextStyle: {
color: '#666',
fontSize: 12,
align: 'left', // 文本对齐方向
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
},
},
series: [
{
name: 'COD',
data: [90, 200, 150, 80, 70, 78, 123, 29, 45, 99],
type: 'line',
itemStyle: {},
},
{
name: 'NH3-N',
data: [132, 23, 42, 88, 66, 77, 99, 111, 122, 133],
type: 'line',
itemStyle: {},
},
{
name: 'TN',
data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
type: 'line',
itemStyle: {},
},
{
name: 'TP',
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
type: 'line',
itemStyle: {},
},
],
});
},
{ immediate: true },
);
</script>
<style lang="less">
.tabBox {
margin: 20px;
}
.mutiTable {
margin: 20px 0;
}
</style>

167
src/views/water/waterPollution/twoBar.vue
View File

@ -0,0 +1,167 @@
<template>
<div class="tabBox">
<div class="md:flex enter-y">
<div class="md:w-1/2 w-full">
<Card title="2020年污染负荷(按来源构成)" :loading="loading">
<div ref="chartRef1" :style="{ width, height }"></div>
</Card>
</div>
<div class="md:w-1/2 w-full">
<Card title="2020年污染负荷(空间分布)" :loading="loading">
<div ref="chartRef2" :style="{ width, height }"></div>
</Card>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { watch, ref, Ref, watchEffect } from 'vue';
import { useECharts } from '@/hooks/web/useECharts';
import { Card } from 'ant-design-vue';
const subTab = ref<String>('a');
const props = defineProps({
loading: Boolean,
width: {
type: String as PropType<string>,
default: '100%',
},
height: {
type: String as PropType<string>,
default: '300px',
},
});
const chartRef1 = ref<HTMLDivElement | null>(null);
const setOptions1 = useECharts(chartRef1 as Ref<HTMLDivElement>).setOptions;
const chartRef2 = ref<HTMLDivElement | null>(null);
const setOptions2 = useECharts(chartRef2 as Ref<HTMLDivElement>).setOptions;
watch(
() => subTab.value,
() => {
setOptions1({
tooltip: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ['COD', 'NH3-N', 'TN', 'TP'],
},
xAxis: {
type: 'category',
boundaryGap: true,
data: ['水质净化厂尾水', '未收集点源', '城市面源', '农业农村面源', '水土流失'],
},
yAxis: {
type: 'value',
name: '污染负荷率', // 单位说明文本
nameLocation: 'end', // 文本位置（start/center/end）
nameTextStyle: {
color: '#666',
fontSize: 12,
align: 'left', // 文本对齐方向
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
},
},
series: [
{
name: 'COD',
data: [90, 200, 150, 80, 70],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: 'NH3-N',
data: [132, 23, 42, 88, 66],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: 'TN',
data: [78, 123, 29, 45, 99],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: 'TP',
data: [100, 100, 100, 100, 100],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
],
});
setOptions2({
tooltip: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ['COD', 'NH3-N', 'TN', 'TP'],
},
xAxis: {
type: 'category',
boundaryGap: true,
data: ['XX区', 'XX区', 'XX区', 'XX区', 'XX区'],
},
yAxis: {
type: 'value',
name: '污染负荷率', // 单位说明文本
nameLocation: 'end', // 文本位置（start/center/end）
nameTextStyle: {
color: '#666',
fontSize: 12,
align: 'left', // 文本对齐方向
padding: [0, 0, 0, -30], // 调整位置 [上,右,下,左]
},
},
series: [
{
name: 'COD',
data: [90, 200, 150, 80, 70],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: 'NH3-N',
data: [132, 23, 42, 88, 66],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: 'TN',
data: [78, 123, 29, 45, 99],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
{
name: 'TP',
data: [100, 100, 100, 100, 100],
type: 'bar',
barWidth: '10px',
itemStyle: {},
},
],
});
},
{ immediate: true },
);
</script>
<style lang="less">
.tabBox {
margin: 20px;
}
</style>

2
src/views/演示使用自行删除/gitee/index.vue
View File

@ -37,7 +37,7 @@
},
xAxis: {
type: 'category',
boundaryGap: false,
boundaryGap: true,
data: resp.starList.map((item) => item.date),
},
yAxis: {

2
src/views/演示使用自行删除/visit/pages/loginLine.vue
View File

@ -38,7 +38,7 @@
},
xAxis: {
type: 'category',
boundaryGap: false,
boundaryGap: true,
data: data.date,
},
yAxis: {

2
vite.config.ts
View File

@ -17,7 +17,7 @@ export default defineApplicationConfig({
server: {
proxy: {
'/basic-api': {
target: 'http://10.1.21.250:8083',
target: 'http://10.1.21.250:8085',
changeOrigin: true,
ws: true,
rewrite: (path) => path.replace(new RegExp(`^/basic-api`), ''),

Write Preview
Loading…
Cancel
Save