| New file |
| | |
| | | <!DOCTYPE html> |
| | | <html> |
| | | <head> |
| | | <meta http-equiv="Content-Type" content="text/html; 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="../../../layuiadmin/layui/css/layui.css" media="all"> |
| | | <link rel="stylesheet" href="../../../layuiadmin/style/admin.css" media="all"> |
| | | <script src="../../../layuiadmin/layui/layui.js"></script> |
| | | <script src="../../../layuiadmin/Scripts/json2.js"></script> |
| | | <script src="../../../layuiadmin/Scripts/jquery-1.4.1.js"></script> |
| | | <script src="../../../layuiadmin/Scripts/webConfig.js"></script> |
| | | <script src="../../../layuiadmin/PubCustom.js"></script> |
| | | <script src="../../../layuiadmin/zgqCustom/zgqCustom.js"></script> |
| | | <script src="../../../layuiadmin/HideButton.js"></script> |
| | | <script src='../../../layuiadmin/lib/extend/echarts.min.js'></script> |
| | | <style type="text/css"> |
| | | * { margin: 0; padding: 0; box-sizing: border-box; } |
| | | html, body { height: 100%; } |
| | | .page-container { |
| | | height: 100%; |
| | | padding: 10px; |
| | | background: linear-gradient(180deg, #eef2f5 0%, #e4e8eb 100%); |
| | | display: flex; |
| | | flex-direction: column; |
| | | } |
| | | .query-bar { |
| | | background: #fff; |
| | | padding: 10px 15px; |
| | | border-radius: 6px; |
| | | margin-bottom: 10px; |
| | | box-shadow: 0 1px 4px rgba(0,0,0,0.08); |
| | | flex-shrink: 0; |
| | | } |
| | | .summary-row { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | margin-bottom: 10px; |
| | | flex-shrink: 0; |
| | | } |
| | | .chart-container { |
| | | background: #fff; |
| | | border-radius: 6px; |
| | | padding: 8px; |
| | | box-shadow: 0 1px 4px rgba(0,0,0,0.08); |
| | | flex: 1; |
| | | overflow: hidden; |
| | | min-height: 0; |
| | | } |
| | | .chart-row { display: flex; height: 100%; } |
| | | .chart-box { flex: 1; margin: 4px; border: 1px solid #eee; border-radius: 4px; background: #fafbfc; } |
| | | |
| | | /* æ±æ»ç»è®¡å¡çæ ·å¼ */ |
| | | .summary-card { |
| | | margin: 4px; |
| | | border: 1px solid #eee; |
| | | border-radius: 4px; |
| | | background: #fafbfc; |
| | | text-align: center; |
| | | padding: 8px 4px; |
| | | min-width: 200px; |
| | | } |
| | | .summary-card.total-card { |
| | | background: linear-gradient(135deg, #1e9fff 0%, #5fb3ff 100%); |
| | | border-color: #1e9fff; |
| | | } |
| | | .summary-card.total-card .summary-number, |
| | | .summary-card.total-card .summary-label { color: #fff; } |
| | | .summary-number { font-size: 16px; font-weight: bold; color: #1e9fff; } |
| | | .summary-label { font-size: 11px; color: #888; margin-top: 2px; } |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <div class="page-container"> |
| | | <!-- æ¥è¯¢æ --> |
| | | <div class="query-bar"> |
| | | <form class="layui-form" action="" lay-filter="component-form-group"> |
| | | <div class="layui-inline"> |
| | | <label class="layui-form-label" style="width: 75px;">å¼å§æ¥æ</label> |
| | | <div class="layui-input-inline"> |
| | | <input type="date" class="layui-input" id="HBeginDate" style="width:140px;"> |
| | | </div> |
| | | </div> |
| | | <div class="layui-inline"> |
| | | <label class="layui-form-label" style="width: 75px;">ç»ææ¥æ</label> |
| | | <div class="layui-input-inline"> |
| | | <input type="date" class="layui-input" id="HEndDate" style="width:140px;"> |
| | | </div> |
| | | </div> |
| | | <button class="layui-btn layuiadmin-btn-order" type="button" lay-submit="" lay-filter="btnSearch" id="btnSearch"> |
| | | <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>æ¥è¯¢ |
| | | </button> |
| | | <button class="layui-btn layui-btn-primary layuiadmin-btn-order" type="button" lay-submit="" lay-filter="btnReSearch" id="btnReSearch">éç½®</button> |
| | | </form> |
| | | </div> |
| | | |
| | | <!-- æ±æ»ç»è®¡ï¼å¨æçæï¼ --> |
| | | <div class="summary-row" id="summaryRow"></div> |
| | | |
| | | <!-- å¾è¡¨åºåï¼å¨æçæï¼ --> |
| | | <div class="chart-container" id="chartContainer"></div> |
| | | </div> |
| | | |
| | | <script> |
| | | layui.config({ |
| | | base: '../../../layuiadmin/' |
| | | }).extend({ |
| | | index: 'lib/index', |
| | | }).use(['index', 'form', 'element'], function () { |
| | | |
| | | var $ = layui.$, layer = layui.layer, form = layui.form; |
| | | var chartInstances = {}; |
| | | var chartConfigKeys = []; // åå¨é
ç½®keyé¡ºåº |
| | | |
| | | //#region ========== å¾è¡¨é
ç½®ï¼æ°å¢å¾è¡¨åªé卿¤å¤æ·»å é
ç½®ï¼========== |
| | | /* |
| | | * é
置说æï¼ |
| | | * - chartTitle: å¾è¡¨æ é¢ |
| | | * - chartType: å¾è¡¨ç±»å (pie/bar) |
| | | * - chartColors: å¾è¡¨é¢è²æ°ç» |
| | | * - api: æ¥å£é
ç½® |
| | | * - url: æ¥å£å°å |
| | | * - method: è¯·æ±æ¹æ³ (GET/POST) |
| | | * - buildParams: æå»ºåæ°ç彿°(beginDate, endDate) |
| | | * - dataPath: æ°æ®å¨è¿åç»æä¸çè·¯å¾ï¼å¦ 'data' æ 'data.list' |
| | | * - successCode: æåçç¶æç |
| | | * - statusMap: ç¶ææ å°é
ç½® |
| | | * - name: ç¶æåç§° |
| | | * - condition: 夿æ¡ä»¶è¡¨è¾¾å¼ |
| | | * |
| | | * æ°å¢å¾è¡¨åªé卿¤å¤æ·»å é
ç½®ï¼é¡µé¢ä¼èªå¨çæå¯¹åºçæ±æ»å¡çåå¾è¡¨ |
| | | */ |
| | | var ChartConfig = { |
| | | // é¢ç¨å |
| | | lingyong: { |
| | | chartTitle: 'é¢ç¨åç»è®¡', |
| | | chartType: 'pie', |
| | | chartColors: ['#5470c6', '#91cc75', '#fac858', '#ee6666'], |
| | | api: { |
| | | url: '/Sc_MouldProdOutBillController/page', |
| | | method: 'GET', |
| | | buildParams: function(beginDate, endDate) { |
| | | return { |
| | | sWhere: " and æ¥æ between '" + beginDate + "' and '" + endDate + "'" + " and 徿¥ç±»å='é¨é¨'", |
| | | user: sessionStorage["HUserName"] || '', |
| | | page: 1, |
| | | size: 999999, |
| | | Type: '3802' |
| | | }; |
| | | }, |
| | | dataPath: 'data', |
| | | successCode: 1 |
| | | }, |
| | | statusMap: [ |
| | | { name: 'å建', condition: 'å®¡æ ¸äºº=="" || å®¡æ ¸äºº==null' }, |
| | | { name: 'å·²å®¡æ ¸', condition: 'å®¡æ ¸äºº!="" && å®¡æ ¸äºº!=null && (å
³é人=="" || å
³é人==null)' }, |
| | | { name: 'å·²å
³é', condition: 'å
³é人!="" && å
³é人!=null' } |
| | | ] |
| | | }, |
| | | // éåºå |
| | | tuiku: { |
| | | chartTitle: 'éåºåç»è®¡', |
| | | chartType: 'pie', |
| | | chartColors: ['#73c0de', '#3ba272', '#fc8452', '#9a60b4'], |
| | | api: { |
| | | url: '/Sc_MouldProdBackBillController/page', |
| | | method: 'GET', |
| | | buildParams: function(beginDate, endDate) { |
| | | return { |
| | | sWhere: " and æ¥æ between '" + beginDate + "' and '" + endDate + "'" + " and 徿¥ç±»å='é¨é¨'", |
| | | user: sessionStorage["HUserName"] || '', |
| | | page: 1, |
| | | size: 999999, |
| | | Type: '3803' |
| | | }; |
| | | }, |
| | | dataPath: 'data', |
| | | successCode: 1 |
| | | }, |
| | | statusMap: [ |
| | | { name: 'å建', condition: 'å®¡æ ¸äºº=="" || å®¡æ ¸äºº==null' }, |
| | | { name: 'å·²å®¡æ ¸', condition: 'å®¡æ ¸äºº!="" && å®¡æ ¸äºº!=null' }, |
| | | { name: 'å·²å
³é', condition: 'å
³é人!="" && å
³é人!=null' } |
| | | ] |
| | | }, |
| | | // è°æ¨å |
| | | diaobo: { |
| | | chartTitle: 'è°æ¨åç»è®¡', |
| | | chartType: 'pie', |
| | | chartColors: ['#ea7ccc', '#5470c6', '#91cc75', '#fac858'], |
| | | api: { |
| | | url: '/Sc_MouldProdMoveBillController/page', |
| | | method: 'GET', |
| | | buildParams: function(beginDate, endDate) { |
| | | return { |
| | | sWhere: " and æ¥æ between '" + beginDate + "' and '" + endDate + "'", |
| | | user: sessionStorage["HUserName"] || '', |
| | | page: 1, |
| | | size: 999999, |
| | | Type: '3814' |
| | | }; |
| | | }, |
| | | dataPath: 'data', |
| | | successCode: 1 |
| | | }, |
| | | statusMap: [ |
| | | { name: 'å建', condition: 'å®¡æ ¸äºº=="" || å®¡æ ¸äºº==null' }, |
| | | { name: 'å·²å®¡æ ¸', condition: 'å®¡æ ¸äºº!="" && å®¡æ ¸äºº!=null' }, |
| | | { name: 'å·²å
³é', condition: 'å
³é人!="" && å
³é人!=null' } |
| | | ] |
| | | }, |
| | | // ååºå |
| | | jiechu: { |
| | | chartTitle: 'ååºåç»è®¡', |
| | | chartType: 'pie', |
| | | chartColors: ['#fc8452', '#73c0de', '#3ba272', '#ee6666'], |
| | | api: { |
| | | url: '/Sc_MouldProdOutBillController/page', |
| | | method: 'GET', |
| | | buildParams: function(beginDate, endDate) { |
| | | return { |
| | | sWhere: " and æ¥æ between '" + beginDate + "' and '" + endDate + "'" + " and 徿¥ç±»å='ä¾åºå'", |
| | | user: sessionStorage["HUserName"] || '', |
| | | page: 1, |
| | | size: 999999, |
| | | Type: '3802' |
| | | }; |
| | | }, |
| | | dataPath: 'data', |
| | | successCode: 1 |
| | | }, |
| | | statusMap: [ |
| | | { name: 'å建', condition: 'å®¡æ ¸äºº=="" || å®¡æ ¸äºº==null' }, |
| | | { name: 'å·²å®¡æ ¸', condition: 'å®¡æ ¸äºº!="" && å®¡æ ¸äºº!=null' }, |
| | | { name: 'å·²å
³é', condition: 'å
³é人!="" && å
³é人!=null' } |
| | | ] |
| | | }, |
| | | // å½è¿å |
| | | guihuan: { |
| | | chartTitle: 'å½è¿åç»è®¡', |
| | | chartType: 'pie', |
| | | chartColors: ['#9a60b4', '#ea7ccc', '#5470c6', '#fac858'], |
| | | api: { |
| | | url: '/Sc_MouldProdBackBillController/page', |
| | | method: 'GET', |
| | | buildParams: function(beginDate, endDate) { |
| | | return { |
| | | sWhere: " and æ¥æ between '" + beginDate + "' and '" + endDate + "'" + " and 徿¥ç±»å='ä¾åºå'", |
| | | user: sessionStorage["HUserName"] || '', |
| | | page: 1, |
| | | size: 999999, |
| | | Type: '3803' |
| | | }; |
| | | }, |
| | | dataPath: 'data', |
| | | successCode: 1 |
| | | }, |
| | | statusMap: [ |
| | | { name: 'å建', condition: 'å®¡æ ¸äºº=="" || å®¡æ ¸äºº==null' }, |
| | | { name: 'å·²å®¡æ ¸', condition: 'å®¡æ ¸äºº!="" && å®¡æ ¸äºº!=null' }, |
| | | { name: 'å·²å
³é', condition: 'å
³é人!="" && å
³é人!=null' } |
| | | ] |
| | | }, |
| | | // 䏿¨¡å |
| | | shangmo: { |
| | | chartTitle: '䏿¨¡åç»è®¡', |
| | | chartType: 'pie', |
| | | chartColors: ['#3ba272', '#fc8452', '#73c0de', '#ee6666'], |
| | | api: { |
| | | url: '/Sc_MouldUpperBill/Sc_MouldUpperBillListPage', |
| | | method: 'GET', |
| | | buildParams: function(beginDate, endDate) { |
| | | return { |
| | | sWhere: " and æ¥æ between '" + beginDate + "' and '" + endDate + "'", |
| | | user: sessionStorage["HUserName"] || '', |
| | | page: 1, |
| | | size: 999999 |
| | | }; |
| | | }, |
| | | dataPath: 'data', |
| | | successCode: 1 |
| | | }, |
| | | statusMap: [ |
| | | { name: 'å建', condition: 'å®¡æ ¸äºº=="" || å®¡æ ¸äºº==null' }, |
| | | { name: 'å·²å®¡æ ¸', condition: 'å®¡æ ¸äºº!="" && å®¡æ ¸äºº!=null' }, |
| | | { name: 'å·²å
³é', condition: 'å
³é人!="" && å
³é人!=null' } |
| | | ] |
| | | }, |
| | | // 䏿¨¡å |
| | | xiamo: { |
| | | chartTitle: '䏿¨¡åç»è®¡', |
| | | chartType: 'pie', |
| | | chartColors: ['#5470c6', '#91cc75', '#fac858', '#ee6666'], |
| | | api: { |
| | | url: '/Sc_MouldUpperBill/Sc_MouldLowerBillListPage', |
| | | method: 'GET', |
| | | buildParams: function(beginDate, endDate) { |
| | | return { |
| | | sWhere: " and æ¥æ between '" + beginDate + "' and '" + endDate + "'", |
| | | user: sessionStorage["HUserName"] || '', |
| | | page: 1, |
| | | size: 999999 |
| | | }; |
| | | }, |
| | | dataPath: 'data', |
| | | successCode: 1 |
| | | }, |
| | | statusMap: [ |
| | | { name: 'å建', condition: 'å®¡æ ¸äºº=="" || å®¡æ ¸äºº==null' }, |
| | | { name: 'å·²å®¡æ ¸', condition: 'å®¡æ ¸äºº!="" && å®¡æ ¸äºº!=null' }, |
| | | { name: 'å·²å
³é', condition: 'å
³é人!="" && å
³é人!=null' } |
| | | ] |
| | | }, |
| | | // ä¿å
»è®°å½ |
| | | baoyang: { |
| | | chartTitle: 'ä¿å
»è®°å½ç»è®¡', |
| | | chartType: 'pie', |
| | | chartColors: ['#73c0de', '#3ba272', '#fc8452', '#ee6666'], |
| | | api: { |
| | | url: '/Sc_MouldMaintainBill/GetMouldMaintainBillListPage', |
| | | method: 'GET', |
| | | buildParams: function(beginDate, endDate) { |
| | | return { |
| | | sWhere: " and æ¥æ between '" + beginDate + "' and '" + endDate + "'", |
| | | user: sessionStorage["HUserName"] || '', |
| | | page: 1, |
| | | size: 999999 |
| | | }; |
| | | }, |
| | | dataPath: 'data', |
| | | successCode: 1 |
| | | }, |
| | | statusMap: [ |
| | | { name: 'å建', condition: 'å®¡æ ¸äºº=="" || å®¡æ ¸äºº==null' }, |
| | | { name: 'å·²å®¡æ ¸', condition: 'å®¡æ ¸äºº!="" && å®¡æ ¸äºº!=null' }, |
| | | { name: 'å¾
ä¿å
»', condition: '1==1' } |
| | | ] |
| | | }, |
| | | // ç¹æ£è®°å½ |
| | | dianjian: { |
| | | chartTitle: 'ç¹æ£è®°å½ç»è®¡', |
| | | chartType: 'pie', |
| | | chartColors: ['#91cc75', '#fac858', '#5470c6', '#ee6666'], |
| | | api: { |
| | | url: '/Sc_MouldDotCheckBill/GetMouldDotCheckBillListPage', |
| | | method: 'GET', |
| | | buildParams: function(beginDate, endDate) { |
| | | return { |
| | | sWhere: " and æ¥æ between '" + beginDate + "' and '" + endDate + "'", |
| | | user: sessionStorage["HUserName"] || '', |
| | | page: 1, |
| | | size: 999999 |
| | | }; |
| | | }, |
| | | dataPath: 'data', |
| | | successCode: 1 |
| | | }, |
| | | statusMap: [ |
| | | { name: 'å建', condition: 'å®¡æ ¸äºº=="" || å®¡æ ¸äºº==null' }, |
| | | { name: 'å·²å®¡æ ¸', condition: 'å®¡æ ¸äºº!="" && å®¡æ ¸äºº!=null' }, |
| | | { name: 'å¼å¸¸', condition: '1==1' } |
| | | ] |
| | | }, |
| | | // ç»´ä¿®è®°å½ |
| | | weixiu: { |
| | | chartTitle: '维修记å½ç»è®¡', |
| | | chartType: 'pie', |
| | | chartColors: ['#3ba272', '#fc8452', '#73c0de', '#9a60b4'], |
| | | api: { |
| | | url: '/Sb_MouldRepairWorkBill/GetMouldRepairWorkBillListPage', |
| | | method: 'GET', |
| | | buildParams: function(beginDate, endDate) { |
| | | return { |
| | | sWhere: " and æ¥æ between '" + beginDate + "' and '" + endDate + "'", |
| | | user: sessionStorage["HUserName"] || '', |
| | | page: 1, |
| | | size: 999999 |
| | | }; |
| | | }, |
| | | dataPath: 'data', |
| | | successCode: 1 |
| | | }, |
| | | statusMap: [ |
| | | { name: 'å建', condition: 'å®¡æ ¸äºº=="" || å®¡æ ¸äºº==null' }, |
| | | { name: 'å·²å®¡æ ¸', condition: 'å®¡æ ¸äºº!="" && å®¡æ ¸äºº!=null' }, |
| | | { name: 'å·²å
³é', condition: 'å
³é人!="" && å
³é人!=null' } |
| | | ] |
| | | }, |
| | | // 寿å½è°æ´å |
| | | shoumingtiaozheng: { |
| | | chartTitle: '寿å½è°æ´å', |
| | | chartType: 'pie', |
| | | chartColors: ['#5470c6', '#fac858', '#ee6666', '#73c0de'], |
| | | api: { |
| | | url: '/Sc_MouldLifeChangeBill/page', |
| | | method: 'GET', |
| | | buildParams: function(beginDate, endDate) { |
| | | return { |
| | | sWhere: " and æ¥æ between '" + beginDate + "' and '" + endDate + "'", |
| | | user: sessionStorage["HUserName"] || '', |
| | | Organization: sessionStorage["Organization"] || '', |
| | | page: 1, |
| | | size: 999999 |
| | | }; |
| | | }, |
| | | dataPath: 'data', |
| | | successCode: 1 |
| | | }, |
| | | statusMap: [ |
| | | { name: 'å建', condition: 'å®¡æ ¸äºº=="" || å®¡æ ¸äºº==null' }, |
| | | { name: 'å·²å®¡æ ¸', condition: 'å®¡æ ¸äºº!="" && å®¡æ ¸äºº!=null' }, |
| | | { name: 'å·²å
³é', condition: 'å
³é人!="" && å
³é人!=null' } |
| | | ] |
| | | }, |
| | | // 寿å½èç¨å |
| | | shouminghaoyon: { |
| | | chartTitle: '寿å½èç¨å', |
| | | chartType: 'pie', |
| | | chartColors: ['#91cc75', '#3ba272', '#fc8452', '#ea7ccc'], |
| | | api: { |
| | | url: '/Sc_MouldLifeUseBill/page', |
| | | method: 'GET', |
| | | buildParams: function(beginDate, endDate) { |
| | | return { |
| | | sWhere: " and æ¥æ between '" + beginDate + "' and '" + endDate + "'", |
| | | user: sessionStorage["HUserName"] || '', |
| | | Organization: sessionStorage["Organization"] || '', |
| | | page: 1, |
| | | size: 999999 |
| | | }; |
| | | }, |
| | | dataPath: 'data', |
| | | successCode: 1 |
| | | }, |
| | | statusMap: [ |
| | | { name: 'å建', condition: 'å®¡æ ¸äºº=="" || å®¡æ ¸äºº==null' }, |
| | | { name: 'å·²å®¡æ ¸', condition: 'å®¡æ ¸äºº!="" && å®¡æ ¸äºº!=null' }, |
| | | { name: 'å·²å
³é', condition: 'å
³é人!="" && å
³é人!=null' } |
| | | ] |
| | | } |
| | | }; |
| | | //#endregion |
| | | |
| | | //#region ========== 卿çæé¡µé¢ç»æ ========== |
| | | |
| | | /** |
| | | * æ ¹æ®ChartConfigå¨æçææ±æ»å¡çåå¾è¡¨å®¹å¨ |
| | | */ |
| | | function generatePageStructure() { |
| | | // è·åé
ç½®keyé¡ºåº |
| | | chartConfigKeys = []; |
| | | for (var key in ChartConfig) { |
| | | chartConfigKeys.push(key); |
| | | } |
| | | |
| | | var chartCount = chartConfigKeys.length; |
| | | |
| | | // çææ±æ»å¡ç |
| | | generateSummaryCards(chartCount); |
| | | |
| | | // çæå¾è¡¨å®¹å¨ |
| | | generateChartBoxes(chartCount); |
| | | |
| | | // 计ç®é«åº¦ |
| | | calculateHeights(chartCount); |
| | | } |
| | | |
| | | /** |
| | | * çææ±æ»å¡ç |
| | | */ |
| | | function generateSummaryCards(chartCount) { |
| | | var $summaryRow = $('#summaryRow'); |
| | | $summaryRow.empty(); |
| | | |
| | | // æ»è®¡å¡ç |
| | | var cardWidth = calculateCardWidth(chartCount + 1); |
| | | $summaryRow.append('<div class="summary-card total-card" id="card-total" style="width:' + cardWidth + '">' + |
| | | '<div class="summary-number">0</div><div class="summary-label">æ»è®¡</div></div>'); |
| | | |
| | | // åç±»åå¡ç |
| | | for (var i = 0; i < chartConfigKeys.length; i++) { |
| | | var key = chartConfigKeys[i]; |
| | | var config = ChartConfig[key]; |
| | | var label = config.chartTitle.replace('ç»è®¡', '').replace('å', ''); |
| | | $summaryRow.append('<div class="summary-card" id="card-' + key + '" style="width:' + cardWidth + '">' + |
| | | '<div class="summary-number">0</div><div class="summary-label">' + label + '</div></div>'); |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * 计ç®å¡ç宽度 |
| | | */ |
| | | function calculateCardWidth(count) { |
| | | // æ¯è¡æå¤12ä¸ªï¼æ ¹æ®æ°é计ç®å®½åº¦ |
| | | var perRow = Math.min(count, 12); |
| | | return 'calc(' + (100 / perRow) + '% - 8px)'; |
| | | } |
| | | |
| | | /** |
| | | * çæå¾è¡¨å®¹å¨ï¼æ¯è¡4ä¸ªï¼ |
| | | */ |
| | | function generateChartBoxes(chartCount) { |
| | | var $chartContainer = $('#chartContainer'); |
| | | $chartContainer.empty(); |
| | | |
| | | var colsPerRow = 4; // æ¯è¡4个å¾è¡¨ |
| | | var rows = Math.ceil(chartCount / colsPerRow); |
| | | |
| | | for (var row = 0; row < rows; row++) { |
| | | var $rowDiv = $('<div class="chart-row"></div>'); |
| | | |
| | | for (var col = 0; col < colsPerRow; col++) { |
| | | var index = row * colsPerRow + col; |
| | | if (index < chartCount) { |
| | | var key = chartConfigKeys[index]; |
| | | $rowDiv.append('<div class="chart-box" id="chart-' + key + '"></div>'); |
| | | } else { |
| | | // å¡«å
空ç½çåä¿æå¸å± |
| | | $rowDiv.append('<div class="chart-box" style="visibility:hidden;"></div>'); |
| | | } |
| | | } |
| | | |
| | | $chartContainer.append($rowDiv); |
| | | } |
| | | } |
| | | |
| | | /** |
| | | * 计ç®åé¨åé«åº¦ |
| | | */ |
| | | function calculateHeights(chartCount) { |
| | | var rows = Math.ceil(chartCount / 4); |
| | | // chart-containerå·²éè¿flex:1èªå¨å¡«å
ï¼åªé设置æ¯è¡é«åº¦ |
| | | $('.chart-row').css('height', (100 / rows) + '%'); |
| | | } |
| | | |
| | | //#endregion |
| | | |
| | | //#region ========== éç¨æ°æ®è·åæ¹æ³ ========== |
| | | |
| | | function getValueByPath(obj, path) { |
| | | if (!path) return obj; |
| | | var keys = path.split('.'); |
| | | var result = obj; |
| | | for (var i = 0; i < keys.length; i++) { |
| | | if (result && result[keys[i]] !== undefined) { |
| | | result = result[keys[i]]; |
| | | } else { |
| | | return null; |
| | | } |
| | | } |
| | | return result; |
| | | } |
| | | |
| | | function fetchChartData(chartKey, beginDate, endDate) { |
| | | var config = ChartConfig[chartKey]; |
| | | if (!config) return Promise.resolve([]); |
| | | |
| | | return new Promise(function(resolve) { |
| | | var params = {}; |
| | | if (config.api.buildParams) { |
| | | params = config.api.buildParams(beginDate, endDate); |
| | | } |
| | | |
| | | $.ajax({ |
| | | url: GetWEBURL() + config.api.url, |
| | | type: config.api.method || 'GET', |
| | | data: params, |
| | | success: function(result) { |
| | | var successCode = config.api.successCode || 1; |
| | | var dataPath = config.api.dataPath || 'data'; |
| | | |
| | | if (result.code == successCode || result.count == successCode) { |
| | | var data = getValueByPath(result, dataPath); |
| | | resolve(data || []); |
| | | } else { |
| | | resolve([]); |
| | | } |
| | | }, |
| | | error: function() { |
| | | resolve([]); |
| | | } |
| | | }); |
| | | }); |
| | | } |
| | | |
| | | function countByStatusConfig(dataList, config) { |
| | | var result = []; |
| | | var statusMap = config.statusMap; |
| | | |
| | | for (var i = 0; i < statusMap.length; i++) { |
| | | var statusItem = statusMap[i]; |
| | | var count = 0; |
| | | |
| | | for (var j = 0; j < dataList.length; j++) { |
| | | if (evalCondition(dataList[j], statusItem.condition)) { |
| | | count++; |
| | | } |
| | | } |
| | | |
| | | result.push({ |
| | | name: statusItem.name, |
| | | value: count |
| | | }); |
| | | } |
| | | |
| | | return result; |
| | | } |
| | | |
| | | function evalCondition(item, condition) { |
| | | if (!condition) return true; |
| | | |
| | | if (condition.indexOf('==""') > -1 || condition.indexOf('==null') > -1) { |
| | | var fieldMatch = condition.match(/(\S+)==""/); |
| | | if (fieldMatch) { |
| | | var field = fieldMatch[1]; |
| | | return !item[field] || item[field] === ''; |
| | | } |
| | | } |
| | | |
| | | if (condition.indexOf('!=""') > -1 || condition.indexOf('!=null') > -1) { |
| | | var notEmptyMatch = condition.match(/(\S+)!=""/); |
| | | if (notEmptyMatch) { |
| | | var field = notEmptyMatch[1]; |
| | | return item[field] && item[field] !== ''; |
| | | } |
| | | } |
| | | |
| | | var equalMatch = condition.match(/(\S+)==\"([^\"]+)\"/); |
| | | if (equalMatch) { |
| | | var field = equalMatch[1]; |
| | | var value = equalMatch[2]; |
| | | return item[field] === value; |
| | | } |
| | | |
| | | return condition === '1==1'; |
| | | } |
| | | |
| | | function fetchAllChartData(beginDate, endDate) { |
| | | var promises = []; |
| | | var results = {}; |
| | | |
| | | for (var i = 0; i < chartConfigKeys.length; i++) { |
| | | var key = chartConfigKeys[i]; |
| | | (function(chartKey) { |
| | | var promise = fetchChartData(chartKey, beginDate, endDate).then(function(data) { |
| | | results[chartKey] = countByStatusConfig(data, ChartConfig[chartKey]); |
| | | }); |
| | | promises.push(promise); |
| | | })(key); |
| | | } |
| | | |
| | | return Promise.all(promises).then(function() { |
| | | return results; |
| | | }); |
| | | } |
| | | |
| | | //#endregion |
| | | |
| | | //#region ========== å¾è¡¨æ¸²æ ========== |
| | | |
| | | function renderPieChart(chartId, title, data, colors) { |
| | | var chartDom = document.getElementById(chartId); |
| | | if (!chartDom) return; |
| | | |
| | | var chart = echarts.init(chartDom); |
| | | chartInstances[chartId] = chart; |
| | | |
| | | var pieData = data.map(function(item) { |
| | | return { name: item.name, value: item.value }; |
| | | }); |
| | | |
| | | chart.setOption({ |
| | | title: { |
| | | text: title, |
| | | left: 'center', |
| | | top: 5, |
| | | textStyle: { fontSize: 12, fontWeight: 'bold' } |
| | | }, |
| | | tooltip: { |
| | | trigger: 'item', |
| | | formatter: '{b}: {c} ({d}%)' |
| | | }, |
| | | series: [{ |
| | | type: 'pie', |
| | | radius: ['30%', '50%'], |
| | | center: ['50%', '55%'], |
| | | data: pieData, |
| | | itemStyle: { borderRadius: 3, borderColor: '#fff', borderWidth: 1 }, |
| | | label: { show: true, fontSize: 10, formatter: '{b}\n{c}' }, |
| | | color: colors || ['#91cc75', '#fac858', '#ee6666', '#73c0de'] |
| | | }] |
| | | }); |
| | | } |
| | | |
| | | function renderAllCharts(data) { |
| | | for (var i = 0; i < chartConfigKeys.length; i++) { |
| | | var key = chartConfigKeys[i]; |
| | | var config = ChartConfig[key]; |
| | | if (config.chartType === 'pie') { |
| | | renderPieChart('chart-' + key, config.chartTitle, data[key] || [], config.chartColors); |
| | | } |
| | | } |
| | | |
| | | updateSummaryCards(data); |
| | | } |
| | | |
| | | function updateSummaryCards(data) { |
| | | var grandTotal = 0; |
| | | |
| | | for (var i = 0; i < chartConfigKeys.length; i++) { |
| | | var key = chartConfigKeys[i]; |
| | | var config = ChartConfig[key]; |
| | | var total = 0; |
| | | if (data[key]) { |
| | | for (var j = 0; j < data[key].length; j++) { |
| | | total += data[key][j].value; |
| | | } |
| | | } |
| | | grandTotal += total; |
| | | $('#card-' + key).find('.summary-number').text(total); |
| | | } |
| | | |
| | | $('#card-total').find('.summary-number').text(grandTotal); |
| | | } |
| | | |
| | | //#endregion |
| | | |
| | | //#region ========== äºä»¶ç»å® ========== |
| | | |
| | | form.on('submit(btnReSearch)', function(data) { |
| | | set_ClearQuery(); |
| | | }); |
| | | |
| | | form.on('submit(btnSearch)', function(data) { |
| | | get_FastQuery(); |
| | | }); |
| | | |
| | | function set_ClearBill() { |
| | | // å
çæé¡µé¢ç»æ |
| | | generatePageStructure(); |
| | | |
| | | // è®¾ç½®æ¥æå¹¶æ¥è¯¢ |
| | | var today = Format(new Date(), "yyyy-MM-dd"); |
| | | $("#HBeginDate").val(Format(new Date(new Date().setDate(new Date().getDate() - 5)), "yyyy-MM-dd")); |
| | | $("#HEndDate").val(today); |
| | | get_FastQuery(); |
| | | } |
| | | |
| | | function get_FastQuery() { |
| | | var wait = layer.load(); |
| | | var beginDate = $("#HBeginDate").val(); |
| | | var endDate = $("#HEndDate").val(); |
| | | |
| | | fetchAllChartData(beginDate, endDate).then(function(statsData) { |
| | | var hasData = false; |
| | | for (var i = 0; i < chartConfigKeys.length; i++) { |
| | | var key = chartConfigKeys[i]; |
| | | if (statsData[key] && statsData[key].length > 0) { |
| | | var sum = 0; |
| | | for (var j = 0; j < statsData[key].length; j++) { |
| | | sum += statsData[key][j].value; |
| | | } |
| | | if (sum > 0) { |
| | | hasData = true; |
| | | break; |
| | | } |
| | | } |
| | | } |
| | | |
| | | if (hasData) { |
| | | renderAllCharts(statsData); |
| | | } else { |
| | | renderAllCharts(getMockData()); |
| | | } |
| | | layer.close(wait); |
| | | }).catch(function() { |
| | | renderAllCharts(getMockData()); |
| | | layer.close(wait); |
| | | }); |
| | | } |
| | | |
| | | function set_ClearQuery() { |
| | | var today = Format(new Date(), "yyyy-MM-dd"); |
| | | $("#HBeginDate").val(today); |
| | | $("#HEndDate").val(today); |
| | | get_FastQuery(); |
| | | } |
| | | |
| | | //#endregion |
| | | |
| | | //#region ========== æ¨¡ææ°æ® ========== |
| | | |
| | | function getMockData() { |
| | | var mockData = {}; |
| | | for (var i = 0; i < chartConfigKeys.length; i++) { |
| | | var key = chartConfigKeys[i]; |
| | | var config = ChartConfig[key]; |
| | | mockData[key] = []; |
| | | for (var j = 0; j < config.statusMap.length; j++) { |
| | | mockData[key].push({ |
| | | name: config.statusMap[j].name, |
| | | value: Math.floor(Math.random() * 20) + 5 |
| | | }); |
| | | } |
| | | } |
| | | return mockData; |
| | | } |
| | | |
| | | //#endregion |
| | | |
| | | // åå§å |
| | | set_ClearBill(); |
| | | |
| | | // çªå£å¤§å°ååæ¶éæ°æ¸²æå¾è¡¨ |
| | | window.onresize = function() { |
| | | setTimeout(function() { |
| | | for (var key in chartInstances) { |
| | | if (chartInstances[key]) { |
| | | chartInstances[key].resize(); |
| | | } |
| | | } |
| | | }, 100); |
| | | }; |
| | | }); |
| | | </script> |
| | | </body> |
| | | </html> |