fix: 样式修改

quanyawei

2024-05-13 cd408072e22e695484baaf0c52faa7bf0afc7149

 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,29 +30,77 @@
                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">
          <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
            :style="{color: inputCity == '210381' ? '#f30e0e' : '#2d8cf0'}"
            @click="inputCityChange('210381')"
          >海城</span>
          <span
            :style="{color: inputCity == '320900' ? '#f30e0e' : '#2d8cf0'}"
            @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" size="small" style="width: 55%; margin-right: 2%">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          <el-input
            v-model="inputCity"
            placeholder="请输入内容"
            size="small"
            style="width: 55%; margin-right: 2%"
          >
            <i
              slot="prefix"
              class="el-input__icon el-icon-search"
            />
          </el-input>
          <el-button type="primary" size="small" @click="selectDataBtn">查询</el-button>
        </div>
          <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
      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>
    </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>

@@ -57,68 +109,68 @@
// 例如：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],
    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
})
// const axios1 = axios.create({
//   baseURL: 'http://121.43.179.139:8080',
//   timeout: 5000,
// })
export default {
// import 引入的组件需要注入到对象中才能使用
  // import 引入的组件需要注入到对象中才能使用
  components: {
    LineChart,
    Region,
    // Region,
    // TimePicker
  },
  filters: {
    sensorFilter: function(value) {
    sensorFilter: function (value) {
      if (!value) return ''
      return json[value]
    }
    },
  },
  props: {
    // defaultData: Array
  },
  data() {
  data () {
    // 这里存放数据
    return {
      interval: 0,
@@ -139,61 +191,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概念
@@ -205,7 +256,7 @@
    //   this.newMac1.push(newVal[1][1])
    //   this.getSensor()
    // },
    radio1(nv, ov) {
    radio1 (nv, ov) {
      if (nv === '昨天') {
        this.getYesterday()
      } else if (nv === '今天') {
@@ -214,7 +265,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)
@@ -233,109 +284,64 @@
      }
      this.selectData = newData
      this.selectDataBtn()
    }
    // 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.searchDate()
    },
  },
  // 生命周期 - 创建完成（可以访问当前 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,
          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)
          regionCode: this.inputCity,
          time: this.selectData,
        },
      })
        .then((res) => {
          if (res.data.length === 0) {
            this.$message('当前没有数据')
            this.isShow = false
          } else {
            this.isShow = true
            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)
            }
            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
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 时间处理函数
    newTime(timeArr) {
    newTime (timeArr) {
      var date = new Date(timeArr)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
@@ -344,149 +350,120 @@
      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 = 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
    },
    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 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 = 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.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)
      //   })
    searchDate () {
      this.o38hDataYuce = []
      this.o38hDataShice = []
      this.lineChartData2 = {}
      this.$request({
        url: '/aqi/getO38H',
        method: 'get',
        params: {
          regionCode: this.inputCity,
          time: this.selectData,
        },
      })
        .then((res) => {
          if (res.data.length === 0) {
            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)
            }
            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
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    ctfRegion(v) {
    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>