手机端图表添加切换效果

霍东伟

2019-06-28 1a7828d3d11670a08ead57c4451afd6d1e82aa1d

手机端图表添加切换效果

 sensor/WebRoot/mobile/pages/monitor/control.html

@@ -21,27 +21,38 @@
            </div>

        </div>

        <!-- Scrollable page content -->

        <div class="page-content">

        <div class="page-content data-page-content">

            <div class="tabs">

                <div class="tab" id="batt-data-graph">

                    <div style="height: 33vh">

                    <div class="graph-group">

                        <div data-direction="vertical" class="swiper-container swiper-init demo-swiper">

                            <div class="swiper-pagination"></div>

                            <div class="swiper-wrapper">

                                <div class="swiper-slide">

                        <div class="graph-container" id="smokeLine">

                            <div class="graph-inner">

                                <div class="graph"></div>

                            </div>

                        </div>

                    </div>

                    <div style="height:33vh; margin-top: 8px">

                            </div>

                            <div class="swiper-wrapper">

                                <div class="swiper-slide">

                        <div class="graph-container" id="airtmpLine">

                            <div class="graph-inner">

                                <div class="graph"></div>

                            </div>

                        </div>

                    </div>

                    <div style="height:33vh; margin-top: 8px">

                            </div>

                            <div class="swiper-wrapper">

                                <div class="swiper-slide">

                        <div class="graph-container" id="airhumLine">

                            <div class="graph-inner">

                                <div class="graph"></div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

@@ -189,7 +200,7 @@
                                                // console.log(rs);

                                                if(rs.code == 1) {

                                                    var data = rs.data[0];

                                                    console.log(data.record_time);

                                                    //console.log(data.record_time);

                                                    setOpts(data.record_time, data.smoke, smokeOpts);        // 设置烟感配置项

                                                    setOpts(data.record_time, data.airtmp, airtmpOpts);      // 设置空气温度置项

                                                    setOpts(data.record_time, data.airhum, airhumOpts);      // 设置空气湿度置项

@@ -270,9 +281,23 @@
                        this.searchDeviceInfo();

                    }

                });

                // 定义滑动轮播组件

                var swiper = app.swiper.create('.swiper-container', {

                    speed: 400,

                    spaceBetween: 0,

                    direction: 'vertical',

                    setWrapperSize: true,

                    autoHeight: true,

                    pagination: {

                        el: '.swiper-pagination',

                    }

                });



                // 页面中的点击事件

                pages.$navbarEl.find('.graph-resize').click(function() {

                    var pageHt = $('.data-page-content').height();

                    $('.graph-group').height(pageHt-1);

                    swiper.update();

                    vm.smokeLine.resize();

                    vm.airhumLine.resize();

                    vm.airtmpLine.resize();

@@ -287,3 +312,33 @@
        }

    }

</script>
<style scoped>

    /* A bit of demo styles */;

    .demo-swiper .swiper-slide {

      font-size: 25px;

      font-weight: 300;

      display: flex;

      justify-content: center;

      align-items: center;

      background: #fff;

      color: #000;

    }

    .demo-swiper .swiper-slide {

      box-sizing: border-box;

      border: 1px solid #ddd;

      background: #fff;

    }

    .demo-swiper {

      font-size: 18px;

      height: 100%;

    }

    .demo-swiper.demo-swiper-auto .swiper-slide {

      width: 85%;

    }

    .demo-swiper.demo-swiper-auto .swiper-slide:nth-child(2n) {

      width: 70%;

    }

    .demo-swiper.demo-swiper-auto .swiper-slide:nth-child(3n) {

      width: 30%;

    } 
</style>

 sensor/WebRoot/mobile/pages/monitor/history.html

@@ -26,27 +26,38 @@
            </div>

        </div>

        <!-- Scrollable page content -->

        <div class="page-content">

        <div class="page-content data-page-content">

            <div class="tabs">

                <div class="tab" id="batt-data-graph">

                    <div style="height: 33vh">

                    <div class="graph-group">

                        <div data-direction="vertical" class="swiper-container swiper-init demo-swiper">

                            <div class="swiper-pagination"></div>

                            <div class="swiper-wrapper">

                                <div class="swiper-slide">

                        <div class="graph-container" id="smokeLine">

                            <div class="graph-inner">

                                <div class="graph"></div>

                            </div>

                        </div>

                    </div>

                    <div style="height:33vh; margin-top: 8px">

                            </div>

                            <div class="swiper-wrapper">

                                <div class="swiper-slide">

                        <div class="graph-container" id="airtmpLine">

                            <div class="graph-inner">

                                <div class="graph"></div>

                            </div>

                        </div>

                    </div>

                    <div style="height:33vh; margin-top: 8px">

                            </div>

                            <div class="swiper-wrapper">

                                <div class="swiper-slide">

                        <div class="graph-container" id="airhumLine">

                            <div class="graph-inner">

                                <div class="graph"></div>

                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

@@ -370,13 +381,28 @@
                    }

                });

                

                // 定义滑动轮播组件

                var swiper = app.swiper.create('.swiper-container', {

                    speed: 400,

                    spaceBetween: 0,

                    direction: 'vertical',

                    setWrapperSize: true,

                    autoHeight: true,

                    pagination: {

                        el: '.swiper-pagination',

                    }

                });

				
                // 页面中的点击事件

                pages.$navbarEl.find('.graph-resize').click(function() {

                    var pageHt = $('.data-page-content').height();

                    $('.graph-group').height(pageHt-1);

                    swiper.update();

                    vm.smokeLine.resize();

                    vm.airhumLine.resize();

                    vm.airtmpLine.resize();

                    

                    $('.my-pages').addClass('my-pages-hide')

                    $('.my-pages').addClass('my-pages-hide');

                });

                

                // 页面中的点击事件

@@ -387,3 +413,33 @@
        }

    }

</script>
<style scoped>

    /* A bit of demo styles */;

    .demo-swiper .swiper-slide {

      font-size: 25px;

      font-weight: 300;

      display: flex;

      justify-content: center;

      align-items: center;

      background: #fff;

      color: #000;

    }

    .demo-swiper .swiper-slide {

      box-sizing: border-box;

      border: 1px solid #ddd;

      background: #fff;

    }

    .demo-swiper {

      font-size: 18px;

      height: 100%;

    }

    .demo-swiper.demo-swiper-auto .swiper-slide {

      width: 85%;

    }

    .demo-swiper.demo-swiper-auto .swiper-slide:nth-child(2n) {

      width: 70%;

    }

    .demo-swiper.demo-swiper-auto .swiper-slide:nth-child(3n) {

      width: 30%;

    } 
</style>