You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

854 lines
20 KiB

7 months ago
<template>
<view class="content">
<!-- <view class="title">天气</view> -->
<!-- <back :info="info"></back> -->
<view class="tianqi">
<view class="view1">
<view class="view1_li view1_li1">
<text class="date">{{ date1 }}</text>
<!-- <text class="date">{{ date2 }}</text> -->
<text class="date">{{ date3 }}</text>
</view>
<view class="view1_li view1_li2">
<view class="left">
<text class="t1">{{ alldata.now.tmp }}</text>
<text class="t2"></text>
</view>
<view class="right">
<image class="img" :src="$gettqimg(alldata.now.cond_code)" mode=""></image>
</view>
</view>
<view class="view1_li view1_li3">
<text class="title">{{ alldata.now.cond_txt }}</text>
</view>
<view class="view1_li view1_li4">
<text class="kqzl1">空气质量</text>
<text class="kqzl2">{{ alldata.aqi.city.aqi }}</text>
<text class="kqzl3">空气{{ alldata.aqi.city.qlty }}</text>
</view>
</view>
<view class="viewyj" v-if="yjxx.length>0">
<view class="mintitle">气象预警</view>
<swiper :autoplay="true" :interval="3000" :duration="1000">
<swiper-item v-for="(el,ind) in yjxx">
<view class="swiper-item">{{el.content}}</view>
</swiper-item>
</swiper>
</view>
<view class="line"></view>
<view class="view2">
<view class="mintitle">24小时天气</view>
<view class="qiun-charts">
<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true
@touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
</view>
</view>
<view class="line"></view>
<view class="view3">
<ul>
<li class="view3_li" v-for="(el, index) in view3data">
<view class="view3_libox">
<view class="l1">{{el.date}}</view>
<view class="l2">{{el.title}}</view>
<view class="l3">
<image class="img" :src="$gettqimg(el.img)" mode=""></image>
</view>
<view class="l4">{{el.wind_dir}}</view>
<view class="l5">{{el.wind_sc}}</view>
</view>
</li>
</ul>
<view class="qiun-charts2">
<canvas canvas-id="canvasLineA2" id="canvasLineA2" class="charts"
@touchstart="touchLineA2"></canvas>
</view>
</view>
<view class="line"></view>
<view class="view4">
<ul>
<li class="view4_li" v-for="(el, index) in view4data">
<view class="view4_libox">
<view class="view4_li_l">
<image class="img" :src="getImg1(el.img)" mode=""></image>
</view>
<view class="view4_li_r">
<view class="v1">{{ el.name }}</view>
<view class="v2">{{ el.data }}</view>
</view>
</view>
</li>
</ul>
</view>
</view>
<tabBar :info="infos"></tabBar>
</view>
</template>
<script>
import back from '@/components/html/back.vue';
import tabBar from '@/components/html/tabBar.vue';
var web = require('@/components/utils/request.js');
var util = require('@/components/utils/util.js');
import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
var _self;
var canvaPie = null;
var color = ['#00DB77', '#FF9024', '#FF4824'];
var zcolor = ['#22A86C', '#E68320', '#E64120'];
var canvaLineA = null;
var canvaLineA2 = null;
export default {
components: {
tabBar,
back
},
data() {
return {
info: {
color: false,
num: false
},
infos: {
ind: 0,
color: false
},
nowDate: '',
jqdatas: [],
kcj: 0,
kcc: 0,
jcj: 0,
jcc: 0,
hcj: 0,
hcc: 0,
// 天气
alldata: {
now: {
cond_code: "",
cond_txt: "",
tmp: "",
wind_dir: "",
wind_sc: ""
},
aqi: {
city: ''
}
},
data: {},
nowdate: '',
date1: '',
date2: '',
date3: '',
view3data: [],
view4data: [{
name: '风力等级',
img: 'tq-icon3.png',
data: ''
},
{
name: 'PM2.5',
img: 'tq-icon1.png',
data: ''
},
{
name: '湿度',
img: 'tq-icon6.png',
data: ''
},
{
name: '气压',
img: 'tq-icon5.png',
data: ''
},
{
name: '出游',
img: 'tq-icon2.png',
data: ''
},
{
name: '空气污染扩散',
img: 'tq-icon4.png',
data: ''
}
],
cWidth: '',
cHeight: '',
pixelRatio: 1,
cWidth2: '',
cHeight2: '',
pixelRatio2: 1,
yjxx: []
}
},
onLoad() {
var date = new Date();
this.nowDate = date.getFullYear() + "-" + ((date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : (date
.getMonth() + 1)) + "-" + (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
this.getData3();
this.getData4();
_self = this;
// uni.upx2px(750) 这是uni-app自带的自适应,以750的尺寸为基准。动态变化
this.cWidth = uni.upx2px(750);
this.cHeight = uni.upx2px(250);
this.cWidth2 = uni.upx2px(750);
this.cHeight2 = uni.upx2px(170);
this.getWeather();
},
onPageScroll(e) {
if (e.scrollTop > 50 && !this.info.num) {
this.info.num = true;
}
if (e.scrollTop < 50 && this.info.num) {
this.info.num = false;
}
},
methods: {
// 天气
getNowdata(nowdate) {
var url = 'weatherInfo/day_data.jspx';
var para = {
time: nowdate
};
var that = this;
web.httpPost(that, url, para, function(res) {
console.log(res.data.data)
let LineA = {
categories: [],
series: []
};
//这里我后台返回的是数组,所以用等于,如果您后台返回的是单条数据,需要push进去
// 自己可以定义数据
LineA.categories = [];
LineA.series = [{
name: "气温",
data: [],
color: '#409eff'
}];
for (var i = 0; i < res.data.data.length; i++) {
LineA.categories.push(res.data.data[i].time + ':00')
LineA.series[0].data.push(parseInt(res.data.data[i].now))
}
// LineA.categories=['00:00','01:00','02:00','03:00','04:00','05:00'];
// LineA.series=[{
// name:"南京",
// data:[12,15,10,18,6,13],
// color:'#409eff'
// }];
// LineA.categories=res.data.data.LineA.categories;
// LineA.series=res.data.data.LineA.series;
// 找到id为canvasLineA的块
that.showLineA("canvasLineA", LineA);
});
},
getWeather() {
var url = '/weatherInfo/getWeatherInfo.jspx';
var para = {};
var that = this;
web.httpPost(that, url, para, function(res) {
if (res.data.status == 200) {
that.alldata = res.data.allData.HeWeather6[0];
that.data = res.data.data;
that.date1 = that.data.date.substr(5, 2) + '月' + that.data.date.substr(8, 2) + '日';
that.view4data[0].data = that.alldata.now.wind_sc + '级';
that.view4data[1].data = that.alldata.aqi.city.pm25 + ' ug/m3';
that.view4data[2].data = that.alldata.now.hum + '%';
that.view4data[3].data = that.alldata.now.wind_sc + ' hPa';
that.view4data[4].data = that.alldata.aqi.city.qlty;
that.view4data[5].data = that.alldata.aqi.city.aqi;
console.log(that.data.date);
// var lunarDate = util.getLunarDate(that.data.date);
// var lunarDateString = util.getLunarDateString(lunarDate);
// that.date2 = '农历' + lunarDateString.month + '月' + lunarDateString.day;
// var textnl = util.getLunarDate('2021-09-03');
// console.log(textnl);
var date = new Date();
var week = web.getWeek(date);
that.date3 = week;
that.getNowdata(that.data.date);
that.view3data = [];
for (var i = 0; i < that.alldata.daily_forecast.length; i++) {
that.view3data.push({
date: that.alldata.daily_forecast[i].date.substr(5, 2) + '/' + that.alldata
.daily_forecast[i].date.substr(8, 2),
img: that.alldata.daily_forecast[i].cond_code_n,
title: that.alldata.daily_forecast[i].cond_txt_n,
wind_dir: that.alldata.daily_forecast[i].wind_dir,
wind_sc: that.alldata.daily_forecast[i].wind_sc
});
}
let LineA2 = {
categories: [],
series: []
};
// 自己可以定义数据
LineA2.series = [{
name: "最高",
data: [],
color: '#ff0000'
}, {
name: "最低",
data: [],
color: '#409eff'
}];
for (var i = 0; i < that.alldata.daily_forecast.length; i++) {
LineA2.categories.push('')
LineA2.series[0].data.push(that.alldata.daily_forecast[i].tmp_max);
LineA2.series[1].data.push(that.alldata.daily_forecast[i].tmp_min);
}
that.showLineA2("canvasLineA2", LineA2);
}
});
},
getImg1(url) {
return 'https://cs.tour-ma.com/r/cms/www/m/changshu/' + url;
},
// 展示图标的函数 接收参数,一个块的id,一个数据
showLineA(canvasId, chartData) {
canvaLineA = new uCharts({
$this: _self,
canvasId: canvasId,
// 图标类型
type: 'line',
fontSize: 11,
padding: [20, 25, 4, 5],
legend: {
show: false
},
dataLabel: true,
dataPointShape: true,
background: '#F6F6F6',
pixelRatio: _self.pixelRatio,
categories: chartData.categories,
series: chartData.series,
animation: true,
enableScroll: true, //开启图表拖拽功能
// x轴显示的内容
xAxis: {
type: 'grid',
disableGrid: true,
gridColor: '#CCCCCC',
gridType: 'dash',
dashLength: 8,
itemCount: 6, //x轴单屏显示数据的数量,默认为5个
scrollShow: true, //新增是否显示滚动条,默认false
scrollAlign: 'left', //滚动条初始位置
scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF
scrollColor: '#DEE7F7', //默认为 #A6A6A6
},
// y轴显示的内容
yAxis: {
gridType: 'dash',
disableGrid: true,
gridColor: '#CCCCCC',
dashLength: 8,
splitNumber: 5,
format: val => {
return val.toFixed(0) + '℃';
}
},
width: _self.cWidth * _self.pixelRatio,
height: _self.cHeight * _self.pixelRatio,
extra: {
line: {
type: 'straight'
}
}
});
},
showLineA2(canvasId, chartData) {
canvaLineA2 = new uCharts({
$this: _self,
canvasId: canvasId,
// 图标类型
type: 'line',
fontSize: 11,
padding: [20, 35, 0, 0],
legend: {
show: false
},
dataLabel: true,
dataPointShape: true,
background: '#F6F6F6',
pixelRatio: _self.pixelRatio2,
categories: chartData.categories,
series: chartData.series,
animation: true,
// x轴显示的内容
xAxis: {
disabled: true,
disableGrid: true,
},
// y轴显示的内容
yAxis: {
disableGrid: true,
disabled: true,
},
width: _self.cWidth2 * _self.pixelRatio2,
height: _self.cHeight2 * _self.pixelRatio2,
extra: {
line: {
type: 'straight'
}
}
});
},
// 点击图表显示的内容
touchLineA(e) {
canvaLineA.scrollStart(e);
// 使用声明的变量canvaLineA
canvaLineA.showToolTip(e, {
format: function(item, category) {
return category + ' ' + item.name + ':' + item.data;
}
});
},
touchLineA2(e) {
// 使用声明的变量canvaLineA
canvaLineA2.showToolTip(e, {
format: function(item, category) {
return category + ' ' + item.name + ':' + item.data;
}
});
},
moveLineA(e) {
canvaLineA.scroll(e);
},
touchEndLineA(e) {
canvaLineA.scrollEnd(e);
},
getData3() {
var url = '/tours/commonMethod.jspx';
var para = {
url: "http://gk.dtly.cn/hk/getByCarType.jspx",
time: this.nowDate,
state: 1
};
var that = this;
web.httpPost(that, url, para, function(res) {
if (res.data.status == 200) {
for (var i = 0; i < res.data.data.length; i++) {
if (res.data.data[i].carType == 1 || res.data.data[i].carType == 10 || res.data.data[i]
.carType == 26) {
that.kcj += res.data.data[i].count;
} else if (res.data.data[i].carType == 3 || res.data.data[i].carType == 4 || res.data
.data[i].carType == 9 || res.data.data[i].carType == 13 || res.data.data[i]
.carType == 14 || res.data.data[i].carType == 23 || res.data.data[i].carType ==
24 || res.data.data[i].carType == 35) {
that.jcj += res.data.data[i].count;
} else if (res.data.data[i].carType == 2 || res.data.data[i].carType == 5 || res.data
.data[i].carType == 15 || res.data.data[i].carType == 16 || res.data.data[i]
.carType == 17) {
that.hcj += res.data.data[i].count;
}
}
} else {
uni.showToast({
title: '查询失败'
});
}
});
},
getData4() {
var url = '/tours/commonMethod.jspx';
var para = {
url: "http://gk.dtly.cn/hk/getByCarType.jspx",
time: this.nowDate,
state: 2
};
var that = this;
web.httpPost(that, url, para, function(res) {
if (res.data.status == 200) {
for (var i = 0; i < res.data.data.length; i++) {
if (res.data.data[i].carType == 1 || res.data.data[i].carType == 10 || res.data.data[i]
.carType == 26) {
that.kcc += res.data.data[i].count;
} else if (res.data.data[i].carType == 3 || res.data.data[i].carType == 4 || res.data
.data[i].carType == 9 || res.data.data[i].carType == 13 || res.data.data[i]
.carType == 14 || res.data.data[i].carType == 23 || res.data.data[i].carType ==
24 || res.data.data[i].carType == 35) {
that.jcc += res.data.data[i].count;
} else if (res.data.data[i].carType == 2 || res.data.data[i].carType == 5 || res.data
.data[i].carType == 15 || res.data.data[i].carType == 16 || res.data.data[i]
.carType == 17) {
that.hcc += res.data.data[i].count;
}
}
} else {
uni.showToast({
title: '查询失败'
});
}
});
},
getImg(url) {
return 'https://cs.tour-ma.com/r/cms/www/m/changshu/' + url
},
showPie(canvasId, chartData) {
new uCharts({
$this: _self,
canvasId: canvasId,
type: 'arcbar',
fontSize: 11,
legend: {
show: false
},
background: '#FFFFFF',
pixelRatio: 1,
series: chartData.series,
colors: chartData.series[0].data < 40 ? [color[0]] : chartData.series[0].data < 70 ? [color[
1]] : [color[2]],
animation: true,
width: 120,
height: 120,
dataLabel: true,
title: {
name: Math.round(chartData.series[0].data * 100) + '%', //这里我自动计算了,您可以直接给任意字符串
color: chartData.series[0].data < 40 ? color[0] : chartData.series[0].data < 70 ? color[
1] : color[2],
fontSize: 18,
offsetY: -2
},
subtitle: {
name: chartData.series[0].name, //这里您可以直接给任意字符串
color: chartData.series[0].data < 40 ? zcolor[0] : chartData.series[0].data < 70 ? zcolor[
1] : zcolor[2],
fontSize: 15,
offsetY: 2
},
extra: {
arcbar: {
type: 'circle', //整圆类型进度条图
width: 10, //圆弧的宽度
startAngle: 1.5, //整圆类型只需配置起始角度即可
backgroundColor: '#EFF3F7'
}
}
});
},
touchPie(e) {
canvaPie.showToolTip(e, {
format: function(item) {
return item.name + ':' + item.data
}
});
}
}
}
</script>
<style lang="scss">
$twidth:702upx;
$klwidth:622upx;
$klheight:250upx;
$right:200upx;
$rheight:210upx;
swiper {}
.swiper-item {
width: 100%;
height: 100%;
font-size: 24rpx;
color: #666666;
}
.viewyj {
width: 90%;
padding: 0% 5% 0% 5%;
.mintitle {
color: #333333;
font-size: 30rpx;
font-weight: 600;
display: flex;
align-items: center;
margin-bottom: 15rpx;
}
.mintitle::before {
content: '';
display: inline-block;
width: 36rpx;
height: 32rpx;
background: url(https://cs.tour-ma.com/r/cms/www/m/changshu/icon-qxyj.png) no-repeat;
background-size: 100% auto;
margin-right: 5rpx;
}
}
.title {
font-size: 50upx;
font-family: Microsoft YaHei;
font-weight: 600;
color: #230F00;
line-height: 56upx;
width: $twidth;
margin-top: 60upx;
margin-bottom: 50upx;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
background: #F6F6F6;
padding-bottom: 100upx;
overflow-x: hidden;
}
.tianqi {
.view1 {
width: 100%;
background: url(https://cs.tour-ma.com/r/cms/www/m/changshu/tq-view1-bg.png) no-repeat;
background-size: 100% 100%;
object-fit: cover;
height: 360rpx;
padding-top: 140rpx;
padding-bottom: 40rpx;
position: relative;
}
.view1_li {
padding-left: 60rpx;
padding-right: 60rpx;
}
.view1_li1 .date {
margin-right: 30rpx;
color: #666666;
font-size: 30rpx;
}
.view1_li2 {
display: flex;
justify-content: space-between;
align-items: center;
}
.view1_li2 .left {
color: #000000;
}
.view1_li2 .left .t1 {
font-size: 100rpx;
}
.view1_li2 .left .t2 {
font-size: 60rpx;
}
.view1_li2 .right {
width: 148rpx;
height: 148rpx;
}
.view1_li2 .right .img {
width: 100% !important;
height: 100% !important;
}
.view1_li3 .title {
color: #666666;
font-size: 30rpx;
}
.view1_li4 .kqzl1 {
margin-right: 15rpx;
color: #666666;
font-size: 30rpx;
}
.view1_li4 .kqzl1::before {
content: '';
display: inline-block;
width: 24rpx;
height: 24rpx;
background: url(https://cs.tour-ma.com/r/cms/www/m/changshu/tq-icon-kqzl.png) no-repeat;
background-size: 100% auto;
margin-right: 10rpx;
}
.view1_li4 .kqzl2 {
margin-right: 30rpx;
color: #666666;
font-size: 30rpx;
}
.view1_li4 .kqzl3 {
margin-right: 30rpx;
color: #11b954;
font-size: 30rpx;
}
.view4 {
width: calc(100% - 50rpx);
padding: 40rpx 25rpx;
}
.view4 .view4_li {
width: 50%;
display: inline-block;
}
.view4 .view4_li .view4_libox {
display: flex;
justify-content: start;
align-items: center;
border-bottom: 1rpx solid #ebebeb;
border-right: 1rpx solid #ebebeb;
padding: 30rpx 0;
}
.view4 .view4_li:nth-last-child(1) .view4_libox,
.view4 .view4_li:nth-last-child(2) .view4_libox {
border-bottom: none;
}
.view4 .view4_li:nth-child(2n) .view4_libox {
border-right: none;
}
.view4_li .view4_li_l {
width: 72rpx;
height: 72rpx;
padding-left: 40rpx;
padding-right: 25rpx;
}
.view4_li .view4_li_l .img {
width: 100%;
height: 100%;
}
.view4_li .view4_li_r {}
.view4_li .view4_li_r .v1 {
color: #a0a0a0;
font-size: 27rpx;
}
.view4_li .view4_li_r .v2 {
color: #333333;
font-size: 27rpx;
}
.view2 {
width: 90%;
padding: 0% 5% 5% 5%;
}
.view2 .mintitle {
color: #333333;
font-size: 30rpx;
font-weight: 600;
display: flex;
align-items: center;
}
.view2 .mintitle::before {
content: '';
display: inline-block;
width: 30rpx;
height: 30rpx;
background: url(https://cs.tour-ma.com/r/cms/www/m/changshu/icon-24h.png) no-repeat;
background-size: 100% auto;
margin-right: 5rpx;
}
.view3 {
padding: 2.5% 5%;
position: relative;
}
.view3 ul {
display: flex;
justify-content: space-between;
align-items: center;
}
.view3 ul li.view3_li {
margin: 0 10rpx;
}
.view3 ul li.view3_li .view3_libox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.view3_libox .l1 {
color: #515151;
font-size: 25rpx;
}
.view3_libox .l2 {
color: #515151;
font-size: 25rpx;
}
.view3_libox .l3 {
width: 50rpx;
height: 50rpx;
}
.view3_libox .l3 .img {
width: 100%;
height: 100%;
}
.view3_libox .l4 {
color: #515151;
font-size: 25rpx;
margin-top: 170rpx;
}
.view3_libox .l5 {
color: #A2A2A2;
font-size: 24rpx;
}
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
width: 100%;
height: 250rpx;
// background-color: #FFFFFF;
}
.qiun-charts2 {
width: 90%;
height: 170rpx;
// background-color: #FFFFFF;
position: absolute;
top: 150rpx;
left: 5%;
}
.charts {
width: 100%;
height: 100%;
// background-color: #FFFFFF;
}
.line {
width: 100%;
height: 23rpx;
background-color: #f6f6f6;
}
}
</style>