<template>
|
<div style="width: 100%; height: 100%; overflow-y: scroll">
|
<div class="topSelect">
|
<!-- <Region style="width:unset" @regionCode="ctfRegion" />-->
|
<div>
|
<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"
|
/>
|
<!-- <el-date-picker
|
v-model="value2"
|
align="right"
|
type="date"
|
placeholder="选择日期"
|
:picker-options="pickerOptions"
|
style="width:160px;margin-left:20px"
|
value-format="yyyy-MM-dd"
|
/>-->
|
<!--查询按钮-->
|
<!-- <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>
|
<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>
|
<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>
|
</template>
|
|
<script>
|
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
// 例如：import《组件名称》from'《组件路径》';
|
|
import LineChart from '@/components/Echarts/LineChart'
|
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'
|
const lineChartData = {
|
newVisitis: {
|
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
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],
|
},
|
purchases: {
|
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
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],
|
},
|
}
|
const lineChartData2 = {
|
newVisitis: {
|
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
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],
|
},
|
purchases: {
|
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
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],
|
},
|
}
|
const axios1 = axios.create({
|
baseURL: 'http://121.43.179.139:8080',
|
timeout: 5000,
|
})
|
export default {
|
// import 引入的组件需要注入到对象中才能使用
|
components: {
|
LineChart,
|
Region,
|
// TimePicker
|
},
|
filters: {
|
sensorFilter: function (value) {
|
if (!value) return ''
|
return json[value]
|
},
|
},
|
props: {
|
// defaultData: Array
|
},
|
data() {
|
// 这里存放数据
|
return {
|
interval: 0,
|
echartsWidth: '80%',
|
echartsHeight: '400px',
|
HourPicker: 'TimePicker',
|
lineChartData: lineChartData.purchases,
|
lineChartData2: lineChartData2.purchases,
|
props: { multiple: true },
|
options: [],
|
value: '',
|
// value1: '',
|
newMac: '',
|
newMac1: [],
|
// newMac2:'',
|
newSensor: [],
|
radio1: '今天',
|
unit: 'hour',
|
type: 'select',
|
newLineChartData: {
|
series: [],
|
xAxis: [],
|
title: [],
|
},
|
newLineChartData2: {
|
series: [],
|
xAxis: [],
|
title: [],
|
},
|
newData: '',
|
defaultData: [],
|
selectData: this.getToday1(),
|
city: '昆山',
|
o31hDataYuce: [],
|
o31hDataShice: [],
|
o38hDataYuce: [],
|
o38hDataShice: [],
|
pickerOptions: {
|
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: '', // 输入框数据
|
isShow: false,
|
oneHour: '',
|
twoHour: '',
|
threeHour: '',
|
fourHours: '',
|
dataArr: [],
|
}
|
},
|
// 计算属性 类似于data概念
|
computed: {},
|
// 监控data中的数据变化
|
watch: {
|
// newMac(newVal, oldval) {
|
// this.newMac1 = []
|
// this.newMac1.push(newVal[1][1])
|
// this.getSensor()
|
// },
|
radio1(nv, ov) {
|
if (nv === '昨天') {
|
this.getYesterday()
|
} else if (nv === '今天') {
|
this.getToday()
|
} else if (nv === '明天') {
|
this.getTomorrow()
|
}
|
},
|
selectData(a, b) {
|
// var d = new Date(a)
|
// var youWant = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
|
// console.log(youWant)
|
|
// this.time = a
|
// this.searchDate(this.city)
|
var newData = this.newTime(a)
|
if (newData === this.getYesterday1()) {
|
this.radio1 = '昨天'
|
} else if (newData === this.getToday1()) {
|
this.radio1 = '今天'
|
} else if (newData === this.getTomorrow1()) {
|
this.radio1 = '明天'
|
} else {
|
this.radio1 = ''
|
}
|
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 实例）
|
created() {
|
// console.log(this.defaultData)
|
this.selectDataBtn()
|
this.searchDate()
|
},
|
// 方法集合
|
methods: {
|
// 点击热门城市事件
|
inputCityChange(value) {
|
this.inputCity = value
|
this.selectDataBtn()
|
},
|
// 查询数据
|
selectDataBtn() {
|
this.o31hDataYuce = []
|
this.o31hDataShice = []
|
this.o38hDataYuce = []
|
this.o38hDataShice = []
|
this.goodValue = []
|
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)
|
})
|
},
|
// 时间处理函数
|
newTime(timeArr) {
|
var date = new Date(timeArr)
|
var y = date.getFullYear()
|
var m = date.getMonth() + 1
|
m = m < 10 ? '0' + m : m
|
var d = date.getDate()
|
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
|
|
this.selectData = this.getYesterday1()
|
// this.searchDate(this.city)
|
},
|
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 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
|
this.selectData = this.getToday1()
|
// this.searchDate(this.city)
|
},
|
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
|
this.selectData = this.getTomorrow1()
|
// this.searchDate(this.city)
|
},
|
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 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: '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缓存功能，这个函数会触发
|
}
|
</script>
|
<style scoped lang="scss">
|
.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;
|
// }
|
}
|
.topTitle {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
padding: 0 15px;
|
}
|
.btn1 {
|
margin-left: 1%;
|
height: 40px;
|
}
|
|
.spanDiv > span + span {
|
color: #2d8cf0;
|
}
|
.spanDiv > span + span:hover {
|
cursor: pointer;
|
}
|
.orangeColor {
|
color: darkorange;
|
}
|
</style>
|
