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

水环境演变调整

environment_dev
wbc 1 week ago
parent
92c646ed5f
commit
e38b3026fc
6 changed files with 527 additions and 5 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. 8
      src/views/achievement/achievementType/secondTab.vue
  2. 2
      src/views/pollution/manage/index.vue
  3. 46
      src/views/water/waterEnvironment/index.vue
  4. 275
      src/views/water/waterEnvironment/secondTab.vue
  5. 101
      src/views/water/waterEnvironment/singerAxis.vue
  6. 100
      src/views/water/waterEnvironment/singerBar.vue

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

@ -95,13 +95,13 @@
{
dataIndex: 'date',
key: 'date',
title: '时期',
title: '项目时期',
width: 200,
},
{
dataIndex: 'apply',
key: 'apply',
title: '应用',
dataIndex: 'name',
key: 'name',
title: '项目名称',
},
{
dataIndex: 'technology',

2
src/views/pollution/manage/index.vue
View File

@ -420,7 +420,7 @@
</a-row>
<a-row>
<a-col :span="12">
<a-form-item label="TN削减(%)" name="tn">
<a-form-item label="TN削减率(%)" name="tn">
<a-input
v-model:value="projectType.tn"
style="width: 360px"

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

@ -0,0 +1,46 @@
<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="水质变化">
<secondTab :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" />
</a-tab-pane>
<a-tab-pane key="4" tab="河流水质变化" >
<singerBar :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 secondTab from './secondTab.vue';
import singerAxis from './singerAxis.vue';
import singerBar from './singerBar.vue';
const activeKey = ref<String>('1');
const loading = ref(false);
const secondTabTitle1 = ['COD','TP','TN','其他']
const secondTabTitle3 = ['水体叶绿素a浓度年均变化','蓝藻富集重点水域水体叶绿素a浓度年均变化','多年蓝藻水华各月发生状况','其他']
</script>
<style lang="less">
.tabBox {
margin: 20px;
}
.title {
margin: 10px 0;
font-size: 20px;
font-weight: 550;
}
</style>

275
src/views/water/waterEnvironment/secondTab.vue
View File

@ -0,0 +1,275 @@
<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', 'tn×10', 'tp×100'],
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['"1995"', '"1996"', '"1997"', '"1998"', '"1999"','"2000"', '"2001"', '"2002"', '"2003"', '"2004"'],
},
yAxis: {
type: 'value',
name: 'COD(mg/l)', // 单位说明文本
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: 'tn×10',
data: [78, 123, 29, 45, 99,134, 131, 39, 67, 156],
type: 'line',
itemStyle: {},
},
{
name: 'tp×100',
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', 'tn×10', 'tp×100'],
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['"1995"', '"1996"', '"1997"', '"1998"', '"1999"','"2000"', '"2001"', '"2002"', '"2003"', '"2004"'],
},
yAxis: {
type: 'value',
name: 'TP(mg/l)', // 单位说明文本
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: 'tn×10',
data: [78, 123, 29, 45, 99,134, 131, 39, 67, 156],
type: 'line',
itemStyle: {},
},
{
name: 'tp×100',
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', 'tn×10', 'tp×100'],
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['"1995"', '"1996"', '"1997"', '"1998"', '"1999"','"2000"', '"2001"', '"2002"', '"2003"', '"2004"'],
},
yAxis: {
type: 'value',
name: 'TN(mg/l)', // 单位说明文本
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: 'tn×10',
data: [78, 123, 29, 45, 99,134, 131, 39, 67, 156],
type: 'line',
itemStyle: {},
},
{
name: 'tp×100',
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', 'tn×10', 'tp×100'],
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['"1995"', '"1996"', '"1997"', '"1998"', '"1999"','"2000"', '"2001"', '"2002"', '"2003"', '"2004"'],
},
yAxis: {
type: 'value',
name: 'cod(mg/l)', // 单位说明文本
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: 'tn×10',
data: [78, 123, 29, 45, 99,134, 131, 39, 67, 156],
type: 'line',
itemStyle: {},
},
{
name: 'tp×100',
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>

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

@ -0,0 +1,101 @@
<template>
<div class="tabBox">
<Card title="富营养化指数" :loading="loading">
<div ref="chartRef1" :style="{ width, height }"></div>
</Card>
</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;
watch(
() => subTab.value,
() => {
setOptions1({
tooltip: {
trigger: 'axis',
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ['cod', 'tn×10', 'tp×100'],
},
xAxis: {
type: 'category',
boundaryGap: false,
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: 'tn×10',
data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
type: 'line',
itemStyle: {},
},
{
name: 'tp×100',
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
type: 'line',
itemStyle: {},
},
],
});
},
{ immediate: true },
);
</script>
<style lang="less">
.tabBox {
margin: 20px;
}
</style>

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

@ -0,0 +1,100 @@
<template>
<div class="tabBox">
<Card title="富营养化指数" :loading="loading">
<div ref="chartRef1" :style="{ width, height }"></div>
</Card>
</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;
watch(
() => subTab.value,
() => {
setOptions1({
tooltip: {
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
legend: {
data: ['cod', 'tn×10', 'tp×100'],
},
xAxis: {
type: 'category',
boundaryGap: false,
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: 'bar',
itemStyle: {},
},
{
name: 'tn×10',
data: [78, 123, 29, 45, 99, 134, 131, 39, 67, 156],
type: 'bar',
itemStyle: {},
},
{
name: 'tp×100',
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
type: 'bar',
itemStyle: {},
},
],
});
},
{ immediate: true },
);
</script>
<style lang="less">
.tabBox {
margin: 20px;
}
</style>
Write Preview
Loading…
Cancel
Save