c#绘制卡片形式展现

最新推荐文章于 2024-05-28 09:37:04 发布

sweet_infancy

最新推荐文章于 2024-05-28 09:37:04 发布

阅读量2.3k

点赞数 1

分类专栏： DEV c# 工作日志文章标签： c#

本文链接：https://blog.csdn.net/qq_40982465/article/details/108297124

版权

c# 同时被 3 个专栏收录

17 篇文章 1 订阅

订阅专栏

DEV

11 篇文章 0 订阅

订阅专栏

工作日志

7 篇文章 0 订阅

订阅专栏

HtmlRender

引用HtmlRenderer.dll和HtmlRenderer.WinForms.dll
在项目下建资源文件项目->Properties ->Resources.resx
在Resources新增自己需要的行内容，值为html,如下html所示
在代码内部，将参数传给html，然后把html添加给容器，展示容器
展现图

在这里插入图片描述

<html>
<head>
    <meta charset="utf-8">
    <title>医院信息平台</title>
    <meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;IE=7;IE=6">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->    <!--[if lt IE 9]>  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>    <![endif]-->
    <style>
        html {
            font-family: sans-serif;
        }

        body {
            margin: 0;
            font-size: 12px;
            color: #666;
            background-color: #FFF;
        }

        ul {
            list-style: none;
            margin: 0;
            -webkit-padding-start: 0px;
        }

        .oh {
            overflow: hidden;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .mt10 {
            margin-top: 10px;
        }


        .ml10 {
            margin-left: 10px;
        }

        .ml20 {
            margin-left: 20px;
        }

        .cardTop {
            padding: 1px 5px;
            border-bottom: 1px solid #ddd;
        }

        td {
            /*width: 19%;
            padding: 5%;*/
            vertical-align: middle;
            font-size:12px;
            line-height:24px;
        }

        .pl10{padding-left:10px;}
        .pl20{padding-left:30px;}

        .item {
            /*float: left;*/
            width: 270px;
            min-width: 200px;
            border-left: 2px solid;
            background-color: #fff;
            margin: 5px;
        }

        .cardBody {
            padding: 5px 10px 0px 10px;
        }

            .cardBody .title {
                color: #999;
            }
        /* 左侧边框颜色 */

        .border1 {
            border-left-color: {{nurselevecolor}}  !important;
        }
        /* 住院文字颜色 */

        .text1 {
            color:#7cbab6;
            float:right;
        }		
        /* 圆点 */

        .state {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin-right:10px;
        }

        .state1 {
            background-color: #599aee;
        }
        .font14{font-size:14px;}
       #state{float:left; margin-top:20px;}
	   
	   /* 星星颜色：绿色 */
	   .star0 {
            color:#5cfe20;
        }
		/* 星星颜色1：黄色 */
	   .star1 {
            color:#f6fe20;
        }
		/* 星星颜色：橙色 */
	   .star2 {
            color:#fe9c20;
        }
		/* 星星颜色：红色 */
	   .star3 {
            color:#fe2032;
        }
		/* 星星颜色：紫色 */
	   .star4 {
            color:#d320fe;
        }
		/* 星星颜色：白色 */
	   .star5 {
            color:#ffffff;
        }
    </style>
</head>
<body>
    <div class="border1 item">
        <div>
            <div class="cardTop oh">
             <table><tr><td width="15"><img src="{{nurseleve}}" /></td><td width="145"><b class="font14">{{bed}}</b></td><td width="80">
                <b><a href="{{id}}" style="color:#666;text-decoration:none; " class="font14">{{id}}</a></b></td></tr></talbe>

            </div>
            <div class="cardBody">
               <table width=100%>
               <tr><td><b>{{name}}</b></td>
                       <td>{{sex}}</td>
                       <td>{{age}}</td>
<td class="text1"><b>{{status}}</b></td></tr>
</table>
               <table>
               <tr><td class="title">主治：</td><td>{{doctor}}</td><td class="pl10">{{indays}}天</td><td class="text1"><b>{{leave}}</b></td></tr>
               <tr><td class="title">医保：</td><td colspan=3>{{costtype}}</td></tr>
               <tr><td class="title">入院：</td><td colspan=2>{{indate}}</td><td class="text1 pl20"><b>{{card}}</b></td></tr>
               <tr><td class="title">诊断：</td><td colspan=2>{{diag}}</td><td class="text1 pl20"><b>{{pathway}}&nbsp;&nbsp;{{drugfast}}</b></td></tr>
			   <tr><td colspan=2>&nbsp;</td><td class = "{{starColorClass1}}" >★</td><td class = "{{starColorClass2}}">★</td></tr>
             </table>
                
            </div>
        </div>
    </div>
</body>
</html>

private void 往panel填充html样式(数据源)
        {
            FlowLayoutPanel panel = new FlowLayoutPanel();

            //panel.Controls.Clear();
            panel.Dock = DockStyle.Fill;
            panel.AutoScroll = true;
            //  panel.FlowDirection = FlowDirection.TopDown;
            panel.SuspendLayout();
            panel.BackColor = Color.FromArgb(245, 245, 245);
            panelPatient.Controls.Clear();
            
            foreach (var group in 数据源)
            {
                //panel循环添加单个卡片
                panel.Controls.Add(new HtmlLabel
                {
                    AllowDrop = false,
                    Tag = group.Key,
                    Text = Properties.Resources.PatientWardNameTemplet.Replace("{{ward_name}}", GetWardName(group.Key, Screen.PrimaryScreen.Bounds.Width))
                });
                //遍历，添加每个特定病人的床头卡信息
                foreach (var item in group.OrderBy(g => g.BED_NO).ToList())
                {
                    HtmlLabel lblItem = new HtmlLabel();
                    lblItem.AllowDrop = true;
                    lblItem.Tag = item.MR_ID;
                    string[] rItem = item.RISK_ASSESSMENT?.Split(',');
                    string lblText = "";
                    //替换数据生成新卡片
                    lblText = Properties.Resources.PatientListHtmlTemplet.Replace("{{bed}}", PubMethodPatient.GetPatientBedInfo(item.BED_NO, item.WARD_ID ?? 0))
                        .Replace("{{id}}", item.INP_NO.ToString())
                        .Replace("{{name}}", item.PATIENT_NAME)
                        .Replace("{{sex}}", item.PATIENT_SEX)
                        .Replace("{{age}}", item.AGE)
                        .Replace("{{status}}", GetPatTypeColorText(item))
                        .Replace("{{doctor}}", item.DOCTOR_NAME)
                        .Replace("{{indays}}", item.HOSDAYS)
                        .Replace("{{indate}}", PatientFunc.NullDateToFormatStr(item.WARD_ADMISSION_DATE, "yyyy-MM-dd HH:mm"))
                        .Replace("{{diag}}", PatientFunc.NullToSubstring(item.DIAG_NAME, 6, "..."))
                        .Replace("{{nurseleve}}", GetNurLevelImage(item)) //护理等级
                        .Replace("{{nurselevecolor}}", GetSiftColor(item)) //医保类型
                        .Replace("{{card}}", GetCard(item))
                        .Replace("{{leave}}", GetLeave(item))
                        .Replace("{{pathway}}", GetPathWay(item))
                        .Replace("{{drugfast}}", GetDrugFast(item))
                        .Replace("{{costtype}}", PatientHelper.GetSifType(item.TREATMENT_TYPE));//医保类型
                        //.Replace("{starColorClass1}", GetStarColor(item.RISK_ASSESSMENT.Split(',')[0]));
                    if(rItem == null || rItem.Length == 0 )
                    {
                        lblText = lblText.Replace("{{starColorClass1}}", GetStarColor("5"));
                        lblText = lblText.Replace("{{starColorClass2}}", GetStarColor("5"));
                    }
                    else if(rItem != null && rItem.Length > 0)
                    {
                        if(rItem.Length == 1)
                        {
                            lblText = lblText.Replace("{{starColorClass1}}", GetStarColor(rItem[0].Trim()));
                            lblText = lblText.Replace("{{starColorClass2}}", GetStarColor("5"));
                        }
                        else
                        {
                            lblText = lblText.Replace("{{starColorClass1}}", GetStarColor(rItem[0].Trim()));
                            lblText = lblText.Replace("{{starColorClass2}}", GetStarColor(rItem[1].Trim()));
                        }
                    }
                    lblItem.Text = lblText;
                    //将当前控件的事件加在画好的卡片上
                    lblItem.MouseDown += LblItem_MouseDown;
                    lblItem.MouseDoubleClick += LblItem_MouseDoubleClick;
                    lblItem.ContextMenuStrip = this.contextMenuStrip;
                    lblItem.IsContextMenuEnabled = false;
                    lblItem.IsSelectionEnabled = false;
                    //panel添加一个html格式的展示卡片
                    panel.Controls.Add(lblItem);
                }
            }
            //恢复正常的布局
            panel.ResumeLayout(false);
            //赋值给最外层的容器
            panelPatient.Controls.Add(panel);
            panel.Focus();
        }

gridControl直接画不同的格式

添加一个gridControl
进入设计界面，设计展现方式
也可以自定义设计，保存设计模板.xml即可

//个例自定义展示卡片
 private void barButtonItem13_ItemClick(object sender, ItemClickEventArgs e)
        {
            try
            {
                string fileName =Application.StartupPath + "\\BedsideCard\\BedsideCard-" + SystemParm.LoginUser.USER_NAME + ".xml";
                if (System.IO.File.Exists(fileName) == false)
                {
                    MsgHelper.ShowMessage("错误", "没有找到自定义卡文件，请先设置！");
                    return;
                }
                layoutView.RestoreLayoutFromXml(fileName); //加载布局
            }
            catch (Exception ex)
            {
                MsgHelper.ShowMessage("IO", ex.Message);
                ErrLog.WriteLog(ex.Message);
            }
        }

在这里插入图片描述

sweet_infancy

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
c#绘制卡片形式展现

HtmlRender引用HtmlRenderer.dll和HtmlRenderer.WinForms.dll在项目下建资源文件项目->Properties ->Resources.resx在Resources新增自己需要的行内容，值为html,如下html所示在代码内部，将参数传给html，然后把html添加给容器，展示容器展现图<html><head> <meta charset="utf-8"> <title&g
复制链接

扫一扫