<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('210381')">海城</span>
|
<span @click="inputCityChange('320900')">盐城</span>
|
<!-- <span @click="inputCityChange('沧州')">沧州市</span>
|
<span @click="inputCityChange('任丘')">任丘市</span> -->
|
</div>
|
<!-- <div style="display: flex; align-items: center">
|
<div>城市：</div>
|
<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> -->
|
</div>
|
</div>
|
<!-- <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>
|
|
<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: [
|
{
|
data: [],
|
name: '预测',
|
type: 'line',
|
label: { normal: { show: true } },
|
}, {
|
data: [],
|
name: '实测',
|
type: 'line',
|
label: { normal: { show: true } },
|
}
|
],
|
xAxis: [],
|
title: ['预测', '实测'],
|
},
|
newLineChartData2: {
|
series: [
|
{
|
data: [],
|
name: '预测',
|
type: 'line',
|
label: { normal: { show: true } },
|
}, {
|
data: [],
|
name: '实测',
|
type: 'line',
|
label: { normal: { show: true } },
|
}
|
],
|
xAxis: [],
|
title: ['预测', '实测'],
|
},
|
newData: '',
|
defaultData: [],
|
selectData: this.getToday1(),
|
city: '昆山',
|
o3DataYuce: [],
|
o3DataShice: [],
|
o38hDataYuce: [],
|
o38hDataShice: [],
|
pickerOptions: {
|
disabledDate (time) {
|
return time.getTime() > Date.now()
|
},
|
},
|
value2: this.getToday1(),
|
|
inputCity: '320900', // 输入框数据
|
isShow: false,
|
oneHour: '',
|
twoHour: '',
|
threeHour: '',
|
fourHours: '',
|
}
|
},
|
// 计算属性 类似于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()
|
this.searchDate()
|
},
|
},
|
// 生命周期 - 创建完成（可以访问当前 this 实例）
|
created () {
|
this.selectDataBtn()
|
this.searchDate()
|
},
|
// 方法集合
|
methods: {
|
// 点击热门城市事件
|
inputCityChange (value) {
|
this.inputCity = value
|
this.selectDataBtn()
|
this.searchDate()
|
},
|
// 查询数据
|
selectDataBtn () {
|
this.o3DataYuce = []
|
this.o3DataShice = []
|
this.lineChartData = {}
|
this.$request({
|
url: '/aqi/compareO3New',
|
method: 'get',
|
params: {
|
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) {
|
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 () {
|
this.selectData = this.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 date = day1.getDate() <= 9 ? '0' + day1.getDate() : day1.getDate()
|
var s1 = day1.getFullYear() + '-' + month + '-' + date
|
return s1
|
},
|
getToday () {
|
this.selectData = this.getToday1()
|
},
|
getToday1 () {
|
var day2 = new Date()
|
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 () {
|
this.selectData = this.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 date = day3.getDate() <= 9 ? '0' + day3.getDate() : day3.getDate()
|
var s3 = day3.getFullYear() + '-' + month + '-' + date
|
return s3
|
},
|
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) {
|
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>
|
