/* * Ext3.2 Chart 2011-05-10 Auteur:向宇胜 */ var sumStore; var patrolStore; var timeStore; var _store; function changeDate(data, sumid) {/* 将后台数据转换成Array */ var newData = []; var sum = 0; for (i = 0; i < data.length; i++) { newData.push([data[i].xname, data[i].yhits, data[i].id]); sum += data[i].yhits; } if (sumid != "") { /* 更新总数 将总数转换成图片 */ var _sum = new Array(); sum = sum + ""; for (j = 0; j < sum.length; j++) { _sum[j] = sum.substring(j, j + 1); } var _img = ""; for (k = 0; k < _sum.length; k++) { _img += "<img src="./images/" + _sum[k] + ".jpg" mce_src="images/" + _sum[k] + ".jpg">" } document.getElementById(sumid).innerHTML = _img; } return newData; } function createTable() {/* 创建分局总数表格 */ function changestyle(val) { if (val > 0) { return '<span style="color:green;" mce_style="color:green;">' + val + '</span>'; } else if (val <= 0) { return '<span style="color:red;" mce_style="color:red;">' + val + '</span>'; } return val; } var fileds = ['name', 'sum', 'patrolsum']; // 定义列 var cm = [{ header : "分局名称", sortable : true, align : "center", width : 80, dataIndex : 'name' }, { header : "核录总数", width : 80, align : "center", renderer : changestyle, sortable : true, dataIndex : 'sum' }, { header : "碰撞总数", width : 80, align : "center", renderer : changestyle, sortable : true, dataIndex : 'patrolsum' }] // 定义数据解释器 var jsonRe = new Ext.data.ArrayReader({ id : "id" }, fileds); // 定义行的视图 var viewC = new Ext.grid.GridView({ columnsText : "请选择显示的列", sortAscText : "升序", sortDescText : "降序" }); _store = new Ext.data.Store({ reader : jsonRe }); var grid = new Ext.grid.GridPanel({ autoSizeColumns : true, autoScroll : true, viewConfig : viewC, autoHeight : true, autoWidth : true, store : _store, columns : cm }); grid.render('fjtable');// 将表格插入到指定容器 } function loadfjsum(data) { var record = data[0]; var record1 = data[1]; var _array = new Array(); for (i = 0; i < record.length; i++) { var array1 = new Array(); array1[0] = record[i].xname; array1[1] = record[i].yhits; array1[2] = record1[i].yhits; _array[i] = array1; } _store.loadData(_array); // alert(mPage.infoCount); } function updateDate(data) { sumStore.loadData(changeDate(data[0], "_sum")); patrolStore.loadData(changeDate(data[1], "patrol_sum")); loadfjsum(data); Ext.Msg.hide(); } function updateDateTime(data) { timeStore.loadData(changeDate(data, "")); } function getTime() { var st = Ext.getCmp('startdt').getValue(); var et = Ext.getCmp('enddt').getValue(); if (st.length != "") { startime = st.format('Y-m-d H:i:s'); } if (et.length != "") { endtime = et.format('Y-m-d H:i:s'); } } var startime = ""; var endtime = ""; function init(v) { // 按不同类型警车 更新 var cartype; if (v != "") { cartype = v; } else { cartype = (Ext.getCmp("radiogroup").getValue().getGroupValue()); } if (cartypeqx != 1 && cartype != cartypeqx) { Ext.Msg.alert("提示", "您没有权限!"); return; } Ext.Msg.wait('数据正在更新...', '请稍后'); getTime(); chartService.getList(cartype, startime, endtime, deptid, updateDate); chartService.getTimeList(cartype, deptid, updateDateTime); } function getdate() { // if (endtime == "") { var cartype = (Ext.getCmp("radiogroup").getValue().getGroupValue()); chartService.getList(cartype, startime, "", deptid, updateDate); chartService.getTimeList(cartype, deptid, updateDateTime); setTimeout(getdate, 100000); } } Ext.onReady(function() { setTimeout(getdate, 100000); Ext.BLANK_IMAGE_URL = "Script/ExtJs/resources/images/default/s.gif"; /* * Ext.util.CSS.swapStyleSheet("theme", * "Script/ExtJs/resources/css/xtheme-gray.css"); */ sumStore = new Ext.data.ArrayStore({ fields : ['xName', 'yHits', "id"] }); patrolStore = new Ext.data.ArrayStore({ fields : ['xName', 'yHits', "id"] }); timeStore = new Ext.data.ArrayStore({ fields : ['xName', 'yHits', "id"] }); var tempheight = document.body.clientHeight; // 高度自适应分辨率 var tempwidth = document.body.clientWidth; // 宽度自适应分辨率 var patrolChart = new Ext.chart.ColumnChart({ store : patrolStore, height : tempheight * 2 / 5 - 30, // renderTo : "chart1", yField : 'yHits', url : 'Script/ExtJs/resources/charts.swf', xField : 'xName', xAxis : new Ext.chart.CategoryAxis({ // title : '分局名称' }), yAxis : new Ext.chart.NumericAxis({ // title : '碰撞数', labelRenderer : Ext.util.Format .numberRenderer('0,0') }), extraStyle : { // 横坐标文字旋转 xAxis : { labelRotation : -180 } }, chartStyle : { // padding: 10, animationEnabled : true, font : { name : '宋体', color : '#000000', size : 12 }, dataTip : { padding : 5, border : { color : 0x99bbe8, size : 1 }, background : { color : 0xDAE7F6, alpha : .9 }, font : { name : '宋体', color : '#000000', size : 12 // , // bold : true } } } }); /* * var menuRadio = new Ext.menu.Menu({ items : [new Ext.menu.CheckItem({ * text : '宋体', group : 'font', checked : true, checkHandler : * function(item, checked) { Ext.Msg.alert('多选', (checked ? '选中' : '取消') + * '宋体'); } }), new Ext.menu.CheckItem({ text : '楷体', group : 'font', * checked : true, checkHandler : function(item, checked) { * Ext.Msg.alert('多选', (checked ? '选中' : '取消') + '楷体'); } }), new * Ext.menu.CheckItem({ text : '黑体', group : 'font', checkHandler : * function(item, checked) { Ext.Msg.alert('多选', (checked ? '选中' : '取消') + * '黑体'); } })] }); */ var _right = new Ext.Panel({ iconCls : 'chartsum', width : 250, title : '<span style="font-size:16" mce_style="font-size:16">总计</span>', height : tempheight * 3 / 5, html : '<table style="color: #15428b;font-weight: bold;" mce_style="color: #15428b;font-weight: bold;"><tr><td>核录:</td><td id="_sum"></td></tr>' + '<tr><td>碰撞:</td><td id="patrol_sum"></td></tr></table>' + '<div id="fjtable"></div>' }) var sumPanel = new Ext.Panel({ iconCls : 'chartsum', width : tempwidth - 252, // autoWidth : true, height : tempheight * 3 / 5, layout : "form", // draggable : true, // renderTo : "chart", title : '<span style="font-size:16" mce_style="font-size:16">青岛市公安局巡逻盘查核录情况 </span>', tbar : [{ xtype : 'radiogroup', id : "radiogroup", // anchor:'10%', width : 450, height : 22, // fieldLabel : 'Single Column', items : [{ boxLabel : '所有警车 ', name : 'rb-auto', checked : true, inputValue : 0 }, { boxLabel : '110 警车 ', name : 'rb-auto', inputValue : 1 }, { boxLabel : '流动警务室', name : 'rb-auto', inputValue : 2 }, { boxLabel : '治安检查站', name : 'rb-auto', inputValue : 3 }, { boxLabel : '交 警', name : 'rb-auto', inputValue : 4 }] }, /* * { xtype : "radio" }, { * * xtype : "tbtext", text : '110警车' }, { xtype : "radio" }, { * xtype : "tbtext", text : '流动警务室' }, { xtype : "checkbox" }, { * xtype : "tbtext", text : '交警' }, { xtype : "checkbox" }, { * text : "所有警车", handler : function() { init(0); * document.getElementById("_typename").innerHTML = ""; } }, { * text : '110警车', handler : function() { init(1); * document.getElementById("_typename").innerHTML = "110警车 "; } }, { * text : '流动警务室', handler : function() { init(2); * document.getElementById("_typename").innerHTML = "流动警务室 "; } }, { * text : '治安检查站警车', handler : function() { init(3); * document.getElementById("_typename").innerHTML = "治安检查站警车 "; } }, { * text : '交警', handler : function() { init(4); * document.getElementById("_typename").innerHTML = "交警 "; } }, */{ xtype : 'datetimefield', format : 'H:i', emptyText : "开始时间", name : 'startdt', id : 'startdt' }, { xtype : 'datetimefield', format : 'H:i', emptyText : "结束时间", name : 'enddt', id : 'enddt' }, { text : '确定', handler : function() { init(""); } }], items : [{ xtype : 'columnchart', store : sumStore, id : 'patrolchart', // yField : 'yHits', url : 'Script/ExtJs/resources/charts.swf', xField : 'xName', xAxis : new Ext.chart.CategoryAxis({ // title : '分局名称' }), yAxis : new Ext.chart.NumericAxis({ // title : '核录数', labelRenderer : Ext.util.Format.numberRenderer('0,0') }), extraStyle : { // 横坐标文字旋转 xAxis : { labelRotation : 0 } }, listeners : { itemclick : function(o) { var rec = sumStore.getAt(o.index); var _fj = 'chartfj.jsp?deptid=' + rec.get("id"); if (startime != "") { _fj += '&startime=' + startime; } if (endtime != "") { _fj += '&endtime=' + endtime; } // alert(_fj); var win = new Ext.Window({ title : '分局情况', id : 'winfj', plain : true, height : tempheight * 4 / 5, width : tempwidth * 9 / 10, autoScroll : false, resizable : false, layout : "form", labelWidth : 60, shadow : false, iframe : false, shadowOffset : 0, animCollapse : true, modal : true, // 遮罩 html : "<iframe id='fj' name='fj' src=" + _fj + " mce_src=" + _fj + " width='100%' height='100%'frameborder='0' ></iframe>" }); win.show(); // window.location.href(_fj); } }, series : [{// 改变柱状样式 type : 'column', yField : 'yHits', width : 200, style : { image : 'bar.gif', mode : 'stretch', color : '#4096ee' } }], chartStyle : { // padding: 10, animationEnabled : true, font : { name : '宋体', color : '#000000', size : 12 }, dataTip : { padding : 5, border : { color : 0x99bbe8, size : 1 }, background : { color : 0xDAE7F6, alpha : .9 }, font : { name : '宋体', color : '#000000', size : 12 // , // bold : true } } } }] }); var patrolPanel = new Ext.Panel({ iconCls : 'chartpatrol', width : tempwidth * 2 / 5 - 1, // autoWidth:true, height : tempheight * 2 / 5, // renderTo : "chart1", // draggable : true, // renderTo : "chart", title : '<span style="font-size:14" mce_style="font-size:14">青岛市公安局巡逻盘查碰撞情况</span>', items : patrolChart }) // extra simple var timePanel = new Ext.Panel({ // draggable : true, iconCls : 'charttime', title : '<span style="font-size:14" mce_style="font-size:14">青岛市公安局核录情况实时走向图</span>', // renderTo : 'chart1', width : tempwidth * 3 / 5, // autoWidth : tempheight * 2 / 5, height : tempheight * 2 / 5, items : { xtype : 'linechart', store : timeStore, url : 'Script/ExtJs/resources/charts.swf', xField : 'xName', yAxis : new Ext.chart.NumericAxis({ displayName : '核录总数', labelRenderer : Ext.util.Format .numberRenderer('0,0') }), tipRenderer : function(chart, record, index, series) { if (series.yField == 'yHits') { return '核录数 ' + record.data.yHits; } else { return '碰撞数 ' + record.data.id; } }, /* * tipRenderer : function(chart, record) { return * Ext.util.Format .number(record.data.visits, '0,0') + ' * 核录数 ' + record.data.yHits; }, */ series : [{// 列 type : 'line', // 类型可以改变(线) displayName : 'Good', yField : 'yHits', style : { color : "#42b4f5" }, tipRenderer : function(chart, record) { return Ext.util.Format.number(record.data.visits, '0,0') + ' 核录数 ' + record.data.yHits; } }, { type : 'line', yField : 'id', style : { color : "#0f2d71" } }], chartStyle : { // padding: 10, animationEnabled : true, font : { name : '宋体', color : '#000000', size : 12 }, dataTip : { padding : 5, border : { color : 0x99bbe8, size : 1 }, background : { color : 0xDAE7F6, alpha : .9 }, font : { name : '宋体', color : '#000000', size : 12 // , // bold : true } } } } }); var layout = new Ext.Panel({ layout : "column", renderTo : "chart", // width : 1018, // height : 600, autoWidth : true, autoHeight : true, items : [sumPanel, _right, patrolPanel, timePanel] }) createTable(); if (cartypeqx == 1) { init(0);// 如果是110用户默认查询所有警车 } else { init(cartypeqx); // 否则查询自己的类型用户 } /* * var win = new Ext.Window({ width : 420, height : 250 }); var win1 = * new Ext.Window({ width : 870, height : 285 }); var win2 = new * Ext.Window({ width : 420, height : 250 }); win.add(chart); * win1.add(p); win2.add(p1); win.show(); win1.show(); win2.show(); */ }); 以下是完成后的效果图: