趋势图前端代码提交-未完成
This commit is contained in:
art_station
@@ -71,6 +71,10 @@ const getGisBase = function(data){
|
||||
const getGisArea = function(data){
|
||||
return axios.get("/sound/road/noise/gis/area",{params:data})
|
||||
}
|
||||
|
||||
const getTrendChart = function(data){
|
||||
return axios.post("/sound/road/noise/trend/chart",data)
|
||||
}
|
||||
export {
|
||||
pageBillUrl,
|
||||
saveRoadNoiseBill,
|
||||
@@ -91,6 +95,6 @@ export {
|
||||
listAll,
|
||||
getGisBase,
|
||||
getGisArea,
|
||||
roadNoiseYearEnd
|
||||
|
||||
roadNoiseYearEnd,
|
||||
getTrendChart
|
||||
}
|
||||
|
||||
206
src/views/sound/road/trend/index.vue
Normal file
206
src/views/sound/road/trend/index.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<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 :options="areaOptions" v-model:value="queryParams.area" placeholder="城区">
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :lg="4" :md="8" :sm="24" :xs="24">
|
||||
<a-form-item label="测点名称:">
|
||||
<a-select :options="palceOptions" v-model:value="queryParams.place" 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="startStatistic">开始统计</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 {
|
||||
getColumnOptions,
|
||||
getTrendChart
|
||||
} from "@/api/ecology/noise/road-sound";
|
||||
export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
queryParams: {
|
||||
startYear: 2020,
|
||||
endYear: 2021,
|
||||
area: '',
|
||||
place: ''
|
||||
},
|
||||
tableData: [],
|
||||
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,
|
||||
};
|
||||
});
|
||||
});
|
||||
getColumnOptions("monitor_year").then((res) => {
|
||||
this.yearOptions = res.data.data.map((item) => {
|
||||
return {
|
||||
label: item,
|
||||
value: item,
|
||||
};
|
||||
});
|
||||
});
|
||||
},
|
||||
// 开始统计
|
||||
startStatistic() {
|
||||
getTrendChart(this.queryParams).then( res =>{
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
// 趋势图
|
||||
drawTrend() {
|
||||
this.chartColumn = echarts.init(document.getElementById('chartColumn'))
|
||||
this.chartColumn.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
dataView: {
|
||||
show: true,
|
||||
readOnly: false
|
||||
},
|
||||
magicType: {
|
||||
show: true,
|
||||
type: ['line', 'bar']
|
||||
},
|
||||
restore: {
|
||||
show: true
|
||||
},
|
||||
saveAsImage: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['Evaporation', 'Precipitation', 'Temperature']
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
name: 'Precipitation',
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value} ml'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: 'Temperature',
|
||||
min: 0,
|
||||
max: 25,
|
||||
interval: 5,
|
||||
axisLabel: {
|
||||
formatter: '{value} °C'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [{
|
||||
name: 'Evaporation',
|
||||
type: 'bar',
|
||||
data: [
|
||||
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Precipitation',
|
||||
type: 'bar',
|
||||
data: [
|
||||
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Temperature',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.mb-20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user