From 5618ee9b9a6281a571c5ddd5a4cca6018f949931 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Tue, 02 Apr 2024 11:12:16 +0800 Subject: [PATCH] fix: 臭氧预测接口修改 --- src/views/O3/index.vue | 363 +++++++++++++++++++-------------------------------- 1 files changed, 133 insertions(+), 230 deletions(-) diff --git a/src/views/O3/index.vue b/src/views/O3/index.vue index a635353..9d2f9d3 100644 --- a/src/views/O3/index.vue +++ b/src/views/O3/index.vue @@ -32,40 +32,54 @@ <!--������������--> <!-- <el-button @click="selectDataBtn" class="btn1" size="small">������</el-button>--> </div> - <div class="cityDiv" style="width: 20%; font-size: 15px"> - <div style="margin-bottom: 4%" class="spanDiv"> - <span>������������:</span> - <span @click="inputCityChange('������')">���������</span> - <span @click="inputCityChange('������')">���������</span> - <span @click="inputCityChange('������')">���������</span> - <span @click="inputCityChange('������')">���������</span> + <div + class="cityDiv" + style="width: 20%; font-size: 15px" + > + <div + style="margin-bottom: 4%" + class="spanDiv" + > + <span>������������:</span> + <span @click="inputCityChange('210381')">������</span> + <span @click="inputCityChange('320900')">������</span> + <!-- <span @click="inputCityChange('������')">���������</span> + <span @click="inputCityChange('������')">���������</span> --> </div> - <div style="display: flex; align-items: center"> + <!-- <div style="display: flex; align-items: center"> <div>���������</div> <el-input - placeholder="���������������" v-model="inputCity" + placeholder="���������������" size="small" style="width: 55%; margin-right: 2%" > - <i slot="prefix" class="el-input__icon el-icon-search"></i> + <i + slot="prefix" + class="el-input__icon el-icon-search" + /> </el-input> - <el-button type="primary" size="small" @click="selectDataBtn" - >������</el-button + <el-button + type="primary" + size="small" + @click="selectDataBtn" > - </div> + ������ + </el-button> + </div> --> </div> </div> - <div - style="text-align: right; margin: 0px 30px 15px 0px; color: #666666" + <!-- <div v-if="isShow" + style="text-align: right; margin: 0px 30px 15px 0px; color: #666666" > - <span style="font-weight: bold">���������:</span - ><span v-for="(item, index) in goodValue" :key="index"> - ���{{ index + 1 }}������(<span style="color: DarkOrange">{{ item }}</span - >) + <span style="font-weight: bold">���������:</span><span + v-for="(item, index) in goodValue" + :key="index" + > + ���{{ index + 1 }}������(<span style="color: DarkOrange">{{ item }}</span>) </span> - </div> + </div> --> <LineChart :chart-data="lineChartData" :width="echartsWidth" @@ -89,11 +103,11 @@ // ���������import������������������from'������������������'; import LineChart from '@/components/Echarts/LineChart' -import O3Echarts from '@/components/O3Echarts/O3Echarts' +// import O3Echarts from '@/components/O3Echarts/O3Echarts' // import TimePicker from '@/components/Form/TimePicker' import json from '@/assets/json/sensor.json' -import Region from '@/components/Cascader/region' -import axios from 'axios' +// import Region from '@/components/Cascader/region' +// import axios from 'axios' const lineChartData = { newVisitis: { expectedData: [100, 120, 161, 134, 105, 160, 165], @@ -130,15 +144,15 @@ actualData: [120, 82, 91, 154, 162, 140, 130], }, } -const axios1 = axios.create({ - baseURL: 'http://121.43.179.139:8080', - timeout: 5000, -}) +// const axios1 = axios.create({ +// baseURL: 'http://121.43.179.139:8080', +// timeout: 5000, +// }) export default { // import ��������������������������������������������������� components: { LineChart, - Region, + // Region, // TimePicker }, filters: { @@ -150,7 +164,7 @@ props: { // defaultData: Array }, - data() { + data () { // ������������������ return { interval: 0, @@ -171,61 +185,60 @@ unit: 'hour', type: 'select', newLineChartData: { - series: [], + series: [ + { + data: [], + name: '������', + type: 'line', + label: { normal: { show: true } }, + }, { + data: [], + name: '������', + type: 'line', + label: { normal: { show: true } }, + } + ], xAxis: [], - title: [], + title: ['������', '������'], }, newLineChartData2: { - series: [], + series: [ + { + data: [], + name: '������', + type: 'line', + label: { normal: { show: true } }, + }, { + data: [], + name: '������', + type: 'line', + label: { normal: { show: true } }, + } + ], xAxis: [], - title: [], + title: ['������', '������'], }, newData: '', defaultData: [], selectData: this.getToday1(), city: '������', - o31hDataYuce: [], - o31hDataShice: [], + o3DataYuce: [], + o3DataShice: [], o38hDataYuce: [], o38hDataShice: [], pickerOptions: { - disabledDate(time) { + disabledDate (time) { return time.getTime() > Date.now() }, - // shortcuts: [{ - // text: '������', - // onClick(picker) { - // const date = new Date() - // date.setTime(date.getTime() - 3600 * 1000 * 24) - // picker.$emit('pick', date) - // this.getYesterday() - // } - // }, { - // text: '������', - // onClick(picker) { - // picker.$emit('pick', new Date()) - // this.getToday() - // } - // }, { - // text: '������', - // onClick(picker) { - // const date = new Date() - // date.setTime(date.getTime() + 3600 * 1000 * 24) - // picker.$emit('pick', date) - // this.getTomorrow() - // } - // }] }, - goodValue: [], value2: this.getToday1(), - inputCity: '', // ��������������� + inputCity: '320900', // ��������������� isShow: false, oneHour: '', twoHour: '', threeHour: '', fourHours: '', - dataArr: [], } }, // ������������ ���������data������ @@ -237,7 +250,7 @@ // this.newMac1.push(newVal[1][1]) // this.getSensor() // }, - radio1(nv, ov) { + radio1 (nv, ov) { if (nv === '������') { this.getYesterday() } else if (nv === '������') { @@ -246,7 +259,7 @@ this.getTomorrow() } }, - selectData(a, b) { + selectData (a, b) { // var d = new Date(a) // var youWant = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() // console.log(youWant) @@ -265,133 +278,65 @@ } this.selectData = newData this.selectDataBtn() + this.searchDate() }, - // value2(a, b) { - // // console.log(a) - // // var d = new Date(a) - // // var youWant = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() - // // console.log(youWant) - // // this.time = youWant - // this.selectData = a - // this.searchDate(this.city) - // } }, // ������������ - ��������������������������������� this ��������� - created() { - // console.log(this.defaultData) + created () { this.selectDataBtn() this.searchDate() }, // ������������ methods: { // ������������������������ - inputCityChange(value) { + inputCityChange (value) { this.inputCity = value this.selectDataBtn() + this.searchDate() }, // ������������ - selectDataBtn() { - this.o31hDataYuce = [] - this.o31hDataShice = [] - this.o38hDataYuce = [] - this.o38hDataShice = [] - this.goodValue = [] - axios1({ - // this.$request - url: '/screen_api_v2/screen/weatherData', - // url: 'test/weatherData', + selectDataBtn () { + this.o3DataYuce = [] + this.o3DataShice = [] + this.lineChartData = {} + this.$request({ + url: '/aqi/compareO3New', method: 'get', params: { - city: this.inputCity, + regionCode: this.inputCity, time: this.selectData, }, }) .then((res) => { - if (res.data.data.length === 0) { + if (res.data.length === 0) { this.$message('������������������') this.isShow = false } else { this.isShow = true - } - var resData = res.data.data - this.newLineChartData.series.push({ - data: [], - name: '', - type: 'line', - label: { normal: { show: true } }, - }) - this.newLineChartData.series.push({ - data: [], - name: '', - type: 'line', - label: { normal: { show: true } }, - }) - this.newLineChartData2.series.push({ - data: [], - name: '', - type: 'line', - label: { normal: { show: true } }, - }) - this.newLineChartData2.series.push({ - data: [], - name: '', - type: 'line', - label: { normal: { show: true } }, - }) - var timeArray = [] - this.o38hDataShice = [] - for (let i = 0; i < resData.length; i++) { - // this.o38hxAxis.push(res.data[i].time) - if (resData[i].type === '������') { - this.o31hDataYuce.push(resData[i].O3C) - this.o38hDataYuce.push(resData[i].O3C_8H) - var time = resData[i].time.split(' ')[1] - if (time === '00:00') { - time = '������00:00' - } - timeArray.push(time) - } else { - if (resData[i].O3C) { - this.o31hDataShice.push(resData[i].O3C) - this.dataArr.push(resData[i].O3C) - } else { - this.dataArr.push(0) - } - if (resData[i].O3C_8H) { - this.o38hDataShice.push(resData[i].O3C_8H) - } + var resData = res.data + var timeArray = [] + let shiceList = resData[0] + let yuceList = resData[1] + for (let i = 0; i < shiceList.length; i++) { + this.o3DataShice.push(Math.abs(shiceList[i].O3)) + timeArray.push(shiceList[i].time) } - if (resData[i].goodValue) { - this.goodValue.push(resData[i].goodValue) + for (let i = 0; i < yuceList.length; i++) { + this.o3DataYuce.push(Math.abs(yuceList[i].O3)) + timeArray.push(yuceList[i].time) } + this.newLineChartData.series[0].data = this.o3DataYuce + this.newLineChartData.series[1].data = this.o3DataShice + this.newLineChartData.xAxis = timeArray + this.lineChartData = this.newLineChartData } - // O3-1H - this.newLineChartData.series[0].data = this.o31hDataYuce - this.newLineChartData.series[1].data = this.o31hDataShice - this.newLineChartData.series[0].name = '������' - this.newLineChartData.series[1].name = '������' - this.newLineChartData.title[0] = '������' - this.newLineChartData.title[1] = '������' - this.newLineChartData.xAxis = timeArray - this.newLineChartData.text = `O3-1H ${this.newTime(this.selectData)}` - this.lineChartData = this.newLineChartData - // O3-8H - this.newLineChartData2.series[0].data = this.o38hDataYuce - this.newLineChartData2.series[1].data = this.o38hDataShice - this.newLineChartData2.series[0].name = '������' - this.newLineChartData2.series[1].name = '������' - this.newLineChartData2.title[0] = '������' - this.newLineChartData2.title[1] = '������' - this.newLineChartData2.xAxis = timeArray - this.newLineChartData2.text = `O3-8H ${this.newTime(this.selectData)}` - this.lineChartData2 = this.newLineChartData2 }) .catch((error) => { console.log(error) }) }, // ������������������ - newTime(timeArr) { + newTime (timeArr) { var date = new Date(timeArr) var y = date.getFullYear() var m = date.getMonth() + 1 @@ -400,17 +345,10 @@ d = d < 10 ? '0' + d : d return y + '-' + m + '-' + d }, - getYesterday() { - // var day1 = new Date() - // day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) - // var s1 = day1.getFullYear() + '-' + (day1.getMonth() + 1) + '-' + day1.getDate() - // this.selectData = s1 - // this.time = s1 - + getYesterday () { this.selectData = this.getYesterday1() - // this.searchDate(this.city) }, - getYesterday1() { + getYesterday1 () { var day1 = new Date() day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000) var month = @@ -419,34 +357,21 @@ var s1 = day1.getFullYear() + '-' + month + '-' + date return s1 }, - getToday() { - // var day2 = new Date() - // day2.setTime(day2.getTime()) - // var s2 = day2.getFullYear() + '-' + (day2.getMonth() + 1) + '-' + day2.getDate() - // this.time = s2 + getToday () { this.selectData = this.getToday1() - // this.searchDate(this.city) }, - getToday1() { + getToday1 () { var day2 = new Date() - // day2.setTime(day2.getTime()) - // var s2 = day2.getFullYear() + '-' + (day2.getMonth() + 1) + '-' + day2.getDate() var month = day2.getMonth() < 9 ? '0' + (day2.getMonth() + 1) : day2.getMonth() + 1 var date = day2.getDate() <= 9 ? '0' + day2.getDate() : day2.getDate() var s2 = day2.getFullYear() + '-' + month + '-' + date return s2 }, - getTomorrow() { - // var day3 = new Date() - // day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000) - // var s3 = day3.getFullYear() + '-' + (day3.getMonth() + 1) + '-' + day3.getDate() - // this.selectData = s3 - // this.time = s3 + getTomorrow () { this.selectData = this.getTomorrow1() - // this.searchDate(this.city) }, - getTomorrow1() { + getTomorrow1 () { var day3 = new Date() day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000) var month = @@ -455,68 +380,46 @@ var s3 = day3.getFullYear() + '-' + month + '-' + date return s3 }, - searchDate(city) { - this.o31hDataYuce = [] - this.o31hDataShice = [] + searchDate () { this.o38hDataYuce = [] this.o38hDataShice = [] - this.goodValue = [] - this.city = city + this.lineChartData2 = {} this.$request({ - url: '/aqi/compareO3', + url: '/aqi/getO38H', method: 'get', params: { - regionCode: '320583', - time: '2023-06-17 ', + regionCode: this.inputCity, + time: this.selectData, }, }) .then((res) => { - // console.log(res.data) if (res.data.length === 0) { - this.warning() - } - var resData = res.data - this.newLineChartData.series.push({ - data: [], - name: '', - type: 'line', - label: { normal: { show: true } }, - }) - this.newLineChartData.series.push({ - data: [], - name: '', - type: 'line', - label: { normal: { show: true } }, - }) - var timeArray = [] - for (let i = 0; i < resData.length; i++) { - // this.o38hxAxis.push(res.data[i].time) - if (resData[i].type === '������') { - this.o31hDataYuce.push(resData[i].O3) - this.o38hDataYuce.push(resData[i].O3_8H) - timeArray.push(resData[i].time) - } else { - this.o31hDataShice.push(resData[i].O3) - this.o38hDataShice.push(resData[i].O3_8H) + this.$message('������������������') + this.isShow = false + } else { + var resData = res.data + var timeArray = [] + let shiceList = resData[0] + let yuceList = resData[1] + for (let i = 0; i < shiceList.length; i++) { + this.o38hDataShice.push(Math.abs(shiceList[i].O3)) + timeArray.push(shiceList[i].time) } - if (resData[i].goodValue) { - this.goodValue.push(resData[i].goodValue) + for (let i = 0; i < yuceList.length; i++) { + this.o38hDataYuce.push(Math.abs(yuceList[i].O3)) + timeArray.push(yuceList[i].time) } + this.newLineChartData2.series[0].data = this.o38hDataYuce + this.newLineChartData2.series[1].data = this.o38hDataShice + this.newLineChartData2.xAxis = timeArray + this.lineChartData2 = this.newLineChartData2 } - this.newLineChartData.series[0].data = this.o31hDataYuce - this.newLineChartData.series[1].data = this.o31hDataShice - this.newLineChartData.series[0].name = '������' - this.newLineChartData.series[1].name = '������' - this.newLineChartData.title[0] = '������' - this.newLineChartData.title[1] = '������' - this.newLineChartData.xAxis = timeArray - this.lineChartData = this.newLineChartData }) .catch((error) => { console.log(error) }) }, - ctfRegion(v) { + ctfRegion (v) { this.city = v this.searchDate(this.city) }, -- Gitblit v1.8.0