55 changed files with 109434 additions and 34622 deletions
File diff suppressed because it is too large
@ -1,492 +0,0 @@ |
|||
layui.define(function (exports) { |
|||
exports('echartsTheme', |
|||
{ |
|||
"color": [ |
|||
"#3fb1e3", |
|||
"#6be6c1", |
|||
"#626c91", |
|||
"#a0a7e6", |
|||
"#c4ebad", |
|||
"#96dee8" |
|||
], |
|||
"backgroundColor": "rgba(252,252,252,0)", |
|||
"textStyle": {}, |
|||
"title": { |
|||
"textStyle": { |
|||
"color": "#666666" |
|||
}, |
|||
"subtextStyle": { |
|||
"color": "#999999" |
|||
} |
|||
}, |
|||
"line": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": "3" |
|||
} |
|||
}, |
|||
"lineStyle": { |
|||
"normal": { |
|||
"width": "4" |
|||
} |
|||
}, |
|||
"symbolSize": "10", |
|||
"symbol": "emptyCircle", |
|||
"smooth": true |
|||
}, |
|||
"radar": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": "3" |
|||
} |
|||
}, |
|||
"lineStyle": { |
|||
"normal": { |
|||
"width": "4" |
|||
} |
|||
}, |
|||
"symbolSize": "10", |
|||
"symbol": "emptyCircle", |
|||
"smooth": true |
|||
}, |
|||
"bar": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"barBorderWidth": 0, |
|||
"barBorderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"barBorderWidth": 0, |
|||
"barBorderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"pie": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"scatter": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"boxplot": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"parallel": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"sankey": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"funnel": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"gauge": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"candlestick": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"color": "#e6a0d2", |
|||
"color0": "transparent", |
|||
"borderColor": "#e6a0d2", |
|||
"borderColor0": "#3fb1e3", |
|||
"borderWidth": "2" |
|||
} |
|||
} |
|||
}, |
|||
"graph": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
}, |
|||
"lineStyle": { |
|||
"normal": { |
|||
"width": "1", |
|||
"color": "#cccccc" |
|||
} |
|||
}, |
|||
"symbolSize": "10", |
|||
"symbol": "emptyCircle", |
|||
"smooth": true, |
|||
"color": [ |
|||
"#3fb1e3", |
|||
"#6be6c1", |
|||
"#626c91", |
|||
"#a0a7e6", |
|||
"#c4ebad", |
|||
"#96dee8" |
|||
], |
|||
"label": { |
|||
"normal": { |
|||
"textStyle": { |
|||
"color": "#ffffff" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
"map": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"areaColor": "#eeeeee", |
|||
"borderColor": "#aaaaaa", |
|||
"borderWidth": 0.5 |
|||
}, |
|||
"emphasis": { |
|||
"areaColor": "rgba(63,177,227,0.25)", |
|||
"borderColor": "#3fb1e3", |
|||
"borderWidth": 1 |
|||
} |
|||
}, |
|||
"label": { |
|||
"normal": { |
|||
"textStyle": { |
|||
"color": "#ffffff" |
|||
} |
|||
}, |
|||
"emphasis": { |
|||
"textStyle": { |
|||
"color": "rgb(63,177,227)" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
"geo": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"areaColor": "#eeeeee", |
|||
"borderColor": "#aaaaaa", |
|||
"borderWidth": 0.5 |
|||
}, |
|||
"emphasis": { |
|||
"areaColor": "rgba(63,177,227,0.25)", |
|||
"borderColor": "#3fb1e3", |
|||
"borderWidth": 1 |
|||
} |
|||
}, |
|||
"label": { |
|||
"normal": { |
|||
"textStyle": { |
|||
"color": "#ffffff" |
|||
} |
|||
}, |
|||
"emphasis": { |
|||
"textStyle": { |
|||
"color": "rgb(63,177,227)" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
"categoryAxis": { |
|||
"axisLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": "#cccccc" |
|||
} |
|||
}, |
|||
"axisTick": { |
|||
"show": false, |
|||
"lineStyle": { |
|||
"color": "#333" |
|||
} |
|||
}, |
|||
"axisLabel": { |
|||
"show": true, |
|||
"textStyle": { |
|||
"color": "#999999" |
|||
} |
|||
}, |
|||
"splitLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": [ |
|||
"#eeeeee" |
|||
] |
|||
} |
|||
}, |
|||
"splitArea": { |
|||
"show": false, |
|||
"areaStyle": { |
|||
"color": [ |
|||
"rgba(250,250,250,0.05)", |
|||
"rgba(200,200,200,0.02)" |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
"valueAxis": { |
|||
"axisLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": "#cccccc" |
|||
} |
|||
}, |
|||
"axisTick": { |
|||
"show": false, |
|||
"lineStyle": { |
|||
"color": "#333" |
|||
} |
|||
}, |
|||
"axisLabel": { |
|||
"show": true, |
|||
"textStyle": { |
|||
"color": "#999999" |
|||
} |
|||
}, |
|||
"splitLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": [ |
|||
"#eeeeee" |
|||
] |
|||
} |
|||
}, |
|||
"splitArea": { |
|||
"show": false, |
|||
"areaStyle": { |
|||
"color": [ |
|||
"rgba(250,250,250,0.05)", |
|||
"rgba(200,200,200,0.02)" |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
"logAxis": { |
|||
"axisLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": "#cccccc" |
|||
} |
|||
}, |
|||
"axisTick": { |
|||
"show": false, |
|||
"lineStyle": { |
|||
"color": "#333" |
|||
} |
|||
}, |
|||
"axisLabel": { |
|||
"show": true, |
|||
"textStyle": { |
|||
"color": "#999999" |
|||
} |
|||
}, |
|||
"splitLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": [ |
|||
"#eeeeee" |
|||
] |
|||
} |
|||
}, |
|||
"splitArea": { |
|||
"show": false, |
|||
"areaStyle": { |
|||
"color": [ |
|||
"rgba(250,250,250,0.05)", |
|||
"rgba(200,200,200,0.02)" |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
"timeAxis": { |
|||
"axisLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": "#cccccc" |
|||
} |
|||
}, |
|||
"axisTick": { |
|||
"show": false, |
|||
"lineStyle": { |
|||
"color": "#333" |
|||
} |
|||
}, |
|||
"axisLabel": { |
|||
"show": true, |
|||
"textStyle": { |
|||
"color": "#999999" |
|||
} |
|||
}, |
|||
"splitLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": [ |
|||
"#eeeeee" |
|||
] |
|||
} |
|||
}, |
|||
"splitArea": { |
|||
"show": false, |
|||
"areaStyle": { |
|||
"color": [ |
|||
"rgba(250,250,250,0.05)", |
|||
"rgba(200,200,200,0.02)" |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
"toolbox": { |
|||
"iconStyle": { |
|||
"normal": { |
|||
"borderColor": "#999999" |
|||
}, |
|||
"emphasis": { |
|||
"borderColor": "#666666" |
|||
} |
|||
} |
|||
}, |
|||
"legend": { |
|||
"textStyle": { |
|||
"color": "#999999" |
|||
} |
|||
}, |
|||
"tooltip": { |
|||
"axisPointer": { |
|||
"lineStyle": { |
|||
"color": "#cccccc", |
|||
"width": 1 |
|||
}, |
|||
"crossStyle": { |
|||
"color": "#cccccc", |
|||
"width": 1 |
|||
} |
|||
} |
|||
}, |
|||
"timeline": { |
|||
"lineStyle": { |
|||
"color": "#626c91", |
|||
"width": 1 |
|||
}, |
|||
"itemStyle": { |
|||
"normal": { |
|||
"color": "#626c91", |
|||
"borderWidth": 1 |
|||
}, |
|||
"emphasis": { |
|||
"color": "#626c91" |
|||
} |
|||
}, |
|||
"controlStyle": { |
|||
"normal": { |
|||
"color": "#626c91", |
|||
"borderColor": "#626c91", |
|||
"borderWidth": 0.5 |
|||
}, |
|||
"emphasis": { |
|||
"color": "#626c91", |
|||
"borderColor": "#626c91", |
|||
"borderWidth": 0.5 |
|||
} |
|||
}, |
|||
"checkpointStyle": { |
|||
"color": "#3fb1e3", |
|||
"borderColor": "rgba(63,177,227,0.15)" |
|||
}, |
|||
"label": { |
|||
"normal": { |
|||
"textStyle": { |
|||
"color": "#626c91" |
|||
} |
|||
}, |
|||
"emphasis": { |
|||
"textStyle": { |
|||
"color": "#626c91" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
"visualMap": { |
|||
"color": [ |
|||
"#2a99c9", |
|||
"#afe8ff" |
|||
] |
|||
}, |
|||
"dataZoom": { |
|||
"backgroundColor": "rgba(255,255,255,0)", |
|||
"dataBackgroundColor": "rgba(222,222,222,1)", |
|||
"fillerColor": "rgba(114,230,212,0.25)", |
|||
"handleColor": "#cccccc", |
|||
"handleSize": "100%", |
|||
"textStyle": { |
|||
"color": "#999999" |
|||
} |
|||
}, |
|||
"markPoint": { |
|||
"label": { |
|||
"normal": { |
|||
"textStyle": { |
|||
"color": "#ffffff" |
|||
} |
|||
}, |
|||
"emphasis": { |
|||
"textStyle": { |
|||
"color": "#ffffff" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
@ -0,0 +1,587 @@ |
|||
/*! |
|||
* Bootstrap v3.4.1 (https://getbootstrap.com/) |
|||
* Copyright 2011-2019 Twitter, Inc. |
|||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) |
|||
*/ |
|||
.btn-default, |
|||
.btn-primary, |
|||
.btn-success, |
|||
.btn-info, |
|||
.btn-warning, |
|||
.btn-danger { |
|||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); |
|||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); |
|||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); |
|||
} |
|||
.btn-default:active, |
|||
.btn-primary:active, |
|||
.btn-success:active, |
|||
.btn-info:active, |
|||
.btn-warning:active, |
|||
.btn-danger:active, |
|||
.btn-default.active, |
|||
.btn-primary.active, |
|||
.btn-success.active, |
|||
.btn-info.active, |
|||
.btn-warning.active, |
|||
.btn-danger.active { |
|||
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); |
|||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); |
|||
} |
|||
.btn-default.disabled, |
|||
.btn-primary.disabled, |
|||
.btn-success.disabled, |
|||
.btn-info.disabled, |
|||
.btn-warning.disabled, |
|||
.btn-danger.disabled, |
|||
.btn-default[disabled], |
|||
.btn-primary[disabled], |
|||
.btn-success[disabled], |
|||
.btn-info[disabled], |
|||
.btn-warning[disabled], |
|||
.btn-danger[disabled], |
|||
fieldset[disabled] .btn-default, |
|||
fieldset[disabled] .btn-primary, |
|||
fieldset[disabled] .btn-success, |
|||
fieldset[disabled] .btn-info, |
|||
fieldset[disabled] .btn-warning, |
|||
fieldset[disabled] .btn-danger { |
|||
-webkit-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
.btn-default .badge, |
|||
.btn-primary .badge, |
|||
.btn-success .badge, |
|||
.btn-info .badge, |
|||
.btn-warning .badge, |
|||
.btn-danger .badge { |
|||
text-shadow: none; |
|||
} |
|||
.btn:active, |
|||
.btn.active { |
|||
background-image: none; |
|||
} |
|||
.btn-default { |
|||
background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%); |
|||
background-image: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0)); |
|||
background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
|||
background-repeat: repeat-x; |
|||
border-color: #dbdbdb; |
|||
text-shadow: 0 1px 0 #fff; |
|||
border-color: #ccc; |
|||
} |
|||
.btn-default:hover, |
|||
.btn-default:focus { |
|||
background-color: #e0e0e0; |
|||
background-position: 0 -15px; |
|||
} |
|||
.btn-default:active, |
|||
.btn-default.active { |
|||
background-color: #e0e0e0; |
|||
border-color: #dbdbdb; |
|||
} |
|||
.btn-default.disabled, |
|||
.btn-default[disabled], |
|||
fieldset[disabled] .btn-default, |
|||
.btn-default.disabled:hover, |
|||
.btn-default[disabled]:hover, |
|||
fieldset[disabled] .btn-default:hover, |
|||
.btn-default.disabled:focus, |
|||
.btn-default[disabled]:focus, |
|||
fieldset[disabled] .btn-default:focus, |
|||
.btn-default.disabled.focus, |
|||
.btn-default[disabled].focus, |
|||
fieldset[disabled] .btn-default.focus, |
|||
.btn-default.disabled:active, |
|||
.btn-default[disabled]:active, |
|||
fieldset[disabled] .btn-default:active, |
|||
.btn-default.disabled.active, |
|||
.btn-default[disabled].active, |
|||
fieldset[disabled] .btn-default.active { |
|||
background-color: #e0e0e0; |
|||
background-image: none; |
|||
} |
|||
.btn-primary { |
|||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%); |
|||
background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88)); |
|||
background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
|||
background-repeat: repeat-x; |
|||
border-color: #245580; |
|||
} |
|||
.btn-primary:hover, |
|||
.btn-primary:focus { |
|||
background-color: #265a88; |
|||
background-position: 0 -15px; |
|||
} |
|||
.btn-primary:active, |
|||
.btn-primary.active { |
|||
background-color: #265a88; |
|||
border-color: #245580; |
|||
} |
|||
.btn-primary.disabled, |
|||
.btn-primary[disabled], |
|||
fieldset[disabled] .btn-primary, |
|||
.btn-primary.disabled:hover, |
|||
.btn-primary[disabled]:hover, |
|||
fieldset[disabled] .btn-primary:hover, |
|||
.btn-primary.disabled:focus, |
|||
.btn-primary[disabled]:focus, |
|||
fieldset[disabled] .btn-primary:focus, |
|||
.btn-primary.disabled.focus, |
|||
.btn-primary[disabled].focus, |
|||
fieldset[disabled] .btn-primary.focus, |
|||
.btn-primary.disabled:active, |
|||
.btn-primary[disabled]:active, |
|||
fieldset[disabled] .btn-primary:active, |
|||
.btn-primary.disabled.active, |
|||
.btn-primary[disabled].active, |
|||
fieldset[disabled] .btn-primary.active { |
|||
background-color: #265a88; |
|||
background-image: none; |
|||
} |
|||
.btn-success { |
|||
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%); |
|||
background-image: -o-linear-gradient(top, #5cb85c 0%, #419641 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641)); |
|||
background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
|||
background-repeat: repeat-x; |
|||
border-color: #3e8f3e; |
|||
} |
|||
.btn-success:hover, |
|||
.btn-success:focus { |
|||
background-color: #419641; |
|||
background-position: 0 -15px; |
|||
} |
|||
.btn-success:active, |
|||
.btn-success.active { |
|||
background-color: #419641; |
|||
border-color: #3e8f3e; |
|||
} |
|||
.btn-success.disabled, |
|||
.btn-success[disabled], |
|||
fieldset[disabled] .btn-success, |
|||
.btn-success.disabled:hover, |
|||
.btn-success[disabled]:hover, |
|||
fieldset[disabled] .btn-success:hover, |
|||
.btn-success.disabled:focus, |
|||
.btn-success[disabled]:focus, |
|||
fieldset[disabled] .btn-success:focus, |
|||
.btn-success.disabled.focus, |
|||
.btn-success[disabled].focus, |
|||
fieldset[disabled] .btn-success.focus, |
|||
.btn-success.disabled:active, |
|||
.btn-success[disabled]:active, |
|||
fieldset[disabled] .btn-success:active, |
|||
.btn-success.disabled.active, |
|||
.btn-success[disabled].active, |
|||
fieldset[disabled] .btn-success.active { |
|||
background-color: #419641; |
|||
background-image: none; |
|||
} |
|||
.btn-info { |
|||
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%); |
|||
background-image: -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2)); |
|||
background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
|||
background-repeat: repeat-x; |
|||
border-color: #28a4c9; |
|||
} |
|||
.btn-info:hover, |
|||
.btn-info:focus { |
|||
background-color: #2aabd2; |
|||
background-position: 0 -15px; |
|||
} |
|||
.btn-info:active, |
|||
.btn-info.active { |
|||
background-color: #2aabd2; |
|||
border-color: #28a4c9; |
|||
} |
|||
.btn-info.disabled, |
|||
.btn-info[disabled], |
|||
fieldset[disabled] .btn-info, |
|||
.btn-info.disabled:hover, |
|||
.btn-info[disabled]:hover, |
|||
fieldset[disabled] .btn-info:hover, |
|||
.btn-info.disabled:focus, |
|||
.btn-info[disabled]:focus, |
|||
fieldset[disabled] .btn-info:focus, |
|||
.btn-info.disabled.focus, |
|||
.btn-info[disabled].focus, |
|||
fieldset[disabled] .btn-info.focus, |
|||
.btn-info.disabled:active, |
|||
.btn-info[disabled]:active, |
|||
fieldset[disabled] .btn-info:active, |
|||
.btn-info.disabled.active, |
|||
.btn-info[disabled].active, |
|||
fieldset[disabled] .btn-info.active { |
|||
background-color: #2aabd2; |
|||
background-image: none; |
|||
} |
|||
.btn-warning { |
|||
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%); |
|||
background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316)); |
|||
background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
|||
background-repeat: repeat-x; |
|||
border-color: #e38d13; |
|||
} |
|||
.btn-warning:hover, |
|||
.btn-warning:focus { |
|||
background-color: #eb9316; |
|||
background-position: 0 -15px; |
|||
} |
|||
.btn-warning:active, |
|||
.btn-warning.active { |
|||
background-color: #eb9316; |
|||
border-color: #e38d13; |
|||
} |
|||
.btn-warning.disabled, |
|||
.btn-warning[disabled], |
|||
fieldset[disabled] .btn-warning, |
|||
.btn-warning.disabled:hover, |
|||
.btn-warning[disabled]:hover, |
|||
fieldset[disabled] .btn-warning:hover, |
|||
.btn-warning.disabled:focus, |
|||
.btn-warning[disabled]:focus, |
|||
fieldset[disabled] .btn-warning:focus, |
|||
.btn-warning.disabled.focus, |
|||
.btn-warning[disabled].focus, |
|||
fieldset[disabled] .btn-warning.focus, |
|||
.btn-warning.disabled:active, |
|||
.btn-warning[disabled]:active, |
|||
fieldset[disabled] .btn-warning:active, |
|||
.btn-warning.disabled.active, |
|||
.btn-warning[disabled].active, |
|||
fieldset[disabled] .btn-warning.active { |
|||
background-color: #eb9316; |
|||
background-image: none; |
|||
} |
|||
.btn-danger { |
|||
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%); |
|||
background-image: -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a)); |
|||
background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
|||
background-repeat: repeat-x; |
|||
border-color: #b92c28; |
|||
} |
|||
.btn-danger:hover, |
|||
.btn-danger:focus { |
|||
background-color: #c12e2a; |
|||
background-position: 0 -15px; |
|||
} |
|||
.btn-danger:active, |
|||
.btn-danger.active { |
|||
background-color: #c12e2a; |
|||
border-color: #b92c28; |
|||
} |
|||
.btn-danger.disabled, |
|||
.btn-danger[disabled], |
|||
fieldset[disabled] .btn-danger, |
|||
.btn-danger.disabled:hover, |
|||
.btn-danger[disabled]:hover, |
|||
fieldset[disabled] .btn-danger:hover, |
|||
.btn-danger.disabled:focus, |
|||
.btn-danger[disabled]:focus, |
|||
fieldset[disabled] .btn-danger:focus, |
|||
.btn-danger.disabled.focus, |
|||
.btn-danger[disabled].focus, |
|||
fieldset[disabled] .btn-danger.focus, |
|||
.btn-danger.disabled:active, |
|||
.btn-danger[disabled]:active, |
|||
fieldset[disabled] .btn-danger:active, |
|||
.btn-danger.disabled.active, |
|||
.btn-danger[disabled].active, |
|||
fieldset[disabled] .btn-danger.active { |
|||
background-color: #c12e2a; |
|||
background-image: none; |
|||
} |
|||
.thumbnail, |
|||
.img-thumbnail { |
|||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); |
|||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); |
|||
} |
|||
.dropdown-menu > li > a:hover, |
|||
.dropdown-menu > li > a:focus { |
|||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); |
|||
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8)); |
|||
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
background-color: #e8e8e8; |
|||
} |
|||
.dropdown-menu > .active > a, |
|||
.dropdown-menu > .active > a:hover, |
|||
.dropdown-menu > .active > a:focus { |
|||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%); |
|||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4)); |
|||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
background-color: #2e6da4; |
|||
} |
|||
.navbar-default { |
|||
background-image: -webkit-linear-gradient(top, #ffffff 0%, #f8f8f8 100%); |
|||
background-image: -o-linear-gradient(top, #ffffff 0%, #f8f8f8 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f8f8f8)); |
|||
background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
|||
border-radius: 4px; |
|||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075); |
|||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075); |
|||
} |
|||
.navbar-default .navbar-nav > .open > a, |
|||
.navbar-default .navbar-nav > .active > a { |
|||
background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%); |
|||
background-image: -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2)); |
|||
background-image: linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075); |
|||
box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075); |
|||
} |
|||
.navbar-brand, |
|||
.navbar-nav > li > a { |
|||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); |
|||
} |
|||
.navbar-inverse { |
|||
background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%); |
|||
background-image: -o-linear-gradient(top, #3c3c3c 0%, #222 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222)); |
|||
background-image: linear-gradient(to bottom, #3c3c3c 0%, #222 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); |
|||
border-radius: 4px; |
|||
} |
|||
.navbar-inverse .navbar-nav > .open > a, |
|||
.navbar-inverse .navbar-nav > .active > a { |
|||
background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%); |
|||
background-image: -o-linear-gradient(top, #080808 0%, #0f0f0f 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#080808), to(#0f0f0f)); |
|||
background-image: linear-gradient(to bottom, #080808 0%, #0f0f0f 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25); |
|||
box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25); |
|||
} |
|||
.navbar-inverse .navbar-brand, |
|||
.navbar-inverse .navbar-nav > li > a { |
|||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
|||
} |
|||
.navbar-static-top, |
|||
.navbar-fixed-top, |
|||
.navbar-fixed-bottom { |
|||
border-radius: 0; |
|||
} |
|||
@media (max-width: 767px) { |
|||
.navbar .navbar-nav .open .dropdown-menu > .active > a, |
|||
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover, |
|||
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus { |
|||
color: #fff; |
|||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%); |
|||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4)); |
|||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
} |
|||
} |
|||
.alert { |
|||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); |
|||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); |
|||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05); |
|||
} |
|||
.alert-success { |
|||
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%); |
|||
background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc)); |
|||
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
border-color: #b2dba1; |
|||
} |
|||
.alert-info { |
|||
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%); |
|||
background-image: -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0)); |
|||
background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
border-color: #9acfea; |
|||
} |
|||
.alert-warning { |
|||
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%); |
|||
background-image: -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0)); |
|||
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
border-color: #f5e79e; |
|||
} |
|||
.alert-danger { |
|||
background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%); |
|||
background-image: -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3)); |
|||
background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
border-color: #dca7a7; |
|||
} |
|||
.progress { |
|||
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%); |
|||
background-image: -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5)); |
|||
background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
} |
|||
.progress-bar { |
|||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%); |
|||
background-image: -o-linear-gradient(top, #337ab7 0%, #286090 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090)); |
|||
background-image: linear-gradient(to bottom, #337ab7 0%, #286090 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
} |
|||
.progress-bar-success { |
|||
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%); |
|||
background-image: -o-linear-gradient(top, #5cb85c 0%, #449d44 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44)); |
|||
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
} |
|||
.progress-bar-info { |
|||
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%); |
|||
background-image: -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5)); |
|||
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
} |
|||
.progress-bar-warning { |
|||
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%); |
|||
background-image: -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f)); |
|||
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
} |
|||
.progress-bar-danger { |
|||
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%); |
|||
background-image: -o-linear-gradient(top, #d9534f 0%, #c9302c 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c)); |
|||
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
} |
|||
.progress-bar-striped { |
|||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); |
|||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); |
|||
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); |
|||
} |
|||
.list-group { |
|||
border-radius: 4px; |
|||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); |
|||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); |
|||
} |
|||
.list-group-item.active, |
|||
.list-group-item.active:hover, |
|||
.list-group-item.active:focus { |
|||
text-shadow: 0 -1px 0 #286090; |
|||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%); |
|||
background-image: -o-linear-gradient(top, #337ab7 0%, #2b669a 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a)); |
|||
background-image: linear-gradient(to bottom, #337ab7 0%, #2b669a 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
border-color: #2b669a; |
|||
} |
|||
.list-group-item.active .badge, |
|||
.list-group-item.active:hover .badge, |
|||
.list-group-item.active:focus .badge { |
|||
text-shadow: none; |
|||
} |
|||
.panel { |
|||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); |
|||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); |
|||
} |
|||
.panel-default > .panel-heading { |
|||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); |
|||
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8)); |
|||
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
} |
|||
.panel-primary > .panel-heading { |
|||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%); |
|||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4)); |
|||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
} |
|||
.panel-success > .panel-heading { |
|||
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%); |
|||
background-image: -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6)); |
|||
background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
} |
|||
.panel-info > .panel-heading { |
|||
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%); |
|||
background-image: -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3)); |
|||
background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
} |
|||
.panel-warning > .panel-heading { |
|||
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%); |
|||
background-image: -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc)); |
|||
background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
} |
|||
.panel-danger > .panel-heading { |
|||
background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%); |
|||
background-image: -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc)); |
|||
background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
} |
|||
.well { |
|||
background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%); |
|||
background-image: -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%); |
|||
background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5)); |
|||
background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%); |
|||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0); |
|||
background-repeat: repeat-x; |
|||
border-color: #dcdcdc; |
|||
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1); |
|||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1); |
|||
} |
|||
/*# sourceMappingURL=bootstrap-theme.css.map */ |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,13 @@ |
|||
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
|
|||
require('../../js/transition.js') |
|||
require('../../js/alert.js') |
|||
require('../../js/button.js') |
|||
require('../../js/carousel.js') |
|||
require('../../js/collapse.js') |
|||
require('../../js/dropdown.js') |
|||
require('../../js/modal.js') |
|||
require('../../js/tooltip.js') |
|||
require('../../js/popover.js') |
|||
require('../../js/scrollspy.js') |
|||
require('../../js/tab.js') |
|||
require('../../js/affix.js') |
|||
File diff suppressed because it is too large
@ -1,641 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html xmlns:th="http://www.w3.org/1999/xhtml"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>首页三</title> |
|||
<meta name="renderer" content="webkit"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|||
<link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all"> |
|||
<link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"> |
|||
<link rel="stylesheet" href="/static/css/public.css" media="all"> |
|||
<style> |
|||
.top-panel { |
|||
border: 1px solid #eceff9; |
|||
border-radius: 5px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.top-panel > .layui-card-body { |
|||
height: 60px; |
|||
} |
|||
|
|||
.top-panel-number { |
|||
line-height: 60px; |
|||
font-size: 30px; |
|||
border-right: 1px solid #eceff9; |
|||
} |
|||
|
|||
.top-panel-tips { |
|||
line-height: 30px; |
|||
font-size: 12px |
|||
} |
|||
|
|||
|
|||
</style> |
|||
</head> |
|||
<body> |
|||
<!--<div class="layuimini-container">--> |
|||
<div class="layuimini-main"> |
|||
|
|||
<div class="layui-row layui-col-space15"> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">转入物料数量</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|||
<span th:text="${allInCount}"></span> |
|||
</div> |
|||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">转入物料金额</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|||
<span th:text="${allInPrice}"></span> |
|||
</div> |
|||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">购入物料数量</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|||
<span th:text="${InCount}"></span> |
|||
</div> |
|||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">入库物料金额</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|||
<span th:text="${InPrice}"></span> |
|||
</div> |
|||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="layui-collapse" lay-accordion> |
|||
|
|||
<div class="layui-colla-item"> |
|||
<h2 class="layui-colla-title">折线图</h2> |
|||
<div class="layui-colla-content layui-show"> |
|||
<button class="layui-btn" lay-submit lay-filter="thisWeek"> |
|||
 本周  |
|||
</button> |
|||
<button class="layui-btn" lay-submit lay-filter="lastWeek"> |
|||
 上周  |
|||
</button> |
|||
<div id="echarts-records" style="background-color:#ffffff;min-height:1000px;padding: 10px"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="layui-colla-item"> |
|||
<h2 class="layui-colla-title">饼图</h2> |
|||
<div class="layui-colla-content layui-show"> |
|||
<div id="echarts-pies" style="background-color:#ffffff;min-height:1000px;padding: 10px"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="layui-colla-item"> |
|||
<h2 class="layui-colla-title">柱状图</h2> |
|||
<div class="layui-colla-content layui-show"> |
|||
<div id="echarts-dataset" style="background-color:#ffffff;min-height:1000px;padding: 10px"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="layui-colla-item"> |
|||
<h2 class="layui-colla-title">折线比例图</h2> |
|||
<div class="layui-colla-content layui-show"> |
|||
<div id="echarts-map" style="background-color:#ffffff;min-height:1000px;padding: 10px"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
<!--</div>--> |
|||
|
|||
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> |
|||
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script> |
|||
<script> |
|||
layui.use(['layer', 'echarts', 'element'], function () { |
|||
var $ = layui.jquery, |
|||
layer = layui.layer, |
|||
echarts = layui.echarts, |
|||
element = layui.element, |
|||
form = layui.form; |
|||
/** |
|||
* 折线图 |
|||
*/ |
|||
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden'); |
|||
|
|||
var optionRecords = { |
|||
title: { |
|||
text: '入库仓库-报表图', |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: [] |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: [] |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
name: '北京仓库', |
|||
type: 'line', |
|||
stack: '金额', |
|||
label: { |
|||
normal: { |
|||
show: true, |
|||
position: 'top' |
|||
} |
|||
}, |
|||
areaStyle: {}, |
|||
data: [] |
|||
} |
|||
] |
|||
}; |
|||
|
|||
/** |
|||
* 玫瑰图表 |
|||
*/ |
|||
var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden'); |
|||
var optionPies = { |
|||
title: { |
|||
text: '仓库分布图', |
|||
left: 'center' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|||
}, |
|||
legend: { |
|||
orient: 'vertical', |
|||
left: 'left', |
|||
data: [] |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '昨日占比', |
|||
type: 'pie', |
|||
radius: '55%', |
|||
center: ['50%', '60%'], |
|||
roseType: 'radius', |
|||
data: [ |
|||
{value: 335, name: '外芯仓库'}, |
|||
{value: 310, name: '义乌仓库'}, |
|||
{value: 234, name: '宁波仓库'}, |
|||
{value: 135, name: '杭州仓库'}, |
|||
{value: 368, name: '北京仓库'} |
|||
], |
|||
emphasis: { |
|||
itemStyle: { |
|||
shadowBlur: 10, |
|||
shadowOffsetX: 0, |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
|
|||
/** |
|||
* 柱状图 |
|||
*/ |
|||
var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden'); |
|||
var optionDataset = { |
|||
legend: {}, |
|||
tooltip: {}, |
|||
dataset: { |
|||
dimensions: [], |
|||
source: [] |
|||
}, |
|||
xAxis: {type: 'category'}, |
|||
yAxis: {}, |
|||
series: [ |
|||
{type: 'bar'}, |
|||
{type: 'bar'}, |
|||
{type: 'bar'} |
|||
] |
|||
}; |
|||
|
|||
|
|||
/** |
|||
* 中国地图 |
|||
*/ |
|||
var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden'); |
|||
var optionMap = { |
|||
legend: {}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
showContent: true |
|||
}, |
|||
dataset: { |
|||
source: [] |
|||
}, |
|||
xAxis: {type: 'category'}, |
|||
yAxis: {gridIndex: 0}, |
|||
grid: {top: '55%'}, |
|||
series: [] |
|||
}; |
|||
|
|||
|
|||
//动态加载相关数据 |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back?type=1', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
complete: function (XHR, TS) { |
|||
if (XHR.status !== 200) { |
|||
layer.alert("系统繁忙,稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
if (result.code === 0) { |
|||
|
|||
echartsRecords.setOption(optionRecords); |
|||
echartsPies.setOption(optionPies); |
|||
echartsDataset.setOption(optionDataset); |
|||
echartsMap.setOption(optionMap); |
|||
// 折线图 |
|||
var optionRecordsSeries = []; |
|||
// 饼状图 |
|||
var optionPiesSeries = { |
|||
name: '昨日占比', |
|||
type: 'pie', |
|||
radius: '55%', |
|||
center: ['50%', '60%'], |
|||
roseType: 'radius', |
|||
emphasis: { |
|||
itemStyle: { |
|||
shadowBlur: 10, |
|||
shadowOffsetX: 0, |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
} |
|||
}, |
|||
data: [] |
|||
}; |
|||
// 柱状图 |
|||
optionDataset = { |
|||
legend: {}, |
|||
tooltip: {}, |
|||
dataset: { |
|||
dimensions: [], |
|||
source: [] |
|||
}, |
|||
xAxis: {type: 'category'}, |
|||
yAxis: {}, |
|||
series: [] |
|||
}; |
|||
for (let i = 0; i < result.data.depository_name.length; i++) { |
|||
optionRecordsSeries.push({ |
|||
name: result.data.depository_name[i], |
|||
type: 'line', |
|||
stack: '金额', |
|||
data: result.data.depository_data.data[result.data.depository_name[i]], |
|||
areaStyle: {} |
|||
}); |
|||
optionPiesSeries.data.push({ |
|||
value: result.data.depository_data.yesterdayData[result.data.depository_name[i]], |
|||
name: result.data.depository_name[i] |
|||
}) |
|||
} |
|||
var dimensions = result.data.depository_data.sourceList[result.data.depository_data.sourceList.length - 1] |
|||
optionDataset.dataset.dimensions = dimensions; |
|||
|
|||
for (let i = result.data.depository_data.sourceList.length - 2; i >= 0; i--) { |
|||
optionDataset.dataset.source.push(result.data.depository_data.sourceList[i]) |
|||
} |
|||
for (let i = 0; i < dimensions.length - 1; i++) { |
|||
optionDataset.series.push({type: 'bar'}) |
|||
} |
|||
|
|||
|
|||
for (let i = 0; i < result.data.depository_data.mapData.mapDataList.length; i++) { |
|||
optionMap.dataset.source.push(result.data.depository_data.mapData.mapDataList[i]); |
|||
if (i < result.data.depository_data.mapData.mapDataList.length - 1) { |
|||
optionMap.series.push({type: 'line', smooth: true, seriesLayoutBy: 'row'}) |
|||
} |
|||
} |
|||
|
|||
|
|||
var month = new Date().getMonth() + 1; |
|||
|
|||
optionMap.series.push( |
|||
{ |
|||
type: 'pie', |
|||
// id: 'pie', |
|||
radius: '30%', |
|||
center: ['50%', '25%'], |
|||
label: { |
|||
formatter: '{b}: {@' + month + '月} ({d}%)' |
|||
}, |
|||
encode: { |
|||
itemName: 'product', |
|||
value: month + '月', |
|||
tooltip: month + '月' |
|||
} |
|||
} |
|||
); |
|||
optionRecords = { |
|||
title: { |
|||
text: '入库仓库-报表图' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: result.data.depository_name |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: result.data.depository_data.week |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: optionRecordsSeries |
|||
}; |
|||
optionPies = { |
|||
title: { |
|||
text: '仓库分布图', |
|||
left: 'center' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|||
}, |
|||
legend: { |
|||
orient: 'vertical', |
|||
left: 'left', |
|||
data: result.data.depository_name |
|||
}, |
|||
series: optionPiesSeries |
|||
}; |
|||
|
|||
echartsRecords.setOption(optionRecords); |
|||
echartsPies.setOption(optionPies); |
|||
echartsDataset.setOption(optionDataset); |
|||
echartsMap.setOption(optionMap); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
|
|||
// echarts 窗口缩放自适应 |
|||
window.onresize = function () { |
|||
echartsRecords.resize(); |
|||
}; |
|||
|
|||
form.on('submit(thisWeek)', function () { |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back_thisWeek?type=1', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
|
|||
complete: function (XHR, TS) { |
|||
if (XHR.status != 200) { |
|||
layer.alert("系统繁忙,稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
echartsRecords.setOption(optionRecords); |
|||
// 折线图 |
|||
var optionRecordsSeries = []; |
|||
for (let i = 0; i < result.depository_name.length; i++) { |
|||
optionRecordsSeries.push({ |
|||
name: result.depository_name[i], |
|||
type: 'line', |
|||
stack: '金额', |
|||
data: result.data[result.depository_name[i]], |
|||
areaStyle: {} |
|||
}); |
|||
} |
|||
optionRecords = { |
|||
title: { |
|||
text: '入库仓库-报表图' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: result.depository_name |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: result.week |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: optionRecordsSeries |
|||
}; |
|||
echartsRecords.setOption(optionRecords); |
|||
} |
|||
}) |
|||
}); |
|||
|
|||
form.on('submit(lastWeek)', function () { |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back_lastWeek?type=1', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
complete: function (XHR, TS) { |
|||
if (XHR.status !== 200) { |
|||
layer.alert("系统繁忙,稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
echartsRecords.setOption(optionRecords); |
|||
// 折线图 |
|||
var optionRecordsSeries = []; |
|||
for (let i = 0; i < result.depository_name.length; i++) { |
|||
optionRecordsSeries.push({ |
|||
name: result.depository_name[i], |
|||
type: 'line', |
|||
stack: '金额', |
|||
data: result.data[result.depository_name[i]], |
|||
areaStyle: {} |
|||
}); |
|||
} |
|||
optionRecords = { |
|||
title: { |
|||
text: '入库仓库-报表图' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: result.depository_name |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: result.week |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: optionRecordsSeries |
|||
}; |
|||
echartsRecords.setOption(optionRecords); |
|||
} |
|||
}) |
|||
}) |
|||
}); |
|||
|
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,303 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en" xmlns:th="http://www.thymeleaf.org"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>首页三</title> |
|||
<meta name="renderer" content="webkit"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|||
<link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all"> |
|||
<link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"> |
|||
<link rel="stylesheet" href="/static/lib/bootstrap-3.4.1-dist/css/bootstrap.min.css" media="all"> |
|||
<link rel="stylesheet" href="/static/css/public.css" media="all"> |
|||
|
|||
<style> |
|||
.top-panel { |
|||
border: 1px solid #eceff9; |
|||
border-radius: 5px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.top-panel-number { |
|||
line-height: 60px; |
|||
font-size: 30px; |
|||
border-right: 1px solid #eceff9; |
|||
} |
|||
|
|||
.top-panel-tips { |
|||
line-height: 30px; |
|||
font-size: 12px |
|||
} |
|||
|
|||
|
|||
</style> |
|||
</head> |
|||
<body> |
|||
<!--<div class="layuimini-container">--> |
|||
<div class="layuimini-main"> |
|||
|
|||
|
|||
<div class="layui-row layui-col-space15"> |
|||
|
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">当日入库物料</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs6 layui-col-md6 top-panel-number"> |
|||
<div class="layui-card-header">数量</div> |
|||
<span th:text="${InCount}"></span> |
|||
</div> |
|||
<div class="layui-col-xs6 layui-col-md6 top-panel-number"> |
|||
<div class="layui-card-header">金额</div> |
|||
<span th:text="${InPrice}"></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">全部入库物料</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs6 layui-col-md6 top-panel-number"> |
|||
<div class="layui-card-header">数量</div> |
|||
<span th:text="${allInCount}"></span> |
|||
</div> |
|||
<div class="layui-col-xs6 layui-col-md6 top-panel-number"> |
|||
<div class="layui-card-header">金额</div> |
|||
<span th:text="${allInPrice}"></span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
|
|||
</div> |
|||
|
|||
<div class="layui-collapse" lay-accordion> |
|||
|
|||
<div class="layui-colla-item"> |
|||
<h2 class="layui-colla-title">面积图</h2> |
|||
<div class="layui-colla-content layui-show"> |
|||
<button class="layui-btn" lay-submit lay-filter="thisWeek"> |
|||
 本周  |
|||
</button> |
|||
<button class="layui-btn" lay-submit lay-filter="lastWeek"> |
|||
 上周  |
|||
</button> |
|||
<select id="selectDepositoryForChart" class="form-control"> |
|||
|
|||
</select> |
|||
<div id="echarts-line" style="background-color:#ffffff;padding: 10px;height: 400px"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="layui-colla-item"> |
|||
<h2 class="layui-colla-title">旭日图</h2> |
|||
<div class="layui-colla-content layui-show"> |
|||
<div id="echarts-sunburst-chart" style="background-color:#ffffff;padding: 10px;height:400px;"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
<!--</div>--> |
|||
|
|||
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> |
|||
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script> |
|||
<script src="/static/lib/echarts/echarts.js" charset="utf-8"></script> |
|||
<script> |
|||
layui.use(['layer', 'element'], function () { |
|||
var $ = layui.jquery, |
|||
layer = layui.layer, |
|||
element = layui.element, |
|||
form = layui.form; |
|||
|
|||
// 旭日图 |
|||
var echartSunburstChart = echarts.init(document.getElementById('echarts-sunburst-chart')); |
|||
var optionSunburstChart = { |
|||
title: { |
|||
textStyle: { |
|||
fontSize: 14, |
|||
align: 'center' |
|||
}, |
|||
subtextStyle: { |
|||
align: 'center' |
|||
}, |
|||
}, |
|||
series: { |
|||
type: 'sunburst', |
|||
data: [], |
|||
radius: [0, '95%'], |
|||
sort: undefined, |
|||
emphasis: { |
|||
focus: 'ancestor' |
|||
}, |
|||
center:['50%','50%'], |
|||
levels: [ |
|||
{}, |
|||
{ |
|||
r0: '15%', |
|||
r: '35%', |
|||
itemStyle: { |
|||
borderWidth: 2 |
|||
}, |
|||
label: { |
|||
rotate: 'tangential' |
|||
} |
|||
}, |
|||
{ |
|||
r0: '35%', |
|||
r: '70%', |
|||
label: { |
|||
align: 'right' |
|||
} |
|||
}, |
|||
{ |
|||
r0: '70%', |
|||
r: '72%', |
|||
label: { |
|||
position: 'outside', |
|||
padding: 3, |
|||
silent: false |
|||
}, |
|||
itemStyle: { |
|||
borderWidth: 3 |
|||
} |
|||
} |
|||
] |
|||
} |
|||
}; |
|||
|
|||
|
|||
let LineChartData = {}; |
|||
|
|||
// 柱状图 |
|||
var echartLineChart = echarts.init(document.getElementById('echarts-line')); |
|||
var optionLineChart = { |
|||
xAxis: { |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: [] |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
}, |
|||
series: [] |
|||
|
|||
}; |
|||
|
|||
|
|||
|
|||
//动态加载相关数据 |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back?type=1', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
complete: function (XHR, TS) { |
|||
if (XHR.status !== 200) { |
|||
layer.alert("系统繁忙,稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
|
|||
if (result.code === 0) { |
|||
let data = result.data; |
|||
|
|||
let depositoryItem = data.depository; |
|||
let keys = Object.keys(depositoryItem); |
|||
for (let i = 0; i < keys.length; i++) { |
|||
let key = keys[i]; |
|||
$("#selectDepositoryForChart").append(new Option(key,depositoryItem[key])); |
|||
} |
|||
|
|||
|
|||
optionSunburstChart.series.data =data.depository_data.sunburstChartData; |
|||
echartSunburstChart.setOption(optionSunburstChart); |
|||
|
|||
|
|||
LineChartData = data.depository_data.lineChartData; |
|||
optionLineChart.series = LineChartData[depositoryItem[keys[0]]]; |
|||
optionLineChart.xAxis.data = data.depository_data.week; |
|||
echartLineChart.setOption(optionLineChart); |
|||
} |
|||
|
|||
} |
|||
}); |
|||
|
|||
|
|||
form.on('submit(thisWeek)', function () { |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back_thisWeek?type=1', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
complete: function (XHR, TS) { |
|||
if (XHR.status !== 200) { |
|||
layer.alert("系统繁忙,稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
LineChartData = result.data; |
|||
let value = $("#selectDepositoryForChart").val(); |
|||
optionLineChart.series = LineChartData[value]; |
|||
echartLineChart.setOption(optionLineChart); |
|||
} |
|||
}) |
|||
}); |
|||
|
|||
form.on('submit(lastWeek)', function () { |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back_lastWeek?type=1', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
complete: function (XHR, TS) { |
|||
if (XHR.status !== 200) { |
|||
layer.alert("系统繁忙,稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
LineChartData = result.data; |
|||
let value = $("#selectDepositoryForChart").val(); |
|||
optionLineChart.series = LineChartData[value]; |
|||
echartLineChart.setOption(optionLineChart); |
|||
} |
|||
}) |
|||
}); |
|||
|
|||
$('#selectDepositoryForChart').on('change', function (obj) { |
|||
let value = obj.target.value; |
|||
optionLineChart.series = LineChartData[value]; |
|||
echartLineChart.setOption(optionLineChart); |
|||
}); |
|||
|
|||
|
|||
|
|||
}); |
|||
|
|||
</script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,175 @@ |
|||
package com.dreamchaser.depository_manage; |
|||
|
|||
import com.alibaba.fastjson.JSONObject; |
|||
import com.dreamchaser.depository_manage.entity.MaterialType; |
|||
import com.dreamchaser.depository_manage.entity.UserByPort; |
|||
import com.dreamchaser.depository_manage.service.DepositoryRecordService; |
|||
import com.dreamchaser.depository_manage.service.DepositoryService; |
|||
import com.dreamchaser.depository_manage.service.MaterialService; |
|||
import com.dreamchaser.depository_manage.service.MaterialTypeService; |
|||
import com.dreamchaser.depository_manage.utils.DateUtil; |
|||
import com.dreamchaser.depository_manage.utils.LinkInterfaceUtil; |
|||
import com.dreamchaser.depository_manage.utils.ObjectFormatUtil; |
|||
import lombok.Data; |
|||
import org.junit.Test; |
|||
import org.junit.runner.RunWith; |
|||
import org.springframework.beans.factory.annotation.Autowired; |
|||
import org.springframework.boot.test.context.SpringBootTest; |
|||
import org.springframework.test.context.junit4.SpringRunner; |
|||
|
|||
import java.text.SimpleDateFormat; |
|||
import java.util.*; |
|||
import java.util.concurrent.*; |
|||
|
|||
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT) |
|||
@RunWith(SpringRunner.class) |
|||
public class LineChartTest { |
|||
|
|||
|
|||
@Autowired |
|||
MaterialTypeService materialTypeService; |
|||
|
|||
@Autowired |
|||
DepositoryRecordService depositoryRecordService; |
|||
|
|||
@Autowired |
|||
MaterialService materialService; |
|||
|
|||
@Autowired |
|||
DepositoryService depositoryService; |
|||
|
|||
/** |
|||
* 获取本月之前的月份 |
|||
* |
|||
* @return |
|||
*/ |
|||
public static Map<String, Object> getPreviousMonth() { |
|||
Calendar instance = Calendar.getInstance(); |
|||
SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM"); |
|||
Map<String, Object> source = new HashMap<>(); |
|||
List<Object> sourceList = new ArrayList<>(); |
|||
int month = instance.get(Calendar.MONTH) + 1; |
|||
// 获取下个月
|
|||
instance.add(Calendar.MONTH, 1); |
|||
Long nextMonth = DateUtil.DateTimeByMonthToTimeStamp(formatter.format(instance.getTime())); |
|||
ArrayList<Object> months = new ArrayList<>(); |
|||
months.add(nextMonth); |
|||
instance.add(Calendar.MONTH, -1); |
|||
|
|||
while (month > 0) { |
|||
instance.set(Calendar.MONTH, month); |
|||
instance.set(Calendar.DAY_OF_MONTH, -1); |
|||
source.put("month", month + "月"); |
|||
months.add(DateUtil.DateTimeByMonthToTimeStamp(formatter.format(instance.getTime()))); |
|||
month--; |
|||
sourceList.add(((HashMap<String, Object>) source).clone()); |
|||
} |
|||
instance.set(Calendar.MONTH, month); |
|||
instance.add(Calendar.MONTH, 1); |
|||
Map<String, Object> map = new HashMap<>(); |
|||
map.put("months", months); |
|||
map.put("sourceList", sourceList); |
|||
return map; |
|||
} |
|||
|
|||
@Test |
|||
public void main() { |
|||
UserByPort userByPort = LinkInterfaceUtil.FindUserById(1257, null); |
|||
Map<String, Integer> depositoryAllNameAndId = depositoryService.findDepositoryAllNameAndId(userByPort); |
|||
Map<Object, Object> barChartData = getBarChartData(depositoryAllNameAndId, "1"); |
|||
System.out.println(JSONObject.toJSONString(barChartData)); |
|||
} |
|||
|
|||
// 获取柱状图数据
|
|||
public Map<Object,Object> getBarChartData(Map<String, Integer> depositoryAllNameAndId, String type) { |
|||
|
|||
// 获取遍历器
|
|||
Iterator it = depositoryAllNameAndId.keySet().iterator(); |
|||
//获取获取系统的当前日历对象
|
|||
Calendar instance = Calendar.getInstance(); |
|||
// 获取日期
|
|||
SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd"); |
|||
int now = instance.get(Calendar.DAY_OF_WEEK) - 1 == 0 ? 7 : instance.get(Calendar.DAY_OF_WEEK) - 1; |
|||
List<Long> days = new ArrayList<>(); // 周一至今的每天
|
|||
instance.add(Calendar.DATE, 1); |
|||
days.add(DateUtil.DateTimeByDayToTimeStamp(formatter.format(instance.getTime()))); |
|||
instance.add(Calendar.DATE, -1); |
|||
days.add(DateUtil.DateTimeByDayToTimeStamp(formatter.format(instance.getTime()))); |
|||
while (now - 1 > 0) { |
|||
now--; |
|||
instance.add(Calendar.DATE, -1); |
|||
Long format = DateUtil.DateTimeByDayToTimeStamp(formatter.format(instance.getTime())); |
|||
days.add(format); |
|||
} |
|||
// 定义线程
|
|||
ExecutorService exs = Executors.newFixedThreadPool(depositoryAllNameAndId.size()); |
|||
// 结果集
|
|||
List<Future<Object>> futureList = new ArrayList<Future<Object>>(); |
|||
// 1.定义CompletionService
|
|||
CompletionService<Object> completionService = new ExecutorCompletionService<Object>(exs); |
|||
|
|||
// 每天各仓库入库数目
|
|||
Map<Object,Object> show_data = new HashMap<>(); |
|||
while (it.hasNext()) { |
|||
Object next = it.next(); |
|||
getApplicationRecordByDate getApplicationRecordByDate = new getApplicationRecordByDate(type, next.toString(), days, depositoryAllNameAndId); |
|||
Future<Object> future = completionService.submit(getApplicationRecordByDate); |
|||
futureList.add(future); |
|||
} |
|||
|
|||
for (int i = 0; i < depositoryAllNameAndId.size(); i++) { |
|||
Object result = null; |
|||
try { |
|||
result = completionService.take().get(); |
|||
} catch (InterruptedException | ExecutionException e) { |
|||
e.printStackTrace(); |
|||
} |
|||
show_data.putAll((Map<?, ?>) result); |
|||
} |
|||
|
|||
return show_data; |
|||
} |
|||
|
|||
/** |
|||
* 根据日期获取出入库的数量 |
|||
*/ |
|||
@Data |
|||
class getApplicationRecordByDate implements Callable<Object> { |
|||
String key; |
|||
List<Long> days; |
|||
Map<String, Integer> depositoryAllNameAndId; |
|||
|
|||
|
|||
String type; |
|||
|
|||
|
|||
getApplicationRecordByDate(String type, String key, List<Long> days, Map<String, Integer> depositoryAllNameAndId) { |
|||
this.key = key; |
|||
this.depositoryAllNameAndId = depositoryAllNameAndId; |
|||
this.days = days; |
|||
this.type = type; |
|||
} |
|||
|
|||
@Override |
|||
public Object call() throws Exception { |
|||
Map<Integer, Object> result = new HashMap<>(); |
|||
Map<String, Object> map = new HashMap<>(); |
|||
map.put("type", "line"); |
|||
Map<String, Object> areaStyleItem = new HashMap<>(); |
|||
map.put("areaStyle", areaStyleItem); |
|||
int i; |
|||
List<Double> drCountbyDrName = new ArrayList<>(); |
|||
|
|||
Integer val = (Integer) depositoryAllNameAndId.get(key); |
|||
for (i = days.size() - 1; i > 0; i--) { |
|||
// 遍历 Map并计算各仓库的入库数
|
|||
// 获取一段时间内的库存额度
|
|||
Double depositoryRecordByDate1 = depositoryRecordService.findApplicationRecordByDate(days.get(i - 1), days.get(i), Integer.parseInt(type), val); |
|||
drCountbyDrName.add(depositoryRecordByDate1); |
|||
} |
|||
map.put("data", drCountbyDrName); |
|||
result.put(val,map); |
|||
return result; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,224 @@ |
|||
package com.dreamchaser.depository_manage; |
|||
|
|||
import com.alibaba.fastjson.JSONObject; |
|||
import com.dreamchaser.depository_manage.entity.MaterialType; |
|||
import com.dreamchaser.depository_manage.service.DepositoryRecordService; |
|||
import com.dreamchaser.depository_manage.service.MaterialService; |
|||
import com.dreamchaser.depository_manage.service.MaterialTypeService; |
|||
import com.dreamchaser.depository_manage.utils.DateUtil; |
|||
import com.dreamchaser.depository_manage.utils.ObjectFormatUtil; |
|||
import org.junit.Test; |
|||
import org.junit.runner.RunWith; |
|||
import org.springframework.beans.factory.annotation.Autowired; |
|||
import org.springframework.boot.test.context.SpringBootTest; |
|||
import org.springframework.test.context.junit4.SpringRunner; |
|||
|
|||
import java.text.SimpleDateFormat; |
|||
import java.util.*; |
|||
import java.util.concurrent.*; |
|||
|
|||
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT) |
|||
@RunWith(SpringRunner.class) |
|||
public class SunburstChartTest { |
|||
|
|||
|
|||
@Autowired |
|||
MaterialTypeService materialTypeService; |
|||
|
|||
@Autowired |
|||
DepositoryRecordService depositoryRecordService; |
|||
|
|||
@Autowired |
|||
MaterialService materialService; |
|||
|
|||
|
|||
|
|||
|
|||
@Test |
|||
public void main(){ |
|||
String type = "1"; |
|||
// 获取本月之前的月份
|
|||
Map<String, Object> previousMonth = getPreviousMonth(); |
|||
// 获取月份的时间戳
|
|||
List<Object> months = (List<Object>) previousMonth.get("months"); |
|||
// 获取月份名称
|
|||
List<Object> sourceList = (List<Object>) previousMonth.get("sourceList"); |
|||
// 结果集
|
|||
List<Future<Object>> futureList = new ArrayList<Future<Object>>(); |
|||
ExecutorService exs = Executors.newFixedThreadPool(months.size()); |
|||
// 1.定义CompletionService
|
|||
CompletionService<Object> completionService = new ExecutorCompletionService<Object>(exs); |
|||
for (int num = 0; num < months.size() - 1; num++) { |
|||
Map<String, Object> map = (Map<String, Object>) sourceList.get(num); |
|||
Future<Object> future = completionService.submit(new getSourceListTask(map,type, months.get(num + 1).toString(), months.get(num).toString())); |
|||
futureList.add(future); |
|||
} |
|||
List<Object> result = new ArrayList<>(); |
|||
for (int i = 0; i < months.size() - 1; i++) { |
|||
Object obj = null; |
|||
try { |
|||
obj = completionService.take().get(); |
|||
} catch (InterruptedException | ExecutionException e) { |
|||
e.printStackTrace(); |
|||
} |
|||
result.add(obj); |
|||
} |
|||
// 用于返回结果
|
|||
System.out.println(JSONObject.toJSONString(result)); |
|||
|
|||
} |
|||
|
|||
// 具体执行getSourceList逻辑
|
|||
class getSourceListTask implements Callable<Object> { |
|||
|
|||
String type; |
|||
String start; |
|||
String end; |
|||
Map<String,Object> map; |
|||
|
|||
getSourceListTask(Map<String,Object> map, String type, String start, String end) { |
|||
this.map = map; |
|||
this.type = type; |
|||
this.start = start; |
|||
this.end = end; |
|||
} |
|||
|
|||
@Override |
|||
public Object call() throws Exception { |
|||
List<MaterialType> materialTypeAll = materialTypeService.findMaterialTypeNoParent(); |
|||
ExecutorService exs = Executors.newFixedThreadPool(materialTypeAll.size()); |
|||
// 结果集
|
|||
List<Future<Object>> futureList = new ArrayList<Future<Object>>(); |
|||
// 1.定义CompletionService
|
|||
CompletionService<Object> completionService = new ExecutorCompletionService<Object>(exs); |
|||
|
|||
List<Object> result = new ArrayList<>(); |
|||
for (MaterialType materialType : materialTypeAll) { |
|||
// 测试
|
|||
Future<Object> future = completionService.submit(new findMaterialCountTaskForSourceList(type,start,end,materialType.getOldId())); |
|||
futureList.add(future); |
|||
} |
|||
double sum = 0.0; |
|||
for (int i = 0; i < materialTypeAll.size(); i++) { |
|||
Object obj = null; |
|||
try { |
|||
obj = completionService.take().get(); |
|||
} catch (InterruptedException e) { |
|||
e.printStackTrace(); |
|||
} catch (ExecutionException e) { |
|||
e.printStackTrace(); |
|||
} |
|||
result.add(obj); |
|||
sum+=ObjectFormatUtil.toDouble(((Map<String,Object>)obj).get("value")); |
|||
} |
|||
map.put("children",result); |
|||
map.put("name",map.get("month")); |
|||
map.remove("month"); |
|||
map.put("value",sum); |
|||
// 用于生产随机的颜色
|
|||
Random random = new Random(); |
|||
Map<String,String> itemStyle = new HashMap<>(); |
|||
int r = random.nextInt(256); |
|||
int g = random.nextInt(256); |
|||
int b = random.nextInt(256); |
|||
itemStyle.put("color","rgb("+r+","+g+","+b+")"); |
|||
map.put("itemStyle",itemStyle); |
|||
return map; |
|||
} |
|||
} |
|||
|
|||
// 根据条件获取月份中物料的总额用于sourcelist
|
|||
class findMaterialCountTaskForSourceList implements Callable<Object> { |
|||
|
|||
|
|||
String type; |
|||
String start; |
|||
String end; |
|||
Long oldId; |
|||
|
|||
public findMaterialCountTaskForSourceList(String type, String start, String end,Long oldId) { |
|||
this.type = type; |
|||
this.start = start; |
|||
this.end = end; |
|||
this.oldId = oldId; |
|||
} |
|||
|
|||
@Override |
|||
public Object call() throws Exception { |
|||
Map<String, Object> map = new HashMap<>(); |
|||
map.put("type", Integer.parseInt(type)); |
|||
if (Integer.parseInt(type) == 1) { |
|||
map.put("state", "已入库"); |
|||
} else if (Integer.parseInt(type) == 2) { |
|||
map.put("state", "已出库"); |
|||
} |
|||
map.put("start", start); |
|||
map.put("end", end); |
|||
map.put("oldId", oldId); |
|||
Map<String, Object> result = new HashMap<>(); |
|||
Double materialCountByMonth1 = depositoryRecordService.calMaterialTypeTopCount(map); |
|||
MaterialType materialTypeByOldId = materialTypeService.findMaterialTypeByOldId(oldId); |
|||
result.put("name",materialTypeByOldId.getTname()); |
|||
result.put("value",materialCountByMonth1); |
|||
Map<String,String> itemStyle = new HashMap<>(); |
|||
// 用于生产随机的颜色
|
|||
Random random = new Random(); |
|||
int r = random.nextInt(256); |
|||
int g = random.nextInt(256); |
|||
int b = random.nextInt(256); |
|||
itemStyle.put("color","rgb("+r+","+g+","+b+")"); |
|||
result.put("itemStyle",itemStyle); |
|||
return result; |
|||
} |
|||
} |
|||
|
|||
public List<Long> findChildForMaterialTypeByParent(MaterialType mt) { |
|||
List<Long> result = new ArrayList<>(); |
|||
result.add(mt.getOldId()); |
|||
List<Long> parentId = new ArrayList<>(); |
|||
parentId.add(mt.getOldId()); |
|||
List<MaterialType> materialTypeAll = materialTypeService.findMaterialTypeAll(); |
|||
for (MaterialType materialType : materialTypeAll) { |
|||
if (parentId.contains(materialType.getParentId())) { |
|||
parentId.add(materialType.getOldId()); |
|||
result.add(materialType.getOldId()); |
|||
} |
|||
} |
|||
return result; |
|||
} |
|||
|
|||
|
|||
/** |
|||
* 获取本月之前的月份 |
|||
* |
|||
* @return |
|||
*/ |
|||
public static Map<String, Object> getPreviousMonth() { |
|||
Calendar instance = Calendar.getInstance(); |
|||
SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM"); |
|||
Map<String, Object> source = new HashMap<>(); |
|||
List<Object> sourceList = new ArrayList<>(); |
|||
int month = instance.get(Calendar.MONTH) + 1; |
|||
// 获取下个月
|
|||
instance.add(Calendar.MONTH, 1); |
|||
Long nextMonth = DateUtil.DateTimeByMonthToTimeStamp(formatter.format(instance.getTime())); |
|||
ArrayList<Object> months = new ArrayList<>(); |
|||
months.add(nextMonth); |
|||
instance.add(Calendar.MONTH, -1); |
|||
|
|||
while (month > 0) { |
|||
instance.set(Calendar.MONTH, month); |
|||
instance.set(Calendar.DAY_OF_MONTH, -1); |
|||
source.put("month", month + "月"); |
|||
months.add(DateUtil.DateTimeByMonthToTimeStamp(formatter.format(instance.getTime()))); |
|||
month--; |
|||
sourceList.add(((HashMap<String, Object>) source).clone()); |
|||
} |
|||
instance.set(Calendar.MONTH, month); |
|||
instance.add(Calendar.MONTH, 1); |
|||
Map<String, Object> map = new HashMap<>(); |
|||
map.put("months", months); |
|||
map.put("sourceList", sourceList); |
|||
return map; |
|||
} |
|||
} |
|||
File diff suppressed because it is too large
@ -1,492 +0,0 @@ |
|||
layui.define(function (exports) { |
|||
exports('echartsTheme', |
|||
{ |
|||
"color": [ |
|||
"#3fb1e3", |
|||
"#6be6c1", |
|||
"#626c91", |
|||
"#a0a7e6", |
|||
"#c4ebad", |
|||
"#96dee8" |
|||
], |
|||
"backgroundColor": "rgba(252,252,252,0)", |
|||
"textStyle": {}, |
|||
"title": { |
|||
"textStyle": { |
|||
"color": "#666666" |
|||
}, |
|||
"subtextStyle": { |
|||
"color": "#999999" |
|||
} |
|||
}, |
|||
"line": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": "3" |
|||
} |
|||
}, |
|||
"lineStyle": { |
|||
"normal": { |
|||
"width": "4" |
|||
} |
|||
}, |
|||
"symbolSize": "10", |
|||
"symbol": "emptyCircle", |
|||
"smooth": true |
|||
}, |
|||
"radar": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": "3" |
|||
} |
|||
}, |
|||
"lineStyle": { |
|||
"normal": { |
|||
"width": "4" |
|||
} |
|||
}, |
|||
"symbolSize": "10", |
|||
"symbol": "emptyCircle", |
|||
"smooth": true |
|||
}, |
|||
"bar": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"barBorderWidth": 0, |
|||
"barBorderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"barBorderWidth": 0, |
|||
"barBorderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"pie": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"scatter": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"boxplot": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"parallel": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"sankey": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"funnel": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"gauge": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"candlestick": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"color": "#e6a0d2", |
|||
"color0": "transparent", |
|||
"borderColor": "#e6a0d2", |
|||
"borderColor0": "#3fb1e3", |
|||
"borderWidth": "2" |
|||
} |
|||
} |
|||
}, |
|||
"graph": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
}, |
|||
"lineStyle": { |
|||
"normal": { |
|||
"width": "1", |
|||
"color": "#cccccc" |
|||
} |
|||
}, |
|||
"symbolSize": "10", |
|||
"symbol": "emptyCircle", |
|||
"smooth": true, |
|||
"color": [ |
|||
"#3fb1e3", |
|||
"#6be6c1", |
|||
"#626c91", |
|||
"#a0a7e6", |
|||
"#c4ebad", |
|||
"#96dee8" |
|||
], |
|||
"label": { |
|||
"normal": { |
|||
"textStyle": { |
|||
"color": "#ffffff" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
"map": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"areaColor": "#eeeeee", |
|||
"borderColor": "#aaaaaa", |
|||
"borderWidth": 0.5 |
|||
}, |
|||
"emphasis": { |
|||
"areaColor": "rgba(63,177,227,0.25)", |
|||
"borderColor": "#3fb1e3", |
|||
"borderWidth": 1 |
|||
} |
|||
}, |
|||
"label": { |
|||
"normal": { |
|||
"textStyle": { |
|||
"color": "#ffffff" |
|||
} |
|||
}, |
|||
"emphasis": { |
|||
"textStyle": { |
|||
"color": "rgb(63,177,227)" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
"geo": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"areaColor": "#eeeeee", |
|||
"borderColor": "#aaaaaa", |
|||
"borderWidth": 0.5 |
|||
}, |
|||
"emphasis": { |
|||
"areaColor": "rgba(63,177,227,0.25)", |
|||
"borderColor": "#3fb1e3", |
|||
"borderWidth": 1 |
|||
} |
|||
}, |
|||
"label": { |
|||
"normal": { |
|||
"textStyle": { |
|||
"color": "#ffffff" |
|||
} |
|||
}, |
|||
"emphasis": { |
|||
"textStyle": { |
|||
"color": "rgb(63,177,227)" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
"categoryAxis": { |
|||
"axisLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": "#cccccc" |
|||
} |
|||
}, |
|||
"axisTick": { |
|||
"show": false, |
|||
"lineStyle": { |
|||
"color": "#333" |
|||
} |
|||
}, |
|||
"axisLabel": { |
|||
"show": true, |
|||
"textStyle": { |
|||
"color": "#999999" |
|||
} |
|||
}, |
|||
"splitLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": [ |
|||
"#eeeeee" |
|||
] |
|||
} |
|||
}, |
|||
"splitArea": { |
|||
"show": false, |
|||
"areaStyle": { |
|||
"color": [ |
|||
"rgba(250,250,250,0.05)", |
|||
"rgba(200,200,200,0.02)" |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
"valueAxis": { |
|||
"axisLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": "#cccccc" |
|||
} |
|||
}, |
|||
"axisTick": { |
|||
"show": false, |
|||
"lineStyle": { |
|||
"color": "#333" |
|||
} |
|||
}, |
|||
"axisLabel": { |
|||
"show": true, |
|||
"textStyle": { |
|||
"color": "#999999" |
|||
} |
|||
}, |
|||
"splitLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": [ |
|||
"#eeeeee" |
|||
] |
|||
} |
|||
}, |
|||
"splitArea": { |
|||
"show": false, |
|||
"areaStyle": { |
|||
"color": [ |
|||
"rgba(250,250,250,0.05)", |
|||
"rgba(200,200,200,0.02)" |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
"logAxis": { |
|||
"axisLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": "#cccccc" |
|||
} |
|||
}, |
|||
"axisTick": { |
|||
"show": false, |
|||
"lineStyle": { |
|||
"color": "#333" |
|||
} |
|||
}, |
|||
"axisLabel": { |
|||
"show": true, |
|||
"textStyle": { |
|||
"color": "#999999" |
|||
} |
|||
}, |
|||
"splitLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": [ |
|||
"#eeeeee" |
|||
] |
|||
} |
|||
}, |
|||
"splitArea": { |
|||
"show": false, |
|||
"areaStyle": { |
|||
"color": [ |
|||
"rgba(250,250,250,0.05)", |
|||
"rgba(200,200,200,0.02)" |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
"timeAxis": { |
|||
"axisLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": "#cccccc" |
|||
} |
|||
}, |
|||
"axisTick": { |
|||
"show": false, |
|||
"lineStyle": { |
|||
"color": "#333" |
|||
} |
|||
}, |
|||
"axisLabel": { |
|||
"show": true, |
|||
"textStyle": { |
|||
"color": "#999999" |
|||
} |
|||
}, |
|||
"splitLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": [ |
|||
"#eeeeee" |
|||
] |
|||
} |
|||
}, |
|||
"splitArea": { |
|||
"show": false, |
|||
"areaStyle": { |
|||
"color": [ |
|||
"rgba(250,250,250,0.05)", |
|||
"rgba(200,200,200,0.02)" |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
"toolbox": { |
|||
"iconStyle": { |
|||
"normal": { |
|||
"borderColor": "#999999" |
|||
}, |
|||
"emphasis": { |
|||
"borderColor": "#666666" |
|||
} |
|||
} |
|||
}, |
|||
"legend": { |
|||
"textStyle": { |
|||
"color": "#999999" |
|||
} |
|||
}, |
|||
"tooltip": { |
|||
"axisPointer": { |
|||
"lineStyle": { |
|||
"color": "#cccccc", |
|||
"width": 1 |
|||
}, |
|||
"crossStyle": { |
|||
"color": "#cccccc", |
|||
"width": 1 |
|||
} |
|||
} |
|||
}, |
|||
"timeline": { |
|||
"lineStyle": { |
|||
"color": "#626c91", |
|||
"width": 1 |
|||
}, |
|||
"itemStyle": { |
|||
"normal": { |
|||
"color": "#626c91", |
|||
"borderWidth": 1 |
|||
}, |
|||
"emphasis": { |
|||
"color": "#626c91" |
|||
} |
|||
}, |
|||
"controlStyle": { |
|||
"normal": { |
|||
"color": "#626c91", |
|||
"borderColor": "#626c91", |
|||
"borderWidth": 0.5 |
|||
}, |
|||
"emphasis": { |
|||
"color": "#626c91", |
|||
"borderColor": "#626c91", |
|||
"borderWidth": 0.5 |
|||
} |
|||
}, |
|||
"checkpointStyle": { |
|||
"color": "#3fb1e3", |
|||
"borderColor": "rgba(63,177,227,0.15)" |
|||
}, |
|||
"label": { |
|||
"normal": { |
|||
"textStyle": { |
|||
"color": "#626c91" |
|||
} |
|||
}, |
|||
"emphasis": { |
|||
"textStyle": { |
|||
"color": "#626c91" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
"visualMap": { |
|||
"color": [ |
|||
"#2a99c9", |
|||
"#afe8ff" |
|||
] |
|||
}, |
|||
"dataZoom": { |
|||
"backgroundColor": "rgba(255,255,255,0)", |
|||
"dataBackgroundColor": "rgba(222,222,222,1)", |
|||
"fillerColor": "rgba(114,230,212,0.25)", |
|||
"handleColor": "#cccccc", |
|||
"handleSize": "100%", |
|||
"textStyle": { |
|||
"color": "#999999" |
|||
} |
|||
}, |
|||
"markPoint": { |
|||
"label": { |
|||
"normal": { |
|||
"textStyle": { |
|||
"color": "#ffffff" |
|||
} |
|||
}, |
|||
"emphasis": { |
|||
"textStyle": { |
|||
"color": "#ffffff" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
}); |
|||
@ -1,641 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html xmlns:th="http://www.w3.org/1999/xhtml"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<title>首页三</title> |
|||
<meta name="renderer" content="webkit"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|||
<link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all"> |
|||
<link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"> |
|||
<link rel="stylesheet" href="/static/css/public.css" media="all"> |
|||
<style> |
|||
.top-panel { |
|||
border: 1px solid #eceff9; |
|||
border-radius: 5px; |
|||
text-align: center; |
|||
} |
|||
|
|||
.top-panel > .layui-card-body { |
|||
height: 60px; |
|||
} |
|||
|
|||
.top-panel-number { |
|||
line-height: 60px; |
|||
font-size: 30px; |
|||
border-right: 1px solid #eceff9; |
|||
} |
|||
|
|||
.top-panel-tips { |
|||
line-height: 30px; |
|||
font-size: 12px |
|||
} |
|||
|
|||
|
|||
</style> |
|||
</head> |
|||
<body> |
|||
<!--<div class="layuimini-container">--> |
|||
<div class="layuimini-main"> |
|||
|
|||
<div class="layui-row layui-col-space15"> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">转入物料数量</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|||
<span th:text="${allInCount}"></span> |
|||
</div> |
|||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">转入物料金额</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|||
<span th:text="${allInPrice}"></span> |
|||
</div> |
|||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">购入物料数量</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|||
<span th:text="${InCount}"></span> |
|||
</div> |
|||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="layui-col-xs12 layui-col-md3"> |
|||
|
|||
<div class="layui-card top-panel"> |
|||
<div class="layui-card-header">入库物料金额</div> |
|||
<div class="layui-card-body"> |
|||
<div class="layui-row layui-col-space5"> |
|||
<div class="layui-col-xs7 layui-col-md7 top-panel-number"> |
|||
<span th:text="${InPrice}"></span> |
|||
</div> |
|||
<div class="layui-col-xs5 layui-col-md5 top-panel-tips"> |
|||
<!-- 比昨天 <a style="color: #1aa094">▲0.12</a><br>--> |
|||
<!-- 比七日 <a style="color: #bd3004">▼0.06</a>--> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<div class="layui-collapse" lay-accordion> |
|||
|
|||
<div class="layui-colla-item"> |
|||
<h2 class="layui-colla-title">折线图</h2> |
|||
<div class="layui-colla-content layui-show"> |
|||
<button class="layui-btn" lay-submit lay-filter="thisWeek"> |
|||
 本周  |
|||
</button> |
|||
<button class="layui-btn" lay-submit lay-filter="lastWeek"> |
|||
 上周  |
|||
</button> |
|||
<div id="echarts-records" style="background-color:#ffffff;min-height:1000px;padding: 10px"> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="layui-colla-item"> |
|||
<h2 class="layui-colla-title">饼图</h2> |
|||
<div class="layui-colla-content layui-show"> |
|||
<div id="echarts-pies" style="background-color:#ffffff;min-height:1000px;padding: 10px"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<div class="layui-colla-item"> |
|||
<h2 class="layui-colla-title">柱状图</h2> |
|||
<div class="layui-colla-content layui-show"> |
|||
<div id="echarts-dataset" style="background-color:#ffffff;min-height:1000px;padding: 10px"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="layui-colla-item"> |
|||
<h2 class="layui-colla-title">折线比例图</h2> |
|||
<div class="layui-colla-content layui-show"> |
|||
<div id="echarts-map" style="background-color:#ffffff;min-height:1000px;padding: 10px"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</div> |
|||
<!--</div>--> |
|||
|
|||
<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script> |
|||
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script> |
|||
<script> |
|||
layui.use(['layer', 'echarts', 'element'], function () { |
|||
var $ = layui.jquery, |
|||
layer = layui.layer, |
|||
echarts = layui.echarts, |
|||
element = layui.element, |
|||
form = layui.form; |
|||
/** |
|||
* 折线图 |
|||
*/ |
|||
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden'); |
|||
|
|||
var optionRecords = { |
|||
title: { |
|||
text: '入库仓库-报表图', |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: [] |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: [] |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
name: '北京仓库', |
|||
type: 'line', |
|||
stack: '金额', |
|||
label: { |
|||
normal: { |
|||
show: true, |
|||
position: 'top' |
|||
} |
|||
}, |
|||
areaStyle: {}, |
|||
data: [] |
|||
} |
|||
] |
|||
}; |
|||
|
|||
/** |
|||
* 玫瑰图表 |
|||
*/ |
|||
var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden'); |
|||
var optionPies = { |
|||
title: { |
|||
text: '仓库分布图', |
|||
left: 'center' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|||
}, |
|||
legend: { |
|||
orient: 'vertical', |
|||
left: 'left', |
|||
data: [] |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: '昨日占比', |
|||
type: 'pie', |
|||
radius: '55%', |
|||
center: ['50%', '60%'], |
|||
roseType: 'radius', |
|||
data: [ |
|||
{value: 335, name: '外芯仓库'}, |
|||
{value: 310, name: '义乌仓库'}, |
|||
{value: 234, name: '宁波仓库'}, |
|||
{value: 135, name: '杭州仓库'}, |
|||
{value: 368, name: '北京仓库'} |
|||
], |
|||
emphasis: { |
|||
itemStyle: { |
|||
shadowBlur: 10, |
|||
shadowOffsetX: 0, |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}; |
|||
|
|||
|
|||
/** |
|||
* 柱状图 |
|||
*/ |
|||
var echartsDataset = echarts.init(document.getElementById('echarts-dataset'), 'walden'); |
|||
var optionDataset = { |
|||
legend: {}, |
|||
tooltip: {}, |
|||
dataset: { |
|||
dimensions: [], |
|||
source: [] |
|||
}, |
|||
xAxis: {type: 'category'}, |
|||
yAxis: {}, |
|||
series: [ |
|||
{type: 'bar'}, |
|||
{type: 'bar'}, |
|||
{type: 'bar'} |
|||
] |
|||
}; |
|||
|
|||
|
|||
/** |
|||
* 中国地图 |
|||
*/ |
|||
var echartsMap = echarts.init(document.getElementById('echarts-map'), 'walden'); |
|||
var optionMap = { |
|||
legend: {}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
showContent: true |
|||
}, |
|||
dataset: { |
|||
source: [] |
|||
}, |
|||
xAxis: {type: 'category'}, |
|||
yAxis: {gridIndex: 0}, |
|||
grid: {top: '55%'}, |
|||
series: [] |
|||
}; |
|||
|
|||
|
|||
//动态加载相关数据 |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back?type=1', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
complete: function (XHR, TS) { |
|||
if (XHR.status !== 200) { |
|||
layer.alert("系统繁忙,稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
if (result.code === 0) { |
|||
|
|||
echartsRecords.setOption(optionRecords); |
|||
echartsPies.setOption(optionPies); |
|||
echartsDataset.setOption(optionDataset); |
|||
echartsMap.setOption(optionMap); |
|||
// 折线图 |
|||
var optionRecordsSeries = []; |
|||
// 饼状图 |
|||
var optionPiesSeries = { |
|||
name: '昨日占比', |
|||
type: 'pie', |
|||
radius: '55%', |
|||
center: ['50%', '60%'], |
|||
roseType: 'radius', |
|||
emphasis: { |
|||
itemStyle: { |
|||
shadowBlur: 10, |
|||
shadowOffsetX: 0, |
|||
shadowColor: 'rgba(0, 0, 0, 0.5)' |
|||
} |
|||
}, |
|||
data: [] |
|||
}; |
|||
// 柱状图 |
|||
optionDataset = { |
|||
legend: {}, |
|||
tooltip: {}, |
|||
dataset: { |
|||
dimensions: [], |
|||
source: [] |
|||
}, |
|||
xAxis: {type: 'category'}, |
|||
yAxis: {}, |
|||
series: [] |
|||
}; |
|||
for (let i = 0; i < result.data.depository_name.length; i++) { |
|||
optionRecordsSeries.push({ |
|||
name: result.data.depository_name[i], |
|||
type: 'line', |
|||
stack: '金额', |
|||
data: result.data.depository_data.data[result.data.depository_name[i]], |
|||
areaStyle: {} |
|||
}); |
|||
optionPiesSeries.data.push({ |
|||
value: result.data.depository_data.yesterdayData[result.data.depository_name[i]], |
|||
name: result.data.depository_name[i] |
|||
}) |
|||
} |
|||
var dimensions = result.data.depository_data.sourceList[result.data.depository_data.sourceList.length - 1] |
|||
optionDataset.dataset.dimensions = dimensions; |
|||
|
|||
for (let i = result.data.depository_data.sourceList.length - 2; i >= 0; i--) { |
|||
optionDataset.dataset.source.push(result.data.depository_data.sourceList[i]) |
|||
} |
|||
for (let i = 0; i < dimensions.length - 1; i++) { |
|||
optionDataset.series.push({type: 'bar'}) |
|||
} |
|||
|
|||
|
|||
for (let i = 0; i < result.data.depository_data.mapData.mapDataList.length; i++) { |
|||
optionMap.dataset.source.push(result.data.depository_data.mapData.mapDataList[i]); |
|||
if (i < result.data.depository_data.mapData.mapDataList.length - 1) { |
|||
optionMap.series.push({type: 'line', smooth: true, seriesLayoutBy: 'row'}) |
|||
} |
|||
} |
|||
|
|||
|
|||
var month = new Date().getMonth() + 1; |
|||
|
|||
optionMap.series.push( |
|||
{ |
|||
type: 'pie', |
|||
// id: 'pie', |
|||
radius: '30%', |
|||
center: ['50%', '25%'], |
|||
label: { |
|||
formatter: '{b}: {@' + month + '月} ({d}%)' |
|||
}, |
|||
encode: { |
|||
itemName: 'product', |
|||
value: month + '月', |
|||
tooltip: month + '月' |
|||
} |
|||
} |
|||
); |
|||
optionRecords = { |
|||
title: { |
|||
text: '入库仓库-报表图' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: result.data.depository_name |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: result.data.depository_data.week |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: optionRecordsSeries |
|||
}; |
|||
optionPies = { |
|||
title: { |
|||
text: '仓库分布图', |
|||
left: 'center' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'item', |
|||
formatter: '{a} <br/>{b} : {c} ({d}%)' |
|||
}, |
|||
legend: { |
|||
orient: 'vertical', |
|||
left: 'left', |
|||
data: result.data.depository_name |
|||
}, |
|||
series: optionPiesSeries |
|||
}; |
|||
|
|||
echartsRecords.setOption(optionRecords); |
|||
echartsPies.setOption(optionPies); |
|||
echartsDataset.setOption(optionDataset); |
|||
echartsMap.setOption(optionMap); |
|||
} |
|||
} |
|||
}); |
|||
|
|||
|
|||
// echarts 窗口缩放自适应 |
|||
window.onresize = function () { |
|||
echartsRecords.resize(); |
|||
}; |
|||
|
|||
form.on('submit(thisWeek)', function () { |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back_thisWeek?type=1', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
|
|||
complete: function (XHR, TS) { |
|||
if (XHR.status != 200) { |
|||
layer.alert("系统繁忙,稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
echartsRecords.setOption(optionRecords); |
|||
// 折线图 |
|||
var optionRecordsSeries = []; |
|||
for (let i = 0; i < result.depository_name.length; i++) { |
|||
optionRecordsSeries.push({ |
|||
name: result.depository_name[i], |
|||
type: 'line', |
|||
stack: '金额', |
|||
data: result.data[result.depository_name[i]], |
|||
areaStyle: {} |
|||
}); |
|||
} |
|||
optionRecords = { |
|||
title: { |
|||
text: '入库仓库-报表图' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: result.depository_name |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: result.week |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: optionRecordsSeries |
|||
}; |
|||
echartsRecords.setOption(optionRecords); |
|||
} |
|||
}) |
|||
}); |
|||
|
|||
form.on('submit(lastWeek)', function () { |
|||
$.ajax({ |
|||
url: '/repository/layui/echart_back_lastWeek?type=1', |
|||
type: 'get', |
|||
async: true, |
|||
dataType: "json", |
|||
complete: function (XHR, TS) { |
|||
if (XHR.status !== 200) { |
|||
layer.alert("系统繁忙,稍后重试"); |
|||
} |
|||
}, |
|||
beforeSend: function () { |
|||
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']}); |
|||
}, |
|||
success: function (result) { |
|||
layer.close(this.layerIndex); |
|||
echartsRecords.setOption(optionRecords); |
|||
// 折线图 |
|||
var optionRecordsSeries = []; |
|||
for (let i = 0; i < result.depository_name.length; i++) { |
|||
optionRecordsSeries.push({ |
|||
name: result.depository_name[i], |
|||
type: 'line', |
|||
stack: '金额', |
|||
data: result.data[result.depository_name[i]], |
|||
areaStyle: {} |
|||
}); |
|||
} |
|||
optionRecords = { |
|||
title: { |
|||
text: '入库仓库-报表图' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
label: { |
|||
backgroundColor: '#6a7985' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: result.depository_name |
|||
}, |
|||
toolbox: { |
|||
feature: { |
|||
saveAsImage: {} |
|||
} |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '3%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
boundaryGap: false, |
|||
data: result.week |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
type: 'value' |
|||
} |
|||
], |
|||
series: optionRecordsSeries |
|||
}; |
|||
echartsRecords.setOption(optionRecords); |
|||
} |
|||
}) |
|||
}) |
|||
}); |
|||
|
|||
</script> |
|||
</body> |
|||
</html> |
|||
Loading…
Reference in new issue