趋势图前端代码提交-未完成
This commit is contained in:
art_station
21729
package-lock.json
generated
21729
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -22,6 +22,7 @@
|
|||||||
"echarts": "~5.1.2",
|
"echarts": "~5.1.2",
|
||||||
"echarts-wordcloud": "~2.0.0",
|
"echarts-wordcloud": "~2.0.0",
|
||||||
"exceljs": "^4.3.0",
|
"exceljs": "^4.3.0",
|
||||||
|
"install": "^0.13.0",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"nprogress": "~0.2.0",
|
"nprogress": "~0.2.0",
|
||||||
"tinymce": "~5.8.2",
|
"tinymce": "~5.8.2",
|
||||||
|
|||||||
@@ -71,6 +71,10 @@ const getGisBase = function(data){
|
|||||||
const getGisArea = function(data){
|
const getGisArea = function(data){
|
||||||
return axios.get("/sound/road/noise/gis/area",{params: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 {
|
export {
|
||||||
pageBillUrl,
|
pageBillUrl,
|
||||||
saveRoadNoiseBill,
|
saveRoadNoiseBill,
|
||||||
@@ -91,6 +95,6 @@ export {
|
|||||||
listAll,
|
listAll,
|
||||||
getGisBase,
|
getGisBase,
|
||||||
getGisArea,
|
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