Ionic 项目总结

开始：

一：当开始一个项目时，应该先分析该项目的组成，例如 某数据大屏，共分为八大模块

 1. 头部header模块，包括是项目的title，一些时间的组成
 2. 左边（line-area）三个echarts图模块，这三块echarts功能相似，都为折线图，所以可以将它作为一个组件复用，动态的传递不同的参数即可。
 3. 中上部分模块（order-list）模块，该模块主要是一些简单的交互数据的展示。
 4. 中中部分模块（weak-area）模块，该模块是一个柱形的echarts图模块，需要分析近几日的数据交互，比如后台只传进三天的数据，那我们该如何将其在最近的几天中进行定位的渲染。
 5. 中下部分模块（slider-area）模块，该模块是一个轮播图区域，运用ionic自带的轮播组件进行两个echart模块的轮播，一个为饼图，一个为雷达图。
 6. 右上部分模块（order-day）模块，该模块是一个日产订单列表模块，该列表需要注意是一个自动分页的数据展示模块
 7. 右下部分模块 (order-month)模块，该模块是一个月订单产品模块，也是一个echarts折线图模块。

二：分块分析
 1.:header模块主要有时间戳（自动刷新）
	ts部分：
		// 日期实时获取
	    public day: any = new Date();
	    
	    public today: any = this.day.getDay();
	
	    public weekArr: any[] = [
	        '星期一',
	        '星期二',
	        '星期三',
	        '星期四',
	        '星期五',
	        '星期六',
	        '星期日',
	    ]
	
	    //定时器
	    public time: any = this.getTimer();
	    //时间定时器
	    getTimer() {
	        var h = this.day.getHours();
	        h = h < 10 ? '0' + h : h;
	        var m = this.day.getMinutes();
	        m = m < 10 ? '0' + m : m;
	        return h + ':' + m
	    }   	
html部分：
	
	    <!-- header开始 -->
	    <header>
	        <div class="header_date">
	            <span style="font-weight: bold;">{{time}}</span>
	            <span>{{weekArr[today]}}</span>
	            <span>{{day | date:'yyyy-MM-dd'}}</span>
	        </div>
	    </header>
	    <!-- header结束 -->
	  
2:左边（line-area部分）：需要单独用一个组件进行划分
因为该的echarts折线图由三部分组成，
x轴有WK1,WK2,WK3等后台传来的数据，那么我们需要将后台传来的数据封装成一个数组，然后在放在echarts里面渲染。
y轴有目标值，合格率等两块折线。也是需要将后台数据进行封装。

3：中上部分的订单列表（orderlist）模块：需要用单独的一个组件进行划分
	该部分需要有样式的绑定，
4：中中部分的（weakarea）模块：需要单独的用一个组件进行划分
	该部分需要考虑的有echart柱形图x轴需要自动的获取近七日的日期算法，然后echart的x轴自动渲染近七天的日期，然后y轴则有不良品和产品的两块柱形图，我们应该先定义自己的两块柱形图数据，然后通过自定义后台的数据格式，将我们的echarts数据进行更换，也就是说，假若我门的不良数据在近几天的是[50,20,50,60,50,40],而后台传来的只有三天的不良数，那么我们先得判断这三天是否属于我们获取的近几天日期，如果属于，那么我们就取到后台的三天的的数据在我们近几天中出现的索引，然后根据索引再将不良品和产品分别渲染进来
5：中下部分的（slide-area）模块：需要单独用一个组件划分
	该部分使用一个<ion-slide>轮播图组件进行编写，需要注意的是轮播图自动播放需要设置slideOpts参数（网上可以查到）;
	该轮播图需要将两块echart进行轮播，需要注意的是他们的样式结构。
6: 右上部分的（order-day）模块：需要单独用一个组件划分
	该部分是一个日订单数据列表展示。需要注意的该页面的数据不是固定的，所以需要对下面的数据进行分析，找到每页展示数据的规律。
7：右下部分的（order-month）模块：需要单独用一个组件划分
	该部分是一个echart折线图模块，比较简单，只需要把后台的数据封装成一个列表即可。