Administrator
/
FenXiNspBackControl
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

租户功能

This commit is contained in:
zy 2026-03-04 15:51:31 +08:00
parent cb262d88e5
commit eef8a79685
2 changed files with 187 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/appmana/station/SurvStationInfo.api.ts
View File

@ -31,6 +31,14 @@ export const getImportUrl = Api.importExcel;
*/ */
export const getStationList = (params) => defHttp.get({ url: Api.getStationList, params }); export const getStationList = (params) => defHttp.get({ url: Api.getStationList, params });
/**
* 列表接口
* @param params
*/
export const getStationLists = (params) => defHttp.get({ url: Api.getStationList, params }, { isTransformResponse: false });
/** /**
* 列表接口 * 列表接口

349
src/views/dashboard/Analysis/components/VisitAnalysis.vue
View File

@ -1,51 +1,65 @@
<template> <template>
<a-row :gutter="16" style="margin-bottom: 10px;"> <a-row :gutter="16" style="margin-bottom: 10px">
<a-col class="gutter-row" :span="4"> <a-col class="gutter-row" :span="6">
<ApiSelect <!-- <ApiSelect-->
:api="getStationList" <!-- :api="getStationList"-->
v-model:value="searchStationCode" <!-- v-model:value="searchStationCode"-->
showSearch <!-- showSearch-->
optionFilterProp="label" <!-- optionFilterProp="label"-->
resultField="list" <!-- resultField="list"-->
labelField="stationName" <!-- labelField="stationName"-->
valueField="stationCode" <!-- valueField="stationCode"-->
placeholder="请选择" <!-- placeholder="请选择"-->
style="width: 100%;" <!-- style="width: 100%"-->
@change="loadChart" <!-- @change="loadChart"-->
allowClear <!-- allowClear-->
/> <!-- />-->
</a-col>
<a-col class="gutter-row" :span="4"> <a-select :disabled="disabled" placeholder="请选择监测站" v-model:value="searchStationCode" @change="loadChart" style="width: 100%">
<a-date-picker placeholder="" v-model:value="searchYear" format="YYYY" picker="year" style="width: 100%" @change="loadYearChart" /> <a-select-option v-for="item in stations" :key="item.stationCode" :value="item.stationCode">
</a-col> {{ item.stationName }}
</a-row> </a-select-option>
</a-select>
</a-col>
<a-col class="gutter-row" :span="4">
<a-date-picker placeholder="" v-model:value="searchYear" format="YYYY" picker="year" style="width: 100%" @change="loadYearChart" />
</a-col>
</a-row>
<div ref="chartRef" :style="{ height, width }"></div> <div ref="chartRef" :style="{ height, width }"></div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref, Ref } from 'vue'; import { onMounted, ref, Ref } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts'; import { useECharts } from '/@/hooks/web/useECharts';
import { basicProps } from './props'; import { basicProps } from './props';
import { getWaterPollutionSummary} from '../api'; import { getWaterPollutionSummary } from '../api';
import { ApiSelect} from '/@/components/Form/index'; import { ApiSelect } from '/@/components/Form/index';
import { getStationList } from '../../../appmana/station/SurvStationInfo.api' import { getStationLists } from '../../../appmana/station/SurvStationInfo.api';
import dayjs, { Dayjs } from 'dayjs'; import dayjs, { Dayjs } from 'dayjs';
const dateFormat = 'YYYY'; const dateFormat = 'YYYY';
let arr1: any[] = []; let arr1: any[] = [];
let searchStationCode = ref('S_1'); let searchStationCode = ref('');
let searchYear = ref<Dayjs>(dayjs()); let searchYear = ref<Dayjs>(dayjs());
let summaryTpDataList = ref(arr1); let summaryTpDataList = ref(arr1);
let summaryTnDataList = ref(arr1); let summaryTnDataList = ref(arr1);
let summaryNoDataList = ref(arr1); let summaryNoDataList = ref(arr1);
let summaryNhDataList = ref(arr1); let summaryNhDataList = ref(arr1);
let summaryCodDataList = ref(arr1); let summaryCodDataList = ref(arr1);
let stations = ref(arr1);
let dateList = ref(arr1); let dateList = ref(arr1);
onMounted(() => {
onMounted(() => { getStationLists({}).then((res) => {
searchStationCode.value = '';
if (res.code == 0) {
}); stations.value = res.result;
if (stations.value.length > 0) {
searchStationCode.value = stations.value[0].stationCode;
loadChart(searchStationCode.value);
}
}
console.log('xxxxx' + res.result);
});
});
defineProps({ defineProps({
...basicProps, ...basicProps,
@ -53,154 +67,149 @@ onMounted(() => {
const chartRef = ref<HTMLDivElement | null>(null); const chartRef = ref<HTMLDivElement | null>(null);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
const loadChart = (value: string) => {
if (value == null) {
value = '';
searchStationCode.value = '';
}
getSummary(value, searchYear.value.format(dateFormat));
};
const loadYearChart = (value) => {
if (value == null) {
value = ref<Dayjs>();
searchYear = ref<Dayjs>();
} else {
value = value.format(dateFormat);
}
getSummary(searchStationCode.value, value);
};
const loadChart = (value: string) => { function getSummary(stationCode, chooseYear) {
if(value==null){ getWaterPollutionSummary(stationCode, chooseYear).then((res) => {
value="";
searchStationCode.value="";
}
getSummary(value,searchYear.value.format(dateFormat));
};
const loadYearChart = (value) => {
if(value==null){
value=ref<Dayjs>();
searchYear=ref<Dayjs>();
}else{
value=value.format(dateFormat)
}
getSummary(searchStationCode.value,value);
};
function getSummary(stationCode,chooseYear) {
getWaterPollutionSummary(stationCode,chooseYear).then((res) => {
if (res.code == 200) { if (res.code == 200) {
dateList.value = [1,2,3,4,5,6,7,8,9,10,11,12]; dateList.value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
summaryTpDataList.value = res.result[0].TPSummry; summaryTpDataList.value = res.result[0].TPSummry;
summaryTnDataList.value = res.result[0].TNSummry; summaryTnDataList.value = res.result[0].TNSummry;
summaryNoDataList.value = res.result[0].NOSummry; summaryNoDataList.value = res.result[0].NOSummry;
summaryNhDataList.value = res.result[0].NHSummry; summaryNhDataList.value = res.result[0].NHSummry;
summaryCodDataList.value = res.result[0].CODSummry; summaryCodDataList.value = res.result[0].CODSummry;
setOptions({ setOptions({
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
formatter:'<strong> {b0}时</strong> <br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #5470c6;"></span> 总磷：<strong>{c0}</strong>mg/L <br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> 总氮：<strong>{c1}</strong>mg/L<br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #019634;"></span> 硝态氮：<strong>{c2}</strong>mg/L <br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #075ca6;"></span> 氨氮：<strong>{c3}</strong>mg/L<br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #a65107;"></span> 化学需氧量：<strong>{c4}</strong>mg/L', formatter:
axisPointer: { '<strong> {b0}时</strong> <br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #5470c6;"></span> 总磷：<strong>{c0}</strong>mg/L <br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #91cc75;"></span> 总氮：<strong>{c1}</strong>mg/L<br /> <span style="display: inline-block; margin-right: 4px; border-radius: 10px; width: 10px; height: 10px;background-color: #019634;"></span> 硝态氮：<strong>{c2}</strong>mg/L <br />',
lineStyle: { axisPointer: {
width: 1, lineStyle: {
color: '#019680', width: 1,
}, color: '#019680',
}, },
},
xAxis: {
type: 'category',
boundaryGap: false,
data: dateList.value,
// axisLabel:{
// formatter: '{value} 时'
// },
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: 'rgba(226,226,226,0.5)',
},
},
axisTick: {
show: false,
},
},
yAxis: [
{
type: 'value',
// min:1.0,
splitNumber: 4,
axisTick: {
show: false,
},
axisLabel:{
formatter: '{value} mg/L'
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
}, },
}, },
}, xAxis: {
], type: 'category',
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, boundaryGap: false,
legend: { data: dateList.value,
// axisLabel:{
// formatter: '{value} 时'
// },
splitLine: {
show: true,
lineStyle: {
width: 1,
type: 'solid',
color: 'rgba(226,226,226,0.5)',
},
},
axisTick: {
show: false,
},
},
yAxis: [
{
type: 'value',
// min:1.0,
splitNumber: 4,
axisTick: {
show: false,
},
axisLabel: {
formatter: '{value} mg/L',
},
splitArea: {
show: true,
areaStyle: {
color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
},
},
},
],
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
legend: {
right: 20, right: 20,
top: 20, top: 20,
},
series: [
{
smooth: true,
name: '总磷',
stack: 'mg/L',
data: summaryTpDataList.value,
type: 'line',
areaStyle: {},
itemStyle: {
color: '#5ab1ef',
}, },
}, series: [
{ {
smooth: true, smooth: true,
name: '总氮', name: '总磷',
stack: 'mg/L', stack: 'mg/L',
data: summaryTnDataList.value, data: summaryTpDataList.value,
type: 'line', type: 'line',
areaStyle: {}, areaStyle: {},
itemStyle: { itemStyle: {
color: '#019680', color: '#5ab1ef',
}, },
}, },
// { {
// smooth: true, smooth: true,
// name: '硝态氮', name: '总氮',
// stack: 'mg/L', stack: 'mg/L',
// data: summaryNoDataList.value, data: summaryTnDataList.value,
// type: 'line', type: 'line',
// areaStyle: {}, areaStyle: {},
// itemStyle: { itemStyle: {
// color: '#019634', color: '#019680',
// }, },
// }, },
{ // {
smooth: true, // smooth: true,
name: '化学需氧量', // name: '硝态氮',
stack: 'mg/L', // stack: 'mg/L',
data: summaryCodDataList.value, // data: summaryNoDataList.value,
type: 'line', // type: 'line',
areaStyle: {}, // areaStyle: {},
itemStyle: { // itemStyle: {
color: '#a65107', // color: '#019634',
}, // },
}, // },
// { {
// smooth: true, smooth: true,
// name: '氨氮', name: '化学需氧量',
// stack: 'mg/L', stack: 'mg/L',
// data: summaryNhDataList.value, data: summaryCodDataList.value,
// type: 'line', type: 'line',
// areaStyle: {}, areaStyle: {},
// itemStyle: { itemStyle: {
// color: '#075ca6', color: '#a65107',
// }, },
// }, },
], // {
// smooth: true,
// name: '氨氮',
// stack: 'mg/L',
// data: summaryNhDataList.value,
// type: 'line',
// areaStyle: {},
// itemStyle: {
// color: '#075ca6',
// },
// },
],
});
} else {
}
}); });
} else {
}
})
} }
</script> </script>