269 lines
8.4 KiB
Vue
269 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="4" :md="8" :sm="24" :xs="24">
|
|
<a-form-item label="年度:">
|
|
<a-select mode="multiple" v-model:value="queryParams.yearList" :options="yearOptions" placeholder="请选择年度">
|
|
</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.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="4" :md="8" :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="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-col :lg="4" :md="8" :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="4" :md="8" :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="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'
|
|
let trendChart;
|
|
import {
|
|
getColumnOptions,
|
|
getTrendChart,
|
|
getPlaceByRegionLevel
|
|
} from "@/api/ecology/noise/road-sound";
|
|
import {
|
|
getDictData,
|
|
} from "@/api/ecology/dict";
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
queryParams: {
|
|
yearList: ["2020", "2021"],
|
|
areaList: ['南宁市'],
|
|
placeList: [],
|
|
regionLevel: '市级', // 区域等级
|
|
timeSlot: '昼',
|
|
xco: '年度' // 横坐标
|
|
},
|
|
trendData: [],
|
|
regionLevelOptions: [],
|
|
timeSlotOptions: [],
|
|
placeOptions: [],
|
|
areaOptions: [],
|
|
yearOptions: [],
|
|
xOptions: [
|
|
{
|
|
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,
|
|
};
|
|
});
|
|
});
|
|
},
|
|
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.on("legendselectchanged", obj => {
|
|
console.log('obj', obj);
|
|
let index
|
|
if (this.queryParams.xco === '年度') {
|
|
index = this.queryParams.areaList.indexOf(obj.name)
|
|
if (index > -1) {
|
|
this.queryParams.areaList.splice(index, 1)
|
|
} else {
|
|
index = this.queryParams.placeList.indexOf(obj.name)
|
|
index > -1 && this.queryParams.placeList.splice(index, 1)
|
|
}
|
|
} else {
|
|
index = this.queryParams.yearList.indexOf(obj.name.substring(0,obj.name.length - 1))
|
|
index > -1 && this.queryParams.yearList.splice(index, 1)
|
|
}
|
|
this.drawTrend()
|
|
});
|
|
//添加一个新的刻度线 实现折线在柱状图的中间显示
|
|
option.xAxis[1] = {
|
|
type: 'value',
|
|
max: option.xAxis[0].data.length,
|
|
show: false
|
|
}
|
|
|
|
let lineArray = option.series.filter(item => item.type === 'line')
|
|
lineArray.forEach((item,index) => {
|
|
item.xAxisIndex = 1
|
|
item.lineStyle = {
|
|
type: 'dashed',
|
|
}
|
|
item.data = item.data.map((x, i) => [(i + 1 / (option.legend.data.length + 1) * (index + 1 )) , x])
|
|
})
|
|
console.log('option', option);
|
|
trendChart.setOption(option)
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style scoped lang="less">
|
|
.mb-20 {
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|