159 lines
4.6 KiB
Vue
159 lines
4.6 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="4" :md="8" :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="4" :md="8" :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="4" :md="8" :sm="24" :xs="24">
|
|
<a-form-item label="城区:">
|
|
<a-select mode="multiple" :default-value="['南宁']" v-model:value="queryParams.areaList" :options="areaOptions" placeholder="城区">
|
|
</a-select>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :lg="4" :md="8" :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-row>
|
|
<a-row>
|
|
<a-col :lg="4" :md="8" :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'
|
|
import { markRaw } from 'vue'
|
|
import {
|
|
getColumnOptions,
|
|
getTrendChart
|
|
} from "@/api/ecology/noise/road-sound";
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
queryParams: {
|
|
startYear: 2020,
|
|
endYear: 2021,
|
|
areaList: [],
|
|
placeList: []
|
|
},
|
|
trendData: [],
|
|
chartColumn: null,
|
|
placeOptions: [],
|
|
areaOptions: [],
|
|
yearOptions: []
|
|
};
|
|
},
|
|
mounted() {
|
|
this.loadOptionData();
|
|
this.drawTrend()
|
|
},
|
|
methods: {
|
|
// 下拉列表
|
|
loadOptionData() {
|
|
getColumnOptions("place").then((res) => {
|
|
this.placeOptions = res.data.data.map((item) => {
|
|
return {
|
|
label: item,
|
|
value: item,
|
|
};
|
|
});
|
|
});
|
|
getColumnOptions("area").then((res) => {
|
|
this.areaOptions = res.data.data.map((item) => {
|
|
return {
|
|
label: item,
|
|
value: item,
|
|
};
|
|
});
|
|
this.areaOptions.unshift({ label: '南宁市', value: '南宁'})
|
|
});
|
|
getColumnOptions("monitor_year").then((res) => {
|
|
this.yearOptions = res.data.data.map((item) => {
|
|
return {
|
|
label: item,
|
|
value: item,
|
|
};
|
|
});
|
|
});
|
|
},
|
|
// 趋势图
|
|
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);}
|
|
};
|
|
echarts.init(document.getElementById("chartColumn")).dispose();
|
|
this.chartColumn = markRaw(echarts.init(document.getElementById('chartColumn')))
|
|
this.chartColumn.setOption({
|
|
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
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
.mb-20 {
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|