[asp.net] echarts和easyui联合显示数据

其他 2018-07-10 21:53:29 阅读次数: 0

尽管easyui的datagrid可以很方便的看到数据的内容，但是如果将输入以图表的形式展示，将使用户体验大大提升。笔者采用easyui显示后台数据，同时，通过echarts将easyui中的数据进行一定的处理后显示出来。

1.前台代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="pragma" content="no-cache" />
    <script src="/Scripts/loading.js" type="text/javascript"></script>
    <link href="/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="/EasyUI/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
    <script src="/EasyUI/jquery.min.js" type="text/javascript"></script>
    <script src="/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/Scripts/distinguishBrowser.js" type="text/javascript"></script>
    <script src="../EasyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
</head>
<body>
    <table id="dg" class="easyui-datagrid" title="工厂详情" toolbar="#toolbar" rownumbers="true"
        fitcolumns="true" singleselect="true">
        <thead>
            <tr>
                <th field="Name" width="100">
                    机组名称
                </th>
                <th field="Status" width="100">
                    机组状态
                </th>
            </tr>
        </thead>
    </table>
    <div style="position: absolute; width: 98%;">
        <!--Echart图表区域-->
        <div id="myechart" style="height: 300px; width: 500px; position: relative; margin: 0 auto;">
        </div>
        <!--单文件导入-->
        <script src="/Echarts/echarts-all.js" type="text/javascript"></script>
        <!--配置Echart-->
        <script type="text/javascript">
            $(function () {
                var dgtotal = 0;
                var dgwarn = 0;
                $("#dg").datagrid({ url: '/GC/GCHandler.ashx?action=GetAllGCJZInfo',
                    onLoadSuccess: function (data) {
                        var rows = $("#dg").datagrid("getRows");
                        dgtotal = data.total;
                        //统计报警个数[0代表报警]
                        for (var i = 0; i < rows.length; i++) {
                            if (rows[i].Status == 0) {
                                dgwarn = dgwarn + 1;
                            }
                        }
                        //更新echart数据
                        var myChart = echarts.init(document.getElementById('myechart'));
                        //准备数据
                        var option = {
                            tooltip: {
                                show: true
                            },
                            legend: {
                                data: ['数量']
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: ["总机组数", "报警机组数"]
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    "name": "工厂",
                                    "type": "bar",
                                    "data": [dgtotal, dgwarn]
                                }
                            ]
                        };
                        //加载数据
                        myChart.setOption(option);
                    }
                });
            })
        </script>
    </div>
</body>
</html>

2.后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Common;
using System.Data;
using DataService;
using Model;
using System.Web.SessionState;
using Newtonsoft.Json;

namespace Web.GC
{
    /// <summary>
    /// GCHandler 的摘要说明
    /// </summary>
    public class GCHandler : IHttpHandler, IRequiresSessionState
    {
        DataAccess data = new DataAccess();

        public void ProcessRequest(HttpContext context)
        {
            string action = context.Request["action"].ToString();
            context.Response.ContentType = "text/plain";
            ResultInfo result = new ResultInfo();

            switch (action)
            {
                case "GetAll":
                    context.Response.Write(GetAll());
                    break;
                case "GetGC":
                    string jt = context.Request["jt"];
                    context.Response.Write(GetGC(jt));
                    break;
                case "Add":
                    GCInfo gc1 = new GCInfo();
                    gc1.Name = context.Request.Form["Name"];
                    gc1.Boss = context.Request.Form["Boss"];
                    gc1.Address = context.Request.Form["Address"];
                    gc1.PostAddress = context.Request.Form["PostAddress"];
                    gc1.Introduce = context.Request.Form["Introduce"];
                    gc1.Phone = context.Request.Form["Phone"];
                    gc1.Email = context.Request.Form["Email"];
                    gc1.JTName = context.Request.Form["JTName"];
                    gc1.JW = context.Request.Form["JW"];
                    //保存数据到数据库中
                    result.Success = Add(gc1);
                    result.Message = "插入工厂信息" + ((result.Success == true) ? "成功" : "失败") + "!";
                    //返回客户端信息
                    context.Response.Write(JsonHelper<ResultInfo>.ObjectToJsonString(result));
                    break;
                case "Update":
                    gc1 = new GCInfo();
                    gc1.Name = context.Request.Form["Name"];
                    gc1.Boss = context.Request.Form["Boss"];
                    gc1.Address = context.Request.Form["Address"];
                    gc1.PostAddress = context.Request.Form["PostAddress"];
                    gc1.Introduce = context.Request.Form["Introduce"];
                    gc1.Phone = context.Request.Form["Phone"];
                    gc1.Email = context.Request.Form["Email"];
                    gc1.JTName = context.Request.Form["JTName"];
                    gc1.JW = context.Request.Form["JW"];
                    result.Success = Update(gc1);
                    result.Message = "更新工厂[" + gc1.Name + "]信息" + ((result.Success == true) ? "成功" : "失败") + "!";
                    //返回客户端信息
                    context.Response.Write(JsonHelper<ResultInfo>.ObjectToJsonString(result));
                    break;
                case "Delete":
                    string id = context.Request["Id"];
                    string[] ids = id.Split(',');
                    for (int i = 0; i < ids.Length; i++)
                    {
                        result.Success = Delete(ids[i]);
                        if (result.Success == false)
                        {
                            break;
                        }
                    }
                    result.Message = "删除" + ids.Length + "条用户信息" + ((result.Success==true)?"成功":"失败") + "!";
                    //返回客户端信息
                    context.Response.Write(JsonHelper<ResultInfo>.ObjectToJsonString(result));
                    break;
                case "GetAllGCInfo":
                    int page = int.Parse(context.Request.Form["page"]);
                    int rows = int.Parse(context.Request.Form["rows"]);
                    context.Response.Write(GetAllGCInfo(page, rows));
                    break;
                case "GetAllGCJZInfo":
                    int menuid = int.Parse(CheckLoginStatus.node);
                    string gcname = MenuHelper.GetMenuNameById(menuid);
                    context.Response.Write(GetAllGCJZInfo(gcname));
                    break;
                default:
                    break;
            }
        }

        /// <summary>
        /// 获取所有的工厂信息列表【目录】
        /// </summary>
        /// <returns></returns>
        public string GetAll()
        {
            SelectorHelper shelper = new SelectorHelper();

            string sql = "SELECT * FROM `web`.`工厂表`";
            DataTable dTable = data.GetTable(sql);
            for (int i = 0; i < dTable.Rows.Count; i++)
            {
                string name = dTable.Rows[i]["工厂名称"].ToString();
                if (i == 0)
                {
                    shelper.AddItem(name, name, true);
                }
                else
                {
                    shelper.AddItem(name, name, false);
                }
            }
            return shelper.ToString();
        }

        /// <summary>
        /// 获取某个集团所有的工厂信息列表【目录】
        /// </summary>
        /// <param name="name">集团名称</param>
        /// <returns></returns>
        public string GetGC(string name)
        {
            SelectorHelper shelper = new SelectorHelper();

            string sql = "SELECT * FROM `web`.`工厂表` where 集团名称='" + name + "'";
            DataTable dTable = data.GetTable(sql);
            for (int i = 0; i < dTable.Rows.Count; i++)
            {
                string n = dTable.Rows[i]["工厂名称"].ToString();
                if (i == 0)
                {
                    shelper.AddItem(n, n, true);
                }
                else
                {
                    shelper.AddItem(n, n, false);
                }
            }
            return shelper.ToString();
        }

        /// <summary>
        /// 保存工厂的信息
        /// </summary>
        /// <param name="user"></param>
        public bool Add(GCInfo gc)
        {
            string sql = "INSERT INTO `web`.`工厂表`(`工厂名称`, `工厂负责人`, `工厂地址`, `工厂邮编`, `工厂介绍`, `工厂电话`, `工厂电子邮箱`, `集团名称`, `工厂经纬度`) VALUES ('" +
                gc.Name + "', '" +
                gc.Boss + "', '" +
                 gc.Address + "', '" +
                 gc.PostAddress + "', '" +
                 gc.Introduce + "', '" +
                 gc.Phone + "', '" +
                 gc.Email + "', '" +
                 gc.JTName + "', '" +
                 gc.JW + "')";
            return data.ExecSql(sql);
        }

        /// <summary>
        /// 获取所有工厂信息
        /// </summary>
        /// <returns>工厂信息列表的json字符串形式</returns>
        public string GetAllGCInfo(int page, int rows)
        {
            int start = (page - 1) * rows;
            int end = page * rows;
            string where = "limit " + start + "," + end;
            string sql = "SELECT * FROM `web`.`工厂表`";
            List<GCInfo> gcs = new List<GCInfo>();
            Dictionary<string, object> d = new Dictionary<string, object>();
            //获取数据总数(注意是总数,不是一页中数据的条数)
            DataTable dTable = data.GetTable(sql);
            d.Add("total", data.GetTable(sql).Rows.Count);
            //获取page页的数据
            dTable = dTable.AsEnumerable().Skip((page - 1) * rows).Take(rows).CopyToDataTable();
            for (int i = 0; i < dTable.Rows.Count; i++)
            {
                GCInfo gc = new GCInfo();
                gc.Name = dTable.Rows[i]["工厂名称"].ToString();
                gc.Boss = dTable.Rows[i]["工厂负责人"].ToString();
                gc.Address = dTable.Rows[i]["工厂地址"].ToString();
                gc.PostAddress = dTable.Rows[i]["工厂邮编"].ToString();
                gc.Introduce = dTable.Rows[i]["工厂介绍"].ToString();
                gc.Phone = dTable.Rows[i]["工厂电话"].ToString();
                gc.Email = dTable.Rows[i]["工厂电子邮箱"].ToString();
                gc.JTName = dTable.Rows[i]["集团名称"].ToString();
                gc.JW = dTable.Rows[i]["工厂经纬度"].ToString();
                gcs.Add(gc);
            }
            d.Add("rows", gcs);
            return JsonConvert.SerializeObject(d);
        }

        /// <summary>
        /// 获取工厂所有机组的状态
        /// </summary>
        /// <param name="name"></param>
        /// <returns></returns>
        public string GetAllGCJZInfo(string name)
        {
            string sql = "SELECT * FROM `web`.`机组表` where `工厂名称`='" + name + "'";

            List<GCJZStatus> gcs = new List<GCJZStatus>();
            DataTable dTable = data.GetTable(sql);
            for (int i = 0; i < dTable.Rows.Count; i++)
            {
                GCJZStatus jz = new GCJZStatus();
                jz.Name = dTable.Rows[i]["机组名称"].ToString();
                jz.Status = dTable.Rows[i]["状态"].ToString();
                gcs.Add(jz);
            }

            return JsonHelper<GCJZStatus>.ListToJsonString(gcs);
        }

        /// <summary>
        /// 删除工厂信息
        /// </summary>
        /// <param name="user">工厂名称</param>
        /// <returns>更新是否成功</returns>
        public bool Delete(string name)
        {
            string sql = "Delete from `web`.`工厂表` WHERE `工厂名称` = '" + name + "'";
            return data.ExecSql(sql);
        }

        /// <summary>
        /// 更新工厂信息
        /// </summary>
        /// <param name="gc">工厂信息</param>
        /// <returns>更新是否成功</returns>
        public bool Update(GCInfo gc)
        {
            string sql = "Update `web`.`工厂表` SET " +
                "`工厂负责人` = '" + gc.Boss + "'," +
                "`工厂地址` = '" + gc.Address + "'," +
                "`工厂邮编` = '" + gc.PostAddress + "'," +
                "`工厂介绍` = '" + gc.Introduce + "'," +
                "`工厂电话` = '" + gc.Phone + "'," +
                "`工厂电子邮箱` = '" + gc.Email + "'," +
                "`集团名称` = '" + gc.JTName + "'," +
                "`工厂经纬度` = '" + gc.JW + "'" + " WHERE `工厂名称` = '" + gc.Name + "'";
            return data.ExecSql(sql);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

3.实体

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace Model
{
    public class GCJZStatus
    {
        public string Name { get; set; }
        public string Status { get; set; }
    }
}

猜你喜欢

转载自blog.csdn.net/zyxhangiian123456789/article/details/80895041
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022