django存储光交业务管理系统-菜鸟开发日记第10节-业务图表需求

django存储光交业务管理系统-菜鸟开发日记第10节-业务图表需求_第1张图片

客户需求分析<情况完成打勾:

  • [x] 需要获取所有部门的主机使用率,存储使用量,每个月的规划情况
  • [x] 实时展示每个部门的业务情况,主机情况,等等
  • [x] 需要通过图表的方式展示。

计划完成情况:

django存储光交业务管理系统-菜鸟开发日记第10节-业务图表需求_第2张图片
计划时间

大致前端情况如下(使用bootstrap+echarts):

django存储光交业务管理系统-菜鸟开发日记第10节-业务图表需求_第3张图片
基于部门,业务,整体情况展示

django存储光交业务管理系统-菜鸟开发日记第10节-业务图表需求_第4张图片
选择部门,或者业务信息

整体情况展示:

  • 获取一共使用啦多少主机
  • 展示今年每个月的规划情况
    • 获取当年每个月的存储规划情况
  • 展示业务详细分配情况
    • 需要获取所有的部门信息
    • 需要获取每个部门已经使用啦多少存储空间,及该部门使用的主机数量

部门业务展示

  • 显示该部门一共使用啦多台主机
  • 显示今年每个月该部门的规划情况
    • 收集通过部门获取信息。
  • 显示该部门所有的业务情况
    • 展示该部门所有的业务情况,使用的容量,及该业务使用的主机数量

由于显示的数据量计算周期比较长,采用ajax异步进行获取。

图表采用echarts进行展示模版。

使用模版如下:

        var myChart = echarts.init(document.getElementById('zengzqingk'));
        optionss = {
            title : {   #标题
                text: '2018年规划情况',
                subtext: '容量:(GB)'
            },
            color: ['#3398DB'],
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                    type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                }
            },
            toolbox: {  #工具箱
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis : [  #x坐标
                {
                    type : 'category',
                    data : ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis : [#y坐标
                {
                    type : 'value'
                }
            ],
            series : [#数据
                {
                    name:'直接访问',
                    type:'bar',
                    barWidth: '60%',
                    data:[]
                }
            ]
        };
        myChart.setOption(optionss);#注册图表

通过异步获取的方式对echarts进行更改。

大致模版如下:


myChart.showLoading({
    text: '正在努力的读取数据中...',    //loading话术
});
$.ajax({
    url: "{% url "storage_guihua_ajax" %}",
    type: 'POST',
    success: function(data){
        var obj = JSON.parse(data);
        if(obj.status){
            myChart.setOption(
                {
                    title : {
                        text: '2018年存储规划情况',
                        subtext: '容量:(GB)'
                    },
                    series : [
                        {
                            name:'存储使用容量',
                            type:'bar',
                            barWidth: '60%',
                            data:obj.monthdata#每个月的数据量
                        }
                    ]
                }
            )
        }
    });
});
myChart.hideLoading();  #等待异步获取成功后显示数据

最终展示效果:


django存储光交业务管理系统-菜鸟开发日记第10节-业务图表需求_第5张图片
最终显示部门,业务等等详细情况


目录

django开发之存储光交业务管理系统第一节-序言

django存储光交业务管理系统第二节-pyhon脚本的编写

django存储光交业务管理系统第三节-系统初步分析需求

django存储光交业务管理系统第四节-光交数据库的设计

django存储光交业务管理系统第五节-存储数据库的设计

django存储光交业务管理系统第六节-系统的架构流程图

django存储光交业务管理系统第七节-程序的启动

django存储光交业务管理系统-菜鸟开发日记第八节-目录的结构说明

django存储光交业务管理系统-菜鸟开发日记第九节-系统开发遇到的坑

django存储光交业务管理系统-菜鸟开发日记第10节-业务图表需求
django存储光交业务管理系统-菜鸟开发日记第11节-结束及总结

………………………………………………………………

你可能感兴趣的:(django存储光交业务管理系统-菜鸟开发日记第10节-业务图表需求)