首页

frontend/saas-web/app/model/home/Info.js

@@ -0,0 +1,8 @@
+Ext.define('saas.model.home.Info', {
+    extend: 'saas.model.Base',
+    fields: [
+        { name: 'title', type: 'string' },
+        { name: 'content', type: 'string' },
+        { name: 'color', type: 'string' }
+    ]
+});

frontend/saas-web/app/view/core/form/FormPanelController.js

@@ -175,11 +175,12 @@ Ext.define('saas.view.core.form.FormPanelController', {
         form = this.getView(),
         detailCount = form.detailCount,
         viewModel = me.getViewModel(),
+        id = viewModel.get(form._idField),
         modelData = viewModel.getData();
 
         var dirty = form.isDirty();
 
-        if(dirty) {
+        if(id && dirty) {
             showConfirm('提示', form.dirtyAuditText)
             .then(function(yes) {
                 if(yes == 'yes') {

frontend/saas-web/app/view/home/Home.js

@@ -11,51 +11,26 @@ Ext.define('saas.view.home.Home', {
 
     controller: 'home',
     viewModel: {
-        type: 'chartsmodel'
+        type: 'home'
     },
 
+    cls: 'x-home-panel',
+
     layout: 'responsivecolumn',
 
     scrollable: true,
 
     defaults: {
         shadow: true,
-        xtype: 'panel',
-        layout: 'column',
-        cls: 'x-home-panel',
+        cls: 'x-home-box',
         userCls: 'big-100 small-100',
     },
 
     items: [{
         title: '实时数据',
-        xtype: 'infocard',
-        infoData: [{
-            title: '七天内待出货销售',
-            content: '168件',
-            color: 'yellow',
-        }, {
-            title: '七天内待入库采购',
-            content: '168件',
-            color: 'purple',
-        }, {
-            title: '七天内代付款',
-            content: '168件',
-            color: 'red',
-        }, {
-            title: '七天内代收款',
-            content: '168件',
-            color: 'yellow',
-        }, {
-            title: '未审核验收',
-            content: '168件'
-        }, {
-            title: '七天内待出货销售',
-            content: '168件'
-        }, {
-            title: '未审核出货',
-            content: '168件'
-        }]
+        xtype: 'infocard'
     }, {
+        xtype: 'panel',
         title: '2018年11月经营分析',
         latyout: 'column',
         // items: [{

frontend/saas-web/app/view/home/Home.scss

@@ -92,6 +92,17 @@ $unaudit-purc-container-color: dynamic(#e91e63);
 }
 
 .x-home-panel {
+
+    &> .x-autocontainer-outerCt {
+        display: block;
+
+        &> .x-autocontainer-innerCt {
+            display: block;
+        }
+    }
+}
+
+.x-home-box {
     border-radius: 2px;
 
     &>.x-panel-header {
@@ -123,30 +134,37 @@ $unaudit-purc-container-color: dynamic(#e91e63);
 
 .x-responsivecolumn {
     padding: 0;
+    display: block;
 }
 
 .big-100 {
-    @include responsivecolumn-item(100%);
+    width: 100%;
+    // @include responsivecolumn-item(100%);
 }
 
 .big-60 {
-    @include responsivecolumn-item(60%);
+    width: 60%;
+    // @include responsivecolumn-item(60%);
 }
 
 .big-50 {
-    @include responsivecolumn-item(50%);
+    width: 50%;
+    // @include responsivecolumn-item(50%);
 }
 
 .big-40 {
-    @include responsivecolumn-item(40%);
+    width: 40%;
+    // @include responsivecolumn-item(40%);
 }
 
 .big-33 {
-    @include responsivecolumn-item(33.33%);
+    width: 30%;
+    // @include responsivecolumn-item(33.33%);
 }
 
 .big-20 {
-    @include responsivecolumn-item(20%);
+    width: 20%;
+    // @include responsivecolumn-item(20%);
 }
 
 //--------------------------------------------------------
@@ -154,10 +172,12 @@ $unaudit-purc-container-color: dynamic(#e91e63);
 
  .x-responsivecolumn-small {
      > .small-100 {
-         @include responsivecolumn-item(100%);
+        width: 100%;
+        // @include responsivecolumn-item(100%);
      }
 
      > .small-50 {
-         @include responsivecolumn-item(50%);
+        width: 50%;
+        // @include responsivecolumn-item(50%);
      }
 }

frontend/saas-web/app/view/home/ChartsModel.js → frontend/saas-web/app/view/home/HomeModel.js

@@ -1,8 +1,73 @@
-Ext.define('saas.view.home.ChartsModel', {
+Ext.define('saas.view.home.HomeModel', {
     extend: 'Ext.app.ViewModel',
-    alias: 'viewmodel.chartsmodel',
+    alias: 'viewmodel.home',
 
     stores: {
+        infoData: {
+            model: 'saas.model.home.Info',
+            autoLoad: true,
+            proxy: {
+                type: 'ajax',
+                // url: 'http://192.168.253.58:8920/homePage/liveData',
+                url: '/api/common/homePage/liveData',
+                reader: {
+                    type: 'json'
+                },
+                listeners: {
+                    exception: function(proxy, response, operation, eOpts) {
+                        Ext.getCmp('infocard').setLoading(false);
+                    }
+                }
+            },
+            listeners: {
+                beforeload: function() {
+                    Ext.getCmp('infocard').setLoading(true);
+                },
+                load: function(s, d) {
+                    Ext.getCmp('infocard').setLoading(false);
+
+                    var titles = {
+                        unship: {
+                            text: '七天内待出货销售',
+                            color: 'yellow'
+                        },
+                        unstorage: {
+                            text: '七天内待入库采购',
+                            color: 'purple'
+                        },
+                        unpay: {
+                            text: '七天内代付款',
+                            color: 'red'
+                        },
+                        unreceive: {
+                            text: '七天内代收款',
+                            color: 'pink'
+                        },
+                        unauditcheck: {
+                            text: '未审核验收',
+                            color: 'blue'
+                        },
+                        unauditship: {
+                            text: '未审核出货',
+                            color: ''
+                        }
+                    };
+                    var res = d[0].data.data;
+                    var data = [];
+                    if(res) {
+                        for(var k in res) {
+                            data.push({
+                                title: titles[k].text,
+                                content: res[k] + '件',
+                                color: titles[k].color
+                            });
+                        }
+                    }
+
+                    Ext.getCmp('infocard').addCardItems(data);
+                }
+            }
+        },
         barData: {
             model: 'saas.model.chart.DataXY',
             data: [

frontend/saas-web/app/view/home/InfoCard.js

@@ -2,127 +2,129 @@ Ext.define('saas.view.home.InfoCard', {
     extend: 'Ext.panel.Panel',
     xtype: 'infocard',
 
-    latyou: 'fit',
+    id: 'infocard',
 
-    initComponent: function() {
-        var me = this;
+    requires: [
+        'Ext.layout.container.Card'
+    ],
 
-        var view = Ext.create('Ext.view.View', {
-            store : Ext.create('Ext.data.Store', {
-				fields: ['title', 'content', 'color'],
-				data: me.infoData,
-			}),
-            tpl: new Ext.XTemplate([
-                '<div class="x-row">',
-                    '<tpl for=".">',
-                    '<div class="x-col">',
-                        '<div>',
-                            '<div class="x-box ',
-                                '<tpl if="color"> x-bg-{color}</tpl>',
-                                '<tpl else"> x-bg-default</tpl>',
-                            '">',
-                                '<h3>{title}</h3>',
-                                '<p>{content}</p>',
-                            '</div>',
-                        '</div>',
-                    '</div>',
-                    '</tpl>',
-                '</div>'
-            ]),
-            itemSelector: 'div.x-info-card-body',
-        });
+    BaseUtil: Ext.create('saas.util.BaseUtil'),
+
+    layout: 'card',
+    cardTpl: [
+        '<div class="x-row">',
+        '<tpl for=".">',
+        '<div class="x-col">',
+        '<div>',
+        '<div class="x-box ',
+        '<tpl if="color"> x-bg-{color}</tpl>',
+        '<tpl else"> x-bg-default</tpl>',
+        '">',
+        '<h3>{title}</h3>',
+        '<p>{content}</p>',
+        '</div>',
+        '</div>',
+        '</div>',
+        '</tpl>',
+        '</div>'
+    ],
+
+    initComponent: function () {
+        var me = this;
 
         Ext.apply(me, {
             userCls: 'x-info-card ' + me.userCls,
-            items: [{
-                xtype: 'button',
+            lbar: [{
+                itemId: 'card-prev',
                 cls: 'x-scroller-button x-scroller-button-left',
-                // iconCls: 'x-sa sa-arrows-left',
-                disabled: true,
                 handler: function() {
-                    me.scrollBody(1);
-                }
-            }, view, {
-                xtype: 'button',
+                    me. showPrevious();
+                },
+                disabled: true
+            }],
+            rbar: [{
+                itemId: 'card-next',
                 cls: 'x-scroller-button x-scroller-button-right',
-                // iconCls: 'x-sa sa-arrows-right',
                 handler: function() {
-                    me.scrollBody(-1);
+                    me.showNext();
                 }
-            }]
+            }],
+            items: [],
         });
 
         me.callParent(arguments);
     },
 
-    listeners: {
-        boxready: function(th) {
-            var list = Ext.fly(th.items.items[1].el.dom);
-            var listWidth = Number(list.getStyle('width').replace('px', ''));
-            var bodyWidth = th.body.getBox().width;
-            var btns = th.query('button');
-
-            if(listWidth <= (bodyWidth-88)) {
-                btns[0].setVisible(false);
-                btns[1].setVisible(false);
-                return;
+    addCardItems: function(infoData) {
+        var me = this,
+        p = me.up('home'),
+        // viewModel = p.getViewModel(),
+        // infoData = viewModel.get('infoData'),
+        datas = [],
+        items = [];
+        size = Math.ceil(me.body.el.getBox().width / 235);
+
+        me.removeAll();
+        for(var x = 0; x < infoData.length;) {
+            var d = [];
+            for(var y = 0; y < size && x < infoData.length; y++) {
+                d.push(infoData[x]);
+                x++;
             }
+            datas.push(d);
+        }
 
-            Ext.fly(th.body).on('mousewheel', function() {
-                var ev = window.event;
-                var delta = ev.wheelDelta;
+        Ext.Array.each(datas, function(d, i) {
 
-                if(ev.preventDefault) {
-                    ev.preventDefault();  
-                }
-                else {
-                    ev.cancel=true;
-                }
-                th.scrollBody(delta/120);
-            })
-        }
-    },
+            var store = Ext.create('Ext.data.Store', {
+                fields: ['title', 'content', 'color'],
+                data: d,
+            });
 
-    scrollBody: function(delta) {
-        var me = this;
-        var list = Ext.fly(me.items.items[1].el.dom);
-        var marginLeft = Number(list.getStyle('marginLeft').replace('px', ''));
-        var le = marginLeft + delta * 50;
-        var MAX_LEN = list.getBox().width - (me.body.getBox().width - 88);
-
-        if(le > 0) {
-            le = 0;
-            me.scrollLeftDisabled();
-        }else if(le < -MAX_LEN) {
-            le = -MAX_LEN;
-            me.scrollRightDisabled();
-        }else {
-            me.scrollEnable();
-        }
+            var view = Ext.create('Ext.view.View', {
+                store: store,
+                tpl: new Ext.XTemplate(me.cardTpl),
+                itemSelector: 'div.x-info-card-body',
+            });
 
-        list.setStyle({
-            marginLeft: le + 'px'
+            var item = {
+                xtype: 'panel',
+                id: 'card-' + i,
+                items: view
+            };
+            me.add(item);
         });
+
+        if(datas.length <= 1) {
+            me.hidePageTrigger();
+        }
+
+        me.updateLayout(true);
     },
-    
-    scrollLeftDisabled: function() {
+
+    hidePageTrigger: function() {
         var me = this;
-        var leftBtn = me.query('button')[0];
-        leftBtn.setDisabled(true);
+        me.down('#card-prev').hide();
+        me.down('#card-next').hide();
     },
 
-    scrollRightDisabled: function() {
-        var me = this;
-        var rightBtn = me.query('button')[1];
-        rightBtn.setDisabled(true);
+    showNext: function () {
+        this.doCardNavigation(1);
     },
 
-    scrollEnable: function() {
+    showPrevious: function (btn) {
+        this.doCardNavigation(-1);
+    },
+
+    doCardNavigation: function (incr) {
         var me = this;
-        var btns = me.query('button');
+        var l = me.getLayout();
+        var i = l.activeItem.id.split('card-')[1];
+        var c = me.items.items.length;
+        var next = parseInt(i, 10) + incr;
+        l.setActiveItem(next);
 
-        for(var i = 0; i < btns.length; i ++) {
-            btns[i].setDisabled(false);
-        }
+        me.down('#card-prev').setDisabled(next === 0);
+        me.down('#card-next').setDisabled(next === (c-1));
     }
 });

frontend/saas-web/app/view/home/InfoCard.scss

@@ -1,39 +1,41 @@
-$card-width: 200px;
+$max-card-width: 235px;
 
 .x-info-card {
 
     .x-panel-bodyWrap {
         .x-autocontainer-innerCt {
-            padding: 0 44px;
-        }
-        .x-row {
-            display: flex;
-            flex-wrap: nowrap;
-        
-            .x-col {
-        
-                color: #fff;
-                padding: 10px;
-        
-                .x-box {
-                    padding: 16px;
-                    width: 235px;
-                    height: 131px;
-                    border-radius: 0.5rem;
-                    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
-                    position: relative;
-                    display: block;
-        
-                    h3 {
-                        font-size: 16px;
-                    }
-        
-                    p {
-                        font-size: 24px;
-                        text-align: center;
-                        margin-top: 32px;
+
+            .x-row {
+                display: flex;
+                width: 100%;
+                justify-content: flex-start;
+            
+                .x-col {
+            
+                    flex: 1;
+                    max-width: $max-card-width;
+                    color: #fff;
+                    padding: 10px;
+            
+                    .x-box {
+                        padding: 16px;
+                        height: 131px;
+                        border-radius: 0.5rem;
+                        box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
+                        position: relative;
+                        display: block;
+            
+                        h3 {
+                            font-size: 16px;
+                        }
+            
+                        p {
+                            font-size: 24px;
+                            text-align: center;
+                            margin-top: 32px;
+                        }
+            
                     }
-        
                 }
             }
         }
@@ -41,12 +43,13 @@ $card-width: 200px;
 }
 
 .x-scroller-button {
-    position: absolute;
+    position: absolute !important;
     z-index: 1;
-    width: 44px;
-    height: 100%;
-    padding: 0;
-    background-color: white;
+    width: 44px !important;
+    min-width: 44px !important;
+    height: 145px !important;
+    padding: 0 !important;
+    background-color: white !important;
     border: none !important;
     box-shadow: none !important;
     background-repeat: no-repeat !important;
@@ -85,4 +88,13 @@ $card-width: 200px;
 }
 .x-bg-red {
     background: linear-gradient(to right, #FA8B86 , #F36487);
+}
+.x-bg-blue {
+    background: linear-gradient(to right, #1AD0C5 , #26CBDB);
+}
+.x-bg-pink {
+    background: linear-gradient(to right, #FA8A86 , #F26187);
+}
+.x-bg-gray {
+    background: linear-gradient(to right, #D8D8D8 , #D8D8D8);
 }

frontend/saas-web/packages/font-saas/sass/etc/icons.scss

@@ -1,6 +1,8 @@
 
 .sa-purchase:before { content: "\e613"; }
 
+.sa-xiu:before { content: "\e605"; }
+
 .sa-weibiaoti1:before { content: "\ef04"; }
 
 .sa-document:before { content: "\e654"; }

frontend/saas-web/resources/json/info.json

@@ -0,0 +1,26 @@
+[{
+    "title": "七天内待出货销售",
+    "content": "168件",
+    "color": "yellow"
+}, {
+    "title": "七天内待入库采购",
+    "content": "168件",
+    "color": "purple"
+}, {
+    "title": "七天内代付款",
+    "content": "168件",
+    "color": "red"
+}, {
+    "title": "七天内代收款",
+    "content": "168件",
+    "color": "yellow"
+}, {
+    "title": "未审核验收",
+    "content": "168件"
+}, {
+    "title": "七天内待出货销售",
+    "content": "168件"
+}, {
+    "title": "未审核出货",
+    "content": "168件"
+}]