SaaS系統怎麼做物流行業年度經營報告，MVC+js+echarts實現

阿新 • • 發佈：2020-10-24

前言

馬上就到年底了，很多公司都要彙總這一年的經營情況，如果一個系統沒有自動生成年報的功能，需要人工手工去做年報，我相信可能是一個不小的工作量，最近我通過一個星期的時間，結合系統情況自動生成年報，全部以圖表的形式呈現，為公司SaaS系統增光增色不少。

實現出來效果

圖表主要用的是echarts來實現的，官網地址：https://echarts.apache.org/zh/index.html

全部以圖表+文字進行呈現，讓公司老闆隨時隨刻能看公司的經營情況，省去人工製作的過程，節省大量時間，這個年報一推出客戶非常喜歡，給SaaS系統增光增色。

怎麼實現漂亮的圖表

    <script type="text/javascript" src="~/showdata/js/jquery.js"></script>
    <link href="~/YearReport/css/layout.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="~/YearReport/css/report.css" />
    <script src="~/YearReport/js/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="~/YearReport/js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="~/YearReport/js/echarts.min.js"></script>
    <script type="text/javascript" src="~/YearReport/js/jquery.countup.min.js"></script>

    <script type="text/javascript" src="~/showdata/js/china.js"></script>
    <script type="text/javascript" src="~/YearReport/js/area_echarts_year.js"></script>

引入echarts.js這個是百度的圖表外掛，詳情https://echarts.apache.org/zh/index.html

    <div class="section section-1">
            <div class="title ">
                <div class="section_content">
                    <em>年度經營資料總覽</em>
                    <div class="page1_shuju_cont">
                        <div class="page1_zu">
                            <div class="shuju_back">
                                <strong><span class="ledge count_up_num" id="totalqty"></span>票</strong>
                                <b>累計開單筆數</b>
                            </div>

                            <div class="shuju_back">
                                <strong><span class="ledge count_up_num" id="totalfccount"></span>趟</strong>
                                <b>累計發車趟數</b>
                            </div>
                            <div class="shuju_back">
                                <strong><span class="ledge count_up_num" id="totalamt"></span>萬元</strong>
                                <b>累計營業額</b>
                            </div>

                        </div>
                        <div class="page1_zu">
                            <div class="shuju_back">
                                <strong><span class="ledge count_up_num" id="totalcost"></span>萬元</strong>
                                <b>累計成本</b>
                            </div>

                            <div class="shuju_back">
                                <strong><span class="ledge count_up_num" id="totalprofits"></span>萬元</strong>
                                <b>累計淨利潤</b>
                            </div>

                            <div class="shuju_back">
                                <strong><span class="ledge count_up_num" id="totalprofitsratio"></span>%</strong>
                                <b>累計淨利潤率</b>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

以上為html 程式碼

    //年度經營資料總覽
    function GetYearReportBigDataBYTotal() {
        debugger;
        $.ajax({
            url: "/paymentWelfare/GetYearReportBigDataBYTotal",
            type: "GET",
            data: {
                cache: false
            },
            dataType: 'json',
            cache: false,
            success: function (result) {
                if (result.status) {
                    debugger;
                    var options = {
                        useEasing: true, //使用緩和效果
                        useGrouping: true, //使用分組效果
                        separator: ',', //分離器，資料夠三位，例如100,000
                        decimal: '.', //小數點分割，例如：10.00
                        prefix: '', //第一位預設數字
                        suffix: '' //最後一位預設數字
                    };
                    new CountUp("totalqty", 0, result.totalqty, 0, 3, options).start();
                    new CountUp("totalfccount", 0, result.totalfccount, 0, 3, options).start();
                    new CountUp("totalamt", 0, result.totalamt, 2, 3, options).start();
                    new CountUp("totalcost", 0, result.totalcost, 2, 3, options).start();
                    new CountUp("totalprofits", 0, result.totalprofits, 2, 3, options).start();
                    new CountUp("totalprofitsratio", 0, result.totalprofitsratio, 2, 3, options).start();
                    $("#year").val(result.year);
                }
            }
        })
    }

最後出來如下效果

怎麼來做圖表

  <div class="section section-2">
            <div class="title">
                <div class="section_content">
                    <em>年度營業分析</em>
                    <div class="page2_quxtu">
                        <div id="echarts_ydzb"> </div>
                        <p><span id="year1"></span>年傳送貨物總票數為<span class="count_up_num" id="totalpiaoshu">
                            </span>票，貨物總重量為<span class="count_up_num" id="totalweight">
                            </span>噸，總運費為<span class="count_up_num" id="totalyunfei">
                            </span>萬元，代收貨款為<span class="count_up_num" id="totaldaishou">
                            </span>萬元，佔比<span class="count_up_num" id="totaldaishourstio">
                            </span>%，中轉費為<span class="count_up_num" id="totalzhongzhuan">
                            </span>萬元，佔比<span class="count_up_num" id="totalzhongzhuanratio">
                            </span>%，實際送貨費<span class="count_up_num" id="totalsonghuo">
                            </span>萬元，佔比<span class="count_up_num" id="totalsonghuoratio">
                            </span>%。</p>
                    </div>
                </div>
            </div>
        </div>

 //年度營運分析
    function GetYearReportBigDataBYUnit() {
        var areaStyle = {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(3, 194, 236, 0.3)'
                }, {
                    offset: 0.8,
                    color: 'rgba(3, 194, 236, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
            }
        }

        $.ajax({
            url: "/paymentWelfare/GetYearReportBigDataBYUnit",
            type: "GET",
            data: { cache: false },
            dataType: 'json',
            cache: false,
            success: function (result) {
                debugger;
                if (result.status) {
                    debugger;
                    if (result.data.length > 0) {

                        var month = [];
                        var piaoshu = [];
                        var zhongliang = [];
                        var yunfei = [];
                        var daishouhuokuan = [];
                        var zhongzhuanfei = [];
                        var shijisonghuofei = [];

                        var totalpiaoshu = 0;
                        var totalweight = 0;
                        var totalyunfei = 0;
                        var totaldaishou = 0;
                        var totalzhongzhuan = 0;
                        var totalsonghuo = 0;

                        var data = JSON.parse(result.data);
                        for (let i in data) {
                            month.push(data[i].month);
                            piaoshu.push(data[i].piaoshu);
                            zhongliang.push((data[i].zhongliang).toFixed(2));
                            yunfei.push((data[i].yunfei / 10000).toFixed(2));
                            daishouhuokuan.push((data[i].daishouhuokuan / 10000).toFixed(2));
                            zhongzhuanfei.push((data[i].zhongzhuanfei / 10000).toFixed(2));
                            shijisonghuofei.push((data[i].shijisonghuofei / 10000).toFixed(2));

                            totalpiaoshu += parseInt(data[i].piaoshu);
                            totalweight += parseFloat(data[i].zhongliang);
                            totalyunfei += parseFloat(data[i].yunfei);
                            totaldaishou += parseFloat(data[i].daishouhuokuan);
                            totalzhongzhuan += parseFloat(data[i].zhongzhuanfei)
                            totalsonghuo += parseFloat(data[i].shijisonghuofei);
                        }

                        debugger;
                        var option_ydzb = {
                            tooltip: {
                                trigger: "axis",
                                axisPointer: {
                                    type: "cross",
                                    label: {
                                        backgroundColor: '#6a7985'
                                    }
                                }
                            },
                            legend: {
                                data: ['票數', '重量', '運費', '代收貨款', '中轉費', '實際送貨費'],
                                //selectedMode: 'single',
                                //selected: {
                                //    "運費": false, "代收貨款": false, "中轉費": false, "實際送貨費": false,
                                //},
                                textStyle: {
                                    color: "#7c592f",
                                    fontSize: 16
                                },
                            },
                            grid: {
                                left: '3%',
                                right: '7%',
                                bottom: '1%',
                                containLabel: true
                            },
                            xAxis: {
                                axisLabel: {
                                    rotate: 0,
                                    interval: 0,
                                    textStyle: { fontSize: 16, color: '#7c592f' },
                                    formatter: '{value}月',
                                },
                                //底部分類樣式
                                axisLine: {
                                    lineStyle: {
                                        color: '#7c592f',
                                    },
                                    fontSize: 16
                                },
                                type: 'category',
                                boundaryGap: true,
                                data: month
                            },
                            //右側資料 Y軸資料 
                            yAxis: [{
                                name: '票數(票)',
                                type: 'value',
                                axisLine: {
                                    lineStyle: {
                                        color: '#7c592f'
                                    }
                                },
                                position: 'left',
                            },
                            {
                                name: '重量(噸)',
                                type: 'value',
                                axisLine: {
                                    lineStyle: {
                                        color: '#7c592f'
                                    }
                                },
                                position: 'right',


                            },
                            {
                                name: '金額(萬元)',
                                type: 'value',
                                axisLine: {
                                    lineStyle: {
                                        color: '#7c592f'
                                    }
                                },
                                position: 'right',
                                offset: 60,
                            },
                            ],
                            series: [
                                {
                                    name: '票數',
                                    type: "line",
                                    //areaStyle: { normal: {} },
                                    data: piaoshu,
                                    yAxisIndex: 0,
                                    areaStyle: areaStyle,
                                }, {
                                    name: '重量',
                                    type: "line",
                                    //areaStyle: { normal: {} },
                                    data: zhongliang,
                                    yAxisIndex: 1,
                                    areaStyle: areaStyle,
                                }, {
                                    name: '運費',
                                    type: "line",
                                    //areaStyle: { normal: {} },
                                    data: yunfei,
                                    yAxisIndex: 2,
                                    areaStyle: areaStyle,
                                }, {
                                    name: '代收貨款',
                                    type: "line",
                                    //areaStyle: { normal: {} },
                                    data: daishouhuokuan,
                                    yAxisIndex: 2,
                                    areaStyle: areaStyle,
                                }, {
                                    name: '中轉費',
                                    type: "line",
                                    //areaStyle: { normal: {} },
                                    data: zhongzhuanfei,
                                    yAxisIndex: 2,
                                    areaStyle: areaStyle,
                                }, {
                                    name: '實際送貨費',
                                    type: "line",
                                    //areaStyle: { normal: {} },
                                    data: shijisonghuofei,
                                    yAxisIndex: 2,
                                    areaStyle: areaStyle,
                                }
                            ]
                        };
                        var echarts_ydzb = echarts.init(document.getElementById('echarts_ydzb'));
                        echarts_ydzb.setOption(option_ydzb);

                        window.addEventListener("resize", function () {
                            echarts_ydzb.resize();
                        });

                        var year = $("#year").val();
                        var options = {
                            useEasing: true, //使用緩和效果
                            useGrouping: true, //使用分組效果
                            separator: '', //分離器，資料夠三位，例如100,000
                            decimal: '.', //小數點分割，例如：10.00
                            prefix: '', //第一位預設數字
                            suffix: '' //最後一位預設數字
                        };

                        new CountUp("year1", 0, year, 0, 3, options).start();

                        var options1 = {
                            useEasing: true, //使用緩和效果
                            useGrouping: true, //使用分組效果
                            separator: ',', //分離器，資料夠三位，例如100,000
                            decimal: '.', //小數點分割，例如：10.00
                            prefix: '', //第一位預設數字
                            suffix: '' //最後一位預設數字
                        };
                        new CountUp("totalpiaoshu", 0, totalpiaoshu, 0, 3, options1).start();
                        new CountUp("totalweight", 0, (totalweight).toFixed(2), 2, 3, options1).start();
                        new CountUp("totalyunfei", 0, (totalyunfei / 10000).toFixed(2), 2, 3, options1).start();
                        new CountUp("totaldaishou", 0, (totaldaishou / 10000).toFixed(2), 2, 3, options1).start();
                        new CountUp("totaldaishourstio", 0, (totaldaishou / totalyunfei).toFixed(2), 2, 3, options1).start();
                        new CountUp("totalzhongzhuan", 0, (totalzhongzhuan / 10000).toFixed(2), 2, 3, options1).start();
                        new CountUp("totalzhongzhuanratio", 0, (totalzhongzhuan / totalyunfei).toFixed(2), 2, 3, options1).start();
                        new CountUp("totalsonghuo", 0, (totalsonghuo / 10000).toFixed(2), 2, 3, options1).start();
                        new CountUp("totalsonghuoratio", 0, (totalsonghuo / totalyunfei).toFixed(2), 2, 3, options1).start();
                    }
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                return;
            },
            dataType: "json"
        }).fail(function (jqXHR, textStatus) {
            console.log("Ajax Error: ", textStatus);
        });
    }

後臺程式碼如下：

 public ActionResult GetYearReportBigDataBYUnit(bool cache = false)
        {
            string fileName = "yearData.json";

            if (cache == true)
            {
                string jsonData = GetData(fileName);
                if (string.IsNullOrEmpty(jsonData) == false)
                {
                    return Json(new { status = true, data = jsonData }, JsonRequestBehavior.AllowGet);
                }
            }

            DataTable dt = GetYearReportBigData().Tables[2];

            List<yearData> data = new List<yearData> { };
            for (int i = 1; i < 13; i++)
            {
                DataRow[] dr = dt.Select(string.Format("month='{0}'", i));

                if (dr.Length > 0)
                {
                    data.Add(new yearData
                    {
                        month = dr[0]["month"].ToStr(),
                        piaoshu = dr[0]["piaoshu"].ToInt(),
                        zhongliang = dr[0]["zhongliang"].ToDecimal(),
                        yunfei = dr[0]["yunfei"].ToDecimal(),
                        daishouhuokuan = dr[0]["daishouhuokuan"].ToDecimal(),
                        zhongzhuanfei = dr[0]["zhongzhuanfei"].ToDecimal(),
                        shijisonghuofei = dr[0]["shijisonghuofei"].ToDecimal(),
                    });
                }
                else
                {
                    data.Add(new yearData
                    {
                        month = i.ToStr(),
                        piaoshu = 0,
                        zhongliang = 0,
                        yunfei = 0,
                        daishouhuokuan = 0,
                        zhongzhuanfei = 0,
                        shijisonghuofei = 0,
                    });
                }
            }
            string json = data.ToJson();
            SaveData(fileName, json);

            return Json(new { status = true, data = json }, JsonRequestBehavior.AllowGet);
        }

出來的效果如下：

其實要實現圖表的呈現還是非常簡單的事情，多去echarts官網去看看學習，會學到各種各樣漂亮的圖表，大家可以一起學習交流。

下面介紹下怎麼去實現漂亮的中國地圖並且呈現出資料。

       <div class="section section-21">
            <div class="title">
                <div class="section_content">
                    <em>全國網點分佈圖</em>
                    <div class="page21_quxtu">
                        <!--柱狀圖位置-->
                        <div id="echarts_map">  

                        </div>
                        <div class="chart44444" id="chart44444"></div>
                    </div>
                </div>
            </div>
        </div>

需要引入js檔案

function map() {
    myMapChart = echarts.getInstanceByDom(document.getElementById('echarts_map'));
    if (myMapChart == undefined) {
        myMapChart = echarts.init(document.getElementById('echarts_map'));
    }

    myMapChart.showLoading({
        text: '正在載入資料.....',
        color: '#fff',
        textColor: '#fff',
        maskColor: '#46b3e6',
        zlevel: 0
    });

    $.ajax({
        url: "/paymentWelfare/GetSalaryBigDataBYMap",
        type: "GET",
        data: { cache: false },
        dataType: 'json',
        cache: false,
        success: function (result) {
            if (result.status) {
                if (result.data.length > 0) {
                    debugger;
                    var data = JSON.parse(result.data);
                    geoCoordMap = $.extend(geoCoordMap, data);
                    lightProvince = data.provinceList;

                    $.ajax({
                        url: "/paymentWelfare/GetYearReportBigDataBYMapSite",
                        type: "GET",
                        data: { cache: false },
                        dataType: 'json',
                        cache: false,
                        success: function (result) {
                            if (result.status) {
                                if (result.data.length > 0) {

                                    var data = JSON.parse(result.data);
                                    geoData = data;

                                    seriesData();

                                    $.ajax({
                                        url: "/paymentWelfare/GetProvinceCode",
                                        type: "GET",
                                        dataType: 'json',
                                        success: function (result) {
                                            if (result.status) {
                                                if (result.data.length > 0) {
                                                    if (result.data == 'china') {
                                                        mapSelected = 'china';
                                                    }
                                                    else {
                                                        mapSelected = py_provinceMap[result.data];
                                                    }
                                                    loadMap(result.data);
                                                }
                                            }
                                        },
                                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                                            return;
                                        },
                                        dataType: "json"
                                    }).fail(function (jqXHR, textStatus) {
                                        console.log("Ajax Error: ", textStatus);
                                    });

                                    window.addEventListener("resize", function () {
                                        myMapChart.resize();
                                    });

                                    var setProvinceCode = function (provinceCode) {
                                        $.ajax({
                                            url: "/paymentWelfare/SetProvinceCode",
                                            type: "GET",
                                            data: { provinceCode: provinceCode },
                                            dataType: 'json',
                                            cache: false,
                                            success: function (result) {
                                                return;
                                            },
                                            error: function (XMLHttpRequest, textStatus, errorThrown) {
                                                return;
                                            },
                                            dataType: "json"
                                        }).fail(function (jqXHR, textStatus) {
                                            console.log("Ajax Error: ", textStatus);
                                        });
                                    };

                                    myMapChart.on('click', function (ev) {
                                        if (isProvince(ev.name)) {
                                            mapSelected = ev.name
                                            console.log(mapSelected)
                                            loadMap(provinceMap[ev.name]);
                                        }
                                        else if (isCity(ev.name)) {
                                            mapSelected = ev.name;
                                            loadMap(cityMap[ev.name]);
                                        }
                                        else {
                                            mapSelected = 'china'
                                            loadMap(mapSelected)
                                        }
                                    });
                                }
                            }
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            return;
                        },
                        dataType: "json"
                    }).fail(function (jqXHR, textStatus) {
                        console.log("Ajax Error: ", textStatus);
                        });
                }
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            return;
        },
        dataType: "json"
    }).fail(function (jqXHR, status) {
        console.log("Ajax Error: ", status);
    });
}

地圖的實現，echarts官網有非常多的介紹，可以多去官網看看。

多個頁面在一個頁面展現出來，實現的是翻頁的效果。

  <ul class="section-btn">
        <li class="cur"><a>01</a></li>
        <li class=""><a>02</a></li>
        <li class=""><a>03</a></li>
        <li class=""><a>04</a></li>
        <li class=""><a>05</a></li>
        <li class=""><a>06</a></li>
        <li class=""><a>07</a></li>
        <li class=""><a>08</a></li>
        <li class=""><a>09</a></li>
        <li class=""><a>10</a></li>
        <li class=""><a>11</a></li>
        <li class=""><a>12</a></li>
        <li class=""><a>13</a></li>
        <li class=""><a>14</a></li>
        <li class=""><a>15</a></li>
        <li class=""><a>16</a></li>
        <li class=""><a>17</a></li>
        <li class=""><a>18</a></li>
        <li class=""><a>19</a></li>
        <li class=""><a>20</a></li>
        <li class=""><a>21</a></li>
        <li class=""><a>22</a></li>
        <li class=""><a>23</a></li>
    </ul>
    <div class="go-btn">&laquo;</div>

/*===reset===*/
body{
    color:#281767;
    -webkit-text-size-adjust:none;
    background:#0094ff;

}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl, dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,iframe
{
    margin:0;
    padding:0;

}
h1,h2,h3,h4,h5,h6
{
    font-size:100%;
}
body, button, input, select, textarea
{
    font-family: Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
    font-size: 62.5%;
    line-height: 1.5;
}
h1,h2,h3,h4,h5,h6
{
    font-size:100%;
    font-weight: normal;
}
fieldset,img
{
    border:0; 
    display:inline-block;
}
address, caption, cite, dfn, em, th, var {
    font-style: normal;
    font-weight: normal;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    display: block;
    margin: 0;
    padding: 0;
}
code, kbd, pre, samp {
    font-family: courier new,courier,monospace
}
ol,ul{
    list-style:none;
}
a{
    text-decoration:none;
    color:#222;
}
a:hover{
    color:#000;
    text-decoration: none;zoom:1}
a:active{
    color:#666;
}
sup{
    vertical-align:text-top;
}
sub{
    vertical-align:text-bottom;
}
input,select,button{ 
    vertical-align: baseline; 
    *vertical-align:middle;
    font-family: tahoma, \5b8b\4f53, arial; 
    font-size: 100%;  
}
input[type=checkbox],input[type=radio]{
    vertical-align:middle;
    margin:0 5px;
}
    input[type="text"], input[type="password"], textarea {
        outline-style: none;
        -webkit-appearance: none;
    }
textarea {
    resize: none;
}
textarea {
    overflow: auto;
    font: 100% tahoma,\5b8b\4f53,arial;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*===reset end===*/

html,body{ 
    width:100%; 
    height:100%; 
    overflow:hidden;
}
.section-wrap {
    width: 100%;
    height: 100%;
    overflow: visible;
    transition: transform 1s cubic-bezier(0.86,0,0.03,1);
    -webkit-transition: -webkit-transform 1s cubic-bezier(0.86,0,0.03,1);
    -ms-transition: -ms-transform 1s cubic-bezier(0.86,0,0.03,1);
    -moz-transition: -moz-transform 1s cubic-bezier(0.86,0,0.03,1);
    -o-transition: -o-transform 1s cubic-bezier(0.86,0,0.03,1);
}

    .section-wrap .section {
        position: relative;
        width: 100%;
        height: 100vh;
        background-position: center bottom;
        background-repeat: no-repeat;
    }
        .section-wrap .section .title {
            font-size: 40px;
            font-family: "Microsoft YaHei";
        }


.put-section-0 {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
}
.put-section-1 {
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
}
.put-section-2 {
    transform: translateY(-200%);
    -webkit-transform: translateY(-200%);
    -ms-transform: translateY(-200%);
    -moz-transform: translateY(-200%);
    -o-transform: translateY(-200%);
}
.put-section-3 {
    transform: translateY(-300%);
    -webkit-transform: translateY(-300%);
    -ms-transform: translateY(-300%);
    -moz-transform: translateY(-300%);
    -o-transform: translateY(-300%);
}
.put-section-4 {
    transform: translateY(-400%);
    -webkit-transform: translateY(-400%);
    -ms-transform: translateY(-400%);
    -moz-transform: translateY(-400%);
    -o-transform: translateY(-400%);
}
.put-section-5 {
    transform: translateY(-500%);
    -webkit-transform: translateY(-500%);
    -ms-transform: translateY(-500%);
    -moz-transform: translateY(-500%);
    -o-transform: translateY(-500%);
}
.put-section-6 {
    transform: translateY(-600%);
    -webkit-transform: translateY(-600%);
    -ms-transform: translateY(-600%);
    -moz-transform: translateY(-600%);
    -o-transform: translateY(-600%);
}
.put-section-7 {
    transform: translateY(-700%);
    -webkit-transform: translateY(-700%);
    -ms-transform: translateY(-700%);
    -moz-transform: translateY(-700%);
    -o-transform: translateY(-700%);
}
.put-section-8 {
    transform: translateY(-800%);
    -webkit-transform: translateY(-800%);
    -ms-transform: translateY(-800%);
    -moz-transform: translateY(-800%);
    -o-transform: translateY(-800%);
}
.put-section-9 {
    transform: translateY(-900%);
    -webkit-transform: translateY(-900%);
    -ms-transform: translateY(-900%);
    -moz-transform: translateY(-900%);
    -o-transform: translateY(-900%);
}
.put-section-10 {
    transform: translateY(-1000%);
    -webkit-transform: translateY(-1000%);
    -ms-transform: translateY(-1000%);
    -moz-transform: translateY(-1000%);
    -o-transform: translateY(-1000%);
}
.put-section-11 {
    transform: translateY(-1100%);
    -webkit-transform: translateY(-1100%);
    -ms-transform: translateY(-1100%);
    -moz-transform: translateY(-1100%);
    -o-transform: translateY(-1100%);
}
.put-section-12 {
    transform: translateY(-1200%);
    -webkit-transform: translateY(-1200%);
    -ms-transform: translateY(-1200%);
    -moz-transform: translateY(-1200%);
    -o-transform: translateY(-1200%);
}
.put-section-13 {
    transform: translateY(-1300%);
    -webkit-transform: translateY(-1300%);
    -ms-transform: translateY(-1300%);
    -moz-transform: translateY(-1300%);
    -o-transform: translateY(-1300%);
}
.put-section-14 {
    transform: translateY(-1400%);
    -webkit-transform: translateY(-1400%);
    -ms-transform: translateY(-1400%);
    -moz-transform: translateY(-1400%);
    -o-transform: translateY(-1400%);
}
.put-section-15 {
    transform: translateY(-1500%);
    -webkit-transform: translateY(-1500%);
    -ms-transform: translateY(-1500%);
    -moz-transform: translateY(-1500%);
    -o-transform: translateY(-1500%);
}
.put-section-16 {
    transform: translateY(-1600%);
    -webkit-transform: translateY(-1600%);
    -ms-transform: translateY(-1600%);
    -moz-transform: translateY(-1600%);
    -o-transform: translateY(-1600%);
}
.put-section-17 {
    transform: translateY(-1700%);
    -webkit-transform: translateY(-1700%);
    -ms-transform: translateY(-1700%);
    -moz-transform: translateY(-1700%);
    -o-transform: translateY(-1700%);
}
.put-section-18 {
    transform: translateY(-1800%);
    -webkit-transform: translateY(-1800%);
    -ms-transform: translateY(-1800%);
    -moz-transform: translateY(-1800%);
    -o-transform: translateY(-1800%);
}

.put-section-19 {
    transform: translateY(-1900%);
    -webkit-transform: translateY(-1900%);
    -ms-transform: translateY(-1900%);
    -moz-transform: translateY(-1900%);
    -o-transform: translateY(-1900%);
}

.put-section-20 {
    transform: translateY(-2000%);
    -webkit-transform: translateY(-2000%);
    -ms-transform: translateY(-2000%);
    -moz-transform: translateY(-2000%);
    -o-transform: translateY(-2000%);
}

.put-section-21 {
    transform: translateY(-2100%);
    -webkit-transform: translateY(-2100%);
    -ms-transform: translateY(-2100%);
    -moz-transform: translateY(-2100%);
    -o-transform: translateY(-2100%);
}

.put-section-22 {
    transform: translateY(-2200%);
    -webkit-transform: translateY(-2200%);
    -ms-transform: translateY(-2200%);
    -moz-transform: translateY(-2200%);
    -o-transform: translateY(-2200%);
}

.put-section-23 {
    transform: translateY(-2300%);
    -webkit-transform: translateY(-2300%);
    -ms-transform: translateY(-2300%);
    -moz-transform: translateY(-2300%);
    -o-transform: translateY(-2300%);
}

.put-section-24 {
    transform: translateY(-2400%);
    -webkit-transform: translateY(-2400%);
    -ms-transform: translateY(-2400%);
    -moz-transform: translateY(-2400%);
    -o-transform: translateY(-2400%);
}

/*點*/
/*.section-btn {
    position: fixed;
    right: 35px;
    top: 5%;
    width: 14px;
}
    .section-btn li {
        margin-bottom: 12px;
        background: rgba(255,255,255,0.4);
        text-align: center;
        width: 18px;
        height: 18px;
        color: #fff;
        cursor: pointer;
        border-radius: 50%;
    }
    .section-btn li.cur {
        background: #ffffff;
    }*/

    .section-btn{height: 600px;overflow: hidden;position: fixed;right:6px;top:40%;margin-top: -204px;font-size:12px;}
.section-btn li{color: #fff;background:url("../images/page1.png") no-repeat;background-size:100% 100%;width: 23px;height: 23px;text-align: center;margin-bottom: 2px;line-height: 23px;}
.section-btn li a{color: #fff;font-family: "Arial";}
.section-btn .cur{background:url("../images/page2.png") no-repeat;background-size:100% 100%;}
.section-btn .cur a{color:#00024d;}
.section-btn li:hover{background:url("../images/page2.png") no-repeat;background-size:100% 100%;}
.section-btn li:hover a{color:#00024d;}

/*底部箭頭*/
.go-btn {
    opacity: 1;
    webkit-animation: go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
    -webkit-animation: go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
    -ms-animation: go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
    -moz-animation: go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
    -o-animation: go-btn 3s cubic-bezier(0.5,0,0.1,1)infinite;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    position: absolute;
    bottom: 10px;
    left: 48%;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    color: #e8a728;
    border: 1px solid #e8a728;
    cursor: pointer;
    overflow: hidden
}
    .go-btn:hover {
        animation-play-state: paused;
        -webkit-animation-play-state: paused;
        -ms-animation-play-state: paused;
        -moz-animation-play-state: paused;
        -o-animation-play-state: paused;
    }
@keyframes go-btn {
    %0,%100 {
        bottom: 10px;
        opacity: 1;
    }

    50% {
        bottom: 50px;
        opacity: .5
    }
}
@-webkit-keyframes go-btn {
    %0,%100 {
        bottom: 10px;
        opacity: 1;
    }

    50% {
        bottom: 50px;
        opacity: .5
    }
}
@-ms-keyframes go-btn {
    %0,%100 {
        bottom: 10px;
        opacity: 1;
    }

    50% {
        bottom: 50px;
        opacity: .5
    }
}
@-moz-keyframes go-btn {
    %0,%100 {
        bottom: 10px;
        opacity: 1;
    }

    50% {
        bottom: 50px;
        opacity: .5
    }
}
@-o-keyframes go-btn {
    %0,%100 {
        bottom: 10px;
        opacity: 1;
    }

    50% {
        bottom: 50px;
        opacity: .5
    }
}
@-o-keyframes go-btn {
    %0,%100 {
        bottom: 10px;
        opacity: 1;
    }

    50% {
        bottom: 50px;
        opacity: .5
    }
}

結束語

以上簡單介紹了用到的技術和實現方式，供大家學習交流，我相信很多系統還是需要年報的功能，這樣能給系統帶來非常多的亮點，讓系統有更大的賣點。

SaaS系統怎麼做物流行業年度經營報告，MVC+js+echarts實現

前言馬上就到年底了，很多公司都要彙總這一年的經營情況，如果一個系統沒有自動生成年報的功能，需要人工手工去做年報，我相信可能是一個不小的工作量，最近我通過一個星期的時間，結合系統情況自動生成年報，全部以圖表的形式呈現，為公司SaaS系統增光增色不少。

製造業和物流行業的WMS系統差別在哪？

關於製造企業和物流企業的WMS 還存在很多的差異化具體如下 ▼ 多機構的管理多數情況下，企業物流的倉庫機構只有一個，而物流企業的倉庫機構往往不只一個，所以物流企業的WMS通常都需要多機構的管理。而且和傳統的資訊系統多機構的支援不一樣的地方在於，物流企業的WMS更關

奧威數據可視化系統Power-BI 數據分析報告--2017年4月全國彩票銷售情況

彩票 tle 變化 blank 模板制作只需要 width div 4月份全國彩票銷額382.45億元，同比增長9.62%。其中,福利彩票銷額187.24億元，占總比值48.96%，同比增長4.31%；體育彩票銷額195.22億元，占總比值51.04%，同比增長15.

《大話操作系統——做堅實的project實踐派》(5)

分享 enter 平臺 == 我不 log img popu rac 有人說我不是僅僅會玩X86嗎？我如今鐵板釘釘的申明：我事實上兼通：ARM、IA-32、IA-32e、AMD64。 ?了解MIPS。但沒做過MIPS由於確實沒有對應的MIPS硬件平臺。 ?

互聯網+物流，無人機等智能化與大數據下的物流行業發展更可觀

sig mage 格局宣傳 nice 互聯網+ 數據管理出口 ice 2017（第三屆）互聯網+物流格局論壇於昨日在北京新聞大廈舉行，大會以“人與無人”為主題，圍繞智能高科技、人性化服務等方面探討了物流大數據的未來走向。隨著互聯網的崛起，物流行業也發展迅速

共享儲物櫃的出現提升物流行業投遞效率

共享儲物櫃　　繼滴滴之後，出現了一大批共享服務平臺，共享單車、共享汽車、共享充電寶。共享經濟，從理論上來說，是用戶的使用權代替所有權，讓物品本身的利用效益發揮最大，使用成本降低。快遞櫃應趨勢而生，作為用戶取件、快遞員投件的智能終端設備，節省取件人的時間，更成倍提升物流行業投遞效率。　　共享儲物櫃，通過微信/a

SaaS 系統架構設計經驗總結

計費攔截好處 abc www. ring 需求分系統數據庫 2B SaaS系統最近幾年都很火。很多創業公司都在嘗試創建企業級別的應用 cRM, HR,銷售, Desk SaaS系統。很多SaaS創業公司也拿了大額風投。畢竟SaaS相對傳統軟件的優勢非常明顯。最近一

騰訊大數據發布2017第三季度移動行業數據報告

ask lin icon vfp ebp tbb gin oat num 在如今移動設備規模增速明顯放緩，移動設備趨於飽和的情況下，移動互聯網人口紅利基本結束，逐漸演變成對存量設備的爭奪。2017年第三季度移動APP下載呈現回暖趨勢：大家都在下了哪些APP？又在用哪些APP

《大話操作系統——做堅實的project實踐派》(2)

.html fontsize data- avi span project blog 技術分享 con ?? ?《大話操作系統——做堅實的project實踐派》(2

2017第四季度移動行業數據報告

騰訊大數據移動行業本報告轉自騰訊大數據公眾號，已獲得作者授權2017第四季度移動行業數據報告

綜合布線系統在政府行業有什麽作用

科訊電子德特威勒隨著電腦和計算機網絡的普及，政府行業的信息傳輸已經到了無紙化辦公的階段，大量的本地信息、外地信息、全球信息都會在辦公室電腦的顯示屏上和電話聽筒中。在大多數政府機關中都已經采用了內網物理隔離的方式，並且開始考慮到電子顯示和電子檔案需求，要求裝有消防控制設備、公共廣播設備和防盜報警設備、電子考

專業代做網站logo設計、代做婚禮LOGO設計、找人做公司LOGO設計、找人做教育行業LOGO設計、品牌創意設計

蝴蝶很多簡單搜狗 The 思維教育無法信息化作為認知語言學中的兩個重要概念, 隱喻 (metaphor) 和轉喻 (metonymy) 不再是作為傳統的修辭手法, 而是一種重要的思維方式和認知手段。隱喻具有創造相似性, 建立事物之間聯系的功能。轉喻又稱換喻,

【轉載】2017 軟件測試行業現狀調查報告_From_51testing_On_20180625

圖片 com sting margin cti 下載 from 一份月份這份報告由51Testing 發布，他們會在每年年中發布會一份測試行業調查報告，今年是在6月份發布的。報告下載地址： http://www.51testing.com/index.php?act

20165223 《資訊安全系統設計基礎》實驗一報告

小組成員：20165223 20165218 實驗名稱：開發化境的熟悉目錄一、實驗內容（一）交叉編譯環境（二）Activity測試（三）UI測試（四）佈局測試（五）教材程式碼測試三、實驗總結一、實驗內容

小說系統做的人這麼多，他到底怎麼才能做長久——浩森小說系統

呦，最近我發現這個小說系統很火嗎！詢問的人很多，商機難道就讓我這樣默默地錯過去了嗎？不行！不管行不行弄弄再說！大家是不是都是打算埋頭苦幹，掙一波，小說系統的錢呀！勸你們千萬別盲目，坑還是比較多，千萬別賠了夫人又折兵! 讓我們來詳細的瞭解一下小說系統的運營流程吧！…… 首先，讓我

倉儲物流行業安全無線覆蓋解決方案

倉儲物流行業安全無線覆蓋解決方案近年來物流業務飛速發展，數字化便捷化是主要方向。採用無線通訊系統來解決物流行業通訊問題是物流業務數字化便捷化非常實用與有效的方法。越來越多企業配置了移動資料終端，結合WLAN的物流業務在物流業務數字化同時也大大提高了物流業務的便捷化程度。倉儲物流行業無線網路建設難點

用ubuntu 系統做路由 ipv4+dhcp ipv6+radvd

前言裝了臺pc，插了個多口的pcie網絡卡準備當作伺服器用。其中一個lan口連線外網（isp提供ipv6），另外的口用作其他pc、網路裝置的連入。 enp24s0: enp28s0f1: flags=4675<UP,BROADCAST,RUNNING,ALLMULTI,

[原始碼和報告分享]基於C語言實現的檔案系統

2 需求說明 2.1 基本要求 l 設計並實現一個目錄列表函式（無須支援選項，如ls -a、ls -l等），用來顯示當前目錄下包含的檔案資訊 l 設計並實現一個改變目錄函式（無須處理路徑名，如../../directoryName等），用來把當前目錄切換

銷售寶：在中國 SaaS 能做起來嗎？

我們知道SaaS模式起源於美國，在美國市場發展了十幾年，塑造了眾多年收入幾十億美金、市值規模上百億美金的明星公司。通過分析美國SaaS行業發展歷程，對於探索我國SaaS行業的發展有一定的借鑑意義。接下里，一起來看一下（銷售寶）第一，美國saas行業的市場發展和前景；——前人栽樹回

區塊鏈在物流行業的真實落地

MOAC攜手摩方實現數字資產落地應用摩方智享【導語】在全球資訊化高速創新和迭代中，資訊時代將迎來新一輪科技革命和產業變革，區塊鏈作為一項前沿科技首次被寫入我國十三五國家資訊化規劃中，標誌著區塊鏈技術被國家所認可，也大力推動區塊鏈在底層技術應用上的突破。近日，國內首個物流

SaaS系統怎麼做物流行業年度經營報告，MVC+js+echarts實現

前言

實現出來效果

怎麼實現漂亮的圖表

結束語

相關推薦