租户功能
This commit is contained in:
zy
parent
cb262d88e5
commit
eef8a79685
|
|
@ -31,6 +31,14 @@ export const getImportUrl = Api.importExcel;
|
|||
*/
|
||||
export const getStationList = (params) => defHttp.get({ url: Api.getStationList, params });
|
||||
|
||||
/**
|
||||
* 列表接口
|
||||
* @param params
|
||||
*/
|
||||
export const getStationLists = (params) => defHttp.get({ url: Api.getStationList, params }, { isTransformResponse: false });
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 列表接口
|
||||
|
|
|
|||
|
|
@ -1,51 +1,65 @@
|
|||
<template>
|
||||
<a-row :gutter="16" style="margin-bottom: 10px;">
|
||||
<a-col class="gutter-row" :span="4">
|
||||
<ApiSelect
|
||||
:api="getStationList"
|
||||
v-model:value="searchStationCode"
|
||||
showSearch
|
||||
optionFilterProp="label"
|
||||
resultField="list"
|
||||
labelField="stationName"
|
||||
valueField="stationCode"
|
||||
placeholder="请选择"
|
||||
style="width: 100%;"
|
||||
@change="loadChart"
|
||||
allowClear
|
||||
/>
|
||||
</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>
|
||||
<a-row :gutter="16" style="margin-bottom: 10px">
|
||||
<a-col class="gutter-row" :span="6">
|
||||
<!-- <ApiSelect-->
|
||||
<!-- :api="getStationList"-->
|
||||
<!-- v-model:value="searchStationCode"-->
|
||||
<!-- showSearch-->
|
||||
<!-- optionFilterProp="label"-->
|
||||
<!-- resultField="list"-->
|
||||
<!-- labelField="stationName"-->
|
||||
<!-- valueField="stationCode"-->
|
||||
<!-- placeholder="请选择"-->
|
||||
<!-- style="width: 100%"-->
|
||||
<!-- @change="loadChart"-->
|
||||
<!-- allowClear-->
|
||||
<!-- />-->
|
||||
|
||||
<a-select :disabled="disabled" placeholder="请选择监测站" v-model:value="searchStationCode" @change="loadChart" style="width: 100%">
|
||||
<a-select-option v-for="item in stations" :key="item.stationCode" :value="item.stationCode">
|
||||
{{ item.stationName }}
|
||||
</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>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, Ref } from 'vue';
|
||||
import { useECharts } from '/@/hooks/web/useECharts';
|
||||
import { basicProps } from './props';
|
||||
import { getWaterPollutionSummary} from '../api';
|
||||
import { ApiSelect} from '/@/components/Form/index';
|
||||
import { getStationList } from '../../../appmana/station/SurvStationInfo.api'
|
||||
import { getWaterPollutionSummary } from '../api';
|
||||
import { ApiSelect } from '/@/components/Form/index';
|
||||
import { getStationLists } from '../../../appmana/station/SurvStationInfo.api';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
const dateFormat = 'YYYY';
|
||||
let arr1: any[] = [];
|
||||
let searchStationCode = ref('S_1');
|
||||
let searchYear = ref<Dayjs>(dayjs());
|
||||
let searchStationCode = ref('');
|
||||
let searchYear = ref<Dayjs>(dayjs());
|
||||
let summaryTpDataList = ref(arr1);
|
||||
let summaryTnDataList = ref(arr1);
|
||||
let summaryNoDataList = ref(arr1);
|
||||
let summaryNhDataList = ref(arr1);
|
||||
let summaryCodDataList = ref(arr1);
|
||||
let stations = 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({
|
||||
...basicProps,
|
||||
|
|
@ -53,154 +67,149 @@ onMounted(() => {
|
|||
const chartRef = ref<HTMLDivElement | null>(null);
|
||||
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) => {
|
||||
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);
|
||||
};
|
||||
|
||||
function getSummary(stationCode,chooseYear) {
|
||||
getWaterPollutionSummary(stationCode,chooseYear).then((res) => {
|
||||
function getSummary(stationCode, chooseYear) {
|
||||
getWaterPollutionSummary(stationCode, chooseYear).then((res) => {
|
||||
if (res.code == 200) {
|
||||
dateList.value = [1,2,3,4,5,6,7,8,9,10,11,12];
|
||||
summaryTpDataList.value = res.result[0].TPSummry;
|
||||
summaryTnDataList.value = res.result[0].TNSummry;
|
||||
summaryNoDataList.value = res.result[0].NOSummry;
|
||||
summaryNhDataList.value = res.result[0].NHSummry;
|
||||
summaryCodDataList.value = res.result[0].CODSummry;
|
||||
setOptions({
|
||||
tooltip: {
|
||||
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',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
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)'],
|
||||
dateList.value = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
|
||||
summaryTpDataList.value = res.result[0].TPSummry;
|
||||
summaryTnDataList.value = res.result[0].TNSummry;
|
||||
summaryNoDataList.value = res.result[0].NOSummry;
|
||||
summaryNhDataList.value = res.result[0].NHSummry;
|
||||
summaryCodDataList.value = res.result[0].CODSummry;
|
||||
setOptions({
|
||||
tooltip: {
|
||||
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 />',
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: '#019680',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
legend: {
|
||||
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)'],
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true },
|
||||
legend: {
|
||||
right: 20,
|
||||
top: 20,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
smooth: true,
|
||||
name: '总磷',
|
||||
stack: 'mg/L',
|
||||
data: summaryTpDataList.value,
|
||||
type: 'line',
|
||||
areaStyle: {},
|
||||
itemStyle: {
|
||||
color: '#5ab1ef',
|
||||
},
|
||||
},
|
||||
{
|
||||
smooth: true,
|
||||
name: '总氮',
|
||||
stack: 'mg/L',
|
||||
data: summaryTnDataList.value,
|
||||
type: 'line',
|
||||
areaStyle: {},
|
||||
itemStyle: {
|
||||
color: '#019680',
|
||||
},
|
||||
},
|
||||
// {
|
||||
// smooth: true,
|
||||
// name: '硝态氮',
|
||||
// stack: 'mg/L',
|
||||
// data: summaryNoDataList.value,
|
||||
// type: 'line',
|
||||
// areaStyle: {},
|
||||
// itemStyle: {
|
||||
// color: '#019634',
|
||||
// },
|
||||
// },
|
||||
{
|
||||
smooth: true,
|
||||
name: '化学需氧量',
|
||||
stack: 'mg/L',
|
||||
data: summaryCodDataList.value,
|
||||
type: 'line',
|
||||
areaStyle: {},
|
||||
itemStyle: {
|
||||
color: '#a65107',
|
||||
},
|
||||
},
|
||||
// {
|
||||
// smooth: true,
|
||||
// name: '氨氮',
|
||||
// stack: 'mg/L',
|
||||
// data: summaryNhDataList.value,
|
||||
// type: 'line',
|
||||
// areaStyle: {},
|
||||
// itemStyle: {
|
||||
// color: '#075ca6',
|
||||
// },
|
||||
// },
|
||||
],
|
||||
series: [
|
||||
{
|
||||
smooth: true,
|
||||
name: '总磷',
|
||||
stack: 'mg/L',
|
||||
data: summaryTpDataList.value,
|
||||
type: 'line',
|
||||
areaStyle: {},
|
||||
itemStyle: {
|
||||
color: '#5ab1ef',
|
||||
},
|
||||
},
|
||||
{
|
||||
smooth: true,
|
||||
name: '总氮',
|
||||
stack: 'mg/L',
|
||||
data: summaryTnDataList.value,
|
||||
type: 'line',
|
||||
areaStyle: {},
|
||||
itemStyle: {
|
||||
color: '#019680',
|
||||
},
|
||||
},
|
||||
// {
|
||||
// smooth: true,
|
||||
// name: '硝态氮',
|
||||
// stack: 'mg/L',
|
||||
// data: summaryNoDataList.value,
|
||||
// type: 'line',
|
||||
// areaStyle: {},
|
||||
// itemStyle: {
|
||||
// color: '#019634',
|
||||
// },
|
||||
// },
|
||||
{
|
||||
smooth: true,
|
||||
name: '化学需氧量',
|
||||
stack: 'mg/L',
|
||||
data: summaryCodDataList.value,
|
||||
type: 'line',
|
||||
areaStyle: {},
|
||||
itemStyle: {
|
||||
color: '#a65107',
|
||||
},
|
||||
},
|
||||
// {
|
||||
// smooth: true,
|
||||
// name: '氨氮',
|
||||
// stack: 'mg/L',
|
||||
// data: summaryNhDataList.value,
|
||||
// type: 'line',
|
||||
// areaStyle: {},
|
||||
// itemStyle: {
|
||||
// color: '#075ca6',
|
||||
// },
|
||||
// },
|
||||
],
|
||||
});
|
||||
} else {
|
||||
}
|
||||
});
|
||||
} else {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue