客户需求分析<情况完成打勾:
- [x] 需要获取所有部门的主机使用率，存储使用量，每个月的规划情况
- [x] 实时展示每个部门的业务情况，主机情况，等等
- [x] 需要通过图表的方式展示。
计划完成情况:
计划时间
大致前端情况如下(使用bootstrap+echarts):
基于部门，业务，整体情况展示
选择部门，或者业务信息
整体情况展示：
- 获取一共使用啦多少主机
- 展示今年每个月的规划情况
- 获取当年每个月的存储规划情况
- 展示业务详细分配情况
- 需要获取所有的部门信息
- 需要获取每个部门已经使用啦多少存储空间，及该部门使用的主机数量
部门业务展示
- 显示该部门一共使用啦多台主机
- 显示今年每个月该部门的规划情况
- 收集通过部门获取信息。
- 显示该部门所有的业务情况
- 展示该部门所有的业务情况，使用的容量，及该业务使用的主机数量
由于显示的数据量计算周期比较长，采用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存储光交业务管理系统第二节-pyhon脚本的编写
django存储光交业务管理系统-菜鸟开发日记第八节-目录的结构说明
django存储光交业务管理系统-菜鸟开发日记第九节-系统开发遇到的坑
django存储光交业务管理系统-菜鸟开发日记第10节-业务图表需求
django存储光交业务管理系统-菜鸟开发日记第11节-结束及总结
………………………………………………………………
