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