From 6b3b786bd441be66ade3369c573787db664d3424 Mon Sep 17 00:00:00 2001 From: hey7845 Date: Tue, 28 Dec 2021 15:42:34 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B6=8B=E5=8A=BF=E5=9B=BE=E5=8F=98=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/ecology/dict.js | 3 + src/api/ecology/noise/road-sound.js | 6 +- src/views/sound/road/trend/index.vue | 137 +++++++++++++++++++++------ 3 files changed, 118 insertions(+), 28 deletions(-) create mode 100644 src/api/ecology/dict.js diff --git a/src/api/ecology/dict.js b/src/api/ecology/dict.js new file mode 100644 index 0000000..8cda75a --- /dev/null +++ b/src/api/ecology/dict.js @@ -0,0 +1,3 @@ +import axios from 'axios'; +// 查询全部字典项 +export const getDictData = params => axios.get("/sys/dictdata",{params}) diff --git a/src/api/ecology/noise/road-sound.js b/src/api/ecology/noise/road-sound.js index bb29d77..c3e13a7 100644 --- a/src/api/ecology/noise/road-sound.js +++ b/src/api/ecology/noise/road-sound.js @@ -75,6 +75,9 @@ const getGisArea = function(data){ const getTrendChart = function(data){ return axios.post("/sound/road/noise/trend/chart",data) } +const getPlaceByRegionLevel = function(column){ + return axios.get("/sound/road/noise/place/region",{params:{column}}) +} export { pageBillUrl, saveRoadNoiseBill, @@ -96,5 +99,6 @@ export { getGisBase, getGisArea, roadNoiseYearEnd, - getTrendChart + getTrendChart, + getPlaceByRegionLevel } diff --git a/src/views/sound/road/trend/index.vue b/src/views/sound/road/trend/index.vue index 968b80e..b71a02c 100644 --- a/src/views/sound/road/trend/index.vue +++ b/src/views/sound/road/trend/index.vue @@ -23,14 +23,27 @@ - - + + + {{ item.label }} + + + + + + - + + + + + + + @@ -54,8 +67,12 @@ import { markRaw } from 'vue' import { getColumnOptions, - getTrendChart + getTrendChart, + getPlaceByRegionLevel } from "@/api/ecology/noise/road-sound"; + import { + getDictData, + } from "@/api/ecology/dict"; export default { components: {}, data() { @@ -63,14 +80,27 @@ queryParams: { startYear: 2020, endYear: 2021, - areaList: [], - placeList: [] + areaList: ['南宁'], + placeList: [], + regionLevel: '市级', // 区域等级 + xco: '年度' // 横坐标 }, trendData: [], chartColumn: null, + regionLevelOptions: [], placeOptions: [], areaOptions: [], - yearOptions: [] + yearOptions: [], + xOptions: [ + { + label: '年度', + value: '年度', + }, + { + label: '区域/测点名称', + value: '区域/测点名称', + } + ] }; }, mounted() { @@ -80,23 +110,6 @@ 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 { @@ -105,6 +118,64 @@ }; }); }); + getColumnOptions("region_level").then((res) => { + this.regionLevelOptions = res.data.data.map((item) => { + return { + label: item, + value: item, + }; + }); + }); + this.getArea() + }, + // 区域下拉列表 + 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() { @@ -119,10 +190,22 @@ }) }, initChart() { + // const colors = ['#5470C6', '#91CC75', '#EE6666']; this.trendData.yAxis[0].axisLabel = { - formatter: function (value) { return value.toFixed(1);} - }; - echarts.init(document.getElementById("chartColumn")).dispose(); + formatter: function (value) { return value.toFixed(1);}, + } + // this.trendData.yAxis[0].axisLine = { + // show: true, + // lineStyle: { + // color: colors[0] + // } + // } + // this.trendData.yAxis[1].axisLine = { + // show: true, + // lineStyle: { + // color: colors[1] + // } + // } this.chartColumn = markRaw(echarts.init(document.getElementById('chartColumn'))) this.chartColumn.setOption({ tooltip: {