培训机构统计页面完结

src/main/java/cn/com/tenlion/controller/api/indexcount/IndexCountController.java

@@ -3,6 +3,7 @@ package cn.com.tenlion.controller.api.indexcount;
 
 import cn.com.tenlion.institutionmanagement.pojo.dtos.institution.InstitutionDTO;
 import cn.com.tenlion.pojo.dtos.apply.ApplyDTO;
+import cn.com.tenlion.pojo.dtos.classplan.ClassPlanDTO;
 import cn.com.tenlion.service.apply.IApplyService;
 import cn.com.tenlion.service.classplan.IClassPlanService;
 import cn.com.tenlion.service.lessons.ILessonsService;
@@ -54,6 +55,7 @@ public class IndexCountController extends DefaultBaseController {
     private ITeacherService teacherService;
 
 
+
     @ApiOperation(value = "统计当前登录机构报名数量", notes = "统计当前登录机构报名数量接口")
     @ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
     @GetMapping("count-apply-all-num")
@@ -128,11 +130,11 @@ public class IndexCountController extends DefaultBaseController {
 
     @ApiOperation(value = "统计当前登录机构报名情况", notes = "统计当前登录机构报名情况接口")
     @ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
-    @GetMapping("count-one-weeks-apply-num")
+    @GetMapping("count-one-weeks-apply-num/{applyClassId}")
-    public SuccessResultData<Map<String, Object>> countOneWeeksApplyNum(){
+    public SuccessResultData<Map<String, Object>> countOneWeeksApplyNum(@PathVariable("applyClassId") String applyClassId){
         Map<String, Object> params = requestParams();
         String institutionId = this.getInstitutionId();
-        String classId = "";//params.get("applyClassId").toString();
+        String classId = "99".equals(applyClassId) ? "":applyClassId;
         if(!StringUtils.isBlank(institutionId)) {
             String states0Time = DateUtil.getDay();
             String states1Time = DateUtil.getBeforeDate(1,"yyyy-MM-dd");
@@ -175,8 +177,65 @@ public class IndexCountController extends DefaultBaseController {
 
 
 
+    @ApiOperation(value = "获取当前机构的培训计划列表", notes = "获取当前机构的培训计划列表")
+    @ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
+    @GetMapping("list-plan-class")
+    public SuccessResultData<List<ClassPlanDTO>> listPlanClass(){
+        Map<String, Object> params = new HashMap<>();
+        params.put("orgId",this.getInstitutionId());
+        List<ClassPlanDTO> list = classPlanService.list(params);
+        return new SuccessResultData<>(list);
+    }
 
 
+    @ApiOperation(value = "统计当前机构计划分类占比", notes = "统计当前机构计划分类占比")
+    @ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
+    @GetMapping("count-plan-type")
+    public SuccessResultData<Map<String, Object>> countPlanType(){
+        Map<String, Object> map = new HashMap<>();
+        String institutionId = this.getInstitutionId();
+        if(!StringUtils.isBlank(institutionId)){
+            map.put("orgId",institutionId);
+            map= classPlanService.countPlanType(institutionId);
+        }
+        return new SuccessResultData<>(map);
+    }
+
+
+    @ApiOperation(value = "统计当前机构计划报名人数", notes = "统计当前机构计划报名人数")
+    @ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
+    @GetMapping("count-plan-apply-user-num")
+    public SuccessResultData<Map<String, Object>> countPlanApplyUserNum(){
+        Map<String, Object> map = new HashMap<>();
+        List<String> title = new ArrayList<>();//计划名称
+        List<String> data0 = new ArrayList<>();//待审核
+        List<String> data1 = new ArrayList<>();//用户撤回
+        List<String> data2 = new ArrayList<>();//审核通过
+        List<String> data3 = new ArrayList<>();//报名完成
+        List<String> data4 = new ArrayList<>();//审核不通过
+        String institutionId = this.getInstitutionId();
+        if(!StringUtils.isBlank(institutionId)){
+            map.put("orgId",institutionId);
+            List<ClassPlanDTO> list = classPlanService.list(map);
+            for (ClassPlanDTO classPlanDTO : list) {
+                Map<String, Object> planMap = applyService.countWeekNum("",institutionId,classPlanDTO.getClassPlanId());
+                title.add(classPlanDTO.getPlanName());
+                data0.add(planMap.get("0").toString());
+                data1.add(planMap.get("1").toString());
+                data2.add(planMap.get("2").toString());
+                data3.add(planMap.get("3").toString());
+                data4.add(planMap.get("-1").toString());
+            }
+            map.put("title",title);
+            map.put("data0",data0);
+            map.put("data1",data1);
+            map.put("data2",data2);
+            map.put("data3",data3);
+            map.put("data4",data4);
+        }
+        return new SuccessResultData<>(map);
+    }
+
 
 
 

src/main/java/cn/com/tenlion/dao/classplan/IClassPlanDao.java

@@ -135,4 +135,11 @@ public interface IClassPlanDao {
      * @param params
      */
     void deleteClassPlanLessons(Map<String, Object> params);
+
+    /**
+     * 根据机构id统计计划的分类数量
+     * @param params
+     * @return
+     */
+    Map<String, Object> countPlanType(Map<String, Object> params);
 }

src/main/java/cn/com/tenlion/service/classplan/IClassPlanService.java

@@ -22,6 +22,13 @@ import java.util.Map;
  **/
 public interface IClassPlanService {
 
+    /**
+     * 根据机构id统计计划的分类数量
+     * @param orgId
+     * @return
+     */
+    Map<String,Object> countPlanType(String orgId);
+
     /**
      * 新增
      *

src/main/java/cn/com/tenlion/service/classplan/impl/ClassPlanServiceImpl.java

@@ -36,6 +36,7 @@ import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
 import java.util.ArrayList;
+import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 
@@ -451,4 +452,13 @@ public class ClassPlanServiceImpl extends DefaultBaseService implements IClassPl
         }
         return list;
     }
+
+
+
+    public Map<String,Object> countPlanType(String orgId){
+        Map<String, Object> parmas = new HashMap<>();
+        parmas.put("orgId",orgId);
+        return classPlanDao.countPlanType(parmas);
+    }
+
 }

src/main/resources/mybatis/mapper/apply/apply-mapper.xml

@@ -636,9 +636,12 @@
             sum(case when apply_audit_state = 3 then 1 else 0 end) as '3',
             sum(case when apply_audit_state = -1 then 1 else 0 end) as '-1'
         from e_apply
-        WHERE is_delete = 0 AND DATE_FORMAT(gmt_create,'%Y-%m-%d') = #{weekTime} AND apply_institution_id = #{applyInstitutionId}
+        WHERE is_delete = 0 AND apply_institution_id = #{applyInstitutionId}
+        <if test="weekTime != null and weekTime != ''">
+            AND DATE_FORMAT(gmt_create,'%Y-%m-%d') = #{weekTime}
+        </if>
         <if test="applyClassId != null and applyClassId != ''">
-            AND t1.apply_class_id = #{applyClassId}
+            AND apply_class_id = #{applyClassId}
         </if>
     </select>
 

src/main/resources/mybatis/mapper/classplan/class-plan-mapper.xml

@@ -400,7 +400,18 @@
         WHERE
             1 = 1
     </select>
-
+    <!--统计培训类型-->
+    <select id="countPlanType"  parameterType="map" resultType="map">
+        select
+            sum(case when teacher_catalog = 1 then 1 else 0 end) as '1',
+            sum(case when teacher_catalog = 2 then 1 else 0 end) as '2',
+            sum(case when teacher_catalog = 3 then 1 else 0 end) as '3'
+        from e_teacher
+        WHERE is_delete = 0 AND org_id = #{orgId}
+    </select>
+    
+    
+    
     <insert id="saveClassPlanLesson" parameterType="map">
         INSERT INTO e_class_plan_lesson
             (class_plan_id,lesson_id,teacher_id,is_delete)

src/main/resources/static/route/traininginstitution/list.html

@@ -165,7 +165,7 @@
                                 return rowData;
                             }
                         },
-                        {field: 'cz', width: 180, title: '操作', align:'center', fixed: 'right',
+                        {field: 'cz', width: 100, title: '操作', align:'center', fixed: 'right',
                             templet: function(row) {
                                 var rowData = '<div class="layui-btn-group">';
                                 rowData +='<button type="button" class="layui-btn layui-btn-xs" lay-event="user">添加人员</button>';

src/main/resources/templates/index1.html

@@ -72,12 +72,12 @@
     <div class="layui-row layui-col-space15">
         <div class="layui-col-sm6 layui-col-md6">
             <div class="layui-card">
-                <div class="layui-card-header" style="overflow: visible">近七天报名情况
+                <div class="layui-card-header" style="overflow: visible">近七天机构报名情况
-                    <div class="layui-inline search-item layui-form" style="position: absolute;right: 15px;top: 7px;">
+                    <!--<div class="layui-inline search-item layui-form" style="position: absolute;right: 15px;top: 7px;">-->
-                        <select id="applyClassId" name="applyClassId" >
+                        <!--<select id="applyClassId" name="applyClassId">-->
-                            <option value="">全部</option>
+
-                        </select>
+                        <!--</select>-->
-                    </div>
+                    <!--</div>-->
                 </div>
                 <div class="layui-card-body">
                     <div id="applyEChart" style="width: 100%; height: 300px;"></div>
@@ -96,7 +96,7 @@
     <div class="layui-row layui-col-space15">
         <div class="layui-col-sm6 layui-col-md6">
             <div class="layui-card">
-                <div class="layui-card-header">培训计划占比</div>
+                <div class="layui-card-header">培训计划类型占比</div>
                 <div class="layui-card-body">
                     <div id="planEChart" style="width: 100%; height: 300px;"></div>
                 </div>
@@ -104,9 +104,9 @@
         </div>
         <div class="layui-col-sm6 layui-col-md6">
             <div class="layui-card">
-                <div class="layui-card-header">培训课程占比</div>
+                <div class="layui-card-header">培训计划报名情况</div>
                 <div class="layui-card-body">
-                    <div id="classEChart" style="width: 100%; height: 300px;"></div>
+                    <div id="planApplyUserNumEChart" style="width: 100%; height: 300px;"></div>
                 </div>
             </div>
         </div>
@@ -130,13 +130,14 @@
                 teacherEChart:null,
                 applyEChart:null,
                 planEChart:null,
-                classEChart:null,
+                planApplyUserNumEChart:null,
                 resizeTimeout: null,
                 applyAllNum: 0,
                 classPlanNum: 0,
                 lessonsNum: 0,
                 teacherNum: 0,
-
+                selectedApplyClassId: '99',
+                optionsList: []
             },
             methods: {
                 initApplyAllNum: function(){
@@ -185,7 +186,8 @@
                     });
                 },
                 initApplyEChart: function(){
-                    top.restAjax.get('api/indexcount/count-one-weeks-apply-num', {}, null, function(code, data) {
+                    var self = this;
+                    top.restAjax.get(top.restAjax.path('api/indexcount/count-one-weeks-apply-num/{applyClassId}', [self.selectedApplyClassId]), {}, null, function(code, data) {
                         var status0 = [];
                         var status1 = [];
                         var status2 = [];
@@ -269,7 +271,7 @@
                                 ]
                             }
                         )
-                        form.render();
+
                     });
 
                 },
@@ -290,7 +292,6 @@
                             datajson['value'] = data.data[i+""]
                             dataList.push(datajson)
                         }
-                        console.log(dataList)
                         self.teacherEChart = echarts.init(document.getElementById('teacherEChart'));
                         self.teacherEChart.setOption(
                             {
@@ -323,75 +324,171 @@
 
                 },
                 initPlanEChart: function(){
-                    self.planEChart = echarts.init(document.getElementById('planEChart'));
+                    top.restAjax.get('api/indexcount/count-plan-type', {}, null, function(code, data) {
-                    self.planEChart.setOption(
+                        var dataList = [];
-                        {
+                        for(var i= 1;i<=3;i++){
-                            title: {
+                            var datajson = {};
-                                text: '世界人口总量',
+                            if(i === 1){
-                                subtext: '数据来自网络'
+                                datajson['name'] = "初训"
-                            },
+                            }
-                            tooltip: {
+                            if(i === 2){
-                                trigger: 'axis',
+                                datajson['name'] = "复训"
-                                axisPointer: {
+                            }
-                                    type: 'shadow'
+                            if(i === 3){
-                                }
+                                datajson['name'] = "换证"
-                            },
+                            }
-                            legend: {
+                            datajson['value'] = data.data[i+""]
-                                data: ['2011年', '2012年']
+                            dataList.push(datajson)
-                            },
+                        }
-                            grid: {
+                        console.log(dataList)
-                                left: '3%',
+                        self.teacherEChart = echarts.init(document.getElementById('planEChart'));
-                                right: '4%',
+                        self.teacherEChart.setOption(
-                                bottom: '3%',
+                            {
-                                containLabel: true
+                                tooltip: {
-                            },
+                                    trigger: 'item'
-                            xAxis: {
-                                type: 'value',
-                                boundaryGap: [0, 0.01]
-                            },
-                            yAxis: {
-                                type: 'category',
-                                data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
-                            },
-                            series: [
-                                {
-                                    name: '2011年',
-                                    type: 'bar',
-                                    data: [18203, 23489, 29034, 104970, 131744, 630230]
                                 },
-                                {
+                                legend: {
-                                    name: '2012年',
+                                    orient: 'vertical',
-                                    type: 'bar',
+                                    left: 'left',
-                                    data: [19325, 23438, 31000, 121594, 134141, 681807]
+                                },
-                                }
+                                series: [
-                            ]
+                                    {
-                        }
+                                        name: '访问来源',
-                    )
+                                        type: 'pie',
-                },
+                                        radius: '70%',
-                initClassEChart: function(){
+                                        data: dataList,
-                    self.classEChart = echarts.init(document.getElementById('classEChart'));
+                                        emphasis: {
-                    self.classEChart.setOption(
+                                            itemStyle: {
-                        {
+                                                shadowBlur: 10,
-                            legend: {},
+                                                shadowOffsetX: 0,
-                            tooltip: {},
+                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
-                            dataset: {
+                                            }
-                                source: [
+                                        }
-                                    ['product', '2015', '2016', '2017'],
+                                    }
-                                    ['Matcha Latte', 43.3, 85.8, 93.7],
-                                    ['Milk Tea', 83.1, 73.4, 55.1],
-                                    ['Cheese Cocoa', 86.4, 65.2, 82.5],
-                                    ['Walnut Brownie', 72.4, 53.9, 39.1]
                                 ]
-                            },
+                            }
-                            xAxis: {type: 'category'},
+                        )
-                            yAxis: {},
+
-                            series: [
+                    })
-                                {type: 'bar'},
+                },
-                                {type: 'bar'},
+                initPlanApplyUserNumEChart: function(){
-                                {type: 'bar'}
+                    top.restAjax.get('api/indexcount/count-plan-apply-user-num', {}, null, function(code, data) {
-                            ]
+                        self.planApplyUserNumEChart = echarts.init(document.getElementById('planApplyUserNumEChart'));
+                        self.planApplyUserNumEChart.setOption(
+                            {
+                                tooltip: {
+                                    trigger: 'axis',
+                                    axisPointer: {
+                                        type: 'shadow'
+                                    }
+                                },
+                                legend: {
+                                    data: ['待审核', '用户撤回', '审核通过', '报名完成', '审核不通过']
+                                },
+                                grid: {
+                                    left: '3%',
+                                    right: '4%',
+                                    bottom: '3%',
+                                    containLabel: true
+                                },
+                                xAxis: {
+                                    type: 'category',
+                                    data: data.data.title //计划名称
+
+                                },
+                                yAxis: {
+                                    type: 'value'
+                                },
+                                series: [
+                                    {
+                                        name: '待审核',
+                                        type: 'bar',
+                                        stack: 'total',
+                                        label: {
+                                            show: true
+                                        },
+                                        emphasis: {
+                                            focus: 'series'
+                                        },
+                                        data:  data.data.data0
+                                    },
+                                    {
+                                        name: '用户撤回',
+                                        type: 'bar',
+                                        stack: 'total',
+                                        label: {
+                                            show: true
+                                        },
+                                        emphasis: {
+                                            focus: 'series'
+                                        },
+                                        data: data.data.data1
+                                    },
+                                    {
+                                        name: '审核通过',
+                                        type: 'bar',
+                                        stack: 'total',
+                                        label: {
+                                            show: true
+                                        },
+                                        emphasis: {
+                                            focus: 'series'
+                                        },
+                                        data: data.data.data2
+                                    },
+                                    {
+                                        name: '报名完成',
+                                        type: 'bar',
+                                        stack: 'total',
+                                        label: {
+                                            show: true
+                                        },
+                                        emphasis: {
+                                            focus: 'series'
+                                        },
+                                        data: data.data.data3
+                                    },
+                                    {
+                                        name: '审核不通过',
+                                        type: 'bar',
+                                        stack: 'total',
+                                        label: {
+                                            show: true
+                                        },
+                                        emphasis: {
+                                            focus: 'series'
+                                        },
+                                        data: data.data.data4
+                                    }
+                                ]
+                            }
+                        )
+                    });
+
+
+
+
+                },
+                initPlanList: function(){
+                    var self = this
+                    top.restAjax.get('api/indexcount/list-plan-class', {}, null, function(code, data) {
+                        // self.optionsList = data.data
+                        var options = '<option value="99">全部</option>';
+                        for (var i = 0; i < data.data.length; i++) {
+                            options += '<option value="'+data.data[i].classPlanId+'">'+data.data[i].planName+'</option>'
                         }
-                    )
+                        $('#applyClassId').append(options);
+                        setTimeout(function () {
+                            $('#applyClassId').on('change', function () {
+                                console.log('123')
+                                self.selectedApplyClassId = $(this).value()
+                                self.initApplyEChart()
+                            })
+                        }, 50)
+                        form.render()
+                    }, function(code, data) {
+                        top.dialog.msg(data.msg);
+                    });
                 }
             },
             mounted: function() {
@@ -403,7 +500,8 @@
                 self.initTeacherEChart();
                 self.initApplyEChart();
                 self.initPlanEChart();
-                self.initClassEChart();
+                self.initPlanApplyUserNumEChart();
+                //self.initPlanList();
                 // 事件 - 页面变化
                 $win.on('resize', function() {
                     if(self.resizeTimeout) {
@@ -416,6 +514,11 @@
                 });
             }
         })
+
+
+
+
+
     });
 </script>
 </body>

src/main/resources/templates/index2.html

@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <base th:href="${#request.getContextPath() + '/'}">
+    <meta charset="utf-8">
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
+    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
+    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
+    <style>
+        .layui-badge {height: auto;}
+        .layui-card-header {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
+        .count-second-row {padding-bottom: 0px;}
+    </style>
+</head>
+<body>
+
+<div id="LAY-app" class="layui-fluid">
+
+    <div class="layui-row layui-col-space15">
+        <div class="layui-col-sm12 layui-col-md12">
+            <div class="layui-row layui-col-space15">
+                <div class="layui-col-sm6 layui-col-md3">
+                    <div class="layui-card">
+                        <div class="layui-card-header">
+                            报名数量
+                            <span class="layui-badge layui-bg-green layuiadmin-badge">位</span>
+                        </div>
+                        <div class="layui-card-body layuiadmin-card-list">
+                            <p id="applyAllNum" class="layuiadmin-big-font">0</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="layui-col-sm6 layui-col-md3">
+                    <div class="layui-card">
+                        <div class="layui-card-header">
+                            培训计划数量
+                            <span class="layui-badge layui-bg-blue layuiadmin-badge">个</span>
+                        </div>
+                        <div class="layui-card-body layuiadmin-card-list">
+                            <p id="classPlanNum" class="layuiadmin-big-font">0</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="layui-col-sm6 layui-col-md3">
+                    <div class="layui-card">
+                        <div class="layui-card-header">
+                            课程数量
+                            <span class="layui-badge layui-bg-cyan layuiadmin-badge">堂</span>
+                        </div>
+                        <div class="layui-card-body layuiadmin-card-list" style="height: 100%">
+                            <p id="lessonsNum" class="layuiadmin-big-font">0</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="layui-col-sm6 layui-col-md3">
+                    <div class="layui-card">
+                        <div class="layui-card-header">
+                            讲师
+                            <span class="layui-badge layui-bg-orange layuiadmin-badge">位</span>
+                        </div>
+                        <div class="layui-card-body layuiadmin-card-list">
+                            <p id="teacherNum" class="layuiadmin-big-font">0</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="layui-row layui-col-space15">
+        <div class="layui-col-sm6 layui-col-md6">
+            <div class="layui-card">
+                <div class="layui-card-header" style="overflow: visible">近七天报名情况
+                    <!--<div class="layui-inline search-item layui-form" style="position: absolute;right: 15px;top: 7px;">-->
+                        <!--<select id="applyClassId" name="applyClassId">-->
+
+                        <!--</select>-->
+                    <!--</div>-->
+                </div>
+                <div class="layui-card-body">
+                    <div id="applyEChart" style="width: 100%; height: 300px;"></div>
+                </div>
+            </div>
+        </div>
+        <div class="layui-col-sm6 layui-col-md6">
+            <div class="layui-card">
+                <div class="layui-card-header">讲师占比</div>
+                <div class="layui-card-body">
+                    <div id="teacherEChart" style="width: 100%; height: 300px;"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="layui-row layui-col-space15">
+        <div class="layui-col-sm6 layui-col-md6">
+            <div class="layui-card">
+                <div class="layui-card-header">培训计划类型占比</div>
+                <div class="layui-card-body">
+                    <div id="planEChart" style="width: 100%; height: 300px;"></div>
+                </div>
+            </div>
+        </div>
+        <div class="layui-col-sm6 layui-col-md6">
+            <div class="layui-card">
+                <div class="layui-card-header">培训课程占比</div>
+                <div class="layui-card-body">
+                    <div id="classEChart" style="width: 100%; height: 300px;"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<script type="text/javascript" src="assets/js/vue.min.js"></script>
+<script type="text/javascript" src="assets/js/vendor/echarts/echarts.min.js"></script>
+<script src="assets/layuiadmin/layui/layui.js"></script>
+<script>
+    layui.config({
+        base: 'assets/layuiadmin/' //静态资源所在路径
+    }).extend({
+        index: 'lib/index' //主入口模块
+    }).use(['index', 'animate-numbers', 'form'], function() {
+        var $ = layui.$;
+        var $win = $(window);
+        var form = layui.form;
+        new Vue({
+            el: '#LAY-app',
+            data: {
+                teacherEChart:null,
+                applyEChart:null,
+                planEChart:null,
+                classEChart:null,
+                resizeTimeout: null,
+                applyAllNum: 0,
+                classPlanNum: 0,
+                lessonsNum: 0,
+                teacherNum: 0,
+                selectedApplyClassId: '99',
+                optionsList: []
+            },
+            methods: {
+
+            },
+            mounted: function() {
+                var self = this;
+                // 事件 - 页面变化
+                $win.on('resize', function() {
+                    if(self.resizeTimeout) {
+                        return;
+                    }
+                    self.resizeTimeout = setTimeout(function() {
+                        self.resizeTimeout = null;
+                    }, 500);
+                });
+            }
+        })
+
+
+
+
+
+    });
+</script>
+</body>
+</html>