267 lines
8.4 KiB
Vue
267 lines
8.4 KiB
Vue
<template>
|
|
<div class="ele-body">
|
|
<!-- 搜索表单 -->
|
|
<a-form :model="queryParams" :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
|
|
:wrapper-col="{ md: { span: 18, }, sm: { span: 24 } }" labelAlign="left" layout="vertical">
|
|
<a-row>
|
|
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
|
<a-form-item label="开始年度">
|
|
<a-select v-model:value="queryParams.startYear" allowClear showSearch>
|
|
<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-form-item label="结束年度">
|
|
<a-select v-model:value="queryParams.endYear" allowClear showSearch>
|
|
<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-form-item label="季度:">
|
|
<a-select v-model:value="queryParams.quarter" allowClear>
|
|
<a-select-option v-for="(item) in quarterOptions" :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="queryParams.regionLevel" @change="handleRegionLevelChange" allowClear placeholder="请选择等级">
|
|
<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 mode="multiple" v-model:value="queryParams.areaList" :options="areaOptions" placeholder="请选择区域">
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
|
<a-form-item label="测点名称:">
|
|
<a-select mode="multiple" v-model:value="queryParams.placeList" :options="placeOptions" placeholder="请选择测点名称">
|
|
</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="queryParams.timeSlot" allowClear>
|
|
<a-select-option v-for="(item) in timeSlotOptions" :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="queryParams.xco" :options="xOptions" allowClear placeholder="请选择横坐标">
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
<a-row>
|
|
<a-col :lg="6" :md="12" :sm="24" :xs="24">
|
|
<a-space>
|
|
<a-button type="primary" class="mb-20" @click="drawTrend">开始统计</a-button>
|
|
</a-space>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
<a-card :bordered="false">
|
|
<div id="chartColumn" style="width: 100%; height: 500px;"></div>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import * as echarts from 'echarts'
|
|
let trendChart;
|
|
import {
|
|
getColumnOptions,
|
|
getTrendChart,
|
|
getPlaceByRegionLevel
|
|
} from "@/api/ecology/noise/function-sound";
|
|
import {
|
|
getDictData,
|
|
} from "@/api/ecology/dict";
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
queryParams: {
|
|
startYear: 2020,
|
|
endYear: 2021,
|
|
areaList: ['南宁市'],
|
|
placeList: [],
|
|
regionLevel: '市级', // 区域等级
|
|
xco: '年度' ,// 横坐标
|
|
timeSlot: '昼'
|
|
},
|
|
trendData: [],
|
|
regionLevelOptions: [],
|
|
timeSlotOptions: [],
|
|
placeOptions: [],
|
|
areaOptions: [],
|
|
yearOptions: [],
|
|
quarterOptions: [
|
|
{ label: "第一季度", value: 1 },
|
|
{ label: "第二季度", value: 2 },
|
|
{ label: "第三季度", value: 3 },
|
|
{ label: "第四季度", value: 4 },
|
|
],
|
|
xOptions: [
|
|
{
|
|
label: '年度',
|
|
value: '年度',
|
|
},
|
|
{
|
|
label: '季度',
|
|
value: '季度',
|
|
},
|
|
{
|
|
label: '区域/测点名称',
|
|
value: '区域/测点名称',
|
|
}
|
|
]
|
|
};
|
|
},
|
|
mounted() {
|
|
this.loadOptionData();
|
|
this.drawTrend()
|
|
},
|
|
methods: {
|
|
// 下拉列表
|
|
loadOptionData() {
|
|
getColumnOptions("monitor_year").then((res) => {
|
|
this.yearOptions = 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,
|
|
};
|
|
});
|
|
});
|
|
getColumnOptions("time_slot").then((res) => {
|
|
this.timeSlotOptions = res.data.data.map((item) => {
|
|
return {
|
|
label: item,
|
|
value: item,
|
|
};
|
|
});
|
|
});
|
|
this.getArea()
|
|
this.getPlace('市级')
|
|
},
|
|
// 区域下拉列表
|
|
getArea() {
|
|
getDictData({dictName:'城区行政区划代码'}).then(res=>{
|
|
this.areaOptions = res.data.data.map((item) => {
|
|
return {
|
|
label: item.dictDataName,
|
|
value: item.dictDataName,
|
|
};
|
|
});
|
|
this.areaOptions.unshift({ label: '南宁市', value: '南宁市'})
|
|
})
|
|
},
|
|
// 县级
|
|
getCounty() {
|
|
getDictData({dictName:'县行政区划代码'}).then(res=>{
|
|
this.areaOptions = res.data.data.map((item) => {
|
|
return {
|
|
label: item.dictDataName,
|
|
value: item.dictDataName,
|
|
};
|
|
});
|
|
this.areaOptions.unshift({ label: '所有县', value: '所有县'})
|
|
})
|
|
},
|
|
// 测点名称下拉列表
|
|
getPlace(regionLevel) {
|
|
console.log('regionLevel', regionLevel);
|
|
getPlaceByRegionLevel(regionLevel).then((res) => {
|
|
this.placeOptions = res.data.data.map((item) => {
|
|
return {
|
|
label: item,
|
|
value: item,
|
|
};
|
|
});
|
|
// this.placeOptions.unshift({ label: '所有测点', value: '所有测点'})
|
|
});
|
|
},
|
|
handleRegionLevelChange(value) {
|
|
console.log(`selected ${value}`);
|
|
this.queryParams.areaList = []
|
|
this.queryParams.placeList = []
|
|
if (value == '市级') {
|
|
this.getArea()
|
|
this.getPlace(value)
|
|
} else if (value == '县级') {
|
|
this.getCounty()
|
|
this.getPlace(value)
|
|
}
|
|
},
|
|
// 趋势图
|
|
drawTrend() {
|
|
getTrendChart(this.queryParams).then( res => {
|
|
console.log('res', res);
|
|
if (res.data.code == 0) {
|
|
this.trendData = res.data.data
|
|
this.initChart()
|
|
} else {
|
|
this.$message.error(res.data.msg)
|
|
}
|
|
})
|
|
},
|
|
initChart() {
|
|
this.trendData.yAxis[0].axisLabel = {
|
|
formatter: function (value) { return value.toFixed(1);},
|
|
}
|
|
if (trendChart != null && trendChart != "" && trendChart != undefined) {
|
|
trendChart.dispose();// 销毁
|
|
}
|
|
trendChart = echarts.init(document.getElementById('chartColumn'))
|
|
let option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999'
|
|
}
|
|
}
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {
|
|
show: true
|
|
}
|
|
}
|
|
},
|
|
legend: this.trendData.legend,
|
|
xAxis: this.trendData.xAxis,
|
|
yAxis: this.trendData.yAxis,
|
|
series: this.trendData.series
|
|
}
|
|
trendChart.setOption(option)
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
.mb-20 {
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|