From 63c0ecf98f3705b4c70e4bafee5f325966a5777b Mon Sep 17 00:00:00 2001
From: guoshipeng <3194674006@qq.com>
Date: Thu, 06 Jul 2023 09:13:54 +0800
Subject: [PATCH] 提交
---
src/views/O3/index.vue | 418 ++++++++++++++++++++++++++++++++++------------------------
1 files changed, 244 insertions(+), 174 deletions(-)
diff --git a/src/views/O3/index.vue b/src/views/O3/index.vue
index 8e39cac..a635353 100644
--- a/src/views/O3/index.vue
+++ b/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>
--
Gitblit v1.8.0