提交

guoshipeng

2023-07-06 63c0ecf98f3705b4c70e4bafee5f325966a5777b

 src/views/O3/index.vue

@@ -1,20 +1,24 @@
<template>
  <div style="width:100%; height: 100%; overflow-y: scroll">
  <div style="width: 100%; height: 100%; overflow-y: scroll">
    <div class="topSelect">
<!--      <Region style="width:unset" @regionCode="ctfRegion" />-->
      <!--      <Region style="width:unset" @regionCode="ctfRegion" />-->
      <div>
        <el-radio-group v-model="radio1" style="margin-left:20px; margin-right:20px" size="small">
        <el-radio-group
          v-model="radio1"
          style="margin-left: 20px; margin-right: 20px"
          size="small"
        >
          <el-radio-button label="昨天" />
          <el-radio-button label="今天" />
          <el-radio-button label="明天" />
        </el-radio-group>
        <!--       <TimePicker v-model="selectData" type="date" style="padding-left:0;margin-left:20px"/>-->
        <el-date-picker
            v-model="selectData"
            type="date"
            placeholder="选择日期"
            style="width: 160px;"
            size="small"
          v-model="selectData"
          type="date"
          placeholder="选择日期"
          style="width: 160px"
          size="small"
        />
        <!--      <el-date-picker
                v-model="value2"
@@ -26,7 +30,7 @@
                value-format="yyyy-MM-dd"
              />-->
        <!--查询按钮-->
<!--        <el-button @click="selectDataBtn" class="btn1" size="small">查询</el-button>-->
        <!--        <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">
@@ -38,17 +42,45 @@
        </div>
        <div style="display: flex; align-items: center">
          <div>城市：</div>
          <el-input placeholder="请输入内容" v-model="inputCity" size="small" style="width: 55%; margin-right: 2%">
          <el-input
            placeholder="请输入内容"
            v-model="inputCity"
            size="small"
            style="width: 55%; margin-right: 2%"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-button type="primary" size="small" @click="selectDataBtn">查询</el-button>
          <el-button type="primary" size="small" @click="selectDataBtn"
            >查询</el-button
          >
        </div>
      </div>
    </div>
    <div style="text-align: right; margin: 0px 30px 15px 0px; color: #666666" v-if="isShow"><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>
    <LineChart :chart-data="lineChartData" :width="echartsWidth" :height="echartsHeight" :interval="interval" style="margin: auto;margin-bottom: 5%"/>
<!--    <O3Echarts :chart-data="lineChartData" style="width: 70%; height: 300px; margin: auto;margin-bottom: 5%"/>-->
    <LineChart :chart-data="lineChartData2" :width="echartsWidth" :height="echartsHeight" :interval="interval" style="margin: auto"/>
    <div
      style="text-align: right; margin: 0px 30px 15px 0px; color: #666666"
      v-if="isShow"
    >
      <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>
    <LineChart
      :chart-data="lineChartData"
      :width="echartsWidth"
      :height="echartsHeight"
      :interval="interval"
      style="margin: auto; margin-bottom: 5%"
    />
    <!--    <O3Echarts :chart-data="lineChartData" style="width: 70%; height: 300px; margin: auto;margin-bottom: 5%"/>-->
    <LineChart
      :chart-data="lineChartData2"
      :width="echartsWidth"
      :height="echartsHeight"
      :interval="interval"
      style="margin: auto"
    />
  </div>
</template>

@@ -65,55 +97,55 @@
const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
    actualData: [180, 160, 151, 106, 145, 150, 130],
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
}
const lineChartData2 = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
    actualData: [120, 82, 91, 154, 162, 140, 145],
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
    actualData: [180, 160, 151, 106, 145, 150, 130],
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
    actualData: [120, 90, 100, 138, 142, 130, 130],
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
    actualData: [120, 82, 91, 154, 162, 140, 130],
  },
}
const axios1 = axios.create({
  baseURL: 'http://121.43.179.139:8080',
  timeout: 5000
  timeout: 5000,
})
export default {
// import 引入的组件需要注入到对象中才能使用
  // import 引入的组件需要注入到对象中才能使用
  components: {
    LineChart,
    Region,
    // TimePicker
  },
  filters: {
    sensorFilter: function(value) {
    sensorFilter: function (value) {
      if (!value) return ''
      return json[value]
    }
    },
  },
  props: {
    // defaultData: Array
@@ -141,12 +173,12 @@
      newLineChartData: {
        series: [],
        xAxis: [],
        title: []
        title: [],
      },
      newLineChartData2: {
        series: [],
        xAxis: [],
        title: []
        title: [],
      },
      newData: '',
      defaultData: [],
@@ -159,7 +191,7 @@
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
        },
        // shortcuts: [{
        //   text: '昨天',
        //   onClick(picker) {
@@ -193,7 +225,7 @@
      twoHour: '',
      threeHour: '',
      fourHours: '',
      dataArr: []
      dataArr: [],
    }
  },
  // 计算属性 类似于data概念
@@ -233,7 +265,7 @@
      }
      this.selectData = newData
      this.selectDataBtn()
    }
    },
    // value2(a, b) {
    //   // console.log(a)
    //   // var d = new Date(a)
@@ -248,6 +280,7 @@
  created() {
    // console.log(this.defaultData)
    this.selectDataBtn()
    this.searchDate()
  },
  // 方法集合
  methods: {
@@ -263,76 +296,99 @@
      this.o38hDataYuce = []
      this.o38hDataShice = []
      this.goodValue = []
      axios1({ // this.$request
      axios1({
        // this.$request
        url: '/screen_api_v2/screen/weatherData',
        // url: 'test/weatherData',
        method: 'get',
        params: {
          city: this.inputCity,
          time: this.selectData
        }
      }).then((res) => {
        if (res.data.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)
            }
          }
          if (resData[i].goodValue) {
            this.goodValue.push(resData[i].goodValue)
          }
        }
        // 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)
          time: this.selectData,
        },
      })
        .then((res) => {
          if (res.data.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)
              }
            }
            if (resData[i].goodValue) {
              this.goodValue.push(resData[i].goodValue)
            }
          }
          // 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) {
@@ -357,7 +413,8 @@
    getYesterday1() {
      var day1 = new Date()
      day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
      var month = day1.getMonth() < 9 ? '0' + (day1.getMonth() + 1) : day1.getMonth() + 1
      var month =
        day1.getMonth() < 9 ? '0' + (day1.getMonth() + 1) : day1.getMonth() + 1
      var date = day1.getDate() <= 9 ? '0' + day1.getDate() : day1.getDate()
      var s1 = day1.getFullYear() + '-' + month + '-' + date
      return s1
@@ -374,7 +431,8 @@
      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 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
@@ -391,102 +449,114 @@
    getTomorrow1() {
      var day3 = new Date()
      day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000)
      var month = day3.getMonth() < 9 ? '0' + (day3.getMonth() + 1) : day3.getMonth() + 1
      var month =
        day3.getMonth() < 9 ? '0' + (day3.getMonth() + 1) : day3.getMonth() + 1
      var date = day3.getDate() <= 9 ? '0' + day3.getDate() : day3.getDate()
      var s3 = day3.getFullYear() + '-' + month + '-' + date
      return s3
    },
    searchDate(city) {
      // this.o31hDataYuce = []
      // this.o31hDataShice = []
      // this.o38hDataYuce = []
      // this.o38hDataShice = []
      // this.goodValue = []
      this.o31hDataYuce = []
      this.o31hDataShice = []
      this.o38hDataYuce = []
      this.o38hDataShice = []
      this.goodValue = []
      this.city = city
      // this.$request({
      //   url: '/aqi/compareO3',
      //   method: 'get',
      //   params: {
      //     regionCode: this.city,
      //     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)
      //     }
      //     if (resData[i].goodValue) {
      //       this.goodValue.push(resData[i].goodValue)
      //     }
      //   }
      //   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)
      //   })
      this.$request({
        url: '/aqi/compareO3',
        method: 'get',
        params: {
          regionCode: '320583',
          time: '2023-06-17 ',
        },
      })
        .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)
            }
            if (resData[i].goodValue) {
              this.goodValue.push(resData[i].goodValue)
            }
          }
          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) {
      this.city = v
      this.searchDate(this.city)
    }
  } // 如果页面有keep-alive缓存功能，这个函数会触发
    },
  }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped lang="scss">
.topSelect{
    display: flex;
.topSelect {
  display: flex;
  justify-content: space-between;
    // justify-content: space-between;
    margin-bottom: 20px;
    padding: 20px 15px 0 15px;
    //span:first-child{
    //    flex: 1;
    //}
    // div:last-child{
    //     width: 300px;
    //     line-height: 40px;
    //     padding-left: 6px;
    // }
  // justify-content: space-between;
  margin-bottom: 20px;
  padding: 20px 15px 0 15px;
  //span:first-child{
  //    flex: 1;
  //}
  // div:last-child{
  //     width: 300px;
  //     line-height: 40px;
  //     padding-left: 6px;
  // }
}
.topTitle{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 15px;
.topTitle {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 15px;
}
.btn1{
.btn1 {
  margin-left: 1%;
  height: 40px;
}

.spanDiv>span+span{
  color: #2d8cf0
.spanDiv > span + span {
  color: #2d8cf0;
}
.spanDiv>span+span:hover{
  cursor:pointer;
.spanDiv > span + span:hover {
  cursor: pointer;
}
.orangeColor{
.orangeColor {
  color: darkorange;
}
</style>