中国(寿光)国际蔬菜科技博览会智慧农业系统 — LED拼接屏展示前端开发文档
上线后呈现效果:
一、开发需求及方案制定
1、确定现场led拼接屏的宽高比,按照1920px*1080px的分辨率,F11全屏后刚好占满整屏且无滚动条;
2、与产品设计确定页面相关功能:
3、确认拼接屏展示时远程投屏的浏览器,根据页面所要实现的功能,挑选兼容性最好的浏览器,最终选定:360极速浏览器的兼容模式(IE10);
4、页面模块划分,确定两屏切换方案,编写公共样式;
二、功能实现(不局限于此):
1、两屏循环切换采用单页,v-show来指定显示和隐藏的模块,此处不用v-if是因为我们需要在第一屏数据获取完后就获取到第二屏的接口数据并渲染,给用户视觉体验效果更好;v-if和v-show的区别请移步vue官方:https://cn.vuejs.org/v2/guide/conditional.html
2、自适应:拼接屏是直接连接电脑投屏上去,不需要考虑自适应的问题,如需考虑自适应请用rem;
3、图表(百度开发的Echarts)曲线图、柱状图,雷达图,散点图;先获取数据然后再绘制,详细请移步echarts官方:https://echarts.baidu.com/option.html#title
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
var echarts = require('echarts');
例:寿光最新价格行情曲线图
4、展区监控,菜博会官方使用的海康的摄像头和录像机,且该监控只能内网访问,我们使用的是最简单的办法,将海康的demo放在他们投屏的电脑上,vue中内嵌iframe页面,然后调样式即可;
注意:
5、产品图展示,图片自动循环轮播,
/*全局引入*/
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css' //这里注意具体看使用的版本是否需要引入样式,以及具体位置
Vue.use(VueAwesomeSwiper)
data中:
swiperOption: { //绿色果蔬的产品轮播
direction: "horizontal",
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
autoplay: {
delay: 1500,
stopOnLastSlide: false,
disableOnInteraction: false,
},
loop: true,
loopedSlides: 0,
initialSlide: 0,
slidesPerView: 2,
spaceBetween: '3.33%',
speed: 800,
},
监听:
computed: {
swiper () {
return this.$refs.mySwiper.swiper;
}
},
6、植物的种植模型,当切到第二屏时调用该函数,每一个阶段显示一定时间切换,图片的淡入淡出用css3控制
{{item.id}}
{{item.period}}
data中:
growingList: [ //种植模型
{id: '01', period: '缓苗期管理', dataInfo: '(定植后1周)', imgSrc: 'static/images/growing1.png'},
{id: '02', period: '定植期管理', dataInfo: '(定植后2~4周)', imgSrc: 'static/images/growing2.png'},
{id: '03', period: '开花坐果期管理', dataInfo: '(定植后5~8周)', imgSrc: 'static/images/growing3.png'},
{id: '04', period: '果实膨大期和成熟期管理', dataInfo: '(定植后9~11周)', imgSrc: 'static/images/growing4.png'},
{id: '05', period: '采收期管理', dataInfo: '(雌花开放后37~40天采收第一批瓜)', imgSrc: 'static/images/growing4.png'},
],
监听:
watch: {
currentPage (newValue, oldValue) {
console.log("currentPage: "+newValue, oldValue);
if(newValue == 2){
// 种植模型
this.plantModelAnt()
this.pageSwitch2()
}else{
// console.log(newValue, oldValue)
this.pageSwitch1()
}
},
},
函数:
// 种植模型动画
plantModelAnt(){
var that = this;
setTimeout(() => {
console.log("当前展示屏===" +that.currentPage)
if(that.currentIndex < 4){
that.currentIndex += 1
}else{
that.currentIndex = 0
}
console.log('currentIndex====' + that.currentIndex)
that.plantModelAnt()
},11000)
},
7、大棚监控,使用的萤石云,在萤石的后台拿到对应的Rtmp流地址
import { EZuikit } from '../common/js/EZuikit.js'
mounted(){
var player = new EZUIKit.EZUIPlayer('myPlayer');
}
如有不懂请咨询QQ:1294487763,暂还是前端小白,非相关请勿扰,谢谢!