From cd408072e22e695484baaf0c52faa7bf0afc7149 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 13 May 2024 16:15:13 +0800
Subject: [PATCH] fix: 样式修改
---
src/views/O3/index.vue | 527 ++++++++++++++++++++++++++++------------------------------
1 files changed, 252 insertions(+), 275 deletions(-)
diff --git a/src/views/O3/index.vue b/src/views/O3/index.vue
index 8e39cac..6653148 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,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>
--
Gitblit v1.8.0