纯vue+天气预报，不借助插件，大屏数据化展示

做大屏项目的时候，在项目中遇到要展示天气预报。没有写过，以为很难。在百度了很多之后，自己摸索写出来了。
效果：

后台返的数据，拿自己要的数据就行：

代码：

<template>
<div ><div class="headText">天气预报</div><div class="weather main_envir" v-loading="loading"><div class="crb-tit"><divclass="wea_box"v-for="(item, i) in this.tianqi":key="i"v-show="i < 4"><p>//img这一块，src是http的，直接引入就行。其中有两个图片没有找到，从ui那里切图过来，引入就行<imgsrc="./images/duoyunzhuanyin.png"alt="" v-if="item.type == '多云转阴'"/><imgsrc="http://api.map.baidu.com/images/weather/day/yin.png"alt="" v-if="item.type == '阴'"/><imgsrc="http://api.map.baidu.com/images/weather/day/leizhenyu.png"alt="" v-if="item.type == '雷阵雨'"/><imgsrc="http://api.map.baidu.com/images/weather/day/xiaoyu.png"alt="" v-if="item.type == '小雨' || item.type == '小雨转阴' || item.type == '阴转小雨'"/><imgsrc="http://api.map.baidu.com/images/weather/day/zhongyu.png"alt="" v-if="item.type == '中雨'"/><imgsrc="http://api.map.baidu.com/images/weather/day/dayu.png"alt="" v-if="item.type == '大雨'"/><imgsrc="http://api.map.baidu.com/images/weather/day/zhenyu.png"alt="" v-if="item.type == '阵雨'"/><imgsrc="http://api.map.baidu.com/images/weather/day/baoyu.png"alt="" v-if="item.type == '暴雨'"/><imgsrc="http://api.map.baidu.com/images/weather/day/baoxue.png"alt="" v-if="item.type == '暴雪'"/><imgsrc="http://api.map.baidu.com/images/weather/day/xiaoxue.png"alt="" v-if="item.type == '小雪'"/><imgsrc="http://api.map.baidu.com/images/weather/day/zhongxue.png"alt="" v-if="item.type == '中雪'"/><imgsrc="http://api.map.baidu.com/images/weather/day/daxue.png"alt="" v-if="item.type == '大雪'"/><imgsrc="http://api.map.baidu.com/images/weather/day/yujiaxue.png"alt="" v-if="item.type == '雨夹雪' || item.type == '多云转雨夹雪'"/><imgsrc="http://api.map.baidu.com/images/weather/day/zhenxue.png"alt="" v-if="item.type == '阵雪'"/><imgsrc="http://api.map.baidu.com/images/weather/day/qing.png"alt="" v-if="item.type == '晴'"/><imgsrc="./images/qingzhuanduoyun.png"alt="" v-if="item.type == '晴转多云'"/><imgsrc="http://api.map.baidu.com/images/weather/day/duoyun.png"alt="" v-if="item.type == '多云'"/></p><p>{{ item.week }}</p><p>{{ item.low }}~{{ item.high }}</p><p>{{ item.type }}</p><p>{{ item.fx}}{{item.fl}}</p></div></div></div>
</div>
</template>
<script>
//我把axios封装了，所以直接引入就行。可以按自己的方式写
import {wheather} from '@/api/weather'
//这三行代码要先在项目里下载包，搜一下elementResizeDetectorMaker，就会有对应的文章教你怎么下载var erd = elementResizeDetectorMaker();var erdUltraFast = elementResizeDetectorMaker({strategy: "scroll",});export default {name: '',components: {},props: {},data () {return {//zoom用来调节页面，不同的分辨率，页面随之缩放zoomNum: window.screen.width / 1920,          isRouterAlive: true,tianqi: [],//准备的数组用来接数据}},provide() {return {reload: this.reload,};},watch: {$route: function (to, from) {document.body.scrollTop = 0;document.documentElement.scrollTop = 0;},changeMuli: function (to, from) {console.log(to, from);},},created () {},mounted () {this.wheather()},methods: {reload() {this.isRouterAlive = false;this.$nextTick(() => (this.isRouterAlive = true));},async  wheather(){this.loading = true;const data = await wheather({city: "南京",})this.tianqi = data.data.data.forecast;data.data.data.forecast.forEach((item)=>{//这里说一下，因为返的字段温度前面有中文，我只要数字的温度，所以要截取一下。循环数组，截取对应字段，空格分割转数组取第二项item.high = item.high.split(" ")[1];item.low = item.low.split(" ")[1];})this.loading = false;},}
}
</script>
<style type="text/css">.main_envir {width: 100%;height: 330px;}.main_envir .crb-tit .wea_box {float: left;color: #fff;width: 25%;text-align: center;/*margin-left: 1%;*/margin-top: 10px;font-size: 20px;}.main_envir .crb-tit .wea_box p {text-align: center;line-height: 3;}.main_envir .crb-tit .wea_box p:first-child {min-height: 59px;}.el-loading-mask {background-color: transparent !important;}
</style>

纯vue+天气预报，不借助插件，大屏数据化展示相关推荐

基于VUE + Echarts 实现可视化数据大屏效果展示大数据
前言
vue疫情大屏数据展示+数据导出+地图图片下载
不废话,先上效果图审美有限下午5点开工去掉吃饭时间我的审美也只能让我做到这一步哈哈有需要可以去github下载 github上代码是不加注释的看注释在这个文章 github地址 https ...
Vue中使用Datav 完成大屏基本布局
效果图大屏前言在实际开发过程中,我们经常需要一个大屏进行一些常规数据的展示.在Vue中也是提供了这样的容器组件我们可以使用基于Vue的 Datav组件 + Vue-Baidu-Map地图组件 ...
使用开源Datav——结合vue实现大屏数据展示案例
Datav简介: 组件库基于Vue ,主要用于构建大屏(全屏)数据展示页面即数据可视化,具有多种类型组件可供使用. 文档链接:Datav-Vue 大屏数据展示组件库代码下载:datav大屏数据展示 ...
【转】设备数据通过Azure Functions 推送到 Power BI 数据大屏进行展示
设备数据通过Azure Functions 推送到 Power BI 数据大屏进行展示(1.准备工作) 原创 Sean Yu 云计算实战 2019-12-06 本案例适用于开发者入门理解Azure F ...
数据大屏可视化展示系统有什么作用
数据大屏可视化展示系统指的是用在大数据领域前端实时显示的显示屏,这在当前数字化经济兴起的今天越来越普及,比如一些企业的展厅或者控制室都会打造一个显示大数据平台用来展示企业的各种数据,帮助管理人员分析各 ...
大屏数据展示，5.5寸大屏幕手机更受消费者喜爱
智能手机从出现到热销,再到主导人们的生活,并没有花费太长时间.功能越来越多,屏幕越来越大,人们曾经一度认为手机的尺寸可能无限变大,乃至于取代电脑.但是,人们对手机便携性的需求毕竟还是相当高的,所以手机 ...
python flask大作业，疫情数据大屏可视化展示
整体效果功能描述本作业从MongoDB取出中国和世界疫情的相关数据进行处理和分析,然后将处理好的数据以Json的形式分别加载到相应的网站,基于ajax异步加载实现轮询,设定每一个小时发起一次请求, ...
大数据 / 大屏数据展示模板
大数据 / 大屏数据展示模板:https://gitee.com/hnustbd/DaShuJuZhiDaPingZhanShi/tree/master/

纯vue+天气预报，不借助插件，大屏数据化展示

纯vue+天气预报，不借助插件，大屏数据化展示相关推荐

最新文章

热门文章