fix: 臭氧预测接口修改

quanyawei

2024-04-02 dbaf5c39d2ecdf2fef0b4bdda7faca15da6bd2ad

 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,64 @@
      }
      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))
            }
            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 +344,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 +356,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 +379,45 @@
      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))
            }
            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)
    },